diff --git a/config/paths.js b/config/paths.js index 4e3d30e..be85222 100644 --- a/config/paths.js +++ b/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 => - fs.existsSync(resolveFn(`${filePath}.${extension}`)) + const extension = moduleFileExtensions.find((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; diff --git a/example/appComponent.tsx b/example/appComponent.tsx new file mode 100644 index 0000000..a45a420 --- /dev/null +++ b/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( + 'https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4', + ); + const videoRef = useRef(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 ( + <> + + + + + + + + + + + ); +}); + +export default AppComponent; diff --git a/example/index.tsx b/example/index.tsx new file mode 100644 index 0000000..060fa23 --- /dev/null +++ b/example/index.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './appComponent'; +ReactDOM.render(, document.getElementById('root')); diff --git a/package.json b/package.json index 857ca16..02276f4 100644 --- a/package.json +++ b/package.json @@ -160,6 +160,5 @@ "@types/webpack-env": "^1.16.0", "sass": "^1.32.13", "svg-sprite-loader": "^6.0.7" - }, - "homepage": "/jol/" + } } diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index ce2b3c4..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index 0cc3381..2433f80 100644 --- a/public/index.html +++ b/public/index.html @@ -2,12 +2,10 @@ - - JoL-player diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 45b8cb8..0000000 --- a/public/manifest.json +++ /dev/null @@ -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" -} diff --git a/src/app.ts b/src/app.ts deleted file mode 100644 index 482f018..0000000 --- a/src/app.ts +++ /dev/null @@ -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; diff --git a/src/app.tsx b/src/app.tsx new file mode 100644 index 0000000..060fa23 --- /dev/null +++ b/src/app.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './appComponent'; +ReactDOM.render(, document.getElementById('root')); diff --git a/src/appComponent.tsx b/src/appComponent.tsx index 0ef91a5..4407402 100644 --- a/src/appComponent.tsx +++ b/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) { diff --git a/src/index.tsx b/src/index.tsx index 060fa23..717e8f2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,5 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './appComponent'; -ReactDOM.render(, document.getElementById('root')); +import * as JoLPlayerType from '@/interface'; +import JoLPlayer from '@/core/index'; +import '@/icons/'; +export { JoLPlayerType }; +export default JoLPlayer;