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

19
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,7 +163,8 @@ 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) => {
return (
<div key={video.youtube_id} className="video-item list"> <div key={video.youtube_id} className="video-item list">
<a <a
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
@ -171,10 +173,12 @@ export const VideoList = ({ videos }: { videos: Videos }) => {
<div className="video-thumb-wrap list"> <div className="video-thumb-wrap list">
<div className="video-thumb"> <div className="video-thumb">
<NextImage <NextImage
src={`${process.env.NEXT_PUBLIC_TUBEARCHIVIST_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={141} height={145}
// blurDataURL={placeholder}
// placeholder="blur"
/> />
{/* {% if video.source.player.progress %} */} {/* {% if video.source.player.progress %} */}
<div <div
@ -244,7 +248,8 @@ export const VideoList = ({ videos }: { videos: Videos }) => {
</div> </div>
</div> </div>
</div> </div>
))} );
})}
</div> </div>
</div> </div>
</> </>