fix: when multi-streaming kick button opens twitch #15 (#16)

* fix: kick button opening twitch stream when multistreaming #15

* chore(extension): bump version to 1.2.3 in package.json and constants.ts

* refactor(extension): enhance opening stream logic

* refactor: remove bad import

* refactor: type narrow some types for better safety

Author: aL0NEW0LF

apps/extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lgamila/extension",
   "displayName": "LGamila Live",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "This extension shows you a real-time list of all Moroccan Twitch and Kick streamers who are currently live.",
   "author": "Stormix <hello@stormix.dev>",
   "scripts": {

apps/extension/src/components/molecules/streamer-card.tsx

@@ -1,13 +1,13 @@
-import { Eye, EyeOff } from 'lucide-react';
-import { FaRegStar, FaStar } from 'react-icons/fa6';
-import { FiTwitch } from 'react-icons/fi';
-import { GoDotFill } from 'react-icons/go';
-import { RiKickLine } from 'react-icons/ri';
-import type { Streamer } from '@/lib/types';
-import { cn } from '@/lib/utils';
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
-import { Button } from '../ui/button';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { Eye, EyeOff } from "lucide-react";
+import { FaRegStar, FaStar } from "react-icons/fa6";
+import { FiTwitch } from "react-icons/fi";
+import { GoDotFill } from "react-icons/go";
+import { RiKickLine } from "react-icons/ri";
+import type { Streamer, Platform } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 const streamerDescription = (streamer: Streamer) => {
   if (streamer.category) {
@@ -17,7 +17,7 @@ const streamerDescription = (streamer: Streamer) => {
     return `${streamer.viewerCount} viewers`;
   }
 
-  return '';
+  return "";
 };
 
 export function StreamerCard({
@@ -36,7 +36,7 @@ export function StreamerCard({
   const StarIcon = isFavorite ? FaStar : FaRegStar;
   const BlockIcon = isBlocked ? EyeOff : Eye;
 
-  const onClick = () => {
+  const openStreamer = (selectedPlatform?: Platform) => {
     const twitchUrl = streamer.twitchUsername
       ? `https://www.twitch.tv/${streamer.twitchUsername}`
       : null;
@@ -49,20 +49,32 @@ export function StreamerCard({
     }
 
     if (streamer.isLive) {
-      window.open(
-        streamer.livePlatform === 'twitch' ? twitchUrl : kickUrl,
-        '_blank'
-      );
+      if (streamer.livePlatforms?.length > 1) {
+        const url =
+          selectedPlatform === "twitch"
+            ? twitchUrl ?? kickUrl
+            : selectedPlatform === "kick"
+              ? kickUrl ?? twitchUrl
+              : twitchUrl ?? kickUrl;
+        if (url) window.open(url, "_blank", "noopener,noreferrer");
+      } else {
+        const active =
+          streamer.livePlatforms?.[0] ?? streamer.livePlatform ?? null;
+        const url =
+          active === "twitch" ? twitchUrl ?? kickUrl : kickUrl ?? twitchUrl;
+        if (url) window.open(url, "_blank", "noopener,noreferrer");
+      }
     } else {
-      window.open(twitchUrl || kickUrl, '_blank');
+      const url = twitchUrl ?? kickUrl;
+      if (url) window.open(url, "_blank", "noopener,noreferrer");
     }
   };
   return (
     <div
       className={cn(
-        'flex flex-row gap-2 items-center transition-opacity duration-300',
+        "flex flex-row gap-2 items-center transition-opacity duration-300",
         {
-          'opacity-30': !streamer.isLive,
+          "opacity-30": !streamer.isLive,
         }
       )}
     >
@@ -77,7 +89,7 @@ export function StreamerCard({
             </div>
           </TooltipTrigger>
           <TooltipContent>
-            {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+            {isFavorite ? "Remove from favorites" : "Add to favorites"}
           </TooltipContent>
         </Tooltip>
         <Tooltip>
@@ -90,7 +102,7 @@ export function StreamerCard({
             </div>
           </TooltipTrigger>
           <TooltipContent>
-            {isBlocked ? 'Show streamer' : 'Hide streamer'}
+            {isBlocked ? "Show streamer" : "Hide streamer"}
           </TooltipContent>
         </Tooltip>
       </div>
@@ -100,7 +112,7 @@ export function StreamerCard({
           <TooltipTrigger>
             <div
               className="flex flex-row gap-2 justify-start items-center"
-              onClick={onClick}
+              onClick={() => openStreamer()}
             >
               <Avatar>
                 <AvatarImage src={streamer.avatarUrl} />
@@ -124,32 +136,32 @@ export function StreamerCard({
           <TooltipContent>{streamer.title ?? streamer.name}</TooltipContent>
         </Tooltip>
       </div>
-      <div className={cn('flex flex-row gap-1 items-center px-4 w-fit')}>
+      <div className={cn("flex flex-row gap-1 items-center px-4 w-fit")}>
         {!streamer.livePlatforms && streamer.livePlatform && (
           <Button
             icon={
-              streamer.livePlatform === 'twitch' ? <FiTwitch /> : <RiKickLine />
+              streamer.livePlatform === "twitch" ? <FiTwitch /> : <RiKickLine />
             }
-            onClick={onClick}
-            variant={streamer.isLive ? 'outline' : 'ghost'}
+            onClick={() => openStreamer()}
+            variant={streamer.isLive ? "outline" : "ghost"}
           >
             <span className="text-xs">{streamer.livePlatform}</span>
           </Button>
         )}
-        {streamer.livePlatforms?.map((platform) => (
+        {streamer.livePlatforms?.map((platform: Platform) => (
           <Button
-            icon={platform === 'twitch' ? <FiTwitch /> : <RiKickLine />}
+            icon={platform === "twitch" ? <FiTwitch /> : <RiKickLine />}
             key={platform}
-            onClick={onClick}
-            variant={streamer.isLive ? 'outline' : 'ghost'}
+            onClick={() => openStreamer(platform)}
+            variant={streamer.isLive ? "outline" : "ghost"}
           >
             {streamer.livePlatforms.length === 1 && (
               <span className="text-xs">{platform}</span>
             )}
           </Button>
         ))}
         {!streamer.isLive && (
-          <Button onClick={onClick} variant="ghost">
+          <Button onClick={() => openStreamer()} variant="ghost">
             <span className="text-xs">Offline</span>
           </Button>
         )}

apps/extension/src/lib/constants.ts

@@ -1,5 +1,5 @@
 export const APP_NAME = "LGamila Live";
-export const APP_VERSION = "1.2.2";
+export const APP_VERSION = "1.2.3";
 export const APP_DESCRIPTION =
   "This extension shows you a real-time list of all Moroccan Twitch and Kick streamers who are currently live.";
 export const APP_AUTHOR = "Stormix <hello@s.dev>";

apps/extension/src/lib/types.ts

@@ -9,7 +9,7 @@ export interface Streamer {
   avatarUrl: string;
 
   /** Twitch username, if they stream on Twitch */
-  twitchUsername: string;
+  twitchUsername: string | null;
 
   /** Kick username, if they stream on Kick */
   kickUsername: string | null;
@@ -18,10 +18,10 @@ export interface Streamer {
   isLive: boolean;
 
   /** Platform the streamer is currently live on, if any */
-  livePlatform: string | null;
+  livePlatform: Platform | null;
 
   /** Platforms the streamer is currently live on, if any */
-  livePlatforms: string[] | null;
+  livePlatforms: Platform[] | null;
 
   /** Current viewer count if live, 0 if offline */
   viewerCount: number;
@@ -48,8 +48,10 @@ export interface Settings {
 }
 
 export type SortOption =
-  | 'default'
-  | 'viewers-desc'
-  | 'viewers-asc'
-  | 'name-asc'
-  | 'name-desc';
+  | "default"
+  | "viewers-desc"
+  | "viewers-asc"
+  | "name-asc"
+  | "name-desc";
+
+export type Platform = "twitch" | "kick";