chore(infrastructure): e2e ci

Author: luke-h1

app.config.ts

@@ -263,6 +263,18 @@ const config: ExpoConfig = {
       ? appConfig.androidGoogleServicesFile
       : undefined,
     edgeToEdgeEnabled: true,
+    intentFilters: [
+      {
+        action: 'VIEW',
+        autoVerify: true,
+        category: ['BROWSABLE', 'DEFAULT'],
+        data: [
+          { scheme: 'https', host: 'www.twitch.tv' },
+          { scheme: 'https', host: 'twitch.tv' },
+          { scheme: 'https', host: 'm.twitch.tv' },
+        ],
+      },
+    ],
   },
 };
 

docs/TWITCH_EMBED_PARENT.md

@@ -0,0 +1,31 @@
+# Twitch embed parent (mature content gate)
+
+The stream player loads the **raw Twitch player** URL (`player.twitch.tv`) with a `parent` query param. The value of `parent` controls which gate Twitch shows for **mature content**:
+
+| `parent` value      | Mature stream behaviour |
+|---------------------|-------------------------|
+| App name (e.g. `foam`, `frosty`) | Twitch shows **“Log in or create an account”** (login-required gate). WebView may redirect away from the player; we cannot auto-accept. |
+| **`www.twitch.tv`** | Twitch shows the **anonymous “Continue”** content gate. We stay on the player URL and can auto-click it via injected JS. |
+
+## Current approach (Foam)
+
+- **Default `parent`: `www.twitch.tv`** so anonymous users get the “Continue” gate for mature streams (same as twitch.tv when logged out), and we can auto-accept it.
+- We load only the raw URL:  
+  `https://player.twitch.tv/?channel=...&muted=true&parent=www.twitch.tv`  
+  with no custom Referer/Origin headers.
+- Content gate is auto-accepted via injected JS: `_asyncQuerySelector('button[data-a-target*="content-classification-gate"]', 10000)` then click (Frosty PR #406 / issue #404 style).
+
+## Why not `parent=foam` or a custom domain?
+
+- With a non–twitch.tv parent, Twitch treats the embed as external and shows the **login-required** gate for mature content. The WebView can redirect to twitch.tv login; `onLoadEnd` / `onPageFinished` then see the redirect URL, not the player URL, so `initVideo()` and the content-gate click **never run**.
+- Using `parent=www.twitch.tv` keeps the request “on-site” so we get the anonymous gate and stay on the player, allowing auto-accept to work.
+
+## Overriding the default
+
+You can still pass a different `parent` via the `StreamPlayer` prop if needed (e.g. for testing). For normal use, leave the default.
+
+## References
+
+- Frosty mature content gate fix plan (this repo).
+- [Twitch Embed – Video & Clips](https://dev.twitch.tv/docs/embed/video-and-clips/)
+- Frosty: [issue #404](https://github.com/tommyxchow/frosty/issues/404), [PR #406](https://github.com/tommyxchow/frosty/pull/406) (auto-accept content warning).

src/components/StreamPlayer/StreamPlayer.tsx

@@ -201,7 +201,8 @@ export interface StreamPlayerProps {
    */
   onRefresh?: () => void;
   /**
-   * Parent domain for embed
+   * Parent domain for Twitch embed. Must be an HTTPS domain you added in the
+   * Twitch Developer Console (e.g. foam-app.com). We send Referer/Origin so Twitch validates.
    * @default 'foam-app.com'
    */
   parent?: string;
@@ -276,6 +277,174 @@ 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
@@ -574,7 +743,7 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
       onPlay,
       onReady,
       onRefresh,
-      parent = 'foam-app.com',
+      parent = 'www.twitch.tv',
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       streamProxyBaseUrl: _streamProxyBaseUrl,
       showOverlayControls = true,
@@ -916,6 +1085,34 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
       [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).
+    const webViewSource = useMemo(() => {
+      if (__DEV__) {
+        console.warn('[StreamPlayer] loading raw player', {
+          url: rawPlayerUrl,
+          parent,
+          note: 'no custom headers (Frosty approach)',
+        });
+      }
+      return { uri: rawPlayerUrl };
+    }, [rawPlayerUrl, parent]);
+
+    const rawPlayerInjectedScript = useMemo(
+      () => getRawPlayerInjectedScript(),
+      [],
+    );
+
     const showControls = useCallback(() => {
       controlsVisibleRef.current = true;
       setControlsVisible(true);
@@ -1046,16 +1243,21 @@ export const StreamPlayer = forwardRef<StreamPlayerRef, StreamPlayerProps>(
           javaScriptEnabled
           mediaPlaybackRequiresUserAction={false}
           originWhitelist={['*']}
-          source={{
-            html: embedHtml,
-            baseUrl: 'https://embed.twitch.tv/',
-          }}
+          source={webViewSource}
+          injectedJavaScript={rawPlayerInjectedScript}
           style={[styles.webView, hasContentGate && styles.webViewScrollable]}
           onContentProcessDidTerminate={() => webViewRef.current?.reload()}
           onError={handleWebViewError}
           onHttpError={handleWebViewHttpError}
           onLoadEnd={() => {
-            console.warn('[StreamPlayer:WebView] onLoadEnd - HTML load finished');
+            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);
           }}
           onLoadStart={() => {
             console.warn('[StreamPlayer:WebView] onLoadStart', {