Merge pull request #673 from bitmovin/feature/auto-resolve-tv-ui

Automatically resolve TV UI when using full UI
bitmovin · Jan 14, 2025 · f1a05ec · f1a05ec
2 parents 6d9fa82 + 232f3c0
commit f1a05ec
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 6 deletions.
diff --git a/src/ts/UIFactory.ts b/src/ts/UIFactory.ts
@@ -85,12 +85,6 @@ export namespace UIFactory {
             );
           },
         },
-        {
-          ui: adsUILayout(),
-          condition: (context: UIConditionContext) => {
-            return context.isAd && context.adRequiresUi;
-          },
-        },
         {
           ui: smallScreenUILayout(),
           condition: (context: UIConditionContext) => {
@@ -102,6 +96,24 @@ export namespace UIFactory {
             );
           },
         },
+        {
+          ...tvUILayout(),
+          condition: (context: UIConditionContext) => {
+            return context.isTv && !context.isAd;
+          }
+        },
+        {
+          ...tvUILayout(),
+          condition: (context: UIConditionContext) => {
+            return context.isTv && context.isAd && context.adRequiresUi;
+          }
+        },
+        {
+          ui: adsUILayout(),
+          condition: (context: UIConditionContext) => {
+            return context.isAd && context.adRequiresUi;
+          },
+        },
         {
           ui: uiLayout(config),
           condition: (context: UIConditionContext) => {
@@ -667,3 +679,8 @@ function tvUILayout() {
     spatialNavigation: spatialNavigation,
   };
 }
+
+function tvAdsUILayout() {
+  // TODO: implement once we have a design for TV ads
+  return tvUILayout();
+}
diff --git a/src/ts/UIManager.ts b/src/ts/UIManager.ts
@@ -66,6 +66,10 @@ export interface UIConditionContext {
    * Tells if the UI is running in a mobile browser.
    */
   isMobile: boolean;
+  /**
+   * Tells if the UI is running in a TV browser.
+   */
+  isTv: boolean;
   /**
    * Tells if the player is in playing or paused state.
    */
@@ -466,6 +470,7 @@ export class UIManager {
       adRequiresUi: false,
       isFullscreen: this.player.getViewMode() === this.player.exports.ViewMode.Fullscreen,
       isMobile: BrowserUtils.isMobile,
+      isTv: BrowserUtils.isTv,
       isPlaying: this.player.isPlaying(),
       width: this.uiContainerElement.width(),
       documentWidth: document.body.clientWidth,

diff --git a/src/ts/spatialnavigation/getKeyMapForPlatform.ts b/src/ts/spatialnavigation/getKeyMapForPlatform.ts
@@ -91,6 +91,26 @@ const HisenseKeyMap = {
   },
 };
 
+const XboxKeyMap = {
+  isApplicable: () => BrowserUtils.isXbox,
+  keyCodes: {
+    // D-pad Up
+    203: Direction.UP,
+    211: Direction.UP,
+    // D-pad Down
+    204: Direction.DOWN,
+    212: Direction.DOWN,
+    // D-pad Left
+    205: Direction.LEFT,
+    214: Direction.LEFT,
+    // D-pad Right
+    206: Direction.RIGHT,
+    213: Direction.RIGHT,
+    // A
+    195: Action.SELECT,
+  },
+};
+
 // Default key map used on desktops
 const DefaultKeyMap = {
   // Arrow Up
@@ -117,6 +137,7 @@ export function getKeyMapForPlatform(): KeyMap {
     PlayStationKeyMap,
     HisenseKeyMap,
     AndroidKeyMap,
+    XboxKeyMap,
   ].find(keyMap => keyMap.isApplicable());
 
   if (applicableKeyMap) {

diff --git a/src/ts/utils/BrowserUtils.ts b/src/ts/utils/BrowserUtils.ts
@@ -47,6 +47,12 @@ export class BrowserUtils {
     return navigator && navigator.userAgent && navigator.platform === 'MacIntel';
   }
 
+  static get isTv(): boolean {
+    return this.isHisense || this.isPlayStation || this.isWebOs
+      || this.isTizen || this.isVizio || this.isXumo || this.isXbox
+      || this.isVidaa;
+  }
+
   static get isHisense(): boolean {
     if (!this.windowExists()) {
       return false;
@@ -79,6 +85,36 @@ export class BrowserUtils {
     return navigator && navigator.userAgent && /Tizen/.test(navigator.userAgent);
   }
 
+  static get isVizio(): boolean {
+    if (!this.windowExists()) {
+      return false;
+    }
+    return navigator && navigator.userAgent && /vizio/.test(navigator.userAgent.toLowerCase());
+  }
+
+  static get isXumo(): boolean {
+    if (!this.windowExists()) {
+      return false;
+    }
+    return navigator && navigator.userAgent && /sky_ott/.test(navigator.userAgent.toLowerCase()) ||
+      navigator && navigator.userAgent && /xglobal/.test(navigator.userAgent.toLowerCase())  ||
+      navigator && navigator.userAgent && /xfinity/.test(navigator.userAgent.toLowerCase());
+  }
+
+  static get isXbox(): boolean {
+    if (!this.windowExists()) {
+      return false;
+    }
+    return navigator && navigator.userAgent && /Xbox/.test(navigator.userAgent);
+  }
+
+  static get isVidaa(): boolean {
+    if (!this.windowExists()) {
+      return false;
+    }
+    return navigator && navigator.userAgent && /vidaa/.test(navigator.userAgent.toLowerCase());
+  }
+
   // https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
   static get isTouchSupported() {
     if (!this.windowExists()) {