chore: organize and optimize some code

tubearchivist/www/src/components/Nav.tsx

@@ -9,6 +9,14 @@ import { signIn, signOut, useSession } from "next-auth/react";
 /** TODO: Fix these nav links */
 export const Nav = () => {
   const { data: session } = useSession();
+
+  const handleSigninSignout = () => {
+    if (!session) {
+      signIn();
+    }
+    signOut();
+  };
+
   return (
     <div className="boxed-content">
       <div className="top-banner">
@@ -40,9 +48,11 @@ export const Nav = () => {
               <div className="nav-item">channels</div>
             </a>
           </NextLink>
-          <a href="/playlist">
+          <NextLink href="/playlist">
-            <div className="nav-item">playlists</div>
+            <a>
-          </a>
+              <div className="nav-item">playlists</div>
+            </a>
+          </NextLink>
           <a href="/downloads">
             <div className="nav-item">downloads</div>
           </a>
@@ -66,10 +76,7 @@ export const Nav = () => {
               title="Settings"
             />
           </a>
-          <a
+          <a style={{ cursor: "pointer" }} onClick={handleSigninSignout}>
-            style={{ cursor: "pointer" }}
-            onClick={!!session?.user ? () => signOut() : () => signIn()}
-          >
             <NextImage
               width={50}
               height={40}

tubearchivist/www/src/components/VideoList/VideoList.tsx

@@ -2,20 +2,20 @@ import { useSession } from "next-auth/react";
 import NextImage from "next/image";
 import { useState } from "react";
 import { useQuery } from "react-query";
-import IconPlay from "../images/icon-play.svg";
+import IconPlay from "../../images/icon-play.svg";
-import { TA_BASE_URL } from "../lib/constants";
+import { TA_BASE_URL } from "../../lib/constants";
-import { getVideos } from "../lib/getVideos";
+import { getVideos } from "../../lib/getVideos";
-import type { Datum } from "../types/video";
+import type { Datum } from "../../types/video";
-import { VideoPlayer } from "./VideoPlayer";
+import VideoPlayer from "../VideoPlayer";
 
 type ViewStyle = "grid" | "list";
 
-export const VideoList = () => {
+const VideoList = () => {
   const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
   const { data: session } = useSession();
   const { data, error, isLoading } = useQuery(
-    ["videos", session?.ta_token?.token],
+    ["videos", session.ta_token.token],
     () => getVideos(session.ta_token.token),
     {
       enabled: !!session?.ta_token?.token,
@@ -134,13 +134,13 @@ export const VideoList = () => {
                   >
                     <div className="video-thumb-wrap list">
                       <div className="video-thumb">
-                        <img
+                        <NextImage
                           src={`${TA_BASE_URL}/cache/${video.vid_thumb_url}`}
                           alt="video-thumb"
-                          // width={250}
+                          width={325}
-                          // height={145}
+                          height={190}
-                          // blurDataURL={placeholder}
+                          blurDataURL={video.vid_thumb_base64}
-                          // placeholder="blur"
+                          placeholder="blur"
                         />
                         {/* {% if video.source.player.progress %} */}
                         <div
@@ -217,3 +217,5 @@ export const VideoList = () => {
     </>
   );
 };
+
+export default VideoList;

tubearchivist/www/src/components/VideoList/index.ts

@@ -0,0 +1,4 @@
+import dynamic from "next/dynamic";
+
+const DynamicVideoList = dynamic(() => import("./VideoList"));
+export default DynamicVideoList;

tubearchivist/www/src/components/VideoPlayer/VideoPlayer.tsx

@@ -1,10 +1,10 @@
 import NextImage from "next/image";
 import ReactPlayer from "react-player";
-import IconClose from "../images/icon-close.svg";
+import { TA_BASE_URL } from "../../lib/constants";
-import { TA_BASE_URL } from "../lib/constants";
+import { formatNumbers } from "../../lib/utils";
-import { formatNumbers } from "../lib/utils";
+import IconClose from "../../images/icon-close.svg";
 
-export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
+const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
   if (!selectedVideoUrl) return;
   return (
     <>
@@ -62,3 +62,5 @@ export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
     </>
   );
 };
+
+export default VideoPlayer;

tubearchivist/www/src/components/VideoPlayer/index.tsx

@@ -0,0 +1,4 @@
+import dynamic from "next/dynamic";
+
+const DynamicVideoPlayer = dynamic(() => import("./VideoPlayer"));
+export default DynamicVideoPlayer;

tubearchivist/www/src/pages/channel.tsx

@@ -22,7 +22,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     };
   }
 
-  await queryClient.prefetchQuery("channels", () =>
+  await queryClient.prefetchQuery(["channels", session.ta_token.token], () =>
     getChannels(session.ta_token.token)
   );
 
@@ -40,9 +40,13 @@ const Channel: NextPage = () => {
     data: channels,
     error,
     isLoading,
-  } = useQuery("channels", () => getChannels(session.ta_token.token), {
+  } = useQuery(
-    enabled: !!session?.ta_token?.token,
+    ["channels", session.ta_token.token],
-  });
+    () => getChannels(session.ta_token.token),
+    {
+      enabled: !!session?.ta_token?.token,
+    }
+  );
 
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
 

tubearchivist/www/src/pages/index.tsx

@@ -3,15 +3,10 @@ import { getSession } from "next-auth/react";
 import { dehydrate, QueryClient } from "react-query";
 import { CustomHead } from "../components/CustomHead";
 import { Layout } from "../components/Layout";
-import { VideoList } from "../components/VideoList";
+import VideoList from "../components/VideoList/";
 import { getVideos } from "../lib/getVideos";
-import type { Videos } from "../types/video";
 
-type HomeProps = {
+const Home: NextPage = () => {
-  videos: Videos;
-};
-
-const Home: NextPage<HomeProps> = () => {
   return (
     <>
       <CustomHead />

tubearchivist/www/src/pages/playlist.tsx

@@ -26,7 +26,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     };
   }
 
-  await queryClient.prefetchQuery("playlists", () =>
+  await queryClient.prefetchQuery(["playlists", session.ta_token.token], () =>
     getPlaylists(session.ta_token.token)
   );
 
@@ -44,9 +44,13 @@ const Playlist = () => {
     data: { data: playlists },
     error,
     isLoading,
-  } = useQuery("playlists", () => getPlaylists(session.ta_token.token), {
+  } = useQuery(
-    enabled: !!session.ta_token.token,
+    ["playlists", session.ta_token.token],
-  });
+    () => getPlaylists(session.ta_token.token),
+    {
+      enabled: !!session.ta_token.token,
+    }
+  );
 
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
 

tubearchivist/www/src/types/video.ts

@@ -53,6 +53,7 @@ export interface Downloads {
   subtitle_index: boolean;
   throttledratelimit: boolean;
   integrate_ryd: boolean;
+  integrate_sponsorblock: boolean;
 }
 
 export interface Scheduler {
@@ -79,41 +80,71 @@ export interface Subscriptions {
 
 export interface Datum {
   active: boolean;
-  category: string[];
+  category: Category[];
   channel: Channel;
   date_downloaded: number;
   description: string;
   media_url: string;
   player: Player;
+  playlist: Playlist[];
   published: string;
   stats: Stats;
   tags: string[];
   title: string;
-  vid_last_refresh: string;
+  vid_last_refresh: LastRefresh;
+  vid_thumb_base64: string;
   vid_thumb_url: string;
   youtube_id: string;
 }
 
+export enum Category {
+  ScienceTechnology = "Science & Technology",
+}
+
 export interface Channel {
   channel_active: boolean;
-  channel_banner_url: string;
+  channel_banner_url: ChannelBannerURL;
   channel_description: string;
-  channel_id: string;
+  channel_id: ChannelID;
-  channel_last_refresh: string;
+  channel_last_refresh: LastRefresh;
-  channel_name: string;
+  channel_name: ChannelName;
   channel_subs: number;
   channel_subscribed: boolean;
-  channel_thumb_url: string;
+  channel_thumb_url: ChannelThumbURL;
   channel_tvart_url: boolean;
   channel_views: number;
 }
 
+export enum ChannelBannerURL {
+  CacheChannelsUCFhXFikryT4AFcLkLw2LBLABannerJpg = "/cache/channels/UCFhXFikryT4aFcLkLw2LBLA_banner.jpg",
+}
+
+export enum ChannelID {
+  UCFhXFikryT4AFcLkLw2LBLA = "UCFhXFikryT4aFcLkLw2LBLA",
+}
+
+export enum LastRefresh {
+  The05APR2022 = "05 Apr, 2022",
+}
+
+export enum ChannelName {
+  NileRed = "NileRed",
+}
+
+export enum ChannelThumbURL {
+  CacheChannelsUCFhXFikryT4AFcLkLw2LBLAThumbJpg = "/cache/channels/UCFhXFikryT4aFcLkLw2LBLA_thumb.jpg",
+}
+
 export interface Player {
   watched: boolean;
   duration: number;
   duration_str: string;
 }
 
+export enum Playlist {
+  PLbaramj7Nly5K5AsvQoI9PJQhy47PfDAF = "PLbaramj7Nly5K5AsvQoI9PJQhy47pfDAf",
+}
+
 export interface Stats {
   view_count: number;
   like_count: number;