вебкамера там, туда-сюда

client/app/layouts/default.vue

@@ -21,6 +21,12 @@
         </PrimeButton>
       </PrimeButtonGroup>
 
+      <PrimeButton :severity="videoEnabled ? 'success' : undefined" outlined @click="toggleVideo">
+        <template #icon>
+          <Component :is="videoEnabled ? CameraOff : Camera" />
+        </template>
+      </PrimeButton>
+
       <PrimeButton :severity="sharingEnabled ? 'success' : undefined" outlined @click="toggleShare">
         <template #icon>
           <Component :is="sharingEnabled ? ScreenShareOff : ScreenShare" />
@@ -44,28 +50,33 @@
       </PrimeSelectButton>
     </div>
 
-    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl overflow-hidden" style="min-height: 0">
       <div v-auto-animate class="p-3 space-y-1">
         <ClientRow v-for="client of clients" :key="client.userId" :client="client" />
       </div>
     </PrimeScrollPanel>
 
-    <PrimeScrollPanel class="bg-surface-900 rounded-xl" style="min-height: 0">
+    <PrimeScrollPanel class="bg-surface-900 rounded-xl overflow-hidden" style="min-height: 0">
       <div class="p-3">
         <slot />
       </div>
     </PrimeScrollPanel>
   </div>
+
+  <FullscreenGallery />
 </template>
 
 <script setup lang="ts">
 import {
+  Camera,
+  CameraOff,
   MessageCircle,
   Mic,
   MicOff,
   ScreenShare,
   ScreenShareOff,
   Settings,
+  TvMinimalPlay,
   UserPen,
   Volume2,
   VolumeOff,
@@ -76,9 +87,12 @@ const {
   clients,
   inputMuted,
   outputMuted,
+  videoEnabled,
   sharingEnabled,
+  somebodyStreamingVideo,
   toggleInput,
   toggleOutput,
+  toggleVideo,
   toggleShare,
 } = useApp()
 const { connect, connected } = useSignaling()
@@ -91,31 +105,47 @@ interface Tab {
 
 const route = useRoute()
 
-const tabs: Tab[] = [
-  {
-    id: 'Index',
-    icon: MessageCircle,
-    onClick: () => {
-      navigateTo({ name: 'Index' })
-    },
-  },
-  {
-    id: 'Profile',
-    icon: UserPen,
-    onClick: () => {
-      navigateTo({ name: 'Profile' })
-    },
-  },
-  {
-    id: 'Preferences',
-    icon: Settings,
-    onClick: () => {
-      navigateTo({ name: 'Preferences' })
-    },
-  },
-]
+const tabs = computed<Tab[]>(() => {
+  const result = []
 
-const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)
+  if (somebodyStreamingVideo.value) {
+    result.push({
+      id: 'Gallery',
+      icon: TvMinimalPlay,
+      onClick: () => {
+        navigateTo({ name: 'Gallery' })
+      },
+    })
+  }
+
+  result.push(
+    {
+      id: 'Index',
+      icon: MessageCircle,
+      onClick: () => {
+        navigateTo({ name: 'Index' })
+      },
+    },
+    {
+      id: 'Profile',
+      icon: UserPen,
+      onClick: () => {
+        navigateTo({ name: 'Profile' })
+      },
+    },
+    {
+      id: 'Preferences',
+      icon: Settings,
+      onClick: () => {
+        navigateTo({ name: 'Preferences' })
+      },
+    },
+  )
+
+  return result
+})
+
+const activeTab = ref<Tab>(tabs.value.find(tab => tab.id === route.name) ?? tabs.value.find(tab => tab.id === 'Index')!)
 
 watch(activeTab, (activeTab) => {
   activeTab.onClick()