Route embeds through API fast player

Author: richiemcilroy

apps/site/next-config.test.mts

@@ -3,6 +3,13 @@ import test from "node:test";
 import nextConfig from "./next.config.ts";
 
 test("normal embed route is served by the fast embed shell", async () => {
+  const redirectsFn = nextConfig.redirects;
+  if (typeof redirectsFn !== "function") {
+    throw new Error("nextConfig.redirects must be a function");
+  }
+  const redirects = await redirectsFn();
+  assert.deepEqual(redirects, []);
+
   const rewritesFn = nextConfig.rewrites;
   if (typeof rewritesFn !== "function") {
     throw new Error("nextConfig.rewrites must be a function");
@@ -17,3 +24,32 @@ test("normal embed route is served by the fast embed shell", async () => {
     ],
   });
 });
+
+test("production embed route redirects to the API fast embed shell", async () => {
+  const original = process.env.REND_SITE_FAST_EMBED_REDIRECT_ORIGIN;
+  process.env.REND_SITE_FAST_EMBED_REDIRECT_ORIGIN = "https://api.rend.so/";
+  const { default: productionConfig } = await import(
+    `./next.config.ts?redirect=${Date.now()}`
+  );
+
+  try {
+    const redirectsFn = productionConfig.redirects;
+    if (typeof redirectsFn !== "function") {
+      throw new Error("nextConfig.redirects must be a function");
+    }
+    const redirects = await redirectsFn();
+    assert.deepEqual(redirects, [
+      {
+        source: "/embed/:assetId",
+        destination: "https://api.rend.so/embed-fast/:assetId",
+        permanent: false,
+      },
+    ]);
+  } finally {
+    if (original === undefined) {
+      delete process.env.REND_SITE_FAST_EMBED_REDIRECT_ORIGIN;
+    } else {
+      process.env.REND_SITE_FAST_EMBED_REDIRECT_ORIGIN = original;
+    }
+  }
+});

apps/site/next.config.ts

@@ -1,7 +1,22 @@
 import type { NextConfig } from "next";
 
+const fastEmbedRedirectOrigin =
+  process.env.REND_SITE_FAST_EMBED_REDIRECT_ORIGIN?.trim().replace(/\/+$/, "") ||
+  (process.env.VERCEL_ENV === "production" ? "https://api.rend.so" : "");
+
 const nextConfig: NextConfig = {
   transpilePackages: ["@rend/player"],
+  async redirects() {
+    return fastEmbedRedirectOrigin
+      ? [
+          {
+            source: "/embed/:assetId",
+            destination: `${fastEmbedRedirectOrigin}/embed-fast/:assetId`,
+            permanent: false,
+          },
+        ]
+      : [];
+  },
   async rewrites() {
     return {
       beforeFiles: [

services/rend-api/src/main.rs

@@ -4159,7 +4159,7 @@ body{{overflow:hidden}}
 <div class="rend-fast__message" role="status" aria-live="polite">Ready</div>
 </main>
 <script>
-(()=>{{const root=document.querySelector("[data-rend-player-state]");const video=document.querySelector("video");if(!root||!video)return;const inlineStartup={inline_startup_json};const fallback={fallback_json};const autoPlay={auto_play_js};const fetchCredentials="{fetch_credentials}";const mark=(name)=>{{if(!root.getAttribute(name))root.setAttribute(name,String(Math.round(performance.now())))}};const dims=()=>{{if(video.videoWidth)root.setAttribute("data-rend-selected-width",String(video.videoWidth));if(video.videoHeight)root.setAttribute("data-rend-selected-height",String(video.videoHeight))}};const play=()=>{{if(autoPlay)video.play().catch(()=>{{}})}};const selection=(label,artifactPath,engine)=>{{root.setAttribute("data-rend-player-selected",label);root.setAttribute("data-rend-player-artifact",artifactPath);root.setAttribute("data-rend-playback-engine",engine);root.setAttribute("data-rend-player-state","ready")}};const bytes=(value)=>{{const binary=atob(value);const output=new Uint8Array(binary.length);for(let i=0;i<binary.length;i++)output[i]=binary.charCodeAt(i);return output}};const append=(buffer,data)=>new Promise((resolve,reject)=>{{const done=()=>{{cleanup();resolve()}};const fail=()=>{{cleanup();reject(new Error("append failed"))}};const cleanup=()=>{{buffer.removeEventListener("updateend",done);buffer.removeEventListener("error",fail)}};buffer.addEventListener("updateend",done);buffer.addEventListener("error",fail);buffer.appendBuffer(data)}});const sourceOpen=(mediaSource)=>new Promise((resolve,reject)=>{{if(mediaSource.readyState==="open"){{resolve();return}}const done=()=>{{cleanup();resolve()}};const fail=()=>{{cleanup();reject(new Error("source open failed"))}};const cleanup=()=>{{mediaSource.removeEventListener("sourceopen",done);mediaSource.removeEventListener("sourceclose",fail);mediaSource.removeEventListener("sourceended",fail)}};mediaSource.addEventListener("sourceopen",done,{{once:true}});mediaSource.addEventListener("sourceclose",fail,{{once:true}});mediaSource.addEventListener("sourceended",fail,{{once:true}})}});const fetchSegment=(url)=>fetch(url,{{credentials:fetchCredentials}}).then(response=>{{if(!response.ok)throw new Error("segment fetch failed");return response.arrayBuffer()}}).then(buffer=>new Uint8Array(buffer));const startNative=()=>{{selection(fallback.label,fallback.artifactPath,"native");if(fallback.url&&video.getAttribute("src")!==fallback.url){{video.src=fallback.url;video.load()}}play()}};const startInline=async()=>{{if(!inlineStartup||!("MediaSource"in window)||!MediaSource.isTypeSupported(inlineStartup.mimeType))return false;const pending=[];let nextSegment=0;const pump=()=>{{while(pending.length<4&&nextSegment<inlineStartup.segmentUrls.length)pending.push(fetchSegment(inlineStartup.segmentUrls[nextSegment++]))}};pump();selection("mse_inline",inlineStartup.artifactPath,"mse-inline");const mediaSource=new MediaSource();const objectUrl=URL.createObjectURL(mediaSource);video.removeAttribute("src");video.src=objectUrl;video.load();await sourceOpen(mediaSource);const sourceBuffer=mediaSource.addSourceBuffer(inlineStartup.mimeType);await append(sourceBuffer,bytes(inlineStartup.startup));play();(async()=>{{while(pending.length){{const data=await pending.shift();pump();await append(sourceBuffer,data)}}if(mediaSource.readyState==="open")mediaSource.endOfStream()}})().catch(()=>{{}});return true}};video.addEventListener("loadedmetadata",()=>{{dims();mark("data-rend-metadata-ms")}},{{once:true}});video.addEventListener("canplay",()=>{{dims();mark("data-rend-canplay-ms")}},{{once:true}});video.addEventListener("playing",()=>{{root.setAttribute("data-rend-player-state","playing");dims()}});if("requestVideoFrameCallback"in video){{video.requestVideoFrameCallback(()=>{{dims();mark("data-rend-first-frame-ms")}})}}else{{video.addEventListener("playing",()=>mark("data-rend-first-frame-ms"),{{once:true}})}}startInline().then((started)=>{{if(!started)startNative()}}).catch(()=>startNative())}})();
+(()=>{{const root=document.querySelector("[data-rend-player-state]");const video=document.querySelector("video");if(!root||!video)return;const inlineStartup={inline_startup_json};const fallback={fallback_json};const autoPlay={auto_play_js};const fetchCredentials="{fetch_credentials}";const mark=(name)=>{{if(!root.getAttribute(name))root.setAttribute(name,String(Math.round(performance.now())))}};const dims=()=>{{if(video.videoWidth)root.setAttribute("data-rend-selected-width",String(video.videoWidth));if(video.videoHeight)root.setAttribute("data-rend-selected-height",String(video.videoHeight))}};const play=()=>{{if(autoPlay)video.play().catch(()=>{{}})}};const selection=(label,artifactPath,engine)=>{{root.setAttribute("data-rend-player-selected",label);root.setAttribute("data-rend-player-artifact",artifactPath);root.setAttribute("data-rend-playback-engine",engine);root.setAttribute("data-rend-player-state","ready")}};const bytes=(value)=>{{const binary=atob(value);const output=new Uint8Array(binary.length);for(let i=0;i<binary.length;i++)output[i]=binary.charCodeAt(i);return output}};const append=(buffer,data)=>new Promise((resolve,reject)=>{{const done=()=>{{cleanup();resolve()}};const fail=()=>{{cleanup();reject(new Error("append failed"))}};const cleanup=()=>{{buffer.removeEventListener("updateend",done);buffer.removeEventListener("error",fail)}};buffer.addEventListener("updateend",done);buffer.addEventListener("error",fail);buffer.appendBuffer(data)}});const sourceOpen=(mediaSource)=>new Promise((resolve,reject)=>{{if(mediaSource.readyState==="open"){{resolve();return}}const done=()=>{{cleanup();resolve()}};const fail=()=>{{cleanup();reject(new Error("source open failed"))}};const cleanup=()=>{{mediaSource.removeEventListener("sourceopen",done);mediaSource.removeEventListener("sourceclose",fail);mediaSource.removeEventListener("sourceended",fail)}};mediaSource.addEventListener("sourceopen",done,{{once:true}});mediaSource.addEventListener("sourceclose",fail,{{once:true}});mediaSource.addEventListener("sourceended",fail,{{once:true}})}});const fetchSegment=(url)=>fetch(url,{{credentials:fetchCredentials}}).then(response=>{{if(!response.ok)throw new Error("segment fetch failed");return response.arrayBuffer()}}).then(buffer=>new Uint8Array(buffer));const bufferedAhead=()=>{{try{{for(let index=0;index<video.buffered.length;index++){{const start=video.buffered.start(index);const end=video.buffered.end(index);if(start<=video.currentTime&&end>video.currentTime)return end-video.currentTime}}}}catch{{}}return 0}};const waitForBufferRoom=()=>new Promise(resolve=>{{if(bufferedAhead()<8){{resolve();return}}const cleanup=()=>{{video.removeEventListener("timeupdate",tick);video.removeEventListener("playing",tick);clearTimeout(timeout)}};const tick=()=>{{if(bufferedAhead()<5){{cleanup();resolve()}}}};const timeout=setTimeout(()=>{{cleanup();resolve()}},1000);video.addEventListener("timeupdate",tick);video.addEventListener("playing",tick)}});const startNative=()=>{{selection(fallback.label,fallback.artifactPath,"native");if(fallback.url&&video.getAttribute("src")!==fallback.url){{video.src=fallback.url;video.load()}}play()}};const startInline=async()=>{{if(!inlineStartup||!("MediaSource"in window)||!MediaSource.isTypeSupported(inlineStartup.mimeType))return false;selection("mse_inline",inlineStartup.artifactPath,"mse-inline");const mediaSource=new MediaSource();const objectUrl=URL.createObjectURL(mediaSource);video.removeAttribute("src");video.src=objectUrl;video.load();await sourceOpen(mediaSource);const sourceBuffer=mediaSource.addSourceBuffer(inlineStartup.mimeType);await append(sourceBuffer,bytes(inlineStartup.startup));play();(async()=>{{for(const url of inlineStartup.segmentUrls){{await waitForBufferRoom();await append(sourceBuffer,await fetchSegment(url))}}if(mediaSource.readyState==="open")mediaSource.endOfStream()}})().catch(()=>{{}});return true}};video.addEventListener("loadedmetadata",()=>{{dims();mark("data-rend-metadata-ms")}},{{once:true}});video.addEventListener("canplay",()=>{{dims();mark("data-rend-canplay-ms")}},{{once:true}});video.addEventListener("playing",()=>{{root.setAttribute("data-rend-player-state","playing");dims()}});if("requestVideoFrameCallback"in video){{video.requestVideoFrameCallback(()=>{{dims();mark("data-rend-first-frame-ms")}})}}else{{video.addEventListener("playing",()=>mark("data-rend-first-frame-ms"),{{once:true}})}}startInline().then((started)=>{{if(!started)startNative()}}).catch(()=>startNative())}})();
 </script>
 </body>
 </html>"#,
@@ -4502,17 +4502,22 @@ fn playback_cookie_header(
     playback_base_url: &str,
     cookie_domain: Option<&str>,
 ) -> String {
+    let is_secure = playback_base_url.starts_with("https://");
     let mut parts = vec![
         format!("{PLAYBACK_COOKIE_NAME}={token}"),
         "Path=/v/".to_owned(),
         format!("Max-Age={ttl_seconds}"),
         "HttpOnly".to_owned(),
-        "SameSite=Lax".to_owned(),
+        if is_secure {
+            "SameSite=None".to_owned()
+        } else {
+            "SameSite=Lax".to_owned()
+        },
     ];
     if let Some(domain) = cookie_domain {
         parts.push(format!("Domain={domain}"));
     }
-    if playback_base_url.starts_with("https://") {
+    if is_secure {
         parts.push("Secure".to_owned());
     }
     parts.join("; ")

services/rend-api/src/tests.rs

@@ -1537,6 +1537,12 @@ fn playback_bootstrap_urls_are_tokenless_and_cookie_carries_playback_token() {
         "https://edge.local",
         Some("rend.so"),
     );
+    let local_cookie = playback_cookie_header(
+        &response.playback_token,
+        response.ttl_seconds,
+        "http://edge.local",
+        None,
+    );
 
     assert_eq!(
         playback_url,
@@ -1550,7 +1556,10 @@ fn playback_bootstrap_urls_are_tokenless_and_cookie_carries_playback_token() {
     assert!(cookie.starts_with("__rend_playback="));
     assert!(cookie.contains("; Domain=rend.so"));
     assert!(cookie.contains("; HttpOnly"));
+    assert!(cookie.contains("; SameSite=None"));
     assert!(cookie.contains("; Secure"));
+    assert!(local_cookie.contains("; SameSite=Lax"));
+    assert!(!local_cookie.contains("; Secure"));
     assert_eq!(claims.asset_id, "asset-123");
     assert_eq!(claims.organization_id.as_deref(), Some(LOCAL_ORG_ID));
     assert_eq!(claims.exp, NOW + 600);
@@ -1624,6 +1633,8 @@ fn api_fast_embed_can_render_inline_mse_startup_without_token_material() {
     assert!(html.contains("data-rend-playback-engine=\"mse-inline\""));
     assert!(html.contains("\"mimeType\":\"video/mp4; codecs=\\\"avc1.64001f,mp4a.40.2\\\"\""));
     assert!(html.contains("segment_00001.m4s"));
+    assert!(html.contains("waitForBufferRoom"));
+    assert!(!html.contains("pending.length<4"));
     assert!(html.contains("rel=\"preload\" as=\"fetch\""));
     assert!(!html.contains("src=\"https://api.rend.so/v/asset-123/hls/360p/progressive.mp4\""));
     assert!(!html.contains(&response.playback_token), "{html}");