fix(app): fix webview going to ttv after background

Author: luke-h1

src/components/StreamPlayer/StreamPlayer.tsx

@@ -751,10 +751,23 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
     const stuckCountRef = useRef<number>(0);
     const appStateRef = useRef<AppStateStatus>(AppState.currentState);
 
+    // Avoid WebView.reload(): with source={{ html, baseUrl: https://www.twitch.tv/ }} it loads twitch.tv, not the embed HTML (issue #524).
+    const remountEmbedWebView = useCallback(() => {
+      setPlayerState(prev => ({
+        ...prev,
+        isReady: false,
+        isBuffering: true,
+      }));
+      needsInitRef.current = true;
+      setWebViewKey(k => k + 1);
+    }, []);
+
+    const forceRefresh = remountEmbedWebView;
+
     useEffect(() => {
       const handleAppStateChange = (nextAppState: AppStateStatus) => {
         if (appStateRef.current === 'background' && nextAppState === 'active') {
-          setWebViewKey(k => k + 1);
+          remountEmbedWebView();
         }
 
         appStateRef.current = nextAppState;
@@ -768,7 +781,7 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
       return () => {
         subscription.remove();
       };
-    }, []);
+    }, [remountEmbedWebView]);
 
     useEffect(() => {
       streamWebViewWarmupPool.startWarmup(parent);
@@ -881,19 +894,6 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
       });
     }, [injectJS, playerState.duration]);
 
-    const forceRefresh = useCallback(() => {
-      setPlayerState(prev => ({
-        ...prev,
-        isReady: false,
-        isBuffering: true,
-      }));
-      needsInitRef.current = true;
-
-      setTimeout(() => {
-        webViewRef.current?.reload();
-      }, 100);
-    }, []);
-
     useImperativeHandle(
       ref,
       () => ({
@@ -1287,8 +1287,7 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
           source={webViewSource}
           style={[styles.webView, hasContentGate && styles.webViewScrollable]}
           onContentProcessDidTerminate={() => {
-            needsInitRef.current = true;
-            webViewRef.current?.reload();
+            remountEmbedWebView();
           }}
           onError={handleWebViewError}
           onHttpError={handleWebViewHttpError}
@@ -1311,8 +1310,7 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
           }}
           onMessage={handleMessage}
           onRenderProcessGone={() => {
-            needsInitRef.current = true;
-            webViewRef.current?.reload();
+            remountEmbedWebView();
           }}
         />
 

src/screens/Stream/LiveStreamScreen.tsx

@@ -10,12 +10,7 @@ import { twitchQueries } from '@app/queries/twitchQueries';
 import { useQueries } from '@tanstack/react-query';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  AppState,
-  type AppStateStatus,
-  useWindowDimensions,
-  View,
-} from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -48,7 +43,6 @@ export const LiveStreamScreen = memo(function LiveStreamScreen({
   const [isChatVisible, setChatVisible] = useState<boolean>(true);
   const [hasContentGate, setHasContentGate] = useState(false);
   const streamPlayerRef = useRef<StreamPlayerRef>(null);
-  const appStateRef = useRef<AppStateStatus>(AppState.currentState);
   const lastChatToggleTimeRef = useRef<number>(0);
   const CHAT_TOGGLE_DEBOUNCE_MS = 450;
 
@@ -61,19 +55,6 @@ export const LiveStreamScreen = memo(function LiveStreamScreen({
     };
   }, []);
 
-  useEffect(() => {
-    const sub = AppState.addEventListener(
-      'change',
-      (nextState: AppStateStatus) => {
-        if (appStateRef.current === 'background' && nextState === 'active') {
-          streamPlayerRef.current?.forceRefresh();
-        }
-        appStateRef.current = nextState;
-      },
-    );
-    return () => sub.remove();
-  }, []);
-
   const handleContentGateChange = useCallback((hasGate: boolean) => {
     setHasContentGate(prev => (prev === hasGate ? prev : hasGate));
   }, []);