-
+
{videos.map((video, index) => (
@@ -53,7 +35,7 @@ const Home: NextPage = () => {
/>
{video.title}
- {video.uid}
+ {dayjs(video.created_at.seconds * 1000).format("YYYY-MM-DD")}
diff --git a/apps/video-trading/pages/watch/index.tsx b/apps/video-trading/pages/watch/index.tsx
index 188ee2b..4a56e13 100644
--- a/apps/video-trading/pages/watch/index.tsx
+++ b/apps/video-trading/pages/watch/index.tsx
@@ -3,49 +3,44 @@ import {
Box,
Button,
Card,
+ CardActionArea,
CardContent,
CardHeader,
- CardMedia,
+ Dialog,
+ DialogContent,
+ DialogTitle,
Divider,
Grid,
Stack,
TextField,
Typography,
} from "@mui/material";
-import { Video } from "client";
-import { abbreviateNumber } from "utils";
-import { useRouter } from "next/router";
import dayjs from "dayjs";
-import React from "react";
+import { useRouter } from "next/router";
+import { abbreviateNumber } from "utils";
+import { Player } from "video-react";
-import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import ThumbDownIcon from "@mui/icons-material/ThumbDown";
-import VideoButton from "../../components/VideoButton";
import ShareIcon from "@mui/icons-material/Share";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import "video-react/dist/video-react.css";
import CategoryCard from "../../components/CategoryCard";
-import VideoCardSmall from "../../components/VideoCardSmall";
-import { appBarHeight } from "../../config";
-
-const video: Video = {
- id: "1",
- title: "Video 1",
- description: "This is a video",
- cover:
- "https://img.freepik.com/free-photo/cloud-sky-twilight-times_74190-4017.jpg?w=2000",
- source: "https://www.youtube.com/watch?v=QH2-TGUlwu4",
- created_at: new Date(),
- updated_at: new Date(),
- size: 200 * 1024 * 1024,
- uid: "1",
- cid: "1",
- views: 3000,
- likes: 3000,
-};
+import VideoButton from "../../components/VideoButton";
+import useUser from "../../hooks/useUser";
+import useVideo from "../../hooks/useVideo";
+import useComents from "../../hooks/useComents";
+import VideoHistoryPage from "../../components/video/VideoHistoryPage";
+import { useState } from "react";
+import { doc, getFirestore } from "firebase/firestore";
export default function Index() {
const router = useRouter();
// get video id from url
const videoId = router.query.v;
+ const video = useVideo(videoId as string);
+ const user = useUser(video.data?.owner as string);
+ const comments = useComents(video.data as any);
+ const [openVideoHistory, setOpenVideoHistory] = useState(false);
return (
@@ -54,14 +49,12 @@ export default function Index() {
{/* video */}
-
+ {video.data && (
+
+ )}
- {video.title}
+ {video.data?.title}
{/* video info */}
- {video.views.toLocaleString("en-US")} views •{" "}
- {dayjs(video.created_at).format("MMM DD, YYYY")}
+ 0 views •{" "}
+ {dayjs(video.data?.created_at.seconds * 1000).format(
+ "MMM DD, YYYY"
+ )}
}
/>
} />
@@ -89,14 +84,11 @@ export default function Index() {
A
{/* description */}
- User name
+ {user.data?.display_name}
12K subscribers
-
- Recorded live at Reactathon 2022. Learn more at
- https://reactathon.com Goodbye, useEffect
-
+ {video.data?.description}
{/* subscribe */}
@@ -111,6 +103,19 @@ export default function Index() {
100 Comments
+
+ {
+ setOpenVideoHistory(true);
+ }}
+ >
+
+
+ Show video trading history
+
+
+
+
{/* add comment */}
@@ -125,28 +130,24 @@ export default function Index() {
{/* comments */}
-
- A
-
-
- User name
-
- 12 months ago
-
-
-
- This is a comment. This is a comment. This is a comment. This is
- a comment. This is a comment. This is a comment. This is a
- comment. This is a comment. This is a comment. This is a
- comment. This is a comment. This is a comment. This is a
- comment. This is a comment.
-
-
- } title="252" />
- } title="252" />
+ {comments.data?.map((comment: any) => (
+
+ A
+
+
+ User name
+
+ {dayjs(comment.created_at.seconds * 1000).format("MMM DD")}
+
+
+ {comment.content}
+
+ } title="252" />
+ } title="252" />
+
-
+ ))}
{/* right sidebar */}
@@ -156,20 +157,35 @@ export default function Index() {
-
- OR
-
+
-
- {Array(100)
+
+ {/* {Array(100)
.fill(1)
.map((_, i) => (
- ))}
+ ))} */}
+
+ {video.data && (
+
+ )}
);
}
diff --git a/packages/client/src/clients/video.ts b/packages/client/src/clients/video.ts
index 83976c5..81b2d67 100644
--- a/packages/client/src/clients/video.ts
+++ b/packages/client/src/clients/video.ts
@@ -1,75 +1,31 @@
-import { PostgrestError } from "@supabase/supabase-js";
-import { Client } from "../supabase";
-
export interface Video {
id: string;
title: string;
description: string;
cover: string;
- source: string;
- /**
- * Video Size in bytes
- */
- size: number;
- created_at: Date;
- updated_at: Date;
- uid: string;
- cid: string;
- views: number;
+ video: string;
+ created_at: any;
+ updated_at: any;
likes: number;
+ owner: any;
+ tags: string[];
+ price: number;
}
-type VideoResponse = {
- data?: Video;
- error?: PostgrestError;
-};
-
-/**
- * A client which can be used to interact with the video service.
- */
-export class VideoClient extends Client {
- async createVideo(video: Video) {
- return await this.client.from("video").insert(video);
- }
-
- /**
- * Get a video by id.
- * @param id The id of the video.
- * @returns
- */
- async getVideo(id: string): Promise
{
- // use supabase client to get video
- const { data, error } = await this.client
- .from("video")
- .select("*")
- .eq("id", id);
-
- if (error !== null) {
- return { data: undefined, error };
- }
-
- return {
- data: data[0],
- error: undefined,
- };
- }
-
- /**
- * List all video by pagination.
- */
- async listVideos(page: number) {
- const { from, to } = this.pagination(page);
- const { data, error, count } = await this.client
- .from