From 31e58aaadd65d549aee9f6053383b0053bee2c0e Mon Sep 17 00:00:00 2001
From: ramdos0207 <dev@ramdos.net>
Date: Fri, 24 Jan 2025 17:14:46 +0900
Subject: [PATCH] =?UTF-8?q?=E9=81=B8=E6=8A=9E=E3=81=95=E3=82=8C=E3=81=9F?=
 =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC=E3=81=AE=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/UserList.vue       | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 609fe1bad..6e51740f8 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -4,6 +4,7 @@ import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.
 import AudioComponent from '/@/components/Main/MainView/QallView/AudioComponent.vue'
 import { onMounted, ref } from 'vue'
 import ScreenShareComponent from './ScreenShareComponent.vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 
 const { tracksMap, screenShareTrackSidMap } = useQall()
 
@@ -13,9 +14,37 @@ onMounted(async () => {
   videoInputs.value = devices.filter(d => d.kind === 'videoinput')
 })
 const selectedVideoInput = ref<MediaDeviceInfo>()
+const selectedTrack = ref<TrackInfo>()
+const selectedSid = ref<string>()
 </script>
 
 <template>
+  <div v-if="selectedTrack !== undefined">
+    <VideoComponent
+      v-if="
+        selectedTrack.trackPublication?.kind === 'video' &&
+        !screenShareTrackSidMap.has(selectedSid ?? '')
+      "
+      :track-info="selectedTrack"
+    />
+    <ScreenShareComponent
+      v-else-if="selectedTrack.trackPublication?.kind === 'video'"
+      :track-info="selectedTrack"
+      :audio-track-info="
+        tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
+      "
+    />
+    <AudioComponent
+      v-else-if="
+        selectedTrack.trackPublication?.kind === 'audio' &&
+        selectedTrack.isRemote &&
+        !screenShareTrackSidMap
+          .values()
+          ?.some?.(valueSid => valueSid === selectedSid)
+      "
+      :track-info="selectedTrack"
+    />
+  </div>
   <div :class="$style.TrackContainer">
     <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
       <VideoComponent
@@ -24,11 +53,13 @@ const selectedVideoInput = ref<MediaDeviceInfo>()
           !screenShareTrackSidMap.has(sid)
         "
         :track-info="track"
+        @click="[selectedTrack, selectedSid] = [track, sid]"
       />
       <ScreenShareComponent
         v-else-if="track.trackPublication?.kind === 'video'"
         :track-info="track"
         :audio-track-info="tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')"
+        @click="[selectedTrack, selectedSid] = [track, sid]"
       />
       <AudioComponent
         v-else-if="
@@ -37,6 +68,7 @@ const selectedVideoInput = ref<MediaDeviceInfo>()
           !screenShareTrackSidMap.values()?.some?.(valueSid => valueSid === sid)
         "
         :track-info="track"
+        @click="[selectedTrack, selectedSid] = [track, sid]"
       />
     </template>
   </div>
@@ -50,13 +82,4 @@ const selectedVideoInput = ref<MediaDeviceInfo>()
   gap: 8px;
   align-self: stretch;
 }
-.UserBlock {
-  // border: 1px solid black;
-  float: left;
-}
-
-.UserCard {
-  height: 108px;
-  width: 192px;
-}
 </style>