frontend cleanup

frontend/.gitignore

@@ -38,3 +38,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

frontend/app/admin/blocked-videos/page.tsx

@@ -15,6 +15,9 @@ import DeleteBlockedVideoModalContent from "@/app/components/admin/blocked-video
 import AdminBlockedVideosDrawerContent from "@/app/components/admin/blocked-videos/DrawerContent";
 
 const AdminBlockedVideosPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Blocked Videos";
+  }, []);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
   const [records, setRecords] = useState<BlockedVideo[]>([]);

frontend/app/admin/channels/page.tsx

@@ -15,6 +15,9 @@ import PlatformChannelDrawerContent from "@/app/components/admin/channel/Platfor
 import DeleteChannelModalContent from "@/app/components/admin/channel/DeleteModalContent";
 
 const AdminChannelsPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Channels";
+  }, []);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
   const [records, setRecords] = useState<Channel[]>([]);

frontend/app/admin/info/page.tsx

@@ -5,8 +5,12 @@ import { useAxiosPrivate } from "@/app/hooks/useAxios";
 import { Card, Container, Flex, Title, Text, Code } from "@mantine/core";
 import Link from "next/link";
 import classes from "./AdminInformationPage.module.css"
+import { useEffect } from "react";
 
 const AdminInformationPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Info";
+  }, []);
   const axiosPrivate = useAxiosPrivate()
 
   const { data, isPending, isError } = useGetGanymedeInformation(axiosPrivate)

frontend/app/admin/queue/page.tsx

@@ -15,6 +15,9 @@ import DeleteQueueModalContent from "@/app/components/admin/queue/DeleteModalCon
 import Link from "next/link";
 
 const AdminQueuePage = () => {
+  useEffect(() => {
+    document.title = "Admin - Queue";
+  }, []);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
   const [records, setRecords] = useState<Queue[]>([]);

frontend/app/admin/settings/page.tsx

@@ -19,6 +19,9 @@ interface SelectOption {
 
 
 const AdminSettingsPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Settings";
+  }, []);
   const [notificationsOpened, { toggle: toggleNotifications }] = useDisclosure(false);
   const [storageTemplateOpened, { toggle: toggleStorageTemplate }] = useDisclosure(false);
   const [channelSelect, setChannelSelect] = useState<SelectOption[]>([]);

frontend/app/admin/tasks/page.tsx

@@ -2,12 +2,15 @@
 import { useAxiosPrivate } from "@/app/hooks/useAxios";
 import { Card, Container, Title, Text, Tooltip, ActionIcon, Group, Box } from "@mantine/core";
 import classes from "./AdminTasksPage.module.css"
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { IconPlayerPlay } from "@tabler/icons-react";
 import { Task, useStartTask } from "@/app/hooks/useTasks";
 import { showNotification } from "@mantine/notifications";
 
 const AdminTasksPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Tasks";
+  }, []);
   const axiosPrivate = useAxiosPrivate()
   const [loading, setLoading] = useState(false)
 

frontend/app/admin/users/page.tsx

@@ -15,6 +15,9 @@ import AdminUserDrawerContent from "@/app/components/admin/user/DrawerContent";
 import DeleteUserModalContent from "@/app/components/admin/user/DeleteModalContent";
 
 const AdminUsersPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Users";
+  }, []);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
   const [records, setRecords] = useState<User[]>([]);

frontend/app/admin/videos/page.tsx

@@ -15,6 +15,9 @@ import DeleteVideoModalContent from "@/app/components/admin/video/DeleteModalCon
 import MultiDeleteVideoModalContent from "@/app/components/admin/video/MultiDeleteModalContent";
 
 const AdminVideosPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Videos";
+  }, []);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
   const [records, setRecords] = useState<Video[]>([]);

frontend/app/admin/watched/page.tsx

@@ -13,6 +13,9 @@ import AdminWatchedChannelDrawerContent, { WatchedChannelEditMode } from "@/app/
 import DeleteWatchedChannelModalContent from "@/app/components/admin/watched/DeleteModalContent";
 
 const AdminWatchChannelsPage = () => {
+  useEffect(() => {
+    document.title = "Admin - Watched Channels";
+  }, []);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
   const [records, setRecords] = useState<WatchedChannel[]>([]);

frontend/app/channels/[name]/page.tsx

@@ -3,14 +3,17 @@ import GanymedeLoadingText from "@/app/components/utils/GanymedeLoadingText";
 import ChannelVideos from "@/app/components/videos/ChannelVideos";
 import { useFetchChannelByName } from "@/app/hooks/useChannels";
 import { Center, Container, Title } from "@mantine/core";
-import React from "react";
+import React, { useEffect } from "react";
 
 interface Params {
   name: string;
 }
 
 const ChannelPage = ({ params }: { params: Promise<Params> }) => {
   const { name } = React.use(params);
+  useEffect(() => {
+    document.title = `${name}`;
+  }, [name]);
 
   const { data: channel, isPending, isError } = useFetchChannelByName(name)
 

frontend/app/channels/page.tsx

@@ -3,9 +3,14 @@ import { Container, SimpleGrid } from "@mantine/core";
 import ChannelCard from "../components/channel/Card";
 import { useFetchChannels } from "../hooks/useChannels";
 import GanymedeLoadingText from "../components/utils/GanymedeLoadingText";
+import { useEffect } from "react";
 
 const ChannelsPage = () => {
 
+  useEffect(() => {
+    document.title = "Channels";
+  }, []);
+
   const { data: channels, isPending, isError } = useFetchChannels()
 
   if (isPending) return (

frontend/app/layout.tsx

@@ -10,8 +10,8 @@ import Providers from './providers';
 import { PublicEnvScript } from 'next-runtime-env';
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Ganymede",
+  description: "A platform to archive live streams and videos.",
 };
 
 export default function RootLayout({

frontend/app/login/page.tsx

@@ -1,8 +1,12 @@
 'use client'
 import { Container } from "@mantine/core";
 import { AuthenticationForm, AuthFormType } from "../components/authentication/AuthenticationForm";
+import { useEffect } from "react";
 
 const Loginpage = () => {
+  useEffect(() => {
+    document.title = "Login";
+  }, []);
   return (
     <div>
       <Container mt={25}>

frontend/app/manifest.ts

@@ -0,0 +1,25 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Ganymede",
+    short_name: "Ganymede",
+    description: "A platform to archive live streams and videos.",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#141417",
+    theme_color: "#000000",
+    icons: [
+      {
+        src: "/android-chrome-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/android-chrome-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  };
+}

frontend/app/page.tsx

@@ -4,10 +4,15 @@ import useAuthStore from "./store/useAuthStore";
 import { LandingHero } from "./components/landing/Hero";
 import ContinueWatching from "./components/landing/ContinueWatching";
 import RecentlyArchived from "./components/landing/RecentlyArchived";
+import { useEffect } from "react";
 
 export default function Home() {
   const { isLoggedIn } = useAuthStore();
 
+  useEffect(() => {
+    document.title = "Ganymede";
+  }, []);
+
   return (
     <div>
       {!isLoggedIn && (

frontend/app/playlists/[id]/page.tsx

@@ -5,7 +5,7 @@ import { useGetPlaylist } from "@/app/hooks/usePlaylist";
 import { useFetchVideosFilter, VideoType } from "@/app/hooks/useVideos";
 import useSettingsStore from "@/app/store/useSettingsStore";
 import { Center, Container, Title, Text } from "@mantine/core";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 interface Params {
   id: string;
 }
@@ -17,6 +17,11 @@ const PlaylistPage = ({ params }: { params: Promise<Params> }) => {
     isPending: playlistPending,
     isError: playlistError
   } = useGetPlaylist(id);
+
+  useEffect(() => {
+    document.title = `${playlist?.name}`;
+  }, [playlist?.name]);
+
   const [activePage, setActivePage] = useState(1);
   const [videoTypes, setVideoTypes] = useState<VideoType[]>([]);
 

frontend/app/playlists/page.tsx

@@ -9,13 +9,17 @@ import { DataTable } from 'mantine-datatable';
 import Link from "next/link"
 import { useDisclosure } from "@mantine/hooks";
 import PlaylistEditForm, { PlaylistEditFormMode } from "../components/playlist/EditForm";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { showNotification } from "@mantine/notifications";
 import { useAxiosPrivate } from "../hooks/useAxios";
 import { useQueryClient } from "@tanstack/react-query";
 
 
 const PlaylistsPage = () => {
+  useEffect(() => {
+    document.title = "Playlists";
+  }, []);
+
   const hasPermission = useAuthStore(state => state.hasPermission);
 
   const { data: playlists, isPending, isError } = useGetPlaylists()

frontend/app/profile/page.tsx

@@ -8,6 +8,9 @@ import { useDisclosure } from "@mantine/hooks";
 import AuthChangePassword from "../components/auth/ChangePassword";
 
 const ProfilePage = () => {
+  useEffect(() => {
+    document.title = "Profile";
+  }, []);
   const { user, isLoading, isLoggedIn } = useAuthStore()
   const router = useRouter();
 

frontend/app/queue/[id]/page.tsx

@@ -6,7 +6,7 @@ import GanymedeLoadingText from "@/app/components/utils/GanymedeLoadingText";
 import { useAxiosPrivate } from "@/app/hooks/useAxios";
 import { useGetQueueItem } from "@/app/hooks/useQueue";
 import { Center } from "@mantine/core";
-import React from "react";
+import React, { useEffect } from "react";
 import classes from "./QueueIdPage.module.css"
 import QueueChatTimeline from "@/app/components/queue/ChatTimeline";
 
@@ -16,6 +16,9 @@ interface Params {
 
 const QueueIdPage = ({ params }: { params: Promise<Params> }) => {
   const { id } = React.use(params);
+  useEffect(() => {
+    document.title = `Queue - ${id}`;
+  }, [id]);
 
   const axiosPrivate = useAxiosPrivate()
 

frontend/app/queue/logs/[id]/page.tsx

@@ -13,6 +13,10 @@ interface Params {
 
 const QueueLogsPage = ({ params }: { params: Promise<Params> }) => {
   const { id } = React.use(params);
+  useEffect(() => {
+    document.title = `Queue Logs - ${id}`;
+  }, [id]);
+
   const searchParams = useSearchParams()
   const logEndRef = useRef<HTMLDivElement>(null);
   const logType: QueueLogType = (searchParams.get('log') as QueueLogType) ?? 'video';

frontend/app/queue/page.tsx

@@ -15,6 +15,10 @@ import { useQueryClient } from "@tanstack/react-query";
 import { showNotification } from "@mantine/notifications";
 
 const QueuePage = () => {
+  useEffect(() => {
+    document.title = "Queue";
+  }, []);
+
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(10);
   const [records, setRecords] = useState<Queue[]>([]);

frontend/app/register/page.tsx

@@ -1,8 +1,12 @@
 'use client'
 import { Container } from "@mantine/core";
 import { AuthenticationForm, AuthFormType } from "../components/authentication/AuthenticationForm";
+import { useEffect } from "react";
 
 const Loginpage = () => {
+  useEffect(() => {
+    document.title = "Register";
+  }, []);
   return (
     <div>
       <Container mt={25}>

frontend/app/search/page.tsx

@@ -12,6 +12,10 @@ const SearchPage = () => {
   const searchParams = useSearchParams();
   const queryParam = searchParams.get("q");
 
+  useEffect(() => {
+    document.title = `Search - ${queryParam}`;
+  }, [queryParam]);
+
   // State and ref for search query
   const [searchQuery, setSearchQuery] = useState(queryParam || "");
   const defaultSearchQuery = useRef("");

frontend/app/videos/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { useFetchVideo } from "@/app/hooks/useVideos";
-import React from "react";
+import React, { useEffect } from "react";
 import classes from "./VideoPage.module.css"
 import { Box } from "@mantine/core";
 import VideoPlayer from "@/app/components/videos/Player";
@@ -27,6 +27,10 @@ const VideoPage = ({ params }: { params: Promise<Params> }) => {
 
   const { data, isPending, isError } = useFetchVideo({ id, with_channel: true, with_chapters: true, with_muted_segments: true })
 
+  useEffect(() => {
+    document.title = `${data?.title}`;
+  }, [data?.title]);
+
   // check if login is required
   const isLoginRequired = () => {
     if (