refactor(Player): move statistics logic to a hook

src/routes/Player/Player.js

@@ -22,6 +22,7 @@ const SpeedMenu = require('./SpeedMenu');
 const Video = require('./Video');
 const usePlayer = require('./usePlayer');
 const useSettings = require('./useSettings');
+const useStatistics = require('./useStatistics');
 const styles = require('./styles');
 
 const Player = ({ urlParams, queryParams }) => {
@@ -36,6 +37,7 @@ const Player = ({ urlParams, queryParams }) => {
     const [player, videoParamsChanged, timeChanged, pausedChanged, ended] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const streamingServer = useStreamingServer();
+    const statistics = useStatistics(player, streamingServer);
     const routeFocused = useRouteFocused();
     const toast = useToast();
     const [, , , toggleFullscreen] = useFullscreen();
@@ -363,26 +365,6 @@ const Player = ({ urlParams, queryParams }) => {
             }
         }
     }, [player.nextVideo, videoState.time, videoState.duration]);
-    React.useEffect(() => {
-        if (player.selected && player.selected.stream && typeof player.selected.stream.infoHash === 'string' && typeof player.selected.stream.fileIdx === 'number') {
-            const { infoHash, fileIdx } = player.selected.stream;
-            const getStatistics = () => {
-                core.transport.dispatch({
-                    action: 'StreamingServer',
-                    args: {
-                        action: 'GetStatistics',
-                        args: {
-                            infoHash,
-                            fileIdx,
-                        }
-                    }
-                });
-            };
-            getStatistics();
-            const statisticsInterval = setInterval(getStatistics, 5000);
-            return () => clearInterval(statisticsInterval);
-        }
-    }, [player.selected]);
     React.useEffect(() => {
         if (!defaultSubtitlesSelected.current) {
             const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
@@ -692,7 +674,7 @@ const Player = ({ urlParams, queryParams }) => {
                 metaItem={player.metaItem}
                 nextVideo={player.nextVideo}
                 stream={player.selected !== null ? player.selected.stream : null}
-                statistics={streamingServer.statistics}
+                statistics={statistics}
                 onPlayRequested={onPlayRequested}
                 onPauseRequested={onPauseRequested}
                 onNextVideoRequested={onNextVideoRequested}
@@ -725,8 +707,7 @@ const Player = ({ urlParams, queryParams }) => {
                 statisticsMenuOpen ?
                     <StatisticsMenu
                         className={classnames(styles['layer'], styles['menu-layer'])}
-                        stream={player.selected !== null ? player.selected.stream : null}
-                        statistics={streamingServer.statistics}
+                        {...statistics}
                     />
                     :
                     null

src/routes/Player/StatisticsMenu/StatisticsMenu.js

@@ -5,28 +5,7 @@ const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const styles = require('./styles.less');
 
-const StatisticsMenu = ({ className, stream, statistics }) => {
-    const peers = React.useMemo(() => {
-        return statistics.type === 'Ready' && statistics.content?.peers ?
-            statistics.content.peers
-            :
-            0;
-    }, [statistics]);
-
-    const speed = React.useMemo(() => {
-        return statistics.type === 'Ready' && statistics.content?.downloadSpeed ?
-            (statistics.content.downloadSpeed / 1000 / 1000).toFixed(2)
-            :
-            0;
-    }, [statistics]);
-
-    const completed = React.useMemo(() => {
-        return statistics.type === 'Ready' && statistics.content?.streamProgress ?
-            (statistics.content.streamProgress * 100).toFixed(2)
-            :
-            0;
-    }, [statistics]);
-
+const StatisticsMenu = ({ className, peers, speed, completed, infoHash }) => {
     return (
         <div className={classNames(className, styles['statistics-menu-container'])}>
             <div className={styles['title']}>
@@ -63,7 +42,7 @@ const StatisticsMenu = ({ className, stream, statistics }) => {
                     Info Hash
                 </div>
                 <div className={styles['value']}>
-                    { stream.infoHash }
+                    { infoHash }
                 </div>
             </div>
         </div>
@@ -72,8 +51,10 @@ const StatisticsMenu = ({ className, stream, statistics }) => {
 
 StatisticsMenu.propTypes = {
     className: PropTypes.string,
-    stream: PropTypes.object,
-    statistics: PropTypes.object,
+    peers: PropTypes.number,
+    speed: PropTypes.number,
+    completed: PropTypes.number,
+    infoHash: PropTypes.string,
 };
 
 module.exports = StatisticsMenu;

src/routes/Player/useStatistics.js

@@ -0,0 +1,81 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useServices } = require('stremio/services');
+
+const useStatistics = (player, streamingServer) => {
+    const { core } = useServices();
+
+    const statistics = React.useMemo(() => {
+        return streamingServer.statistics?.type === 'Ready' ?
+            streamingServer.statistics.content
+            :
+            null;
+    }, [streamingServer.statistics]);
+
+    const stream = React.useMemo(() => {
+        return player?.selected?.stream ?
+            player.selected.stream
+            :
+            null;
+    }, [player.selected]);
+
+    const infoHash = React.useMemo(() => {
+        return stream?.infoHash ?
+            stream?.infoHash
+            :
+            null;
+    }, [stream]);
+
+    const peers = React.useMemo(() => {
+        return statistics?.peers ?
+            statistics.peers
+            :
+            0;
+    }, [statistics]);
+
+    const speed = React.useMemo(() => {
+        return statistics?.downloadSpeed ?
+            parseFloat((statistics.downloadSpeed / 1000 / 1000).toFixed(2))
+            :
+            0;
+    }, [statistics]);
+
+    const completed = React.useMemo(() => {
+        return statistics?.streamProgress ?
+            parseFloat((statistics.streamProgress * 100).toFixed(2))
+            :
+            0;
+    }, [statistics]);
+
+    React.useEffect(() => {
+        if (stream) {
+            const { infoHash, fileIdx } = stream;
+            const getStatistics = () => {
+                core.transport.dispatch({
+                    action: 'StreamingServer',
+                    args: {
+                        action: 'GetStatistics',
+                        args: {
+                            infoHash,
+                            fileIdx,
+                        }
+                    }
+                });
+            };
+            getStatistics();
+
+            const statisticsInterval = setInterval(getStatistics, 5000);
+            return () => clearInterval(statisticsInterval);
+        }
+    }, [stream]);
+
+    return {
+        infoHash,
+        peers,
+        speed,
+        completed,
+    };
+};
+
+module.exports = useStatistics;