Update frontend to make use of feed's bucket for HLS stream

orcasound · Sep 9, 2024 · de452f4 · de452f4
1 parent 4685750
commit de452f4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/ui/src/components/Player/DetectionsPlayer.tsx b/ui/src/components/Player/DetectionsPlayer.tsx
@@ -5,7 +5,7 @@ import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Feed } from "@/graphql/generated";
-import { getHlsURI } from "@/hooks/useTimestampFetcher";
+import { getHlsURI, S3_BUCKET } from "@/hooks/useTimestampFetcher";
 import { mobileOnly } from "@/styles/responsive";
 
 import { type PlayerStatus } from "./Player";
@@ -24,7 +24,7 @@ export function DetectionsPlayer({
   endOffset,
   onAudioPlay,
 }: {
-  feed: Pick<Feed, "nodeName">;
+  feed: Pick<Feed, "nodeName" | "bucket">;
   marks: { label: string; value: number }[];
   timestamp: number;
   startOffset: number;
@@ -38,7 +38,7 @@ export function DetectionsPlayer({
   const sliderMax = endOffset - startOffset;
   const sliderValue = playerTime - startOffset;
 
-  const hlsURI = getHlsURI(feed.nodeName, timestamp);
+  const hlsURI = getHlsURI(feed.bucket || S3_BUCKET, feed.nodeName, timestamp);
 
   const playerOptions = useMemo(
     () => ({

diff --git a/ui/src/components/Player/Player.tsx b/ui/src/components/Player/Player.tsx
@@ -6,7 +6,7 @@ import Marquee from "react-fast-marquee";
 
 import type { Feed } from "@/graphql/generated";
 import useFeedPresence from "@/hooks/useFeedPresence";
-import { useTimestampFetcher } from "@/hooks/useTimestampFetcher";
+import { S3_BUCKET, useTimestampFetcher } from "@/hooks/useTimestampFetcher";
 import fin512 from "@/public/photos/fin-512x512.png";
 import {
   displayDesktopOnly,
@@ -33,13 +33,23 @@ export default function Player({
 }: {
   currentFeed?: Pick<
     Feed,
-    "id" | "slug" | "nodeName" | "name" | "latLng" | "imageUrl" | "thumbUrl"
+    | "id"
+    | "slug"
+    | "nodeName"
+    | "name"
+    | "latLng"
+    | "imageUrl"
+    | "thumbUrl"
+    | "bucket"
   >;
 }) {
   const [playerStatus, setPlayerStatus] = useState<PlayerStatus>("idle");
   const playerRef = useRef<VideoJSPlayer | null>(null);
 
-  const { timestamp, hlsURI } = useTimestampFetcher(currentFeed?.nodeName);
+  const { timestamp, hlsURI } = useTimestampFetcher(
+    currentFeed?.bucket || S3_BUCKET,
+    currentFeed?.nodeName,
+  );
 
   const feedPresence = useFeedPresence(currentFeed?.slug);
   const listenerCount = feedPresence?.metas.length ?? 0;

diff --git a/ui/src/hooks/useTimestampFetcher.ts b/ui/src/hooks/useTimestampFetcher.ts
@@ -3,11 +3,16 @@ import { useEffect, useState } from "react";
 if (!process.env.NEXT_PUBLIC_S3_BUCKET) {
   throw new Error("NEXT_PUBLIC_S3_BUCKET is not set");
 }
-const S3_BUCKET = process.env.NEXT_PUBLIC_S3_BUCKET;
-const S3_BUCKET_BASE = `https://s3-us-west-2.amazonaws.com/${S3_BUCKET}`;
+export const S3_BUCKET = process.env.NEXT_PUBLIC_S3_BUCKET;
 
-export const getHlsURI = (nodeName: string, timestamp: number) =>
-  `${S3_BUCKET_BASE}/${nodeName}/hls/${timestamp}/live.m3u8`;
+const bucketBaseString = (bucket: string) =>
+  `https://s3.amazonaws.com/${bucket}`;
+
+export const getHlsURI = (
+  bucket: string,
+  nodeName: string,
+  timestamp: number,
+) => `${bucketBaseString(bucket)}/${nodeName}/hls/${timestamp}/live.m3u8`;
 
 /**
  * @typedef {Object} TimestampFetcherOptions
@@ -29,24 +34,25 @@ export const getHlsURI = (nodeName: string, timestamp: number) =>
  * @returns {TimestampFetcherResult} The latest timestamp, HLS URI, and AWS console URI
  */
 export function useTimestampFetcher(
+  bucket: string,
   nodeName?: string,
   { onStart, onStop }: { onStart?: () => void; onStop?: () => void } = {},
 ) {
   const [timestamp, setTimestamp] = useState<number>();
 
   const hlsURI =
-    nodeName && timestamp ? getHlsURI(nodeName, timestamp) : undefined;
+    nodeName && timestamp ? getHlsURI(bucket, nodeName, timestamp) : undefined;
   const awsConsoleUri =
     nodeName && timestamp
-      ? `https://s3.console.aws.amazon.com/s3/buckets/${S3_BUCKET}/${nodeName}/hls/${timestamp}/`
+      ? `https://s3.console.aws.amazon.com/s3/buckets/${bucket}/${nodeName}/hls/${timestamp}/`
       : undefined;
 
   useEffect(() => {
     let currentXhr: XMLHttpRequest | undefined;
     let intervalId: NodeJS.Timeout | undefined;
 
     const fetchTimestamp = (feed: string) => {
-      const timestampURI = `${S3_BUCKET_BASE}/${feed}/latest.txt`;
+      const timestampURI = `${bucketBaseString(bucket)}/${feed}/latest.txt`;
 
       const xhr = new XMLHttpRequest();
       currentXhr = xhr;