[CastIt.Server.ClientApp] Minor fixes

CastIt.Server/ClientApp/package.json

@@ -14,6 +14,7 @@
     "notistack": "^1.0.10",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
+    "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.2",
     "react-localization": "^1.0.17",
     "react-router-dom": "^5.2.0",

CastIt.Server/ClientApp/src/components/player/player_current_file.tsx

@@ -33,11 +33,7 @@ function PlayerCurrentFile() {
 
     useEffect(() => {
         const playerStatusChangedSubscription = onPlayerStatusChanged.subscribe((status) => {
-            if (!status) {
-                return;
-            }
-
-            if (!status.playedFile) {
+            if (!status || !status.playedFile) {
                 setState(initialState);
                 return;
             }

CastIt.Server/ClientApp/src/context/castit_hub.context.tsx

@@ -1,10 +1,12 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { CastItHubService, onClientDisconnected } from '../services/castithub.service';
+import { CastItHubService, onClientDisconnected, onPlayerStatusChanged } from '../services/castithub.service';
 import Loading from '../components/loading';
 import { useSnackbar } from 'notistack';
 import translations from '../services/translations';
 import { Button } from '@material-ui/core';
 import NothingFound from '../components/nothing_found';
+import usePageVisibility from '../hooks/use_page_visibility.hook';
+import { isMobile, isTablet } from 'react-device-detect';
 
 interface ICastItHubContext {
     connection: CastItHubService;
@@ -27,6 +29,8 @@ export const CastItHubContextProvider = (children: any): JSX.Element => {
 
     const onConnected = useCallback(() => setState((s) => ({ ...s, isConnected: true, isError: false })), []);
 
+    const isPageVisible = usePageVisibility();
+
     const onConnectionFailed = useCallback(
         (error: any) => {
             console.log(error);
@@ -45,18 +49,35 @@ export const CastItHubContextProvider = (children: any): JSX.Element => {
     }, [hub.connection, onConnected, onConnectionFailed]);
 
     useEffect(() => {
-        const onClientDisconnectedSubscription = onClientDisconnected.subscribe(() =>
-            setState((s) => ({ ...s, isConnected: false, isError: true }))
-        );
+        const onClientDisconnectedSubscription = onClientDisconnected.subscribe(() => {
+            onPlayerStatusChanged.next(null);
+            setState((s) => ({ ...s, isConnected: false, isError: true }));
+        });
         return () => {
             onClientDisconnectedSubscription.unsubscribe();
         };
     }, []);
 
+    //This one is for desktop
     useEffect(() => {
-        handleConnect();
+        if (!isMobile && !isTablet) {
+            handleConnect();
+        }
     }, [handleConnect]);
 
+    //And this one is for mobile / tablet
+    useEffect(() => {
+        if (!isMobile && !isTablet) {
+            return;
+        }
+
+        if (isPageVisible) {
+            handleConnect();
+        } else {
+            hub.connection.disconnect();
+        }
+    }, [isPageVisible, handleConnect, hub.connection]);
+
     if (state.isError) {
         return (
             <NothingFound text={translations.connectionFailedMsg}>

CastIt.Server/ClientApp/src/hooks/use_page_visibility.hook.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+import { isSupportedLocal, isVisible, vendorEvent } from '../utils/visibility';
+
+const usePageVisibility = () => {
+    const initiallyVisible = isVisible();
+    const [state, setState] = useState(initiallyVisible);
+
+    useEffect(() => {
+        if (isSupportedLocal) {
+            const handler = () => {
+                const currentlyVisible = isVisible();
+                setState(currentlyVisible);
+            };
+
+            document.addEventListener(vendorEvent!.event, handler);
+
+            return () => {
+                document.removeEventListener(vendorEvent!.event, handler);
+            };
+        }
+    }, []);
+
+    return state;
+};
+
+export default usePageVisibility;

CastIt.Server/ClientApp/src/utils/visibility.ts

@@ -0,0 +1,61 @@
+interface IVenderEvents {
+    hidden: string;
+    event: string;
+    state: string;
+}
+
+const vendorEvents: IVenderEvents[] = [
+    {
+        hidden: 'hidden',
+        event: 'visibilitychange',
+        state: 'visibilityState',
+    },
+    {
+        hidden: 'webkitHidden',
+        event: 'webkitvisibilitychange',
+        state: 'webkitVisibilityState',
+    },
+    {
+        hidden: 'mozHidden',
+        event: 'mozvisibilitychange',
+        state: 'mozVisibilityState',
+    },
+    {
+        hidden: 'msHidden',
+        event: 'msvisibilitychange',
+        state: 'msVisibilityState',
+    },
+    {
+        hidden: 'oHidden',
+        event: 'ovisibilitychange',
+        state: 'oVisibilityState',
+    },
+];
+
+const hasDocument = typeof document !== 'undefined';
+export const isSupported = hasDocument && Boolean(document.addEventListener);
+
+export const vendorEvent = ((): IVenderEvents | null => {
+    if (!isSupported) {
+        return null;
+    }
+    for (let event of vendorEvents) {
+        if (event.hidden in document) {
+            return event;
+        }
+    }
+    // otherwise it's not supported
+    return null;
+})();
+
+export const isSupportedLocal = isSupported && vendorEvent;
+
+export const isVisible = () => {
+    if (!vendorEvent) {
+        return true;
+    }
+
+    const hidden = vendorEvent.hidden as keyof Document;
+    const currentlyVisible = !document[hidden];
+    return currentlyVisible;
+};