Fix/ws multiple tabs error (#112)

Added Spaces to muzer
WS support for spaces

next-app/components/HomeView.tsx

@@ -3,6 +3,7 @@ import { toast } from "react-toastify";
 import { Appbar } from "@/components/Appbar";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import Image from "next/image";
 import {
   Dialog,
   DialogContent,
@@ -13,7 +14,7 @@ import {
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import CardSkeleton from "./ui/cardSkeleton";
-import Image from "next/image";
+
 
 
 interface Space {
@@ -141,8 +142,10 @@ export default function HomeView() {
                   </CardHeader>
                   <CardContent className="overflow-visible flex flex-col justify-center  items-center  py-2">
                     <Image
+                      width={450}
+                      height={300}
                       alt="Card background"
-                      className="object-cover w-[28rem]   rounded-3xl"
+                      className="object-cover w-[28rem] rounded-3xl"
                       src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                     />
                     <div className="flex justify-between space-x-6">

next-app/components/OldStreamView.tsx

@@ -13,6 +13,7 @@ import { YT_REGEX } from "../lib/utils";
 import YouTubePlayer from "youtube-player";
 import { useSession } from "next-auth/react";
 import type { Session } from "next-auth";
+import Image from "next/image";
 import {
   Dialog,
   DialogContent,
@@ -22,7 +23,8 @@ import {
   DialogFooter,
 } from "@/components/ui/dialog";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
-import Image from "next/image";
+
+
 
 interface Video {
   id: string;
@@ -389,6 +391,8 @@ export default function StreamView({
                   >
                     <CardContent className="p-4 flex flex-col md:flex-row md:space-x-3">
                       <Image
+                      width={160}
+                      height={160}
                         src={video.smallImg}
                         alt={`Thumbnail for ${video.title}`}
                         className="md:w-40 mb-5 md:mb-0 object-cover rounded-md"

next-app/components/StreamView/NowPlaying.tsx

@@ -6,6 +6,7 @@ import { Play } from "lucide-react";
 import YouTubePlayer from "youtube-player";
 import Image from "next/image";
 
+
 type Props = {
   playVideo: boolean;
   currentVideo: Video | null;
@@ -60,6 +61,8 @@ export default function NowPlaying({
               ) : (
                 <>
                   <Image
+                    height={288}
+                    width={288}
                     alt={currentVideo.bigImg}
                     src={currentVideo.bigImg}
                     className="h-72 w-full rounded object-cover"

next-app/components/StreamView/Queue.tsx

@@ -98,9 +98,11 @@ export default function Queue({ queue, isCreator, creatorId, userId,spaceId }: P
             <Card key={video.id} className="">
               <CardContent className="flex items-center space-x-4 p-4">
                 <Image
+                height={80}
+                width={128}
                   src={video.smallImg}
                   alt={`Thumbnail for ${video.title}`}
-                  className="w-30 h-20 rounded object-cover"
+                  className="w-32 h-20 rounded object-cover"
                 />
                 <div className="flex-grow">
                   <h3 className="font-semibold">{video.title}</h3>

next-app/components/StreamView/index.tsx

@@ -36,9 +36,10 @@ export default function StreamView({
     if (socket) {
       socket.onmessage = async (event) => {
         const { type, data } = JSON.parse(event.data) || {};
-        if (type === "new-stream") {
+        if (type === `new-stream/${spaceId}`) {
+          console.log(type)
           addToQueue(data);
-        } else if (type === "new-vote") {
+        } else if (type === `new-vote/${spaceId}`) {
           setQueue((prev) => {
             return prev
               .map((v) => {
@@ -59,13 +60,13 @@ export default function StreamView({
         } else if (type === "error") {
           enqueueToast("error", data.message);
           setLoading(false);
-        } else if (type === "play-next") {
+        } else if (type === `play-next/${spaceId}`) {
           await refreshStreams();
-        } else if (type === "remove-song") {
+        } else if (type === `remove-song/${spaceId}`) {
           setQueue((prev) => {
             return prev.filter((stream) => stream.id !== data.streamId);
           });
-        } else if (type === "empty-queue") {
+        } else if (type === `empty-queue/${spaceId}`) {
           setQueue([]);
         }
       };

next-app/context/socket-context.tsx

@@ -32,6 +32,7 @@ export const SocketContextProvider = ({ children }: PropsWithChildren) => {
   const [loading, setLoading] = useState(true);
   const session = useSession();
 
+
   useEffect(() => {
     if (!socket && session.data?.user.id) {
       const ws = new WebSocket(process.env.NEXT_PUBLIC_WSS_URL as string);

next-app/next.config.mjs

@@ -2,6 +2,9 @@
 const nextConfig = {
     reactStrictMode: false,
     output: 'standalone',
+    images: {
+        domains: ['images.unsplash.com','i.ytimg.com'],
+      },
 };
 
 export default nextConfig;