chore: misc changes

Clean up some code inconsistencies Try to handle async stuff better
2022-04-13 20:53:39 +00:00 · 2022-04-13 20:53:39 +00:00 · b62b903ed5
parent 8b86c327c5
commit b62b903ed5
9 changed files with 98 additions and 96 deletions
--- a/tubearchivist/www/src/components/VideoList.tsx
+++ b/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"
--- a/tubearchivist/www/src/components/VideoPlayer.tsx
+++ b/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>
+      )}
    </>
  );
 };
--- a/tubearchivist/www/src/lib/getChannels.ts
+++ b/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");
  }
--- a/tubearchivist/www/src/lib/getPlaylists.ts
+++ b/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");
  }
--- a/tubearchivist/www/src/lib/getVideos.ts
+++ b/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");
--- a/tubearchivist/www/src/pages/api/auth/[...nextauth].ts
+++ b/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
--- a/tubearchivist/www/src/pages/channel.tsx
+++ b/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}
--- a/tubearchivist/www/src/pages/index.tsx
+++ b/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,
    },
  };
 };
--- a/tubearchivist/www/src/pages/playlist.tsx
+++ b/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) => {