ウェビナー仮実装: サーバー接続部分はよいと思うんだけど、見た目の部分と上位コンポーネントでの変数管理がよくわかんなかった

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

@@ -5,11 +5,22 @@
 import { ref, watch, useCssModule, computed } from 'vue'
 import type { User } from '@traptitech/traq'
 
-const { participant, trackInfo } = defineProps<{
+// 追加: useQall をimportし、changeParticipantRoleを使う
+import { useQall } from '/@/composables/qall/useQall'
+
+const props = defineProps<{
   participant: User
   trackInfo: TrackInfo
+  roomId: string
+  isWebinar: boolean
+  iHavePermission: boolean // 自分が発言権限を持っているかどうか
+  participantCanPublish: boolean // 表示する相手の発言権限
 }>()
 
+const { participant, trackInfo, roomId, isWebinar, iHavePermission, participantCanPublish } = props
+
+const { changeParticipantRole } = useQall()
+
 const { getStore, setStore } = useUserVolume()
 
 const parseToFloat = (value: number | string): number => {
@@ -62,23 +73,50 @@
   [style.volumeSlider]: true,
   [style.muted]: isMuted.value
 }))
+
+/**
+ * 発言権限のトグル (チェックボックスの変更)
+ */
+const publishCheck = ref(participantCanPublish)
+
+const togglePublish = async () => {
+  // もし自分が権限を持ってなければ変更不可
+  if (!iHavePermission) return
+
+  publishCheck.value = !publishCheck.value
+  try {
+    await changeParticipantRole(roomId, [
+      {
+        identity: participant.name,  // name が identityとして識別されてる想定
+        canPublish: publishCheck.value
+      }
+    ])
+  } catch (e) {
+    console.error('Failed to change participant role:', e)
+  }
+}
 </script>
 
 <template>
   <div :class="$style.container">
     <div :class="$style.leftSide">
       <user-icon :size="40" :user-id="participant.id" />
       <span :class="$style.userName">{{ participant.displayName }}</span>
-      <!-- TODO: Qall: ミュートを実装する -->
-      <!-- <button :class="$style.micIconButton">
-        <a-icon v-if="isMuted" name="microphone-off" mdi />
-      </button> -->
+      <!-- (Optional) mic or speaker icon if needed -->
     </div>
+
     <div :class="$style.rightSide">
-      <!-- <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> -->
+      <!-- If isWebinar && iHavePermission, show a checkbox to toggle participant's canPublish -->
+      <div v-if="isWebinar && iHavePermission" :class="$style.checkboxContainer">
+        <input
+          type="checkbox"
+          :checked="publishCheck"
+          @change="togglePublish"
+        />
+        <label>発言権限</label>
+      </div>
+
+      <!-- volume slider -->
       <input
         v-model="volume"
         type="range"
@@ -128,12 +166,11 @@
   gap: 8px;
 }
 
-.iconButton {
-  width: 40px;
-  height: 40px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
+/* checkbox style */
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .volumeSlider {

src/composables/qall/useQall.ts

@@ -193,10 +193,39 @@
     const text = await res.text()
     throw new Error(`POST /soundboard/play failed: ${text}`)
   }
-  // 正常時に IngressInfo(ingressId, url, streamKey)が返る想定
   return await res.json()
 }
 
+/**
+ * PATCH /rooms/{roomId}/participants
+ * ルームでの発言権限を変更
+ *
+ * participants:
+ *   [{ identity: "xxx", canPublish: true }, ...]
+ */
+const changeParticipantRole = async (
+  roomId: string,
+  participants: Array<{ identity: string; canPublish: boolean }>
+): Promise<{
+  results: Array<{
+    participantId: string
+    status: 'success' | 'error'
+    errorMessage?: string
+  }>
+}> => {
+  const res = await qallFetch(`/api/rooms/${roomId}/participants`, {
+    method: 'PATCH',
+    body: JSON.stringify(participants)
+    // headers → デフォルト application/json
+  })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`PATCH /rooms/${roomId}/participants failed: ${text}`)
+  }
+  return await res.json()
+}
+
+// その他既存のWebSocketなど
 const purifyRoomData = async (data: RoomsWithParticipants): Promise<Rooms> => {
   if (!data) return []
   await bothChannelsMapInitialFetchPromise.value
@@ -318,6 +347,7 @@
     getSoundboardList,
     postSoundboard,
     postSoundboardPlay,
+    changeParticipantRole,
     isMicOn,
     isCameraOn,
     isScreenSharing,