feat(settings): add shared web player controls toggle (#1198)

* docs(playback): design shared controls setting

* docs(playback): plan shared controls setting

* feat(settings): persist shared web controls preference

* test(settings): harden shared controls normalization coverage

* feat(settings): expose shared web controls toggle

* fix(settings): label shared controls toggle

* feat(playback): resolve shared controls from settings

* test(playback): cover shared controls setting

* docs(playback): document shared controls preference

* fix(playback): await settings before host creation

* fix(settings): normalize shared controls updates

apps/web/src/app/settings/settings-playback-section.component.html

@@ -69,6 +69,34 @@
         </div>
     </div>
 
+    @if (isWebPlayerSelected()) {
+        <div
+            class="setting-item"
+            data-test-id="web-player-shared-controls-setting"
+        >
+            <div class="setting-item__meta">
+                <h4>
+                    {{ 'SETTINGS.WEB_PLAYER_SHARED_CONTROLS' | translate }}
+                </h4>
+                <p>
+                    {{
+                        'SETTINGS.WEB_PLAYER_SHARED_CONTROLS_DESCRIPTION'
+                            | translate
+                    }}
+                </p>
+            </div>
+            <div class="setting-item__control setting-item__toggle">
+                <mat-checkbox
+                    [aria-label]="
+                        'SETTINGS.WEB_PLAYER_SHARED_CONTROLS' | translate
+                    "
+                    formControlName="webPlayerSharedControls"
+                    data-test-id="web-player-shared-controls-toggle"
+                ></mat-checkbox>
+            </div>
+        </div>
+    }
+
     @if (supportsManagedExternalPlayers() && isExternalPlayerSelected()) {
         <div
             class="setting-item"