chore: misc changes

Clean up some code inconsistencies
Try to handle async stuff better

tubearchivist/www/src/components/VideoList.tsx

@@ -122,7 +122,7 @@ export const VideoList = () => {
         </div>
         <div className={`video-list ${viewStyle}`}>
           {data &&
-            data.data?.map((video) => {
+            data?.data?.map((video) => {
               return (
                 <div
                   key={video.youtube_id}
@@ -134,11 +134,11 @@ export const VideoList = () => {
                   >
                     <div className="video-thumb-wrap list">
                       <div className="video-thumb">
-                        <NextImage
+                        <img
                           src={`${TA_BASE_URL}/cache/${video.vid_thumb_url}`}
                           alt="video-thumb"
-                          width={250}
-                          height={145}
+                          // width={250}
+                          // height={145}
                           // blurDataURL={placeholder}
                           // placeholder="blur"
                         />
@@ -171,7 +171,7 @@ export const VideoList = () => {
                       className="video-desc-player"
                       id={`video-info-${video.youtube_id}`}
                     >
-                      {video.player.watched ? (
+                      {video?.player?.watched ? (
                         <img
                           src="/img/icon-seen.svg"
                           alt="seen-icon"

tubearchivist/www/src/components/VideoPlayer.tsx

@@ -1,61 +1,64 @@
 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 { formatNumbers } from "../lib/utils";
 
 export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
   if (!selectedVideoUrl) return;
   return (
     <>
-      <div className="player-wrapper">
-        <div className="video-player">
-          <ReactPlayer
-            controls={true}
-            width="100%"
-            height="100%"
-            light="false"
-            playing // TODO: Not currently working
-            playsinline
-            url={`${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/media/${selectedVideoUrl.media_url}`}
-          />
-          <div className="player-title boxed-content">
-            <NextImage
-              className="close-button"
-              src={IconClose}
-              width={30}
-              height={30}
-              alt="close-icon"
-              onClick={handleRemoveVideoPlayer}
-              title="Close player"
+      {selectedVideoUrl && (
+        <div className="player-wrapper">
+          <div className="video-player">
+            <ReactPlayer
+              controls={true}
+              width="100%"
+              height="100%"
+              light={false}
+              playing // TODO: Not currently working
+              playsinline
+              url={`${TA_BASE_URL}/media/${selectedVideoUrl?.media_url}`}
             />
-            {/* ${watchStatusIndicator}
+            <div className="player-title boxed-content">
+              <NextImage
+                className="close-button"
+                src={IconClose}
+                width={30}
+                height={30}
+                alt="close-icon"
+                onClick={handleRemoveVideoPlayer}
+                title="Close player"
+              />
+              {/* ${watchStatusIndicator}
     ${castButton}
      */}
-            <div className="thumb-icon player-stats">
-              <img src="/img/icon-eye.svg" alt="views icon" />
-              <span>
-                {formatNumbers(selectedVideoUrl.stats.view_count.toString())}
-              </span>
-              <span>|</span>
-              <img src="/img/icon-thumb.svg" alt="thumbs-up" />
-              <span>
-                {formatNumbers(selectedVideoUrl.stats.like_count.toString())}
-              </span>
+              <div className="thumb-icon player-stats">
+                <img src="/img/icon-eye.svg" alt="views icon" />
+                <span>
+                  {formatNumbers(selectedVideoUrl.stats.view_count.toString())}
+                </span>
+                <span>|</span>
+                <img src="/img/icon-thumb.svg" alt="thumbs-up" />
+                <span>
+                  {formatNumbers(selectedVideoUrl.stats.like_count.toString())}
+                </span>
+              </div>
+              <div className="player-channel-playlist">
+                <h3>
+                  <a href="/channel/${channelId}/">
+                    {selectedVideoUrl.channel.channel_name}
+                  </a>
+                </h3>
+                {/* ${playlist} */}
+              </div>
+              <a href="/video/${videoId}/">
+                <h2 id="video-title">{selectedVideoUrl.title}</h2>
+              </a>
             </div>
-            <div className="player-channel-playlist">
-              <h3>
-                <a href="/channel/${channelId}/">
-                  {selectedVideoUrl.channel.channel_name}
-                </a>
-              </h3>
-              {/* ${playlist} */}
-            </div>
-            <a href="/video/${videoId}/">
-              <h2 id="video-title">{selectedVideoUrl.title}</h2>
-            </a>
           </div>
         </div>
-      </div>
+      )}
     </>
   );
 };

tubearchivist/www/src/lib/getChannels.ts

@@ -1,17 +1,15 @@
 import { Channel } from "../types/channel";
+import { TA_BASE_URL } from "./constants";
 
 export const getChannels = async (token: string): Promise<Channel> => {
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/channel/`,
-    {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        Authorization: `Token ${token}`,
-        mode: "no-cors",
-      },
-    }
-  );
+  const response = await fetch(`${TA_BASE_URL}/api/channel/`, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: `Token ${token}`,
+      mode: "no-cors",
+    },
+  });
   if (!response.ok) {
     throw new Error("Error getting channel information");
   }

tubearchivist/www/src/lib/getPlaylists.ts

@@ -1,17 +1,15 @@
 import { Playlist } from "../types/playlist";
+import { TA_BASE_URL } from "./constants";
 
 export const getPlaylists = async (token: string): Promise<Playlist> => {
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/playlist/`,
-    {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        Authorization: `Token ${token}`,
-        mode: "no-cors",
-      },
-    }
-  );
+  const response = await fetch(`${TA_BASE_URL}/api/playlist/`, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: `Token ${token}`,
+      mode: "no-cors",
+    },
+  });
   if (!response.ok) {
     throw new Error("Error getting channel information");
   }

tubearchivist/www/src/lib/getVideos.ts

@@ -1,20 +1,18 @@
 import { Videos } from "../types/video";
+import { TA_BASE_URL } from "./constants";
 
 export const getVideos = async (token: string): Promise<Videos> => {
   if (!token) {
     throw new Error("Missing API token in request to get videos");
   }
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/video/`,
-    {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        Authorization: `Token ${token}`,
-        mode: "no-cors",
-      },
-    }
-  );
+  const response = await fetch(`${TA_BASE_URL}/api/video/`, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Authorization: `Token ${token}`,
+      mode: "no-cors",
+    },
+  });
 
   if (!response.ok) {
     throw new Error("Failed to fetch videos");

tubearchivist/www/src/pages/api/auth/[...nextauth].ts

@@ -1,5 +1,6 @@
 import NextAuth from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
+import { TA_BASE_URL } from "../../../lib/constants";
 
 type TA_Token = {
   token: string;
@@ -29,17 +30,14 @@ export default NextAuth({
           password: credentials.password,
         };
 
-        const res = await fetch(
-          `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/login/`,
-          {
-            method: "POST",
-            body: JSON.stringify(payload),
-            headers: {
-              "Content-Type": "application/json",
-              "Accept-Language": "en-US",
-            },
-          }
-        );
+        const res = await fetch(`${TA_BASE_URL}/api/login/`, {
+          method: "POST",
+          body: JSON.stringify(payload),
+          headers: {
+            "Content-Type": "application/json",
+            "Accept-Language": "en-US",
+          },
+        });
 
         const ta_token: TA_Token = await res.json();
         // If no error and we have user data, return it

tubearchivist/www/src/pages/channel.tsx

@@ -29,6 +29,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
+      session,
     },
   };
 };
@@ -114,7 +115,7 @@ const Channel: NextPage = () => {
             {!channels.data ? (
               <h2>No channels found...</h2>
             ) : (
-              channels?.data.map((channel) => {
+              channels?.data?.map((channel) => {
                 return (
                   <div
                     key={channel?.channel_id}

tubearchivist/www/src/pages/index.tsx

@@ -38,13 +38,14 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     };
   }
 
-  await queryClient.prefetchQuery("videos", () =>
+  await queryClient.prefetchQuery(["videos", session.ta_token.token], () =>
     getVideos(session.ta_token.token)
   );
 
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
+      session,
     },
   };
 };

tubearchivist/www/src/pages/playlist.tsx

@@ -33,6 +33,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
+      session,
     },
   };
 };
@@ -41,7 +42,11 @@ const Playlist = () => {
   const { data: session } = useSession();
   const {
     data: { data: playlists },
-  } = useQuery("playlists", () => getPlaylists(session.ta_token.token));
+    error,
+    isLoading,
+  } = useQuery("playlists", () => getPlaylists(session.ta_token.token), {
+    enabled: !!session.ta_token.token,
+  });
 
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
 
@@ -119,7 +124,7 @@ const Playlist = () => {
         <div className={`playlist-list ${viewStyle}`}>
           {/* {% if results %}
             {% for playlist in results %} */}
-          {!playlists ? (
+          {!isLoading && !playlists ? (
             <h2>No playlists found...</h2>
           ) : (
             playlists?.map((playlist) => {