From c252b5614ab38c2fcb67e30e0ab47d8e0620ca30 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 14:04:57 +0900
Subject: [PATCH 01/30] =?UTF-8?q?=E3=82=B5=E3=82=A6=E3=83=B3=E3=83=89?=
 =?UTF-8?q?=E3=83=9C=E3=83=BC=E3=83=89=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/QallView.vue       |  2 +
 .../Main/MainView/QallView/SoundBoard.vue     | 28 ++++++++++++++
 .../MainView/QallView/SoundBoardElement.vue   | 37 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 src/components/Main/MainView/QallView/SoundBoard.vue
 create mode 100644 src/components/Main/MainView/QallView/SoundBoardElement.vue

diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index b88088914..ef66ace09 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -7,6 +7,7 @@ import CallControlButtonSmall from './CallControlButtonSmall.vue'
 import CallControlButton from './CallControlButton.vue'
 import { LocalTrackPublication } from 'livekit-client'
 import QallMessageView from './QallMessageView.vue'
+import SoundBoard from './SoundBoard.vue'
 
 const {
   tracksMap,
@@ -130,6 +131,7 @@ const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
 
 <template>
   <div :class="$style.Block">
+    <SoundBoard />
     <DanmakuContainer />
     <QallMessageView
       :channel-id="callingChannel"
diff --git a/src/components/Main/MainView/QallView/SoundBoard.vue b/src/components/Main/MainView/QallView/SoundBoard.vue
new file mode 100644
index 000000000..d881cabe2
--- /dev/null
+++ b/src/components/Main/MainView/QallView/SoundBoard.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SoundBoardElement from './SoundBoardElement.vue'
+import FormInput from '/@/components/UI/FormInput.vue'
+
+const searchQuery = ref('')
+</script>
+
+<template>
+  <div :class="$style.soundBoard">
+    <FormInput v-model="searchQuery" placeholder="検索" />
+    <SoundBoardElement v-for="i in 10" :key="i" />
+  </div>
+</template>
+
+<style lang="scss" module>
+.soundBoard {
+  position: absolute;
+  margin: 0.5rem;
+  padding: 0.5rem;
+  bottom: 0;
+  left: 0;
+  max-height: 60%;
+  overflow-y: scroll;
+  border-radius: 0.5rem;
+  @include background-primary;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/SoundBoardElement.vue b/src/components/Main/MainView/QallView/SoundBoardElement.vue
new file mode 100644
index 000000000..fe65c3916
--- /dev/null
+++ b/src/components/Main/MainView/QallView/SoundBoardElement.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import AStamp from '/@/components/UI/AStamp.vue'
+
+const stampId = ref('69c10725-2176-45ac-a4a5-22e70b8a76f7')
+const soundName = ref(
+  '草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草'
+)
+</script>
+
+<template>
+  <div :class="$style.soundBoardContainer">
+    <div>
+      <AStamp :stamp-id="stampId" :size="32" />
+    </div>
+    <div>{{ soundName }}</div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.soundBoardContainer {
+  margin: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  &:hover {
+    background-color: rgba(0, 100, 255, 1);
+    @include background-tertiary;
+  }
+  width: 20rem;
+  min-height: 4rem;
+  user-select: none;
+  @include color-ui-primary;
+}
+</style>

From 3a201652bda07a9ca40c95a86cc617eddb09e488 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 14:05:13 +0900
Subject: [PATCH 02/30] =?UTF-8?q?=E3=83=AA=E3=82=A2=E3=82=AF=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainView/QallView/DanmakuContainer.vue    | 15 ------
 .../Main/MainView/QallView/QallView.vue       | 52 ++++++++++++++-----
 .../Main/StampPicker/StampPickerContainer.vue |  8 +++
 src/store/ui/stampPicker.ts                   | 14 +++--
 4 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/components/Main/MainView/QallView/DanmakuContainer.vue b/src/components/Main/MainView/QallView/DanmakuContainer.vue
index 53052a85b..ebd0612b2 100644
--- a/src/components/Main/MainView/QallView/DanmakuContainer.vue
+++ b/src/components/Main/MainView/QallView/DanmakuContainer.vue
@@ -57,18 +57,6 @@ messageMitt.on('updateMessage', async message => {
   }, 6000)
 })
 
-const { toggleStampPicker } = useStampPickerInvoker(
-  async stampData => {
-    try {
-      await publishData({ type: 'stamp', message: stampData.id })
-      qallMitt.emit('pushStamp', stampData.id)
-    } catch (e) {}
-  },
-  danmakuContainer,
-  false,
-  'bottom-right'
-)
-
 useMittListener(qallMitt, 'pushStamp', stamp => {
   sparkle(stamp)
 })
@@ -105,9 +93,6 @@ onMounted(() => {
 
 <template>
   <div ref="danmakuContainer" :class="$style.danmakuContainer">
-    <button :style="{ pointerEvents: 'auto' }" @click="toggleStampPicker">
-      スタンプピッカー
-    </button>
     <DanmakuComment
       v-for="comment in comments"
       :key="comment.id"
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index ef66ace09..9620cfb93 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { useQall } from '/@/composables/qall/useQall'
 import UserList from '/@/components/Main/MainView/QallView/UserList.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, useTemplateRef } from 'vue'
 import DanmakuContainer from './DanmakuContainer.vue'
 import CallControlButtonSmall from './CallControlButtonSmall.vue'
 import CallControlButton from './CallControlButton.vue'
 import { LocalTrackPublication } from 'livekit-client'
 import QallMessageView from './QallMessageView.vue'
 import SoundBoard from './SoundBoard.vue'
+import ClickOutside from '/@/components/UI/ClickOutside'
+import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 
 const {
   tracksMap,
@@ -16,7 +18,9 @@ const {
   leaveQall,
   addScreenShareTrack,
   addCameraTrack,
-  removeVideoTrack
+  removeVideoTrack,
+  publishData,
+  qallMitt
 } = useQall()
 
 const isMicOn = ref(true)
@@ -105,12 +109,24 @@ const toggleScreen = async () => {
 }
 
 const handleSound = () => {
-  // TODO
-  console.log('sound')
+  showSoundBoard.value = true
 }
+
+const reactionButton = useTemplateRef<HTMLDivElement>('reactionButton')
+const { openStampPicker, closeStampPicker } = useStampPickerInvoker(
+  async stampData => {
+    try {
+      await publishData({ type: 'stamp', message: stampData.id })
+      qallMitt.emit('pushStamp', stampData.id)
+    } catch (e) {}
+  },
+  reactionButton,
+  false,
+  'bottom-left'
+)
 const handleReaction = () => {
   // TODO
-  console.log('reaction')
+  openStampPicker()
 }
 const handleGroup = () => {
   // TODO
@@ -127,11 +143,15 @@ const selectedVideoInput = ref<MediaDeviceInfo>()
 const backgroundImage = ref<File>()
 
 const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
+
+const showSoundBoard = ref(false)
 </script>
 
 <template>
   <div :class="$style.Block">
-    <SoundBoard />
+    <ClickOutside @click-outside="showSoundBoard = false">
+      <SoundBoard v-if="showSoundBoard" />
+    </ClickOutside>
     <DanmakuContainer />
     <QallMessageView
       :channel-id="callingChannel"
@@ -188,14 +208,18 @@ const backgroundType = ref<'original' | 'blur' | 'file' | 'screen'>('original')
     <div :class="$style.TrackContainer">
       <div :class="$style.controlBar">
         <div :class="$style.smallButtonGroup">
-          <CallControlButtonSmall
-            icon="sound_detection_loud_sound"
-            :on-click="handleSound"
-          />
-          <CallControlButtonSmall
-            icon="add_reaction"
-            :on-click="handleReaction"
-          />
+          <div>
+            <CallControlButtonSmall
+              icon="sound_detection_loud_sound"
+              :on-click="handleSound"
+            />
+          </div>
+          <div ref="reactionButton">
+            <CallControlButtonSmall
+              icon="add_reaction"
+              :on-click="handleReaction"
+            />
+          </div>
         </div>
 
         <div :class="$style.verticalBar"></div>
diff --git a/src/components/Main/StampPicker/StampPickerContainer.vue b/src/components/Main/StampPicker/StampPickerContainer.vue
index 00ad6cecb..ccb2c0f86 100644
--- a/src/components/Main/StampPicker/StampPickerContainer.vue
+++ b/src/components/Main/StampPicker/StampPickerContainer.vue
@@ -35,6 +35,14 @@ const style = computed(() => {
       transform: 'translateX(-100%)'
     }
   }
+  if (alignment.value === 'bottom-left') {
+    return {
+      bottom: `min(calc(100% - ${height + margin}px), calc(100% - ${
+        position.value.y
+      }px))`,
+      left: `min(calc(100% - ${width}px), ${position.value.x}px)`
+    }
+  }
   if (alignment.value === 'bottom-right') {
     return {
       bottom: `min(calc(100% - ${height + margin}px), calc(100% - ${
diff --git a/src/store/ui/stampPicker.ts b/src/store/ui/stampPicker.ts
index 2d28b6af8..5fdb60191 100644
--- a/src/store/ui/stampPicker.ts
+++ b/src/store/ui/stampPicker.ts
@@ -17,20 +17,24 @@ export type StampSelectHandler = (stamp: SelectedStampData) => void
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export const defaultSelectHandler = (_: SelectedStampData) => {}
 
-export type AlignmentPosition = `top-${'left' | 'right'}` | 'bottom-right'
+export type AlignmentPosition = `${'top' | 'bottom'}-${'left' | 'right'}`
 
 const MARGIN_BETWEEN = 4
 const getBottomLeftPosition = (rect: DOMRect) => ({
   x: rect.left,
   y: rect.bottom + MARGIN_BETWEEN
 })
+const getBottomRightPosition = (rect: DOMRect) => ({
+  x: rect.right,
+  y: rect.bottom + MARGIN_BETWEEN
+})
 const getTopRightPosition = (rect: DOMRect) => ({
   x: rect.right,
   y: rect.top - MARGIN_BETWEEN
 })
-const getBottomRightPosition = (rect: DOMRect) => ({
-  x: rect.right,
-  y: rect.bottom + MARGIN_BETWEEN
+const getTopLeftPosition = (rect: DOMRect) => ({
+  x: rect.left,
+  y: rect.top - MARGIN_BETWEEN
 })
 
 const getPositionFromAlignment = (
@@ -46,6 +50,8 @@ const getPositionFromAlignment = (
       return getBottomRightPosition(rect)
     case 'bottom-right':
       return getTopRightPosition(rect)
+    case 'bottom-left':
+      return getTopLeftPosition(rect)
   }
 }
 

From fcb3974736440c2b1e64f098027c635468ba01b2 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 14:56:57 +0900
Subject: [PATCH 03/30] =?UTF-8?q?webiner=E3=81=A7=E9=96=8B=E5=A7=8B?=
 =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelHeader/ChannelHeaderToolsMenu.vue  |  7 +++
 src/composables/qall/useLiveKitSDK.ts         | 47 ++++++++++++-------
 src/composables/qall/useQall.ts               | 28 ++++++++---
 3 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
index 6a6fde705..f5d7c77b0 100644
--- a/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsMenu.vue
@@ -48,6 +48,13 @@
       @click="openChannelManageModal"
       @click-item="emit('clickItem')"
     />
+    <header-tools-menu-item
+      icon-name="phone-outline"
+      icon-mdi
+      label="ウェビナーモードでQallを開始"
+      @click="() => joinQall(props.channelId, true)"
+      @click-item="emit('clickItem')"
+    />
   </primary-view-header-popup-frame>
 </template>
 
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 1f5be1ebd..89d001560 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -127,11 +127,11 @@ function handleParticipantAttributesChanged(
   )
 }
 
-const joinRoom = async (roomName: string, userName: string) => {
+const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
   try {
     const traQtoken = (await apis.getMyQRCode(true)).data
     const res = await fetch(
-      `https://qall-microservice-for-livekit.trap.show/api/token?room=${roomName}`,
+      `https://qall-microservice-for-livekit.trap.show/api/token?room=${roomName}&isWebinar=${isWebinar}`,
       {
         method: 'GET',
         headers: {
@@ -168,22 +168,25 @@ const joinRoom = async (roomName: string, userName: string) => {
     // connect to room
     await room.value.connect('wss://livekit.qall-dev.trapti.tech', token)
 
-    // publish local camera and mic tracks
-    await room.value.localParticipant.setMicrophoneEnabled(
-      true,
-      {
-        channelCount: 2,
-        voiceIsolation: true,
-        echoCancellation: true,
-        noiseSuppression: true
-      },
-      {
-        audioPreset: AudioPresets.musicHighQualityStereo,
-        forceStereo: true,
-        red: false,
-        dtx: false
-      }
-    )
+    if (room.value.localParticipant?.permissions?.canPublish) {
+      // publish local camera and mic tracks
+      await room.value.localParticipant.setMicrophoneEnabled(
+        true,
+        {
+          channelCount: 2,
+          voiceIsolation: true,
+          echoCancellation: true,
+          noiseSuppression: true
+        },
+        {
+          audioPreset: AudioPresets.musicHighQualityStereo,
+          forceStereo: true,
+          red: false,
+          dtx: false
+        }
+      )
+    }
+
     await room.value.localParticipant.setAttributes({})
     room.value.remoteParticipants.forEach(participant => {
       Object.keys(participant.attributes).forEach(key =>
@@ -220,6 +223,10 @@ const addCameraTrack = async (
       addErrorToast('ルームが存在しません')
       return
     }
+    if (!room.value?.localParticipant?.permissions?.canPublish) {
+      addErrorToast('権限がありません')
+      return
+    }
 
     const stream = await navigator.mediaDevices.getUserMedia({
       video: { deviceId: videoInputDevice?.deviceId }
@@ -332,6 +339,10 @@ const addScreenShareTrack = async () => {
       addErrorToast('ルームが存在しません')
       return
     }
+    if (!room.value?.localParticipant?.permissions?.canPublish) {
+      addErrorToast('権限がありません')
+      return
+    }
     const localTracks = await createLocalScreenTracks({
       audio: {
         channelCount: 2,
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index bfbda49b4..9d24292d9 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -15,15 +15,28 @@ type RoomsWithParticipants =
   | {
       roomId: string
       participants:
-        | { identity: string; joinedAt: string; name: string }[]
+        | {
+            identity: string
+            joinedAt: string
+            name: string
+            canPublish: boolean
+            attributes: { [key: string]: string }
+          }[]
         | null
+      isWebinar: boolean
     }[]
   | null
 
-type Participant = { user: User; joinedAt: string }
+type Participant = {
+  user: User
+  joinedAt: string
+  canPublish: boolean
+  attributes: { [key: string]: string }
+}
 type Room = {
   channel: Channel
   participants: Participant[]
+  isWebinar: boolean
 }
 type Rooms = Room[]
 
@@ -63,9 +76,12 @@ const purifyRoomData = async (data: RoomsWithParticipants): Promise<Rooms> => {
           room.participants
             ?.map(p => ({
               joinedAt: p.joinedAt,
-              user: findUserByName(p.identity.slice(0, -37))
+              user: findUserByName(p.identity.slice(0, -37)),
+              canPublish: p.canPublish ?? false,
+              attributes: p.attributes ?? {}
             }))
-            .filter((p): p is Participant => !!p.user) ?? []
+            .filter((p): p is Participant => !!p.user) ?? [],
+        isWebinar: room.isWebinar ?? false
       }
     })
     .filter((room): room is Room => {
@@ -115,7 +131,7 @@ messageMitt.on('addMessage', ({ message }) => {
 })
 
 export const useQall = () => {
-  const joinQall = (channelName: string) => {
+  const joinQall = (channelName: string, isWebinar: boolean = false) => {
     if (callingChannel.value) {
       leaveRoom()
     }
@@ -123,7 +139,7 @@ export const useQall = () => {
       addErrorToast('接続に失敗しました')
       return
     }
-    joinRoom(channelName, myId.value)
+    joinRoom(channelName, isWebinar)
 
     callingChannel.value = channelName
   }

From ca20fbc3126769d906019f30a4cb600fa4bc7025 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 16:45:31 +0900
Subject: [PATCH 04/30] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=83=B3=E3=83=97?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E3=81=AEUI=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useLiveKitSDK.ts | 68 +++++++++++++++++++++++++++
 src/views/Settings/AudioTab.vue       | 27 ++++++++++-
 src/views/SettingsPage.vue            |  2 +
 3 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 89d001560..0bb650271 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -213,6 +213,74 @@ async function leaveRoom() {
   window.removeEventListener('beforeunload', leaveRoom)
 }
 
+const addMicTrack = async () => {
+  try {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    if (!room.value?.localParticipant?.permissions?.canPublish) {
+      addErrorToast('権限がありません')
+      return
+    }
+    await room.value.localParticipant.setMicrophoneEnabled(
+      true,
+      {
+        channelCount: 2,
+        voiceIsolation: true,
+        echoCancellation: true,
+        noiseSuppression: true
+      },
+      {
+        audioPreset: AudioPresets.musicHighQualityStereo,
+        forceStereo: true,
+        red: false,
+        dtx: false
+      }
+    )
+  } catch (e) {
+    addErrorToast('マイクの共有に失敗しました')
+  }
+}
+
+const removeMicTrack = async () => {
+  try {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    await room.value.localParticipant.setMicrophoneEnabled(
+      false,
+      {
+        channelCount: 2,
+        voiceIsolation: true,
+        echoCancellation: true,
+        noiseSuppression: true
+      },
+      {
+        audioPreset: AudioPresets.musicHighQualityStereo,
+        forceStereo: true,
+        red: false,
+        dtx: false
+      }
+    )
+  } catch (e) {
+    addErrorToast('マイクのミュートに失敗しました')
+  }
+}
+
+const toggleMicTrack = async () => {
+  if (!room.value) {
+    addErrorToast('ルームが存在しません')
+    return
+  }
+  if (room.value.localParticipant?.isMicrophoneEnabled) {
+    await removeMicTrack()
+  } else {
+    await addMicTrack()
+  }
+}
+
 const addCameraTrack = async (
   videoInputDevice?: MediaDeviceInfo,
   backgroundType?: 'original' | 'blur' | 'file' | 'screen',
diff --git a/src/views/Settings/AudioTab.vue b/src/views/Settings/AudioTab.vue
index b31708e5c..bf0f1d11f 100644
--- a/src/views/Settings/AudioTab.vue
+++ b/src/views/Settings/AudioTab.vue
@@ -10,6 +10,7 @@
           style="display: none"
           @change="handleFileSelect"
         />
+
         <form-button
           label="音声ファイルを選択"
           type="secondary"
@@ -30,6 +31,16 @@
             required
           />
         </div>
+        <AStamp v-if="stampId" :stamp-id="stampId" :size="32" />
+        <div ref="stampPickerButton">
+          <form-button
+            label="アイコンスタンプを選択"
+            type="secondary"
+            icon="plus"
+            mdi
+            @click="toggleStampPicker"
+          />
+        </div>
         <form-button
           label="アップロード"
           type="primary"
@@ -42,8 +53,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 import FormButton from '/@/components/UI/FormButton.vue'
+import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
+import AStamp from '/@/components/UI/AStamp.vue'
 
 const fileInput = ref<HTMLInputElement | null>(null)
 const selectedFile = ref<File | null>(null)
@@ -60,9 +73,19 @@ const handleFileSelect = (event: Event) => {
 
   selectedFile.value = file
   audioName.value = file.name.replace(/\.[^/.]+$/, '')
-  console.log('Selected audio file:', file.name)
 }
 
+const stampId = ref('')
+const stampPickerButton = useTemplateRef<HTMLButtonElement>('stampPickerButton')
+const { toggleStampPicker } = useStampPickerInvoker(
+  async stampData => {
+    stampId.value = stampData.id
+  },
+  stampPickerButton,
+  false,
+  'bottom-left'
+)
+
 const handleUpload = () => {
   if (!selectedFile.value || !audioName.value) return
 
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 1a59b959e..9224b9f55 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -6,6 +6,7 @@
     <desktop-setting-modal v-else>
       <router-view />
     </desktop-setting-modal>
+    <StampPickerContainer />
   </div>
   <div v-else></div>
 </template>
@@ -18,6 +19,7 @@ import { RouteName } from '/@/router'
 import { defaultSettingsName } from '/@/router/settings'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import useLoginCheck from './composables/useLoginCheck'
+import StampPickerContainer from '../components/Main/StampPicker/StampPickerContainer.vue'
 
 const useSettingsRootPathWatcher = (
   isMobile: Ref<boolean>,

From e61976b49be1f7cef76a97f4dfd37c96ca96433c Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 17:32:35 +0900
Subject: [PATCH 05/30] =?UTF-8?q?=E9=9F=B3=E5=A3=B0=E3=81=AE=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4=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/AudioComponent.vue | 57 ++++++++-----------
 .../MainView/QallView/ParticipantList.vue     | 57 +++++++++----------
 .../Main/MainView/QallView/QallView.vue       | 20 ++++---
 .../Main/MainView/QallView/SubQallView.vue    |  9 +--
 4 files changed, 67 insertions(+), 76 deletions(-)

diff --git a/src/components/Main/MainView/QallView/AudioComponent.vue b/src/components/Main/MainView/QallView/AudioComponent.vue
index 208a0f61b..e06de3265 100644
--- a/src/components/Main/MainView/QallView/AudioComponent.vue
+++ b/src/components/Main/MainView/QallView/AudioComponent.vue
@@ -5,12 +5,19 @@ import { useUsersStore } from '/@/store/entities/users'
 import { buildUserIconPath } from '/@/lib/apis'
 import AudioTrack from './AudioTrack.vue'
 import { useUserVolume } from '/@/store/app/userVolume'
-const { trackInfo, isLarge } = defineProps<{
+const {
+  trackInfo,
+  isLarge,
+  isShow = true
+} = defineProps<{
   trackInfo: TrackInfo
   isLarge: boolean
+  isShow: boolean
 }>()
 const { getStore, setStore, restoringPromise } = useUserVolume()
-const volume = ref<number | string>(getStore(trackInfo.username) ?? 1)
+const volume = computed<number | string>(
+  () => getStore(trackInfo.username) ?? 1
+)
 
 const { findUserByName } = useUsersStore()
 const user = computed(() => findUserByName(trackInfo.username))
@@ -23,42 +30,28 @@ const parseToFloat = (value: number | string): number => {
   }
   return parseFloat(value)
 }
-
-watch(
-  () => volume.value,
-  v => {
-    setStore(trackInfo.username, parseToFloat(v))
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => getStore(trackInfo.username),
-  v => {
-    if (v) {
-      volume.value = v
-    }
-  },
-  { deep: true }
-)
 </script>
 
 <template>
-  <div>
-    <div :class="isLarge ? $style.LargeCard : $style.UserCard">
-      <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
+  <template v-if="isShow">
+    <div>
+      <div :class="isLarge ? $style.LargeCard : $style.UserCard">
+        <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
 
-      <div :class="$style.OuterIcon">
-        <img :src="iconImage" :class="$style.OuterImage" />
-      </div>
-      <div :class="isLarge ? $style.LargeInnerIcon : $style.InnerIcon">
-        <img :src="iconImage" :class="$style.InnerImage" />
-      </div>
+        <div :class="$style.OuterIcon">
+          <img :src="iconImage" :class="$style.OuterImage" />
+        </div>
+        <div :class="isLarge ? $style.LargeInnerIcon : $style.InnerIcon">
+          <img :src="iconImage" :class="$style.InnerImage" />
+        </div>
 
-      <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
+        <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
+      </div>
     </div>
-    <input v-model="volume" type="range" min="0" max="3" step="0.01" />
-  </div>
+  </template>
+  <template v-else>
+    <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
+  </template>
 </template>
 <style lang="scss" module>
 .UserCard {
diff --git a/src/components/Main/MainView/QallView/ParticipantList.vue b/src/components/Main/MainView/QallView/ParticipantList.vue
index 9c4b434bc..6fb1c1dd1 100644
--- a/src/components/Main/MainView/QallView/ParticipantList.vue
+++ b/src/components/Main/MainView/QallView/ParticipantList.vue
@@ -12,31 +12,12 @@ const { participant, trackInfo } = defineProps<{
 }>()
 
 const { getStore, setStore } = useUserVolume()
-const volume = ref<number | string>(getStore(trackInfo.username) ?? 1)
 
 const parseToFloat = (value: number | string): number => {
   if (typeof value === 'number') return value
   return parseFloat(value)
 }
 
-watch(
-  () => volume.value,
-  v => {
-    setStore(trackInfo.username, parseToFloat(v))
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => getStore(trackInfo.username),
-  v => {
-    if (v) {
-      volume.value = v
-    }
-  },
-  { deep: true }
-)
-
 const isMuted = ref(false)
 const toggleMute = (trackInfo: TrackInfo) => {
   isMuted.value = !isMuted.value
@@ -44,11 +25,11 @@ const toggleMute = (trackInfo: TrackInfo) => {
 
 const style = useCssModule()
 const minValue = 0
-const maxValue = 100
-const sliderValue = ref(50)
+const maxValue = 2
+const volume = ref<number | string>(getStore(trackInfo.username) ?? 1)
 
 const sliderStyle = computed(() => {
-  const val = Number(sliderValue.value)
+  const val = parseToFloat(volume.value)
   const percent = ((val - minValue) / (maxValue - minValue)) * 100
   const startColor = isMuted.value ? '#6b7d8a' : '#005BAC'
   // TODO ここもSCSS変数でかける？
@@ -62,7 +43,22 @@ const sliderStyle = computed(() => {
     `
   }
 })
-
+watch(
+  () => getStore(trackInfo.username),
+  v => {
+    if (v) {
+      volume.value = v
+    }
+  },
+  { deep: true }
+)
+watch(
+  () => volume.value,
+  v => {
+    setStore(trackInfo.username, parseToFloat(v))
+  },
+  { deep: true, immediate: true }
+)
 const volumeSliderClass = computed(() => ({
   [style.volumeSlider]: true,
   [style.muted]: isMuted.value
@@ -74,26 +70,25 @@ const volumeSliderClass = computed(() => ({
     <div :class="$style.leftSide">
       <user-icon :size="40" :user-id="participant.id" />
       <span :class="$style.userName">{{ participant.displayName }}</span>
-      <button :class="$style.micIconButton">
+      <!-- TODO: Qall: ミュートを実装する -->
+      <!-- <button :class="$style.micIconButton">
         <a-icon v-if="isMuted" name="microphone-off" mdi />
-      </button>
+      </button> -->
     </div>
     <div :class="$style.rightSide">
-      <button :class="$style.iconButton" @click="toggleMute(trackInfo)">
+      <!-- <button :class="$style.iconButton" @click="toggleMute(trackInfo)">
         <a-icon v-if="isMuted" name="volume-off" :size="24" mdi />
         <a-icon v-else name="volume-high" mdi :size="24" />
-      </button>
+      </button> -->
       <input
-        v-model="sliderValue"
+        v-model="volume"
         type="range"
         :min="minValue"
         :max="maxValue"
+        step="0.01"
         :style="sliderStyle"
         :class="volumeSliderClass"
       />
-      <button :class="$style.accountMinusButton">
-        <a-icon name="account-minus" :size="24" mdi />
-      </button>
     </div>
   </div>
 </template>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index d87074036..13939ff6a 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -285,16 +285,18 @@ const filteredParticipants = computed(() =>
         <div :class="$style.verticalBar"></div>
         <div :class="$style.smallButtonGroup">
           <div :class="$style.participantsContainer">
-            <div v-show="showParticipants" :class="$style.participantsList">
-              <div :class="$style.participantsContent">
-                <participant-list
-                  v-for="participant in filteredParticipants"
-                  :key="participant.user.id"
-                  :participant="participant.user"
-                  :track-info="getParticipantTrackInfo(participant)!"
-                />
+            <ClickOutside @click-outside="showParticipants = false">
+              <div v-if="showParticipants" :class="$style.participantsList">
+                <div :class="$style.participantsContent">
+                  <participant-list
+                    v-for="participant in filteredParticipants"
+                    :key="participant.user.id"
+                    :participant="participant.user"
+                    :track-info="getParticipantTrackInfo(participant)!"
+                  />
+                </div>
               </div>
-            </div>
+            </ClickOutside>
             <CallControlButtonSmall
               icon="account-multiple"
               :on-click="handleGroup"
diff --git a/src/components/Main/MainView/QallView/SubQallView.vue b/src/components/Main/MainView/QallView/SubQallView.vue
index 9dda0e6e8..21c4e471f 100644
--- a/src/components/Main/MainView/QallView/SubQallView.vue
+++ b/src/components/Main/MainView/QallView/SubQallView.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import AudioTrack from './AudioTrack.vue'
 import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.vue'
+import AudioComponent from './AudioComponent.vue'
 import { useQall } from '/@/composables/qall/useQall'
 
 const { tracksMap } = useQall()
@@ -19,13 +19,14 @@ const firstVideoTrack = computed(
     v-if="firstVideoTrack"
     :key="firstVideoTrack[0]"
     :track-info="firstVideoTrack[1]"
-    :isLarge=false
+    :is-large="false"
   />
   <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
-    <audio-track
+    <AudioComponent
       v-if="track.trackPublication?.kind === 'audio'"
       :track-info="track"
-      :volume="1"
+      :is-large="false"
+      :is-show="false"
     />
   </template>
 </template>

From 97a9b7775ba96a064122216972f3ad4852d5eb7c Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 17:42:13 +0900
Subject: [PATCH 06/30] =?UTF-8?q?Audio=E5=91=A8=E3=82=8A=E3=81=AE=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E3=82=92=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/AudioComponent.vue |  2 +-
 .../MainView/QallView/DanmakuContainer.vue    |  1 -
 .../MainView/QallView/ParticipantList.vue     |  1 -
 .../Main/MainView/QallView/QallView.vue       | 28 +++++--------------
 src/composables/qall/useLiveKitSDK.ts         |  3 +-
 src/composables/qall/useQall.ts               |  2 ++
 6 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/src/components/Main/MainView/QallView/AudioComponent.vue b/src/components/Main/MainView/QallView/AudioComponent.vue
index e06de3265..ae172d956 100644
--- a/src/components/Main/MainView/QallView/AudioComponent.vue
+++ b/src/components/Main/MainView/QallView/AudioComponent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { computed } from 'vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import { useUsersStore } from '/@/store/entities/users'
 import { buildUserIconPath } from '/@/lib/apis'
diff --git a/src/components/Main/MainView/QallView/DanmakuContainer.vue b/src/components/Main/MainView/QallView/DanmakuContainer.vue
index ebd0612b2..2108fea7e 100644
--- a/src/components/Main/MainView/QallView/DanmakuContainer.vue
+++ b/src/components/Main/MainView/QallView/DanmakuContainer.vue
@@ -8,7 +8,6 @@ import { useDanmakuSparkle } from './useDanmakuSparkle'
 import { useQall } from '/@/composables/qall/useQall'
 
 import { messageMitt } from '/@/store/entities/messages'
-import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import useMittListener from '/@/composables/utils/useMittListener'
 
 const { callingChannel, publishData, qallMitt } = useQall()
diff --git a/src/components/Main/MainView/QallView/ParticipantList.vue b/src/components/Main/MainView/QallView/ParticipantList.vue
index 6fb1c1dd1..97be3f324 100644
--- a/src/components/Main/MainView/QallView/ParticipantList.vue
+++ b/src/components/Main/MainView/QallView/ParticipantList.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import UserIcon from '/@/components/UI/UserIcon.vue'
-import AIcon from '/@/components/UI/AIcon.vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import { useUserVolume } from '/@/store/app/userVolume'
 import { ref, watch, useCssModule, computed } from 'vue'
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 13939ff6a..b892328ac 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useQall } from '/@/composables/qall/useQall'
-import UserList from '/@/components/Main/MainView/QallView/UserList.vue'
 import { onMounted, ref, useTemplateRef, computed } from 'vue'
 import DanmakuContainer from './DanmakuContainer.vue'
 import CallControlButtonSmall from './CallControlButtonSmall.vue'
@@ -22,6 +21,7 @@ const {
   addCameraTrack,
   removeVideoTrack,
   publishData,
+  toggleMicMute,
   qallMitt,
   rooms
 } = useQall()
@@ -30,7 +30,9 @@ const isMicOn = ref(true)
 const isCameraOn = ref(false)
 const isScreenSharing = ref(false)
 
-const micIcon = ref(isMicOn.value ? 'microphone' : 'microphone-off')
+const micIcon = computed(() =>
+  isMicOn.value ? 'microphone' : 'microphone-off'
+)
 const cameraIcon = ref(isCameraOn.value ? 'vide' : 'video-off')
 const screenShareIcon = ref(
   isScreenSharing.value ? 'stop-screen-share' : 'screen-share'
@@ -38,25 +40,9 @@ const screenShareIcon = ref(
 
 const toggleAudio = async () => {
   try {
-    for (const trackInfo of tracksMap.value.values()) {
-      if (
-        !trackInfo.isRemote &&
-        trackInfo.trackPublication?.kind === 'audio' &&
-        trackInfo.trackPublication.track
-      ) {
-        if (isMicOn.value) {
-          await trackInfo.trackPublication.track.mute()
-        } else {
-          await trackInfo.trackPublication.track.unmute()
-        }
-        isMicOn.value = !isMicOn.value
-        micIcon.value = isMicOn.value ? 'microphone' : 'microphone-off'
-        break
-      }
-    }
-  } catch (err) {
-    console.error('Failed to toggle audio:', err)
-  }
+    toggleMicMute()
+    isMicOn.value = !isMicOn.value
+  } catch (err) {}
 }
 
 const toggleVideo = async () => {
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 0bb650271..3830875fd 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -444,7 +444,6 @@ const addScreenShareTrack = async () => {
         ...room.value.localParticipant.attributes,
         [videoSid]: audioSid
       })
-      console.log(room.value.localParticipant.attributes)
     }
   } catch {
     // TODO:シェアをキャンセルした時も失敗しましたメッセージがでるのはちょっと違和感があるかも
@@ -478,7 +477,6 @@ const removeVideoTrack = async (localpublication: LocalTrackPublication) => {
       true
     )
     await room.value.localParticipant.setAttributes(newAttributes)
-    console.log(room.value.localParticipant.attributes)
     if (!audioSid) {
       return
     }
@@ -535,6 +533,7 @@ export const useLiveKitSDK = () => {
     publishData,
     setTrackEnabled,
     setLocalTrackMute,
+    toggleMicTrack,
     tracksMap,
     screenShareTrackSidMap,
     qallMitt
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 9d24292d9..0e6adcf99 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -51,6 +51,7 @@ const {
   addCameraTrack,
   setLocalTrackMute,
   publishData,
+  toggleMicTrack,
   tracksMap,
   screenShareTrackSidMap,
   qallMitt
@@ -157,6 +158,7 @@ export const useQall = () => {
     removeVideoTrack,
     publishData,
     setSpeakerMute,
+    toggleMicMute: toggleMicTrack,
     tracksMap,
     screenShareTrackSidMap,
     qallMitt

From 187724618a9b88c3f41f438b5f183ca0897622d4 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 18:23:01 +0900
Subject: [PATCH 07/30] =?UTF-8?q?=E3=82=B5=E3=82=A6=E3=83=B3=E3=83=89?=
 =?UTF-8?q?=E3=83=9C=E3=83=BC=E3=83=89=E3=81=AEUI=E3=81=AE=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/SoundBoard.vue         | 15 +++++++++++++--
 .../Main/MainView/QallView/SoundBoardElement.vue  |  3 +--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Main/MainView/QallView/SoundBoard.vue b/src/components/Main/MainView/QallView/SoundBoard.vue
index d881cabe2..c40f3ec73 100644
--- a/src/components/Main/MainView/QallView/SoundBoard.vue
+++ b/src/components/Main/MainView/QallView/SoundBoard.vue
@@ -8,8 +8,10 @@ const searchQuery = ref('')
 
 <template>
   <div :class="$style.soundBoard">
-    <FormInput v-model="searchQuery" placeholder="検索" />
-    <SoundBoardElement v-for="i in 10" :key="i" />
+    <div><FormInput v-model="searchQuery" placeholder="検索" /></div>
+    <div :class="$style.elementContainer">
+      <SoundBoardElement v-for="i in 10" :key="i" />
+    </div>
   </div>
 </template>
 
@@ -25,4 +27,13 @@ const searchQuery = ref('')
   border-radius: 0.5rem;
   @include background-primary;
 }
+.elementContainer {
+  width: 31rem;
+  max-width: 100%;
+
+  margin: 0.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 0.25rem;
+}
 </style>
diff --git a/src/components/Main/MainView/QallView/SoundBoardElement.vue b/src/components/Main/MainView/QallView/SoundBoardElement.vue
index fe65c3916..c85b56c85 100644
--- a/src/components/Main/MainView/QallView/SoundBoardElement.vue
+++ b/src/components/Main/MainView/QallView/SoundBoardElement.vue
@@ -19,7 +19,6 @@ const soundName = ref(
 
 <style lang="scss" module>
 .soundBoardContainer {
-  margin: 0.5rem;
   padding: 0.5rem;
   border-radius: 0.5rem;
   gap: 0.5rem;
@@ -29,7 +28,7 @@ const soundName = ref(
     background-color: rgba(0, 100, 255, 1);
     @include background-tertiary;
   }
-  width: 20rem;
+  width: 15rem;
   min-height: 4rem;
   user-select: none;
   @include color-ui-primary;

From 27282ee58a6b1c23d89ccf1e0112e626fefad6ff Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 25 Jan 2025 20:31:14 +0900
Subject: [PATCH 08/30] fix

---
 src/components/Main/MainView/QallView/AudioComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Main/MainView/QallView/AudioComponent.vue b/src/components/Main/MainView/QallView/AudioComponent.vue
index ae172d956..8b4f64446 100644
--- a/src/components/Main/MainView/QallView/AudioComponent.vue
+++ b/src/components/Main/MainView/QallView/AudioComponent.vue
@@ -12,7 +12,7 @@ const {
 } = defineProps<{
   trackInfo: TrackInfo
   isLarge: boolean
-  isShow: boolean
+  isShow?: boolean
 }>()
 const { getStore, setStore, restoringPromise } = useUserVolume()
 const volume = computed<number | string>(

From 61d6589f484bde4632eee25f2228b2e8eda6c0aa Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 00:13:47 +0900
Subject: [PATCH 09/30] =?UTF-8?q?=E9=9F=B3=E5=A3=B0=E3=82=92=E4=B8=80?=
 =?UTF-8?q?=E5=85=83=E7=AE=A1=E7=90=86=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/ChannelView/ChannelView.vue |  2 ++
 .../Main/MainView/QallView/AudioComponent.vue | 10 +++----
 .../Main/MainView/QallView/QallAudio.vue      | 20 +++++++++++++
 .../Main/MainView/QallView/QallView.vue       |  3 +-
 .../Main/MainView/QallView/SubQallView.vue    |  8 ------
 .../Main/MainView/QallView/UserList.vue       |  2 ++
 src/composables/qall/useLiveKitSDK.ts         | 28 +++++--------------
 7 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Main/MainView/QallView/QallAudio.vue

diff --git a/src/components/Main/MainView/ChannelView/ChannelView.vue b/src/components/Main/MainView/ChannelView/ChannelView.vue
index a67cc95d3..aa298c54f 100644
--- a/src/components/Main/MainView/ChannelView/ChannelView.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelView.vue
@@ -4,6 +4,7 @@
       <channel-header :channel-id="channelId" />
     </template>
     <template #default>
+      <QallAudio />
       <QallView v-if="callingChannel === channelId" />
       <channel-view-content
         v-else
@@ -35,6 +36,7 @@ import usePinnedMessages from '/@/composables/message/usePinnedMessages'
 import useCurrentViewers from '/@/composables/useCurrentViewers'
 import { useQall } from '/@/composables/qall/useQall'
 import QallView from '../QallView/QallView.vue'
+import QallAudio from '../QallView/QallAudio.vue'
 
 const props = defineProps<{
   isReady: boolean
diff --git a/src/components/Main/MainView/QallView/AudioComponent.vue b/src/components/Main/MainView/QallView/AudioComponent.vue
index 8b4f64446..78b98d1e7 100644
--- a/src/components/Main/MainView/QallView/AudioComponent.vue
+++ b/src/components/Main/MainView/QallView/AudioComponent.vue
@@ -5,11 +5,7 @@ import { useUsersStore } from '/@/store/entities/users'
 import { buildUserIconPath } from '/@/lib/apis'
 import AudioTrack from './AudioTrack.vue'
 import { useUserVolume } from '/@/store/app/userVolume'
-const {
-  trackInfo,
-  isLarge,
-  isShow = true
-} = defineProps<{
+const { trackInfo, isLarge, isShow } = defineProps<{
   trackInfo: TrackInfo
   isLarge: boolean
   isShow?: boolean
@@ -60,6 +56,8 @@ const parseToFloat = (value: number | string): number => {
   position: relative;
   overflow: hidden;
   border-radius: 12px;
+  pointer-events: none;
+  user-select: none;
 }
 .LargeCard {
   height: 324px;
@@ -67,6 +65,8 @@ const parseToFloat = (value: number | string): number => {
   position: relative;
   overflow: hidden;
   border-radius: 12px;
+  pointer-events: none;
+  user-select: none;
 }
 .InnerIcon {
   height: 64px;
diff --git a/src/components/Main/MainView/QallView/QallAudio.vue b/src/components/Main/MainView/QallView/QallAudio.vue
new file mode 100644
index 000000000..9ee72c08d
--- /dev/null
+++ b/src/components/Main/MainView/QallView/QallAudio.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useQall } from '/@/composables/qall/useQall'
+import AudioComponent from './AudioComponent.vue'
+
+const { tracksMap, screenShareTrackSidMap } = useQall()
+</script>
+<template>
+  <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
+    <AudioComponent
+      v-if="
+        track.trackPublication?.kind === 'audio' &&
+        track.isRemote &&
+        !screenShareTrackSidMap.values()?.some?.(valueSid => valueSid === sid)
+      "
+      :track-info="track"
+      :is-large="false"
+      :is-show="false"
+    />
+  </template>
+</template>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index b892328ac..49cf7c6ac 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -11,6 +11,7 @@ import ClickOutside from '/@/components/UI/ClickOutside'
 import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import ParticipantList from './ParticipantList.vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import UserList from './UserList.vue'
 
 const {
   tracksMap,
@@ -224,6 +225,7 @@ const filteredParticipants = computed(() =>
         Add Camera Track
       </button>
     </div>
+    <UserList />
 
     <div :class="$style.TrackContainer">
       <div :class="$style.controlBar">
@@ -241,7 +243,6 @@ const filteredParticipants = computed(() =>
             />
           </div>
         </div>
-
         <div :class="$style.verticalBar"></div>
         <CallControlButton
           :icon="screenShareIcon"
diff --git a/src/components/Main/MainView/QallView/SubQallView.vue b/src/components/Main/MainView/QallView/SubQallView.vue
index 21c4e471f..43af68edd 100644
--- a/src/components/Main/MainView/QallView/SubQallView.vue
+++ b/src/components/Main/MainView/QallView/SubQallView.vue
@@ -21,12 +21,4 @@ const firstVideoTrack = computed(
     :track-info="firstVideoTrack[1]"
     :is-large="false"
   />
-  <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
-    <AudioComponent
-      v-if="track.trackPublication?.kind === 'audio'"
-      :track-info="track"
-      :is-large="false"
-      :is-show="false"
-    />
-  </template>
 </template>
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index af9cdd186..0dc874b33 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -46,6 +46,7 @@ const selectedSid = ref<string>()
       "
       :track-info="selectedTrack"
       is-large
+      is-show
     />
   </div>
   <div :class="$style.TrackContainer">
@@ -74,6 +75,7 @@ const selectedSid = ref<string>()
         "
         :track-info="track"
         :is-large="false"
+        is-show
         @click="[selectedTrack, selectedSid] = [track, sid]"
       />
     </template>
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 3830875fd..38bee2324 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -179,10 +179,10 @@ const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
           noiseSuppression: true
         },
         {
-          audioPreset: AudioPresets.musicHighQualityStereo,
+          audioPreset: AudioPresets.speech,
           forceStereo: true,
-          red: false,
-          dtx: false
+          red: true,
+          dtx: true
         }
       )
     }
@@ -232,10 +232,10 @@ const addMicTrack = async () => {
         noiseSuppression: true
       },
       {
-        audioPreset: AudioPresets.musicHighQualityStereo,
+        audioPreset: AudioPresets.speech,
         forceStereo: true,
-        red: false,
-        dtx: false
+        red: true,
+        dtx: true
       }
     )
   } catch (e) {
@@ -249,21 +249,7 @@ const removeMicTrack = async () => {
       addErrorToast('ルームが存在しません')
       return
     }
-    await room.value.localParticipant.setMicrophoneEnabled(
-      false,
-      {
-        channelCount: 2,
-        voiceIsolation: true,
-        echoCancellation: true,
-        noiseSuppression: true
-      },
-      {
-        audioPreset: AudioPresets.musicHighQualityStereo,
-        forceStereo: true,
-        red: false,
-        dtx: false
-      }
-    )
+    await room.value.localParticipant.setMicrophoneEnabled(false)
   } catch (e) {
     addErrorToast('マイクのミュートに失敗しました')
   }

From af1c8d2f5f0c398f8cc6cc16f9611849772e890a Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 01:01:00 +0900
Subject: [PATCH 10/30] =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E5=A4=A7=E3=81=8D=E3=81=95?=
 =?UTF-8?q?=E3=82=92=E5=A4=96=E3=81=A7=E5=88=B6=E5=BE=A1=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/AudioComponent.vue | 53 ++++++-------------
 .../QallView/ScreenShareComponent.vue         | 28 ++++++----
 .../Main/MainView/QallView/SubQallView.vue    |  2 -
 .../Main/MainView/QallView/UserList.vue       | 49 +++++++++++------
 .../Main/MainView/QallView/VideoComponent.vue | 27 +++-------
 5 files changed, 74 insertions(+), 85 deletions(-)

diff --git a/src/components/Main/MainView/QallView/AudioComponent.vue b/src/components/Main/MainView/QallView/AudioComponent.vue
index 78b98d1e7..357e07658 100644
--- a/src/components/Main/MainView/QallView/AudioComponent.vue
+++ b/src/components/Main/MainView/QallView/AudioComponent.vue
@@ -5,9 +5,8 @@ import { useUsersStore } from '/@/store/entities/users'
 import { buildUserIconPath } from '/@/lib/apis'
 import AudioTrack from './AudioTrack.vue'
 import { useUserVolume } from '/@/store/app/userVolume'
-const { trackInfo, isLarge, isShow } = defineProps<{
+const { trackInfo, isShow } = defineProps<{
   trackInfo: TrackInfo
-  isLarge: boolean
   isShow?: boolean
 }>()
 const { getStore, setStore, restoringPromise } = useUserVolume()
@@ -30,19 +29,17 @@ const parseToFloat = (value: number | string): number => {
 
 <template>
   <template v-if="isShow">
-    <div>
-      <div :class="isLarge ? $style.LargeCard : $style.UserCard">
-        <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
+    <div :class="$style.UserCard">
+      <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
 
-        <div :class="$style.OuterIcon">
-          <img :src="iconImage" :class="$style.OuterImage" />
-        </div>
-        <div :class="isLarge ? $style.LargeInnerIcon : $style.InnerIcon">
-          <img :src="iconImage" :class="$style.InnerImage" />
-        </div>
-
-        <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
+      <div :class="$style.OuterIcon">
+        <img :src="iconImage" :class="$style.OuterImage" />
+      </div>
+      <div :class="$style.InnerIcon">
+        <img :src="iconImage" :class="$style.InnerImage" />
       </div>
+
+      <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
     </div>
   </template>
   <template v-else>
@@ -51,38 +48,18 @@ const parseToFloat = (value: number | string): number => {
 </template>
 <style lang="scss" module>
 .UserCard {
-  height: 108px;
-  width: 192px;
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
-  pointer-events: none;
-  user-select: none;
-}
-.LargeCard {
-  height: 324px;
-  width: 576px;
+  height: 100%;
+  width: 100%;
   position: relative;
   overflow: hidden;
   border-radius: 12px;
   pointer-events: none;
   user-select: none;
 }
+
 .InnerIcon {
-  height: 64px;
-  width: 64px;
-  background-size: cover;
-  border-radius: 50%;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.LargeInnerIcon {
-  height: 192px;
-  width: 192px;
+  width: calc(100% / 3);
+  aspect-ratio: 1;
   background-size: cover;
   border-radius: 50%;
   margin: auto;
diff --git a/src/components/Main/MainView/QallView/ScreenShareComponent.vue b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
index 563c9978a..2789aa208 100644
--- a/src/components/Main/MainView/QallView/ScreenShareComponent.vue
+++ b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
@@ -8,6 +8,7 @@ const { trackInfo, audioTrackInfo } = defineProps<{
   trackInfo: TrackInfo
   audioTrackInfo: TrackInfo | undefined
   isLarge: boolean
+  notMute?: boolean
 }>()
 
 const volume = ref(1)
@@ -28,24 +29,33 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div :id="'camera-' + trackInfo.username">
-    <VideoComponent
-      v-if="trackInfo.trackPublication"
-      :track-info="trackInfo"
-      :is-large="isLarge"
-    />
+  <div :class="$style.container">
+    <VideoComponent v-if="trackInfo.trackPublication" :track-info="trackInfo" />
     <AudioTrack
-      v-if="audioTrackInfo?.trackPublication"
+      v-if="notMute && trackInfo.isRemote && audioTrackInfo?.trackPublication"
       :track-info="audioTrackInfo"
       :volume="volume"
     />
+    <input
+      v-if="notMute && trackInfo.isRemote && audioTrackInfo?.trackPublication"
+      v-model="volume"
+      type="range"
+      min="0"
+      max="2"
+      step="0.01"
+      :class="$style.volume"
+    />
   </div>
-  <input v-model="volume" type="range" min="0" max="3" step="0.01" />
 </template>
 
 <style lang="scss" module>
-.video {
+.container {
   width: 100%;
   height: 100%;
 }
+.volume {
+  position: absolute;
+  bottom: 0;
+  right: 4px;
+}
 </style>
diff --git a/src/components/Main/MainView/QallView/SubQallView.vue b/src/components/Main/MainView/QallView/SubQallView.vue
index 43af68edd..07123f04b 100644
--- a/src/components/Main/MainView/QallView/SubQallView.vue
+++ b/src/components/Main/MainView/QallView/SubQallView.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.vue'
-import AudioComponent from './AudioComponent.vue'
 import { useQall } from '/@/composables/qall/useQall'
 
 const { tracksMap } = useQall()
@@ -19,6 +18,5 @@ const firstVideoTrack = computed(
     v-if="firstVideoTrack"
     :key="firstVideoTrack[0]"
     :track-info="firstVideoTrack[1]"
-    :is-large="false"
   />
 </template>
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 0dc874b33..745266d5c 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -19,14 +19,13 @@ const selectedSid = ref<string>()
 </script>
 
 <template>
-  <div v-if="selectedTrack !== undefined">
+  <div v-if="selectedTrack !== undefined" :class="$style.largeCard">
     <VideoComponent
       v-if="
         selectedTrack.trackPublication?.kind === 'video' &&
         !screenShareTrackSidMap.has(selectedSid ?? '')
       "
       :track-info="selectedTrack"
-      is-large
     />
     <ScreenShareComponent
       v-else-if="selectedTrack.trackPublication?.kind === 'video'"
@@ -45,39 +44,46 @@ const selectedSid = ref<string>()
           ?.some?.(valueSid => valueSid === selectedSid)
       "
       :track-info="selectedTrack"
-      is-large
       is-show
     />
   </div>
   <div :class="$style.TrackContainer">
     <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
-      <VideoComponent
+      <div
         v-if="
           track.trackPublication?.kind === 'video' &&
           !screenShareTrackSidMap.has(sid)
         "
-        :track-info="track"
-        :is-large="false"
+        :class="$style.card"
         @click="[selectedTrack, selectedSid] = [track, sid]"
-      />
-      <ScreenShareComponent
+      >
+        <VideoComponent :track-info="track" />
+      </div>
+
+      <div
         v-else-if="track.trackPublication?.kind === 'video'"
-        :track-info="track"
-        :audio-track-info="tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')"
-        :is-large="false"
+        :class="$style.card"
         @click="[selectedTrack, selectedSid] = [track, sid]"
-      />
-      <AudioComponent
+      >
+        <ScreenShareComponent
+          :track-info="track"
+          :audio-track-info="
+            tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')
+          "
+          :is-large="false"
+        />
+      </div>
+      <div
         v-else-if="
           track.trackPublication?.kind === 'audio' &&
           track.isRemote &&
           !screenShareTrackSidMap.values()?.some?.(valueSid => valueSid === sid)
         "
-        :track-info="track"
-        :is-large="false"
-        is-show
+        :class="$style.card"
         @click="[selectedTrack, selectedSid] = [track, sid]"
-      />
+      >
+        <AudioComponent :track-info="track" is-show />
+      </div>
     </template>
   </div>
 </template>
@@ -85,9 +91,18 @@ const selectedSid = ref<string>()
 <style lang="scss" module>
 .TrackContainer {
   display: flex;
+
   justify-content: center;
   align-items: center;
   gap: 8px;
   align-self: stretch;
 }
+.card {
+  height: 108px;
+  width: 192px;
+}
+.largeCard {
+  height: 324px;
+  width: 576px;
+}
 </style>
diff --git a/src/components/Main/MainView/QallView/VideoComponent.vue b/src/components/Main/MainView/QallView/VideoComponent.vue
index c1a1280af..41186421e 100644
--- a/src/components/Main/MainView/QallView/VideoComponent.vue
+++ b/src/components/Main/MainView/QallView/VideoComponent.vue
@@ -3,26 +3,23 @@ import { useQall } from '/@/composables/qall/useQall'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import VideoTrack from './VideoTrack.vue'
 
-const { trackInfo, isLarge } = defineProps<{
+const { trackInfo } = defineProps<{
   trackInfo: TrackInfo
-  isLarge: boolean
 }>()
 
 const { removeVideoTrack } = useQall()
 </script>
 
 <template>
-  <div :id="'camera-' + trackInfo.username">
-    <div :class="isLarge ? $style.LargeCard : $style.UserCard">
-      <VideoTrack :track-info="trackInfo" :class="$style.video" />
-      <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
-    </div>
-    <button
+  <div :class="$style.UserCard">
+    <!-- <button
       v-if="!trackInfo.isRemote && trackInfo.trackPublication"
       @click="removeVideoTrack(trackInfo.trackPublication)"
     >
       Remove Video
-    </button>
+    </button> -->
+    <VideoTrack :track-info="trackInfo" :class="$style.video" />
+    <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
   </div>
 </template>
 
@@ -44,20 +41,12 @@ const { removeVideoTrack } = useQall()
   color: #fff;
 }
 .UserCard {
-  height: 108px;
-  width: 192px;
   background-color: #000;
   position: relative;
   overflow: hidden;
   border-radius: 12px;
-}
-.LargeCard {
-  height: 324px;
-  width: 576px;
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
 
-  background-color: #000;
+  width: 100%;
+  height: 100%;
 }
 </style>

From 13cbf1d50ff61539820b11e02668d97a0945ee94 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 02:29:57 +0900
Subject: [PATCH 11/30] =?UTF-8?q?Audio=E3=81=8Cunmount=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=81=A6=E3=82=82=E9=9F=B3=E3=81=8C=E3=81=A7=E3=82=8B=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/QallView/AudioTrack.vue |  2 +-
 src/components/Main/MainView/QallView/QallAudio.vue  |  7 +++----
 src/components/Main/MainView/QallView/QallView.vue   |  7 ++++---
 src/components/Main/MainView/QallView/UserList.vue   |  5 +++--
 src/composables/qall/useLiveKitSDK.ts                | 10 +++++++---
 src/composables/qall/useQall.ts                      |  2 ++
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/Main/MainView/QallView/AudioTrack.vue b/src/components/Main/MainView/QallView/AudioTrack.vue
index 7c015a3d0..f38deee08 100644
--- a/src/components/Main/MainView/QallView/AudioTrack.vue
+++ b/src/components/Main/MainView/QallView/AudioTrack.vue
@@ -34,9 +34,9 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  audioContext.close()
   if (audioElement.value) {
     trackInfo.trackPublication?.track?.detach(audioElement.value)
-    audioContext.close()
   }
 })
 </script>
diff --git a/src/components/Main/MainView/QallView/QallAudio.vue b/src/components/Main/MainView/QallView/QallAudio.vue
index 9ee72c08d..a10081a63 100644
--- a/src/components/Main/MainView/QallView/QallAudio.vue
+++ b/src/components/Main/MainView/QallView/QallAudio.vue
@@ -2,18 +2,17 @@
 import { useQall } from '/@/composables/qall/useQall'
 import AudioComponent from './AudioComponent.vue'
 
-const { tracksMap, screenShareTrackSidMap } = useQall()
+const { tracksMap, screenShareTrackSidMap, screenShareTracks } = useQall()
 </script>
 <template>
-  <template v-for="[sid, track] in tracksMap.entries()" :key="sid">
+  <template v-for="[sid, track] in Array.from(tracksMap.entries())" :key="sid">
     <AudioComponent
       v-if="
         track.trackPublication?.kind === 'audio' &&
         track.isRemote &&
-        !screenShareTrackSidMap.values()?.some?.(valueSid => valueSid === sid)
+        !screenShareTracks?.some?.(([_, valueSid]) => valueSid === sid)
       "
       :track-info="track"
-      :is-large="false"
       :is-show="false"
     />
   </template>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 49cf7c6ac..39f256011 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -16,6 +16,7 @@ import UserList from './UserList.vue'
 const {
   tracksMap,
   screenShareTrackSidMap,
+  screenShareTracks,
   callingChannel,
   leaveQall,
   addScreenShareTrack,
@@ -153,9 +154,9 @@ const getParticipantTrackInfo = (participant: {
     if (
       trackInfo.username === participant.user.name &&
       trackInfo.trackPublication?.kind === 'audio' &&
-      !screenShareTrackSidMap.value
-        .values()
-        ?.some?.(valueSid => valueSid === trackInfo.trackPublication?.trackSid)
+      !screenShareTracks.value?.some?.(
+        ([_, valueSid]) => valueSid === trackInfo.trackPublication?.trackSid
+      )
     ) {
       return trackInfo
     }
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 745266d5c..d47d4d575 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -34,6 +34,7 @@ const selectedSid = ref<string>()
         tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
       "
       is-large
+      not-mute
     />
     <AudioComponent
       v-else-if="
@@ -73,7 +74,7 @@ const selectedSid = ref<string>()
           :is-large="false"
         />
       </div>
-      <div
+      <!-- <div
         v-else-if="
           track.trackPublication?.kind === 'audio' &&
           track.isRemote &&
@@ -83,7 +84,7 @@ const selectedSid = ref<string>()
         @click="[selectedTrack, selectedSid] = [track, sid]"
       >
         <AudioComponent :track-info="track" is-show />
-      </div>
+      </div> -->
     </template>
   </div>
 </template>
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 38bee2324..6d294d5c8 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -15,7 +15,7 @@ import type {
   Participant,
   LocalTrack
 } from 'livekit-client'
-import { ref, type Ref } from 'vue'
+import { computed, ref, watch, watchEffect, type Ref } from 'vue'
 import { useToastStore } from '/@/store/ui/toast'
 import apis from '/@/lib/apis'
 import { VirtualBackgroundProcessor } from '@shiguredo/virtual-background'
@@ -189,9 +189,9 @@ const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
 
     await room.value.localParticipant.setAttributes({})
     room.value.remoteParticipants.forEach(participant => {
-      Object.keys(participant.attributes).forEach(key =>
+      Object.keys(participant.attributes).forEach(key => {
         screenShareTrackSidMap.value.set(key, participant.attributes[key] ?? '')
-      )
+      })
     })
   } catch {
     addErrorToast('Qallの接続に失敗しました')
@@ -200,6 +200,9 @@ const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
 
   window.addEventListener('beforeunload', leaveRoom)
 }
+const screenShareTracks = computed(() =>
+  Array.from(screenShareTrackSidMap.value.entries())
+)
 
 async function leaveRoom() {
   // Leave the room by calling 'disconnect' method over the Room object
@@ -522,6 +525,7 @@ export const useLiveKitSDK = () => {
     toggleMicTrack,
     tracksMap,
     screenShareTrackSidMap,
+    screenShareTracks,
     qallMitt
   }
 }
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 0e6adcf99..41c30376e 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -54,6 +54,7 @@ const {
   toggleMicTrack,
   tracksMap,
   screenShareTrackSidMap,
+  screenShareTracks,
   qallMitt
 } = useLiveKitSDK()
 const { myId } = useMeStore()
@@ -161,6 +162,7 @@ export const useQall = () => {
     toggleMicMute: toggleMicTrack,
     tracksMap,
     screenShareTrackSidMap,
+    screenShareTracks,
     qallMitt
   }
 }

From 369e0ad8b99971a11ea68ce4982540c1734da280 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 02:45:26 +0900
Subject: [PATCH 12/30] =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainView/QallView/ScreenShareComponent.vue  | 17 ++---------------
 .../Main/MainView/QallView/UserList.vue         |  8 ++++----
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/components/Main/MainView/QallView/ScreenShareComponent.vue b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
index 2789aa208..094698e54 100644
--- a/src/components/Main/MainView/QallView/ScreenShareComponent.vue
+++ b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
@@ -12,20 +12,6 @@ const { trackInfo, audioTrackInfo } = defineProps<{
 }>()
 
 const volume = ref(1)
-
-const videoElement = useTemplateRef<HTMLVideoElement>('videoElement')
-
-onMounted(() => {
-  if (videoElement.value) {
-    trackInfo.trackPublication?.track?.attach(videoElement.value)
-  }
-})
-
-onUnmounted(() => {
-  if (videoElement.value) {
-    trackInfo.trackPublication?.track?.detach(videoElement.value)
-  }
-})
 </script>
 
 <template>
@@ -37,7 +23,6 @@ onUnmounted(() => {
       :volume="volume"
     />
     <input
-      v-if="notMute && trackInfo.isRemote && audioTrackInfo?.trackPublication"
       v-model="volume"
       type="range"
       min="0"
@@ -52,10 +37,12 @@ onUnmounted(() => {
 .container {
   width: 100%;
   height: 100%;
+  position: relative;
 }
 .volume {
   position: absolute;
   bottom: 0;
   right: 4px;
+  width: 4rem;
 }
 </style>
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index d47d4d575..51d1a70c8 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -6,7 +6,7 @@ import { onMounted, ref } from 'vue'
 import ScreenShareComponent from './ScreenShareComponent.vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 
-const { tracksMap, screenShareTrackSidMap } = useQall()
+const { tracksMap, screenShareTrackSidMap, screenShareTracks } = useQall()
 
 const videoInputs = ref<MediaDeviceInfo[]>([])
 onMounted(async () => {
@@ -74,17 +74,17 @@ const selectedSid = ref<string>()
           :is-large="false"
         />
       </div>
-      <!-- <div
+      <div
         v-else-if="
           track.trackPublication?.kind === 'audio' &&
           track.isRemote &&
-          !screenShareTrackSidMap.values()?.some?.(valueSid => valueSid === sid)
+          !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
         "
         :class="$style.card"
         @click="[selectedTrack, selectedSid] = [track, sid]"
       >
         <AudioComponent :track-info="track" is-show />
-      </div> -->
+      </div>
     </template>
   </div>
 </template>

From f8ccdbdcc926261bc41ff24f6cd26dd8cfb522eb Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 03:48:52 +0900
Subject: [PATCH 13/30] =?UTF-8?q?UI=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainView/QallView/CameraDetailSetting.vue | 234 +++++++++---------
 .../Main/MainView/QallView/QallView.vue       |  58 +----
 .../QallView/ScreenShareDetailSetting.vue     | 100 ++------
 src/composables/qall/useQall.ts               |  18 ++
 4 files changed, 161 insertions(+), 249 deletions(-)

diff --git a/src/components/Main/MainView/QallView/CameraDetailSetting.vue b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
index 9e332c6a2..b27999713 100644
--- a/src/components/Main/MainView/QallView/CameraDetailSetting.vue
+++ b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, onMounted } from 'vue'
+import { ref, defineProps, defineEmits, onMounted, watch } from 'vue'
 import { useQall } from '/@/composables/qall/useQall'
 import FormButton from '/@/components/UI/FormButton.vue'
+import ClickOutside from '/@/components/UI/ClickOutside'
 
 const props = defineProps<{
   open: boolean
@@ -14,7 +15,7 @@ const emit = defineEmits<{
     data: {
       backgroundType: 'original' | 'blur' | 'file' | 'screen'
       backgroundImage?: File
-      selectedVideoInput: MediaDeviceInfo
+      selectedVideoInput?: MediaDeviceInfo
     }
   ): void
   (e: 'add'): void
@@ -28,6 +29,9 @@ const selectedVideoInput = ref<MediaDeviceInfo>()
 
 const { addCameraTrack } = useQall()
 
+watch(selectedCamera, () => {
+  handleSave()
+})
 onMounted(() => {
   if (props.videoInputs[0] !== undefined && props.videoInputs.length > 0) {
     selectedCamera.value = props.videoInputs[0].deviceId
@@ -39,6 +43,7 @@ const handleFileChange = (e: Event) => {
   const target = e.target as HTMLInputElement
   if (target.files?.[0]) {
     backgroundImage.value = target.files[0]
+    handleSave()
   }
 }
 
@@ -46,16 +51,12 @@ const handleSave = () => {
   const selectedVideoInput = props.videoInputs.find(
     d => d.deviceId === selectedCamera.value
   )
-  if (selectedVideoInput) {
-    emit('save', {
-      backgroundType: backgroundType.value,
-      backgroundImage: backgroundImage.value,
-      selectedVideoInput
-    })
-    emit('close')
-  } else {
-    console.error('No video input device selected')
-  }
+
+  emit('save', {
+    backgroundType: backgroundType.value,
+    backgroundImage: backgroundImage.value,
+    selectedVideoInput
+  })
 }
 
 const handleAddCameraTrack = () => {
@@ -74,114 +75,121 @@ const handleClose = () => {
 </script>
 
 <template>
-  <div v-if="open" class="popover-container">
-    <div class="popover-content">
-      <div>
-        <h3 class="popover-title">カメラ設定</h3>
-        <div class="form-group">
-          <div class="form-item">
-            <label for="camera-select" class="form-item-label"
-              >カメラを選択</label
-            >
-            <select id="camera-select" v-model="selectedCamera" class="input">
-              <option value="" disabled>選択してください</option>
-              <option
-                v-for="device in videoInputs"
-                :key="device.deviceId"
-                :value="device.deviceId"
+  <div v-if="open" :class="$style.popoverContainer">
+    <ClickOutside @click-outside="handleClose">
+      <div :class="$style.popoverContent">
+        <div>
+          <h3 :class="$style.popoverTitle">カメラ設定</h3>
+          <div :class="$style.formGroup">
+            <div :class="$style.formItem">
+              <label for="camera-select" :class="$style.formItemLabel"
+                >カメラを選択</label
               >
-                {{ device.label || 'No Label' }}
-              </option>
-            </select>
-          </div>
+              <select
+                id="camera-select"
+                v-model="selectedCamera"
+                :class="$style.input"
+              >
+                <option value="" disabled>選択してください</option>
+                <option
+                  v-for="device in videoInputs"
+                  :key="device.deviceId"
+                  :value="device.deviceId"
+                >
+                  {{ device.label || 'No Label' }}
+                </option>
+              </select>
+            </div>
 
-          <div class="form-item">
-            <label class="form-item-label">背景を選択</label>
-            <div class="radio-group">
-              <div class="radio-item">
-                <input
-                  id="original"
-                  v-model="backgroundType"
-                  type="radio"
-                  value="original"
-                />
-                <label for="original" class="radio-label">
-                  <span>Original</span>
-                </label>
-              </div>
-              <div class="radio-item">
-                <input
-                  id="blur"
-                  v-model="backgroundType"
-                  type="radio"
-                  value="blur"
-                />
-                <label for="blur" class="radio-label">
-                  <span>Blur</span>
-                </label>
+            <div :class="$style.formItem">
+              <label :class="$style.formItemLabel">背景を選択</label>
+              <div :class="$style.radioGroup">
+                <div :class="$style.radioItem">
+                  <input
+                    id="original"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="original"
+                  />
+                  <label for="original" :class="$style.radioLabel">
+                    <span>Original</span>
+                  </label>
+                </div>
+                <div :class="$style.radioItem">
+                  <input
+                    id="blur"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="blur"
+                  />
+                  <label for="blur" :class="$style.radioLabel">
+                    <span>Blur</span>
+                  </label>
+                </div>
+                <div :class="$style.radioItem">
+                  <input
+                    id="file"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="file"
+                  />
+                  <label for="file" :class="$style.radioLabel">
+                    <span>File</span>
+                  </label>
+                </div>
+                <div :class="$style.radioItem">
+                  <input
+                    id="screen"
+                    v-model="backgroundType"
+                    type="radio"
+                    value="screen"
+                  />
+                  <label for="screen" :class="$style.radioLabel">
+                    <span>Screen</span>
+                  </label>
+                </div>
               </div>
-              <div class="radio-item">
-                <input
-                  id="file"
-                  v-model="backgroundType"
-                  type="radio"
-                  value="file"
-                />
-                <label for="file" class="radio-label">
-                  <span>File</span>
-                </label>
-              </div>
-              <div class="radio-item">
+            </div>
+
+            <div v-if="backgroundType === 'file'" :class="$style.formItem">
+              <button type="button" :class="$style.fileButton">
+                背景画像を選択
                 <input
-                  id="screen"
-                  v-model="backgroundType"
-                  type="radio"
-                  value="screen"
+                  type="file"
+                  :class="$style.fileInput"
+                  accept="image/*,video/*"
+                  @change="handleFileChange"
                 />
-                <label for="screen" class="radio-label">
-                  <span>Screen</span>
-                </label>
-              </div>
+              </button>
+              <p v-if="backgroundImage" :class="$style.fileName">
+                選択中: {{ backgroundImage.name }}
+              </p>
             </div>
           </div>
-
-          <div v-if="backgroundType === 'file'" class="form-item">
-            <button type="button" class="file-button">
-              背景画像を選択
-              <input
-                type="file"
-                class="file-input"
-                accept="image/*"
-                @change="handleFileChange"
-              />
-            </button>
-            <p v-if="backgroundImage" class="file-name">
-              選択中: {{ backgroundImage.name }}
-            </p>
-          </div>
         </div>
-      </div>
 
-      <div class="actions">
-        <FormButton label="保存" type="primary" @click="handleSave" />
-        <FormButton
-          label="カメラを追加"
-          type="tertiary"
-          @click="handleAddCameraTrack"
-        />
-        <FormButton label="閉じる" type="secondary" @click="handleClose" />
+        <div :class="$style.actions">
+          <FormButton label="保存" type="primary" @click="handleSave" />
+          <FormButton
+            label="カメラを追加"
+            type="tertiary"
+            @click="handleAddCameraTrack"
+          />
+          <FormButton label="閉じる" type="secondary" @click="handleClose" />
+        </div>
       </div>
-    </div>
+    </ClickOutside>
   </div>
 </template>
 
-<style scoped lang="scss">
-.popover-container {
+<style module lang="scss">
+.popoverContainer {
   position: absolute;
   z-index: 50;
+  bottom: 0;
 }
 
-.popover-content {
+.popoverContent {
   @include background-primary;
   @include color-ui-primary;
   padding: 24px;
@@ -191,25 +199,25 @@ const handleClose = () => {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
-.popover-title {
+.popoverTitle {
   font-size: 1.25rem;
   margin-bottom: 16px;
   font-weight: bold;
 }
 
-.form-group {
+.formGroup {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-.form-item {
+.formItem {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.form-item-label {
+.formItemLabel {
   font-weight: bold;
 }
 
@@ -221,25 +229,25 @@ const handleClose = () => {
   border: 1px solid $theme-ui-secondary-default;
 }
 
-.radio-group {
+.radioGroup {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.radio-item {
+.radioItem {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.radio-label {
+.radioLabel {
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
-.file-button {
+.fileButton {
   position: relative;
   padding: 12px 16px;
   border-radius: 4px;
@@ -250,14 +258,14 @@ const handleClose = () => {
   overflow: hidden;
 }
 
-.file-input {
+.fileInput {
   position: absolute;
   inset: 0;
   opacity: 0;
   cursor: pointer;
 }
 
-.file-name {
+.fileName {
   font-size: 0.875rem;
   color: $theme-text-secondary-default;
 }
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index d1af3c094..994dff375 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -62,17 +62,16 @@ 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')
+          !trackInfo.trackPublication.source?.includes('screen')
         ) {
           await removeVideoTrack(trackInfo.trackPublication)
-          break
         }
       }
       isCameraOn.value = false
     }
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error('Failed to toggle video:', err)
   }
 }
@@ -86,17 +85,16 @@ 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')
+          trackInfo.trackPublication.source?.includes('screen')
         ) {
           await removeVideoTrack(trackInfo.trackPublication)
-          break
         }
       }
       isScreenSharing.value = false
     }
   } catch (err) {
+    // eslint-disable-next-line no-console
     console.error('Failed to toggle screen sharing:', err)
   }
 }
@@ -178,7 +176,6 @@ const handleBackgroundSave = (data: {
   backgroundType.value = data.backgroundType
   backgroundImage.value = data.backgroundImage
   showCameraDetailSetting.value = false
-  console.log(data.selectedVideoInput)
 }
 
 const showCameraDetailSetting = ref(false)
@@ -197,50 +194,7 @@ const showShareScreenSettingDetail = ref(false)
       :class="$style.channelView"
     />
     <h1 :class="$style.Header">Qall View</h1>
-    <div>
-      <button @click="addScreenShareTrack">Add Screen Share Track</button>
-      <select v-model="selectedVideoInput">
-        <option
-          v-for="videoInput in videoInputs"
-          :key="videoInput.deviceId"
-          :value="videoInput"
-        >
-          {{ videoInput.label }}
-        </option>
-      </select>
 
-      <input
-        id="original"
-        v-model="backgroundType"
-        type="radio"
-        value="original"
-      />
-      <label for="original">original</label>
-      <input id="blur" v-model="backgroundType" type="radio" value="blur" />
-      <label for="blur">blur</label>
-      <input id="file" v-model="backgroundType" type="radio" value="file" />
-      <label for="file">file</label>
-      <input id="screen" v-model="backgroundType" type="radio" value="screen" />
-      <label for="screen">screen</label>
-
-      <input
-        type="file"
-        @change="
-          e => {
-            const target = e.target as HTMLInputElement
-            backgroundImage = target?.files?.[0]
-          }
-        "
-      />
-      <button
-        @click="[
-          addCameraTrack(selectedVideoInput, backgroundType, backgroundImage),
-          console.log(selectedVideoInput)
-        ]"
-      >
-        Add Camera Track
-      </button>
-    </div>
     <UserList />
 
     <div :class="$style.TrackContainer">
@@ -280,9 +234,6 @@ const showShareScreenSettingDetail = ref(false)
             @add="
               () => {
                 isScreenSharing = true
-                screenShareIcon = isScreenSharing
-                  ? 'stop-screen-share'
-                  : 'screen-share'
               }
             "
             @close="
@@ -314,7 +265,6 @@ const showShareScreenSettingDetail = ref(false)
             @add="
               () => {
                 isCameraOn = true
-                cameraIcon = isCameraOn ? 'video' : 'video-off'
               }
             "
             @close="
diff --git a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
index fb5a37e33..47dff684a 100644
--- a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
+++ b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
@@ -2,6 +2,7 @@
 import { defineProps, defineEmits } from 'vue'
 import { useQall } from '/@/composables/qall/useQall'
 import FormButton from '/@/components/UI/FormButton.vue'
+import ClickOutside from '/@/components/UI/ClickOutside'
 
 const props = defineProps<{
   open: boolean
@@ -26,111 +27,46 @@ const handleClose = () => {
 </script>
 
 <template>
-  <div v-if="open" class="popover-container">
-    <div class="popover-content">
-      <h3 class="popover-title">画面共有設定</h3>
-      <div class="actions">
-        <FormButton
-          label="画面共有を追加"
-          type="tertiary"
-          @click="handleScreenShare"
-        />
-        <FormButton label="閉じる" type="secondary" @click="handleClose" />
+  <ClickOutside @click-outside="handleClose">
+    <div v-if="open" :class="$style.popoverContainer">
+      <div :class="$style.popoverContent">
+        <h3 :class="$style.popoverTitle">画面共有の設定</h3>
+        <div :class="$style.actions">
+          <FormButton
+            label="画面共有を追加"
+            type="tertiary"
+            @click="handleScreenShare"
+          />
+        </div>
       </div>
     </div>
-  </div>
+  </ClickOutside>
 </template>
 
-<style scoped lang="scss">
-.popover-container {
+<style module lang="scss">
+.popoverContainer {
   position: absolute;
   z-index: 50;
 }
 
-.popover-content {
+.popoverContent {
   @include background-primary;
   @include color-ui-primary;
   padding: 24px;
   border-radius: 8px;
-  width: 500px;
   border: 1px solid $theme-text-primary-default;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  width: 15rem;
 }
 
-.popover-title {
+.popoverTitle {
   font-size: 1.25rem;
   margin-bottom: 16px;
   font-weight: bold;
 }
 
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.form-item-label {
-  font-weight: bold;
-}
-
-.input {
-  padding: 8px;
-  border-radius: 4px;
-  @include background-primary;
-  @include color-ui-primary;
-  border: 1px solid $theme-ui-secondary-default;
-}
-
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.radio-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.radio-label {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.file-button {
-  position: relative;
-  padding: 12px 16px;
-  border-radius: 4px;
-  @include background-primary;
-  @include color-ui-primary;
-  border: 1px solid $theme-ui-secondary-default;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-.file-input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.file-name {
-  font-size: 0.875rem;
-  color: $theme-text-secondary-default;
-}
-
 .actions {
   display: flex;
-  justify-content: flex-end;
   gap: 8px;
   margin-top: 16px;
 }
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 41c30376e..01c052e44 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -10,6 +10,7 @@ import { useUsersStore } from '/@/store/entities/users'
 import { messageMitt } from '/@/store/entities/messages'
 import { useTts } from '/@/store/app/tts'
 import { useRtcSettings } from '/@/store/app/rtcSettings'
+import apis from '/@/lib/apis'
 
 type RoomsWithParticipants =
   | {
@@ -66,6 +67,22 @@ const { addQueue } = useTts()
 const meStore = useMeStore()
 const rtcSettings = useRtcSettings()
 
+const qallFetch = async (
+  input: string | URL | globalThis.Request,
+  init?: RequestInit
+) => {
+  const traQtoken = (await apis.getMyQRCode(true)).data
+  const res = await fetch(input, {
+    ...init,
+    headers: {
+      ...init?.headers,
+      Authorization: `Bearer ${traQtoken}`,
+      'Content-Type': 'application/json'
+    }
+  })
+  return res
+}
+
 const purifyRoomData = async (data: RoomsWithParticipants): Promise<Rooms> => {
   if (!data) return []
   await bothChannelsMapInitialFetchPromise.value
@@ -160,6 +177,7 @@ export const useQall = () => {
     publishData,
     setSpeakerMute,
     toggleMicMute: toggleMicTrack,
+    qallFetch,
     tracksMap,
     screenShareTrackSidMap,
     screenShareTracks,

From a875d1707f3d198ffa6d083dd1d01d112658f908 Mon Sep 17 00:00:00 2001
From: pikachu0310 <pikachu13711@gmail.com>
Date: Sun, 26 Jan 2025 04:04:07 +0900
Subject: [PATCH 14/30] =?UTF-8?q?=E2=9C=A8=20GET=20/soundboard=20&=20POST?=
 =?UTF-8?q?=20/soundboard=20POST=20&=20/soundboard/play=20=E3=81=AE?=
 =?UTF-8?q?=E3=82=B5=E3=83=BC=E3=83=90=E6=8E=A5=E7=B6=9A=E5=87=A6=E7=90=86?=
 =?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

---
 src/composables/qall/useQall.ts | 83 ++++++++++++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 1 deletion(-)

diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 01c052e44..90c01bebe 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -67,6 +67,10 @@ const { addQueue } = useTts()
 const meStore = useMeStore()
 const rtcSettings = useRtcSettings()
 
+/**
+ * 認証付きFetch
+ * qallFetch(input, init) -> fetch(...) にBearerトークンやheadersを付与
+ */
 const qallFetch = async (
   input: string | URL | globalThis.Request,
   init?: RequestInit
@@ -83,6 +87,80 @@ const qallFetch = async (
   return res
 }
 
+/** 内部で使うサウンドボード一覧の型(サーバレスポンス) */
+type SoundboardItem = {
+  soundId: string
+  soundName: string
+  stampId: string
+  creatorId: string
+}
+/** サウンドボード一覧 */
+type SoundboardListResponse = SoundboardItem[]
+
+/**
+ * GET /soundboard
+ * サウンドボード一覧を取得する
+ */
+const getSoundboardList = async (): Promise<SoundboardListResponse> => {
+  const res = await qallFetch('/api/soundboard', { method: 'GET' })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`GET /soundboard failed: ${text}`)
+  }
+  return (await res.json()) as SoundboardListResponse
+}
+
+/**
+ * POST /soundboard (multipart/form-data)
+ * @param file アップロードする音声ファイル (15秒～20秒以内)
+ * @param soundName ユーザがつける音声の名前
+ */
+const postSoundboard = async (
+  file: File,
+  soundName: string
+): Promise<{ soundId: string }> => {
+  // multipart送信のため、FormDataを利用
+  const formData = new FormData()
+  formData.append('audio', file)
+  formData.append('soundName', soundName)
+
+  // Content-Typeは自動設定させたいので、init.headers で空文字を指定して上書きする
+  const res = await qallFetch('/api/soundboard', {
+    method: 'POST',
+    // 下記の書き方で 'application/json' を上書きしないようにする
+    headers: {
+      'Content-Type': ''
+    },
+    body: formData
+  })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`POST /soundboard failed: ${text}`)
+  }
+  return await res.json()
+}
+
+/**
+ * POST /soundboard/play
+ * @param soundId 再生したい音声のID
+ * @param roomName 対象ルームのUUID文字列
+ */
+const postSoundboardPlay = async (soundId: string, roomName: string) => {
+  const body = { soundId, roomName }
+  const res = await qallFetch('/api/soundboard/play', {
+    method: 'POST',
+    body: JSON.stringify(body)
+    // headers: Content-Type は JSONでOK
+    // 問題なくqallFetch内で 'application/json' が付与される
+  })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`POST /soundboard/play failed: ${text}`)
+  }
+  // 正常時に IngressInfo(ingressId, url, streamKey)が返る想定
+  return await res.json()
+}
+
 const purifyRoomData = async (data: RoomsWithParticipants): Promise<Rooms> => {
   if (!data) return []
   await bothChannelsMapInitialFetchPromise.value
@@ -181,6 +259,9 @@ export const useQall = () => {
     tracksMap,
     screenShareTrackSidMap,
     screenShareTracks,
-    qallMitt
+    qallMitt,
+    getSoundboardList,
+    postSoundboard,
+    postSoundboardPlay
   }
 }

From 03a8d24d6e18964cad3f72c658004c91ad734c9b Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 04:31:38 +0900
Subject: [PATCH 15/30] =?UTF-8?q?=E3=82=B5=E3=82=A6=E3=83=B3=E3=83=89?=
 =?UTF-8?q?=E3=83=9C=E3=83=BC=E3=83=89=E3=81=AEUI=E3=81=AE=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainView/QallView/CameraDetailSetting.vue  | 15 ++++++---------
 .../Main/MainView/QallView/QallView.vue        | 18 +++++++++---------
 .../QallView/ScreenShareDetailSetting.vue      |  3 ++-
 .../Main/MainView/QallView/SoundBoard.vue      |  9 +++++----
 .../MainView/QallView/SoundBoardElement.vue    |  6 ++----
 5 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/Main/MainView/QallView/CameraDetailSetting.vue b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
index b27999713..4deb7733c 100644
--- a/src/components/Main/MainView/QallView/CameraDetailSetting.vue
+++ b/src/components/Main/MainView/QallView/CameraDetailSetting.vue
@@ -112,7 +112,7 @@ const handleClose = () => {
                     value="original"
                   />
                   <label for="original" :class="$style.radioLabel">
-                    <span>Original</span>
+                    <span>何もしない</span>
                   </label>
                 </div>
                 <div :class="$style.radioItem">
@@ -123,7 +123,7 @@ const handleClose = () => {
                     value="blur"
                   />
                   <label for="blur" :class="$style.radioLabel">
-                    <span>Blur</span>
+                    <span>ぼかし</span>
                   </label>
                 </div>
                 <div :class="$style.radioItem">
@@ -134,7 +134,7 @@ const handleClose = () => {
                     value="file"
                   />
                   <label for="file" :class="$style.radioLabel">
-                    <span>File</span>
+                    <span>ファイル</span>
                   </label>
                 </div>
                 <div :class="$style.radioItem">
@@ -145,7 +145,7 @@ const handleClose = () => {
                     value="screen"
                   />
                   <label for="screen" :class="$style.radioLabel">
-                    <span>Screen</span>
+                    <span>画面配信</span>
                   </label>
                 </div>
               </div>
@@ -169,13 +169,11 @@ const handleClose = () => {
         </div>
 
         <div :class="$style.actions">
-          <FormButton label="保存" type="primary" @click="handleSave" />
           <FormButton
             label="カメラを追加"
-            type="tertiary"
+            type="primary"
             @click="handleAddCameraTrack"
           />
-          <FormButton label="閉じる" type="secondary" @click="handleClose" />
         </div>
       </div>
     </ClickOutside>
@@ -194,7 +192,7 @@ const handleClose = () => {
   @include color-ui-primary;
   padding: 24px;
   border-radius: 8px;
-  width: 500px;
+  width: 20rem;
   border: 1px solid $theme-text-primary-default;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
@@ -272,7 +270,6 @@ const handleClose = () => {
 
 .actions {
   display: flex;
-  justify-content: flex-end;
   gap: 8px;
   margin-top: 16px;
 }
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 994dff375..01c074278 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -4,7 +4,6 @@ import { onMounted, ref, useTemplateRef, computed } from 'vue'
 import DanmakuContainer from './DanmakuContainer.vue'
 import CallControlButtonSmall from './CallControlButtonSmall.vue'
 import CallControlButton from './CallControlButton.vue'
-import { LocalTrackPublication } from 'livekit-client'
 import QallMessageView from './QallMessageView.vue'
 import SoundBoard from './SoundBoard.vue'
 import ClickOutside from '/@/components/UI/ClickOutside'
@@ -109,6 +108,7 @@ const { openStampPicker, closeStampPicker } = useStampPickerInvoker(
     try {
       await publishData({ type: 'stamp', message: stampData.id })
       qallMitt.emit('pushStamp', stampData.id)
+      openStampPicker()
     } catch (e) {}
   },
   reactionButton,
@@ -116,7 +116,6 @@ const { openStampPicker, closeStampPicker } = useStampPickerInvoker(
   'bottom-left'
 )
 const handleReaction = () => {
-  // TODO
   openStampPicker()
 }
 
@@ -184,9 +183,6 @@ const showShareScreenSettingDetail = ref(false)
 
 <template>
   <div :class="$style.Block">
-    <ClickOutside @click-outside="showSoundBoard = false">
-      <SoundBoard v-if="showSoundBoard" />
-    </ClickOutside>
     <DanmakuContainer />
     <QallMessageView
       :channel-id="callingChannel"
@@ -194,17 +190,19 @@ const showShareScreenSettingDetail = ref(false)
       :class="$style.channelView"
     />
     <h1 :class="$style.Header">Qall View</h1>
-
     <UserList />
 
     <div :class="$style.TrackContainer">
       <div :class="$style.controlBar">
         <div :class="$style.smallButtonGroup">
-          <div>
+          <div :class="$style.soundBoardButton">
             <CallControlButtonSmall
               icon="sound_detection_loud_sound"
               :on-click="handleSound"
             />
+            <ClickOutside @click-outside="showSoundBoard = false">
+              <SoundBoard v-if="showSoundBoard" />
+            </ClickOutside>
           </div>
           <div ref="reactionButton">
             <CallControlButtonSmall
@@ -352,13 +350,11 @@ const showShareScreenSettingDetail = ref(false)
 }
 
 .Block {
-  color: green;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
-  overflow: scroll;
   position: relative;
   height: 100%;
 }
@@ -397,4 +393,8 @@ const showShareScreenSettingDetail = ref(false)
   position: relative;
   display: inline-block;
 }
+
+.soundBoardButton {
+  position: relative;
+}
 </style>
diff --git a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
index 47dff684a..e6aac2054 100644
--- a/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
+++ b/src/components/Main/MainView/QallView/ScreenShareDetailSetting.vue
@@ -34,7 +34,7 @@ const handleClose = () => {
         <div :class="$style.actions">
           <FormButton
             label="画面共有を追加"
-            type="tertiary"
+            type="primary"
             @click="handleScreenShare"
           />
         </div>
@@ -47,6 +47,7 @@ const handleClose = () => {
 .popoverContainer {
   position: absolute;
   z-index: 50;
+  bottom: 0;
 }
 
 .popoverContent {
diff --git a/src/components/Main/MainView/QallView/SoundBoard.vue b/src/components/Main/MainView/QallView/SoundBoard.vue
index c40f3ec73..da02469f4 100644
--- a/src/components/Main/MainView/QallView/SoundBoard.vue
+++ b/src/components/Main/MainView/QallView/SoundBoard.vue
@@ -10,7 +10,7 @@ const searchQuery = ref('')
   <div :class="$style.soundBoard">
     <div><FormInput v-model="searchQuery" placeholder="検索" /></div>
     <div :class="$style.elementContainer">
-      <SoundBoardElement v-for="i in 10" :key="i" />
+      <SoundBoardElement v-for="i in 15" :key="i" />
     </div>
   </div>
 </template>
@@ -20,15 +20,16 @@ const searchQuery = ref('')
   position: absolute;
   margin: 0.5rem;
   padding: 0.5rem;
-  bottom: 0;
+  bottom: 48px;
   left: 0;
-  max-height: 60%;
+  height: 30rem;
   overflow-y: scroll;
   border-radius: 0.5rem;
   @include background-primary;
+  overflow: scroll;
 }
 .elementContainer {
-  width: 31rem;
+  width: 30.5rem;
   max-width: 100%;
 
   margin: 0.5rem;
diff --git a/src/components/Main/MainView/QallView/SoundBoardElement.vue b/src/components/Main/MainView/QallView/SoundBoardElement.vue
index c85b56c85..c2c73c28c 100644
--- a/src/components/Main/MainView/QallView/SoundBoardElement.vue
+++ b/src/components/Main/MainView/QallView/SoundBoardElement.vue
@@ -3,9 +3,7 @@ import { ref } from 'vue'
 import AStamp from '/@/components/UI/AStamp.vue'
 
 const stampId = ref('69c10725-2176-45ac-a4a5-22e70b8a76f7')
-const soundName = ref(
-  '草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草'
-)
+const soundName = ref('草草')
 </script>
 
 <template>
@@ -25,12 +23,12 @@ const soundName = ref(
   display: flex;
   align-items: center;
   &:hover {
-    background-color: rgba(0, 100, 255, 1);
     @include background-tertiary;
   }
   width: 15rem;
   min-height: 4rem;
   user-select: none;
   @include color-ui-primary;
+  @include size-body2;
 }
 </style>

From 5187a9c6b5aba146a01c00fd251ef21f8394527b Mon Sep 17 00:00:00 2001
From: pikachu0310 <pikachu13711@gmail.com>
Date: Sun, 26 Jan 2025 04:39:04 +0900
Subject: [PATCH 16/30] =?UTF-8?q?=E2=9C=A8=20GET=20/soundboard=20&=20POST?=
 =?UTF-8?q?=20/soundboard=20POST=20&=20/soundboard/play=20=E3=82=92?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A7=E7=99=BA=E7=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E9=83=A8=E5=88=86=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/AudioTab.vue | 153 ++++++++++++++++++++++++++++----
 1 file changed, 135 insertions(+), 18 deletions(-)

diff --git a/src/views/Settings/AudioTab.vue b/src/views/Settings/AudioTab.vue
index bf0f1d11f..313048b93 100644
--- a/src/views/Settings/AudioTab.vue
+++ b/src/views/Settings/AudioTab.vue
@@ -1,6 +1,27 @@
 <template>
   <div :class="$style.container">
     <h2>音声ファイル管理</h2>
+
+    <!-- サウンド一覧の表示 -->
+    <div v-if="soundboardList.length" :class="$style.listSection">
+      <h3>登録されている音声一覧</h3>
+      <ul>
+        <li v-for="item in soundboardList" :key="item.soundId" :class="$style.soundItem">
+          <!-- 音声の名前表示 -->
+          <span>{{ item.soundName }}</span>
+          <!-- Stampアイコンなど表示したければ、stampIdとcreatorId等も表示 -->
+          <AStamp v-if="item.stampId" :stamp-id="item.stampId" :size="20" />
+          <!-- 再生ボタン (今入っている通話で再生) -->
+          <form-button
+            label="再生"
+            type="primary"
+            icon="play"
+            @click="handlePlaySound(item.soundId)"
+          />
+        </li>
+      </ul>
+    </div>
+
     <div :class="$style.content">
       <div :class="$style.fileSection">
         <input
@@ -53,19 +74,62 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, useTemplateRef } from 'vue'
+import { ref, onMounted } from 'vue'
 import FormButton from '/@/components/UI/FormButton.vue'
+import { templateRef } from '@vueuse/core'
 import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import AStamp from '/@/components/UI/AStamp.vue'
 
+// UI imports
+import { useToastStore } from '/@/store/ui/toast'
+
+// Qall関連のcomposableを利用
+import { useQall } from '/@/composables/qall/useQall'
+
+// ◆ Qallの通信インターフェイスを取得
+const { getSoundboardList, postSoundboard, postSoundboardPlay, callingChannel } = useQall()
+
+// UI・状態
 const fileInput = ref<HTMLInputElement | null>(null)
 const selectedFile = ref<File | null>(null)
 const audioName = ref('')
 
+// StampPicker関連
+const stampId = ref('')
+const stampPickerButton = templateRef<HTMLButtonElement>('stampPickerButton')
+const { toggleStampPicker } = useStampPickerInvoker(
+  async stampData => {
+    stampId.value = stampData.id
+  },
+  stampPickerButton,
+  false,
+  'bottom-left'
+)
+
+// 音声一覧
+// 手動で定義された SoundboardItem 型
+type SoundboardItem = {
+  soundId: string // サーバが発行したサウンドID
+  soundName: string // ユーザが指定した表示用のサウンド名
+  stampId: string // 任意のスタンプID等、サウンドに紐づく拡張情報
+  creatorId: string // 作成者のユーザID
+};
+
+const soundboardList = ref<SoundboardItem[]>([])
+
+// エラーメッセージなどUI表示
+const { addErrorToast, addSuccessToast } = useToastStore()
+
+/**
+ * ファイル選択ダイアログを開く
+ */
 const openFileDialog = () => {
   fileInput.value?.click()
 }
 
+/**
+ * 選択されたファイルをstateに保存
+ */
 const handleFileSelect = (event: Event) => {
   const target = event.target as HTMLInputElement
   const file = target.files?.[0]
@@ -75,31 +139,67 @@ const handleFileSelect = (event: Event) => {
   audioName.value = file.name.replace(/\.[^/.]+$/, '')
 }
 
-const stampId = ref('')
-const stampPickerButton = useTemplateRef<HTMLButtonElement>('stampPickerButton')
-const { toggleStampPicker } = useStampPickerInvoker(
-  async stampData => {
-    stampId.value = stampData.id
-  },
-  stampPickerButton,
-  false,
-  'bottom-left'
-)
-
-const handleUpload = () => {
-  if (!selectedFile.value || !audioName.value) return
+/**
+ * アップロードボタン押下時
+ */
+const handleUpload = async () => {
+  if (!selectedFile.value || !audioName.value) {
+    addErrorToast('音声ファイルまたは名前が指定されていません')
+    return
+  }
 
-  // TODO: Qall
-  // 実際のアップロード処理を実装
-  console.log('Selected audio file:', selectedFile.value.name)
-  console.log('Set name:', audioName.value)
+  try {
+    await postSoundboard(selectedFile.value, audioName.value) // 必須フィールドを送信
+    addSuccessToast('アップロードが完了しました')
+    await loadSoundboardList() // サウンド一覧を再取得
+    resetUploadForm() // フォームリセット
+  } catch (e) {
+    addErrorToast(`アップロードに失敗しました: ${String(e)}`)
+  }
+}
 
+const resetUploadForm = () => {
   selectedFile.value = null
   audioName.value = ''
+  stampId.value = ''
   if (fileInput.value) {
     fileInput.value.value = ''
   }
 }
+
+
+/**
+ * サウンド一覧を読み込み
+ */
+const loadSoundboardList = async () => {
+  try {
+    const list = await getSoundboardList()
+    soundboardList.value = list
+  } catch (e) {
+    addErrorToast(`サウンド一覧の取得に失敗しました: ${String(e)}`)
+  }
+}
+
+/**
+ * 指定サウンドを再生
+ */
+const handlePlaySound = async (soundId: string) => {
+  if (!callingChannel.value) {
+    addErrorToast('再生するには通話中である必要があります')
+    return
+  }
+  try {
+    const result = await postSoundboardPlay(soundId, callingChannel.value)
+    // resultには ingressId 等が返る
+    addSuccessToast(`サウンドを再生中 (IngressID: ${result.ingressId})`)
+  } catch (e) {
+    addErrorToast(`サウンド再生に失敗しました: ${String(e)}`)
+  }
+}
+
+onMounted(() => {
+  loadSoundboardList()
+})
 </script>
 
 <style lang="scss" module>
@@ -130,4 +230,21 @@ const handleUpload = () => {
     width: 300px;
   }
 }
+
+/* 音声一覧 */
+.listSection {
+  margin-top: 16px;
+  margin-bottom: 24px;
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+}
+.soundItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
 </style>

From 121749db935ceb9d0416791b8c1b976f8ce684d3 Mon Sep 17 00:00:00 2001
From: pikachu0310 <pikachu13711@gmail.com>
Date: Sun, 26 Jan 2025 04:40:05 +0900
Subject: [PATCH 17/30] =?UTF-8?q?=F0=9F=90=9B=20qallFetch=20=E3=81=A7=20'C?=
 =?UTF-8?q?ontent-Type':=20'application/json'=20=E3=81=A8=E5=9B=BA?=
 =?UTF-8?q?=E5=AE=9A=E3=81=95=E3=82=8C=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useQall.ts | 63 +++++++++++++++++++++++++--------
 1 file changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 90c01bebe..7aedaba73 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -71,20 +71,53 @@ const rtcSettings = useRtcSettings()
  * 認証付きFetch
  * qallFetch(input, init) -> fetch(...) にBearerトークンやheadersを付与
  */
+const BASE_URL = 'https://qall-microservice-for-livekit.trap.show/'
+
+/**
+ * この型を用意し、RequestInit.headers を string-based で管理できるようにする
+ */
+type QallFetchInit = Omit<RequestInit, 'headers'> & {
+  headers?: Record<string, string>
+}
+
 const qallFetch = async (
-  input: string | URL | globalThis.Request,
-  init?: RequestInit
-) => {
+  input: string | URL | Request,
+  init: QallFetchInit = {}
+): Promise<Response> => {
+  // 1) URLを組み立て
+  const url =
+    typeof input === 'string' && !input.startsWith('http')
+      ? new URL(input, BASE_URL).toString()
+      : input
+
+  // 2) 認証トークン取得
   const traQtoken = (await apis.getMyQRCode(true)).data
-  const res = await fetch(input, {
-    ...init,
-    headers: {
-      ...init?.headers,
-      Authorization: `Bearer ${traQtoken}`,
-      'Content-Type': 'application/json'
+
+  // 3) ヘッダを構築
+  //    → Record<string, string> を new Headers() に変換し、Content-Type を調整
+  const finalHeaders = new Headers(init.headers)
+
+  // 4) Bearer トークンを強制付与
+  finalHeaders.set('Authorization', `Bearer ${traQtoken}`)
+
+  // 5) Content-Type を自動 or 削除
+  //   - ヘッダになければ application/json をセット
+  //   - '' (空) なら削除してマルチパート送信を許可
+  if (!finalHeaders.has('Content-Type')) {
+    // Content-Type が指定されていないなら、デフォルト 'application/json'
+    finalHeaders.set('Content-Type', 'application/json')
+  } else {
+    // 呼び出し側で '' (空文字) としている場合 → ヘッダを削除 (ブラウザが適切に設定する)
+    if (finalHeaders.get('Content-Type') === '') {
+      finalHeaders.delete('Content-Type')
     }
+  }
+
+  // 6) fetch 実行
+  return await fetch(url, {
+    ...init,
+    headers: finalHeaders
   })
-  return res
 }
 
 /** 内部で使うサウンドボード一覧の型(サーバレスポンス) */
@@ -112,27 +145,26 @@ const getSoundboardList = async (): Promise<SoundboardListResponse> => {
 
 /**
  * POST /soundboard (multipart/form-data)
- * @param file アップロードする音声ファイル (15秒～20秒以内)
+ * @param file アップロードする音声ファイル
  * @param soundName ユーザがつける音声の名前
  */
 const postSoundboard = async (
   file: File,
   soundName: string
 ): Promise<{ soundId: string }> => {
-  // multipart送信のため、FormDataを利用
   const formData = new FormData()
   formData.append('audio', file)
   formData.append('soundName', soundName)
 
-  // Content-Typeは自動設定させたいので、init.headers で空文字を指定して上書きする
+  // 「headers.Content-Type = ''」でヘッダを削除し、multipartを有効にする
   const res = await qallFetch('/api/soundboard', {
     method: 'POST',
-    // 下記の書き方で 'application/json' を上書きしないようにする
     headers: {
-      'Content-Type': ''
+      'Content-Type': '' // これで multipart boundary を自動設定
     },
     body: formData
   })
+
   if (!res.ok) {
     const text = await res.text()
     throw new Error(`POST /soundboard failed: ${text}`)
@@ -140,6 +172,7 @@ const postSoundboard = async (
   return await res.json()
 }
 
+
 /**
  * POST /soundboard/play
  * @param soundId 再生したい音声のID

From db90ad7ee7e76ddfafaf03f5d37ba58ec4f8fbfc Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 04:40:36 +0900
Subject: [PATCH 18/30] =?UTF-8?q?=E8=A1=8C=E3=81=AE=E3=82=AF=E3=83=A9?=
 =?UTF-8?q?=E3=83=B3=E3=83=97=E3=82=92=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/SoundBoardElement.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Main/MainView/QallView/SoundBoardElement.vue b/src/components/Main/MainView/QallView/SoundBoardElement.vue
index c2c73c28c..9e932adee 100644
--- a/src/components/Main/MainView/QallView/SoundBoardElement.vue
+++ b/src/components/Main/MainView/QallView/SoundBoardElement.vue
@@ -3,7 +3,9 @@ import { ref } from 'vue'
 import AStamp from '/@/components/UI/AStamp.vue'
 
 const stampId = ref('69c10725-2176-45ac-a4a5-22e70b8a76f7')
-const soundName = ref('草草')
+const soundName = ref(
+  '草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草'
+)
 </script>
 
 <template>
@@ -11,7 +13,9 @@ const soundName = ref('草草')
     <div>
       <AStamp :stamp-id="stampId" :size="32" />
     </div>
-    <div>{{ soundName }}</div>
+    <div :class="$style.soundNameContainer">
+      {{ soundName }}
+    </div>
   </div>
 </template>
 
@@ -26,9 +30,15 @@ const soundName = ref('草草')
     @include background-tertiary;
   }
   width: 15rem;
-  min-height: 4rem;
+  min-height: 3rem;
   user-select: none;
   @include color-ui-primary;
   @include size-body2;
 }
+.soundNameContainer {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 </style>

From f02573e1fb69bc037231ede47dba40b02dc54244 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 05:10:10 +0900
Subject: [PATCH 19/30] =?UTF-8?q?=E3=82=B5=E3=82=A6=E3=83=B3=E3=83=89?=
 =?UTF-8?q?=E3=83=9C=E3=83=BC=E3=83=89=E3=82=92=E6=B5=81=E3=81=99UI?=
 =?UTF-8?q?=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/SoundBoard.vue     | 49 +++++++++++-
 .../MainView/QallView/SoundBoardElement.vue   | 11 ++-
 src/composables/qall/useQall.ts               |  9 ++-
 src/views/Settings/AudioTab.vue               | 76 +++++++++----------
 4 files changed, 94 insertions(+), 51 deletions(-)

diff --git a/src/components/Main/MainView/QallView/SoundBoard.vue b/src/components/Main/MainView/QallView/SoundBoard.vue
index da02469f4..af891e0e6 100644
--- a/src/components/Main/MainView/QallView/SoundBoard.vue
+++ b/src/components/Main/MainView/QallView/SoundBoard.vue
@@ -1,16 +1,61 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import SoundBoardElement from './SoundBoardElement.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
+import { useToastStore } from '/@/store/ui/toast'
+import { useQall, type SoundboardItem } from '/@/composables/qall/useQall'
 
 const searchQuery = ref('')
+
+const { addErrorToast, addSuccessToast } = useToastStore()
+
+const { getSoundboardList, postSoundboardPlay, callingChannel } = useQall()
+const soundboardList = ref<SoundboardItem[]>([])
+/**
+ * サウンド一覧を読み込み
+ */
+const loadSoundboardList = async () => {
+  try {
+    const list = await getSoundboardList()
+    soundboardList.value = list
+  } catch (e) {
+    addErrorToast(`サウンド一覧の取得に失敗しました: ${String(e)}`)
+  }
+}
+
+/**
+ * 指定サウンドを再生
+ */
+const handlePlaySound = async (soundId: string) => {
+  if (!callingChannel.value) {
+    addErrorToast('再生するには通話中である必要があります')
+    return
+  }
+  try {
+    const result = await postSoundboardPlay(soundId, callingChannel.value)
+    // resultには ingressId 等が返る
+    addSuccessToast(`サウンドを再生中 (IngressID: ${result.ingressId})`)
+  } catch (e) {
+    addErrorToast(`サウンド再生に失敗しました: ${String(e)}`)
+  }
+}
+
+onMounted(() => {
+  loadSoundboardList()
+})
 </script>
 
 <template>
   <div :class="$style.soundBoard">
     <div><FormInput v-model="searchQuery" placeholder="検索" /></div>
     <div :class="$style.elementContainer">
-      <SoundBoardElement v-for="i in 15" :key="i" />
+      <SoundBoardElement
+        v-for="item in soundboardList"
+        :key="item.soundId"
+        :sound-name="item.soundName"
+        :stamp-id="item.stampId"
+        @click="handlePlaySound(item.soundId)"
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/Main/MainView/QallView/SoundBoardElement.vue b/src/components/Main/MainView/QallView/SoundBoardElement.vue
index 9e932adee..5afc2a129 100644
--- a/src/components/Main/MainView/QallView/SoundBoardElement.vue
+++ b/src/components/Main/MainView/QallView/SoundBoardElement.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import AStamp from '/@/components/UI/AStamp.vue'
-
-const stampId = ref('69c10725-2176-45ac-a4a5-22e70b8a76f7')
-const soundName = ref(
-  '草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草草'
-)
+const { soundName, stampId } = defineProps<{
+  soundName: string
+  stampId: string
+}>()
+console.log(stampId)
 </script>
 
 <template>
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 7aedaba73..d5578e1a5 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -42,6 +42,7 @@ type Room = {
 type Rooms = Room[]
 
 const rooms = ref<Rooms>([])
+
 const callingChannel = ref('')
 
 const {
@@ -120,8 +121,7 @@ const qallFetch = async (
   })
 }
 
-/** 内部で使うサウンドボード一覧の型(サーバレスポンス) */
-type SoundboardItem = {
+export type SoundboardItem = {
   soundId: string
   soundName: string
   stampId: string
@@ -150,11 +150,13 @@ const getSoundboardList = async (): Promise<SoundboardListResponse> => {
  */
 const postSoundboard = async (
   file: File,
-  soundName: string
+  soundName: string,
+  stampId: string
 ): Promise<{ soundId: string }> => {
   const formData = new FormData()
   formData.append('audio', file)
   formData.append('soundName', soundName)
+  formData.append('stampId', stampId)
 
   // 「headers.Content-Type = ''」でヘッダを削除し、multipartを有効にする
   const res = await qallFetch('/api/soundboard', {
@@ -172,7 +174,6 @@ const postSoundboard = async (
   return await res.json()
 }
 
-
 /**
  * POST /soundboard/play
  * @param soundId 再生したい音声のID
diff --git a/src/views/Settings/AudioTab.vue b/src/views/Settings/AudioTab.vue
index 313048b93..8fb6a8c2c 100644
--- a/src/views/Settings/AudioTab.vue
+++ b/src/views/Settings/AudioTab.vue
@@ -2,26 +2,6 @@
   <div :class="$style.container">
     <h2>音声ファイル管理</h2>
 
-    <!-- サウンド一覧の表示 -->
-    <div v-if="soundboardList.length" :class="$style.listSection">
-      <h3>登録されている音声一覧</h3>
-      <ul>
-        <li v-for="item in soundboardList" :key="item.soundId" :class="$style.soundItem">
-          <!-- 音声の名前表示 -->
-          <span>{{ item.soundName }}</span>
-          <!-- Stampアイコンなど表示したければ、stampIdとcreatorId等も表示 -->
-          <AStamp v-if="item.stampId" :stamp-id="item.stampId" :size="20" />
-          <!-- 再生ボタン (今入っている通話で再生) -->
-          <form-button
-            label="再生"
-            type="primary"
-            icon="play"
-            @click="handlePlaySound(item.soundId)"
-          />
-        </li>
-      </ul>
-    </div>
-
     <div :class="$style.content">
       <div :class="$style.fileSection">
         <input
@@ -70,13 +50,29 @@
         />
       </div>
     </div>
+
+    <!-- サウンド一覧の表示 -->
+    <div v-if="soundboardList.length" :class="$style.listSection">
+      <h3>登録されている音声一覧</h3>
+      <ul>
+        <li
+          v-for="item in soundboardList"
+          :key="item.soundId"
+          :class="$style.soundItem"
+        >
+          <!-- 音声の名前表示 -->
+          <span>{{ item.soundName }}</span>
+          <!-- Stampアイコンなど表示したければ、stampIdとcreatorId等も表示 -->
+          <AStamp v-if="item.stampId" :stamp-id="item.stampId" :size="20" />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, useTemplateRef } from 'vue'
 import FormButton from '/@/components/UI/FormButton.vue'
-import { templateRef } from '@vueuse/core'
 import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import AStamp from '/@/components/UI/AStamp.vue'
 
@@ -84,10 +80,15 @@ import AStamp from '/@/components/UI/AStamp.vue'
 import { useToastStore } from '/@/store/ui/toast'
 
 // Qall関連のcomposableを利用
-import { useQall } from '/@/composables/qall/useQall'
+import { useQall, type SoundboardItem } from '/@/composables/qall/useQall'
 
 // ◆ Qallの通信インターフェイスを取得
-const { getSoundboardList, postSoundboard, postSoundboardPlay, callingChannel } = useQall()
+const {
+  getSoundboardList,
+  postSoundboard,
+  postSoundboardPlay,
+  callingChannel
+} = useQall()
 
 // UI・状態
 const fileInput = ref<HTMLInputElement | null>(null)
@@ -96,7 +97,7 @@ const audioName = ref('')
 
 // StampPicker関連
 const stampId = ref('')
-const stampPickerButton = templateRef<HTMLButtonElement>('stampPickerButton')
+const stampPickerButton = useTemplateRef<HTMLButtonElement>('stampPickerButton')
 const { toggleStampPicker } = useStampPickerInvoker(
   async stampData => {
     stampId.value = stampData.id
@@ -105,16 +106,6 @@ const { toggleStampPicker } = useStampPickerInvoker(
   false,
   'bottom-left'
 )
-
-// 音声一覧
-// 手動で定義された SoundboardItem 型
-type SoundboardItem = {
-  soundId: string // サーバが発行したサウンドID
-  soundName: string // ユーザが指定した表示用のサウンド名
-  stampId: string // 任意のスタンプID等、サウンドに紐づく拡張情報
-  creatorId: string // 作成者のユーザID
-};
-
 const soundboardList = ref<SoundboardItem[]>([])
 
 // エラーメッセージなどUI表示
@@ -143,13 +134,21 @@ const handleFileSelect = (event: Event) => {
  * アップロードボタン押下時
  */
 const handleUpload = async () => {
-  if (!selectedFile.value || !audioName.value) {
-    addErrorToast('音声ファイルまたは名前が指定されていません')
+  if (!selectedFile.value) {
+    addErrorToast('音声ファイルが指定されていません')
+    return
+  }
+  if (!audioName.value) {
+    addErrorToast('音声名が指定されていません')
+    return
+  }
+  if (!stampId.value) {
+    addErrorToast('スタンプIDが指定されていません')
     return
   }
 
   try {
-    await postSoundboard(selectedFile.value, audioName.value) // 必須フィールドを送信
+    await postSoundboard(selectedFile.value, audioName.value, stampId.value) // 必須フィールドを送信
     addSuccessToast('アップロードが完了しました')
     await loadSoundboardList() // サウンド一覧を再取得
     resetUploadForm() // フォームリセット
@@ -167,7 +166,6 @@ const resetUploadForm = () => {
   }
 }
 
-
 /**
  * サウンド一覧を読み込み
  */

From 11f5072207262b02f2d7c6cb65480643ea8c2ddc Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 06:06:07 +0900
Subject: [PATCH 20/30] =?UTF-8?q?=E3=82=B5=E3=83=96=E3=83=93=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/ChannelView/ChannelView.vue |  4 +--
 .../Main/MainView/QallView/QallView.vue       | 13 +++----
 .../Main/MainView/QallView/SubQallView.vue    | 35 +++++++++++++++----
 .../composables/useNavigationSelectorEntry.ts | 10 ++++--
 src/composables/qall/useQall.ts               | 20 +++++++++--
 src/views/Settings/AudioTab.vue               | 24 +------------
 6 files changed, 64 insertions(+), 42 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelView.vue b/src/components/Main/MainView/ChannelView/ChannelView.vue
index aa298c54f..310e932fd 100644
--- a/src/components/Main/MainView/ChannelView/ChannelView.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelView.vue
@@ -5,7 +5,7 @@
     </template>
     <template #default>
       <QallAudio />
-      <QallView v-if="callingChannel === channelId" />
+      <QallView v-if="getQallingState(channelId) === 'mainView'" />
       <channel-view-content
         v-else
         :channel-id="channelId"
@@ -47,5 +47,5 @@ const props = defineProps<{
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
 const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
-const { callingChannel } = useQall()
+const { getQallingState } = useQall()
 </script>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 01c074278..5e31901ea 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -15,12 +15,12 @@ import { useModalStore } from '/@/store/ui/modal'
 import CameraDetailSetting from './CameraDetailSetting.vue'
 import ScreenShareDetailSetting from './ScreenShareDetailSetting.vue'
 import DetailButton from './DetailButton.vue'
+import IconButton from '/@/components/UI/IconButton.vue'
 
 const { pushModal } = useModalStore()
 
 const {
   tracksMap,
-  screenShareTrackSidMap,
   screenShareTracks,
   callingChannel,
   leaveQall,
@@ -30,13 +30,13 @@ const {
   publishData,
   toggleMicMute,
   qallMitt,
-  rooms
+  rooms,
+  isMicOn,
+  isCameraOn,
+  isScreenSharing,
+  isSubView
 } = useQall()
 
-const isMicOn = ref(true)
-const isCameraOn = ref(false)
-const isScreenSharing = ref(false)
-
 const micIcon = computed(() =>
   isMicOn.value ? 'microphone' : 'microphone-off'
 )
@@ -191,6 +191,7 @@ const showShareScreenSettingDetail = ref(false)
     />
     <h1 :class="$style.Header">Qall View</h1>
     <UserList />
+    <IconButton icon-name="close" icon-mdi @click="isSubView = true" />
 
     <div :class="$style.TrackContainer">
       <div :class="$style.controlBar">
diff --git a/src/components/Main/MainView/QallView/SubQallView.vue b/src/components/Main/MainView/QallView/SubQallView.vue
index 07123f04b..f1649a878 100644
--- a/src/components/Main/MainView/QallView/SubQallView.vue
+++ b/src/components/Main/MainView/QallView/SubQallView.vue
@@ -2,8 +2,13 @@
 import { computed } from 'vue'
 import VideoComponent from '/@/components/Main/MainView/QallView/VideoComponent.vue'
 import { useQall } from '/@/composables/qall/useQall'
+import { useRouter } from 'vue-router'
+import { constructChannelPath } from '/@/router'
+import useChannelPath from '/@/composables/useChannelPath'
 
-const { tracksMap } = useQall()
+const { tracksMap, callingChannel, isSubView } = useQall()
+const router = useRouter()
+const { channelIdToPathString } = useChannelPath()
 
 const firstVideoTrack = computed(
   () =>
@@ -12,11 +17,29 @@ const firstVideoTrack = computed(
       ([_sid, track]) => track.trackPublication?.kind === 'video'
     )
 )
+
+const restoreMainView = () => {
+  console.log(callingChannel.value)
+  const channelPath = channelIdToPathString(callingChannel.value)
+  router.push(constructChannelPath(channelPath))
+  isSubView.value = false
+}
 </script>
 <template>
-  <VideoComponent
-    v-if="firstVideoTrack"
-    :key="firstVideoTrack[0]"
-    :track-info="firstVideoTrack[1]"
-  />
+  <div :class="$style.container" @click="restoreMainView">
+    <VideoComponent
+      v-if="firstVideoTrack"
+      :key="firstVideoTrack[0]"
+      :track-info="firstVideoTrack[1]"
+    />
+    <div v-else>Qallにもどる</div>
+  </div>
 </template>
+
+<style lang="scss" module>
+.container {
+  cursor: pointer;
+  margin: 0.5rem;
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts b/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts
index 13d6f0e3e..842c02a2d 100644
--- a/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts
+++ b/src/components/Main/NavigationBar/composables/useNavigationSelectorEntry.ts
@@ -10,6 +10,7 @@ import { useAudioController } from '/@/store/ui/audioController'
 import { useChannelsStore } from '/@/store/entities/channels'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useQall } from '/@/composables/qall/useQall'
+import { useMainViewStore } from '/@/store/ui/mainView'
 
 export type NavigationSelectorEntry = {
   type: NavigationItemType
@@ -83,7 +84,8 @@ const useNavigationSelectorEntry = () => {
   const { channelsMap, dmChannelsMap } = useChannelsStore()
   const { hasInputChannel } = useMessageInputStateStore()
   const { fileId } = useAudioController()
-  const { callingChannel } = useQall()
+  const { getQallingState } = useQall()
+  const { primaryView } = useMainViewStore()
 
   const unreadChannels = computed(() => [...unreadChannelsMap.value.values()])
   const notificationState = reactive({
@@ -96,7 +98,11 @@ const useNavigationSelectorEntry = () => {
   })
   const entries = computed(() => createItems(notificationState))
 
-  const hasActiveQallSession = computed(() => !!callingChannel.value)
+  const hasActiveQallSession = computed(
+    () =>
+      primaryView.value.type === 'channel' &&
+      getQallingState(primaryView.value.channelId) === 'subView'
+  )
   const ephemeralEntries = computed(() =>
     [
       hasActiveQallSession.value ? ephemeralItems.qallController : undefined,
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index d5578e1a5..cedeb9bf7 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -43,8 +43,6 @@ type Rooms = Room[]
 
 const rooms = ref<Rooms>([])
 
-const callingChannel = ref('')
-
 const {
   joinRoom,
   leaveRoom,
@@ -260,6 +258,17 @@ messageMitt.on('addMessage', ({ message }) => {
     text: message.content
   })
 })
+const callingChannel = ref('')
+const isSubView = ref(false)
+const getQallingState = (channelId: string) => {
+  if (!callingChannel.value) return 'none'
+  if (callingChannel.value === channelId && !isSubView.value) return 'mainView'
+  return 'subView'
+}
+
+const isMicOn = ref(true)
+const isCameraOn = ref(false)
+const isScreenSharing = ref(false)
 
 export const useQall = () => {
   const joinQall = (channelName: string, isWebinar: boolean = false) => {
@@ -280,6 +289,7 @@ export const useQall = () => {
   }
   return {
     callingChannel,
+    isSubView,
     rooms,
     joinQall,
     leaveQall,
@@ -294,8 +304,12 @@ export const useQall = () => {
     screenShareTrackSidMap,
     screenShareTracks,
     qallMitt,
+    getQallingState,
     getSoundboardList,
     postSoundboard,
-    postSoundboardPlay
+    postSoundboardPlay,
+    isMicOn,
+    isCameraOn,
+    isScreenSharing
   }
 }
diff --git a/src/views/Settings/AudioTab.vue b/src/views/Settings/AudioTab.vue
index 8fb6a8c2c..c2594671f 100644
--- a/src/views/Settings/AudioTab.vue
+++ b/src/views/Settings/AudioTab.vue
@@ -83,12 +83,7 @@ import { useToastStore } from '/@/store/ui/toast'
 import { useQall, type SoundboardItem } from '/@/composables/qall/useQall'
 
 // ◆ Qallの通信インターフェイスを取得
-const {
-  getSoundboardList,
-  postSoundboard,
-  postSoundboardPlay,
-  callingChannel
-} = useQall()
+const { getSoundboardList, postSoundboard, postSoundboardPlay } = useQall()
 
 // UI・状態
 const fileInput = ref<HTMLInputElement | null>(null)
@@ -178,23 +173,6 @@ const loadSoundboardList = async () => {
   }
 }
 
-/**
- * 指定サウンドを再生
- */
-const handlePlaySound = async (soundId: string) => {
-  if (!callingChannel.value) {
-    addErrorToast('再生するには通話中である必要があります')
-    return
-  }
-  try {
-    const result = await postSoundboardPlay(soundId, callingChannel.value)
-    // resultには ingressId 等が返る
-    addSuccessToast(`サウンドを再生中 (IngressID: ${result.ingressId})`)
-  } catch (e) {
-    addErrorToast(`サウンド再生に失敗しました: ${String(e)}`)
-  }
-}
-
 onMounted(() => {
   loadSoundboardList()
 })

From ad375007e8d10e031a4804038c0ca5227f79910c Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 06:07:51 +0900
Subject: [PATCH 21/30] fix

---
 src/components/Main/MainView/QallView/SubQallView.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Main/MainView/QallView/SubQallView.vue b/src/components/Main/MainView/QallView/SubQallView.vue
index f1649a878..c229189a0 100644
--- a/src/components/Main/MainView/QallView/SubQallView.vue
+++ b/src/components/Main/MainView/QallView/SubQallView.vue
@@ -19,7 +19,6 @@ const firstVideoTrack = computed(
 )
 
 const restoreMainView = () => {
-  console.log(callingChannel.value)
   const channelPath = channelIdToPathString(callingChannel.value)
   router.push(constructChannelPath(channelPath))
   isSubView.value = false

From 6f29d5ae4500f6d8358a375be01f2e58aa568703 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 06:10:51 +0900
Subject: [PATCH 22/30] =?UTF-8?q?=E3=83=90=E3=83=84=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=81=AE=E4=BD=8D=E7=BD=AE=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/ChannelView/ChannelView.vue      |  1 +
 src/components/Main/MainView/QallView/QallView.vue | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelView.vue b/src/components/Main/MainView/ChannelView/ChannelView.vue
index 310e932fd..d04e38d9b 100644
--- a/src/components/Main/MainView/ChannelView/ChannelView.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelView.vue
@@ -16,6 +16,7 @@
     </template>
     <template #sidebar>
       <channel-sidebar
+        v-if="getQallingState(channelId) !== 'mainView'"
         :channel-id="channelId"
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 5e31901ea..07f040b65 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -189,9 +189,13 @@ const showShareScreenSettingDetail = ref(false)
       :typing-users="[]"
       :class="$style.channelView"
     />
-    <h1 :class="$style.Header">Qall View</h1>
+    <IconButton
+      icon-name="close"
+      icon-mdi
+      :class="$style.closeButton"
+      @click="isSubView = true"
+    />
     <UserList />
-    <IconButton icon-name="close" icon-mdi @click="isSubView = true" />
 
     <div :class="$style.TrackContainer">
       <div :class="$style.controlBar">
@@ -398,4 +402,10 @@ const showShareScreenSettingDetail = ref(false)
 .soundBoardButton {
   position: relative;
 }
+
+.closeButton {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
 </style>

From 2ebcf51ee0c6526a516ac0c8d054ea403d2e1f45 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 07:13:15 +0900
Subject: [PATCH 23/30] =?UTF-8?q?=E3=82=B5=E3=83=96=E3=83=93=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/AudioComponent.vue | 74 ++--------------
 .../QallView/ScreenShareComponent.vue         |  1 -
 .../Main/MainView/QallView/SubQallView.vue    | 59 ++++++++++---
 .../Main/MainView/QallView/UserCard.vue       | 86 +++++++++++++++++++
 .../Main/MainView/QallView/UserList.vue       | 17 ++--
 src/composables/qall/useLiveKitSDK.ts         |  3 +
 src/composables/qall/useQall.ts               | 17 +++-
 7 files changed, 164 insertions(+), 93 deletions(-)
 create mode 100644 src/components/Main/MainView/QallView/UserCard.vue

diff --git a/src/components/Main/MainView/QallView/AudioComponent.vue b/src/components/Main/MainView/QallView/AudioComponent.vue
index 357e07658..75c837075 100644
--- a/src/components/Main/MainView/QallView/AudioComponent.vue
+++ b/src/components/Main/MainView/QallView/AudioComponent.vue
@@ -5,6 +5,7 @@ import { useUsersStore } from '/@/store/entities/users'
 import { buildUserIconPath } from '/@/lib/apis'
 import AudioTrack from './AudioTrack.vue'
 import { useUserVolume } from '/@/store/app/userVolume'
+import UserCard from './UserCard.vue'
 const { trackInfo, isShow } = defineProps<{
   trackInfo: TrackInfo
   isShow?: boolean
@@ -28,79 +29,14 @@ const parseToFloat = (value: number | string): number => {
 </script>
 
 <template>
-  <template v-if="isShow">
-    <div :class="$style.UserCard">
-      <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
-
-      <div :class="$style.OuterIcon">
-        <img :src="iconImage" :class="$style.OuterImage" />
-      </div>
-      <div :class="$style.InnerIcon">
-        <img :src="iconImage" :class="$style.InnerImage" />
-      </div>
-
-      <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
-    </div>
-  </template>
-  <template v-else>
+  <div :class="isShow ? $style.container : []">
+    <UserCard :track-info="trackInfo" />
     <AudioTrack :track-info="trackInfo" :volume="parseToFloat(volume)" />
-  </template>
+  </div>
 </template>
 <style lang="scss" module>
-.UserCard {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  border-radius: 12px;
-  pointer-events: none;
-  user-select: none;
-}
-
-.InnerIcon {
-  width: calc(100% / 3);
-  aspect-ratio: 1;
-  background-size: cover;
-  border-radius: 50%;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.OuterIcon {
-  height: 100%;
+.container {
   width: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateY(-50%) translateX(-50%);
-  -webkit-transform: translateY(-50%) translateX(-50%);
-  overflow: hidden;
-  filter: blur(40px);
-}
-.NameLabel {
-  position: absolute;
-  left: 8px;
-  bottom: 8px;
-  display: flex;
-  padding: 4px 12px;
-  align-items: flex-start;
-  gap: 8px;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-}
-.OuterImage {
   height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-.InnerImage {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-  border-radius: 50%;
 }
 </style>
diff --git a/src/components/Main/MainView/QallView/ScreenShareComponent.vue b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
index 094698e54..69644119a 100644
--- a/src/components/Main/MainView/QallView/ScreenShareComponent.vue
+++ b/src/components/Main/MainView/QallView/ScreenShareComponent.vue
@@ -7,7 +7,6 @@ import VideoComponent from './VideoComponent.vue'
 const { trackInfo, audioTrackInfo } = defineProps<{
   trackInfo: TrackInfo
   audioTrackInfo: TrackInfo | undefined
-  isLarge: boolean
   notMute?: boolean
 }>()
 
diff --git a/src/components/Main/MainView/QallView/SubQallView.vue b/src/components/Main/MainView/QallView/SubQallView.vue
index c229189a0..bbecdf1b2 100644
--- a/src/components/Main/MainView/QallView/SubQallView.vue
+++ b/src/components/Main/MainView/QallView/SubQallView.vue
@@ -5,17 +5,27 @@ import { useQall } from '/@/composables/qall/useQall'
 import { useRouter } from 'vue-router'
 import { constructChannelPath } from '/@/router'
 import useChannelPath from '/@/composables/useChannelPath'
+import { Track } from 'livekit-client'
+import UserCard from './UserCard.vue'
+import ScreenShareComponent from './ScreenShareComponent.vue'
 
-const { tracksMap, callingChannel, isSubView } = useQall()
+const {
+  tracksMap,
+  callingChannel,
+  isSubView,
+  selectedTrack,
+  screenShareTrackSidMap
+} = useQall()
 const router = useRouter()
 const { channelIdToPathString } = useChannelPath()
 
-const firstVideoTrack = computed(
-  () =>
-    tracksMap.value &&
-    Array.from(tracksMap.value.entries()).find(
-      ([_sid, track]) => track.trackPublication?.kind === 'video'
-    )
+const track = computed(() =>
+  selectedTrack.value
+    ? [
+        selectedTrack.value.trackPublication?.trackSid ?? '',
+        selectedTrack.value
+      ]
+    : tracksMap.value && Array.from(tracksMap.value.entries())?.[0]
 )
 
 const restoreMainView = () => {
@@ -26,11 +36,32 @@ const restoreMainView = () => {
 </script>
 <template>
   <div :class="$style.container" @click="restoreMainView">
-    <VideoComponent
-      v-if="firstVideoTrack"
-      :key="firstVideoTrack[0]"
-      :track-info="firstVideoTrack[1]"
-    />
+    <div
+      v-if="
+        track && typeof track[0] === 'string' && typeof track[1] === 'object'
+      "
+      :class="$style.subContainer"
+    >
+      <UserCard
+        v-if="track[1].trackPublication?.kind === Track.Kind.Audio"
+        :track-info="track[1]"
+      />
+      <ScreenShareComponent
+        v-else-if="
+          track[1].trackPublication?.kind === Track.Kind.Video &&
+          screenShareTrackSidMap.has(track[0] ?? '')
+        "
+        :track-info="track[1]"
+        :audio-track-info="
+          tracksMap.get(screenShareTrackSidMap.get(track[0] ?? '') ?? '')
+        "
+      />
+      <VideoComponent
+        v-else-if="track[1].trackPublication?.kind === Track.Kind.Video"
+        :track-info="track[1]"
+      />
+      <span v-else>Qallにもどる</span>
+    </div>
     <div v-else>Qallにもどる</div>
   </div>
 </template>
@@ -41,4 +72,8 @@ const restoreMainView = () => {
   margin: 0.5rem;
   margin-bottom: 1rem;
 }
+.subContainer {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
 </style>
diff --git a/src/components/Main/MainView/QallView/UserCard.vue b/src/components/Main/MainView/QallView/UserCard.vue
new file mode 100644
index 000000000..d2b55e21a
--- /dev/null
+++ b/src/components/Main/MainView/QallView/UserCard.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import { useUsersStore } from '/@/store/entities/users'
+import { buildUserIconPath } from '/@/lib/apis'
+
+const { trackInfo } = defineProps<{
+  trackInfo: TrackInfo
+}>()
+const { findUserByName } = useUsersStore()
+const user = computed(() => findUserByName(trackInfo.username))
+const userIconFileId = computed(() => user.value?.iconFileId ?? '')
+const iconImage = computed(() => buildUserIconPath(userIconFileId.value))
+</script>
+
+<template>
+  <div :class="$style.UserCard">
+    <div :class="$style.OuterIcon">
+      <img :src="iconImage" :class="$style.OuterImage" />
+    </div>
+    <div :class="$style.InnerIcon">
+      <img :src="iconImage" :class="$style.InnerImage" />
+    </div>
+
+    <div :class="$style.NameLabel">{{ trackInfo.username }}</div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.UserCard {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.InnerIcon {
+  width: calc(100% / 3);
+  aspect-ratio: 1;
+  background-size: cover;
+  border-radius: 50%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.OuterIcon {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  overflow: hidden;
+  filter: blur(40px);
+}
+.NameLabel {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  display: flex;
+  padding: 4px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+}
+.OuterImage {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.InnerImage {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+</style>
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 51d1a70c8..5b714fe20 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -4,9 +4,10 @@ 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'
+import UserCard from './UserCard.vue'
 
-const { tracksMap, screenShareTrackSidMap, screenShareTracks } = useQall()
+const { tracksMap, screenShareTrackSidMap, screenShareTracks, selectedTrack } =
+  useQall()
 
 const videoInputs = ref<MediaDeviceInfo[]>([])
 onMounted(async () => {
@@ -14,12 +15,15 @@ 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" :class="$style.largeCard">
+  <div
+    v-if="selectedTrack !== undefined"
+    :key="selectedTrack.trackPublication?.trackSid"
+    :class="$style.largeCard"
+  >
     <VideoComponent
       v-if="
         selectedTrack.trackPublication?.kind === 'video' &&
@@ -33,10 +37,9 @@ const selectedSid = ref<string>()
       :audio-track-info="
         tracksMap.get(screenShareTrackSidMap.get(selectedSid ?? '') ?? '')
       "
-      is-large
       not-mute
     />
-    <AudioComponent
+    <UserCard
       v-else-if="
         selectedTrack.trackPublication?.kind === 'audio' &&
         selectedTrack.isRemote &&
@@ -45,7 +48,6 @@ const selectedSid = ref<string>()
           ?.some?.(valueSid => valueSid === selectedSid)
       "
       :track-info="selectedTrack"
-      is-show
     />
   </div>
   <div :class="$style.TrackContainer">
@@ -71,7 +73,6 @@ const selectedSid = ref<string>()
           :audio-track-info="
             tracksMap.get(screenShareTrackSidMap.get(sid) ?? '')
           "
-          :is-large="false"
         />
       </div>
       <div
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 6d294d5c8..da3fc15f8 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -185,6 +185,7 @@ const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
           dtx: true
         }
       )
+      isMicOn.value = true
     }
 
     await room.value.localParticipant.setAttributes({})
@@ -511,6 +512,7 @@ const publishData = async (data: { type: 'stamp'; message: string }) => {
   await room.value.localParticipant.publishData(encoded, { reliable: true })
 }
 const decoder = new TextDecoder()
+const isMicOn = ref(false)
 
 export const useLiveKitSDK = () => {
   return {
@@ -526,6 +528,7 @@ export const useLiveKitSDK = () => {
     tracksMap,
     screenShareTrackSidMap,
     screenShareTracks,
+    isMicOn,
     qallMitt
   }
 }
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index cedeb9bf7..cd2bf7093 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -1,5 +1,8 @@
 import { ref } from 'vue'
-import { useLiveKitSDK } from '/@/composables/qall/useLiveKitSDK'
+import {
+  useLiveKitSDK,
+  type TrackInfo
+} from '/@/composables/qall/useLiveKitSDK'
 import { useMeStore } from '/@/store/domain/me'
 import { useToastStore } from '/@/store/ui/toast'
 import type { LocalAudioTrack, LocalVideoTrack } from 'livekit-client'
@@ -55,6 +58,7 @@ const {
   tracksMap,
   screenShareTrackSidMap,
   screenShareTracks,
+  isMicOn,
   qallMitt
 } = useLiveKitSDK()
 const { myId } = useMeStore()
@@ -266,10 +270,11 @@ const getQallingState = (channelId: string) => {
   return 'subView'
 }
 
-const isMicOn = ref(true)
 const isCameraOn = ref(false)
 const isScreenSharing = ref(false)
 
+const selectedTrack = ref<TrackInfo>()
+
 export const useQall = () => {
   const joinQall = (channelName: string, isWebinar: boolean = false) => {
     if (callingChannel.value) {
@@ -286,6 +291,11 @@ export const useQall = () => {
   const leaveQall = () => {
     leaveRoom()
     callingChannel.value = ''
+    isSubView.value = false
+    selectedTrack.value = undefined
+    isMicOn.value = true
+    isCameraOn.value = false
+    isScreenSharing.value = false
   }
   return {
     callingChannel,
@@ -310,6 +320,7 @@ export const useQall = () => {
     postSoundboardPlay,
     isMicOn,
     isCameraOn,
-    isScreenSharing
+    isScreenSharing,
+    selectedTrack
   }
 }

From 14f2afe78682b45e72213ad31aacbecc0af7937b Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 07:43:34 +0900
Subject: [PATCH 24/30] =?UTF-8?q?=E9=96=8B=E5=A7=8B=E9=9F=B3=E3=81=AA?=
 =?UTF-8?q?=E3=81=A9=E3=81=8C=E9=B3=B4=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useLiveKitSDK.ts |  28 ++-
 src/composables/qall/useQall.ts       |   4 +-
 src/lib/webrtc/AudioStreamMixer.ts    | 242 ++++++++++++++++++++++++++
 3 files changed, 270 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/webrtc/AudioStreamMixer.ts

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index da3fc15f8..7cd6f74de 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -15,11 +15,14 @@ import type {
   Participant,
   LocalTrack
 } from 'livekit-client'
-import { computed, ref, watch, watchEffect, type Ref } from 'vue'
+import { computed, ref, type Ref } from 'vue'
 import { useToastStore } from '/@/store/ui/toast'
 import apis from '/@/lib/apis'
 import { VirtualBackgroundProcessor } from '@shiguredo/virtual-background'
 import mitt from 'mitt'
+import ExtendedAudioContext from '/@/lib/webrtc/ExtendedAudioContext'
+import AudioStreamMixer from '/@/lib/webrtc/AudioStreamMixer'
+import { useRtcSettings } from '/@/store/app/rtcSettings'
 
 const virtualBackgroundAssetsPath =
   'https://cdn.jsdelivr.net/npm/@shiguredo/virtual-background@latest/dist'
@@ -28,6 +31,7 @@ type QallEventMap = {
 }
 const { addErrorToast } = useToastStore()
 const qallMitt = mitt<QallEventMap>()
+const rtcSettings = useRtcSettings()
 
 export type TrackInfo = (
   | {
@@ -53,6 +57,7 @@ const speakerIdentity = ref<string[]>([])
 const tracksMap: Ref<Map<string, TrackInfo>> = ref(new Map())
 const cameraProcessorMap: Ref<Map<string, CameraProcessor>> = ref(new Map())
 const screenShareTrackSidMap = ref<Map<string, string>>(new Map())
+const mixer = ref<AudioStreamMixer>()
 
 function handleTrackSubscribed(
   track: RemoteTrack,
@@ -127,6 +132,14 @@ function handleParticipantAttributesChanged(
   )
 }
 
+function handleParticipantConnected(participant: Participant) {
+  mixer.value?.playFileSource('qall_joined')
+}
+
+function handleParticipantDisconnected(participant: Participant) {
+  mixer.value?.playFileSource('qall_left')
+}
+
 const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
   try {
     const traQtoken = (await apis.getMyQRCode(true)).data
@@ -164,6 +177,8 @@ const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
         RoomEvent.ParticipantAttributesChanged,
         handleParticipantAttributesChanged
       )
+      .on(RoomEvent.ParticipantConnected, handleParticipantConnected)
+      .on(RoomEvent.ParticipantDisconnected, handleParticipantDisconnected)
 
     // connect to room
     await room.value.connect('wss://livekit.qall-dev.trapti.tech', token)
@@ -194,6 +209,14 @@ const joinRoom = async (roomName: string, isWebinar: boolean = false) => {
         screenShareTrackSidMap.value.set(key, participant.attributes[key] ?? '')
       })
     })
+
+    const audioContext = new ExtendedAudioContext()
+    mixer.value = new AudioStreamMixer(
+      audioContext,
+      rtcSettings.masterVolume.value
+    )
+    await mixer.value.initializePromise
+    await mixer.value.playFileSource('qall_start')
   } catch {
     addErrorToast('Qallの接続に失敗しました')
     await leaveRoom()
@@ -208,12 +231,13 @@ const screenShareTracks = computed(() =>
 async function leaveRoom() {
   // Leave the room by calling 'disconnect' method over the Room object
   await room.value?.disconnect()
+  await mixer.value?.playFileSource('qall_end')
 
   // Empty all variables
   room.value = undefined
   tracksMap.value.clear()
   screenShareTrackSidMap.value.clear()
-
+  mixer.value = undefined
   window.removeEventListener('beforeunload', leaveRoom)
 }
 
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index cd2bf7093..2d2b7ea10 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -288,8 +288,8 @@ export const useQall = () => {
 
     callingChannel.value = channelName
   }
-  const leaveQall = () => {
-    leaveRoom()
+  const leaveQall = async () => {
+    await leaveRoom()
     callingChannel.value = ''
     isSubView.value = false
     selectedTrack.value = undefined
diff --git a/src/lib/webrtc/AudioStreamMixer.ts b/src/lib/webrtc/AudioStreamMixer.ts
new file mode 100644
index 000000000..a2379194a
--- /dev/null
+++ b/src/lib/webrtc/AudioStreamMixer.ts
@@ -0,0 +1,242 @@
+import qallStartMp3 from '/@/assets/se/qall_start.mp3'
+import qallEndMp3 from '/@/assets/se/qall_end.mp3'
+import qallJoinedMp3 from '/@/assets/se/qall_joined.mp3'
+import qallLeftMp3 from '/@/assets/se/qall_left.mp3'
+import type ExtendedAudioContext from './ExtendedAudioContext'
+import NodeMerger from './NodeMerger'
+import mitt from 'mitt'
+
+type StreamNodes = {
+  source: MediaStreamAudioSourceNode
+  volumeGain: GainNode
+  analyser: AnalyserNode
+}
+
+type AudioStreamMixerEvents = {
+  streamVolumeChange: string
+}
+
+/**
+ * スピーカーに出力する音に対しての処理を行う
+ *
+ * @see https://github.com/traPtitech/traQ_S-UI/pull/3219
+ */
+export default class AudioStreamMixer {
+  private _initializePromise: Promise<void>
+  get initializePromise() {
+    return this._initializePromise
+  }
+
+  readonly context: ExtendedAudioContext
+  private readonly audioBufferMap = new Map<string, AudioBuffer>()
+  private readonly streamMap = new Map<string, MediaStream>()
+  private readonly streamNodesMap = new Map<string, StreamNodes>()
+  private readonly nodeMerger: NodeMerger
+  readonly masterVolumeGain: GainNode
+
+  private masterVolume: number
+  private readonly fileVolume = 0.25
+  private readonly streamVolumeMap = new Map<string, number>()
+
+  private readonly maxFileGain = 1
+  private readonly maxStreamGain = 5
+  private readonly maxMasterGain = 3
+
+  readonly listener = mitt<AudioStreamMixerEvents>()
+
+  constructor(context: ExtendedAudioContext, masterVolume: number) {
+    this._initializePromise = this.initialize()
+
+    this.context = context
+    this.masterVolume = masterVolume
+
+    this.nodeMerger = new NodeMerger(context)
+    this.masterVolumeGain = this.context.createGainNode(
+      this.masterVolume,
+      this.maxMasterGain
+    )
+
+    this.nodeMerger.addOutput(this.masterVolumeGain)
+    this.masterVolumeGain.connect(context.destination)
+  }
+
+  private async initialize() {
+    await Promise.all([
+      this.addFileSource('qall_start', qallStartMp3),
+      this.addFileSource('qall_end', qallEndMp3),
+      this.addFileSource('qall_joined', qallJoinedMp3),
+      this.addFileSource('qall_left', qallLeftMp3)
+    ])
+  }
+
+  /* stream manage methods */
+
+  private async addFileSource(key: string, url: string) {
+    const response = await fetch(url)
+    const buffer = await response.arrayBuffer()
+
+    const decodedData = await this.context.decodeAudio(buffer)
+    this.audioBufferMap.set(key, decodedData)
+  }
+
+  private addStream(key: string, stream: MediaStream) {
+    if (stream.getAudioTracks().length === 0) {
+      throw 'Invalid audio stream'
+    }
+    this.streamMap.set(key, stream)
+  }
+
+  private async removeStream(key: string) {
+    if (!this.streamMap.has(key)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'audioStreamMixer::removeStream: 同じstreamを重複して取り除こうとした可能性があります'
+      )
+      return
+    }
+
+    this.streamMap.delete(key)
+  }
+
+  /* node methods */
+
+  private createStreamGainNode(key: string) {
+    return this.context.createGainNode(
+      this.getStreamVolume(key),
+      this.maxStreamGain
+    )
+  }
+
+  /* play methods */
+
+  async playFileSource(key: string) {
+    const suspended = this.context.state === 'suspended'
+    const buffer = this.audioBufferMap.get(key)
+    if (!buffer) {
+      throw new Error(`Unloaded buffer: key name of ${key}}`)
+    }
+
+    const source = this.context.createBufferSourceNode(buffer)
+    const fileVolumeGain = this.context.createGainNode(
+      this.fileVolume,
+      this.maxFileGain
+    )
+    source.connect(fileVolumeGain)
+    this.nodeMerger.addInput(fileVolumeGain)
+
+    if (suspended) {
+      await this.context.resume()
+    }
+
+    return new Promise<void>(resolve => {
+      source.addEventListener(
+        'ended',
+        async () => {
+          source.disconnect()
+          fileVolumeGain.disconnect()
+
+          if (suspended) {
+            await this.context.suspend()
+          }
+          resolve()
+        },
+        { once: true }
+      )
+
+      source.start(0)
+    })
+  }
+
+  async playStream(key: string) {
+    if (this.context.state === 'suspended') {
+      await this.context.resume()
+    }
+    const stream = this.streamMap.get(key)
+    if (!stream) {
+      throw new Error(`Unloaded stream: key name of ${key}}`)
+    }
+
+    const source = this.context.createMediaStreamSource(stream)
+    const volumeGain = this.createStreamGainNode(key)
+    const analyser = this.context.createAnalyserNode()
+    source.connect(volumeGain)
+    volumeGain.connect(analyser)
+    this.nodeMerger.addInput(volumeGain)
+
+    // register audio for chrome
+    const audio = document.createElement('audio')
+    audio.srcObject = stream
+    audio.volume = 0
+
+    this.streamNodesMap.set(key, {
+      source,
+      volumeGain,
+      analyser
+    })
+  }
+
+  stopStream(key: string) {
+    const stream = this.streamMap.get(key)
+    if (!stream) {
+      throw new Error(`Unloaded stream: key name of ${key}}`)
+    }
+
+    const nodes = this.streamNodesMap.get(key)
+    if (!nodes) {
+      throw new Error(`Not started stream: key name of ${key}}`)
+    }
+
+    stream.getTracks().forEach(track => {
+      track.stop()
+    })
+    nodes.source.disconnect()
+    nodes.volumeGain.disconnect()
+    nodes.analyser.disconnect()
+  }
+
+  async addAndPlayStream(key: string, stream: MediaStream) {
+    if (this.streamMap.has(key)) {
+      await this.stopAndRemoveStream(key)
+    }
+
+    this.addStream(key, stream)
+    await this.playStream(key)
+  }
+
+  async stopAndRemoveStream(key: string) {
+    this.stopStream(key)
+    await this.removeStream(key)
+  }
+
+  /* volume methods */
+
+  getStreamVolume(key: string) {
+    return this.streamVolumeMap.get(key) ?? 1
+  }
+
+  setStreamVolume(key: string, volume: number) {
+    const v = Math.max(0, Math.min(1, volume))
+
+    const nodes = this.streamNodesMap.get(key)
+    if (!nodes) return
+
+    this.streamVolumeMap.set(key, v)
+    this.context.setGainNodeVolume(nodes.volumeGain, v, this.maxStreamGain)
+    this.listener.emit('streamVolumeChange', key)
+  }
+
+  setMasterVolume(volume: number) {
+    const v = Math.max(0, Math.min(1, volume))
+    this.context.setGainNodeVolume(this.masterVolumeGain, v, this.maxMasterGain)
+  }
+
+  /* analyze methods */
+
+  getLevelOfStream(key: string) {
+    const nodes = this.streamNodesMap.get(key)
+    if (!nodes) {
+      return 0
+    }
+    return this.context.getLevelFromNode(nodes.analyser)
+  }
+}

From 520688758275ccfe6db18d1bef98c863c131e027 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 07:51:21 +0900
Subject: [PATCH 25/30] =?UTF-8?q?UI=E3=81=AE=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useQall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 2d2b7ea10..3b82bd2e5 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -289,8 +289,8 @@ export const useQall = () => {
     callingChannel.value = channelName
   }
   const leaveQall = async () => {
-    await leaveRoom()
     callingChannel.value = ''
+    await leaveRoom()
     isSubView.value = false
     selectedTrack.value = undefined
     isMicOn.value = true

From e604c6e401d386af012b7fe1e2aa6d51e11bf6ab Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 07:56:23 +0900
Subject: [PATCH 26/30] fix

---
 src/components/Main/MainView/QallView/UserList.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index 5b714fe20..c24d0b28c 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -42,7 +42,6 @@ const selectedSid = ref<string>()
     <UserCard
       v-else-if="
         selectedTrack.trackPublication?.kind === 'audio' &&
-        selectedTrack.isRemote &&
         !screenShareTrackSidMap
           .values()
           ?.some?.(valueSid => valueSid === selectedSid)
@@ -78,13 +77,12 @@ const selectedSid = ref<string>()
       <div
         v-else-if="
           track.trackPublication?.kind === 'audio' &&
-          track.isRemote &&
           !screenShareTracks.some?.(([_, valueSid]) => valueSid === sid)
         "
         :class="$style.card"
         @click="[selectedTrack, selectedSid] = [track, sid]"
       >
-        <AudioComponent :track-info="track" is-show />
+        <UserCard :track-info="track" />
       </div>
     </template>
   </div>

From 135e163992b19cd0e6eb901f766ca626a419d881 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 07:59:26 +0900
Subject: [PATCH 27/30] fix

---
 .../Main/MainView/QallView/CallControlButtonSmall.vue       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Main/MainView/QallView/CallControlButtonSmall.vue b/src/components/Main/MainView/QallView/CallControlButtonSmall.vue
index df4575010..985016213 100644
--- a/src/components/Main/MainView/QallView/CallControlButtonSmall.vue
+++ b/src/components/Main/MainView/QallView/CallControlButtonSmall.vue
@@ -43,7 +43,6 @@ function handleClick() {
 .callControlBtnSmall {
   width: 48px;
   height: 48px;
-  background-color: #222325;
   border: none;
   cursor: pointer;
   padding: 0;
@@ -51,11 +50,12 @@ function handleClick() {
   justify-content: center;
   align-items: center;
   transition: opacity 0.3s;
-  color: white;
+  @include background-tertiary;
+  @include color-ui-primary;
 }
 
 .callControlBtnSmall:hover {
-  opacity: 0.1;
+  opacity: 0.5;
 }
 
 .icon {

From 0820539c6675139b7ac7831f561c2a388388ffa3 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 09:04:02 +0900
Subject: [PATCH 28/30] =?UTF-8?q?=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E5=85=A5=E5=8A=9B=E6=AC=84=E3=82=92=E4=B8=8B=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composables/useChannelView.ts             |  71 ++++++
 .../MainView/MessageInput/MessageInput.vue    |   7 +-
 .../MainView/QallView/QallMessageView.vue     | 149 ++++++-----
 .../Main/MainView/QallView/QallView.vue       | 240 +++++++++---------
 .../Main/MainView/QallView/UserList.vue       |   1 -
 5 files changed, 277 insertions(+), 191 deletions(-)
 create mode 100644 src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts

diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
new file mode 100644
index 000000000..2258c21b6
--- /dev/null
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts
@@ -0,0 +1,71 @@
+import { computed, ref, type ShallowRef } from 'vue'
+import useChannelMessageFetcher from './useChannelMessageFetcher'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useSubscriptionStore } from '/@/store/domain/subscription'
+export const useChannelView = ({
+  channelId,
+  entryMessageId,
+  scrollerEle
+}: {
+  channelId: string
+  entryMessageId?: string
+  scrollerEle: ShallowRef<{ $el: HTMLDivElement } | undefined>
+}) => {
+  const isMessageShow = ref(false)
+
+  const {
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest
+  } = useChannelMessageFetcher(scrollerEle, { channelId, entryMessageId })
+
+  const { channelsMap } = useChannelsStore()
+  const isArchived = computed(
+    () => channelsMap.value.get(channelId)?.archived ?? false
+  )
+
+  const { unreadChannelsMap } = useSubscriptionStore()
+  const resetIsReachedLatest = () => {
+    if (!unreadChannelsMap.value.get(channelId)) return
+    isReachedLatest.value = false
+  }
+
+  const showToNewMessageButton = ref(false)
+  const toNewMessage = (behavior?: ScrollBehavior) => {
+    if (!scrollerEle.value) return
+    showToNewMessageButton.value = false
+    scrollerEle.value.$el.scrollTo({
+      top: scrollerEle.value.$el.scrollHeight,
+      behavior: behavior
+    })
+  }
+
+  const handleScroll = () => {
+    if (scrollerEle.value === undefined || isLoading.value) return
+    const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+    showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
+    if (!isReachedLatest.value) {
+      showToNewMessageButton.value = true
+    }
+  }
+
+  return {
+    isMessageShow,
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest,
+    isArchived,
+    resetIsReachedLatest,
+    showToNewMessageButton,
+    toNewMessage,
+    handleScroll
+  }
+}
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 711a50d5d..818b87cd7 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -2,7 +2,7 @@
   <div
     ref="containerEle"
     :class="$style.container"
-    :data-is-mobile="$boolAttr(isMobile)"
+    :data-is-mobile="$boolAttr(forceMobileStyle || isMobile)"
   >
     <button
       v-if="showToNewMessageButton"
@@ -36,7 +36,9 @@
         v-model="state.text"
         :channel-id="channelId"
         :is-posting="isPosting"
-        :shrink-to-one-line="isMobile && isLeftControlsExpanded"
+        :shrink-to-one-line="
+          (forceMobileStyle || isMobile) && isLeftControlsExpanded
+        "
         @focus="onFocus"
         @blur="onBlur"
         @add-attachments="onAddAttachments"
@@ -85,6 +87,7 @@ const props = defineProps<{
   channelId: ChannelId | DMChannelId
   typingUsers: UserId[]
   showToNewMessageButton: boolean
+  forceMobileStyle?: boolean
 }>()
 const emit = defineEmits<{
   (e: 'clickToNewMessageButton'): void
diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
index d26f028d6..4ff8fd495 100644
--- a/src/components/Main/MainView/QallView/QallMessageView.vue
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -1,64 +1,3 @@
-<template>
-  <div
-    :class="$style.container"
-    :data-is-not-messages-show="$boolAttr(!isMessageShow)"
-  >
-    <scroll-loading-bar
-      :class="$style.loadingBar"
-      :show="isLoading && isMessageShow"
-    />
-    <transition name="fade-bottom" mode="out-in">
-      <messages-scroller
-        v-if="isMessageShow"
-        ref="scrollerEle"
-        :message-ids="messageIds"
-        :is-reached-end="isReachedEnd"
-        :is-reached-latest="isReachedLatest"
-        :is-loading="isLoading"
-        :last-loading-direction="lastLoadingDirection"
-        @request-load-former="onLoadFormerMessagesRequest"
-        @request-load-latter="onLoadLatterMessagesRequest"
-        @scroll-passive="handleScroll"
-        @reset-is-reached-latest="resetIsReachedLatest"
-      >
-        <template
-          #default="{ messageId, onChangeHeight, onEntryMessageLoaded }"
-        >
-          <message-element
-            :class="$style.element"
-            :message-id="messageId"
-            :is-archived="isArchived"
-            @change-height="onChangeHeight"
-            @entry-message-loaded="onEntryMessageLoaded"
-          />
-        </template>
-      </messages-scroller>
-    </transition>
-    <div :class="$style.uiElement">
-      <FormButton
-        label="メッセージを表示"
-        @click="
-          () => {
-            if (isMessageShow) {
-              isMessageShow = false
-              toNewMessage('smooth')
-            } else {
-              isMessageShow = true
-              nextTick(() => toNewMessage())
-            }
-          }
-        "
-      />
-      <message-input
-        :channel-id="channelId"
-        :typing-users="typingUsers"
-        :show-to-new-message-button="showToNewMessageButton"
-        @click-to-new-message-button="toNewMessage"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
@@ -120,15 +59,97 @@ const handleScroll = () => {
 }
 </script>
 
+<template>
+  <div
+    :class="$style.container"
+    :data-is-not-messages-show="$boolAttr(!isMessageShow)"
+  >
+    <div :class="$style.mainViewConteiner">
+      <div :class="$style.messageContainer">
+        <scroll-loading-bar
+          :class="$style.loadingBar"
+          :show="isLoading && isMessageShow"
+        />
+        <transition name="fade-bottom" mode="out-in">
+          <messages-scroller
+            v-if="isMessageShow"
+            ref="scrollerEle"
+            :message-ids="messageIds"
+            :is-reached-end="isReachedEnd"
+            :is-reached-latest="isReachedLatest"
+            :is-loading="isLoading"
+            :last-loading-direction="lastLoadingDirection"
+            @request-load-former="onLoadFormerMessagesRequest"
+            @request-load-latter="onLoadLatterMessagesRequest"
+            @scroll-passive="handleScroll"
+            @reset-is-reached-latest="resetIsReachedLatest"
+          >
+            <template
+              #default="{ messageId, onChangeHeight, onEntryMessageLoaded }"
+            >
+              <message-element
+                :class="$style.element"
+                :message-id="messageId"
+                :is-archived="isArchived"
+                @change-height="onChangeHeight"
+                @entry-message-loaded="onEntryMessageLoaded"
+              />
+            </template>
+          </messages-scroller>
+        </transition>
+        <div :class="$style.uiElement">
+          <FormButton
+            label="メッセージを表示"
+            @click="
+              () => {
+                if (isMessageShow) {
+                  isMessageShow = false
+                  toNewMessage('smooth')
+                } else {
+                  isMessageShow = true
+                  nextTick(() => toNewMessage())
+                }
+              }
+            "
+          />
+        </div>
+      </div>
+      <slot name="default"></slot>
+    </div>
+    <message-input
+      :channel-id="channelId"
+      :typing-users="typingUsers"
+      :show-to-new-message-button="showToNewMessageButton"
+      force-mobile-style
+      @click-to-new-message-button="toNewMessage"
+    />
+  </div>
+</template>
+
 <style lang="scss" module>
 .container {
   display: flex;
-  flex: 1 1;
+  height: 100%;
+  width: 100%;
   flex-direction: column;
-  justify-content: end;
+}
+
+.mainViewConteiner {
+  flex-grow: 1;
   position: relative;
-  width: 100%;
+}
+
+.messageContainer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 30%;
   height: 100%;
+
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  justify-content: end;
   &[data-is-not-messages-show] {
     pointer-events: none;
   }
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 07f040b65..38c007b00 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -4,7 +4,6 @@ import { onMounted, ref, useTemplateRef, computed } from 'vue'
 import DanmakuContainer from './DanmakuContainer.vue'
 import CallControlButtonSmall from './CallControlButtonSmall.vue'
 import CallControlButton from './CallControlButton.vue'
-import QallMessageView from './QallMessageView.vue'
 import SoundBoard from './SoundBoard.vue'
 import ClickOutside from '/@/components/UI/ClickOutside'
 import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
@@ -16,6 +15,7 @@ import CameraDetailSetting from './CameraDetailSetting.vue'
 import ScreenShareDetailSetting from './ScreenShareDetailSetting.vue'
 import DetailButton from './DetailButton.vue'
 import IconButton from '/@/components/UI/IconButton.vue'
+import QallMessageView from './QallMessageView.vue'
 
 const { pushModal } = useModalStore()
 
@@ -183,136 +183,133 @@ const showShareScreenSettingDetail = ref(false)
 
 <template>
   <div :class="$style.Block">
-    <DanmakuContainer />
-    <QallMessageView
-      :channel-id="callingChannel"
-      :typing-users="[]"
-      :class="$style.channelView"
-    />
-    <IconButton
-      icon-name="close"
-      icon-mdi
-      :class="$style.closeButton"
-      @click="isSubView = true"
-    />
-    <UserList />
+    <QallMessageView :channel-id="callingChannel" :typing-users="[]">
+      <DanmakuContainer />
+      <IconButton
+        icon-name="close"
+        icon-mdi
+        :class="$style.closeButton"
+        @click="isSubView = true"
+      />
+      <UserList />
 
-    <div :class="$style.TrackContainer">
-      <div :class="$style.controlBar">
-        <div :class="$style.smallButtonGroup">
-          <div :class="$style.soundBoardButton">
-            <CallControlButtonSmall
-              icon="sound_detection_loud_sound"
-              :on-click="handleSound"
+      <div :class="$style.TrackContainer">
+        <div :class="$style.controlBar">
+          <div :class="$style.smallButtonGroup">
+            <div :class="$style.soundBoardButton">
+              <CallControlButtonSmall
+                icon="sound_detection_loud_sound"
+                :on-click="handleSound"
+              />
+              <ClickOutside @click-outside="showSoundBoard = false">
+                <SoundBoard v-if="showSoundBoard" />
+              </ClickOutside>
+            </div>
+            <div ref="reactionButton">
+              <CallControlButtonSmall
+                icon="add_reaction"
+                :on-click="handleReaction"
+              />
+            </div>
+          </div>
+          <div :class="$style.verticalBar"></div>
+          <div :class="$style.buttonWithDetail">
+            <CallControlButton
+              :icon="screenShareIcon"
+              :is-on="isScreenSharing"
+              :on-click="toggleScreen"
+              :mdi="false"
+              :inverted="isScreenSharing"
+            />
+            <DetailButton
+              @click="
+                () => {
+                  showShareScreenSettingDetail = true
+                }
+              "
+            />
+            <ScreenShareDetailSetting
+              :open="showShareScreenSettingDetail"
+              @add="
+                () => {
+                  isScreenSharing = true
+                }
+              "
+              @close="
+                () => {
+                  showShareScreenSettingDetail = false
+                }
+              "
             />
-            <ClickOutside @click-outside="showSoundBoard = false">
-              <SoundBoard v-if="showSoundBoard" />
-            </ClickOutside>
           </div>
-          <div ref="reactionButton">
-            <CallControlButtonSmall
-              icon="add_reaction"
-              :on-click="handleReaction"
+          <div :class="$style.buttonWithDetail">
+            <CallControlButton
+              :icon="cameraIcon"
+              :is-on="isCameraOn"
+              :on-click="toggleVideo"
+              :inverted="isCameraOn"
+            />
+            <DetailButton
+              :inverted="isCameraOn"
+              @click="
+                () => {
+                  showCameraDetailSetting = true
+                }
+              "
+            />
+            <CameraDetailSetting
+              :open="showCameraDetailSetting"
+              :video-inputs="videoInputs"
+              @save="handleBackgroundSave"
+              @add="
+                () => {
+                  isCameraOn = true
+                }
+              "
+              @close="
+                () => {
+                  showCameraDetailSetting = false
+                }
+              "
             />
           </div>
-        </div>
-        <div :class="$style.verticalBar"></div>
-        <div :class="$style.buttonWithDetail">
           <CallControlButton
-            :icon="screenShareIcon"
-            :is-on="isScreenSharing"
-            :on-click="toggleScreen"
-            :mdi="false"
-            :inverted="isScreenSharing"
-          />
-          <DetailButton
-            @click="
-              () => {
-                showShareScreenSettingDetail = true
-              }
-            "
-          />
-          <ScreenShareDetailSetting
-            :open="showShareScreenSettingDetail"
-            @add="
-              () => {
-                isScreenSharing = true
-              }
-            "
-            @close="
-              () => {
-                showShareScreenSettingDetail = false
-              }
-            "
+            :icon="micIcon"
+            :is-on="isMicOn"
+            :on-click="toggleAudio"
+            :inverted="isMicOn"
           />
-        </div>
-        <div :class="$style.buttonWithDetail">
           <CallControlButton
-            :icon="cameraIcon"
-            :is-on="isCameraOn"
-            :on-click="toggleVideo"
-            :inverted="isCameraOn"
-          />
-          <DetailButton
-            :inverted="isCameraOn"
-            @click="
-              () => {
-                showCameraDetailSetting = true
-              }
-            "
-          />
-          <CameraDetailSetting
-            :open="showCameraDetailSetting"
-            :video-inputs="videoInputs"
-            @save="handleBackgroundSave"
-            @add="
-              () => {
-                isCameraOn = true
-              }
-            "
-            @close="
-              () => {
-                showCameraDetailSetting = false
-              }
-            "
+            icon="phone-hangup"
+            is-on
+            :on-click="leaveQall"
+            :on-background-color="'#F26451'"
           />
-        </div>
-        <CallControlButton
-          :icon="micIcon"
-          :is-on="isMicOn"
-          :on-click="toggleAudio"
-          :inverted="isMicOn"
-        />
-        <CallControlButton
-          icon="phone-hangup"
-          is-on
-          :on-click="leaveQall"
-          :on-background-color="'#F26451'"
-        />
-        <div :class="$style.verticalBar"></div>
-        <div :class="$style.smallButtonGroup">
-          <div :class="$style.participantsContainer">
-            <ClickOutside @click-outside="showParticipants = false">
-              <div v-if="showParticipants" :class="$style.participantsList">
-                <div :class="$style.participantsContent">
-                  <participant-list
-                    v-for="participant in filteredParticipants"
-                    :key="participant.user.id"
-                    :participant="participant.user"
-                    :track-info="getParticipantTrackInfo(participant)!"
-                  />
+          <div :class="$style.verticalBar"></div>
+          <div :class="$style.smallButtonGroup">
+            <div :class="$style.participantsContainer">
+              <ClickOutside @click-outside="showParticipants = false">
+                <div v-if="showParticipants" :class="$style.participantsList">
+                  <div :class="$style.participantsContent">
+                    <participant-list
+                      v-for="participant in filteredParticipants"
+                      :key="participant.user.id"
+                      :participant="participant.user"
+                      :track-info="getParticipantTrackInfo(participant)!"
+                    />
+                  </div>
                 </div>
-              </div>
-            </ClickOutside>
-            <CallControlButtonSmall
-              icon="account-multiple"
-              :on-click="handleGroup"
-              mdi
-            />
+              </ClickOutside>
+              <CallControlButtonSmall
+                icon="account-multiple"
+                :on-click="handleGroup"
+                mdi
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </QallMessageView>
   </div>
 </template>
 
@@ -355,12 +352,7 @@ const showShareScreenSettingDetail = ref(false)
 }
 
 .Block {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  position: relative;
+  height: 100%;
   height: 100%;
 }
 
diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index c24d0b28c..27a1ed45e 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -1,7 +1,6 @@
 <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 UserCard from './UserCard.vue'

From f9cb3e83fd8fafe0ccdc81be2f44ba5819e8ad16 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 09:24:09 +0900
Subject: [PATCH 29/30] =?UTF-8?q?UserList=E3=81=AE=E6=8B=A1=E5=A4=A7?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=82=92=E8=A6=AA=E8=A6=81=E7=B4=A0=E5=9F=BA?=
 =?UTF-8?q?=E6=BA=96=E3=81=AE=E3=82=B5=E3=82=A4=E3=82=BA=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/QallView/UserList.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Main/MainView/QallView/UserList.vue b/src/components/Main/MainView/QallView/UserList.vue
index c24d0b28c..73078e732 100644
--- a/src/components/Main/MainView/QallView/UserList.vue
+++ b/src/components/Main/MainView/QallView/UserList.vue
@@ -1,7 +1,6 @@
 <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 UserCard from './UserCard.vue'
@@ -102,7 +101,7 @@ const selectedSid = ref<string>()
   width: 192px;
 }
 .largeCard {
-  height: 324px;
-  width: 576px;
+  height: 50%;
+  width: 66%;
 }
 </style>

From 5e1b0287442c59228e945fcb226a2e607c2745f9 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sun, 26 Jan 2025 09:26:52 +0900
Subject: [PATCH 30/30] =?UTF-8?q?=E6=9C=80=E6=96=B0=E3=83=A1=E3=83=83?=
 =?UTF-8?q?=E3=82=BB=E3=83=BC=E3=82=B8=E3=81=B8=E3=81=AE=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/QallView/QallMessageView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
index 4ff8fd495..6c69d1f00 100644
--- a/src/components/Main/MainView/QallView/QallMessageView.vue
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -119,9 +119,8 @@ const handleScroll = () => {
     <message-input
       :channel-id="channelId"
       :typing-users="typingUsers"
-      :show-to-new-message-button="showToNewMessageButton"
+      :show-to-new-message-button="false"
       force-mobile-style
-      @click-to-new-message-button="toNewMessage"
     />
   </div>
 </template>