webrtc-mobile-actions

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 とスマホでどう挙動を分けたか
• 未検証部分
• 手元で確認すべきシナリオ