enable the subtitle settings for the new ui layout

bitmovin · Dec 9, 2024 · 5530ae4 · 5530ae4
1 parent cf3ff8a
commit 5530ae4
Showing 1 changed file with 59 additions and 17 deletions.
diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
@@ -453,31 +453,64 @@ export namespace UIFactory {
   export function superModernMobileUI() {
     let subtitleOverlay = new SubtitleOverlay();
 
+    let settingsPanel = new ModernSettingsPanel({
+      components: [],
+      hidden: true,
+      pageTransitionAnimation: true,
+      hideDelay: -1,
+    });
+
     let mainSettingsPanelPage = new ModernSettingsPanelPage({
       components: [
-        // new ModernSettingsPanelItem(i18n.getLocalizer('settings.video.quality'), new VideoQualitySelectBox()),
-        // new ModernSettingsPanelItem(i18n.getLocalizer('speed'), new PlaybackSpeedSelectBox()),
-        // new ModernSettingsPanelItem(i18n.getLocalizer('settings.audio.track'), new AudioTrackSelectBox()),
-        // new ModernSettingsPanelItem(i18n.getLocalizer('settings.audio.quality'), new AudioQualitySelectBox()),
+        new ModernSettingsPanelItem({
+          label: i18n.getLocalizer('settings.video.quality'),
+          setting: new VideoQualitySelectBox(),
+          container: settingsPanel,
+        }),
+        new ModernSettingsPanelItem({
+          label: i18n.getLocalizer('speed'),
+          setting: new PlaybackSpeedSelectBox(),
+          container: settingsPanel,
+        }),
+        new ModernSettingsPanelItem({
+          label: i18n.getLocalizer('settings.audio.track'),
+          setting: new AudioTrackSelectBox() ,
+          container: settingsPanel,
+        }),
+        new ModernSettingsPanelItem({
+          label: i18n.getLocalizer('settings.audio.quality'),
+          setting: new AudioQualitySelectBox(),
+          container: settingsPanel,
+        }),
       ],
     });
 
-    let settingsPanel = new ModernSettingsPanel({
-      components: [mainSettingsPanelPage],
-      hidden: true,
-      pageTransitionAnimation: true,
-      hideDelay: -1,
+    settingsPanel.addComponent(mainSettingsPanelPage);
+
+    let subtitleSettingsPanelPage = new SubtitleSettingsPanelPage({
+      settingsPanel: settingsPanel,
+      overlay: subtitleOverlay,
+    });
+
+    let subtitleSettingsOpenButton = new SettingsPanelPageOpenButton({
+      targetPage: subtitleSettingsPanelPage,
+      container: settingsPanel,
+      ariaLabel: i18n.getLocalizer('settings.subtitles'),
+      text: i18n.getLocalizer('open'),
     });
 
     const subtitleSelectBox = new SubtitleSelectBox();
-    // let subtitleSelectItem = new ModernSettingsPanelItem(
-    //   new Label({ text: i18n.getLocalizer('settings.subtitles') } as LabelConfig),
-    //   subtitleSelectBox,
-    //   {
-    //     role: 'menubar',
-    //   },
-    // );
-    // mainSettingsPanelPage.addComponent(subtitleSelectItem);
+    let subtitleSelectItem = new ModernSettingsPanelItem({
+      label: new SubtitleSettingsLabel({
+        text: i18n.getLocalizer('settings.subtitles'),
+        opener: subtitleSettingsOpenButton,
+      }),
+      setting: subtitleSelectBox,
+      role: 'menubar',
+      container: settingsPanel,
+    });
+    mainSettingsPanelPage.addComponent(subtitleSelectItem);
+    settingsPanel.addComponent(subtitleSettingsPanelPage);
 
     let controlBar = new ControlBar({
       components: [
@@ -572,6 +605,15 @@ export namespace UIFactory {
       }),
     ];
 
+    const ecoModeContainer = new EcoModeContainer();
+
+    ecoModeContainer.setOnToggleCallback(() => {
+      // forces the browser to re-calculate the height of the settings panel when adding/removing elements
+      settingsPanel.getDomElement().css({ width: '', height: '' });
+    });
+
+    components.unshift(ecoModeContainer);
+
     mainSettingsPanelPage = new ModernSettingsPanelPage({
       components,
     });