tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 11:50:14 +00:00
Code Issues Projects Releases Wiki Activity

chore: setup video list to use blurred placeholders for thumbnails

Browse Source
This commit is contained in:
Sean Norwood 2022-04-07 22:53:01 +00:00
parent 9608c892a9
commit cb3a7e555b
1 changed files with 87 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,11 @@
import { Datum, Videos } from "../types/video";
import NextImage from "next/image"; import NextImage from "next/image";
import ReactPlayer from "react-player/file";
import { useState } from "react"; import { useState } from "react";
import IconPlay from "../images/icon-play.svg"; import ReactPlayer from "react-player/file";
import IconClose from "../images/icon-close.svg"; import IconClose from "../images/icon-close.svg";
import IconPlay from "../images/icon-play.svg";
import { TA_BASE_URL } from "../lib/constants";
import { formatNumbers } from "../lib/utils"; import { formatNumbers } from "../lib/utils";
import { Datum, Videos } from "../types/video";
export const VideoList = ({ videos }: { videos: Videos }) => { export const VideoList = ({ videos }: { videos: Videos }) => {
const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>(); const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
@ -162,89 +163,93 @@ export const VideoList = ({ videos }: { videos: Videos }) => {
</div> </div>
<div className="video-list list"> <div className="video-list list">
{videos && {videos &&
videos?.data?.map((video) => ( videos?.data?.map((video) => {
<div key={video.youtube_id} className="video-item list"> return (
<a <div key={video.youtube_id} className="video-item list">
style={{ cursor: "pointer" }} <a
onClick={() => handleSelectedVideo(video)} style={{ cursor: "pointer" }}
> onClick={() => handleSelectedVideo(video)}
<div className="video-thumb-wrap list">
<div className="video-thumb">
<NextImage
src={`${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/cache/${video.vid_thumb_url}`}
alt="video-thumb"
width={250}
height={141}
/>
{/* {% if video.source.player.progress %} */}
<div
className="video-progress-bar"
id={`progress-${video.youtube_id}`}
// style={{ width: video.player.progress }} // TODO: /video/youtube_id/progress
></div>
{/* {% else %} */}
<div
className="video-progress-bar"
id={`progress-${video.youtube_id}`}
style={{ width: "0%" }}
></div>
{/* {% endif %} */}
</div>
<div className="video-play">
<NextImage
width={40}
height={40}
src={IconPlay}
alt="play-icon"
/>
</div>
</div>
</a>
<div className="video-desc list">
<div
className="video-desc-player"
id={`video-info-${video.youtube_id}`}
> >
{video.player.watched ? ( <div className="video-thumb-wrap list">
<img <div className="video-thumb">
src="/img/icon-seen.svg" <NextImage
alt="seen-icon" src={`${TA_BASE_URL}/cache/${video.vid_thumb_url}`}
data-id={video.youtube_id} alt="video-thumb"
data-status="watched" width={250}
// onClick="updateVideoWatchStatus(this)" height={145}
className="watch-button" // blurDataURL={placeholder}
title="Mark as unwatched" // placeholder="blur"
/> />
) : ( {/* {% if video.source.player.progress %} */}
<img <div
src="/img/icon-unseen.svg" className="video-progress-bar"
alt="unseen-icon" id={`progress-${video.youtube_id}`}
data-id={video.youtube_id} // style={{ width: video.player.progress }} // TODO: /video/youtube_id/progress
data-status="unwatched" ></div>
// onClick="updateVideoWatchStatus(this)" {/* {% else %} */}
className="watch-button" <div
title="Mark as watched" className="video-progress-bar"
/> id={`progress-${video.youtube_id}`}
)} style={{ width: "0%" }}
></div>
<span> {/* {% endif %} */}
{video.published} | {video.player.duration_str} </div>
</span> <div className="video-play">
</div> <NextImage
<div> width={40}
<a href={`/channel/${video.channel.channel_id}`}> height={40}
<h3>{video.channel.channel_name}</h3> src={IconPlay}
</a> alt="play-icon"
<a />
className="video-more" </div>
href={`/video/${video.youtube_id}`} </div>
</a>
<div className="video-desc list">
<div
className="video-desc-player"
id={`video-info-${video.youtube_id}`}
> >
<h2>{video.title}</h2> {video.player.watched ? (
</a> <img
src="/img/icon-seen.svg"
alt="seen-icon"
data-id={video.youtube_id}
data-status="watched"
// onClick="updateVideoWatchStatus(this)"
className="watch-button"
title="Mark as unwatched"
/>
) : (
<img
src="/img/icon-unseen.svg"
alt="unseen-icon"
data-id={video.youtube_id}
data-status="unwatched"
// onClick="updateVideoWatchStatus(this)"
className="watch-button"
title="Mark as watched"
/>
)}
<span>
{video.published} | {video.player.duration_str}
</span>
</div>
<div>
<a href={`/channel/${video.channel.channel_id}`}>
<h3>{video.channel.channel_name}</h3>
</a>
<a
className="video-more"
href={`/video/${video.youtube_id}`}
>
<h2>{video.title}</h2>
</a>
</div>
</div> </div>
</div> </div>
</div> );
))} })}
</div> </div>
</div> </div>
</> </>