Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Video uses StemioVideo to select video implementation

Browse source
This commit is contained in:
nklhrstv 2020-12-15 11:41:52 +02:00
parent 077507607f
commit 0ad91c1410
1 changed files with 43 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/routes/Player/Video/Video.js
View file

@ -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' });
};