Youtube integration and more!

Author: Techno11

src/data/admin-api/event-streams.ts

@@ -33,4 +33,37 @@ export const useRunEventStreamSetter = () => useSupaMutation({
       client: FimSupabaseClient,
       { eventIds }: { eventIds: string[] }
     ) => runEventStreamSetter(client, eventIds)
+});
+
+
+const livestreamDelete = async (
+  client: FimSupabaseClient,
+  livestreamId: string
+) => {
+  return fetch(
+    `${import.meta.env.PUBLIC_ADMIN_API_URL}/api/v1/event-streams/${livestreamId}`,
+    {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${
+          (await client.auth.getSession()).data.session?.access_token
+        }`,
+      },
+    }
+  ).then(async (resp) => {
+    if (resp.status === 401 || resp.status === 403)
+      throw new Error("You do not have permission to perform this action.");
+    if (!resp.ok)
+      throw new Error(
+        `An error occurred while setting the event streams: ${resp.statusText}`
+      );
+  });
+};
+
+export const useLivestreamDelete = () => useSupaMutation({
+    mutationFn: (
+      client: FimSupabaseClient,
+      { livestreamId }: { livestreamId: string }
+    ) => livestreamDelete(client, livestreamId)
 });

src/data/supabase/av-tools.ts

@@ -18,6 +18,17 @@ type EventMatchVideoStat = {
   latePlayoffVideos: string[] | null,
 };
 
+export type EventStream = {
+  id: string,
+  event_id: string,
+  title: string,
+  platform: string,
+  channel: string,
+  url: string,
+  internal_id: string,
+  start_time: Date,
+}
+
 export const getEventMatchVideoStats = async (client: FimSupabaseClient, onlyCurrent: boolean = true, eventIds?: string[]): Promise<EventMatchVideoStat[]> => {
   let query = client
     .from("event_match_video_stats")
@@ -65,4 +76,23 @@ const mapDbToEventMatchVideoStat = (db: EventMatchVideoStat): EventMatchVideoSta
     numPlayoffVideos: db.numPlayoffVideos,
     latePlayoffVideos: db.latePlayoffVideos
   } as EventMatchVideoStat;
-}
+}
+
+const getEventStreamsFromEventIds = async (client: FimSupabaseClient, eventIds: string[]): Promise<EventStream[]> => {
+  const { data, error } = await client
+    .from("event_streams")
+    .select<string, EventStream>("id, event_id, title, platform, channel, url, internal_id, start_time")
+    .in("event_id", eventIds);
+  if (error) throw new Error(error.message);
+
+  return data;
+};
+
+export const getEventStreamsFromEventIdsQueryKey = (...params: Parameters<OmitFirstArg<typeof getEventStreamsFromEventIds>>) => ["getEventStreamsFromEventIds", ...params];
+
+export const useGetEventStreamsFromEventIds = (...params: Parameters<OmitFirstArg<typeof getEventStreamsFromEventIds>>) => useSupaQuery({
+  queryKey: getEventStreamsFromEventIdsQueryKey(...params),
+  queryFn: async (client) => {
+    return await getEventStreamsFromEventIds(client, ...params)
+  }
+});

src/data/supabase/events.ts

@@ -3,6 +3,7 @@ import { FimSupabaseClient } from "../../supabaseContext";
 import { useSupaQuery } from "src/hooks/useSupaQuery";
 import { EventStatus } from "../eventStatus";
 import { DataSource } from "src/data/admin-api/events.ts";
+import { StreamingConfig } from "./truckRoutes";
 
 export type EventSlim = {
   id: string
@@ -15,7 +16,8 @@ export type EventSlim = {
   status: EventStatus,
   truck_routes?: {
     id: number,
-    name: string
+    name: string,
+    streaming_config?: StreamingConfig
   }
 };
 
@@ -60,7 +62,7 @@ export type EventTeam = {
 export const getEventsForSeason = async (client: FimSupabaseClient, seasonId: number): Promise<EventSlim[]> => {
   const { data, error } = await client
     .from("events")
-    .select<string, EventSlim>("id,key,code,name,start_time,end_time,status,truck_routes(id,name)")
+    .select<string, EventSlim>("id,key,code,name,start_time,end_time,status,truck_routes(id,name,streaming_config)")
     .order("start_time", {ascending: true})
     .order("name", {ascending: true})
     .eq('season_id', seasonId);
@@ -191,7 +193,8 @@ export const mapDbToEventSlim = (db: EventSlim): EventSlim => {
     status: db.status,
     truck_routes: db.truck_routes ? {
       id: db.truck_routes.id,
-      name: db.truck_routes.name
+      name: db.truck_routes.name,
+      streaming_config: db.truck_routes.streaming_config ? db.truck_routes.streaming_config : undefined
     } : undefined,
   } as EventSlim;
 }

src/pages/av-tools/event-livestreams.tsx

@@ -1,3 +1,4 @@
+import { Delete, Refresh, YouTube } from "@mui/icons-material";
 import {
   FormControl,
   InputLabel,
@@ -8,36 +9,102 @@ import {
   ListItemText,
   Typography,
   Button,
+  Divider,
+  IconButton,
+  Tooltip,
+  CircularProgress,
+  ListItemIcon,
+  Box,
 } from "@mui/material";
-import { isWithinInterval } from "date-fns";
-import { useState } from "react";
-import { useRunEventStreamSetter } from "src/data/admin-api/event-streams";
+import { Fragment, useMemo, useState } from "react";
+import { useLivestreamDelete, useRunEventStreamSetter } from "src/data/admin-api/event-streams";
+import {
+  EventStream,
+  useGetEventStreamsFromEventIds,
+} from "src/data/supabase/av-tools";
 import { useGetEventsForSeason } from "src/data/supabase/events";
 import { useGetSeasons } from "src/data/supabase/seasons";
 
 const EventLivestreams = () => {
+  // Seasons
   const seasons = useGetSeasons();
+
+  // Track Selected Season
   const [seasonId, setSeasonId] = useState<number | undefined>(
     seasons.data?.[seasons.data?.length - 1]?.id
   );
+
+  // Track loading state for single event updates
+  const [singleLoading, setSingleLoading] = useState<string>("");
+  const [singleDelete, setSingleDelete] = useState<string>("");
+
+  // Events for Season
   const events = useGetEventsForSeason(seasonId ?? -1);
-  const filteredEvents = (events.data ?? []).filter(
-    (ev) =>
-      ev.truck_routes &&
-      isWithinInterval(new Date(), {
-        start: ev.start_time,
-        end: ev.end_time,
-      })
+
+  // Filter to events with routes that are current or upcoming
+  const filteredEvents = useMemo(
+    () =>
+      (events.data ?? []).filter(
+        (ev) =>
+          ev.truck_routes &&
+          (ev.start_time >= new Date() || ev.end_time >= new Date())
+      ),
+    [events.data]
+  );
+
+  // Get existing streams for these events
+  const eventStreams = useGetEventStreamsFromEventIds(
+    filteredEvents.map((ev) => ev.id)
   );
 
+  // Map of eventId to streams
+  const streamMap = useMemo(() => {
+    const map: { [eventId: string]: EventStream[] } = {};
+    if (eventStreams.data) {
+      for (const stream of eventStreams.data) {
+        if (!map[stream.event_id]) map[stream.event_id] = [];
+        map[stream.event_id].push(stream);
+      }
+    }
+    console.log(map);
+    return map;
+  }, [eventStreams.data]);
+
   const setEvents = useRunEventStreamSetter();
+  const deleteStream = useLivestreamDelete();
 
   const runSetEvents = () => {
-    setEvents.mutate({
+    setEvents.mutateAsync({
       eventIds: filteredEvents.map((ev) => ev.id),
+    }).finally(() => {
+      eventStreams.refetch();
     });
   };
 
+  const runSingleEvent = (eventId: string) => {
+    setSingleLoading(eventId);
+    setEvents
+      .mutateAsync({
+        eventIds: [eventId],
+      })
+      .finally(() => {
+        eventStreams.refetch();
+        setSingleLoading("");
+      });
+  };
+
+  const runDeleteStream = (livestreamId: string) => {
+    setSingleDelete(livestreamId.toString());
+    deleteStream
+      .mutateAsync({
+        livestreamId,
+      })
+      .finally(() => {
+        eventStreams.refetch();
+        setSingleDelete("");
+      });
+  };
+
   return (
     <>
       {!seasons.isPending && (
@@ -69,37 +136,109 @@ const EventLivestreams = () => {
           {!events.isPending && (
             <>
               <List>
-                {(events.data ?? []).length === 0 ? (
+                {filteredEvents.length === 0 ? (
                   <ListItem>
                     <ListItemText primary="No events for this season" />
                   </ListItem>
                 ) : (
                   filteredEvents.map((ev: any) => (
-                    <ListItem key={ev.id} divider>
-                      <ListItemText
-                        primary={ev.name}
-                        secondary={
-                          (ev.start_time
-                            ? new Date(ev.start_time).toLocaleString()
-                            : "") +
-                          (ev.location ? ` — ${ev.location}` : "") +
-                          (ev.truck_routes ? ` — ${ev.truck_routes.name}` : "")
+                    <Fragment key={ev.id}>
+                      <ListItem
+                        divider
+                        secondaryAction={
+                          <Tooltip title="Update or Create Livestream">
+                            <IconButton
+                              edge="end"
+                              aria-label="delete"
+                              onClick={() => runSingleEvent(ev.id)}
+                              disabled={singleLoading === ev.id}
+                            >
+                              {singleLoading === ev.id ? (
+                                <CircularProgress size={24} />
+                              ) : (
+                                <Refresh />
+                              )}
+                            </IconButton>
+                          </Tooltip>
                         }
-                      />
-                    </ListItem>
+                      >
+                        <ListItemText
+                          primary={ev.name}
+                          secondary={
+                            (ev.start_time
+                              ? new Date(ev.start_time).toLocaleString()
+                              : "") +
+                            (ev.location ? ` — ${ev.location}` : "") +
+                            (ev.truck_routes
+                              ? ` — ${ev.truck_routes.name}`
+                              : "") +
+                            (ev.truck_routes?.streaming_config?.Channel_Type
+                              ? ` (${ev.truck_routes.streaming_config.Channel_Type} - ${ev.truck_routes.streaming_config.Channel_Id})`
+                              : "")
+                          }
+                        />
+                      </ListItem>
+
+                      {streamMap[ev.id] && streamMap[ev.id].length > 0 && (
+                        <List sx={{ pl: 4 }}>
+                          {streamMap[ev.id].map((stream) => (
+                            <ListItem 
+                              key={stream.id}                              
+                              secondaryAction={
+                                <Tooltip title="Delete Livestream">
+                                  <IconButton
+                                    edge="end"
+                                    aria-label="delete"
+                                    onClick={() => runDeleteStream(stream.id)}
+                                    disabled={singleDelete === stream.id.toString()}
+                                    sx={{mr: 10}}
+                                  >
+                                    {singleDelete === stream.id.toString() ? (
+                                      <CircularProgress size={24} />
+                                    ) : (
+                                      <Delete />
+                                    )}
+                                  </IconButton>
+                                </Tooltip>
+                              }
+                            >
+                              <ListItemIcon>
+                                {stream.platform.toLowerCase() === "twitch" ? (
+                                  <img
+                                    src="https://pngimg.com/d/twitch_PNG48.png"
+                                    alt="Twitch"
+                                    style={{ width: 24, height: 24 }}
+                                  />
+                                ) : (
+                                  <YouTube />
+                                )}
+                              </ListItemIcon>
+                              <ListItemText
+                                primary={stream.title}
+                                secondary={`${stream.platform} - ${stream.url}`}
+                              />
+                            </ListItem>
+                          ))}
+                        </List>
+                      )}
+
+                      <Divider />
+                    </Fragment>
                   ))
                 )}
               </List>
             </>
           )}
 
-          <Button
-            variant="contained"
-            loading={setEvents.isPending}
-            onClick={runSetEvents}
-          >
-            Set Livestreams for Current, Routed Events
-          </Button>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button
+              variant="contained"
+              loading={setEvents.isPending}
+              onClick={runSetEvents}
+            >
+              Set Livestreams for All Routed Events
+            </Button>
+          </Box>
         </>
       )}
     </>