feat: implement plan-based feature access and limits for group music, covering max members, queue size, and chat, with client-side upgrade dialogs.

Author: thakurdotdev

client/src/Context/GroupMusicContext.jsx

@@ -1,6 +1,7 @@
 import { useSocket } from "@/Context/ChatContext"
 import { useProfile } from "@/Context/Context"
 import { ensureHttpsForDownloadUrls } from "@/Pages/Music/Common"
+import UpgradeDialog from "@/components/UpgradeDialog"
 import axios from "axios"
 import _ from "lodash"
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"
@@ -47,6 +48,11 @@ export function GroupMusicProvider({ children }) {
   const [isGroupModalOpen, setIsGroupModalOpen] = useState(false)
   const [connectionState, setConnectionState] = useState("disconnected")
   const [isRejoining, setIsRejoining] = useState(false)
+  const [upgradeDialog, setUpgradeDialog] = useState({
+    open: false,
+    feature: "default",
+    message: "",
+  })
 
   // Refs
   const syncIntervalRef = useRef(null)
@@ -251,6 +257,16 @@ export function GroupMusicProvider({ children }) {
     (song) => {
       if (!currentGroup?.id || !user) return
 
+      const maxQueueSize = currentGroup?.settings?.maxQueueSize || 3
+      if (queue.length >= maxQueueSize) {
+        setUpgradeDialog({
+          open: true,
+          feature: "queueLimit",
+          message: `Free plan allows only ${maxQueueSize} songs in queue. Upgrade to PRO for up to 50.`,
+        })
+        return
+      }
+
       const securedSong = ensureHttpsForDownloadUrls(song)
 
       socket.emit("add-to-queue", {
@@ -268,7 +284,7 @@ export function GroupMusicProvider({ children }) {
       setSearchResults([])
       toast.success("Added to queue")
     },
-    [currentGroup?.id, user, socket],
+    [currentGroup?.id, currentGroup?.settings?.maxQueueSize, user, socket, queue.length],
   )
 
   // Play song now (inserts at current position)
@@ -809,6 +825,22 @@ export function GroupMusicProvider({ children }) {
       setMessages((prev) => [...prev, message])
     })
 
+    socket.on("group-full", ({ maxMembers, message }) => {
+      setUpgradeDialog({
+        open: true,
+        feature: "groupMembers",
+        message: message || `Group is full (${maxMembers} members max)`,
+      })
+    })
+
+    socket.on("feature-locked", ({ feature, message }) => {
+      setUpgradeDialog({
+        open: true,
+        feature: feature || "default",
+        message: message || "This feature requires PRO plan",
+      })
+    })
+
     return () => {
       socket.off("sync-state")
       socket.off("queue-updated")
@@ -824,6 +856,8 @@ export function GroupMusicProvider({ children }) {
       socket.off("member-left")
       socket.off("group-disbanded")
       socket.off("new-message")
+      socket.off("group-full")
+      socket.off("feature-locked")
     }
   }, [
     socket,
@@ -920,6 +954,12 @@ export function GroupMusicProvider({ children }) {
     <GroupMusicContext.Provider value={contextValue}>
       {children}
       <audio ref={audioRef} />
+      <UpgradeDialog
+        open={upgradeDialog.open}
+        onOpenChange={(open) => setUpgradeDialog((prev) => ({ ...prev, open }))}
+        feature={upgradeDialog.feature}
+        customMessage={upgradeDialog.message}
+      />
     </GroupMusicContext.Provider>
   )
 }

client/src/Pages/Music/GroupMusic.jsx

@@ -2,6 +2,7 @@ import { useState, useCallback, useMemo, memo } from "react"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { useProfile } from "@/Context/Context"
 import { useGroupMusic } from "@/Context/GroupMusicContext"
+import { useFeatureAccess } from "@/hooks/useFeatureAccess"
 import { AnimatePresence, motion } from "framer-motion"
 import { cn } from "@/lib/utils"
 
@@ -21,6 +22,7 @@ import "./music.css"
 
 const GroupMusic = () => {
   const { user } = useProfile()
+  const { canChat, maxGroupMembers } = useFeatureAccess()
   const {
     currentGroup,
     isPlaying,
@@ -49,7 +51,6 @@ const GroupMusic = () => {
     joinGroup,
     leaveGroup,
     sendMessage,
-    // Queue functions
     playNow,
     addToQueue,
     skipSong,
@@ -62,13 +63,11 @@ const GroupMusic = () => {
 
   const [isQrCodeOpen, setQrCodeOpen] = useState(false)
 
-  // Active queue count = current song (if any) + upcoming songs
   const activeQueueCount = useMemo(
     () => (currentQueueItem ? 1 : 0) + upcomingQueue.length,
     [currentQueueItem, upcomingQueue.length],
   )
 
-  // Memoize callbacks
   const handleSearchChange = useCallback(
     (query) => {
       setSearchQuery(query)
@@ -85,9 +84,10 @@ const GroupMusic = () => {
   const handleCloseGroupModal = useCallback(() => setIsGroupModalOpen(false), [setIsGroupModalOpen])
   const handleOpenQueue = useCallback(() => setIsQueueOpen(true), [setIsQueueOpen])
 
-  // Memoize user id
   const userId = useMemo(() => user?.userid, [user?.userid])
 
+  const groupMaxMembers = currentGroup?.maxMembers || maxGroupMembers
+
   return (
     <div className="mx-auto max-w-7xl px-2 md:px-4 py-2 md:py-6">
       <motion.div
@@ -127,7 +127,6 @@ const GroupMusic = () => {
                   transition={{ duration: 0.4 }}
                   className="space-y-3 md:space-y-6"
                 >
-                  {/* Now Playing */}
                   <NowPlayingCard
                     currentSong={currentSong}
                     isPlaying={isPlaying}
@@ -146,20 +145,21 @@ const GroupMusic = () => {
                     queueCount={activeQueueCount}
                   />
 
-                  {/* Chat & Members Grid */}
                   <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 md:gap-6">
                     <div className="lg:col-span-2">
                       <GroupChat
                         messages={messages}
                         currentUserId={userId}
                         onSendMessage={sendMessage}
+                        locked={!canChat}
                       />
                     </div>
                     <div>
                       <MembersList
                         members={groupMembers}
                         currentUserId={userId}
                         createdBy={currentGroup?.createdBy}
+                        maxMembers={groupMaxMembers}
                       />
                     </div>
                   </div>
@@ -170,7 +170,6 @@ const GroupMusic = () => {
         </Card>
       </motion.div>
 
-      {/* Modals & Sheets */}
       {isGroupModalOpen && (
         <GroupModal
           isOpen={isGroupModalOpen}
@@ -197,7 +196,6 @@ const GroupMusic = () => {
         <QRCodeDialog isOpen={isQrCodeOpen} onClose={handleCloseQrCode} group={currentGroup} />
       )}
 
-      {/* Queue Sheet */}
       <QueueSheet />
     </div>
   )

client/src/Pages/Music/GroupMusic/GroupChat.jsx

@@ -1,13 +1,13 @@
-import { memo, useRef, useEffect, useCallback, useMemo } from "react"
+import { memo, useRef, useEffect, useCallback, useMemo, useState } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { MessageCircle, Send } from "lucide-react"
+import { MessageCircle, Send, Lock, Sparkles } from "lucide-react"
 import { cn } from "@/lib/utils"
+import UpgradeDialog from "@/components/UpgradeDialog"
 
-// Activity Message Component (system messages for queue events)
 const ActivityMessage = memo(({ msg }) => (
   <div className="flex justify-center py-1">
     <p className="text-xs text-muted-foreground/70 bg-green-950/30 px-3 py-1 rounded-full">
@@ -16,7 +16,6 @@ const ActivityMessage = memo(({ msg }) => (
   </div>
 ))
 
-// Chat Message Component
 const ChatMessage = memo(({ msg, isOwn }) => (
   <div className={cn("flex gap-2", isOwn ? "justify-end" : "justify-start")}>
     {!isOwn && (
@@ -49,15 +48,39 @@ const ChatMessage = memo(({ msg, isOwn }) => (
   </div>
 ))
 
-// Empty State
 const EmptyState = memo(() => (
   <div className="h-full flex flex-col items-center justify-center text-center p-4">
     <MessageCircle className="h-8 w-8 md:h-12 md:w-12 text-muted-foreground/30 mb-2" />
     <p className="text-muted-foreground text-xs md:text-sm">No messages yet</p>
   </div>
 ))
 
-// Messages List with activity message support
+const ChatLockedOverlay = memo(({ onUpgrade }) => (
+  <div
+    className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm rounded-lg cursor-pointer"
+    onClick={onUpgrade}
+  >
+    <div className="flex flex-col items-center gap-3 p-6 text-center">
+      <div className="p-3 rounded-full bg-primary/10">
+        <Lock className="h-6 w-6 text-primary" />
+      </div>
+      <div>
+        <p className="font-semibold text-sm">Group Chat is a PRO feature</p>
+        <p className="text-xs text-muted-foreground mt-1">
+          Tap to upgrade and chat with your group
+        </p>
+      </div>
+      <Button
+        size="sm"
+        className="gap-1.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white"
+      >
+        <Sparkles className="h-3.5 w-3.5" />
+        Upgrade to PRO
+      </Button>
+    </div>
+  </div>
+))
+
 const MessagesList = memo(({ messages, currentUserId }) => {
   if (messages.length === 0) {
     return <EmptyState />
@@ -76,12 +99,11 @@ const MessagesList = memo(({ messages, currentUserId }) => {
   )
 })
 
-// Main GroupChat Component
-const GroupChat = ({ messages, currentUserId, onSendMessage }) => {
+const GroupChat = ({ messages, currentUserId, onSendMessage, locked = false }) => {
   const inputRef = useRef(null)
   const scrollRef = useRef(null)
+  const [showUpgrade, setShowUpgrade] = useState(false)
 
-  // Auto-scroll to bottom on new messages
   useEffect(() => {
     if (scrollRef.current) {
       const scrollContainer = scrollRef.current.querySelector("[data-radix-scroll-area-viewport]")
@@ -92,12 +114,13 @@ const GroupChat = ({ messages, currentUserId, onSendMessage }) => {
   }, [messages.length])
 
   const handleSend = useCallback(() => {
+    if (locked) return
     const message = inputRef.current?.value?.trim()
     if (message) {
       onSendMessage(message)
       inputRef.current.value = ""
     }
-  }, [onSendMessage])
+  }, [onSendMessage, locked])
 
   const handleKeyPress = useCallback(
     (e) => {
@@ -109,20 +132,22 @@ const GroupChat = ({ messages, currentUserId, onSendMessage }) => {
     [handleSend],
   )
 
-  // Memoize message count (exclude activity messages from count)
   const userMessageCount = useMemo(
     () => messages.filter((m) => m.type !== "activity").length,
     [messages],
   )
 
   return (
-    <Card className="h-full flex flex-col border-border/50 shadow-lg overflow-hidden">
+    <Card className="h-full flex flex-col border-border/50 shadow-lg overflow-hidden relative">
+      {locked && <ChatLockedOverlay onUpgrade={() => setShowUpgrade(true)} />}
+
       <CardHeader className="py-2 md:pb-3 px-3 md:px-6 border-b border-border/50">
         <CardTitle className="text-sm md:text-lg flex items-center gap-2">
           <div className="p-1 md:p-1.5 rounded-full bg-primary/10">
             <MessageCircle className="h-3 w-3 md:h-4 md:w-4 text-primary" />
           </div>
           Chat
+          {locked && <Lock className="h-3 w-3 text-muted-foreground" />}
           {userMessageCount > 0 && (
             <span className="text-xs font-normal text-muted-foreground">({userMessageCount})</span>
           )}
@@ -138,20 +163,24 @@ const GroupChat = ({ messages, currentUserId, onSendMessage }) => {
           <div className="flex gap-2">
             <Input
               ref={inputRef}
-              placeholder="Type a message..."
+              placeholder={locked ? "PRO feature" : "Type a message..."}
               onKeyPress={handleKeyPress}
+              disabled={locked}
               className="rounded-full bg-background border-border/50 h-9 md:h-10 text-sm"
             />
             <Button
               onClick={handleSend}
               size="icon"
+              disabled={locked}
               className="rounded-full shrink-0 h-9 w-9 md:h-10 md:w-10"
             >
               <Send className="h-3.5 w-3.5 md:h-4 md:w-4" />
             </Button>
           </div>
         </div>
       </CardContent>
+
+      <UpgradeDialog open={showUpgrade} onOpenChange={setShowUpgrade} feature="realtimeChat" />
     </Card>
   )
 }

client/src/Pages/Music/GroupMusic/MembersList.jsx

@@ -61,8 +61,7 @@ const MemberItem = memo(({ member, isCreator, isCurrentUser }) => (
 ))
 
 // Main MembersList Component
-const MembersList = ({ members, currentUserId, createdBy }) => {
-  // Memoize member count
+const MembersList = ({ members, currentUserId, createdBy, maxMembers }) => {
   const memberCount = useMemo(() => members.length, [members.length])
 
   return (
@@ -77,6 +76,7 @@ const MembersList = ({ members, currentUserId, createdBy }) => {
           </div>
           <Badge variant="secondary" className="font-normal text-xs">
             {memberCount}
+            {maxMembers ? `/${maxMembers}` : ""}
           </Badge>
         </CardTitle>
       </CardHeader>