You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

65 lines
1.7 KiB

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;