Merge pull request #5 from trash-lobster/next-multiview

Add hover card for stream details

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 (
+    <div>
+      <LiveChannelIcon
+        imageLink={channelImgLink}
+        channelName={channelName}
+        setIsHover={setIsHover}
+      />
+      <LiveStreamInfo
+        thumbnailLink={`https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`}
+        altText={altText}
+        streamTitle={streamTitle}
+        channelName={channelName}
+        topicId={topicId}
+        isVisible={isHover}
+      />
+    </div>
+  );
+}

packages/react/src/components/multiview/LiveChannelIcon.tsx

@@ -1,16 +1,25 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/ui/avatar";
+import { Dispatch, SetStateAction } from "react";
 
 interface LiveChannelIconProps {
   imageLink?: string;
   channelName?: string;
+  setIsHover: Dispatch<SetStateAction<boolean>>;
 }
 
 export function LiveChannelIcon({
   imageLink,
   channelName,
+  setIsHover,
 }: LiveChannelIconProps) {
   return (
-    <div draggable="true" className="relative">
+    <div
+      draggable="true"
+      className="relative cursor-pointer"
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+    >
+}: LiveChannelIconProps) {
       <Avatar className="size-12">
         <AvatarImage src={imageLink} alt={`${channelName} user icon`} />
         <AvatarFallback>CN</AvatarFallback>

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 (
+    <div
+      className={cn(
+        // currently hardcoded a translate value, will investigate to find a better way
+        " absolute flex translate-x-[-118px] translate-y-2 flex-col rounded-md bg-base-6 opacity-80",
+        {
+          visible: isVisible,
+          invisible: !isVisible,
+        },
+      )}
+    >
+      <div className="relative flex w-full flex-col items-center px-4 py-2">
+        <img
+          className="h-auto w-64 rounded-lg"
+          src={thumbnailLink}
+          alt={altText}
+        />
+        <p className="absolute left-4 top-2 z-30 bg-black px-1 py-0.5 text-white opacity-80">
+          {topicId}
+        </p>
+      </div>
+      <div>
+        <p>{streamTitle}</p>
+        <p>{channelName}</p>
+        <p>status</p>
+      </div>
+    </div>
+  );
+}

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<Live[]>([]);
-  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 (
-            <LiveChannelIcon
-              key={channel.id}
-              imageLink={channel.channel.photo}
-              channelName={channel.channel.name}
+            <LiveChannel
+              key={live.id}
+              channelImgLink={live.channel.photo}
+              channelName={live.channel.name}
+              videoId={live.id}
+              topicId={live.topic_id!}
             />
           );
         })}