41 lines
1.8 KiB
TypeScript
41 lines
1.8 KiB
TypeScript
import clsx from "clsx";
|
|
import {CaretRightOutlined} from "@ant-design/icons"
|
|
import {timeFromNow} from "@/util/strings.ts";
|
|
|
|
import styles from './style.module.scss'
|
|
|
|
type VideoItemProps = {
|
|
videoInfo: VideoInfo;
|
|
onLive?: boolean;
|
|
onClick?: (autoPlay: boolean) => void;
|
|
onRemove?: () => void;
|
|
onCheckedChange?: (checked: boolean) => void;
|
|
checked?: boolean;
|
|
}
|
|
|
|
export default function VideoItem(props: VideoItemProps) {
|
|
|
|
return <div
|
|
className={clsx(styles.videoItem, `rounded-lg h-[240px] overflow-hidden relative group ${props.checked ? styles.videoChecked : ''}`)}>
|
|
<div className={`controls absolute top-1 right-1 z-[2] rounded items-center gap-2`}>
|
|
{/*<span onClick={props.onRemove} className={'cursor-pointer text-blue-500 text-2xl cursor-pointer'}><IconDelete /></span>*/}
|
|
<div className={clsx("checkbox", {checked: props.checked})}
|
|
onClick={() => props.onCheckedChange?.(!props.checked)}></div>
|
|
</div>
|
|
<div className="cover">
|
|
<img className={'w-full cursor-pointer object-cover'} src={props.videoInfo.cover}/>
|
|
<div className={'absolute inset-x-0 top-0 flex items-center justify-center bottom-[36px]'}>
|
|
<div className={styles.playIcon} onClick={() => props.onClick?.(true)}><CaretRightOutlined/></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="video-bottom bg-black/30 backdrop-blur-[2px] text-sm absolute inset-x-0 bottom-0 text-white py-2 px-3 items-center flex justify-between">
|
|
<div className="title cursor-pointer flex-1 text-nowrap overflow-hidden text-ellipsis min-w-0 mr-4"
|
|
onClick={() => props.onClick?.(false)}>{props.videoInfo.title}</div>
|
|
<div className="video-time-info text-right">{timeFromNow(props.videoInfo.d_time)}</div>
|
|
</div>
|
|
<div
|
|
className={"absolute top-1 left-1 bg-black/50 rounded-3xl text-white px-3 py-0.5"}>{Math.ceil(props.videoInfo.duration / 1000)}s
|
|
</div>
|
|
</div>
|
|
} |