From fa7aca647647e73d0ab8c216966a9d2274bdcc91 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 5 Mar 2020 17:50:05 +0200
Subject: [PATCH] Player adapted to changes in core

---
 src/routes/Player/Player.js | 110 ++++++++++++++++++------------------
 1 file changed, 54 insertions(+), 56 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 4f66fb1a4..40324fcbe 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -1,34 +1,37 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useSpreadState } = require('stremio/common');
-const Video = require('./Video');
+const { useDeepEqualEffect } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
+const Video = require('./Video');
+const usePlayer = require('./usePlayer');
 const styles = require('./styles');
 
 const Player = ({ urlParams }) => {
+    const player = usePlayer(urlParams);
+    const [state, setState] = React.useReducer(
+        (state, nextState) => ({
+            ...state,
+            ...nextState
+        }),
+        {
+            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 videoRef = React.useRef(null);
-    const stream = React.useMemo(() => {
-        return {
-            // ytId: 'E4A0bcCQke0',
-            url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
-        };
-    }, [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);
@@ -39,42 +42,27 @@ const Player = ({ urlParams }) => {
             dispatch({ observedPropName: propName });
         });
     }, []);
-    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
-        });
-        dispatch({
-            commandName: 'addSubtitlesTracks',
-            commandArgs: {
-                tracks: [
-                    {
-                        url: 'https://raw.githubusercontent.com/caitp/ng-media/master/example/assets/captions/bunny-en.vtt',
-                        origin: 'Github',
-                        label: 'English'
-                    }
-                ]
-            }
-        });
-        dispatch({
-            propName: 'selectedSubtitlesTrackId',
-            propValue: 'https://raw.githubusercontent.com/caitp/ng-media/master/example/assets/captions/bunny-en.vtt'
-        });
-    }, [stream]);
+    const onEnded = React.useCallback(() => {
+        console.log('ended');
+    }, []);
+    const onError = React.useCallback((error) => {
+        console.error(error);
+    }, []);
+    useDeepEqualEffect(() => {
+        if (player.selected === null || player.selected.stream === null) {
+            dispatch({ commandName: 'stop' });
+        } else {
+            dispatch({
+                commandName: 'load',
+                commandArgs: {
+                    stream: player.selected.stream
+                }
+            });
+        }
+    }, [player.selected && player.selected.stream]);
     return (
         <div className={styles['player-container']}>
             <Video
@@ -113,4 +101,14 @@ const Player = ({ urlParams }) => {
     );
 };
 
+Player.propTypes = {
+    urlParams: PropTypes.exact({
+        stream: PropTypes.string,
+        transportUrl: PropTypes.string,
+        type: PropTypes.string,
+        id: PropTypes.string,
+        videoId: PropTypes.string
+    })
+};
+
 module.exports = Player;