chore(infrastructure): e2e ci

Author: luke-h1

docs/TWITCH_EMBED_PARENT.md

@@ -277,174 +277,6 @@ type PlayerMessage =
   | { type: 'trace'; payload: { step: string; detail?: string } }
   | { type: 'error'; payload: { message: string } };
 
-/**
- * Build the raw Twitch player URL.
- * Use parent=www.twitch.tv so Twitch shows the anonymous "Continue" content gate for
- * mature streams instead of redirecting to the login-required gate (which we cannot
- * auto-accept). See: Frosty mature content gate fix plan.
- */
-function buildRawPlayerUrl(options: {
-  channel: string;
-  video?: string;
-  parent: string;
-  muted: boolean;
-}): string {
-  const params = new URLSearchParams();
-  if (options.video) {
-    params.set('video', options.video);
-  } else {
-    params.set('channel', options.channel || 'twitch');
-  }
-  params.set('muted', String(options.muted));
-  params.set('parent', options.parent);
-  return `https://player.twitch.tv/?${params.toString()}`;
-}
-
-/** True if parent looks like an HTTPS domain (e.g. foam-app.com) so we send Referer/Origin. */
-function isHttpsDomain(parent: string): boolean {
-  return parent.includes('.') && !parent.startsWith('http');
-}
-
-/** Selectors Twitch may use for the content classification / age gate button. */
-const CONTENT_GATE_SELECTORS = [
-  'button[data-a-target*="content-classification-gate"]',
-  '[data-a-target*="content-classification-gate"]',
-  'button[data-a-target*="content-gate"]',
-  'a[data-a-target*="content-classification-gate"]',
-  'button[aria-label*="Continue"]',
-  'button[aria-label*="Watch"]',
-  '[data-a-target*="player-overlay-content-gate"] button',
-  '[data-a-target*="player-overlay-content-gate"] a',
-];
-
-/**
- * Injected script for the raw player: click age gate aggressively, then bridge video and keep playing.
- * Frosty fix (PR #406 / issue #404): MutationObserver with 10s timeout to find content warning button and click it.
- * - We add _asyncQuerySelector (MutationObserver waiter) and acceptContentWarning() that uses it.
- * - Also keep polling loop and onLoadEnd triggers for redundancy.
- */
-function getRawPlayerInjectedScript(): string {
-  const gateSelectorsJson = JSON.stringify(CONTENT_GATE_SELECTORS);
-  return `
-(function() {
-  function post(type, payload) {
-    try { window.ReactNativeWebView.postMessage(JSON.stringify({ type: type, payload: payload || {} })); } catch (e) {}
-  }
-  function findGateButton() {
-    var selectors = ${gateSelectorsJson};
-    for (var i = 0; i < selectors.length; i++) {
-      var el = document.querySelector(selectors[i]);
-      if (el) return el;
-    }
-    var all = document.querySelectorAll('button, [role="button"], a[href]');
-    for (var j = 0; j < all.length; j++) {
-      var b = all[j];
-      var t = (b.textContent || '').toLowerCase();
-      if (/continue|watch\\s*(stream|now)?|i'?m\\s*over|confirm|yes\\s*,?\\s*i\\s*am/.test(t)) return b;
-    }
-    return null;
-  }
-  function clickGate() {
-    var btn = findGateButton();
-    if (btn) { try { btn.click(); } catch (e) {} return true; }
-    return null;
-  }
-  window._asyncQuerySelector = function(selector, timeoutMs) {
-    var el = document.querySelector(selector);
-    if (el) return Promise.resolve(el);
-    return new Promise(function(resolve) {
-      var observer = new MutationObserver(function() {
-        var found = document.querySelector(selector);
-        if (found) { observer.disconnect(); resolve(found); }
-      });
-      observer.observe(document.body, { childList: true, subtree: true });
-      if (timeoutMs) {
-        setTimeout(function() { observer.disconnect(); resolve(document.querySelector(selector) || null); }, timeoutMs);
-      }
-    });
-  };
-  function acceptContentWarning() {
-    var sel = 'button[data-a-target*="content-classification-gate"]';
-    (window._asyncQuerySelector || function(s, t) { return Promise.resolve(document.querySelector(s)); })(sel, 10000).then(function(btn) {
-      if (btn) { try { btn.click(); } catch (e) {} }
-    }).catch(function() {});
-  }
-  acceptContentWarning();
-  function runGateClickLoop() {
-    if (window._gateLoopRunning) return;
-    window._gateLoopRunning = true;
-    var n = 0;
-    var id = setInterval(function() {
-      n++;
-      if (n > 60) { clearInterval(id); window._gateLoopRunning = false; return; }
-      clickGate();
-    }, 400);
-  }
-  runGateClickLoop();
-
-  async function doInit() {
-    if (window._rawPlayerInitDone) return;
-    var videoEl = null;
-    for (var attempts = 0; attempts < 40; attempts++) {
-      videoEl = document.querySelector('video');
-      if (videoEl) break;
-      await new Promise(function(r) { setTimeout(r, 500); });
-    }
-    if (!videoEl) return;
-    if (window._rawPlayerInitDone) return;
-    window._rawPlayerInitDone = true;
-    window._videoEl = videoEl;
-    videoEl.muted = true;
-    post('ready');
-    if (!videoEl._listenersAdded) {
-      videoEl._listenersAdded = true;
-      videoEl.addEventListener('play', function() { post('play'); });
-      videoEl.addEventListener('playing', function() {
-        window._pauseRetries = 0;
-        videoEl.muted = false;
-        videoEl.volume = 1;
-        post('stateUpdate', { isBuffering: false, isPaused: false, isReady: true });
-      });
-      videoEl.addEventListener('pause', function() {
-        post('pause');
-        if (window._pauseRetries === undefined) window._pauseRetries = 0;
-        window._pauseRetries++;
-        if (window._pauseRetries <= 8) {
-          setTimeout(function() { clickGate(); videoEl.play().catch(function(){}); }, 400);
-        }
-      });
-      videoEl.addEventListener('ended', function() { post('ended'); });
-    }
-    window.playerControls = {
-      play: function() { videoEl.play(); },
-      pause: function() { videoEl.pause(); },
-      setMuted: function(m) { videoEl.muted = !!m; },
-      unmute: function() { videoEl.muted = false; videoEl.volume = 1; },
-      setVolume: function(v) { videoEl.volume = v; if (v > 0) videoEl.muted = false; },
-      getCurrentTime: function() { post('currentTime', { time: videoEl.currentTime }); },
-      getDuration: function() { post('duration', { duration: videoEl.duration }); },
-      seek: function(t) { videoEl.currentTime = t; },
-      setChannel: function() {},
-      setVideo: function() {},
-      setQuality: function() {},
-      seekToLive: function() {}
-    };
-    function tryPlay() {
-      videoEl.play().then(function() { post('play'); }).catch(function() {});
-    }
-    tryPlay();
-    [500,1000,2000,3000,5000,8000,12000].forEach(function(ms) { setTimeout(tryPlay, ms); });
-    if (!videoEl.paused) post('play');
-  }
-  doInit();
-  setTimeout(doInit, 2500);
-  setTimeout(doInit, 6000);
-  window.__foamClickGate = function() { acceptContentWarning(); runGateClickLoop(); clickGate(); };
-})();
-true;
-`;
-}
-
 /**
  * Build HTML that embeds Twitch using the official Embed JavaScript API.
  * @see https://dev.twitch.tv/docs/embed/video-and-clips/#interactive-frames-for-live-streams-and-vods
@@ -1071,47 +903,28 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
       [onEnded, onError, onOffline, onOnline, onPause, onPlay, onReady],
     );
 
-    const embedHtml = useMemo(
-      () =>
-        buildTwitchEmbedHtml({
-          channel: channel || 'twitch',
-          video,
-          parent,
-          autoplay,
-          muted: initialMuted,
-          width: '100%',
-          height: '100%',
-        }),
-      [channel, video, parent, autoplay, initialMuted],
-    );
-
-    const rawPlayerUrl = useMemo(
-      () =>
-        buildRawPlayerUrl({
-          channel: channel || 'twitch',
-          video,
-          parent,
-          muted: true,
-        }),
-      [channel, video, parent],
-    );
-
-    // parent=www.twitch.tv so we get anonymous "Continue" gate for mature content (not login gate).
+    // Use official Twitch.Player embed (Video and Clips API) so the player is video-only,
+    // fills the container (100% x 100%), and has no chat or black bars.
+    // @see https://dev.twitch.tv/docs/embed/video-and-clips/#interactive-frames-for-live-streams-and-vods
     const webViewSource = useMemo(() => {
+      const html = buildTwitchEmbedHtml({
+        channel: channel || 'twitch',
+        video,
+        parent,
+        autoplay,
+        muted: initialMuted,
+        width: '100%',
+        height: '100%',
+      });
+      const baseUrl = parent.startsWith('http') ? parent : `https://${parent}/`;
       if (__DEV__) {
-        console.warn('[StreamPlayer] loading raw player', {
-          url: rawPlayerUrl,
+        console.warn('[StreamPlayer] loading Twitch.Player embed', {
           parent,
-          note: 'no custom headers (Frosty approach)',
+          baseUrl,
         });
       }
-      return { uri: rawPlayerUrl };
-    }, [rawPlayerUrl, parent]);
-
-    const rawPlayerInjectedScript = useMemo(
-      () => getRawPlayerInjectedScript(),
-      [],
-    );
+      return { html, baseUrl };
+    }, [channel, video, parent, autoplay, initialMuted]);
 
     const showControls = useCallback(() => {
       controlsVisibleRef.current = true;
@@ -1238,26 +1051,18 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
       >
         <WebView
           ref={webViewRef}
-          allowsFullscreenVideo
+          allowsFullscreenVideo={false}
           allowsInlineMediaPlayback
           javaScriptEnabled
           mediaPlaybackRequiresUserAction={false}
           originWhitelist={['*']}
           source={webViewSource}
-          injectedJavaScript={rawPlayerInjectedScript}
           style={[styles.webView, hasContentGate && styles.webViewScrollable]}
           onContentProcessDidTerminate={() => webViewRef.current?.reload()}
           onError={handleWebViewError}
           onHttpError={handleWebViewHttpError}
           onLoadEnd={() => {
-            if (__DEV__) console.warn('[StreamPlayer] onLoadEnd, triggering gate click');
-            const runGateClick = () =>
-              webViewRef.current?.injectJavaScript(
-                'typeof window.__foamClickGate==="function"&&window.__foamClickGate();true;',
-              );
-            setTimeout(runGateClick, 800);
-            setTimeout(runGateClick, 2000);
-            setTimeout(runGateClick, 5000);
+            if (__DEV__) console.warn('[StreamPlayer] onLoadEnd');
           }}
           onLoadStart={() => {
             console.warn('[StreamPlayer:WebView] onLoadStart', {
@@ -1269,6 +1074,16 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
           onRenderProcessGone={() => webViewRef.current?.reload()}
         />
 
+        {showOverlayControls && !hasContentGate && (
+          <PressableArea
+            onPress={toggleControlsInternal}
+            style={styles.touchBlockOverlay}
+            pointerEvents="auto"
+            accessibilityLabel="Show player controls"
+            accessibilityRole="button"
+          />
+        )}
+
         {__DEV__ && lastHttpError && (
           <View style={styles.debugErrorOverlay}>
             <Text color="red" weight="semibold">
@@ -1379,6 +1194,13 @@ const styles = StyleSheet.create((theme, rt) => ({
     overflow: 'hidden',
     position: 'relative',
   },
+  touchBlockOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
   containerScrollable: {
     overflow: 'visible',
   },