v1.4.3

TheFrodo · Sep 1, 2023 · ecbd5ad · ecbd5ad
1 parent 0860aea
commit ecbd5ad
Show file tree

Hide file tree

Showing 39 changed files with 363 additions and 132 deletions.
diff --git a/src/components/Admin/Channels/Delete.tsx b/src/components/Admin/Channels/Delete.tsx
@@ -24,8 +24,8 @@ const AdminChannelsDelete = ({ handleClose, channel }) => {
           queryClient.invalidateQueries(["admin-channels"]);
           setLoading(false);
           showNotification({
-            title: "Kanal gelöscht",
-            message: "Der Kanal wurde erfolgreich gelöscht!",
+            title: "Channel Deleted",
+            message: "Channel has been deleted successfully",
           });
           handleClose();
         })
@@ -38,17 +38,17 @@ const AdminChannelsDelete = ({ handleClose, channel }) => {
   return (
     <div style={{ marginBottom: "2rem" }}>
       <Text weight={600} size="lg">
-        Bist du dir sicher, dass du den folgenden Kanal löschen möchtest?
+        Are you sure you want to delete the following channel?
       </Text>
       <div>
-        Kanal ID: <Code>{channel.id}</Code>
+        Channel ID: <Code>{channel.id}</Code>
       </div>
       <div>
-        Kanal Name: <Code>{channel.name}</Code>
+        Channel Name: <Code>{channel.name}</Code>
       </div>
       <div>
         <Text mt={5} size="xs">
-          Diese Aktion löscht keine Dateien, sondern lediglich nur den Kanal!
+          This action does not delete any files.
         </Text>
       </div>
       <div style={{ float: "right" }}>
@@ -57,7 +57,7 @@ const AdminChannelsDelete = ({ handleClose, channel }) => {
           color="red"
           loading={loading}
         >
-          Löschen
+          Delete
         </Button>
       </div>
     </div>

diff --git a/src/components/Admin/Channels/Drawer.tsx b/src/components/Admin/Channels/Drawer.tsx
@@ -54,8 +54,8 @@ const AdminChannelDrawer = ({ handleClose, channel, mode }) => {
             queryClient.invalidateQueries(["admin-channels"]);
             setLoading(false);
             showNotification({
-              title: "Kanal aktualisiert",
-              message: "Der Kanal wurde erfolgreich aktualisiert!",
+              title: "Channel Updated",
+              message: "Channel has been updated successfully",
             });
             handleClose();
           })
@@ -84,8 +84,8 @@ const AdminChannelDrawer = ({ handleClose, channel, mode }) => {
             queryClient.invalidateQueries(["admin-channels"]);
             setLoading(false);
             showNotification({
-              title: "Kanal erstellt",
-              message: "Der Kanal wurde erfolgreich erstellt!",
+              title: "Channel Created",
+              message: "Channel has been created successfully",
             });
             handleClose();
           })
@@ -111,8 +111,8 @@ const AdminChannelDrawer = ({ handleClose, channel, mode }) => {
         .then(() => {
           setUpdateImageLoading(false);
           showNotification({
-            title: "Kanal aktualisiert",
-            message: "Kanalbild wurde erfolgreich aktualisiert",
+            title: "Channel Updated",
+            message: "Channel image has been updated successfully",
           });
           handleClose();
         })
@@ -163,8 +163,9 @@ const AdminChannelDrawer = ({ handleClose, channel, mode }) => {
           <Tooltip
             multiline
             width={400}
-            label="Wenn diese Einstellung aktiviert ist, werden die Kanalvideos (einschließlich der Dateien) nach einer bestimmten Zeitspanne gelöscht.
-            Sperren Sie ein Video, um zu verhindern, dass es gelöscht wird."
+            label="If this setting is enabled, channel videos will be deleted (including files) after a
+          certain amount of time. 'Lock' a video to prevent it from being
+          deleted."
           >
             <ActionIcon color="dark">
               <IconQuestionCircle size="1.125rem" />

diff --git a/src/components/Admin/Channels/Table.tsx b/src/components/Admin/Channels/Table.tsx
@@ -100,7 +100,7 @@ const AdminChannelsTable = () => {
     setDeletedOpened(false);
   };
 
-  if (error) return <div>Fehler beim Laden</div>;
+  if (error) return <div>failed to load</div>;
   if (isLoading) return <GanymedeLoader />;
 
   return (

diff --git a/src/components/Admin/Vods/Delete.tsx b/src/components/Admin/Vods/Delete.tsx
@@ -4,6 +4,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import getConfig from "next/config";
 import { useState } from "react";
 import { useApi } from "../../../hooks/useApi";
+import { escapeURL } from "../../../util/util";
 
 const AdminVodDelete = ({ handleClose, vod }) => {
   const { publicRuntimeConfig } = getConfig();
@@ -54,7 +55,9 @@ const AdminVodDelete = ({ handleClose, vod }) => {
 
       <img
         style={{ width: "100%" }}
-        src={`${publicRuntimeConfig.CDN_URL}${vod.web_thumbnail_path}`}
+        src={`${publicRuntimeConfig.CDN_URL}${escapeURL(
+          vod.web_thumbnail_path
+        )}`}
       />
       <div style={{ float: "right", marginTop: "1rem" }}>
         <div style={{ display: "flex" }}>

diff --git a/src/components/Admin/Watched/Drawer.tsx b/src/components/Admin/Watched/Drawer.tsx
@@ -44,9 +44,9 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
   const qualityOptions = [
     { label: "Best", value: "best" },
     { label: "720p60", value: "720p60" },
-    { label: "480p30", value: "480p30" },
-    { label: "360p30", value: "360p30" },
-    { label: "160p30", value: "160p30" },
+    { label: "480p", value: "480p30" },
+    { label: "360p", value: "360p30" },
+    { label: "160p", value: "160p30" },
   ];
 
   useEffect(() => {

diff --git a/src/components/Archive/VodPreview.tsx b/src/components/Archive/VodPreview.tsx
@@ -14,11 +14,11 @@ export const VodPreview = ({ vod }: TwitchVODResponse) => {
         </Title>
         <div>
           <div>
-            <span>Erstellt: </span>
+            <span>Created At: </span>
             {vod.created_at}
           </div>
           <div>
-            <span>Dauer: </span>
+            <span>Duration: </span>
             {vod.duration}
           </div>
           <div>

diff --git a/src/components/Authentication/Login.tsx b/src/components/Authentication/Login.tsx
@@ -35,7 +35,7 @@ export function LoginForm(props: PaperProps) {
     validate: {
       password: (val) =>
         val.length <= 8
-          ? "Das Passwort sollte mindestens 8 Zeichen enthalten"
+          ? "Password should include at least 8 characters"
           : null,
     },
   });
@@ -55,7 +55,7 @@ export function LoginForm(props: PaperProps) {
   return (
     <Paper radius="md" p="xl" withBorder {...props}>
       <Text size="lg" weight={500}>
-        Willkommen bei VodArchiv.net
+        Welcome to Ganymede
       </Text>
 
       {publicRuntimeConfig.SHOW_SSO_LOGIN_BUTTON != "false" ? (
@@ -100,7 +100,7 @@ export function LoginForm(props: PaperProps) {
             }
             error={
               form.errors.password &&
-              "Das Passwort sollte mindestens 8 Zeichen enthalten"
+              "Password should include at least 8 characters"
             }
           />
         </Stack>

diff --git a/src/components/Authentication/Register.tsx b/src/components/Authentication/Register.tsx
@@ -33,7 +33,7 @@ export function RegisterForm(props: PaperProps) {
     validate: {
       password: (val) =>
         val.length <= 7
-          ? "Das Passwort sollte mindestens 8 Zeichen enthalten"
+          ? "Password should include at least 8 characters"
           : null,
     },
   });
@@ -59,7 +59,7 @@ export function RegisterForm(props: PaperProps) {
   return (
     <Paper radius="md" p="xl" withBorder {...props}>
       <Text size="lg" weight={500}>
-        Willkommen bei VodArchiv.net, bitte melde dich an
+        Welcome to Ganymede, sign up below
       </Text>
 
       <div style={{ marginBottom: "0.5rem" }}></div>
@@ -87,7 +87,7 @@ export function RegisterForm(props: PaperProps) {
             }
             error={
               form.errors.password &&
-              "Das Passwort sollte mindestens 8 Zeichen enthalten"
+              "Password should include at least 8 characters"
             }
           />
         </Stack>

diff --git a/src/components/Channel/NoVideosFound.tsx b/src/components/Channel/NoVideosFound.tsx
@@ -5,7 +5,7 @@ const ChannelNoVideosFound = () => {
   return (
     <div>
       <Center>
-        Keine VODs gefunden
+        No videos found
         <Image src="/images/Sadge.webp" ml={5} height={19} width={27} />
       </Center>
     </div>

diff --git a/src/components/Error/Unauthorized.tsx b/src/components/Error/Unauthorized.tsx
@@ -61,12 +61,13 @@ export function Unauthorized() {
         align="center"
         className={classes.description}
       >
-        Entweder bist du nicht eingeloggt oder du hast keine Berechtigung diese Seite zu sehen.
+        Either you are not logged in or you do not have permission to view this
+        page.
       </Text>
       <Group position="center">
         <Link href="/">
           <Button variant="subtle" size="md">
-            Zurück zur Startseite
+            Take me back to home page
           </Button>
         </Link>
       </Group>

diff --git a/src/components/Landing/ContinueWatching.tsx b/src/components/Landing/ContinueWatching.tsx
@@ -57,7 +57,7 @@ const LandingContinueWatching = () => {
       }),
   });
 
-  if (error) return <div>Fehler beim Laden</div>;
+  if (error) return <div>failed to load</div>;
   if (isLoading) return <GanymedeLoader />;
 
   return (

diff --git a/src/components/Landing/Hero.tsx b/src/components/Landing/Hero.tsx
@@ -98,19 +98,30 @@ export function LandingHero() {
         <div className={classes.inner}>
           <div className={classes.content}>
             <Title className={classes.title}>
+              Twitch{" "}
               <Text
                 component="span"
                 inherit
                 variant="gradient"
                 gradient={{ from: "orange", to: "purple" }}
               >
-                VodArchiv.net{" "}
-              </Text>
+                Live Stream{" "}
+              </Text>{" "}
+              and{" "}
+              <Text
+                component="span"
+                inherit
+                variant="gradient"
+                gradient={{ from: "purple", to: "orange" }}
+              >
+                VOD{" "}
+              </Text>{" "}
+              archiving platform
             </Title>
 
             <Text className={classes.description} mt={30}>
-            Nahtlose Archivierung von Livestreams und Videoclips. 
-            Jedes Archiv enthält eine Chat-Wiederholung und einen gerenderten Chat.
+              Seamlessly archive live streams and vods. Each archive includes a
+              chat replay and rendered chat.
             </Text>
 
             <div className={classes.landingButtons}>
@@ -122,7 +133,7 @@ export function LandingHero() {
                   className={classes.control}
                   mt={40}
                 >
-                  Zu den Kanälen
+                  Channels
                 </Button>
               </Link>
 

diff --git a/src/components/Landing/LoggedInHero.tsx b/src/components/Landing/LoggedInHero.tsx
@@ -37,7 +37,7 @@ export function LandingLoggedInHero() {
   return (
     <div className={classes.root}>
       <Center>
-        <Title className={classes.title}>VodArchiv</Title>
+        <Title className={classes.title}>Ganymede</Title>
       </Center>
     </div>
   );

diff --git a/src/components/Landing/Recent.tsx b/src/components/Landing/Recent.tsx
@@ -39,7 +39,7 @@ const LandingRecentlyArchived = () => {
       }),
   });
 
-  if (error) return <div>Fehler beim Laden</div>;
+  if (error) return <div>failed to load</div>;
   if (isLoading) return <GanymedeLoader />;
 
   return (

diff --git a/src/components/Playlist/Header.tsx b/src/components/Playlist/Header.tsx
@@ -49,7 +49,7 @@ const PlaylistHeader = ({ playlist, handleOpen, handleDeleteOpen }: any) => {
             </Menu.Target>
 
             <Menu.Dropdown>
-              <Menu.Label>Einstellungen</Menu.Label>
+              <Menu.Label>Settings</Menu.Label>
               <Menu.Item onClick={() => handleOpen()}>Edit</Menu.Item>
               <Menu.Item onClick={() => handleDeleteOpen()} color="red">
                 Delete

diff --git a/src/components/Queue/ChatTimeline.tsx b/src/components/Queue/ChatTimeline.tsx
@@ -59,13 +59,15 @@ const QueueChatTimeline = ({ queue }: Object) => {
             >
               logs
             </span>
-            <span>{" - "}</span>
-            <span
-              className={classes.restartText}
-              onClick={() => restartTask("chat_download")}
-            >
-              restart
-            </span>
+            {!queue.live_archive && (
+              <span><span>{" - "}</span>
+                <span
+                  className={classes.restartText}
+                  onClick={() => restartTask("chat_download")}
+                >
+                  restart
+                </span></span>
+            )}
           </Text>
         </Timeline.Item>
 

diff --git a/src/components/Queue/Header.tsx b/src/components/Queue/Header.tsx
@@ -1,6 +1,7 @@
 import { Container, createStyles, Image, Text, Tooltip } from "@mantine/core";
 import dayjs from "dayjs";
 import getConfig from "next/config";
+import { escapeURL } from "../../util/util";
 
 const useStyles = createStyles((theme) => ({
   queueHeader: {
@@ -20,20 +21,17 @@ const useStyles = createStyles((theme) => ({
     },
   },
   queueHeaderTitle: {
-    fontFamily: "Inter",
     fontWeight: 600,
     fontSize: "24px",
   },
   queueHeaderHoverText: {
-    fontFamily: "Inter",
     fontWeight: 600,
     fontSize: "18px",
   },
   queueHeaderRight: {
     paddingLeft: "10px",
   },
   liveArchive: {
-    fontFamily: "Inter",
     fontWeight: 600,
     fontSize: "18px",
     backgroundColor: theme.colors.red[8],
@@ -43,7 +41,6 @@ const useStyles = createStyles((theme) => ({
     marginRight: "7px",
   },
   onHold: {
-    fontFamily: "Inter",
     fontWeight: 600,
     fontSize: "18px",
     backgroundColor: theme.colors.indigo[8],
@@ -64,7 +61,8 @@ const QueueHeader = ({ queue }: Object) => {
           <div>
             <Image
               src={
-                publicRuntimeConfig.CDN_URL + queue.edges.vod.web_thumbnail_path
+                publicRuntimeConfig.CDN_URL +
+                escapeURL(queue.edges.vod.thumbnail_path)
               }
               width={160}
             />
@@ -101,7 +99,7 @@ const QueueHeader = ({ queue }: Object) => {
                 title="Streamed At"
                 className={classes.queueHeaderHoverText}
               >
-                {dayjs(queue.edges.vod.streamed_at).format("DD.MM.YYYY")}
+                {dayjs(queue.edges.vod.streamed_at).format("YYYY/MM/DD")}
               </span>
             </div>
           </div>