tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-25 13:10:15 +00:00
Code Issues Projects Releases Wiki Activity

chore: misc changes

Browse Source 
Clean up some code inconsistencies
Try to handle async stuff better
This commit is contained in:
Sean Norwood 2022-04-13 20:53:39 +00:00
parent 8b86c327c5
commit b62b903ed5
9 changed files with 98 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tubearchivist/www/src/components/VideoList.tsx
View File

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

89
tubearchivist/www/src/components/VideoPlayer.tsx
View File

@ -1,61 +1,64 @@
import NextImage from "next/image"; import NextImage from "next/image";
import ReactPlayer from "react-player"; import ReactPlayer from "react-player";
import IconClose from "../images/icon-close.svg"; import IconClose from "../images/icon-close.svg";
import { TA_BASE_URL } from "../lib/constants";
import { formatNumbers } from "../lib/utils"; import { formatNumbers } from "../lib/utils";
export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => { export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
if (!selectedVideoUrl) return; if (!selectedVideoUrl) return;
return ( return (
<> <>
<div className="player-wrapper"> {selectedVideoUrl && (
<div className="video-player"> <div className="player-wrapper">
<ReactPlayer <div className="video-player">
controls={true} <ReactPlayer
width="100%" controls={true}
height="100%" width="100%"
light="false" height="100%"
playing // TODO: Not currently working light={false}
playsinline playing // TODO: Not currently working
url={`${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/media/${selectedVideoUrl.media_url}`} playsinline
/> url={`${TA_BASE_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} <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} ${castButton}
*/} */}
<div className="thumb-icon player-stats"> <div className="thumb-icon player-stats">
<img src="/img/icon-eye.svg" alt="views icon" /> <img src="/img/icon-eye.svg" alt="views icon" />
<span> <span>
{formatNumbers(selectedVideoUrl.stats.view_count.toString())} {formatNumbers(selectedVideoUrl.stats.view_count.toString())}
</span> </span>
<span>|</span> <span>|</span>
<img src="/img/icon-thumb.svg" alt="thumbs-up" /> <img src="/img/icon-thumb.svg" alt="thumbs-up" />
<span> <span>
{formatNumbers(selectedVideoUrl.stats.like_count.toString())} {formatNumbers(selectedVideoUrl.stats.like_count.toString())}
</span> </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 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> </div>
</div> )}
</> </>
); );
}; };

20
tubearchivist/www/src/lib/getChannels.ts
View File

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

20
tubearchivist/www/src/lib/getPlaylists.ts
View File

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

20
tubearchivist/www/src/lib/getVideos.ts
View File

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

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

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

3
tubearchivist/www/src/pages/channel.tsx
View File

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

3
tubearchivist/www/src/pages/index.tsx
View File

@ -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) getVideos(session.ta_token.token)
); );
return { return {
props: { props: {
dehydratedState: dehydrate(queryClient), dehydratedState: dehydrate(queryClient),
session,
}, },
}; };
}; };

9
tubearchivist/www/src/pages/playlist.tsx
View File

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