e

config/paths.js

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

example/appComponent.tsx

@@ -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;

example/index.tsx

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

package.json

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

public/index.html

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

public/manifest.json

@@ -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"
-}

src/app.ts

@@ -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;

src/app.tsx

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

src/appComponent.tsx

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

src/index.tsx

@@ -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;