lgf 3 years ago
parent 285992f38d
commit 77377c9acf
  1. 12
      config/paths.js
  2. 115
      example/appComponent.tsx
  3. 4
      example/index.tsx
  4. 3
      package.json
  5. BIN
      public/favicon.ico
  6. 2
      public/index.html
  7. 15
      public/manifest.json
  8. 6
      src/app.ts
  9. 4
      src/app.tsx
  10. 2
      src/appComponent.tsx
  11. 9
      src/index.tsx

@ -7,7 +7,7 @@ const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
// Make sure any symlinks in the project folder are resolved: // Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637 // https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd()); const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath); const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
// We use `PUBLIC_URL` environment variable or "homepage" field to infer // We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served. // "public path" at which the app is served.
@ -18,7 +18,7 @@ const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
const publicUrlOrPath = getPublicUrlOrPath( const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development', process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage, require(resolveApp('package.json')).homepage,
process.env.PUBLIC_URL process.env.PUBLIC_URL,
); );
const buildPath = process.env.BUILD_PATH || 'build'; const buildPath = process.env.BUILD_PATH || 'build';
@ -39,8 +39,8 @@ const moduleFileExtensions = [
// Resolve file paths in the same order as webpack // Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => { const resolveModule = (resolveFn, filePath) => {
const extension = moduleFileExtensions.find(extension => const extension = moduleFileExtensions.find((extension) =>
fs.existsSync(resolveFn(`${filePath}.${extension}`)) fs.existsSync(resolveFn(`${filePath}.${extension}`)),
); );
if (extension) { if (extension) {
@ -57,7 +57,7 @@ module.exports = {
appBuild: resolveApp(buildPath), appBuild: resolveApp(buildPath),
appPublic: resolveApp('public'), appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'), appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'), appIndexJs: resolveModule(resolveApp, 'src/app'),
appPackageJson: resolveApp('package.json'), appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'), appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'), appTsConfig: resolveApp('tsconfig.json'),
@ -70,6 +70,4 @@ module.exports = {
publicUrlOrPath, publicUrlOrPath,
}; };
module.exports.moduleFileExtensions = moduleFileExtensions; module.exports.moduleFileExtensions = moduleFileExtensions;

@ -0,0 +1,115 @@
import React, { memo, useRef, useEffect, useMemo, useState } from 'react';
import JoLPlayer, { JoLPlayerType } from '../src/index';
const AppComponent = memo(function AppComponent(props) {
const url = useRef<string>(
'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4',
);
const videoRef = useRef<JoLPlayerType.JoLPlayerRef>(null!);
const onProgressMouseDown: JoLPlayerType.callBackType = (val) => {
// console.log(`val`, val);
};
const onProgressMouseUp = (val: any) => {
console.log(`onProgressMouseUp`, val);
};
const onPlay = (val: any) => {
console.log(`播放`, val);
};
const onPause = (val: any) => {
console.log(`暂停`, val);
};
const onTimeChange = (val: any) => {
// if (val.currentTime > 50) {
// videoRef.current.pause();
// }
// console.log(`onTimeChange`, val);
};
const onEndEd = (val: any) => {
// setTimeout(() => {
// videoRef.current.setVideoSrc(
// 'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4',
// );
// videoRef.current.play();
// }, 1000);
console.log(`onEndEd`, val);
};
const onError = () => {
console.log(`onError`);
};
const onvolumechange = (val: any) => {
console.log(`onvolumechange`, val);
};
const videoMethod = (status: string) => {
if (status === 'play') {
videoRef.current.play();
} else if (status === 'pause') {
videoRef.current.pause();
} else if (status === 'load') {
videoRef.current.load();
} else if (status === 'volume') {
videoRef.current.setVolume(86);
} else if (status === 'seek') {
videoRef.current.seek(500);
}
};
const xx = () => {
console.log(`videoRef.current`, videoRef.current);
};
useEffect(() => {
if (videoRef.current) {
}
console.log(`videoRef.current`, videoRef.current);
}, [videoRef.current]);
const toggle = () => {
videoRef.current.setVideoSrc(
'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4',
);
};
return (
<>
<JoLPlayer
ref={videoRef}
option={{
videoSrc: url.current,
width: 750,
height: 420,
theme: '#00D3FF',
poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
language: 'en',
}}
onProgressMouseDown={onProgressMouseDown}
onPlay={onPlay}
onPause={onPause}
onTimeChange={onTimeChange}
onEndEd={onEndEd}
onProgressMouseUp={onProgressMouseUp}
onError={onError}
onvolumechange={onvolumechange}
/>
<JoLPlayer
option={{
videoSrc:
'https://gs-files.oss-accelerate.aliyuncs.com/okr/prod/file/2021/08/10/1628605591454mda-met51bhiqb2sgjzd.mp4',
width: 500,
height: 320,
theme: 'red',
poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG',
pausePlacement: 'center',
}}
/>
<button onClick={() => videoMethod('play')}></button>
<button onClick={() => videoMethod('pause')}></button>
<button onClick={() => videoMethod('load')}></button>
<button onClick={() => videoMethod('volume')}>80</button>
<button onClick={() => videoMethod('seek')}>500s</button>
<button onClick={xx}>3333</button>
<button onClick={toggle}></button>
</>
);
});
export default AppComponent;

@ -0,0 +1,4 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './appComponent';
ReactDOM.render(<App />, document.getElementById('root'));

@ -160,6 +160,5 @@
"@types/webpack-env": "^1.16.0", "@types/webpack-env": "^1.16.0",
"sass": "^1.32.13", "sass": "^1.32.13",
"svg-sprite-loader": "^6.0.7" "svg-sprite-loader": "^6.0.7"
}, }
"homepage": "/jol/"
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

@ -2,12 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<meta name="description" content="一款简洁的ER在线编辑图解器"/> <meta name="description" content="一款简洁的ER在线编辑图解器"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>JoL-player</title> <title>JoL-player</title>
</head> </head>
<body> <body>

@ -1,15 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

@ -1,6 +0,0 @@
import { useVideo } from '@/core/useVideo';
import * as JoLPlayerType from '@/interface';
import JoLPlayer from '@/core/index';
export { useVideo };
export { JoLPlayerType };
export default JoLPlayer;

@ -0,0 +1,4 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './appComponent';
ReactDOM.render(<App />, document.getElementById('root'));

@ -1,5 +1,5 @@
import React, { memo, useRef, useEffect, useMemo, useState } from 'react'; import React, { memo, useRef, useEffect, useMemo, useState } from 'react';
import JoLPlayer, { JoLPlayerType } from './app'; import JoLPlayer, { JoLPlayerType } from './index';
import '@/icons/'; import '@/icons/';
const AppComponent = memo(function AppComponent(props) { const AppComponent = memo(function AppComponent(props) {

@ -1,4 +1,5 @@
import React from 'react'; import * as JoLPlayerType from '@/interface';
import ReactDOM from 'react-dom'; import JoLPlayer from '@/core/index';
import App from './appComponent'; import '@/icons/';
ReactDOM.render(<App />, document.getElementById('root')); export { JoLPlayerType };
export default JoLPlayer;

Loading…
Cancel
Save