Add support for playing streams from CDN

server/priv/repo/seeds.exs

@@ -13,53 +13,75 @@
 require Ash.Query
 
 feeds = [
-  # %{
-  #   lat_lng_string: "48.5583362, -123.1735774",
-  #   name: "Orcasound Lab (Haro Strait)",
-  #   node_name: "rpi_orcasound_lab",
-  #   slug: "orcasound-lab",
-  #   bucket: "dev-streaming-orcasound-net",
-  #   bucket_region: "us-west-2",
-  # },
+  %{
+    lat_lng_string: "48.5583362, -123.1735774",
+    name: "Orcasound Lab",
+    node_name: "rpi_orcasound_lab",
+    slug: "orcasound-lab",
+    bucket: "audio-orcasound-net",
+    bucket_region: "us-west-2",
+    cloudfront_url: "https://audio.orcasound.net",
+    image_url: "https://s3-us-west-2.amazonaws.com/orcasite/rpi_orcasound_lab/thumbnail.png"
+   },
   %{
     lat_lng_string: "47.34922, -122.32512",
     name: "MaST Center Aquarium",
     node_name: "rpi_mast_center",
     slug: "mast-center",
-    bucket: "dev-streaming-orcasound-net",
-    bucket_region: "us-west-2"
+    bucket: "audio-orcasound-net",
+    bucket_region: "us-west-2",
+    cloudfront_url: "https://audio.orcasound.net",
+    image_url: "https://s3-us-west-2.amazonaws.com/orcasite/rpi_mast_center/thumbnail.png"
+  },
+  %{
+    lat_lng_string: "48.0336664, -122.6040035",
+    name: "Bush Point",
+    node_name: "rpi_bush_point",
+    slug: "bush-point",
+    bucket: "audio-orcasound-net",
+    bucket_region: "us-west-2",
+    cloudfront_url: "https://audio.orcasound.net",
+    image_url: "https://s3-us-west-2.amazonaws.com/orcasite/rpi_bush_point/thumbnail.png"
+  },
+  %{
+    lat_lng_string: "48.135743, -122.760614",
+    name: "Port Townsend",
+    node_name: "rpi_port_townsend",
+    slug: "port-townsend",
+    bucket: "audio-orcasound-net",
+    bucket_region: "us-west-2",
+    cloudfront_url: "https://audio.orcasound.net",
+    image_url: "https://s3-us-west-2.amazonaws.com/orcasite/rpi_port_townsend/thumbnail.png"
   },
-  # %{
-  #   lat_lng_string: "48.0336664, -122.6040035",
-  #   name: "Bush Point",
-  #   node_name: "rpi_bush_point",
-  #   slug: "bush-point",
-  #   bucket: "dev-streaming-orcasound-net",
-  #   bucket_region: "us-west-2",
-  # },
-  # %{
-  #   lat_lng_string: "48.135743, -122.760614",
-  #   name: "Port Townsend",
-  #   node_name: "rpi_port_townsend",
-  #   slug: "port-townsend",
-  #   bucket: "dev-streaming-orcasound-net",
-  #   bucket_region: "us-west-2",
-  # },
   %{
     lat_lng_string: "47.86497296593844, -122.33393605795372",
     name: "Sunset Bay",
     node_name: "rpi_sunset_bay",
     slug: "sunset-bay",
-    bucket: "dev-streaming-orcasound-net",
-    bucket_region: "us-west-2"
+    bucket: "audio-orcasound-net",
+    bucket_region: "us-west-2",
+    cloudfront_url: "https://audio.orcasound.net",
+    image_url: "https://s3-us-west-2.amazonaws.com/orcasite/rpi_sunset_bay/thumbnail.png"
   },
   %{
     lat_lng_string: "48.591294, -123.058779",
     name: "North San Juan Channel",
     node_name: "rpi_north_sjc",
     slug: "north-sjc",
-    bucket: "dev-streaming-orcasound-net",
-    bucket_region: "us-west-2"
+    bucket: "audio-orcasound-net",
+    bucket_region: "us-west-2",
+    cloudfront_url: "https://audio.orcasound.net",
+    image_url: "https://s3-us-west-2.amazonaws.com/orcasite/rpi_north_sjc/thumbnail.png"
+  },
+  %{
+    lat_lng_string: "47.388383, -122.37267",
+    name: "Point Robinson",
+    node_name: "rpi_point_robinson",
+    slug: "point-robinson",
+    bucket: "audio-orcasound-net",
+    bucket_region: "us-west-2",
+    cloudfront_url: "https://audio.orcasound.net",
+    image_url: "https://s3-us-west-2.amazonaws.com/orcasite/rpi_point_robinson/thumbnail.png"
   }
 ]
 

ui/.env.development

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_GQL_ENDPOINT='http://localhost:${SERVER_PORT:-4000}/graphql'
 NEXT_PUBLIC_SOCKET_ENDPOINT='ws://localhost:${SERVER_PORT:-4000}/socket'
-NEXT_PUBLIC_S3_BUCKET='dev-streaming-orcasound-net'
+NEXT_PUBLIC_S3_BUCKET='audio-orcasound-net'
+NEXT_PUBLIC_AUDIO_BASE_URL='https://audio.orcasound.net'

ui/.env.production

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_GQL_ENDPOINT=$GQL_ENDPOINT
 NEXT_PUBLIC_SOCKET_ENDPOINT=$SOCKET_ENDPOINT
 NEXT_PUBLIC_S3_BUCKET=$S3_BUCKET
+NEXT_PUBLIC_AUDIO_BASE_URL=$AUDIO_BASE_URL
 NEXT_PUBLIC_GA_ID=$GOOGLE_ANALYTICS_ID

ui/src/components/DetectionsTable.tsx

@@ -42,7 +42,7 @@ export default function DetectionsTable({
   onDetectionUpdate,
 }: {
   detections: Detection[];
-  feed: Pick<Feed, "slug" | "nodeName" | "bucket">;
+  feed: Pick<Feed, "slug" | "nodeName" | "bucket" | "cloudfrontUrl">;
   candidate: Pick<Candidate, "id" | "visible">;
   onDetectionUpdate: () => void;
 }) {

ui/src/components/Player/DetectionsPlayer.tsx

@@ -5,8 +5,12 @@ import dynamic from "next/dynamic";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Feed } from "@/graphql/generated";
-import { getHlsURI } from "@/hooks/useTimestampFetcher";
 import { mobileOnly } from "@/styles/responsive";
+import {
+  getAudioBaseUrlFromBucket,
+  getHlsUrl,
+  getNodeRootUrl,
+} from "@/utils/urls";
 
 import { type PlayerStatus } from "./Player";
 import PlayPauseButton from "./PlayPauseButton";
@@ -24,7 +28,7 @@ export function DetectionsPlayer({
   endOffset,
   onAudioPlay,
 }: {
-  feed: Pick<Feed, "nodeName" | "bucket">;
+  feed: Pick<Feed, "nodeName" | "bucket" | "cloudfrontUrl">;
   marks: { label: string; value: number }[];
   timestamp: number;
   startOffset: number;
@@ -38,7 +42,10 @@ export function DetectionsPlayer({
   const sliderMax = endOffset - startOffset;
   const sliderValue = playerTime - startOffset;
 
-  const hlsURI = getHlsURI(feed.bucket, feed.nodeName, timestamp);
+  const audioBaseUrl =
+    feed.cloudfrontUrl ?? getAudioBaseUrlFromBucket(feed.bucket);
+  const nodeRootUrl = getNodeRootUrl(audioBaseUrl, feed.nodeName);
+  const hlsUrl = getHlsUrl(nodeRootUrl, timestamp);
 
   const playerOptions = useMemo(
     () => ({
@@ -55,16 +62,16 @@ export function DetectionsPlayer({
       },
       sources: [
         {
-          // If hlsURI isn't set, use a dummy URI to trigger an error
-          // The dummy URI doesn't actually exist, it should return 404
+          // If hlsUrl isn't set, use a dummy URL to trigger an error
+          // The dummy URL doesn't actually exist, it should return 404
           // This is the only way to get videojs to throw an error, otherwise
           // it just won't initialize (if src is undefined/null/empty))
-          src: hlsURI ?? `${feed.nodeName}/404`,
+          src: hlsUrl ?? `${feed.nodeName}/404`,
           type: "application/x-mpegurl",
         },
       ],
     }),
-    [hlsURI, feed?.nodeName],
+    [hlsUrl, feed?.nodeName],
   );
 
   const handleReady = useCallback(
@@ -127,14 +134,14 @@ export function DetectionsPlayer({
   };
 
   useEffect(() => {
-    if (process.env.NODE_ENV === "development" && hlsURI) {
-      console.log(`New stream instance: ${hlsURI}`);
+    if (process.env.NODE_ENV === "development" && hlsUrl) {
+      console.log(`New stream instance: ${hlsUrl}`);
     }
 
     return () => {
       setPlayerStatus("idle");
     };
-  }, [hlsURI, feed.nodeName]);
+  }, [hlsUrl, feed.nodeName]);
 
   const handleSliderChange = (
     _e: Event,

ui/src/components/Player/Player.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/styles/responsive";
 import { analytics } from "@/utils/analytics";
 import { useIsRelativeOverflow } from "@/utils/layout";
+import { getAudioBaseUrlFromBucket } from "@/utils/urls";
 
 import { TitlePopover } from "../TitlePopover";
 import DetectionButton from "./DetectionButton";
@@ -41,13 +42,18 @@ export default function Player({
     | "imageUrl"
     | "thumbUrl"
     | "bucket"
+    | "cloudfrontUrl"
   >;
 }) {
   const [playerStatus, setPlayerStatus] = useState<PlayerStatus>("idle");
   const playerRef = useRef<VideoJSPlayer | null>(null);
 
-  const { timestamp, hlsURI } = useTimestampFetcher(
-    currentFeed?.bucket,
+  const audioBaseUrl =
+    currentFeed?.cloudfrontUrl ??
+    (currentFeed?.bucket && getAudioBaseUrlFromBucket(currentFeed.bucket));
+
+  const { timestamp, hlsUrl } = useTimestampFetcher(
+    audioBaseUrl,
     currentFeed?.nodeName,
   );
 
@@ -91,17 +97,17 @@ export default function Player({
       sources: currentFeed?.nodeName
         ? [
             {
-              // If hlsURI isn't set, use a dummy URI to trigger an error
-              // The dummy URI doesn't actually exist, it should return 404
+              // If hlsUrl isn't set, use a dummy URL to trigger an error
+              // The dummy URL doesn't actually exist, it should return 404
               // This is the only way to get videojs to throw an error, otherwise
               // it just won't initialize (if src is undefined/null/empty))
-              src: hlsURI ?? `${currentFeed?.nodeName}/404`,
+              src: hlsUrl ?? `${currentFeed?.nodeName}/404`,
               type: "application/x-mpegurl",
             },
           ]
         : [],
     }),
-    [hlsURI, currentFeed?.nodeName, currentFeed?.imageUrl],
+    [hlsUrl, currentFeed?.nodeName, currentFeed?.imageUrl],
   );
 
   const updateMediaSession = useCallback(
@@ -161,14 +167,14 @@ export default function Player({
   };
 
   useEffect(() => {
-    if (process.env.NODE_ENV === "development" && hlsURI) {
-      console.log(`New stream instance: ${hlsURI}`);
+    if (process.env.NODE_ENV === "development" && hlsUrl) {
+      console.log(`New stream instance: ${hlsUrl}`);
     }
 
     return () => {
       setPlayerStatus("idle");
     };
-  }, [hlsURI, currentFeed?.nodeName]);
+  }, [hlsUrl, currentFeed?.nodeName]);
 
   return (
     <Box

ui/src/components/layouts/MapLayout.tsx

@@ -22,28 +22,34 @@ const feedFromSlug = (feedSlug: string) => ({
   name: feedSlug,
   slug: feedSlug,
   nodeName: feedSlug,
-  // TODO: pass in bucket from dynamic feed instead of env/hardcoding
+  // TODO: pass in bucket and cloudfront from dynamic feed instead of env/hardcoding
   bucket: process.env.NEXT_PUBLIC_S3_BUCKET ?? "audio-orcasound-net",
+  cloudfrontUrl:
+    process.env.NEXT_PUBLIC_AUDIO_BASE_URL ?? "audio.orcasound.net",
   // TODO: figure out which coordinates to use for dynamic feeds
   latLng: { lat: 47.6, lng: -122.3 },
 });
 
 function MapLayout({ children }: { children: ReactNode }) {
   const [drawerOpen, setDrawerOpen] = useState(true);
   const router = useRouter();
-  const slug = router.query.feed as string;
+  const slugFromQuery = router.query.feed as string;
+
+  const feeds = useFeedsQuery().data?.feeds ?? [];
+  // find the slug in the list of feeds to sanitize user provided query and prevent request forgery
+  const slug = feeds.find((feed) => feed.slug === slugFromQuery)?.slug;
 
   const isDynamic = router.asPath.split("/")[1] === "dynamic";
   // don't make feed request if there's no feed slug or is dynamic
   const feedFromQuery = useFeedQuery(
-    { slug: slug },
+    // slug is guaranteed to be non-null because of the `enabled` conditional below, but TS doesn't pick it up
+    { slug: slug! }, // use non-null assertion operator
     { enabled: !!slug || isDynamic },
   ).data?.feed;
-  const feed = isDynamic ? feedFromSlug(slug) : feedFromQuery;
+  const feed = isDynamic ? feedFromSlug(slugFromQuery) : feedFromQuery;
 
   const [currentFeed, setCurrentFeed] = useState(feed);
   const [map, setMap] = useState<LeafletMap>();
-  const feeds = useFeedsQuery().data?.feeds ?? [];
 
   // update the currentFeed only if there's a new feed
   useEffect(() => {

ui/src/graphql/generated/index.ts

@@ -2206,6 +2206,7 @@ export type CandidateQuery = {
       name: string;
       nodeName: string;
       bucket: string;
+      cloudfrontUrl?: string | null;
     };
     detections: Array<{
       __typename?: "Detection";
@@ -2254,6 +2255,7 @@ export type FeedQuery = {
     imageUrl?: string | null;
     mapUrl?: string | null;
     bucket: string;
+    cloudfrontUrl?: string | null;
     latLng: { __typename?: "LatLng"; lat: number; lng: number };
   };
 };
@@ -2923,6 +2925,7 @@ export const CandidateDocument = `
       name
       nodeName
       bucket
+      cloudfrontUrl
     }
     detections {
       id
@@ -3041,6 +3044,7 @@ export const FeedDocument = `
     imageUrl
     mapUrl
     bucket
+    cloudfrontUrl
   }
 }
     `;

ui/src/graphql/queries/getCandidate.graphql

@@ -12,6 +12,7 @@ query candidate($id: ID!) {
       name
       nodeName
       bucket
+      cloudfrontUrl
     }
     detections {
       id

ui/src/graphql/queries/getFeed.graphql

@@ -13,5 +13,6 @@ query feed($slug: String!) {
     imageUrl
     mapUrl
     bucket
+    cloudfrontUrl
   }
 }