選択されたユーザーの表示を実装

src/components/Main/MainView/QallView/TrackCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { useQall } from '/@/composables/qall/useQall'
+import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.vue'
+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()
+
+const videoInputs = ref<MediaDeviceInfo[]>([])
+onMounted(async () => {
+  const devices = await navigator.mediaDevices.enumerateDevices()
+  videoInputs.value = devices.filter(d => d.kind === 'videoinput')
+})
+const selectedVideoInput = ref<MediaDeviceInfo>()
+const selectedTrack = ref<TrackInfo>()
+
+const { track } = defineProps<{
+  track: trackInfo
+}>()
+</script>
+
+<template v-for="[sid, track] in tracksMap.entries()" :key="sid">
+  <VideoComponent
+    v-if="
+      track.trackPublication?.kind === 'video' &&
+      !screenShareTrackSidMap.has(sid)
+    "
+    :track-info="track"
+    @click="selectedTrack = track"
+  />
+  <ScreenShareComponent
+    v-else-if="track.trackPublication?.kind === 'video'"
+    :track-info="track"
+    :audio-track-info="tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')"
+    @click="selectedTrack = track"
+  />
+  <AudioComponent
+    v-else-if="
+      track.trackPublication?.kind === 'audio' &&
+      track.isRemote &&
+      !screenShareTrackSidMap.values()?.some?.(valueSid => valueSid === sid)
+    "
+    :track-info="track"
+    @click="selectedTrack = track"
+  />
+</template>
+
+<style lang="scss" module>
+.TrackContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.UserBlock {
+  // border: 1px solid black;
+  float: left;
+}
+
+.UserCard {
+  height: 108px;
+  width: 192px;
+}
+</style>

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>