Merge pull request #27 from Zibbp/updates-0331

Updates-0331
Zibbp · Mar 31, 2024 · 229fcea · 229fcea
2 parents d4e7fab + c210a20
commit 229fcea
Show file tree

Hide file tree

Showing 22 changed files with 771 additions and 752 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,32 +16,32 @@
     "@mantine/hooks": "^7.5.3",
     "@mantine/notifications": "^7.5.3",
     "@tabler/icons-react": "^2.47.0",
-    "@tanstack/react-query": "^5.21.7",
-    "@tanstack/react-query-devtools": "^5.21.7",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.56",
-    "@types/react-dom": "18.2.19",
+    "@tanstack/react-query": "^5.28.9",
+    "@tanstack/react-query-devtools": "^5.28.10",
+    "@types/node": "20.12.2",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.23",
     "@vidstack/react": "^1.10.7",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "clsx": "^2.1.0",
     "cookies-next": "^2.1.1",
     "dayjs": "^1.11.10",
-    "embla-carousel-react": "^7.1.0",
+    "embla-carousel-react": "^8.0.0",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
-    "mantine-datatable": "^7.5.1",
+    "mantine-datatable": "^7.6.1",
     "media-icons": "^0.10.0",
-    "next": "^14.1.0",
+    "next": "^14.1.4",
     "plyr-react": "^5.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.50.1",
-    "typescript": "5.3.3",
+    "react-hook-form": "^7.51.2",
+    "typescript": "5.4.3",
     "vidstack": "^1.10.7",
-    "zustand": "^4.5.1"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1"
   }

diff --git a/src/components/Admin/Watched/Drawer.tsx b/src/components/Admin/Watched/Drawer.tsx
@@ -4,6 +4,7 @@ import {
   Group,
   Loader,
   MultiSelect,
+  NumberInput,
   Select,
   Switch,
   Text,
@@ -31,6 +32,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
   const [lastLive, setLastLive] = useState(watched?.last_live);
   const [channelId, setChannelId] = useState([]);
   const [downloadSubOnly, setDownloadSubOnly] = useState(false);
+  const [maxVideoAge, setMaxVideoAge] = useState<string | number>(0)
 
   const [channelData, setChannelData] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -63,6 +65,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
       setChannelId([...channelId, watched?.edges.channel.id]);
       setRenderChat(watched?.render_chat);
       setDownloadSubOnly(watched?.download_sub_only);
+      setMaxVideoAge(watched?.video_age);
 
       if (watched?.edges?.categories) {
         const tmpArr = [];
@@ -96,6 +99,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
               render_chat: renderChat,
               download_sub_only: downloadSubOnly,
               categories: selectedTwitchCategories,
+              max_age: maxVideoAge,
             },
             withCredentials: true,
           },
@@ -135,6 +139,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
                   render_chat: renderChat,
                   download_sub_only: downloadSubOnly,
                   categories: selectedTwitchCategories,
+                  max_age: maxVideoAge,
                 },
                 withCredentials: true,
               },
@@ -157,6 +162,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
                   render_chat: renderChat,
                   download_sub_only: downloadSubOnly,
                   categories: selectedTwitchCategories,
+                  max_age: maxVideoAge,
                 },
                 withCredentials: true,
               },
@@ -358,6 +364,15 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
         <div>
           <Title order={3}>Advanced</Title>
         </div>
+        <div>
+          <NumberInput
+            label="Max Video Age (days)"
+            description="Archive videos that are not older than this number of days (0 to archive all)"
+            placeholder="Enter a number"
+            value={maxVideoAge}
+            onChange={setMaxVideoAge}
+          />
+        </div>
         <div>
           {twitchCategoriesLoading || formattedTwitchCategories.length == 0 ? (
             <Loader color="violet" />
@@ -368,7 +383,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
               value={selectedTwitchCategories}
               onChange={setSelectedTwitchCategories}
               data={formattedTwitchCategories}
-              dropdownPosition="top"
+              comboboxProps={{ position: 'top', middlewares: { flip: false, shift: false } }}
               label="Archive specific video categories"
               placeholder="Search for a category"
               description="Archive only videos from these categories. Leave blank to archive all categories. Does not apply to live streams."

diff --git a/src/components/Channel/Card.tsx b/src/components/Channel/Card.tsx
@@ -48,7 +48,6 @@ export const ChannelCard = ({ channel, ...props }: ChannelCardProps) => {
 
   return (
     <Link href={"/channels/" + channel.name}>
-
       <Card key={channel.id} p="md" radius="md" component="a" href="#" className={classes.card}>
         <AspectRatio ratio={300 / 300}>
           <Image src={`${publicRuntimeConfig.CDN_URL}${channel.image_path}`} alt={`${channel.name}`} />
@@ -59,8 +58,6 @@ export const ChannelCard = ({ channel, ...props }: ChannelCardProps) => {
           </Title>
         </Center>
       </Card>
-
-
     </Link>
   );
 };
diff --git a/src/components/Landing/ContinueWatching.tsx b/src/components/Landing/ContinueWatching.tsx
@@ -49,7 +49,7 @@ const LandingContinueWatching = () => {
       ) : (
         <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs" verticalSpacing="xs">
           {data?.data?.map((item: any) => (
-            <VideoCard video={item.vod} playback={data?.playback} showChannel={true} />
+            <VideoCard key={item.vod.id} video={item.vod} playback={data?.playback} showChannel={true} />
           ))}
         </SimpleGrid>
       )}

diff --git a/src/components/Queue/Header.module.css b/src/components/Queue/Header.module.css
@@ -2,7 +2,7 @@
   height: auto;
   padding-bottom: 10px;
   padding-top: 10px;
-  background-color: var(--mantine-color-dark-6);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
 }
 .queueHeaderContents {
   display: flex;

diff --git a/src/components/Vod/Card.tsx b/src/components/Vod/Card.tsx
@@ -106,18 +106,16 @@ const VideoCard = ({
       )}
       <Link href={video.processing ? `#` : `/vods/${video.id}`}>
         <Card.Section>
-          <a>
-            <Image
-              className={classes.videoImage}
-              src={`${publicRuntimeConfig.CDN_URL}${escapeURL(
-                video.web_thumbnail_path
-              )}`}
-              onError={handleError}
-              width={imageError ? "100%" : "100%"}
-              height={imageError ? "5rem" : "100%"}
-              fallbackSrc="/images/ganymede-thumbnail.webp"
-            />
-          </a>
+          <Image
+            className={classes.videoImage}
+            src={`${publicRuntimeConfig.CDN_URL}${escapeURL(
+              video.web_thumbnail_path
+            )}`}
+            onError={handleError}
+            width={imageError ? "100%" : "100%"}
+            height={imageError ? "5rem" : "100%"}
+            fallbackSrc="/images/ganymede-thumbnail.webp"
+          />
           {Math.round(progress) > 0 && !watched && (
             <Tooltip label={`${Math.round(progress)}% watched`}>
               <Progress

diff --git a/src/components/layouts/Navbar.module.css b/src/components/layouts/Navbar.module.css
@@ -49,4 +49,28 @@
   display: flex;
   align-items: center;
   margin-left: auto;
-}
+}
+.icon {
+  width: rem(22px);
+  height: rem(22px);
+}
+
+.dark {
+  @mixin dark {
+    display: none;
+  }
+
+  @mixin light {
+    display: block;
+  }
+}
+
+.light {
+  @mixin light {
+    display: none;
+  }
+
+  @mixin dark {
+    display: block;
+  }
+}
diff --git a/src/components/layouts/Navbar.tsx b/src/components/layouts/Navbar.tsx
@@ -17,6 +17,9 @@ import {
   rem,
   useMantineTheme,
   TextInput,
+  useMantineColorScheme,
+  ActionIcon,
+  useComputedColorScheme,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
@@ -36,6 +39,8 @@ import {
   IconInfoCircle,
   IconSubtask,
   IconSearch,
+  IconSun,
+  IconMoon,
 } from '@tabler/icons-react';
 import classes from './Navbar.module.css';
 import Image from 'next/image';
@@ -45,6 +50,7 @@ import getConfig from 'next/config';
 import useUserStore from '../../store/user';
 import router from 'next/router';
 import { useState } from 'react';
+import cx from "clsx"
 
 const adminLinks = [
   {
@@ -111,6 +117,9 @@ export function HeaderMegaMenu() {
   const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
   const [search, setSearch] = useState("");
   const theme = useMantineTheme();
+  // const { setColorScheme, clearColorScheme } = useMantineColorScheme();
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
 
   const user = useUserStore((state) => state);
 
@@ -249,6 +258,15 @@ export function HeaderMegaMenu() {
                 </Link>
               </div>
             )}
+            <ActionIcon
+              onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
+              variant="default"
+              size="lg"
+              aria-label="Toggle color scheme"
+            >
+              <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
+              <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
+            </ActionIcon>
           </Group>
 
           <Burger opened={drawerOpened} onClick={toggleDrawer} hiddenFrom="sm" />

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -33,15 +33,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     getAuthentication().then(() => setIsLoaded(true));
   }, []);
 
-  // const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-  //   key: "ganymede-color-scheme",
-  //   defaultValue: "dark",
-  //   getInitialValueInEffect: true,
-  // });
-
-  // const toggleColorScheme = (value?: ColorScheme) =>
-  //   setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
-
   const CONTAINER_SIZES: Record<string, string> = {
     xxs: rem(300),
     xs: rem(400),

diff --git a/src/pages/admin/info.module.css b/src/pages/admin/info.module.css
@@ -8,15 +8,7 @@
   order: 2
 }
 .settingsSections {
-  background-color: var(--mantine-color-dark-6);
-  border-radius: var(--mantine-radius-md);
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-  padding-bottom: var(--mantine-spacing-md);
   margin-top: var(--mantine-spacing-md);
-  margin-bottom: var(--mantine-spacing-md);
-  border: 1px solid var(--mantine-color-dark-5);
-  box-shadow: var(--mantine-shadow-sm);
 }
 .settingItem {
   display: flex;