From 0efd9ed1f80c250aafe8d224ebaee9f9d477f03a Mon Sep 17 00:00:00 2001 From: Guus van Meerveld Date: Thu, 14 Mar 2024 17:56:50 +0100 Subject: [PATCH] moved video card to components and renamed to video --- src/app/trending/Trending.tsx | 5 ++-- src/client/adapters/index.ts | 4 ++-- src/client/adapters/invidious/transformer.ts | 4 ++-- src/client/adapters/piped/transformer.ts | 4 ++-- src/client/index.ts | 4 ++-- .../typings/{trending.ts => videoPreview.ts} | 2 +- src/components/ContextMenu.tsx | 23 +++++++++++++++++++ .../VideoCard.tsx => components/Video.tsx} | 6 ++--- 8 files changed, 37 insertions(+), 15 deletions(-) rename src/client/typings/{trending.ts => videoPreview.ts} (84%) create mode 100644 src/components/ContextMenu.tsx rename src/{app/trending/VideoCard.tsx => components/Video.tsx} (91%) diff --git a/src/app/trending/Trending.tsx b/src/app/trending/Trending.tsx index 6bc8c50..5fd1c63 100644 --- a/src/app/trending/Trending.tsx +++ b/src/app/trending/Trending.tsx @@ -7,13 +7,14 @@ import { useQuery } from "@tanstack/react-query"; import { Button } from "@nextui-org/button"; import { Spacer } from "@nextui-org/spacer"; -import { VideoCard } from "./VideoCard"; + import { LoadingPage } from "@/components/LoadingPage"; import { useSearchParams } from "next/navigation"; import { useMemo } from "react"; import getRegionCodes from "@/utils/getRegionCodes"; import { RegionSwitcher } from "./RegionSwitcher"; import { defaultRegion } from "@/constants"; +import { Video } from "@/components/Video"; export const Trending: Component = ({}) => { const client = useClient(); @@ -88,7 +89,7 @@ export const Trending: Component = ({}) => { {data && error === null && (
{data.map((video) => ( - +
)} diff --git a/src/client/adapters/index.ts b/src/client/adapters/index.ts index f072ae5..cda4854 100644 --- a/src/client/adapters/index.ts +++ b/src/client/adapters/index.ts @@ -1,8 +1,8 @@ import { Suggestions } from "@/client/typings/search/suggestions"; -import { TrendingVideo } from "@/client/typings/trending"; +import { VideoPreview } from "@/client/typings/trending"; export interface ConnectedAdapter { - getTrending(region: string): Promise; + getTrending(region: string): Promise; getSearchSuggestions(query: string): Promise; } diff --git a/src/client/adapters/invidious/transformer.ts b/src/client/adapters/invidious/transformer.ts index 28e608d..e79b5aa 100644 --- a/src/client/adapters/invidious/transformer.ts +++ b/src/client/adapters/invidious/transformer.ts @@ -1,11 +1,11 @@ -import { TrendingVideo } from "@/client/typings/trending"; +import { VideoPreview } from "@/client/typings/trending"; import InvidiousTrending from "./typings/trending"; import InvidiousSuggestions from "./typings/search/suggestions"; import { Suggestions } from "@/client/typings/search/suggestions"; export default class Transformer { - public static trending(data: InvidiousTrending[]): TrendingVideo[] { + public static trending(data: InvidiousTrending[]): VideoPreview[] { return data.map((video) => { const thumbnail = video.videoThumbnails.find( (thumbnail) => diff --git a/src/client/adapters/piped/transformer.ts b/src/client/adapters/piped/transformer.ts index 88a2cc3..c9219f6 100644 --- a/src/client/adapters/piped/transformer.ts +++ b/src/client/adapters/piped/transformer.ts @@ -1,4 +1,4 @@ -import { TrendingVideo } from "@/client/typings/trending"; +import { VideoPreview } from "@/client/typings/trending"; import PipedTrending from "./typings/trending"; @@ -6,7 +6,7 @@ const videoIdRegex = /\/watch\?v=(.+)/; const channelIdRegex = /\/channel\/(.+)/; export default class Transformer { - public static trending(data: PipedTrending[]): TrendingVideo[] { + public static trending(data: PipedTrending[]): VideoPreview[] { return data.map((video) => { const videoIdMatch = video.url.match(videoIdRegex); diff --git a/src/client/index.ts b/src/client/index.ts index 1b151c0..10cd019 100644 --- a/src/client/index.ts +++ b/src/client/index.ts @@ -1,4 +1,4 @@ -import { TrendingVideo } from "./typings/trending"; +import { VideoPreview } from "./typings/videoPreview"; import InvidiousAdapter from "./adapters/invidious"; import PipedAdapter from "./adapters/piped"; @@ -48,7 +48,7 @@ export default class Client { return adapter.connect(api.baseUrl); } - public async getTrending(region: string): Promise { + public async getTrending(region: string): Promise { const adapter = this.getBestAdapter(); return await adapter.getTrending(region); diff --git a/src/client/typings/trending.ts b/src/client/typings/videoPreview.ts similarity index 84% rename from src/client/typings/trending.ts rename to src/client/typings/videoPreview.ts index c9ba2f6..bc9750f 100644 --- a/src/client/typings/trending.ts +++ b/src/client/typings/videoPreview.ts @@ -1,4 +1,4 @@ -export interface TrendingVideo { +export interface VideoPreview { title: string; thumbnail: string; id: string; diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx new file mode 100644 index 0000000..fa7baf8 --- /dev/null +++ b/src/components/ContextMenu.tsx @@ -0,0 +1,23 @@ +import { Component } from "@/typings/component"; +import { Listbox, ListboxItem } from "@nextui-org/listbox"; + +export interface ContextMenuItem { + title: string; + key: string; + href?: string; + onClick?: () => any; +} + +export const ContextMenu: Component<{ menu: ContextMenuItem[] }> = ({ + menu +}) => { + return ( + + {menu.map((item) => ( + + {item.title} + + ))} + + ); +}; diff --git a/src/app/trending/VideoCard.tsx b/src/components/Video.tsx similarity index 91% rename from src/app/trending/VideoCard.tsx rename to src/components/Video.tsx index da7800c..95ade86 100644 --- a/src/app/trending/VideoCard.tsx +++ b/src/components/Video.tsx @@ -1,4 +1,4 @@ -import { TrendingVideo } from "@/client/typings/trending"; +import { VideoPreview } from "@/client/typings/videoPreview"; import { Component } from "@/typings/component"; import { Card, CardFooter, CardBody } from "@nextui-org/card"; import { Image } from "@nextui-org/image"; @@ -7,9 +7,7 @@ import Link from "next/link"; import formatViewCount from "@/utils/formatViewCount"; import formatDuration from "@/utils/formatDuration"; -export const VideoCard: Component<{ data: TrendingVideo }> = ({ - data: video -}) => { +export const Video: Component<{ data: VideoPreview }> = ({ data: video }) => { const handleContextMenu = () => {}; return (