Merge pull request #4467 from traPtitech/feat/screenshare_component

サブビューを実装

src/components/Main/MainView/ChannelView/ChannelView.vue

@@ -12,6 +12,7 @@
         :pinned-messages="pinnedMessages"
         :typing-users="typingUsers"
       />
+      <!-- <SubQallView /> -->
     </template>
     <template #sidebar>
       <channel-sidebar

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

@@ -21,7 +21,9 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  trackInfo.trackPublication?.track?.detach()
+  if (audioElement.value) {
+    trackInfo.trackPublication?.track?.detach(audioElement.value)
+  }
 })
 </script>
 

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

@@ -7,6 +7,7 @@ import DanmakuContainer from './DanmakuContainer.vue'
 import CallControlButton from './CallControlButton.vue'
 import CallControlButtonSmall from './CallControlButtonSmall.vue'
 import ScreenShareComponent from './ScreenShareComponent.vue'
+import { LocalTrackPublication } from 'livekit-client'
 
 const {
   tracksMap,
@@ -71,6 +72,7 @@ const toggleVideo = async () => {
       for (const trackInfo of tracksMap.value.values()) {
         if (
           !trackInfo.isRemote &&
+          trackInfo.trackPublication instanceof LocalTrackPublication &&
           trackInfo.trackPublication?.kind === 'video' &&
           !trackInfo.trackPublication.trackName?.includes('screen')
         ) {
@@ -97,6 +99,7 @@ const toggleScreen = async () => {
       for (const trackInfo of tracksMap.value.values()) {
         if (
           !trackInfo.isRemote &&
+          trackInfo.trackPublication instanceof LocalTrackPublication &&
           trackInfo.trackPublication?.kind === 'video' &&
           trackInfo.trackPublication.trackName?.includes('screen')
         ) {
@@ -188,17 +191,13 @@ const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
     </button>
 
     <div :class="$style.TrackContainer">
-      <template
-        v-for="([sid, track], index) in tracksMap.entries()"
-        :key="index"
-      >
+      <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
         <VideoComponent
           v-if="
             track.trackPublication?.kind === 'video' &&
             !screenShareTrackSidMap.has(sid)
           "
           :track-info="track"
-          :participant-identity="track.participantIdentity"
           :class="$style.video"
         />
         <ScreenShareComponent
@@ -214,7 +213,9 @@ const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
           v-else-if="
             track.trackPublication?.kind === 'audio' &&
             track.isRemote &&
-            !screenShareTrackSidMap.values().some(valueSid => valueSid === sid)
+            !screenShareTrackSidMap
+              .values()
+              ?.some?.(valueSid => valueSid === sid)
           "
           :track-info="track"
         />

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

@@ -28,8 +28,10 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  trackInfo.trackPublication?.track?.detach()
-  audioTrackInfo?.trackPublication?.track?.detach()
+  if (videoElement.value && audioElement.value) {
+    trackInfo.trackPublication?.track?.detach(videoElement.value)
+    audioTrackInfo?.trackPublication?.track?.detach(audioElement.value)
+  }
 })
 </script>
 

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

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import AudioTrack from './AudioTrack.vue'
+import VideoTrack from './VideoTrack.vue'
+import { useQall } from '/@/composables/qall/useQall'
+
+const { tracksMap } = useQall()
+
+const firstVideoTrack = computed(
+  () =>
+    tracksMap.value &&
+    Array.from(tracksMap.value.entries()).find(
+      ([_sid, track]) => track.trackPublication?.kind === 'video'
+    )
+)
+</script>
+<template>
+  <VideoTrack
+    v-if="firstVideoTrack"
+    :key="firstVideoTrack[0]"
+    :track-info="firstVideoTrack[1]"
+  />
+  <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
+    <audio-track
+      v-if="track.trackPublication?.kind === 'audio'"
+      :track-info="track"
+    />
+  </template>
+</template>

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

@@ -3,9 +3,8 @@ import { onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
 import { useQall } from '/@/composables/qall/useQall'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 
-const { trackInfo, participantIdentity } = defineProps<{
+const { trackInfo } = defineProps<{
   trackInfo: TrackInfo
-  participantIdentity: string
 }>()
 
 const { removeVideoTrack } = useQall()
@@ -25,14 +24,16 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  trackInfo.trackPublication?.track?.detach()
+  if (videoElement.value) {
+    trackInfo.trackPublication?.track?.detach(videoElement.value)
+  }
 })
 </script>
 
 <template>
-  <div :id="'camera-' + participantIdentity">
+  <div :id="'camera-' + trackInfo.participantIdentity">
     <div>
-      <p>{{ participantIdentity }}</p>
+      <p>{{ trackInfo.participantIdentity }}</p>
     </div>
     <video
       v-if="trackInfo.trackPublication"

src/components/Main/NavigationBar/DesktopNavigationBar.vue

@@ -20,7 +20,7 @@
       />
       <transition name="fade-bottom">
         <ephemeral-navigation-content
-          v-if="ephemeralNavigationSelectorState.currentNavigation"
+          v-if="true"
           :class="$style.ephemeralNavigation"
           :current-ephemeral-navigation="
             ephemeralNavigationSelectorState.currentNavigation

src/components/Main/NavigationBar/EphemeralNavigationContent/EphemeralNavigationContent.vue

@@ -2,7 +2,9 @@
   <ephemeral-navigation-content-container :transparent="transparent">
     <transition name="fade-bottom" mode="out-in">
       <qall-controller v-if="currentEphemeralNavigation === 'qallController'" />
-      <draft-list v-else-if="currentEphemeralNavigation === 'draftList'" />
+      <SubQallView v-else-if="currentEphemeralNavigation === 'draftList'" />
+
+      <!-- <draft-list v-else-if="currentEphemeralNavigation === 'draftList'" /> -->
       <audio-controller
         v-else-if="currentEphemeralNavigation === 'audioController'"
       />
@@ -16,6 +18,7 @@ import QallController from './QallController/QallController.vue'
 import DraftList from './DraftList/DraftList.vue'
 import AudioController from './AudioController/AudioController.vue'
 import type { EphemeralNavigationItemType } from '/@/components/Main/NavigationBar/composables/useNavigationConstructor'
+import SubQallView from '../../MainView/QallView/SubQallView.vue'
 
 withDefaults(
   defineProps<{

src/composables/qall/useLiveKitSDK.ts

@@ -367,10 +367,10 @@ const addScreenShareTrack = async () => {
         [videoSid]: audioSid
       }
       screenShareTrackSidMap.value.set(videoSid, audioSid)
-      await room.value.localParticipant.setAttributes({
-        ...room.value.localParticipant.attributes,
-        [videoSid]: audioSid
-      })
+      // await room.value.localParticipant.setAttributes({
+      //   ...room.value.localParticipant.attributes,
+      //   [videoSid]: audioSid
+      // })
     }
   } catch {
     // TODO:シェアをキャンセルした時も失敗しましたメッセージがでるのはちょっと違和感があるかも