v2.3.0

feat(watched channel): title regex by @Zibbp
TheFrodo · Jun 3, 2024 · 27df547 · 27df547
1 parent 53a9a74
commit 27df547
Show file tree

Hide file tree

Showing 9 changed files with 302 additions and 322 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -10,7 +10,16 @@
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [3000]
-	"appPort": ["0.0.0.0:3000:3000"]
+	"appPort": [
+		"0.0.0.0:3000:3000"
+	],
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"eamodio.gitlens"
+			]
+		}
+	}
 
 	// Use 'postCreateCommand' to run commands after the container is created.
 	// "postCreateCommand": "yarn install",

diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,40 +9,39 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mantine/carousel": "^7.5.3",
-    "@mantine/core": "^7.5.3",
-    "@mantine/dates": "^7.5.3",
-    "@mantine/form": "^7.5.3",
-    "@mantine/hooks": "^7.5.3",
-    "@mantine/notifications": "^7.5.3",
+    "@mantine/carousel": "^7.8.0",
+    "@mantine/core": "^7.8.0",
+    "@mantine/dates": "^7.8.0",
+    "@mantine/form": "^7.8.0",
+    "@mantine/hooks": "^7.8.0",
+    "@mantine/notifications": "^7.8.0",
     "@tabler/icons-react": "^2.47.0",
-    "@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",
+    "@tanstack/react-query": "^5.29.2",
+    "@tanstack/react-query-devtools": "^5.29.2",
+    "@types/node": "20.12.7",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
+    "@vidstack/react": "^1.11.17",
     "axios": "^1.6.8",
     "clsx": "^2.1.0",
     "cookies-next": "^2.1.1",
     "dayjs": "^1.11.10",
-    "embla-carousel-react": "^8.0.0",
+    "embla-carousel-react": "^8.0.2",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
-    "mantine-datatable": "^7.6.1",
+    "mantine-datatable": "^7.8.1",
     "media-icons": "^0.10.0",
     "next": "^14.1.4",
     "plyr-react": "^5.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.51.2",
-    "typescript": "5.4.3",
-    "vidstack": "^1.10.7",
+    "react-hook-form": "^7.51.3",
+    "typescript": "5.4.5",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
     "postcss": "^8.4.38",
-    "postcss-preset-mantine": "^1.13.0",
+    "postcss-preset-mantine": "^1.14.4",
     "postcss-simple-vars": "^7.0.1"
   }
 }
diff --git a/src/components/Admin/Watched/Drawer.tsx b/src/components/Admin/Watched/Drawer.tsx
@@ -1,11 +1,16 @@
 import {
+  ActionIcon,
+  Box,
   Button,
+  Checkbox,
   Divider,
+  Grid,
   Group,
   Loader,
   MultiSelect,
   NumberInput,
   Select,
+  SimpleGrid,
   Switch,
   Text,
   TextInput,
@@ -16,7 +21,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useApi } from "../../../hooks/useApi";
-import GanymedeLoader from "../../Utils/GanymedeLoader";
+import { LiveTitleRegex } from "../../../ganymede-defs";
+import { IconPlus, IconTrash } from "@tabler/icons-react";
+import classes from "./Watched.module.css"
 
 const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
   const { handleSubmit } = useForm();
@@ -42,6 +49,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
     []
   );
   const [selectedTwitchCategories, setSelectedTwitchCategories] = useState([]);
+  const [liveTitleRegexes, setLiveTitleRegexes] = useState<LiveTitleRegex[]>([]);
 
   const qualityOptions = [
     { label: "Best", value: "best" },
@@ -66,6 +74,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
       setRenderChat(watched?.render_chat);
       setDownloadSubOnly(watched?.download_sub_only);
       setMaxVideoAge(watched?.video_age);
+      setLiveTitleRegexes(watched?.edges.title_regex)
 
       if (watched?.edges?.categories) {
         const tmpArr = [];
@@ -100,6 +109,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
               download_sub_only: downloadSubOnly,
               categories: selectedTwitchCategories,
               max_age: maxVideoAge,
+              regex: liveTitleRegexes
             },
             withCredentials: true,
           },
@@ -140,6 +150,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
                   download_sub_only: downloadSubOnly,
                   categories: selectedTwitchCategories,
                   max_age: maxVideoAge,
+                  regex: liveTitleRegexes
                 },
                 withCredentials: true,
               },
@@ -163,6 +174,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
                   download_sub_only: downloadSubOnly,
                   categories: selectedTwitchCategories,
                   max_age: maxVideoAge,
+                  regex: liveTitleRegexes
                 },
                 withCredentials: true,
               },
@@ -213,8 +225,13 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
     },
   });
 
+  const getTwitchCategoriesClick = () => {
+    getTwitchCategories()
+  }
+
   // Fetch categories
-  const { data: twitchCategoriesResp } = useQuery({
+  const { data: twitchCategoriesResp, refetch: getTwitchCategories } = useQuery({
+    enabled: false,
     queryKey: ["admin-categories"],
     queryFn: () => {
       setTwitchCategoriesLoading(true);
@@ -373,9 +390,97 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
             onChange={setMaxVideoAge}
           />
         </div>
+        <Divider my="sm" />
+        {/* title regex */}
+        <Group>
+          <Title order={5}>Title Regex</Title>
+          <ActionIcon size="sm" variant="filled" color="green" aria-label="Settings" onClick={() => {
+            const newRegex: LiveTitleRegex = {
+              apply_to_videos: false,
+              case_sensitive: false,
+              negative: false,
+              regex: ""
+            }
+            setLiveTitleRegexes(liveTitleRegexes => [...(liveTitleRegexes ?? []), newRegex])
+          }}>
+            <IconPlus style={{ width: '70%', height: '70%' }} stroke={1.5} />
+          </ActionIcon>
+        </Group>
+        <div>
+          <Text size="sm">Use regex to filter and match specific patterns in livestream and video titles. See <a className={classes.link} href="https://github.com/Zibbp/ganymede/wiki/Watched-Channel-Title-Regex" target="_blank">wiki</a> for more information.</Text>
+        </div>
+
+        <div>
+          {liveTitleRegexes && liveTitleRegexes.map((regex: LiveTitleRegex, index) => (
+            <div>
+              <Grid grow>
+                <Grid.Col span={11}>
+                  <TextInput
+                    label="Regex"
+                    placeholder="(?i:rerun)"
+                    value={regex.regex}
+                    onChange={(e) => {
+                      const updatedRegexes = [...liveTitleRegexes];
+                      updatedRegexes[index].regex = e.currentTarget.value;
+                      setLiveTitleRegexes(updatedRegexes)
+                    }}
+                  />
+                  <Group mt={7}>
+                    <Checkbox
+                      defaultChecked
+                      label="Negative"
+                      description="Invert match"
+                      color="violet"
+                      checked={regex.negative}
+                      onChange={(e) => {
+                        const updatedRegexes = [...liveTitleRegexes];
+                        updatedRegexes[index].negative = e.currentTarget.checked;
+                        setLiveTitleRegexes(updatedRegexes)
+                      }}
+                    />
+                    <Checkbox
+                      defaultChecked
+                      label="Apply to video downloads"
+                      description="Applies to live streams only by default"
+                      color="violet"
+                      checked={regex.apply_to_videos}
+                      onChange={(e) => {
+                        const updatedRegexes = [...liveTitleRegexes];
+                        updatedRegexes[index].apply_to_videos = e.currentTarget.checked;
+                        setLiveTitleRegexes(updatedRegexes)
+                      }}
+                    />
+                  </Group>
+                </Grid.Col>
+                <Grid.Col span={1}>
+                  <Group mt={25}>
+                    <ActionIcon size="lg" variant="filled" color="red" aria-label="Settings" onClick={() => {
+                      const updatedRegexs = [...liveTitleRegexes]
+                      updatedRegexs.splice(index, 1)
+                      setLiveTitleRegexes(updatedRegexs)
+                    }}>
+                      <IconTrash style={{ width: '70%', height: '70%' }} stroke={1.5} />
+                    </ActionIcon>
+                  </Group>
+                </Grid.Col>
+              </Grid>
+            </div>
+          ))}
+        </div>
+        <Divider my="sm" />
+
+        <Group>
+          <Title order={5}>Categories</Title>
+        </Group>
+        <div>
+          <Text size="sm">Archive videos from these categories. Leave blank to archive all categories. Does not apply to live streams.</Text>
+        </div>
+
         <div>
-          {twitchCategoriesLoading || formattedTwitchCategories.length == 0 ? (
-            <Loader color="violet" />
+          {formattedTwitchCategories.length == 0 ? (
+            <Button variant="filled" color="violet" onClick={(e) => getTwitchCategoriesClick()}
+              loading={twitchCategoriesLoading}
+            >Load categories</Button>
           ) : (
             <MultiSelect
               searchable
@@ -384,9 +489,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
               onChange={setSelectedTwitchCategories}
               data={formattedTwitchCategories}
               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."
               clearButtonLabel="Clear selection"
               clearable
             />

diff --git a/src/components/Admin/Watched/Watched.module.css b/src/components/Admin/Watched/Watched.module.css
@@ -6,4 +6,7 @@
 }
 .queueDrawer {
   overflow-y: scroll;
+}
+.link {
+  color: var(--mantine-color-blue-6);
 }
diff --git a/src/components/Vod/VideoPlayer.tsx b/src/components/Vod/VideoPlayer.tsx
@@ -8,7 +8,7 @@ import { useQuery } from "@tanstack/react-query";
 import '@vidstack/react/player/styles/default/theme.css';
 import '@vidstack/react/player/styles/default/layouts/video.css';
 
-import { MediaPlayer, MediaPlayerInstance, MediaProvider, Poster, Track } from '@vidstack/react';
+import { MediaPlayer, MediaPlayerInstance, MediaProvider, MediaSrc, Poster, Track, VideoMimeType } from '@vidstack/react';
 import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
 import TheaterModeIcon from "./TheaterModeIcon";
 import { escapeURL } from "../../util/util";
@@ -24,7 +24,7 @@ const NewVideoPlayer = ({ vod }: any) => {
 
   const player = useRef<MediaPlayerInstance>(null)
 
-  const [videoSource, setVideoSource] = useState([{ src: "", type: "" }]);
+  const [videoSource, setVideoSource] = useState<MediaSrc>();
   const [videoType, setVideoType] = useState<string>("");
   const [videoPoster, setVideoPoster] = useState<string>("");
   const [videoTitle, setVideoTitle] = useState<string>("");
@@ -97,17 +97,15 @@ const NewVideoPlayer = ({ vod }: any) => {
     if (!player) return;
 
     const ext = vod.video_path.substr(vod.video_path.length - 4);
-    let type = "video/mp4";
+    let type: VideoMimeType = "video/mp4";
     if (ext == "m3u8") {
-      type = "application/x-mpegURL";
+      type = "application/x-mpegurl";
     }
 
-    setVideoSource([
-      {
-        src: `${publicRuntimeConfig.CDN_URL}${escapeURL(vod.video_path)}`,
-        type: type,
-      },
-    ]);
+    setVideoSource({
+      src: `${publicRuntimeConfig.CDN_URL}${escapeURL(vod.video_path)}`,
+      type: type
+    })
     setVideoType(type);
     setVideoTitle(vod.title);
 

diff --git a/src/ganymede-defs.d.ts b/src/ganymede-defs.d.ts
@@ -167,3 +167,24 @@ export interface ProxyItem {
   url: string;
   header: string;
 }
+
+export interface Chapter {
+  startTime: string;
+  endTime: string;
+  text: string;
+}
+
+export interface ChapterData {
+  id: string;
+  type: string;
+  title: string;
+  start?: number;
+  end: number;
+  edges: any;
+}
+
+export interface LiveTitleRegex {
+  regex: string;
+  negative: boolean;
+  apply_to_videos: boolean;
+}
diff --git a/src/pages/vods/[vodId].tsx b/src/pages/vods/[vodId].tsx
@@ -17,7 +17,7 @@ import classes from "./vodId.module.css"
 
 async function fetchVod(vodId: string) {
   return useApi(
-    { method: "GET", url: `/api/v1/vod/${vodId}?with_channel=true` },
+    { method: "GET", url: `/api/v1/vod/${vodId}?with_channel=true&with_chapters=true&with_muted_segments=true` },
     false
   ).then((res) => res?.data);
 }