|
|
|
import Link from "next/link";
|
|
|
|
import { useRouter } from "next/router";
|
|
|
|
|
|
|
|
import { FC } from "react";
|
|
|
|
|
|
|
|
import { useQuery } from "react-query";
|
|
|
|
|
|
|
|
import Avatar from "@mui/material/Avatar";
|
|
|
|
import Box from "@mui/material/Box";
|
|
|
|
import Card from "@mui/material/Card";
|
|
|
|
import CardActionArea from "@mui/material/CardActionArea";
|
|
|
|
import CardContent from "@mui/material/CardContent";
|
|
|
|
import CardMedia from "@mui/material/CardMedia";
|
|
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
|
|
|
|
import { abbreviateNumber } from "@src/utils";
|
|
|
|
|
|
|
|
import { Channel, Quality } from "@interfaces/channel";
|
|
|
|
import { Video as VideoModel } from "@interfaces/video";
|
|
|
|
|
|
|
|
const Video: FC<VideoModel> = ({
|
|
|
|
thumbnail,
|
|
|
|
title,
|
|
|
|
id,
|
|
|
|
author,
|
|
|
|
views,
|
|
|
|
published
|
|
|
|
}) => {
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Card sx={{ display: "inline-block" }}>
|
|
|
|
<CardActionArea onClick={() => router.push(`/watch?v=${id}`)}>
|
|
|
|
<CardMedia
|
|
|
|
height="270"
|
|
|
|
component="img"
|
|
|
|
image={thumbnail}
|
|
|
|
alt="video thumbnail"
|
|
|
|
/>
|
|
|
|
<CardContent>
|
|
|
|
<Tooltip title={title}>
|
|
|
|
<Typography gutterBottom variant="h6" component="div">
|
|
|
|
{title}
|
|
|
|
</Typography>
|
|
|
|
</Tooltip>
|
|
|
|
<Link passHref href={`/channel/${author.id}`}>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
|
|
<Avatar sx={{ mr: 2 }} alt={author.name} />
|
|
|
|
<Typography color="text.secondary" variant="subtitle1">
|
|
|
|
{author.name}
|
|
|
|
</Typography>
|
|
|
|
</Box>
|
|
|
|
</Link>
|
|
|
|
<Typography sx={{ mt: 2 }} color="text.secondary" variant="body2">
|
|
|
|
{abbreviateNumber(views)} Views • Published {published.text}
|
|
|
|
</Typography>
|
|
|
|
</CardContent>
|
|
|
|
</CardActionArea>
|
|
|
|
</Card>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Video;
|