Player root component migrated to hooks

src/routes/Player/Player.js

@@ -1,63 +1,64 @@
 const React = require('react');
-const PropTypes = require('prop-types');
 const classnames = require('classnames');
+const { useSpreadState } = require('stremio/common');
 const Video = require('./Video');
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
 const styles = require('./styles');
 
-class Player extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.videoRef = React.createRef();
-
-        this.state = {
-            paused: null,
-            time: null,
-            duration: null,
-            buffering: null,
-            volume: null,
-            muted: null,
-            subtitlesTracks: [],
-            selectedSubtitlesTrackId: null,
-            subtitlesSize: null,
-            subtitlesDelay: null,
-            subtitlesTextColor: null,
-            subtitlesBackgroundColor: null,
-            subtitlesOutlineColor: null
+const Player = ({ urlParams }) => {
+    const videoRef = React.useRef(null);
+    const stream = React.useMemo(() => {
+        return {
+            // ytId: 'E4A0bcCQke0',
+            url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
         };
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextState.paused !== this.state.paused ||
-            nextState.time !== this.state.time ||
-            nextState.duration !== this.state.duration ||
-            nextState.buffering !== this.state.buffering ||
-            nextState.volume !== this.state.volume ||
-            nextState.muted !== this.state.muted ||
-            nextState.subtitlesTracks !== this.state.subtitlesTracks ||
-            nextState.selectedSubtitlesTrackId !== this.state.selectedSubtitlesTrackId ||
-            nextState.subtitlesSize !== this.state.subtitlesSize ||
-            nextState.subtitlesDelay !== this.state.subtitlesDelay ||
-            nextState.subtitlesTextColor !== this.state.subtitlesTextColor ||
-            nextState.subtitlesBackgroundColor !== this.state.subtitlesBackgroundColor ||
-            nextState.subtitlesOutlineColor !== this.state.subtitlesOutlineColor;
-    }
-
-    componentDidMount() {
-        this.dispatch({
-            commandName: 'load',
-            commandArgs: {
-                stream: this.props.stream,
-                ipc: window.shell
-            }
+    }, [urlParams.stream]);
+    const [state, setState] = useSpreadState({
+        paused: null,
+        time: null,
+        duration: null,
+        buffering: null,
+        volume: null,
+        muted: null,
+        subtitlesTracks: [],
+        selectedSubtitlesTrackId: null,
+        subtitlesSize: null,
+        subtitlesDelay: null,
+        subtitlesTextColor: null,
+        subtitlesBackgroundColor: null,
+        subtitlesOutlineColor: null
+    });
+    const dispatch = React.useCallback((args) => {
+        if (videoRef.current !== null) {
+            videoRef.current.dispatch(args);
+        }
+    }, []);
+    const onImplementationChanged = React.useCallback((manifest) => {
+        manifest.props.forEach((propName) => {
+            dispatch({ observedPropName: propName });
         });
-        this.dispatch({
+    }, []);
+    const onEnded = React.useCallback(() => {
+        alert('ended');
+    }, []);
+    const onError = React.useCallback((error) => {
+        alert(error.message);
+        console.error(error);
+    }, []);
+    const onPropChanged = React.useCallback((propName, propValue) => {
+        setState({ [propName]: propValue });
+    }, []);
+    React.useEffect(() => {
+        dispatch({
+            commandName: 'load',
+            commandArgs: { stream }
+        });
+        dispatch({
             propName: 'subtitlesOffset',
             propValue: 18
         });
-        this.dispatch({
+        dispatch({
             commandName: 'addSubtitlesTracks',
             commandArgs: {
                 tracks: [
@@ -69,86 +70,46 @@ class Player extends React.Component {
                 ]
             }
         });
-        this.dispatch({
+        dispatch({
             propName: 'selectedSubtitlesTrackId',
             propValue: 'https://raw.githubusercontent.com/caitp/ng-media/master/example/assets/captions/bunny-en.vtt'
         });
-    }
-
-    onEnded = () => {
-        alert('ended');
-    }
-
-    onError = (error) => {
-        alert(error.message);
-        console.error(error);
-    }
-
-    onPropValue = (propName, propValue) => {
-        this.setState({ [propName]: propValue });
-    }
-
-    onPropChanged = (propName, propValue) => {
-        this.setState({ [propName]: propValue });
-    }
-
-    onImplementationChanged = (manifest) => {
-        manifest.props.forEach((propName) => {
-            this.dispatch({ observedPropName: propName });
-        });
-    }
-
-    dispatch = (args) => {
-        this.videoRef.current && this.videoRef.current.dispatch(args);
-    }
-
-    render() {
-        return (
-            <div className={styles['player-container']}>
-                <Video
-                    ref={this.videoRef}
-                    className={styles['layer']}
-                    onEnded={this.onEnded}
-                    onError={this.onError}
-                    onPropValue={this.onPropValue}
-                    onPropChanged={this.onPropChanged}
-                    onImplementationChanged={this.onImplementationChanged}
-                />
-                <div className={styles['layer']} />
-                <BufferingLoader
-                    className={styles['layer']}
-                    buffering={this.state.buffering}
-                />
-                <ControlBar
-                    className={classnames(styles['layer'], styles['control-bar-layer'])}
-                    modalContainerClassName={styles['modal-container']}
-                    paused={this.state.paused}
-                    time={this.state.time}
-                    duration={this.state.duration}
-                    volume={this.state.volume}
-                    muted={this.state.muted}
-                    subtitlesTracks={this.state.subtitlesTracks}
-                    selectedSubtitlesTrackId={this.state.selectedSubtitlesTrackId}
-                    subtitlesSize={this.state.subtitlesSize}
-                    subtitlesDelay={this.state.subtitlesDelay}
-                    subtitlesTextColor={this.state.subtitlesTextColor}
-                    subtitlesBackgroundColor={this.state.subtitlesBackgroundColor}
-                    subtitlesOutlineColor={this.state.subtitlesOutlineColor}
-                    dispatch={this.dispatch}
-                />
-            </div>
-        );
-    }
-}
-
-Player.propTypes = {
-    stream: PropTypes.object.isRequired
-};
-Player.defaultProps = {
-    stream: Object.freeze({
-        // ytId: 'E4A0bcCQke0',
-        url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
-    })
+    }, [stream]);
+    return (
+        <div className={styles['player-container']}>
+            <Video
+                ref={videoRef}
+                className={styles['layer']}
+                onEnded={onEnded}
+                onError={onError}
+                onPropValue={onPropChanged}
+                onPropChanged={onPropChanged}
+                onImplementationChanged={onImplementationChanged}
+            />
+            <div className={styles['layer']} />
+            <BufferingLoader
+                className={styles['layer']}
+                buffering={state.buffering}
+            />
+            <ControlBar
+                className={classnames(styles['layer'], styles['control-bar-layer'])}
+                modalContainerClassName={styles['modal-container']}
+                paused={state.paused}
+                time={state.time}
+                duration={state.duration}
+                volume={state.volume}
+                muted={state.muted}
+                subtitlesTracks={state.subtitlesTracks}
+                selectedSubtitlesTrackId={state.selectedSubtitlesTrackId}
+                subtitlesSize={state.subtitlesSize}
+                subtitlesDelay={state.subtitlesDelay}
+                subtitlesTextColor={state.subtitlesTextColor}
+                subtitlesBackgroundColor={state.subtitlesBackgroundColor}
+                subtitlesOutlineColor={state.subtitlesOutlineColor}
+                dispatch={dispatch}
+            />
+        </div>
+    );
 };
 
 module.exports = Player;

src/routes/Player/styles.less

@@ -1,13 +1,9 @@
-.player-container, .modal-container {
-    --control-bar-button-size: 60px;
-}
-
 .player-container {
     position: relative;
     z-index: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    background-color: var(--color-backgrounddarker);
 
     .layer {
         position: absolute;