Merge branch 'main' into contributing

Author: dthaler

server/lib/orcasite/notifications/resources/notification_instance.ex

@@ -43,7 +43,7 @@ defmodule Orcasite.Notifications.NotificationInstance do
   end
 
   actions do
-    defaults [:create, :read, :update, :destroy]
+    defaults [:read, :destroy, update: :*, create: :*]
 
     create :create_with_relationships do
       argument :subscription, :map

server/lib/orcasite/radio/audio_image.ex

@@ -167,6 +167,7 @@ defmodule Orcasite.Radio.AudioImage do
     end
 
     update :generate_spectrogram do
+      require_atomic? false
       change set_attribute(:status, :processing)
 
       change after_action(

server/lib/orcasite_web/json_api_router.ex

@@ -2,13 +2,5 @@ defmodule OrcasiteWeb.JsonApiRouter do
   use AshJsonApi.Router,
     domains: [Orcasite.Notifications, Orcasite.Radio],
     json_schema: "/json_schema",
-    open_api: "/open_api",
-    modify_open_api: {__MODULE__, :modify_open_api, []}
-
-  def modify_open_api(spec, _, _) do
-    %{
-      spec
-      | servers: Enum.map(spec.servers, &%{&1 | url: &1.url <> "/api/json"})
-    }
-  end
+    open_api: "/open_api"
 end

ui/src/components/DetectionsTable.tsx

@@ -75,7 +75,13 @@ export default function DetectionsTable({
       <DetectionsPlayer
         feed={feed}
         marks={detections
-          .sort((a, b) => a.id.localeCompare(b.id))
+          .sort(({ timestamp: a }, { timestamp: b }) => {
+            const date_a = new Date(a);
+            const date_b = new Date(b);
+
+            // Sort by timestamp, low to high
+            return +date_a - +date_b;
+          })
           .map((d, index) => ({
             label: (index + 1).toString(),
             value: Number((+d.playerOffset - +startOffset).toFixed(1)),

ui/src/components/Player/Player.tsx

@@ -119,16 +119,26 @@ export default function Player({
     }
   }, [playerRef, updateMediaSession]);
 
-  const handleReady = useCallback((player: VideoJSPlayer) => {
-    playerRef.current = player;
+  const handleReady = useCallback(
+    (player: VideoJSPlayer) => {
+      playerRef.current = player;
 
-    player.on("playing", () => {
-      setPlayerStatus("playing");
-    });
-    player.on("pause", () => setPlayerStatus("paused"));
-    player.on("waiting", () => setPlayerStatus("loading"));
-    player.on("error", () => setPlayerStatus("error"));
-  }, []);
+      player.on("playing", () => {
+        setPlayerStatus("playing");
+        currentFeed?.slug && analytics.stream.started(currentFeed.slug);
+      });
+      player.on("pause", () => {
+        setPlayerStatus("paused");
+        currentFeed?.slug && analytics.stream.paused(currentFeed.slug);
+      });
+      player.on("waiting", () => setPlayerStatus("loading"));
+      player.on("error", () => {
+        setPlayerStatus("error");
+        currentFeed?.slug && analytics.stream.error(currentFeed.slug);
+      });
+    },
+    [currentFeed?.slug],
+  );
 
   const handlePlayPauseClick = async () => {
     const player = playerRef.current;
@@ -146,10 +156,10 @@ export default function Player({
     try {
       if (playerStatus === "loading" || playerStatus === "playing") {
         await player.pause();
-        currentFeed?.slug && analytics.stream.paused(currentFeed.slug);
+        currentFeed?.slug && analytics.stream.userPaused(currentFeed.slug);
       } else {
         await player.play();
-        currentFeed?.slug && analytics.stream.started(currentFeed.slug);
+        currentFeed?.slug && analytics.stream.userStarted(currentFeed.slug);
       }
     } catch (e) {
       console.error(e);

ui/src/components/layouts/MapLayout.tsx

@@ -44,6 +44,7 @@ function MapLayout({ children }: { children: ReactNode }) {
   const [currentFeed, setCurrentFeed] = useState(feed);
   const [map, setMap] = useState<LeafletMap>();
   const feeds = useFeedsQuery().data?.feeds ?? [];
+  const firstOnlineFeed = feeds.filter(({ online }) => online)[0];
 
   // update the currentFeed only if there's a new feed
   useEffect(() => {
@@ -52,7 +53,10 @@ function MapLayout({ children }: { children: ReactNode }) {
       map?.setZoom(9);
       map?.panTo(feed.latLng);
     }
-  }, [feed, map, currentFeed]);
+    if (!feed && !currentFeed && firstOnlineFeed) {
+      setCurrentFeed(firstOnlineFeed);
+    }
+  }, [feed, map, currentFeed, firstOnlineFeed]);
 
   const invalidateSize = () => {
     if (map) {

ui/src/graphql/generated/index.ts

@@ -2338,6 +2338,8 @@ export type FeedsQuery = {
     imageUrl?: string | null;
     thumbUrl?: string | null;
     mapUrl?: string | null;
+    bucket: string;
+    online?: boolean | null;
     latLng: { __typename?: "LatLng"; lat: number; lng: number };
   }>;
 };
@@ -3207,6 +3209,8 @@ export const FeedsDocument = `
     imageUrl
     thumbUrl
     mapUrl
+    bucket
+    online
   }
 }
     `;

ui/src/graphql/queries/listFeeds.graphql

@@ -11,5 +11,7 @@ query feeds {
     imageUrl
     thumbUrl
     mapUrl
+    bucket
+    online
   }
 }

ui/src/utils/analytics.ts

@@ -1,6 +1,7 @@
 import ReactGA from "react-ga4";
 
 export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
+let analyticsInitialized = false;
 
 const about = {
   sampleAudioPlayed: (exampleTitle: string) =>
@@ -49,6 +50,24 @@ const stream = {
       action: "Player paused",
       label: feedSlug,
     }),
+  userStarted: (feedSlug: string) =>
+    sendEvent({
+      category: "Stream",
+      action: "User started player",
+      label: feedSlug,
+    }),
+  userPaused: (feedSlug: string) =>
+    sendEvent({
+      category: "Stream",
+      action: "User paused player",
+      label: feedSlug,
+    }),
+  error: (feedSlug: string) =>
+    sendEvent({
+      category: "Stream",
+      action: "Player errored",
+      label: feedSlug,
+    }),
   playerTextClicked: (playerText: string) => {
     sendEvent({
       category: "Stream",
@@ -59,9 +78,19 @@ const stream = {
 };
 
 function sendEvent(...eventParams: Parameters<typeof ReactGA.event>) {
-  if (GA_TRACKING_ID) {
-    ReactGA.initialize(GA_TRACKING_ID);
-    ReactGA.event(...eventParams);
+  try {
+    if (GA_TRACKING_ID) {
+      if (!analyticsInitialized) {
+        ReactGA.initialize(GA_TRACKING_ID);
+        analyticsInitialized = true;
+      }
+      ReactGA.event(...eventParams);
+    }
+  } catch (e) {
+    console.error("Failed to send analytics event:", {
+      error: e,
+      eventParams,
+    });
   }
 }