From cb7558bc7b0e7052e46595353cc1c52c0e28c23f Mon Sep 17 00:00:00 2001
From: David Steinacher <david.steinacher@bitmovin.com>
Date: Wed, 18 Dec 2024 13:55:55 +0100
Subject: [PATCH] add advertising UI variants for the new UI layout

---
 src/ts/uifactory.ts | 87 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 2 deletions(-)

diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts
index f2d3f638d..e888571b5 100644
--- a/src/ts/uifactory.ts
+++ b/src/ts/uifactory.ts
@@ -56,6 +56,7 @@ import { ModernSettingsPanelItem } from './components/modernsettingspanelitem';
 import { ModernSettingsPanelPage } from './components/modernsettingspanelpage';
 import { ModernSettingsPanel } from './components/modernsettingspanel';
 import { TouchControlOverlay } from './components/touchcontroloverlay';
+import { AdStatusOverlay } from './components/adstatusoverlay';
 
 export namespace UIFactory {
   export function buildDefaultSuperModernUI(player: PlayerAPI, config: UIConfig = {}): UIManager {
@@ -447,11 +448,93 @@ export namespace UIFactory {
   }
 
   export function superModernMobileAdsUI() {
-    return new UIContainer({});
+    let controlBar = new ControlBar({
+      components: [
+        new Container({
+          components: [
+            new PlaybackTimeLabel({ timeLabelMode: PlaybackTimeLabelMode.CurrentTime }),
+            new SeekBar({ label: new SeekBarLabel() }),
+            new PlaybackTimeLabel({
+              timeLabelMode: PlaybackTimeLabelMode.TotalTime,
+              cssClasses: ['text-right'],
+            }),
+          ],
+          cssClasses: ['controlbar-top'],
+        }),
+        new Container({
+          components: [
+            new PlaybackToggleButton(),
+            new VolumeToggleButton(),
+            new Spacer(),
+            new FullscreenToggleButton(),
+          ],
+          cssClasses: ['controlbar-bottom'],
+        }),
+      ],
+    });
+
+    return new UIContainer({
+      components: [
+        new BufferingOverlay(),
+        new AdClickOverlay(),
+        new PlaybackToggleOverlay(),
+        controlBar,
+        new AdStatusOverlay(),
+        new ErrorMessageOverlay(),
+      ],
+      hideDelay: 2000,
+      hidePlayerStateExceptions: [
+        PlayerUtils.PlayerState.Prepared,
+        PlayerUtils.PlayerState.Paused,
+        PlayerUtils.PlayerState.Finished,
+      ],
+      cssClasses: ['ui-skin-super-modern', 'ui-skin-smallscreen', 'ui-skin-ads'],
+    });
   }
 
   export function superModernAdsUI() {
-    return new UIContainer({});
+    let controlBar = new ControlBar({
+      components: [
+        new Container({
+          components: [
+            new PlaybackTimeLabel({ timeLabelMode: PlaybackTimeLabelMode.CurrentTime }),
+            new SeekBar({ label: new SeekBarLabel() }),
+            new PlaybackTimeLabel({
+              timeLabelMode: PlaybackTimeLabelMode.TotalTime,
+              cssClasses: ['text-right'],
+            }),
+          ],
+          cssClasses: ['controlbar-top'],
+        }),
+        new Container({
+          components: [
+            new PlaybackToggleButton(),
+            new VolumeToggleButton(),
+            new Spacer(),
+            new FullscreenToggleButton(),
+          ],
+          cssClasses: ['controlbar-bottom'],
+        }),
+      ],
+    });
+
+    return new UIContainer({
+      components: [
+        new BufferingOverlay(),
+        new AdClickOverlay(),
+        new PlaybackToggleOverlay(),
+        new AdStatusOverlay(),
+        controlBar,
+        new ErrorMessageOverlay(),
+      ],
+      hideDelay: 2000,
+      hidePlayerStateExceptions: [
+        PlayerUtils.PlayerState.Prepared,
+        PlayerUtils.PlayerState.Paused,
+        PlayerUtils.PlayerState.Finished,
+      ],
+      cssClasses: ['ui-skin-super-modern', 'ui-skin-ads'],
+    });
   }
 
   export function superModernMobileUI() {