From df30173ba3da40740a844eb2f3ef5df309530b93 Mon Sep 17 00:00:00 2001 From: Sean Norwood Date: Sun, 17 Apr 2022 00:49:20 +0000 Subject: [PATCH] chore: more code cleanup and use better env vars --- .../src/components/VideoList/VideoList.tsx | 18 ++- .../components/VideoPlayer/VideoPlayer.tsx | 140 +++++++++++++----- tubearchivist/www/src/lib/constants.ts | 13 +- tubearchivist/www/src/lib/getChannels.ts | 10 +- tubearchivist/www/src/lib/getPlaylists.ts | 37 ++++- tubearchivist/www/src/lib/getVideos.ts | 32 +++- .../www/src/pages/api/auth/[...nextauth].ts | 6 +- tubearchivist/www/src/pages/auth/login.tsx | 9 +- tubearchivist/www/src/pages/channel.tsx | 25 +++- 9 files changed, 225 insertions(+), 65 deletions(-) diff --git a/tubearchivist/www/src/components/VideoList/VideoList.tsx b/tubearchivist/www/src/components/VideoList/VideoList.tsx index 463aaab..e31869f 100644 --- a/tubearchivist/www/src/components/VideoList/VideoList.tsx +++ b/tubearchivist/www/src/components/VideoList/VideoList.tsx @@ -3,15 +3,17 @@ import NextImage from "next/image"; import { useState } from "react"; import { useQuery } from "react-query"; import IconPlay from "../../images/icon-play.svg"; -import { TA_BASE_URL } from "../../lib/constants"; +import { getTAUrl } from "../../lib/constants"; import { getVideos } from "../../lib/getVideos"; -import type { Datum } from "../../types/video"; +import type { Data } from "../../types/video"; import VideoPlayer from "../VideoPlayer"; type ViewStyle = "grid" | "list"; +const TA_BASE_URL = getTAUrl(); + const VideoList = () => { - const [selectedVideoUrl, setSelectedVideoUrl] = useState(); + const [selectedVideoUrl, setSelectedVideoUrl] = useState(); const [viewStyle, setViewStyle] = useState("grid"); const { data: session } = useSession(); const { data, error, isLoading } = useQuery( @@ -22,7 +24,7 @@ const VideoList = () => { } ); - const handleSelectedVideo = (video: Datum) => { + const handleSelectedVideo = (video: Data) => { setSelectedVideoUrl(video); }; @@ -51,7 +53,7 @@ const VideoList = () => { <>
@@ -135,10 +137,10 @@ const VideoList = () => {
diff --git a/tubearchivist/www/src/components/VideoPlayer/VideoPlayer.tsx b/tubearchivist/www/src/components/VideoPlayer/VideoPlayer.tsx index fe4ae8a..66dec7d 100644 --- a/tubearchivist/www/src/components/VideoPlayer/VideoPlayer.tsx +++ b/tubearchivist/www/src/components/VideoPlayer/VideoPlayer.tsx @@ -1,14 +1,28 @@ import NextImage from "next/image"; +import NextLink from "next/link"; import ReactPlayer from "react-player"; +import IconClose from "../../images/icon-close.svg"; import { TA_BASE_URL } from "../../lib/constants"; import { formatNumbers } from "../../lib/utils"; -import IconClose from "../../images/icon-close.svg"; +import { Data } from "../../types/video"; -const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => { - if (!selectedVideoUrl) return; +type VideoPlayerProps = { + selectedVideo: Data; + handleRemoveVideoPlayer?: () => void; + isHome?: boolean; + showStats?: boolean; +}; + +const VideoPlayer = ({ + selectedVideo, + handleRemoveVideoPlayer, + isHome = true, + showStats = true, +}: VideoPlayerProps) => { + if (!selectedVideo) return; return ( <> - {selectedVideoUrl && ( + {selectedVideo && (
{ light={false} playing // TODO: Not currently working playsinline - url={`${TA_BASE_URL}/media/${selectedVideoUrl?.media_url}`} + url={ + isHome + ? `${TA_BASE_URL}/media/${selectedVideo?.media_url}` + : `${TA_BASE_URL}/${selectedVideo?.media_url}` + } /> -
- - {/* ${watchStatusIndicator} - ${castButton} - */} -
- views icon - - {formatNumbers(selectedVideoUrl.stats.view_count.toString())} - - | - thumbs-up - - {formatNumbers(selectedVideoUrl.stats.like_count.toString())} - -
- - -

{selectedVideoUrl.title}

- -
+ ) : null}
)} @@ -64,3 +84,45 @@ const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => { }; export default VideoPlayer; + +function SponsorBlock() { + return ( + <> + {/*
*/} +
+ {/* {% if video.sponsorblock.is_enabled %} */} + {/* {% if video.sponsorblock.segments|length == 0 %} */} +

+ This video doesn't have any sponsor segments added. To add a + segment go to{" "} + + + this video on YouTube + + {" "} + and add a segment using the{" "} + + SponsorBlock + {" "} + extension. +

+ {/* {% elif video.sponsorblock.has_unlocked %} */} +

+ This video has unlocked sponsor segments. Go to{" "} + + + this video on YouTube + + {" "} + and vote on the segments using the{" "} + + SponsorBlock + {" "} + extension. +

+ {/* {% endif %} */} + {/* {% endif %} */} +
+ + ); +} diff --git a/tubearchivist/www/src/lib/constants.ts b/tubearchivist/www/src/lib/constants.ts index 78c1d75..db35f09 100644 --- a/tubearchivist/www/src/lib/constants.ts +++ b/tubearchivist/www/src/lib/constants.ts @@ -1 +1,12 @@ -export const TA_BASE_URL = process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL; +export const getTAUrl = () => { + if (process.env.NODE_ENV === "development") { + return { + client: process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL, + server: process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL, + }; + } + return { + client: process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL, + server: process.env.TUBEARCHIVIST_URL, + }; +}; diff --git a/tubearchivist/www/src/lib/getChannels.ts b/tubearchivist/www/src/lib/getChannels.ts index 3e6ef94..a070b65 100644 --- a/tubearchivist/www/src/lib/getChannels.ts +++ b/tubearchivist/www/src/lib/getChannels.ts @@ -1,8 +1,14 @@ import { Channel } from "../types/channel"; -import { TA_BASE_URL } from "./constants"; +import { getTAUrl } from "./constants"; + +const TA_BASE_URL = getTAUrl(); export const getChannels = async (token: string): Promise => { - const response = await fetch(`${TA_BASE_URL}/api/channel/`, { + if (!token) { + throw new Error(`Unable to fetch channels, no token provided`); + } + + const response = await fetch(`${TA_BASE_URL.server}/api/channel/`, { headers: { Accept: "application/json", "Content-Type": "application/json", diff --git a/tubearchivist/www/src/lib/getPlaylists.ts b/tubearchivist/www/src/lib/getPlaylists.ts index c2b5ecb..edb6f9c 100644 --- a/tubearchivist/www/src/lib/getPlaylists.ts +++ b/tubearchivist/www/src/lib/getPlaylists.ts @@ -1,7 +1,12 @@ import { Playlist } from "../types/playlist"; +import { Playlists } from "../types/playlists"; import { TA_BASE_URL } from "./constants"; -export const getPlaylists = async (token: string): Promise => { +export const getPlaylists = async (token: string): Promise => { + if (!token) { + throw new Error(`No token provided when fetching a playlists`); + } + const response = await fetch(`${TA_BASE_URL}/api/playlist/`, { headers: { Accept: "application/json", @@ -11,7 +16,35 @@ export const getPlaylists = async (token: string): Promise => { }, }); if (!response.ok) { - throw new Error("Error getting channel information"); + throw new Error( + `Error getting playlists information: ${response.statusText}` + ); + } + return response.json(); +}; + +export const getPlaylist = async ( + token: string, + playlistId: string +): Promise => { + if (!token) { + throw new Error( + `No token provided when fetching a playlist: ${playlistId}` + ); + } + + const response = await fetch(`${TA_BASE_URL}/api/playlist/${playlistId}`, { + headers: { + Accept: "application/json", + "Content-Type": "application/json", + Authorization: `Token ${token}`, + mode: "no-cors", + }, + }); + if (!response.ok) { + throw new Error( + `Error getting playlists information: ${response.statusText}` + ); } return response.json(); }; diff --git a/tubearchivist/www/src/lib/getVideos.ts b/tubearchivist/www/src/lib/getVideos.ts index a97a706..b1b4db7 100644 --- a/tubearchivist/www/src/lib/getVideos.ts +++ b/tubearchivist/www/src/lib/getVideos.ts @@ -1,11 +1,37 @@ -import { Videos } from "../types/video"; -import { TA_BASE_URL } from "./constants"; +import { Video } from "../types/video"; +import { Videos } from "../types/videos"; +import { getTAUrl } from "./constants"; + +const TA_BASE_URL = getTAUrl(); export const getVideos = async (token: string): Promise => { if (!token) { throw new Error("Missing API token in request to get videos"); } - const response = await fetch(`${TA_BASE_URL}/api/video/`, { + const response = await fetch(`${TA_BASE_URL.server}/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"); + } + + return response.json(); +}; + +export const getVideo = async ( + token: string, + videoId: string +): Promise