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 ReactPlayer from "react-player/file";
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 IconPlay from "../images/icon-play.svg";
import { TA_BASE_URL } from "../lib/constants";
import { formatNumbers } from "../lib/utils";
import { Datum, Videos } from "../types/video";
export const VideoList = ({ videos }: { videos: Videos }) => {
const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
@ -162,89 +163,93 @@ export const VideoList = ({ videos }: { videos: Videos }) => {
</div>
<div className="video-list list">
{videos &&
videos?.data?.map((video) => (
<div key={video.youtube_id} className="video-item list">
<a
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}`}
videos?.data?.map((video) => {
return (
<div key={video.youtube_id} className="video-item list">
<a
style={{ cursor: "pointer" }}
onClick={() => handleSelectedVideo(video)}
>
{video.player.watched ? (
<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}`}
<div className="video-thumb-wrap list">
<div className="video-thumb">
<NextImage
src={`${TA_BASE_URL}/cache/${video.vid_thumb_url}`}
alt="video-thumb"
width={250}
height={145}
// blurDataURL={placeholder}
// placeholder="blur"
/>
{/* {% 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}`}
>
<h2>{video.title}</h2>
</a>
{video.player.watched ? (
<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>
</>