v3.0.1 english

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
 {
 	"name": "Ganymede Frontend",
 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-20",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:20",
 
 	// Features to add to the dev container. More info: https://containers.dev/features.
 	// "features": {},
@@ -16,7 +16,9 @@
 	"customizations": {
 		"vscode": {
 			"extensions": [
-				"eamodio.gitlens"
+				"eamodio.gitlens",
+				"vunguyentuan.vscode-postcss",
+				"vunguyentuan.vscode-css-variables"
 			]
 		}
 	}

.dockerignore

@@ -3,4 +3,6 @@ Dockerfile
 node_modules
 npm-debug.log
 README.md
-.next
+.next
+!.next/static
+!.next/standalone

.github/workflows/docker-publish.yml

@@ -22,55 +22,44 @@ env:
 jobs:
   build:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
-      id-token: write
-
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3.3.0
+        uses: actions/checkout@v4
 
+      # Set up QEMU for Arm64
       - name: Set up QEMU
-        uses: docker/[email protected]
-        with:
-          platforms: all
+        uses: docker/setup-qemu-action@v3
 
-      # Workaround: https://github.com/docker/build-push-action/issues/461
-      - name: Setup Docker buildx
-        uses: docker/setup-buildx-action@v2.2.1
+      # Set up Docker Buildx
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
 
-      # Login against a Docker registry except on PR
-      # https://github.com/docker/login-action
+      # Login into GitHub Container Registry except on PR
       - name: Log into registry ${{ env.REGISTRY }}
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
+      - name: Extract Docker metadata (release)
         id: meta
-        uses: docker/metadata-action@v4.3.0
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          flavor: |
+            latest=auto
+          tags: |
+            type=semver,pattern={{version}}
+            type=raw,value=dev
 
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
-      - name: Build and push Docker image
-        id: build-and-push
-        uses: docker/[email protected]
+      - name: Build and push
+        uses: docker/build-push-action@v6
         with:
-          context: .
+          platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64
-          provenance: false
-          cache-from: type=gha,scope=${{ env.IMAGE_NAME }}
-          cache-to: type=gha,scope=${{ env.IMAGE_NAME }},mode=max
+          context: .
+          dockerfile: ./Dockerfile

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "cssVariables.lookupFiles": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.sass",
+    "**/*.less",
+    "node_modules/@mantine/core/styles.css"
+  ]
+}

Dockerfile

@@ -1,3 +1,5 @@
+ARG GITHUB_SHA
+
 # Install dependencies only when needed
 FROM node:18-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
@@ -8,6 +10,9 @@ RUN npm install
 
 # Rebuild the source code only when needed
 FROM node:18-alpine AS builder
+
+ENV NEXT_PUBLIC_GIT_COMMIT=$GITHUB_SHA
+
 RUN apk add --no-cache git
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
@@ -20,7 +25,6 @@ RUN npm i sharp -y
 
 RUN npm run build
 
-
 # Production image, copy all the files and run next
 FROM node:18-alpine AS runner
 WORKDIR /app

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,7 +38,7 @@ const AdminChannelsDelete = ({ handleClose, channel }) => {
   return (
     <div style={{ marginBottom: "2rem" }}>
       <Text weight={600} size="lg">
-        Bist du sicher, dass du diesen Channel löschen möchtest?
+        Are you sure you want to delete the following channel?
       </Text>
       <div>
         Channel ID: <Code>{channel.id}</Code>
@@ -48,7 +48,7 @@ const AdminChannelsDelete = ({ handleClose, channel }) => {
       </div>
       <div>
         <Text mt={5} size="xs">
-          Diese Aktion entfernt keine Dateien
+          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>

src/components/Admin/Channels/Drawer.tsx

@@ -55,8 +55,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();
           })
@@ -86,8 +86,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();
           })
@@ -113,8 +113,8 @@ const AdminChannelDrawer = ({ handleClose, channel, mode }) => {
         .then(() => {
           setUpdateImageLoading(false);
           showNotification({
-            title: "Kanal Aktualisiert",
-            message: "Das Kanalbild wurde Aktualisiert.",
+            title: "Channel Updated",
+            message: "Channel image has been updated successfully",
           });
           handleClose();
         })

src/components/Admin/Channels/Table.tsx

@@ -122,7 +122,7 @@ const AdminChannelsTable = () => {
             title: "Created At",
             sortable: true,
             render: ({ created_at }) => (
-              <div>{dayjs(created_at).format("DD.MM.YYYY")}</div>
+              <div>{dayjs(created_at).format("YYYY/MM/DD")}</div>
             ),
           },
           {

src/components/Archive/VodPreview.tsx

@@ -15,11 +15,11 @@ export const VodPreview = ({ video }: { video: PlatformVideoInfo }) => {
         </Title>
         <div>
           <div>
-            <span>Veröffentlichungsdatum: </span>
+            <span>Created At: </span>
             {video.created_at}
           </div>
           <div>
-            <span>Dauer: </span>
+            <span>Duration: </span>
             {video.duration}
           </div>
           <div>
@@ -28,7 +28,7 @@ export const VodPreview = ({ video }: { video: PlatformVideoInfo }) => {
           </div>
           {video.chapters && (
             <div>
-              <span>Kapitel: </span>
+              <span>Chapters: </span>
               {video.chapters.length}
             </div>
           )}

src/components/Authentication/Login.tsx

@@ -47,7 +47,7 @@ export function LoginForm(props: PaperProps) {
   return (
     <Paper radius="md" p="xl" withBorder {...props}>
       <Text size="lg" fw={500}>
-        Willkommen bei Vodarchiv, bitte melde dich an
+        Welcome to Ganymede, login below
       </Text>
 
       {publicRuntimeConfig.SHOW_SSO_LOGIN_BUTTON != "false" && (
@@ -95,7 +95,7 @@ export function LoginForm(props: PaperProps) {
         <Group justify="space-between" mt="xl">
           <Link href="/register">
             <Anchor component="button" type="button" c="dimmed" size="xs">
-              Du hast noch keinen Account? Dann Registriere dich
+              Don't have an account? Register
             </Anchor>
           </Link>
           <Button type="submit" radius="xl" loading={loading}>

src/components/Authentication/Register.tsx

@@ -32,7 +32,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,
     },
   });
@@ -56,7 +56,7 @@ export function RegisterForm(props: PaperProps) {
   return (
     <Paper radius="md" p="xl" withBorder {...props}>
       <Text size="lg" fw={500}>
-        Willkommen beim Vodarchiv, Registriere dich
+        Welcome to Ganymede, sign up below
       </Text>
 
       <form onSubmit={handleSubmit}>
@@ -81,7 +81,7 @@ export function RegisterForm(props: PaperProps) {
             radius="md"
             error={
               form.errors.password &&
-              "Das Passwort sollte mindestens 8 Zeichen umfassen."
+              "Password should include at least 8 characters"
             }
           />
 
@@ -91,7 +91,7 @@ export function RegisterForm(props: PaperProps) {
         <Group justify="space-between" mt="xl">
           <Link href="/login">
             <Anchor component="button" type="button" c="dimmed" size="xs">
-              Du hast bereits einen Account? Dann Logge dich ein
+              Have an account? Login
             </Anchor>
           </Link>
           <Button type="submit" radius="xl" loading={loading}>

src/components/Channel/NoVideosFound.tsx

@@ -5,7 +5,7 @@ const ChannelNoVideosFound = () => {
   return (
     <div>
       <Center>
-        Keine Videos gefunden
+        No videos found
         <Image src="/images/Sadge.webp" ml={5} height={19} width={27} />
       </Center>
     </div>

src/components/Error/Unauthorized.tsx

@@ -14,17 +14,18 @@ export function Unauthorized() {
   return (
     <Container className={classes.root}>
       <div className={classes.label}>401</div>
-      <Title className={classes.title}>Keine Berechtigung.</Title>
+      <Title className={classes.title}>Unauthorized.</Title>
       <Text
         size="lg"
         className={classes.description}
       >
-        Entweder bist du nicht eingeloggt oder du hast keine Berechtigung, diese Seite anzusehen
+        Either you are not logged in or you do not have permission to view this
+        page.
       </Text>
       <Group>
         <Link href="/">
           <Button variant="subtle" size="md">
-            Bring mich zurück auf die Startseite
+            Take me back to home page
           </Button>
         </Link>
       </Group>

src/components/Landing/ContinueWatching.tsx

@@ -26,7 +26,7 @@ const LandingContinueWatching = () => {
       }),
   });
 
-  if (error) return <div>Fehler beim Laden</div>;
+  if (error) return <div>failed to load</div>;
   if (isLoading) return <GanymedeLoader />;
 
   return (

src/components/Landing/Hero.tsx

@@ -10,19 +10,19 @@ export function LandingHero() {
 
       <div className={classes.inner}>
         <Title className={classes.title}>
-          VodArchiv
+          Ganymede
         </Title>
 
         <Container size={640}>
           <Text size="lg" className={classes.description}>
-          Deine Plattform, wenn es um Twitch VOD's geht!
+            Effortlessly preserve live streams and VODs. Every archive comes complete with a chat replay and a rendered chat experience.
           </Text>
         </Container>
 
         <div className={classes.controls}>
           <Link href="/channels">
             <Button className={classes.control} variant="white" size="lg">
-              Kanäle
+              Channels
             </Button>
           </Link>
           <Link href="/login">

src/components/Landing/LoggedInHero.tsx

@@ -6,7 +6,7 @@ export function LandingLoggedInHero() {
   return (
     <div className={classes.root}>
       <Center>
-        <Title className={classes.title}>Vodarchiv</Title>
+        <Title className={classes.title}>Ganymede</Title>
       </Center>
     </div>
   );

src/components/Landing/Recent.tsx

@@ -22,7 +22,7 @@ const LandingRecentlyArchived = () => {
       }),
   });
 
-  if (error) return <div>Fehler beim Laden</div>;
+  if (error) return <div>failed to load</div>;
   if (isLoading) return <GanymedeLoader />;
 
   return (

src/components/Playlist/Table.tsx

@@ -26,7 +26,7 @@ const PlaylistTable = () => {
       ).then((res) => res?.data),
   });
 
-  if (error) return <div>Fehler beim Laden</div>;
+  if (error) return <div>Failed to load</div>;
   if (isLoading) return <GanymedeLoader />;
 
   return (