Skip to content

Commit

Permalink
Closed #140
Browse files Browse the repository at this point in the history
  • Loading branch information
@shiyiya
shiyiya committed Oct 18, 2024
1 parent efdbe22 commit 591de88
Show file tree
Hide file tree
Showing 10 changed files with 937 additions and 863 deletions.
37 changes: 20 additions & 17 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@
"pnpm": ">=6"
},
"author": "shiyiya",
"keywords": ["oplayer", "video-player"],
"keywords": [
"oplayer",
"video-player"
],
"scripts": {
"watch": "pnpm --parallel run start",
"start": "pnpm run watch",
Expand All @@ -31,31 +34,31 @@
"lint": "prettier -w ./packages/*/**/*.ts"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/core": "^7.25.8",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-destructuring": "^7.24.8",
"@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
"@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
"@babel/plugin-transform-object-rest-spread": "^7.24.7",
"@babel/plugin-transform-parameters": "^7.24.7",
"@babel/plugin-transform-spread": "^7.24.7",
"@babel/plugin-transform-template-literals": "^7.24.7",
"@changesets/cli": "^2.27.8",
"@babel/plugin-transform-destructuring": "^7.25.7",
"@babel/plugin-transform-logical-assignment-operators": "^7.25.8",
"@babel/plugin-transform-nullish-coalescing-operator": "^7.25.8",
"@babel/plugin-transform-object-rest-spread": "^7.25.8",
"@babel/plugin-transform-parameters": "^7.25.7",
"@babel/plugin-transform-spread": "^7.25.7",
"@babel/plugin-transform-template-literals": "^7.25.7",
"@changesets/cli": "^2.27.9",
"@rollup/plugin-babel": "^6.0.4",
"@types/node": "^20.16.5",
"@vitejs/plugin-react": "^4.3.1",
"@types/node": "^20.16.12",
"@vitejs/plugin-react": "^4.3.2",
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
"concurrently": "^8.2.2",
"cross-env": "^7.0.3",
"jsdom": "^24.1.3",
"lint-staged": "^15.2.10",
"nx": "^19.7.3",
"nx": "^19.8.6",
"prettier": "^3.3.3",
"rimraf": "^5.0.10",
"terser": "^5.32.0",
"tslib": "^2.7.0",
"typescript": "^5.6.2",
"vite": "^5.4.5",
"terser": "^5.36.0",
"tslib": "^2.8.0",
"typescript": "^5.6.3",
"vite": "^5.4.9",
"vite-plugin-banner": "^0.7.1",
"vite-plugin-merge-exports": "^0.0.0",
"vitest": "^1.6.0"
Expand Down
4 changes: 0 additions & 4 deletions packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
"main": "./dist/index.es.js",
"types": "./dist/src/index.d.ts",
"browser": "./dist/index.min.js",
"exports": {
"import": "./dist/index.es.js",
"require": "./dist/index.min.js"
},
"sideEffects": false,
"author": "shiyiya",
"homepage": "https://github.com/shiyiya/oplayer",
Expand Down
2 changes: 1 addition & 1 deletion packages/danmaku/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"IE 11"
],
"dependencies": {
"danmaku": "^2.0.6"
"danmaku": "^2.0.7"
},
"peerDependencies": {
"@oplayer/core": ">=1.0.0"
Expand Down
8 changes: 4 additions & 4 deletions packages/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@
"@oplayer/torrent": "workspace:*",
"@oplayer/ui": "workspace:*",
"mdx-embed": "^1.1.2",
"next": "^14.2.11",
"next": "^14.2.15",
"nextra": "^2.13.4",
"nextra-theme-docs": "^2.13.4",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"sass": "^1.78.0"
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.1",
"sass": "^1.80.2"
}
}
2 changes: 1 addition & 1 deletion packages/hls/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,6 @@
},
"devDependencies": {
"@oplayer/core": "workspace:*",
"hls.js": "^1.5.15"
"hls.js": "^1.5.17"
}
}
2 changes: 1 addition & 1 deletion packages/plugins/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,6 @@
"chokidar": "^3.6.0",
"glob": "^10.4.5",
"m3u8-parser": "^7.2.0",
"vite-plugin-css-injected-by-js": "^3.5.1"
"vite-plugin-css-injected-by-js": "^3.5.2"
}
}
4 changes: 2 additions & 2 deletions packages/react/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@oplayer/react",
"version": "1.2.10",
"version": "1.2.11-beta.0",
"description": "React wrapper for oplayer.",
"type": "module",
"main": "./dist/index.es.js",
Expand Down Expand Up @@ -28,7 +28,7 @@
},
"devDependencies": {
"@oplayer/core": "workspace:*",
"@types/react": "^18.3.5",
"@types/react": "^18.3.11",
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
Expand Down
178 changes: 82 additions & 96 deletions packages/react/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,124 +12,110 @@ import {
useRef
} from 'react'

export interface ReactOPlayerProps extends PlayerOptions {
export interface ReactOPlayerProps extends Omit<PlayerOptions, 'source'> {
playing?: boolean
duration?: number
aspectRatio?: number
plugins?: PlayerPlugin[]
onEvent?: (e: PlayerEvent) => void
source?: Source | Promise<Source>
}

const ReactOPlayer = forwardRef(
(props: ReactOPlayerProps & { source?: Source | Promise<Source> }, ref: Ref<Player | null>) => {
const { playing, duration, aspectRatio = 9 / 16, plugins = [], onEvent, ...rest } = props
const ReactOPlayer = forwardRef((props: ReactOPlayerProps, ref: Ref<Player | null>) => {
const { playing, duration, aspectRatio = 9 / 16, plugins = [], onEvent, source, ...rest } = props

const onEventRef = useRef(onEvent)
onEventRef.current = onEvent
const onEventRef = useRef(onEvent)
onEventRef.current = onEvent

const player = useRef<Player | null>(null)
const preSource = usePrevious(rest.source)
const player = useRef<Player | null>(null)
const preSource = usePrevious(source)

const isReady = player.current && player.current.$root
const isReady = player.current && player.current.$root

const onRefChange = useCallback((node: HTMLDivElement) => {
if (node !== null && !isReady) {
player.current = Player.make(node, rest).use(plugins).create()
if (typeof duration == 'number') player.current.seek(duration / 1000)
if (onEvent) {
player.current.on((payload: PlayerEvent) => onEventRef.current?.(payload))
}
const onRefChange = useCallback((node: HTMLDivElement) => {
if (node !== null && !isReady) {
player.current = Player.make(node, rest).use(plugins).create()
if (source instanceof Promise || (source as Source).src) player.current.changeSource(source!)
if (typeof duration == 'number') player.current.seek(duration / 1000)
if (onEvent) {
player.current.on((payload: PlayerEvent) => onEventRef.current?.(payload))
}
}, [])

useEffectIf(
isReady,
() => {
if (playing) {
if (!player.current!.isPlaying) player.current!.play()
} else {
if (player.current!.isPlaying) player.current!.pause()
}
},
[playing]
)

useEffectIf(
isReady,
() => {
if (
(rest.source instanceof Promise && preSource != rest.source) ||
(rest.source?.src && preSource?.src !== rest.source.src)
) {
player.current!.changeSource(rest.source)
}
},
[rest.source]
)

useEffectIf(
isReady && typeof duration === 'number',
() => {
player.current!.seek(duration! / 1000)
},
[duration]
)
}
}, [])

useEffectIf(
isReady,
() => {
if (rest.muted) {
player.current!.mute()
} else {
player.current!.unmute()
}
},
[rest.muted]
)
useEffectIf(isReady, () => {
if (playing) {
if (!player.current!.isPlaying) player.current!.play()
} else {
if (player.current!.isPlaying) player.current!.pause()
}
}, [playing])

useEffectIf(isReady, () => {
if (
source &&
(source instanceof Promise
? preSource != source
: source.src && (preSource as Source)?.src !== source.src)
) {
player.current!.changeSource(source)
}
}, [source])

useEffectIf(
isReady && typeof duration === 'number',
() => {
player.current!.seek(duration! / 1000)
},
[duration]
)

useEffectIf(isReady, () => {
if (rest.muted) {
player.current!.mute()
} else {
player.current!.unmute()
}
}, [rest.muted])

useEffectIf(
isReady,
() => {
player.current!.setPlaybackRate(rest.playbackRate!)
},
[rest.playbackRate]
)
useEffectIf(isReady, () => {
player.current!.setPlaybackRate(rest.playbackRate!)
}, [rest.playbackRate])

useEffect(() => {
return () => player.current?.destroy()
}, [])
useEffect(() => {
return () => player.current?.destroy()
}, [])

useImperativeHandle(ref, () => player.current, [])
useImperativeHandle(ref, () => player.current, [])

return useMemo(() => {
if (aspectRatio == 0) {
return <div ref={onRefChange}></div>
}
return useMemo(() => {
if (aspectRatio == 0) {
return <div ref={onRefChange}></div>
}

return (
return (
<div
style={{
width: '100%',
paddingTop: `${aspectRatio * 100}%`,
backgroundColor: '#f4f4f4',
position: 'relative'
}}
>
<div
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
paddingTop: `${aspectRatio * 100}%`,
backgroundColor: '#f4f4f4',
position: 'relative'
height: '100%'
}}
>
<div
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%'
}}
ref={onRefChange}
></div>
</div>
)
}, [])
}
)
ref={onRefChange}
></div>
</div>
)
}, [])
})

const useEffectIf = (where: any, cb: EffectCallback, deps?: DependencyList): void => {
useEffect(() => {
Expand Down
6 changes: 1 addition & 5 deletions packages/ui/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
{
"name": "@oplayer/ui",
"version": "1.3.4-beta.0",
"version": "1.3.4-beta.1",
"description": "ui plugin for oplayer",
"type": "module",
"main": "./dist/index.es.js",
"types": "./dist/src/index.d.ts",
"browser": "./dist/index.min.js",
"exports": {
"import": "./dist/index.es.js",
"require": "./dist/index.min.js"
},
"sideEffects": false,
"author": "shiyiya",
"homepage": "https://github.com/shiyiya/oplayer",
Expand Down
Loading

0 comments on commit 591de88

Please sign in to comment.