adding asset manager and other new features

packages/web/src/app/(auth)/manager/page.tsx

@@ -4,6 +4,7 @@ import { QuizzWithId } from "@rahoot/common/types/game"
 import { STATUS } from "@rahoot/common/types/game/status"
 import ManagerPassword from "@rahoot/web/components/game/create/ManagerPassword"
 import QuizEditor from "@rahoot/web/components/game/create/QuizEditor"
+import MediaLibrary from "@rahoot/web/components/game/create/MediaLibrary"
 import SelectQuizz from "@rahoot/web/components/game/create/SelectQuizz"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { useManagerStore } from "@rahoot/web/stores/manager"
@@ -18,6 +19,7 @@ const Manager = () => {
   const [isAuth, setIsAuth] = useState(false)
   const [quizzList, setQuizzList] = useState<QuizzWithId[]>([])
   const [showEditor, setShowEditor] = useState(false)
+  const [showMedia, setShowMedia] = useState(false)
 
   useEvent("manager:quizzList", (quizzList) => {
     setIsAuth(true)
@@ -51,11 +53,28 @@ const Manager = () => {
     )
   }
 
+  if (showMedia) {
+    return (
+      <div className="flex w-full flex-col gap-4">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowMedia(false)}
+            className="rounded-md bg-gray-700 px-3 py-2 text-white"
+          >
+            Back
+          </button>
+        </div>
+        <MediaLibrary />
+      </div>
+    )
+  }
+
   return (
     <SelectQuizz
       quizzList={quizzList}
       onSelect={handleCreate}
       onManage={() => setShowEditor(true)}
+      onMedia={() => setShowMedia(true)}
     />
   )
 }

packages/web/src/app/game/manager/[gameId]/page.tsx

@@ -16,6 +16,7 @@ import { useQuestionStore } from "@rahoot/web/stores/question"
 import { GAME_STATE_COMPONENTS_MANAGER } from "@rahoot/web/utils/constants"
 import { useParams, useRouter } from "next/navigation"
 import toast from "react-hot-toast"
+import { useState } from "react"
 
 const ManagerGame = () => {
   const router = useRouter()
@@ -24,6 +25,7 @@ const ManagerGame = () => {
   const { gameId, status, setGameId, setStatus, setPlayers, reset } =
     useManagerStore()
   const { setQuestionStates } = useQuestionStore()
+  const [cooldownPaused, setCooldownPaused] = useState(false)
 
   useEvent("game:status", ({ name, data }) => {
     if (name in GAME_STATE_COMPONENTS_MANAGER) {
@@ -54,6 +56,10 @@ const ManagerGame = () => {
     toast.error(message)
   })
 
+  useEvent("game:cooldownPause", (isPaused) => {
+    setCooldownPaused(isPaused)
+  })
+
   const handleSkip = () => {
     if (!gameId) {
       return
@@ -87,6 +93,15 @@ const ManagerGame = () => {
     }
   }
 
+  const handlePauseToggle = () => {
+    if (!gameId) return
+    if (cooldownPaused) {
+      socket?.emit("manager:resumeCooldown", { gameId })
+    } else {
+      socket?.emit("manager:pauseCooldown", { gameId })
+    }
+  }
+
   let component = null
 
   switch (status?.name) {
@@ -132,7 +147,16 @@ const ManagerGame = () => {
   }
 
   return (
-    <GameWrapper statusName={status?.name} onNext={handleSkip} manager>
+    <GameWrapper
+      statusName={status?.name}
+      onNext={handleSkip}
+      onPause={handlePauseToggle}
+      paused={cooldownPaused}
+      showPause={
+        status?.name === STATUS.SHOW_QUESTION || status?.name === STATUS.SELECT_ANSWER
+      }
+      manager
+    >
       {component}
     </GameWrapper>
   )