chore: protect pages with auth

tubearchivist/www/next.config.js

@@ -1,5 +1,3 @@
-const { withPlaiceholder } = require("@plaiceholder/next");
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
@@ -8,4 +6,4 @@ const nextConfig = {
   reactStrictMode: true,
 };
 
-module.exports = withPlaiceholder(nextConfig);
+module.exports = nextConfig;

tubearchivist/www/src/components/BoxedContent.tsx

@@ -0,0 +1,3 @@
+export const BoxedContent: React.FC = ({ children }) => (
+  <div className="boxed-content">{children}</div>
+);

tubearchivist/www/src/components/VideoList.tsx

@@ -1,18 +1,22 @@
+import { useSession } from "next-auth/react";
 import NextImage from "next/image";
 import { useState } from "react";
-import ReactPlayer from "react-player/file";
 import { useQuery } from "react-query";
-import IconClose from "../images/icon-close.svg";
 import IconPlay from "../images/icon-play.svg";
 import { TA_BASE_URL } from "../lib/constants";
 import { getVideos } from "../lib/getVideos";
-import { formatNumbers } from "../lib/utils";
-import { Datum, Videos } from "../types/video";
+import type { Datum } from "../types/video";
+import { VideoPlayer } from "./VideoPlayer";
+
+type ViewStyle = "grid" | "list";
 
 export const VideoList = () => {
   const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
-  const { data: queryData } = useQuery("videos", getVideos);
-  const { data: videos } = queryData;
+  const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
+  const { data: session } = useSession();
+  const { data, error, isLoading } = useQuery("videos", () =>
+    getVideos(session.ta_token.token)
+  );
 
   const handleSelectedVideo = (video: Datum) => {
     setSelectedVideoUrl(video);
@@ -22,12 +26,16 @@ export const VideoList = () => {
     setSelectedVideoUrl(undefined);
   };
 
-  if (!videos) {
+  const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
+    setViewStyle(selectedViewStyle);
+  };
+
+  if (!isLoading && !data?.data) {
     return (
       <div className="boxed-content">
         <h2>No videos found...</h2>
         <p>
-          If you`&apos;`ve already added a channel or playlist, try going to the{" "}
+          If you&apos;ve already added a channel or playlist, try going to the{" "}
           <a href="{% url 'downloads">downloads page</a> to start the scan and
           download tasks.
         </p>
@@ -37,63 +45,10 @@ export const VideoList = () => {
 
   return (
     <>
-      {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={`${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"
-                />
-                {/* ${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>
-                <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>
-        </>
-      )}
+      <VideoPlayer
+        handleRemoveVideoPlayer={handleRemoveVideoPlayer}
+        selectedVideoUrl={selectedVideoUrl}
+      />
 
       <div className="boxed-content">
         <div className="title-bar">
@@ -151,25 +106,24 @@ export const VideoList = () => {
             />
             <img
               src="/img/icon-gridview.svg"
-              onClick={() => console.log("grid view")}
-              data-origin="home"
-              data-value="grid"
+              onClick={() => handleSetViewstyle("grid")}
               alt="grid view"
             />
             <img
               src="/img/icon-listview.svg"
-              onClick={() => console.log("list view")}
-              data-origin="home"
-              data-value="list"
+              onClick={() => handleSetViewstyle("list")}
               alt="list view"
             />
           </div>
         </div>
-        <div className="video-list list">
-          {videos &&
-            videos?.map((video) => {
+        <div className={`video-list ${viewStyle}`}>
+          {data &&
+            data.data?.map((video) => {
               return (
-                <div key={video.youtube_id} className="video-item list">
+                <div
+                  key={video.youtube_id}
+                  className={`video-item ${viewStyle}`}
+                >
                   <a
                     style={{ cursor: "pointer" }}
                     onClick={() => handleSelectedVideo(video)}

tubearchivist/www/src/components/VideoPlayer.tsx

@@ -0,0 +1,61 @@
+import NextImage from "next/image";
+import ReactPlayer from "react-player";
+import IconClose from "../images/icon-close.svg";
+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"
+            />
+            {/* ${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>
+            <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,15 +1,19 @@
 import { Channel } from "../types/channel";
 
-export const getChannels = async (): Promise<Channel> => {
-  return await fetch(
+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 b4d4330462c7fc16c51873e45579b29a1a12fc90`,
+        Authorization: `Token ${token}`,
         mode: "no-cors",
       },
     }
-  ).then((res) => res.json());
+  );
+  if (!response.ok) {
+    throw new Error("Error getting channel information");
+  }
+  return response.json();
 };

tubearchivist/www/src/lib/getVideos.ts

@@ -1,15 +1,26 @@
 import { Videos } from "../types/video";
 
-export const getVideos = async (): Promise<Videos> => {
-  return await fetch(
+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 b4d4330462c7fc16c51873e45579b29a1a12fc90`,
+        Authorization: `Token ${token}`,
         mode: "no-cors",
       },
     }
-  ).then((res) => res.json());
+  );
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch videos");
+  }
+
+  return response.json();
 };
+
+// b4d4330462c7fc16c51873e45579b29a1a12fc90

tubearchivist/www/src/pages/_app.tsx

@@ -1,40 +1,16 @@
-import type { AppProps } from "next/app";
 import { SessionProvider } from "next-auth/react";
-import Script, { ScriptProps } from "next/script";
+import type { AppProps } from "next/app";
+import { useState } from "react";
 import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
-import "../styles/globals.css";
 import "../styles/dark.css"; // TODO: Setup themeing the React way
-import { useState } from "react";
-
-// TODO: Do these scripts need to be on every page?
-
-type ClientOnlyScriptProps = {
-  src: string;
-} & ScriptProps;
-
-/**
- * This wraps next/script and returns early if `window` is not detected
- * due to next using SSR
- */
-const ClientOnlyScript = ({ src, ...props }: ClientOnlyScriptProps) => {
-  if (typeof window === "undefined") {
-    return;
-  }
-  return <Script src={src} {...props} />;
-};
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const [queryClient] = useState(() => new QueryClient());
+
   return (
     <>
-      {/* <Script
-        strategy="lazyOnload"
-        src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"
-      /> */}
-
-      {/** TODO: Detect casting before loading this? */}
-      {/* <ClientOnlyScript strategy="lazyOnload" src="/js/cast-videos.js" /> */}
       <QueryClientProvider client={queryClient}>
         <ReactQueryDevtools />
         <Hydrate state={pageProps.dehydratedState}>

tubearchivist/www/src/pages/channel.tsx

@@ -1,16 +1,49 @@
-import { GetServerSideProps, NextPage } from "next";
+import type { GetServerSideProps, NextPage } from "next";
+import { getSession, useSession } from "next-auth/react";
+import { useState } from "react";
+import { dehydrate, QueryClient, useQuery } from "react-query";
 import { CustomHead } from "../components/CustomHead";
 import { Layout } from "../components/Layout";
 import { TA_BASE_URL } from "../lib/constants";
 import { getChannels } from "../lib/getChannels";
-import { Channel } from "../types/channel";
 
-export const getServerSideProps: GetServerSideProps = async () => {
-  const channels = await getChannels();
-  return { props: { channels } };
+type ViewStyle = "grid" | "list";
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const queryClient = new QueryClient();
+  const session = await getSession(context);
+
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/auth/login",
+        permanent: false,
+      },
+    };
+  }
+
+  await queryClient.prefetchQuery("channels", () =>
+    getChannels(session.ta_token.token)
+  );
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
 };
 
-const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
+const Channel: NextPage = () => {
+  const { data: session } = useSession();
+  const {
+    data: { data: channels },
+  } = useQuery("channels", () => getChannels(session.ta_token.token));
+  const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
+
+  const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
+    setViewStyle(selectedViewStyle);
+  };
+
   return (
     <>
       <CustomHead title="Channels" />
@@ -46,7 +79,6 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
                   id="show_subed_only"
                   onClick={() => console.log("toggleCheckbox(this)")}
                   type="checkbox"
-                  checked
                 />
                 {/* {% if not show_subed_only %} */}
                 <label htmlFor="" className="ofbtn">
@@ -62,29 +94,28 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
             <div className="view-icons">
               <img
                 src="/img/icon-gridview.svg"
-                onClick={() => console.log("changeView(this)")}
-                data-origin="channel"
-                data-value="grid"
+                onClick={() => handleSetViewstyle("grid")}
                 alt="grid view"
               />
               <img
                 src="/img/icon-listview.svg"
-                onClick={() => console.log("changeView(this)")}
-                data-origin="channel"
-                data-value="list"
+                onClick={() => handleSetViewstyle("list")}
                 alt="list view"
               />
             </div>
           </div>
-          <h2>Total matching channels: {channels?.data?.length} </h2>
-          <div className="channel-list list">
-            {/* {% if results %}
-            {% for channel in results %} */}
-            {channels &&
-              channels?.data?.map((channel) => {
+          <h2>Total matching channels: {channels?.length} </h2>
+          <div className={`channel-list ${viewStyle}`}>
+            {!channels ? (
+              <h2>No channels found...</h2>
+            ) : (
+              channels?.map((channel) => {
                 return (
-                  <div key={channel?.channel_id} className="channel-item list">
-                    <div className="channel-banner list">
+                  <div
+                    key={channel?.channel_id}
+                    className={`channel-item ${viewStyle}`}
+                  >
+                    <div className={`channel-banner ${viewStyle}`}>
                       <a href="{% url 'channel_id' channel.source.channel_id %}">
                         <img
                           src={`${TA_BASE_URL}${channel?.channel_banner_url}`}
@@ -92,7 +123,7 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
                         />
                       </a>
                     </div>
-                    <div className="info-box info-box-2 list">
+                    <div className={`info-box info-box-2 ${viewStyle}`}>
                       <div className="info-box-item">
                         <div className="round-img">
                           <a href="{% url 'channel_id' channel.source.channel_id %}">
@@ -144,7 +175,8 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
                     </div>
                   </div>
                 );
-              })}
+              })
+            )}
             {/* {% endfor %}
         {% else %} */}
             {/* <h2>No channels found...</h2> */}

tubearchivist/www/src/pages/index.tsx

@@ -1,38 +1,23 @@
-import type { GetServerSideProps, GetStaticProps, NextPage } from "next";
-import { signIn, signOut, useSession } from "next-auth/react";
+import type { GetServerSideProps, NextPage } from "next";
+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 { getVideos } from "../lib/getVideos";
-import { Videos } from "../types/video";
+import type { Videos } from "../types/video";
 
 type HomeProps = {
   videos: Videos;
-  imagePlaceholders?: string[];
-};
-
-const SignInOutButton = ({ isSignedIn }: { isSignedIn: boolean }) => {
-  if (isSignedIn) {
-    return <button onClick={() => signOut()}>Sign Out</button>;
-  }
-  return <button onClick={() => signIn()}>Sign in</button>;
 };
 
 const Home: NextPage<HomeProps> = () => {
-  const { data: session, status } = useSession();
-  const authData = {
-    session,
-    status,
-  };
-
   return (
     <>
       <CustomHead />
 
       <Layout>
         <VideoList />
-        <SignInOutButton isSignedIn={!!session?.user} />
       </Layout>
     </>
   );
@@ -40,18 +25,22 @@ const Home: NextPage<HomeProps> = () => {
 
 export default Home;
 
-// http://localhost:8000/cache/videos/3/37Kn-kIsVu8.jpg
-
-// export const getServerSideProps: GetServerSideProps = async (ctx) => {
-//   const videos = await getVideos();
-
-//   return { props: { videos } };
-// };
-
-export const getStaticProps: GetStaticProps = async () => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   const queryClient = new QueryClient();
+  const session = await getSession(context);
 
-  await queryClient.prefetchQuery("videos", getVideos);
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/auth/login",
+        permanent: false,
+      },
+    };
+  }
+
+  await queryClient.prefetchQuery("videos", () =>
+    getVideos(session.ta_token.token)
+  );
 
   return {
     props: {