From 8a63da87ea71f351d5245849378bc419ea230c38 Mon Sep 17 00:00:00 2001 From: Vincent <87549152+trash-lobster@users.noreply.github.com> Date: Mon, 9 Sep 2024 08:22:47 +1200 Subject: [PATCH 01/12] Create multiview placeholder (#1) --- .../react/src/routes/multiview/multiview.tsx | 16 ++++++++++++++++ packages/react/src/routes/router.tsx | 6 ++++++ 2 files changed, 22 insertions(+) create mode 100644 packages/react/src/routes/multiview/multiview.tsx diff --git a/packages/react/src/routes/multiview/multiview.tsx b/packages/react/src/routes/multiview/multiview.tsx new file mode 100644 index 000000000..05e3cd5ca --- /dev/null +++ b/packages/react/src/routes/multiview/multiview.tsx @@ -0,0 +1,16 @@ +import { Helmet } from "react-helmet-async"; + +// multiview skeleton +// selection bar at the top to change between orgs and allow url insertion +// grid page for drag and drop + +export function Multiview() { + return ( + <> + + Multiview - Holodex + +
Placeholder
+ + ); +} diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx index 0454d8892..e0873fd3e 100644 --- a/packages/react/src/routes/router.tsx +++ b/packages/react/src/routes/router.tsx @@ -93,6 +93,11 @@ const ResetClientPage = lazy(() => import("./debug").then((module) => ({ default: module.ResetClientPage })), ); const Playlist = lazy(() => import("./playlist")); +const Multiview = lazy(() => + import("./multiview/multiview").then((module) => ({ + default: module.Multiview, + })), +); const store = getDefaultStore(); @@ -146,6 +151,7 @@ export const routes = ( + Translation Client} /> From 737961a41b9d4feddefe7bbc0c5b0d3a9019b0da Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 08:53:50 +1200 Subject: [PATCH 02/12] Create basic components --- .../src/components/multiview/Selector.tsx | 23 +++++++++++++++++++ .../src/components/multiview/Toolbar.tsx | 11 +++++++++ 2 files changed, 34 insertions(+) create mode 100644 packages/react/src/components/multiview/Selector.tsx create mode 100644 packages/react/src/components/multiview/Toolbar.tsx diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx new file mode 100644 index 000000000..aa6fab29d --- /dev/null +++ b/packages/react/src/components/multiview/Selector.tsx @@ -0,0 +1,23 @@ +import { + DropdownMenu, + DropdownMenuTrigger, +} from "@radix-ui/react-dropdown-menu"; + +// I need a way to get a list of data containing the option name +// based on the option selected, a list of current streams should be displayed +// we need a current selection to hold the data +/** + * Options beyond the existing orgs: + * - favorites + * - youtube url + * - twitch url + * - all vtubers + */ + +export function Selector() { + return ( + + Favourites + + ); +} diff --git a/packages/react/src/components/multiview/Toolbar.tsx b/packages/react/src/components/multiview/Toolbar.tsx new file mode 100644 index 000000000..533a4e033 --- /dev/null +++ b/packages/react/src/components/multiview/Toolbar.tsx @@ -0,0 +1,11 @@ +import { Selector } from "./Selector"; + +export function Toolbar() { + return ( +
+
+ +
+
+ ); +} From 5c437ab7a9d787d7c886093b800899bd535185fc Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 09:29:57 +1200 Subject: [PATCH 03/12] Add barebone selector logic to change between orgs --- .../src/components/multiview/Selector.tsx | 30 +++++++++++++++++-- .../react/src/routes/multiview/multiview.tsx | 7 ++++- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx index aa6fab29d..58332f45c 100644 --- a/packages/react/src/components/multiview/Selector.tsx +++ b/packages/react/src/components/multiview/Selector.tsx @@ -1,7 +1,11 @@ +import { useState } from "react"; import { DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, DropdownMenuTrigger, } from "@radix-ui/react-dropdown-menu"; +import { defaultOrgs } from "../../store/org"; // I need a way to get a list of data containing the option name // based on the option selected, a list of current streams should be displayed @@ -14,10 +18,30 @@ import { * - all vtubers */ +// temporarily we will just get the favourites option + export function Selector() { + // create a mock favourites object as an org + const Favorites: Org = { + name: "Favorites", + }; + // based on what the selection is -> use different methods to render title card? + const [currentTab, setCurrentTab] = useState(Favorites); + return ( - - Favourites - +
+ + {currentTab.name} + + {[Favorites, ...defaultOrgs].map((org) => { + return ( + setCurrentTab(org)}> + {org.name} + + ); + })} + + +
); } diff --git a/packages/react/src/routes/multiview/multiview.tsx b/packages/react/src/routes/multiview/multiview.tsx index 05e3cd5ca..9673de652 100644 --- a/packages/react/src/routes/multiview/multiview.tsx +++ b/packages/react/src/routes/multiview/multiview.tsx @@ -1,3 +1,5 @@ +import { Selector } from "@/components/multiview/Selector"; +import { useFavorites } from "@/services/user.service"; import { Helmet } from "react-helmet-async"; // multiview skeleton @@ -5,12 +7,15 @@ import { Helmet } from "react-helmet-async"; // grid page for drag and drop export function Multiview() { + // remember current selection + const favorites = useFavorites(); + return ( <> Multiview - Holodex -
Placeholder
+ ); } From c018ce3d25b8e6d73b8a66b31b2e7519a3fa8bab Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 09:55:20 +1200 Subject: [PATCH 04/12] Format selector and add selection logic --- .../react/src/components/multiview/Selector.tsx | 14 ++++++++++---- packages/react/src/routes/multiview/multiview.tsx | 4 +++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx index 58332f45c..ab1b3d6a4 100644 --- a/packages/react/src/components/multiview/Selector.tsx +++ b/packages/react/src/components/multiview/Selector.tsx @@ -4,7 +4,7 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from "@radix-ui/react-dropdown-menu"; +} from "@/shadcn/ui/dropdown-menu"; import { defaultOrgs } from "../../store/org"; // I need a way to get a list of data containing the option name @@ -31,11 +31,17 @@ export function Selector() { return (
- {currentTab.name} - + + {currentTab.name} +
+ + {[Favorites, ...defaultOrgs].map((org) => { return ( - setCurrentTab(org)}> + setCurrentTab(org)} + > {org.name} ); diff --git a/packages/react/src/routes/multiview/multiview.tsx b/packages/react/src/routes/multiview/multiview.tsx index 9673de652..fdc35c9c8 100644 --- a/packages/react/src/routes/multiview/multiview.tsx +++ b/packages/react/src/routes/multiview/multiview.tsx @@ -15,7 +15,9 @@ export function Multiview() { Multiview - Holodex - +
+ +
); } From 935fac7a9a55711ab730ea5069def7f690f598d9 Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 10:17:44 +1200 Subject: [PATCH 05/12] Create placeholder for tool buttons and set up styling --- .../src/components/multiview/ToolButtonContainer.tsx | 5 +++++ packages/react/src/components/multiview/Toolbar.tsx | 8 ++++---- packages/react/src/routes/multiview/multiview.tsx | 8 ++------ 3 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 packages/react/src/components/multiview/ToolButtonContainer.tsx diff --git a/packages/react/src/components/multiview/ToolButtonContainer.tsx b/packages/react/src/components/multiview/ToolButtonContainer.tsx new file mode 100644 index 000000000..35f767eac --- /dev/null +++ b/packages/react/src/components/multiview/ToolButtonContainer.tsx @@ -0,0 +1,5 @@ +export function ToolButtonContainer() { + return ( +
placeholder for buttons
+ ); +} diff --git a/packages/react/src/components/multiview/Toolbar.tsx b/packages/react/src/components/multiview/Toolbar.tsx index 533a4e033..2c5c3d67e 100644 --- a/packages/react/src/components/multiview/Toolbar.tsx +++ b/packages/react/src/components/multiview/Toolbar.tsx @@ -1,11 +1,11 @@ import { Selector } from "./Selector"; +import { ToolButtonContainer } from "./ToolButtonContainer"; export function Toolbar() { return ( -
-
- -
+
+ +
); } diff --git a/packages/react/src/routes/multiview/multiview.tsx b/packages/react/src/routes/multiview/multiview.tsx index fdc35c9c8..dc1baf002 100644 --- a/packages/react/src/routes/multiview/multiview.tsx +++ b/packages/react/src/routes/multiview/multiview.tsx @@ -1,5 +1,4 @@ -import { Selector } from "@/components/multiview/Selector"; -import { useFavorites } from "@/services/user.service"; +import { Toolbar } from "@/components/multiview/Toolbar"; import { Helmet } from "react-helmet-async"; // multiview skeleton @@ -7,16 +6,13 @@ import { Helmet } from "react-helmet-async"; // grid page for drag and drop export function Multiview() { - // remember current selection - const favorites = useFavorites(); - return ( <> Multiview - Holodex
- +
); From 3bd8030de219df66c5fe921d9fa22b9d1e0f5042 Mon Sep 17 00:00:00 2001 From: Vincent <87549152+trash-lobster@users.noreply.github.com> Date: Mon, 9 Sep 2024 10:20:20 +1200 Subject: [PATCH 06/12] Add basic multiview placeholder (#2) * Create basic components * Add barebone selector logic to change between orgs * Format selector and add selection logic * Create placeholder for tool buttons and set up styling --- .../src/components/multiview/Selector.tsx | 53 +++++++++++++++++++ .../multiview/ToolButtonContainer.tsx | 5 ++ .../src/components/multiview/Toolbar.tsx | 11 ++++ .../react/src/routes/multiview/multiview.tsx | 5 +- 4 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/components/multiview/Selector.tsx create mode 100644 packages/react/src/components/multiview/ToolButtonContainer.tsx create mode 100644 packages/react/src/components/multiview/Toolbar.tsx diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx new file mode 100644 index 000000000..ab1b3d6a4 --- /dev/null +++ b/packages/react/src/components/multiview/Selector.tsx @@ -0,0 +1,53 @@ +import { useState } from "react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/shadcn/ui/dropdown-menu"; +import { defaultOrgs } from "../../store/org"; + +// I need a way to get a list of data containing the option name +// based on the option selected, a list of current streams should be displayed +// we need a current selection to hold the data +/** + * Options beyond the existing orgs: + * - favorites + * - youtube url + * - twitch url + * - all vtubers + */ + +// temporarily we will just get the favourites option + +export function Selector() { + // create a mock favourites object as an org + const Favorites: Org = { + name: "Favorites", + }; + // based on what the selection is -> use different methods to render title card? + const [currentTab, setCurrentTab] = useState(Favorites); + + return ( +
+ + + {currentTab.name} +
+ + + {[Favorites, ...defaultOrgs].map((org) => { + return ( + setCurrentTab(org)} + > + {org.name} + + ); + })} + + +
+ ); +} diff --git a/packages/react/src/components/multiview/ToolButtonContainer.tsx b/packages/react/src/components/multiview/ToolButtonContainer.tsx new file mode 100644 index 000000000..35f767eac --- /dev/null +++ b/packages/react/src/components/multiview/ToolButtonContainer.tsx @@ -0,0 +1,5 @@ +export function ToolButtonContainer() { + return ( +
placeholder for buttons
+ ); +} diff --git a/packages/react/src/components/multiview/Toolbar.tsx b/packages/react/src/components/multiview/Toolbar.tsx new file mode 100644 index 000000000..2c5c3d67e --- /dev/null +++ b/packages/react/src/components/multiview/Toolbar.tsx @@ -0,0 +1,11 @@ +import { Selector } from "./Selector"; +import { ToolButtonContainer } from "./ToolButtonContainer"; + +export function Toolbar() { + return ( +
+ + +
+ ); +} diff --git a/packages/react/src/routes/multiview/multiview.tsx b/packages/react/src/routes/multiview/multiview.tsx index 05e3cd5ca..dc1baf002 100644 --- a/packages/react/src/routes/multiview/multiview.tsx +++ b/packages/react/src/routes/multiview/multiview.tsx @@ -1,3 +1,4 @@ +import { Toolbar } from "@/components/multiview/Toolbar"; import { Helmet } from "react-helmet-async"; // multiview skeleton @@ -10,7 +11,9 @@ export function Multiview() { Multiview - Holodex -
Placeholder
+
+ +
); } From ae6d2b00b56404036f915c507057f8d38713868d Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 15:22:14 +1200 Subject: [PATCH 07/12] Get live channel on org change to display icon and styling --- .../components/multiview/LiveChannelIcon.tsx | 23 ++++++++++ .../src/components/multiview/Selector.tsx | 43 ++++++++++++++++--- .../multiview/ToolButtonContainer.tsx | 4 +- .../src/components/multiview/Toolbar.tsx | 10 +++-- .../react/src/routes/multiview/multiview.tsx | 5 ++- 5 files changed, 72 insertions(+), 13 deletions(-) create mode 100644 packages/react/src/components/multiview/LiveChannelIcon.tsx diff --git a/packages/react/src/components/multiview/LiveChannelIcon.tsx b/packages/react/src/components/multiview/LiveChannelIcon.tsx new file mode 100644 index 000000000..4b11432a2 --- /dev/null +++ b/packages/react/src/components/multiview/LiveChannelIcon.tsx @@ -0,0 +1,23 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/ui/avatar"; + +interface LiveChannelIconProps { + imageLink?: string; + channelName?: string; +} + +export function LiveChannelIcon({ + imageLink, + channelName, +}: LiveChannelIconProps) { + return ( +
+ + + CN + +
+ 12hr +
+
+ ); +} diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx index ab1b3d6a4..7a8f65423 100644 --- a/packages/react/src/components/multiview/Selector.tsx +++ b/packages/react/src/components/multiview/Selector.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { DropdownMenu, DropdownMenuContent, @@ -6,6 +6,9 @@ import { DropdownMenuTrigger, } from "@/shadcn/ui/dropdown-menu"; import { defaultOrgs } from "../../store/org"; +import { useLive } from "@/services/live.service"; +import { LiveChannelIcon } from "./LiveChannelIcon"; +import { cn } from "../../lib/utils"; // I need a way to get a list of data containing the option name // based on the option selected, a list of current streams should be displayed @@ -26,13 +29,28 @@ export function Selector() { name: "Favorites", }; // based on what the selection is -> use different methods to render title card? - const [currentTab, setCurrentTab] = useState(Favorites); + const [currentOrg, setCurrentOrg] = useState(Favorites); + const [liveChannels, setLiveChannels] = useState([]); + const channels = useLive({ org: currentOrg.name }); + + useEffect(() => { + const data = channels.data; + if (!data) return; + setLiveChannels(data); + console.log(data); + }, [channels.data]); + + const onSelect = (org: Org) => { + if (org.name === currentOrg.name) return; + setCurrentOrg(org); + setLiveChannels([]); + }; return ( -
+
- - {currentTab.name} + + {currentOrg.name}
@@ -40,7 +58,7 @@ export function Selector() { return ( setCurrentTab(org)} + onClick={() => onSelect(org)} > {org.name} @@ -48,6 +66,19 @@ export function Selector() { })} +
+ {liveChannels.map((channel) => { + return ( + + ); + })} +
); } diff --git a/packages/react/src/components/multiview/ToolButtonContainer.tsx b/packages/react/src/components/multiview/ToolButtonContainer.tsx index 35f767eac..6ccbe0785 100644 --- a/packages/react/src/components/multiview/ToolButtonContainer.tsx +++ b/packages/react/src/components/multiview/ToolButtonContainer.tsx @@ -1,5 +1,3 @@ export function ToolButtonContainer() { - return ( -
placeholder for buttons
- ); + return
placeholder for buttons
; } diff --git a/packages/react/src/components/multiview/Toolbar.tsx b/packages/react/src/components/multiview/Toolbar.tsx index 2c5c3d67e..2df6b941b 100644 --- a/packages/react/src/components/multiview/Toolbar.tsx +++ b/packages/react/src/components/multiview/Toolbar.tsx @@ -3,9 +3,13 @@ import { ToolButtonContainer } from "./ToolButtonContainer"; export function Toolbar() { return ( -
- - +
+
+ +
+
+ +
); } diff --git a/packages/react/src/routes/multiview/multiview.tsx b/packages/react/src/routes/multiview/multiview.tsx index dc1baf002..0cd14e053 100644 --- a/packages/react/src/routes/multiview/multiview.tsx +++ b/packages/react/src/routes/multiview/multiview.tsx @@ -11,7 +11,10 @@ export function Multiview() { Multiview - Holodex -
+
From 58cae4b74b0c226957fe159a3aec440f33e4ad9b Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 15:25:11 +1200 Subject: [PATCH 08/12] Add key to list rendering --- packages/react/src/components/multiview/Selector.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx index 7a8f65423..5dc3bba32 100644 --- a/packages/react/src/components/multiview/Selector.tsx +++ b/packages/react/src/components/multiview/Selector.tsx @@ -73,6 +73,7 @@ export function Selector() { {liveChannels.map((channel) => { return ( From 6594df7f09a75ec3a9e2647edabf4781426cdf86 Mon Sep 17 00:00:00 2001 From: Vincent <87549152+trash-lobster@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:27:22 +1200 Subject: [PATCH 09/12] Next multiview (#3) * Create basic components * Add barebone selector logic to change between orgs * Format selector and add selection logic * Create placeholder for tool buttons and set up styling From eaaf0e3b48cb4ae540a469009cfe86e3cd5198c7 Mon Sep 17 00:00:00 2001 From: Vincent <87549152+trash-lobster@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:36:10 +1200 Subject: [PATCH 10/12] Add streamer icons (#4) * Create basic components * Add barebone selector logic to change between orgs * Format selector and add selection logic * Create placeholder for tool buttons and set up styling * Get live channel on org change to display icon and styling * Add key to list rendering --- .../components/multiview/LiveChannelIcon.tsx | 23 ++++++++++ .../src/components/multiview/Selector.tsx | 44 ++++++++++++++++--- .../multiview/ToolButtonContainer.tsx | 4 +- .../src/components/multiview/Toolbar.tsx | 10 +++-- .../react/src/routes/multiview/multiview.tsx | 5 ++- 5 files changed, 73 insertions(+), 13 deletions(-) create mode 100644 packages/react/src/components/multiview/LiveChannelIcon.tsx diff --git a/packages/react/src/components/multiview/LiveChannelIcon.tsx b/packages/react/src/components/multiview/LiveChannelIcon.tsx new file mode 100644 index 000000000..4b11432a2 --- /dev/null +++ b/packages/react/src/components/multiview/LiveChannelIcon.tsx @@ -0,0 +1,23 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/ui/avatar"; + +interface LiveChannelIconProps { + imageLink?: string; + channelName?: string; +} + +export function LiveChannelIcon({ + imageLink, + channelName, +}: LiveChannelIconProps) { + return ( +
+ + + CN + +
+ 12hr +
+
+ ); +} diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx index ab1b3d6a4..5dc3bba32 100644 --- a/packages/react/src/components/multiview/Selector.tsx +++ b/packages/react/src/components/multiview/Selector.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { DropdownMenu, DropdownMenuContent, @@ -6,6 +6,9 @@ import { DropdownMenuTrigger, } from "@/shadcn/ui/dropdown-menu"; import { defaultOrgs } from "../../store/org"; +import { useLive } from "@/services/live.service"; +import { LiveChannelIcon } from "./LiveChannelIcon"; +import { cn } from "../../lib/utils"; // I need a way to get a list of data containing the option name // based on the option selected, a list of current streams should be displayed @@ -26,13 +29,28 @@ export function Selector() { name: "Favorites", }; // based on what the selection is -> use different methods to render title card? - const [currentTab, setCurrentTab] = useState(Favorites); + const [currentOrg, setCurrentOrg] = useState(Favorites); + const [liveChannels, setLiveChannels] = useState([]); + const channels = useLive({ org: currentOrg.name }); + + useEffect(() => { + const data = channels.data; + if (!data) return; + setLiveChannels(data); + console.log(data); + }, [channels.data]); + + const onSelect = (org: Org) => { + if (org.name === currentOrg.name) return; + setCurrentOrg(org); + setLiveChannels([]); + }; return ( -
+
- - {currentTab.name} + + {currentOrg.name}
@@ -40,7 +58,7 @@ export function Selector() { return ( setCurrentTab(org)} + onClick={() => onSelect(org)} > {org.name} @@ -48,6 +66,20 @@ export function Selector() { })} +
+ {liveChannels.map((channel) => { + return ( + + ); + })} +
); } diff --git a/packages/react/src/components/multiview/ToolButtonContainer.tsx b/packages/react/src/components/multiview/ToolButtonContainer.tsx index 35f767eac..6ccbe0785 100644 --- a/packages/react/src/components/multiview/ToolButtonContainer.tsx +++ b/packages/react/src/components/multiview/ToolButtonContainer.tsx @@ -1,5 +1,3 @@ export function ToolButtonContainer() { - return ( -
placeholder for buttons
- ); + return
placeholder for buttons
; } diff --git a/packages/react/src/components/multiview/Toolbar.tsx b/packages/react/src/components/multiview/Toolbar.tsx index 2c5c3d67e..2df6b941b 100644 --- a/packages/react/src/components/multiview/Toolbar.tsx +++ b/packages/react/src/components/multiview/Toolbar.tsx @@ -3,9 +3,13 @@ import { ToolButtonContainer } from "./ToolButtonContainer"; export function Toolbar() { return ( -
- - +
+
+ +
+
+ +
); } diff --git a/packages/react/src/routes/multiview/multiview.tsx b/packages/react/src/routes/multiview/multiview.tsx index dc1baf002..0cd14e053 100644 --- a/packages/react/src/routes/multiview/multiview.tsx +++ b/packages/react/src/routes/multiview/multiview.tsx @@ -11,7 +11,10 @@ export function Multiview() { Multiview - Holodex -
+
From 203e18fe5fa95fb3cd8c032fa6f0c12b64c1f56e Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 17:15:27 +1200 Subject: [PATCH 11/12] Create live channel detail hover card and attach hover logic --- .../src/components/multiview/LiveChannel.tsx | 42 ++++++++++++++++ .../components/multiview/LiveChannelIcon.tsx | 10 +++- .../components/multiview/LiveStreamInfo.tsx | 48 +++++++++++++++++++ .../src/components/multiview/Selector.tsx | 32 +++++-------- 4 files changed, 112 insertions(+), 20 deletions(-) create mode 100644 packages/react/src/components/multiview/LiveChannel.tsx create mode 100644 packages/react/src/components/multiview/LiveStreamInfo.tsx diff --git a/packages/react/src/components/multiview/LiveChannel.tsx b/packages/react/src/components/multiview/LiveChannel.tsx new file mode 100644 index 000000000..bc0468fee --- /dev/null +++ b/packages/react/src/components/multiview/LiveChannel.tsx @@ -0,0 +1,42 @@ +// import { useChannel } from "@/services/channel.service"; +import { LiveChannelIcon } from "./LiveChannelIcon"; +import { LiveStreamInfo } from "./LiveStreamInfo"; +import { useState } from "react"; + +interface LiveChannelProps { + channelImgLink?: string; + channelName?: string; + altText?: string; + streamTitle?: string; + topicId?: string; + videoId?: string; +} + +export function LiveChannel({ + channelImgLink, + channelName, + altText, + streamTitle, + topicId, + videoId, +}: LiveChannelProps) { + const [isHover, setIsHover] = useState(false); + + return ( +
+ + +
+ ); +} diff --git a/packages/react/src/components/multiview/LiveChannelIcon.tsx b/packages/react/src/components/multiview/LiveChannelIcon.tsx index 4b11432a2..0b0f29f5a 100644 --- a/packages/react/src/components/multiview/LiveChannelIcon.tsx +++ b/packages/react/src/components/multiview/LiveChannelIcon.tsx @@ -1,16 +1,24 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/ui/avatar"; +import { Dispatch, SetStateAction } from "react"; interface LiveChannelIconProps { imageLink?: string; channelName?: string; + setIsHover: Dispatch>; } export function LiveChannelIcon({ imageLink, channelName, + setIsHover, }: LiveChannelIconProps) { return ( -
+
setIsHover(true)} + onMouseLeave={() => setIsHover(false)} + > CN diff --git a/packages/react/src/components/multiview/LiveStreamInfo.tsx b/packages/react/src/components/multiview/LiveStreamInfo.tsx new file mode 100644 index 000000000..5176a16c1 --- /dev/null +++ b/packages/react/src/components/multiview/LiveStreamInfo.tsx @@ -0,0 +1,48 @@ +import { cn } from "@/lib/utils"; + +interface LiveStreamInfoProps { + thumbnailLink?: string; + altText?: string; + streamTitle?: string; + channelName?: string; + topicId?: string; + isVisible: boolean; +} + +export function LiveStreamInfo({ + thumbnailLink, + altText, + streamTitle, + channelName, + topicId, + isVisible, +}: LiveStreamInfoProps) { + return ( +
+
+ {altText} +

+ {topicId} +

+
+
+

{streamTitle}

+

{channelName}

+

status

+
+
+ ); +} diff --git a/packages/react/src/components/multiview/Selector.tsx b/packages/react/src/components/multiview/Selector.tsx index 5dc3bba32..227e24423 100644 --- a/packages/react/src/components/multiview/Selector.tsx +++ b/packages/react/src/components/multiview/Selector.tsx @@ -7,22 +7,14 @@ import { } from "@/shadcn/ui/dropdown-menu"; import { defaultOrgs } from "../../store/org"; import { useLive } from "@/services/live.service"; -import { LiveChannelIcon } from "./LiveChannelIcon"; +import { LiveChannel } from "./LiveChannel"; import { cn } from "../../lib/utils"; -// I need a way to get a list of data containing the option name -// based on the option selected, a list of current streams should be displayed -// we need a current selection to hold the data /** - * Options beyond the existing orgs: - * - favorites - * - youtube url - * - twitch url - * - all vtubers + * ToDos: + * - select favourites */ -// temporarily we will just get the favourites option - export function Selector() { // create a mock favourites object as an org const Favorites: Org = { @@ -31,14 +23,14 @@ export function Selector() { // based on what the selection is -> use different methods to render title card? const [currentOrg, setCurrentOrg] = useState(Favorites); const [liveChannels, setLiveChannels] = useState([]); - const channels = useLive({ org: currentOrg.name }); + const liveStreams = useLive({ org: currentOrg.name }); useEffect(() => { - const data = channels.data; + const data = liveStreams.data; if (!data) return; setLiveChannels(data); console.log(data); - }, [channels.data]); + }, [liveStreams.data]); const onSelect = (org: Org) => { if (org.name === currentOrg.name) return; @@ -70,12 +62,14 @@ export function Selector() { id="live-channel-container" className={cn("flex min-h-12 flex-nowrap gap-2 overflow-scroll", {})} > - {liveChannels.map((channel) => { + {liveChannels.map((live) => { return ( - ); })} From b231a359c88efd2c55cc82dd08fd868c7ce642d4 Mon Sep 17 00:00:00 2001 From: Vincent Sit Date: Mon, 9 Sep 2024 17:21:45 +1200 Subject: [PATCH 12/12] Fix missing symbols --- packages/react/src/components/multiview/LiveChannelIcon.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/components/multiview/LiveChannelIcon.tsx b/packages/react/src/components/multiview/LiveChannelIcon.tsx index 37c258aa6..0b0f29f5a 100644 --- a/packages/react/src/components/multiview/LiveChannelIcon.tsx +++ b/packages/react/src/components/multiview/LiveChannelIcon.tsx @@ -19,7 +19,6 @@ export function LiveChannelIcon({ onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} > -}: LiveChannelIconProps) { CN