Merge pull request #8 from Zibbp/new-feats

New features

src/components/Vod/Card.tsx

@@ -18,6 +18,7 @@ import {
 import Link from "next/link";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
+import localizedFormat from "dayjs/plugin/localizedFormat";
 import { useEffect, useState } from "react";
 import { IconCircleCheck, IconDotsVertical } from "@tabler/icons";
 import getConfig from "next/config";
@@ -26,6 +27,7 @@ import { ROLES, useJsxAuth } from "../../hooks/useJsxAuth";
 import { VodMenu } from "./Menu";
 import useUserStore, { UserState } from "../../store/user";
 dayjs.extend(duration);
+dayjs.extend(localizedFormat);
 
 const useStyles = createStyles((theme) => ({
   card: {
@@ -258,7 +260,10 @@ export const VodCard = ({ vod, playback }: any) => {
                 ).toLocaleString()}`}
               >
                 <Text className={classes.infoBarText}>
-                  {dayjs(vod.streamed_at).format("YYYY/MM/DD")}
+                  {dayjs(vod.streamed_at).format("YYYY/MM/DD")}{" "}
+                  {user.settings.moreUIDetails && (
+                    <span>{dayjs(vod.streamed_at).format("LT")}</span>
+                  )}
                 </Text>
               </Tooltip>
 
@@ -353,7 +358,10 @@ export const VodCard = ({ vod, playback }: any) => {
               ).toLocaleString()}`}
             >
               <Text className={classes.infoBarText}>
-                {dayjs(vod.streamed_at).format("YYYY/MM/DD")}
+                {dayjs(vod.streamed_at).format("YYYY/MM/DD")}{" "}
+                {user.settings.moreUIDetails && (
+                  <span>{dayjs(vod.streamed_at).format("LT")}</span>
+                )}
               </Text>
             </Tooltip>
             <div className={classes.infoBarRight}>

src/components/Vod/InfoModalContent.tsx

@@ -23,60 +23,8 @@ export const VodInfoModalContent = ({ vod }: any) => {
   return (
     <div>
       <div>
-        Id: <Code>{vod.id}</Code>
+        <Code block>{JSON.stringify(vod, null, 2)}</Code>
       </div>
-      <div>
-        External Id: <Code>{vod.ext_id}</Code>
-      </div>
-      <div>
-        Platform: <Code>{vod.platform}</Code>
-      </div>
-      <div>
-        Type: <Code>{vod.type}</Code>
-      </div>
-      <div>
-        Duration: <Code>{vod.duration}</Code>
-      </div>
-      <div>
-        Views: <Code>{vod.views}</Code>
-      </div>
-      <div>
-        Resolution: <Code>{vod.resolution}</Code>
-      </div>
-      <div>
-        Thumbnail Path: <Code>{vod.thumbnail_path}</Code>
-      </div>
-      <div>
-        Web Thumbnail Path: <Code>{vod.web_thumbnail_path}</Code>
-      </div>
-      <div>
-        Video Path: <Code>{vod.video_path}</Code>
-      </div>
-      <div>
-        Chat Path: <Code>{vod.chat_path}</Code>
-      </div>
-      <div>
-        Chat Video Path: <Code>{vod.chat_video_path}</Code>
-      </div>
-      <div>
-        Info Path: <Code>{vod.info_path}</Code>
-      </div>
-      <div>
-        Streamed At: <Code>{vod.streamed_at}</Code>
-      </div>
-      <div>
-        Created/Archived At: <Code>{vod.created_at}</Code>
-      </div>
-      {vod.edges.channel && (
-        <div>
-          <div>
-            Channel: <Code>{vod.edges.channel.name}</Code>
-          </div>
-          <div>
-            Channel Id: <Code>{vod.edges.channel.id}</Code>
-          </div>
-        </div>
-      )}
       <div>
         <Text mt={15} size="lg" weight={500}>
           Video FFprobe

src/pages/archive/index.tsx

@@ -12,6 +12,7 @@ import {
   Select,
   createStyles,
   Switch,
+  Divider,
 } from "@mantine/core";
 import { useDocumentTitle, useInputState } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
@@ -63,7 +64,8 @@ const ArchivePage = () => {
   const [archiveQuality, setArchiveQuality] = useInputState<string | null>(
     "best"
   );
-
+  const [channelData, setChannelData] = useState([]);
+  const [channelId, setChannelID] = useState("");
   useDocumentTitle("Archive - Ganymede");
 
   const qualityOptions = [
@@ -77,36 +79,98 @@ const ArchivePage = () => {
   const archiveVodSubmit = useMutation({
     mutationKey: ["archive-vod"],
     mutationFn: () => {
-      if (archiveInput == "") {
+      if (!archiveInput && !channelId) {
+        return;
+      }
+      if (archiveInput && channelId) {
+        showNotification({
+          title: "Select one",
+          message: "Please either enter an ID or select a channel (not both)",
+        });
         return;
       }
       setArchiveSubmitLoading(true);
+      if (archiveInput != "") {
+        return useApi(
+          {
+            method: "POST",
+            url: `/api/v1/archive/vod`,
+            data: {
+              vod_id: archiveInput,
+              quality: archiveQuality,
+              chat: archiveChat,
+              render_chat: renderChat,
+            },
+            withCredentials: true,
+          },
+          false
+        )
+          .then((res) => {
+            setArchiveSubmitLoading(false);
+            setTwitchVodInfo(null);
+            setArchiveInput("");
+            showNotification({
+              title: "VOD Archived",
+              message: "VOD has been added to the archive queue",
+            });
+          })
+          .catch((err) => {
+            setArchiveSubmitLoading(false);
+          });
+      }
+      if (channelId != "") {
+        return useApi(
+          {
+            method: "POST",
+            url: `/api/v1/live/archive`,
+            data: {
+              channel_id: channelId,
+              resolution: archiveQuality,
+              archive_chat: archiveChat,
+              render_chat: renderChat,
+            },
+            withCredentials: true,
+          },
+          false
+        )
+          .then((res) => {
+            setArchiveSubmitLoading(false);
+            setTwitchVodInfo(null);
+            setArchiveInput("");
+            showNotification({
+              title: "Livestream Archived",
+              message: "Livestream has been added to the archive queue",
+            });
+          })
+          .catch((err) => {
+            setArchiveSubmitLoading(false);
+          });
+      }
+    },
+  });
+
+  // Fetch channels
+  const { data: channels } = useQuery({
+    queryKey: ["admin-channels"],
+    queryFn: () => {
       return useApi(
         {
-          method: "POST",
-          url: `/api/v1/archive/vod`,
-          data: {
-            vod_id: archiveInput,
-            quality: archiveQuality,
-            chat: archiveChat,
-            render_chat: renderChat,
-          },
+          method: "GET",
+          url: `/api/v1/channel`,
           withCredentials: true,
         },
         false
-      )
-        .then((res) => {
-          setArchiveSubmitLoading(false);
-          setTwitchVodInfo(null);
-          setArchiveInput("");
-          showNotification({
-            title: "VOD Archived",
-            message: "VOD has been added to the archive queue",
+      ).then((res) => {
+        const tmpArr = [];
+        res.data.forEach((channel) => {
+          tmpArr.push({
+            label: channel.name,
+            value: channel.id,
           });
-        })
-        .catch((err) => {
-          setArchiveSubmitLoading(false);
         });
+        setChannelData(tmpArr);
+        return res?.data;
+      });
     },
   });
 
@@ -154,21 +218,32 @@ const ArchivePage = () => {
                 radius="md"
                 withBorder
               >
-                <Center mb={10}>
+                <Center>
                   <div>
-                    <Title>Archive Video</Title>
-                    <Center>
-                      <Text>Enter ID or URL</Text>
-                    </Center>
+                    <Title>Archive</Title>
                   </div>
                 </Center>
+                <Center mb={10}>
+                  <Text>
+                    Enter a video ID or select a channel to archive a livestream
+                  </Text>
+                </Center>
                 <TextInput
                   value={archiveInput}
                   onChange={(e) => getVodInfo.mutate(e.currentTarget.value)}
-                  placeholder="Video ID"
+                  placeholder="Video ID or URL"
                   withAsterisk
                 />
-                <Group mt={5} mb={5}>
+                <Divider my="xs" label="Or" labelPosition="center" />
+                <Select
+                  placeholder="Channel"
+                  data={channelData}
+                  value={channelId}
+                  onChange={setChannelID}
+                  searchable
+                  mb="md"
+                />
+                <Group mt={5} mb={10}>
                   <Select
                     className={classes.qualitySelect}
                     placeholder="Resolution"
@@ -204,7 +279,6 @@ const ArchivePage = () => {
               </Card>
               {twitchVodInfo?.id && <VodPreview vod={twitchVodInfo} />}
             </div>
-            {/* Show VOD preview */}
           </Center>
         </Container>
       </div>

src/pages/profile.tsx

@@ -41,18 +41,25 @@ const ProfilePage = () => {
   const [oldPassword, setOldPassword] = useInputState("");
   const [password, setPassword] = useInputState("");
   const [passwordConfirm, setPasswordConfirm] = useInputState("");
-  const [checked, setChecked] = useState(false);
+  const [useNewChatPlayer, setUseNewChatPlayer] = useState(false);
+  const [showMoreUIDetails, setShowMoreUIDetails] = useState(false);
 
   const { classes, theme } = useStyles();
 
   useDocumentTitle("Profile - Ganymede");
 
   useEffect(() => {
-    setChecked(user.settings.useNewChatPlayer);
+    setUseNewChatPlayer(user.settings.useNewChatPlayer);
+    setShowMoreUIDetails(user.settings.moreUIDetails);
   }, []);
 
   const updateUserSettings = async () => {
-    useUserStore.setState({ settings: { useNewChatPlayer: checked } });
+    useUserStore.setState({
+      settings: {
+        useNewChatPlayer: useNewChatPlayer,
+        moreUIDetails: showMoreUIDetails,
+      },
+    });
     localStorage.setItem(
       "ganymedeUserSettings",
       JSON.stringify(useUserStore.getState().settings)
@@ -158,10 +165,21 @@ const ProfilePage = () => {
 
             <div>
               <Switch
-                checked={checked}
-                onChange={(event) => setChecked(event.currentTarget.checked)}
+                checked={useNewChatPlayer}
+                onChange={(event) =>
+                  setUseNewChatPlayer(event.currentTarget.checked)
+                }
                 label="Use new chat player"
                 description="Disable to use the standard rendered video chat playback."
+                mb={10}
+              />
+              <Switch
+                checked={showMoreUIDetails}
+                onChange={(event) =>
+                  setShowMoreUIDetails(event.currentTarget.checked)
+                }
+                label="More UI details"
+                description="Show more information in the UI."
               />
               <Button
                 onClick={() => updateUserSettings()}

src/store/user.tsx

@@ -13,6 +13,7 @@ export interface UserState {
 
 interface UserSettings {
   useNewChatPlayer: boolean;
+  moreUIDetails: boolean;
 }
 
 const useUserStore = create<UserState>((set) => ({
@@ -24,6 +25,7 @@ const useUserStore = create<UserState>((set) => ({
   createdAt: "",
   settings: {
     useNewChatPlayer: true,
+    moreUIDetails: false,
   },
   oauth: false,
   setUser: (user: UserState) => set(user),