| name | webrtc-mobile-actions |
| description | WebRTC UI の参加者アクションを最小差分で改善し、PC とスマホの両方で参加者タイルの ⋮ ボタンから主表示切替や個別音量調整を使えるようにする |
webrtc-mobile-actions
目的
この Skill は、WebRTC UI に対して参加者ごとの操作入口を PC とスマホで揃えつつ、最小差分で改善するためのものである。
主な対象は次の 3 点。
- 参加者タイルの
⋮ ボタンを PC / スマホの両方で使えるようにする
⋮ ボタンから主表示切替を使えるようにする
- 参加者ごとの音量調整を PC / スマホの両方で使えるようにする
この Skill を使う場面
- PC では右クリックメニューがあるが、
⋮ ボタンも明示的に出したいとき
- スマホで右クリック相当の操作入口を追加したいとき
- 参加者タイルごとの操作を PC / スマホで分かりやすく揃えたいとき
- 既存の WebRTC 接続フローを変えずに、参加者アクション UI だけ改善したいとき
この Skill を使わない場面
- late join 不具合の修正
- subscribeExisting / onStreamPublished の責務見直し
- SkyWay 接続フローの変更
- 大きなレイアウト全面改修
- 無関係なリファクタ
変更対象
優先して触るファイル:
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 のカメラタイル右上に
⋮ ボタンを追加してよい
- PC とスマホの両方で
⋮ ボタンを表示してよい
- local participant にも必要なら追加してよいが、local 用操作だけに限定する
⋮ ボタンは mute badge や主表示 UI と重ならない位置に置く
- PC では右クリックも残してよい
2. PC とスマホの表示方式
- PC では、
⋮ クリックまたは右クリックで既存の座標付きメニューを開いてよい
- スマホでは、
⋮ タップで下部から出る簡易アクションシートまたはボトムシートを表示する
- できるだけ既存の participantMenu state / handler を再利用する
- 機能ロジックは共通、表示方法だけ PC とスマホで分ける
- 長押し対応は今回の対象にしない
3. 使える操作
共有がないとき:
共有があるとき:
音量を調整
- 必要なら
共有中は主表示を変更できません の説明文を表示してよい
4. 主表示ルール
- 共有が存在する場合、主表示エリアは共有コンテンツ用として扱う
- どの共有を主表示するかは、既存の「配信を見る」導線または共有選択 UI に従う
- 共有が存在する間は、参加者カメラの
主表示にする は無効化または非表示にする
- 共有が存在しないときだけ、参加者カメラの
主表示にする / 主表示を解除 を使えるようにする
- PC とスマホで主表示ルールを変えない
5. 音量調整 UI
- PC では既存の小メニュー内 UI を維持してよい
- スマホではアクションシート内またはボトムシート内に slider を表示する
- 対象は remote participant ごと
- 初期値は既存どおり 100%
- 範囲は 0〜100 とする
- 100 を超える増幅はしない
- 現在値を
% で表示してよい
- 既存の per-user volume ロジックを流用する
- local participant には volume slider を出さない
最小差分の実装指針
- 既存の participantMenu を活かす
- PC は座標付き menu、スマホは下部シートとして出し分ける
- 追加する state は最小限にする
WebRTC_UI.vue の変更を中心にし、useStreamReceiver.js の変更は state と action の追加に留める
- 無関係な整形、rename、コメント変更、関数移動はしない
不変条件
以下は壊さない。
- late join
- self publication 非購読
- join / leave / 再入室
- 画面共有開始 / 停止
- 背景ぼかし ON / OFF
- 共有がある場合は共有側が主表示レーンを使うこと
- 参加者カメラと共有画面を同じ責務に戻さないこと
- 既存の per-user volume 仕様
- 既存の mute 表示ロジック
受け入れ条件
- PC では
⋮ ボタンから参加者メニューを開ける
- PC では右クリックメニューも必要なら使える
- スマホでは
⋮ ボタンから参加者アクションシートを開ける
- 共有なし時は
主表示にする / 主表示を解除 / 音量を調整 を使える
- 共有あり時は
音量を調整 のみ使える
- 主表示ルールは PC とスマホで共通
- per-user volume は既存どおり participant ごとに効く
- 既存の mute 表示や主表示レイアウトを壊さない
- build と syntax check が通る
禁止事項
- whole-file rewrite
- 接続フローの再設計
- subscribe ロジックの再設計
- 共有画面レイアウトの全面改修
- 無関係な readable 化
- 無関係なコメント書き換え
- 無関係な import 並び替え
- 無関係な formatting
完了報告
完了時は簡潔に次を報告する。
- 変更ファイル
- 実装した参加者アクション UI の内容
- PC とスマホでどう挙動を分けたか
- 未検証部分
- 手元で確認すべきシナリオ