Enable public Tigris playback aliases

Author: richiemcilroy

.env.docker.example

@@ -50,6 +50,9 @@ REND_AUTUMN_UNIT_COST_STORAGE_2K=
 REND_AUTUMN_UNIT_COST_STORAGE_4K=
 REND_PLAYBACK_MODE=tigris
 REND_TIGRIS_PLAYBACK_BASE_URL=http://127.0.0.1:4000
+REND_PUBLIC_PLAYBACK_ENABLED=false
+REND_PUBLIC_PLAYBACK_ALIAS_PREFIX=v
+REND_PUBLIC_PLAYBACK_ALIAS_ACL=public-read
 # Edge playback is dormant by default. Set REND_PLAYBACK_MODE=edge to use these.
 REND_PLAYBACK_BASE_URL=http://127.0.0.1:4100
 REND_PLAYER_PLAYBACK_BASE_URL=

.env.example

@@ -58,6 +58,9 @@ REND_AUTUMN_UNIT_COST_STORAGE_2K=
 REND_AUTUMN_UNIT_COST_STORAGE_4K=
 REND_PLAYBACK_MODE=tigris
 REND_TIGRIS_PLAYBACK_BASE_URL=http://127.0.0.1:4000
+REND_PUBLIC_PLAYBACK_ENABLED=false
+REND_PUBLIC_PLAYBACK_ALIAS_PREFIX=v
+REND_PUBLIC_PLAYBACK_ALIAS_ACL=public-read
 # Edge playback is dormant by default. Set REND_PLAYBACK_MODE=edge to use this base.
 REND_PLAYBACK_BASE_URL=http://127.0.0.1:4100
 REND_MAX_UPLOAD_BYTES=536870912

.env.production.example

@@ -28,6 +28,11 @@ REND_PUBLIC_API_BASE_URL=https://api.rend.so
 REND_PUBLIC_SITE_BASE_URL=https://rend.so
 REND_PLAYBACK_MODE=tigris
 REND_TIGRIS_PLAYBACK_BASE_URL=https://api.rend.so
+# Public Tigris playback is opt-in. Enable only when the playback base is a
+# public-read media host and generated aliases are available under /v/{asset}/...
+REND_PUBLIC_PLAYBACK_ENABLED=false
+REND_PUBLIC_PLAYBACK_ALIAS_PREFIX=v
+REND_PUBLIC_PLAYBACK_ALIAS_ACL=public-read
 # Edge playback is dormant by default. Set REND_PLAYBACK_MODE=edge to use these.
 REND_PLAYER_PLAYBACK_BASE_URL=
 REND_PLAYER_EDGE_BASE_URLS=

apps/site/app/api/player/[assetId]/route.ts

@@ -218,7 +218,9 @@ function setPlaybackCookieHeader(
   playbackBaseUrl: string | null,
   directPlaybackEnabled: boolean,
   directCookieDomain: string | undefined,
+  playbackCredentialMode: "include" | "omit",
 ) {
+  if (playbackCredentialMode === "omit") return;
   const playbackCookie =
     directPlaybackEnabled && playbackBaseUrl
       ? playbackDirectCookieHeader(
@@ -360,15 +362,18 @@ export async function GET(
   }
   const playbackBaseUrl = playbackDecision.playbackBaseUrl;
   logPlaybackEdgeDecision(request, playbackDecision);
+  const publicPlaybackEnabled = playbackDecision.credentialMode === "omit";
   const directCookieDomain = directPlaybackCookieDomain(
     request,
     playbackBaseUrl,
   );
-  const directPlaybackEnabled = canUseDirectPlaybackCookie(
+  const directCookieEnabled = canUseDirectPlaybackCookie(
     request,
     playbackBaseUrl,
     directCookieDomain,
   );
+  const directPlaybackEnabled =
+    Boolean(playbackBaseUrl) && (publicPlaybackEnabled || directCookieEnabled);
   const cacheKey = cacheKeyForPlaybackBootstrap(
     normalizedAssetId,
     playbackBaseUrl,
@@ -388,6 +393,7 @@ export async function GET(
       cached.playbackBaseUrl,
       cached.directPlaybackEnabled,
       cached.directCookieDomain,
+      cached.safeResponse.playback_credential_mode ?? "include",
     );
     return jsonResponse(cached.safeResponse, { headers });
   }
@@ -454,6 +460,7 @@ export async function GET(
         data,
         responsePlaybackBaseUrl,
         organizationId,
+        publicPlaybackEnabled ? "omit" : "include",
       )
     : null;
 
@@ -482,6 +489,7 @@ export async function GET(
     playbackBaseUrl,
     directPlaybackEnabled,
     directCookieDomain,
+    safeResponse.playback_credential_mode ?? "include",
   );
   if (typeof playbackToken === "string") {
     rememberBootstrapResponse(cacheKey, {

apps/site/app/api/player/artifact-route.test.mts

@@ -23,6 +23,7 @@ function cachedSafeResponse(
     playback_url:
       "/api/player/00000000-0000-0000-0000-000000000001/artifact/opener.mp4",
     playback_content_type: "video/mp4",
+    playback_credential_mode: "include",
     playback_token_expires_at: expiresAt,
     ttl_seconds: ttlSeconds,
     opener_url:

apps/site/app/embed-fast/[assetId]/route.ts

@@ -141,7 +141,7 @@ function playbackSelection(
     };
   }
 
-  if (mode === "progressive") {
+  if (mode === "progressive" && bootstrap.playback_credential_mode !== "omit") {
     const progressiveUrl = progressivePlaybackUrl(bootstrap);
     if (progressiveUrl) {
       return {
@@ -187,6 +187,12 @@ function playbackSelection(
   return null;
 }
 
+function playbackCrossOrigin(bootstrap: WatchPlaybackBootstrapResponse | null) {
+  return bootstrap?.status === "ready" && bootstrap.playback_credential_mode === "omit"
+    ? "anonymous"
+    : "use-credentials";
+}
+
 function progressivePlaybackUrl(bootstrap: WatchPlaybackBootstrapReady) {
   if (bootstrap.playable_state !== "hls_ready" || !bootstrap.manifest_url) {
     return null;
@@ -253,6 +259,7 @@ function appendStartupLinkHeaders(
   headers: Headers,
   edge: ReturnType<typeof playbackOrigin>,
   selection: ReturnType<typeof playbackSelection>,
+  crossOrigin: "anonymous" | "use-credentials",
 ) {
   if (edge) {
     headers.append(
@@ -266,7 +273,7 @@ function appendStartupLinkHeaders(
   const preloadContentType = preload.contentType ?? "video/mp4";
   headers.append(
     "link",
-    `<${linkHeaderValue(preload.url)}>; rel=preload; as=video; type="${linkHeaderValue(preloadContentType)}"; crossorigin="use-credentials"; fetchpriority=high`,
+    `<${linkHeaderValue(preload.url)}>; rel=preload; as=video; type="${linkHeaderValue(preloadContentType)}"; crossorigin="${crossOrigin}"; fetchpriority=high`,
   );
 }
 
@@ -295,6 +302,7 @@ export function renderFastEmbedHtml(options: FastEmbedRenderOptions) {
     : "";
   const preload = preloadablePlaybackSelection(selection);
   const preloadContentType = preload?.contentType ?? "video/mp4";
+  const crossOrigin = playbackCrossOrigin(options.bootstrap);
   const bootstrapMs =
     typeof options.bootstrapMs === "number"
       ? ` data-rend-bootstrap-ms="${Math.max(0, Math.round(options.bootstrapMs))}"`
@@ -310,7 +318,7 @@ export function renderFastEmbedHtml(options: FastEmbedRenderOptions) {
 <title>Rend player</title>
 ${edge ? `<link rel="dns-prefetch" href="${html(edge.dnsPrefetch)}">` : ""}
 ${edge ? `<link rel="preconnect" href="${html(edge.origin)}" crossorigin>` : ""}
-${preload ? `<link rel="preload" as="video" href="${html(preload.url)}" type="${html(preloadContentType)}" crossorigin="use-credentials" fetchpriority="high">` : ""}
+${preload ? `<link rel="preload" as="video" href="${html(preload.url)}" type="${html(preloadContentType)}" crossorigin="${html(crossOrigin)}" fetchpriority="high">` : ""}
 <style>
 html,body{margin:0;width:100%;height:100%;background:#050505;color:#f7f7f7}
 body{overflow:hidden}
@@ -322,11 +330,11 @@ body{overflow:hidden}
 </head>
 <body>
 <main class="rend-fast" aria-label="Video player" data-rend-player-state="${html(state)}" data-rend-player-selected="${html(selection?.label ?? "")}" data-rend-player-artifact="${html(selection?.artifactPath ?? "")}" data-rend-ready-status="${html(ready?.status ?? options.bootstrap?.status ?? state)}" data-rend-source-state="${html(ready?.source_state ?? "")}" data-rend-playable-state="${html(ready?.playable_state ?? "")}" data-rend-manifest-content-type="${html(ready?.manifest_content_type ?? "")}" data-rend-opener-content-type="${html(ready?.opener_content_type ?? "")}" data-rend-poster="${html(ready?.poster_url ?? "")}" data-rend-prefetch-hint-count="${html(ready?.prefetch_hints.length ?? 0)}" data-rend-playback-engine="native" data-rend-document-start-ms="0"${bootstrapMs} data-rend-asset-id="${html(options.assetId)}">
-<video class="rend-fast__video"${source}${contentType}${poster}${autoPlay}${controls}${muted} playsinline preload="auto" crossorigin="use-credentials"></video>
+<video class="rend-fast__video"${source}${contentType}${poster}${autoPlay}${controls}${muted} playsinline preload="auto" crossorigin="${html(crossOrigin)}"></video>
 <div class="rend-fast__message" role="status" aria-live="polite">${html(message)}</div>
 </main>
 <script>
-(()=>{const root=document.querySelector("[data-rend-player-state]");const video=document.querySelector("video");if(!root||!video)return;const assetId=${jsString(options.assetId)};const preferredStartup=${jsString(preferredStartup)};const bootstrapUrl=${jsString(options.bootstrapUrl)};const autoPlay=${options.autoPlay ? "true" : "false"};const bootstrapStarted=performance.now();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 progressive=(data)=>{if(data.playable_state!=="hls_ready"||!data.manifest_url)return null;const byRendition=new Map();for(const hint of Array.isArray(data.prefetch_hints)?data.prefetch_hints:[]){const match=/^hls\\/([^/]+)\\/([^/]+)$/.exec(String(hint.artifact_path||""));if(!match)continue;const state=byRendition.get(match[1])||{init:false,segment:false};state.init=state.init||match[2]===\`init_\${match[1]}.mp4\`;state.segment=state.segment||match[2]==="segment_00000.m4s";byRendition.set(match[1],state)}let rendition="";for(const candidate of ["360p","480p","720p","1080p","2k","4k"]){const state=byRendition.get(candidate);if(state&&state.init&&state.segment){rendition=candidate;break}}if(!rendition)return null;try{const parsed=new URL(data.manifest_url);const prefix="/v/"+assetId+"/";if(!parsed.pathname.startsWith(prefix))return null;const artifactPath="hls/"+rendition+"/progressive.mp4";parsed.pathname=prefix+artifactPath;parsed.search="";parsed.hash="";return{artifactPath,contentType:"video/mp4",label:"progressive_mp4",url:parsed.toString()}}catch{return null}};const select=(data)=>{if(!data||data.status!=="ready")return null;if(preferredStartup==="opener"&&data.opener_url)return{artifactPath:"opener.mp4",contentType:data.opener_content_type||"video/mp4",label:"opener",url:data.opener_url};if(preferredStartup==="progressive"){const selected=progressive(data);if(selected)return selected}if(data.playable_state==="hls_ready"&&data.manifest_url)return{artifactPath:"hls/master.m3u8",contentType:data.manifest_content_type||"application/vnd.apple.mpegurl",label:"native_hls",url:data.manifest_url};if(data.opener_url)return{artifactPath:"opener.mp4",contentType:data.opener_content_type||"video/mp4",label:"opener",url:data.opener_url};if(data.playback_url)return{artifactPath:data.playable_state==="hls_ready"?"hls/master.m3u8":"opener.mp4",contentType:data.playback_content_type||"",label:"primary",url:data.playback_url};return null};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})}if(!video.currentSrc&&!video.getAttribute("src")){fetch(bootstrapUrl,{credentials:"same-origin",headers:{accept:"application/json"}}).then(r=>r.ok?r.json():null).then(data=>{root.setAttribute("data-rend-bootstrap-ms",String(Math.round(performance.now()-bootstrapStarted)));const selected=select(data);if(!selected)return;root.setAttribute("data-rend-player-state","ready");root.setAttribute("data-rend-player-selected",selected.label);root.setAttribute("data-rend-player-artifact",selected.artifactPath);if(data.poster_url){root.setAttribute("data-rend-poster",data.poster_url);video.poster=data.poster_url}root.setAttribute("data-rend-ready-status",data.status||"ready");root.setAttribute("data-rend-source-state",data.source_state||"");root.setAttribute("data-rend-playable-state",data.playable_state||"");video.src=selected.url;video.load();play()}).catch(()=>{root.setAttribute("data-rend-player-state","playback_failure")})}else{play()}})();
+(()=>{const root=document.querySelector("[data-rend-player-state]");const video=document.querySelector("video");if(!root||!video)return;const assetId=${jsString(options.assetId)};const preferredStartup=${jsString(preferredStartup)};const bootstrapUrl=${jsString(options.bootstrapUrl)};const autoPlay=${options.autoPlay ? "true" : "false"};const bootstrapStarted=performance.now();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 crossOrigin=(data)=>data&&data.playback_credential_mode==="omit"?"anonymous":"use-credentials";const progressive=(data)=>{if(data.playback_credential_mode==="omit"||data.playable_state!=="hls_ready"||!data.manifest_url)return null;const byRendition=new Map();for(const hint of Array.isArray(data.prefetch_hints)?data.prefetch_hints:[]){const match=/^hls\\/([^/]+)\\/([^/]+)$/.exec(String(hint.artifact_path||""));if(!match)continue;const state=byRendition.get(match[1])||{init:false,segment:false};state.init=state.init||match[2]===\`init_\${match[1]}.mp4\`;state.segment=state.segment||match[2]==="segment_00000.m4s";byRendition.set(match[1],state)}let rendition="";for(const candidate of ["360p","480p","720p","1080p","2k","4k"]){const state=byRendition.get(candidate);if(state&&state.init&&state.segment){rendition=candidate;break}}if(!rendition)return null;try{const parsed=new URL(data.manifest_url);const prefix="/v/"+assetId+"/";if(!parsed.pathname.startsWith(prefix))return null;const artifactPath="hls/"+rendition+"/progressive.mp4";parsed.pathname=prefix+artifactPath;parsed.search="";parsed.hash="";return{artifactPath,contentType:"video/mp4",label:"progressive_mp4",url:parsed.toString()}}catch{return null}};const select=(data)=>{if(!data||data.status!=="ready")return null;if(preferredStartup==="opener"&&data.opener_url)return{artifactPath:"opener.mp4",contentType:data.opener_content_type||"video/mp4",label:"opener",url:data.opener_url};if(preferredStartup==="progressive"){const selected=progressive(data);if(selected)return selected}if(data.playable_state==="hls_ready"&&data.manifest_url)return{artifactPath:"hls/master.m3u8",contentType:data.manifest_content_type||"application/vnd.apple.mpegurl",label:"native_hls",url:data.manifest_url};if(data.opener_url)return{artifactPath:"opener.mp4",contentType:data.opener_content_type||"video/mp4",label:"opener",url:data.opener_url};if(data.playback_url)return{artifactPath:data.playable_state==="hls_ready"?"hls/master.m3u8":"opener.mp4",contentType:data.playback_content_type||"",label:"primary",url:data.playback_url};return null};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})}if(!video.currentSrc&&!video.getAttribute("src")){fetch(bootstrapUrl,{credentials:"same-origin",headers:{accept:"application/json"}}).then(r=>r.ok?r.json():null).then(data=>{root.setAttribute("data-rend-bootstrap-ms",String(Math.round(performance.now()-bootstrapStarted)));const selected=select(data);if(!selected)return;video.crossOrigin=crossOrigin(data);root.setAttribute("data-rend-player-state","ready");root.setAttribute("data-rend-player-selected",selected.label);root.setAttribute("data-rend-player-artifact",selected.artifactPath);if(data.poster_url){root.setAttribute("data-rend-poster",data.poster_url);video.poster=data.poster_url}root.setAttribute("data-rend-ready-status",data.status||"ready");root.setAttribute("data-rend-source-state",data.source_state||"");root.setAttribute("data-rend-playable-state",data.playable_state||"");video.src=selected.url;video.load();play()}).catch(()=>{root.setAttribute("data-rend-player-state","playback_failure")})}else{play()}})();
 </script>
 </body>
 </html>`;
@@ -383,6 +391,7 @@ export async function GET(
   const ready = bootstrap?.status === "ready" ? bootstrap : null;
   const selection = playbackSelection(bootstrap, startup);
   const edge = playbackOrigin(ready) ?? defaultPlaybackOriginHint();
+  const crossOrigin = playbackCrossOrigin(bootstrap);
   const headers = new Headers({
     "cache-control": "no-store",
     "content-type": "text/html; charset=utf-8",
@@ -395,7 +404,7 @@ export async function GET(
       headers.append("set-cookie", setCookie);
     }
   }
-  appendStartupLinkHeaders(headers, edge, selection);
+  appendStartupLinkHeaders(headers, edge, selection, crossOrigin);
 
   return new Response(
     renderFastEmbedHtml({

apps/site/app/embed-fast/route.test.mts

@@ -82,6 +82,48 @@ test("fast embed defaults to progressive fMP4 when startup hints support it", ()
   assert.doesNotMatch(html, /playback_token|set-cookie|authorization/i);
 });
 
+test("fast embed uses anonymous HLS for public playback", () => {
+  const base = readyBootstrap();
+  if (base.status !== "ready") throw new Error("expected ready bootstrap");
+  const bootstrap = {
+    ...base,
+    playback_credential_mode: "omit" as const,
+    playback_url: `https://media.rend.so/v/${ASSET_ID}/hls/master.m3u8`,
+    opener_url: `https://media.rend.so/v/${ASSET_ID}/opener.mp4`,
+    manifest_url: `https://media.rend.so/v/${ASSET_ID}/hls/master.m3u8`,
+    poster_url: `https://media.rend.so/v/${ASSET_ID}/thumbnail.jpg`,
+    prefetch_hints: [
+      {
+        artifact_path: "hls/360p/init_360p.mp4",
+        content_type: "video/mp4",
+        url: `https://media.rend.so/v/${ASSET_ID}/hls/360p/init_360p.mp4`,
+      },
+      {
+        artifact_path: "hls/360p/segment_00000.m4s",
+        content_type: "video/mp4",
+        url: `https://media.rend.so/v/${ASSET_ID}/hls/360p/segment_00000.m4s`,
+      },
+    ],
+  } satisfies Extract<WatchPlaybackBootstrapResponse, { status: "ready" }>;
+  const html = renderFastEmbedHtml({
+    assetId: ASSET_ID,
+    autoPlay: true,
+    bootstrap,
+    bootstrapUrl: `/api/player/${ASSET_ID}`,
+    bootstrapMs: 42,
+    controls: false,
+    muted: true,
+    playbackOriginHint: null,
+    startupMode: "progressive",
+  });
+
+  assert.match(html, /src="https:\/\/media\.rend\.so\/v\/00000000-0000-0000-0000-000000000001\/hls\/master\.m3u8"/);
+  assert.match(html, /crossorigin="anonymous"/);
+  assert.match(html, /data-rend-player-selected="native_hls"/);
+  assert.doesNotMatch(html, /src="https:\/\/media\.rend\.so[^"]+progressive\.mp4"/);
+  assert.doesNotMatch(html, /crossorigin="use-credentials"/);
+});
+
 test("fast embed route supports client bootstrap for immediate document response", async () => {
   const originalFetch = globalThis.fetch;
   const fetches: string[] = [];

apps/site/app/embed/[assetId]/page.tsx

@@ -12,6 +12,7 @@ import {
   initialPlaybackState,
   initialSourceSelection,
   instantPlaybackScript,
+  playbackCrossOrigin,
   playbackStateMessage,
   readyBootstrap,
   startupPreloadHints,
@@ -142,6 +143,7 @@ export default async function EmbedPage({ params, searchParams }: EmbedPageProps
   const message = playbackStateMessage(initialBootstrap, state);
   const edgeHint = playbackEdgeHint(initialBootstrap);
   const preloadHints = startupPreloadHints(initialBootstrap, startupMode);
+  const crossOrigin = playbackCrossOrigin(initialBootstrap);
 
   const playerId = `rend-embed-${assetId}`;
   const sectionStyle = accent ? ({ "--rend-accent": accent } as CSSProperties) : undefined;
@@ -166,7 +168,7 @@ export default async function EmbedPage({ params, searchParams }: EmbedPageProps
           as={hint.as}
           href={hint.url}
           type={hint.contentType}
-          crossOrigin="use-credentials"
+          crossOrigin={hint.crossOrigin}
           data-rend-startup-preload={hint.artifactPath}
         />
       ))}
@@ -202,7 +204,7 @@ export default async function EmbedPage({ params, searchParams }: EmbedPageProps
             playsInline
             preload={autoPlay ? "auto" : "metadata"}
             src={selection?.url}
-            crossOrigin="use-credentials"
+            crossOrigin={crossOrigin}
             suppressHydrationWarning
           />
           {controls && <PlayerControls />}