From 77377c9acf26fca0a723ef370fc90aa92a72585b Mon Sep 17 00:00:00 2001 From: lgf <18827634408@163.com> Date: Sat, 21 Aug 2021 10:46:44 +0800 Subject: [PATCH] e --- config/paths.js | 12 ++-- example/appComponent.tsx | 115 +++++++++++++++++++++++++++++++++++++++ example/index.tsx | 4 ++ package.json | 3 +- public/favicon.ico | Bin 4286 -> 0 bytes public/index.html | 2 - public/manifest.json | 15 ----- src/app.ts | 6 -- src/app.tsx | 4 ++ src/appComponent.tsx | 2 +- src/index.tsx | 9 +-- 11 files changed, 135 insertions(+), 37 deletions(-) create mode 100644 example/appComponent.tsx create mode 100644 example/index.tsx delete mode 100644 public/favicon.ico delete mode 100644 public/manifest.json delete mode 100644 src/app.ts create mode 100644 src/app.tsx 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 ce2b3c445d6175f88c1a5469c4009cabbb6eedd0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmcJTO=whC6o6kwi9te?qVsN|RTo7>Tof!Kp`=;JfSCEov~*EgS4Bz*#Z|XXDYQ_N z%)A-X;=)A{v89VrLKZ`iCY0hLh)5~YU5b<}8PnbB zn%j-bo|oO(r0mb8#H26So^Txg?q&~0;NL}7qB?MI9l2ox^XALwkW5Nv=7PKiJDW}0 zkxWujNG)UJ3#Y?J#Qz+=SVJFiQi%tr1A6r%ZS6%eX^*Fq^38Bc7P1+U;j}!4KN9*t zTjz(sT%`S-T&VDC@!Co?HoMg%>Cb}c<54+jTjH&R;$b{C8U z{+^SsdpGIe;-M0gE$2n%ygdnT3f=I#dgr$K z!Cz*Nrm0cqYLi}Y0b|VhI<>)uzlJ`)WrpP4TuwZd=!g0fvjx*5`QC(-dhg?t`gr(9 z^5&L&`D)XgfORLEu`8k7+QMF@EvGNY;V3tHEu(!gq{|lk+x2;gZ`R=7lTmXZI;YV! zoD#lXgz5ZV<*yQlbEzRoHJU?B@MJu`m-rvR7r$cvYF$1oQj>m=LcFQ{#CU%uWy|oF zlpP8=pgx&AeOh8jO^qs>df*Sh{R!JQVo-B|+Dv}lf&WfzQj-hfJb@0=RllqMHUHM& zKY+bE)OAp0Z2$p=5sM{(JJh7i)subQ>Mc!7Z~F>u(Q>AdBggOhgB{ zT0HI#!k)y&&35bWl9{#Gt>dEeTD>OTPOu*z^So-!+wBN)?mKXvs}U4*=}CguQk-w(jxkXeBA?GOKUGRSZlG?W7(6}G-N1j;6lYV|z2UOU&Ur+cCCP)0WAh2};j&WSa1 zU48yv*xg7^IMv*&z8|Um8lU8t#<|AY%j|a}W_=$zB#8GiHFbfyvO;b9n|GoqxI50V z`n6mAt?%US-JExH?7wP@as3xS(~sO0kt}HQs9+^S-zS1G{1H0tO;XU%y+b7SxqhdW4_5dho7I`H90u`Fu A6951J 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;