diff --git a/src/routes/Player/Video/Video.js b/src/routes/Player/Video/Video.js index 913c53861..d89e3e931 100644 --- a/src/routes/Player/Video/Video.js +++ b/src/routes/Player/Video/Video.js @@ -3,6 +3,7 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); +const { StremioVideo } = require('@stremio/stremio-video'); const { useLiveRef } = require('stremio/common'); const selectVideoImplementation = require('./selectVideoImplementation'); const styles = require('./styles'); @@ -18,61 +19,58 @@ const Video = React.forwardRef(({ className, ...props }, ref) => { const videoElementRef = React.useRef(null); const videoRef = React.useRef(null); const dispatch = React.useCallback((action) => { - if (action && action.type === 'command' && action.commandName === 'load' && action.commandArgs) { - const Video = selectVideoImplementation(action.commandArgs); - if (videoRef.current === null || videoRef.current.constructor !== Video) { - dispatch({ type: 'command', commandName: 'destroy' }); - videoRef.current = new Video({ - ...action.commandArgs, - containerElement: videoElementRef.current - }); - videoRef.current.on('ended', () => { - if (typeof onEndedRef.current === 'function') { - onEndedRef.current(); - } - }); - videoRef.current.on('error', (args) => { - if (typeof onErrorRef.current === 'function') { - onErrorRef.current(args); - } - }); - videoRef.current.on('propValue', (propName, propValue) => { - if (typeof onPropValueRef.current === 'function') { - onPropValueRef.current(propName, propValue); - } - }); - videoRef.current.on('propChanged', (propName, propValue) => { - if (typeof onPropChangedRef.current === 'function') { - onPropChangedRef.current(propName, propValue); - } - }); - videoRef.current.on('subtitlesTrackLoaded', (track) => { - if (typeof onSubtitlesTrackLoadedRef.current === 'function') { - onSubtitlesTrackLoadedRef.current(track); - } - }); - videoRef.current.on('extraSubtitlesTrackLoaded', (track) => { - if (typeof onExtraSubtitlesTrackLoadedRef.current === 'function') { - onExtraSubtitlesTrackLoadedRef.current(track); - } - }); - if (typeof onImplementationChangedRef.current === 'function') { - onImplementationChangedRef.current(videoRef.current.constructor.manifest); - } - } - } - if (videoRef.current !== null) { try { videoRef.current.dispatch(action); } catch (error) { // eslint-disable-next-line no-console - console.error(videoRef.current.constructor.manifest.name, error); + console.error('StremioVideo', error); } } }, []); React.useImperativeHandle(ref, () => ({ dispatch }), []); React.useEffect(() => { + if (videoElementRef.current !== null) { + videoRef.current = new StremioVideo({ + selectVideoImplementation, + containerElement: videoElementRef.current + }); + videoRef.current.on('ended', () => { + if (typeof onEndedRef.current === 'function') { + onEndedRef.current(); + } + }); + videoRef.current.on('error', (args) => { + if (typeof onErrorRef.current === 'function') { + onErrorRef.current(args); + } + }); + videoRef.current.on('propValue', (propName, propValue) => { + if (typeof onPropValueRef.current === 'function') { + onPropValueRef.current(propName, propValue); + } + }); + videoRef.current.on('propChanged', (propName, propValue) => { + if (typeof onPropChangedRef.current === 'function') { + onPropChangedRef.current(propName, propValue); + } + }); + videoRef.current.on('subtitlesTrackLoaded', (track) => { + if (typeof onSubtitlesTrackLoadedRef.current === 'function') { + onSubtitlesTrackLoadedRef.current(track); + } + }); + videoRef.current.on('extraSubtitlesTrackLoaded', (track) => { + if (typeof onExtraSubtitlesTrackLoadedRef.current === 'function') { + onExtraSubtitlesTrackLoadedRef.current(track); + } + }); + videoRef.current.on('implementationChanged', (manifest) => { + if (typeof onImplementationChangedRef.current === 'function') { + onImplementationChangedRef.current(manifest); + } + }); + } return () => { dispatch({ type: 'command', commandName: 'destroy' }); };