Qall中のチャンネル一覧の表示 みんながどこにいるかわかるぜ～

src/App.vue

@@ -25,7 +25,7 @@
   window.addEventListener('beforeunload', event => {
     // TODO: Qall
     // ここは適切な変数を置く
-    const isCurrentDevice = computed(() => true)
+    const isCurrentDevice = computed(() => false)
     if (isCurrentDevice.value) {
       const unloadMessage = 'Qall中ですが本当に終了しますか？'
       event.preventDefault()

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

@@ -1,16 +1,14 @@
 <template>
   <div :class="$style.container">
     <template v-if="!isMobile">
-      <!-- TODO:Qall -->
-      <!-- 元々はデフォルト値ではなくUseQallの関数で計算していた -->
       <header-tools-item
         v-if="true"
         icon-mdi
-        :icon-name="'phone'"
+        :icon-name="isCallingHere ? 'phone' : 'phone-outline'"
         :class="$style.qallIcon"
-        :disabled="false"
-        :data-is-active="$boolAttr(true)"
-        :data-is-joined="$boolAttr(true)"
+        :disabled="disabled"
+        :data-is-active="$boolAttr(isCallingHere)"
+        :data-is-joined="$boolAttr(isCallingHere)"
         :tooltip="'Qallボタン'"
         @click="joinQall(props.channelId)"
       />
@@ -80,7 +78,9 @@
 
 const { isMobile } = useResponsiveStore()
 
-const { joinQall } = useQall()
+const { joinQall, callingChannel } = useQall()
+const isCallingHere = computed(() => callingChannel.value === props.channelId)
+const disabled = computed(() => !!callingChannel.value && !isCallingHere.value)
 
 const { changeToNextSubscriptionLevel, currentChannelSubscription } =
   useChannelSubscriptionState(toRef(props, 'channelId'))

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

@@ -1,15 +1,13 @@
 <template>
   <primary-view-header-popup-frame>
-    <!-- TODO:Qall -->
-    <!-- 元々はデフォルト値ではなくUseQallの関数で計算していた -->
     <header-tools-menu-item
       v-if="isMobile"
-      :icon-name="'phone'"
+      :icon-name="isCallingHere ? 'phone' : 'phone-outline'"
       icon-mdi
       :class="$style.qallIcon"
       :label="'Qallを開始'"
-      :disabled="false"
-      :data-is-active="$boolAttr(true)"
+      :disabled="disabled"
+      :data-is-active="$boolAttr(isCallingHere)"
       @click="joinQall(props.channelId)"
       @click-item="emit('clickItem')"
     />
@@ -86,7 +84,9 @@
 
 const { isMobile } = useResponsiveStore()
 
-const { joinQall } = useQall()
+const { joinQall, callingChannel } = useQall()
+const isCallingHere = computed(() => callingChannel.value === props.channelId)
+const disabled = computed(() => !!callingChannel.value && !isCallingHere.value)
 
 const { isChildChannelCreatable, openChannelCreateModal } =
   useChannelCreateModal(props)

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

@@ -5,8 +5,6 @@
       :viewer-ids="viewerIds"
       :class="$style.sidebarItem"
     />
-    <!-- TODO: Qall -->
-    <!-- デザインが確定したら消すか消さないか決める -->
     <channel-sidebar-qall
       v-if="qallUserIds.length > 0"
       :qall-user-ids="qallUserIds"
@@ -52,6 +50,8 @@
 import ChannelSidebarBots from './ChannelSidebarBots.vue'
 import type { UserId, ChannelId } from '/@/types/entity-ids'
 import { useModelSyncer } from '/@/composables/useModelSyncer'
+import { useQall } from '/@/composables/qall/useQall'
+import { computed } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -71,7 +71,14 @@
   (e: 'update:isViewersDetailOpen', value: boolean): void
 }>()
 
-const qallUserIds: UserId[] = []
+const { rooms: roomWithParticipants } = useQall()
+
+const qallUserIds = computed(
+  () =>
+    roomWithParticipants.value
+      .find(room => room.channel.id === props.channelId)
+      ?.participants?.map(participant => participant.user.id) ?? []
+)
 
 const isViewersDetailOpen = useModelSyncer(props, emit, 'isViewersDetailOpen')
 </script>

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

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, useTemplateRef, watchEffect } from 'vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import { useRtcSettings } from '/@/store/app/rtcSettings'
 const { trackInfo, volume } = defineProps<{
   trackInfo: TrackInfo
   volume: number
 }>()
 const audioElement = useTemplateRef<HTMLMediaElement>('audioElement')
 const audioContext = new AudioContext()
 const gainNode = audioContext.createGain()
-gainNode.gain.value = 1
+const { masterVolume } = useRtcSettings()
+gainNode.gain.value = volume * masterVolume.value
 
 watchEffect(() => {
-  gainNode.gain.value = volume
+  gainNode.gain.exponentialRampToValueAtTime(
+    Math.max(volume * masterVolume.value, 1e-44),
+    audioContext.currentTime + 0.2
+  )
 })
 
 onMounted(() => {

src/components/Main/NavigationBar/ChannelList/ChannelElementName.vue

@@ -28,6 +28,7 @@
 import { usePath } from './composables/usePath'
 import AIcon from '/@/components/UI/AIcon.vue'
 import UserIconEllipsisList from '/@/components/UI/UserIconEllipsisList.vue'
+import { useQall } from '/@/composables/qall/useQall'
 
 const props = withDefaults(
   defineProps<{
@@ -43,7 +44,11 @@
 const typedProps = props as TypedProps
 
 const { pathToShow, pathTooltip } = usePath(typedProps)
-const qallUserIds: string[] = []
+const { rooms } = useQall()
+const qallUserIds: string[] =
+  rooms.value
+    .find(room => room.channel.id === props.channel.id)
+    ?.participants.map(participant => participant.user.id) ?? []
 </script>
 
 <style lang="scss" module>

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

@@ -1,10 +1,8 @@
 <template>
   <ephemeral-navigation-content-container :transparent="transparent">
     <transition name="fade-bottom" mode="out-in">
-      <qall-controller v-if="currentEphemeralNavigation === 'qallController'" />
-      <SubQallView v-else-if="currentEphemeralNavigation === 'draftList'" />
-
-      <!-- <draft-list v-else-if="currentEphemeralNavigation === 'draftList'" /> -->
+      <SubQallView v-if="currentEphemeralNavigation === 'qallController'" />
+      <DraftList v-else-if="currentEphemeralNavigation === 'draftList'" />
       <audio-controller
         v-else-if="currentEphemeralNavigation === 'audioController'"
       />
@@ -14,10 +12,10 @@
 
 <script lang="ts" setup>
 import EphemeralNavigationContentContainer from './EphemeralNavigationContentContainer.vue'
-import QallController from './QallController/QallController.vue'
 import AudioController from './AudioController/AudioController.vue'
 import type { EphemeralNavigationItemType } from '/@/components/Main/NavigationBar/composables/useNavigationConstructor'
 import SubQallView from '../../MainView/QallView/SubQallView.vue'
+import DraftList from './DraftList/DraftList.vue'
 
 withDefaults(
   defineProps<{