webrtc-mobile-actions

name	webrtc-mobile-actions
description	WebRTC UI に対して、参加者タイルの ⋮ ボタンや右クリックメニュー、レイアウト内主表示、ミュート可視化、参加者ごとの音量調整を最小差分で追加・改善する

webrtc-mobile-actions

目的

この Skill は、WebRTC UI に対してスマホ向けの参加者操作を最小差分で追加するためのものである。

主な対象は次の 3 点。

• スマホで右クリックの代わりになる参加者アクション入口を追加する
• 参加者タイルの ⋮ ボタンから主表示切替を使えるようにする
• 参加者ごとの音量調整をスマホでも使えるようにする

この Skill を使う場面

• PC では右クリックメニューがあるが、スマホでは同等操作が使えないとき
• 参加者タイルごとの操作をスマホでも自然に行いたいとき
• 既存の WebRTC 接続フローを変えずに、スマホ UI だけ追加したいとき
• ボトムシートや簡易アクションシートを最小差分で追加したいとき
• PC とスマホで参加者アクションの入口を揃えたいとき

この Skill を使わない場面

• late join 不具合の修正
• subscribeExisting / onStreamPublished の責務見直し
• SkyWay 接続フローの変更
• 大きなレイアウト全面改修
• PC 向け右クリック仕様の全面再設計
• 無関係なリファクタ

変更対象

優先して触るファイル:

• src/components/WebRTC_UI.vue
• src/composables/useStreamReceiver.js

必要最小限で触ってよいファイル:

• src/services/VideoUIService.js

原則として触らないファイル:

• src/services/SkywayRoomService.js
• src/services/MediaStreamService.js
• src/services/RnnoiseService.js

必要性が明確でない限り、他ファイルへ広げない。

プロジェクト前提

• useStreamReceiver.js は orchestrator として扱う
• DOM 生成・attach・audio/video 要素操作は既存責務を維持する
• SkyWay の join / leave / subscribeExisting / onStreamPublished の流れは変更しない
• self publication を remote subscribe 側へ混ぜない
• late join、再入室、画面共有、背景ぼかし、既存のスピーカー出力切替を壊さない
• 共有画面と参加者カメラは別責務として扱う
• PC の既存右クリックメニューは維持する

実装ルール

1. スマホ向け参加者アクション入口

• スマホでは右クリックを前提にしない
• 各参加者タイル右上に ⋮ ボタンを追加してよい
• ⋮ ボタンは remote participant に対して優先して出す
• local participant にも必要なら出してよいが、local 用操作だけに限定する
• 既存の mute badge や主表示 UI と重ならない位置に置く

2. スマホ向け参加者アクション UI

• スマホでは ⋮ ボタン押下で、下部から出る簡易アクションシートまたはボトムシートを表示する
• PC では既存の右クリックメニューを維持する
• できるだけ既存の participantMenu state / handler を再利用する
• 機能ロジックは共通、表示方法だけ PC とスマホで分ける
• 長押し対応は今回の対象にしない

3. スマホで使える操作

共有がないとき:

• 主表示にする
• 主表示を解除
• 音量を調整

共有があるとき:

• 音量を調整
• 必要なら 共有中は主表示を変更できません の説明文を表示してよい

4. 主表示ルール

• 共有が存在する場合、主表示エリアは共有コンテンツ用として扱う
• どの共有を主表示するかは、既存の「配信を見る」導線または共有選択 UI に従う
• 共有が存在する間は、参加者カメラの 主表示にする は無効化または非表示にする
• 共有が存在しないときだけ、参加者カメラの 主表示にする / 主表示を解除 を使えるようにする
• PC とスマホで主表示ルールを変えない

5. 音量調整 UI

• スマホでは細いポップアップではなく、アクションシート内またはボトムシート内に slider を表示する
• 対象は remote participant ごと
• 初期値は既存どおり 100%
• 範囲は 0〜100 とする
• 100 を超える増幅はしない
• 現在値を % で表示してよい
• 既存の per-user volume ロジックを流用する
• local participant には volume slider を出さない

6. UI 方針

• スマホで主要操作が横スクロール前提にならないようにする
• 小さなポップアップより、タップしやすい下部 UI を優先する
• PC では今の UX を壊さず、スマホだけ入口を補う
• スマホで誤操作しにくい最小 UI を優先する

最小差分の実装指針

• 既存の participantMenu を活かし、PC は座標付き menu、スマホは下部シートとして出し分ける
• 追加する state は最小限にする
• WebRTC_UI.vue の変更を中心にし、useStreamReceiver.js の変更は state と action の追加に留める
• 既存の主表示切替、音量変更 handler は再利用する
• 無関係な整形、rename、コメント変更、関数移動はしない

不変条件

以下は壊さない。

• late join
• self publication 非購読
• join / leave / 再入室
• 画面共有開始 / 停止
• 背景ぼかし ON / OFF
• 共有がある場合は共有側が主表示レーンを使うこと
• 参加者カメラと共有画面を同じ責務に戻さないこと
• PC の既存右クリックメニュー
• 既存の per-user volume 仕様
• 既存の mute 表示ロジック

受け入れ条件

• PC では既存の右クリックメニューがそのまま使える
• スマホでは参加者タイル右上の ⋮ ボタンから参加者アクションを開ける
• 共有なし時は 主表示にする / 主表示を解除 / 音量を調整 を使える
• 共有あり時は 音量を調整 のみ使える
• 主表示ルールは PC とスマホで共通
• per-user volume は既存どおり participant ごとに効く
• 既存の mute 表示や主表示レイアウトを壊さない
• build と syntax check が通る

禁止事項

• whole-file rewrite
• 接続フローの再設計
• subscribe ロジックの再設計
• 共有画面レイアウトの全面改修
• 無関係な readable 化
• 無関係なコメント書き換え
• 無関係な import 並び替え
• 無関係な formatting
• スマホ対応のために PC の既存操作を削除すること

完了報告

完了時は簡潔に次を報告する。

• 変更ファイル
• 実装したスマホ対応の内容
• PC とスマホでどう挙動を分けたか
• 未検証部分
• 手元で確認すべきシナリオ