Merge pull request #117 from THEOplayer/bugfix/fullscreen-options

Always hide navigation UI when entering fullscreen

Author: MattiasBuelens

.changeset/legal-cities-fetch.md

@@ -0,0 +1,5 @@
+---
+'@theoplayer/web-ui': patch
+---
+
+When entering fullscreen, the player will now always hide the browser's navigation UI. (This can be overridden by setting [`ui.fullscreenOptions.navigationUI`](https://optiview.dolby.com/docs/theoplayer/v10/api-reference/web/interfaces/FullscreenOptions.html#navigationUI) in your player configuration.)

src/DefaultUI.ts

@@ -1,5 +1,5 @@
 import * as shadyCss from '@webcomponents/shadycss';
-import type { ChromelessPlayer, PlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
+import type { ChromelessPlayer, SourceDescription, UIPlayerConfiguration } from 'theoplayer/chromeless';
 import type { UIContainer } from './UIContainer';
 import defaultUiCss from './DefaultUI.css';
 import defaultUiHtml from './DefaultUI.html';
@@ -38,7 +38,7 @@ const template = createTemplate('theoplayer-default-ui', `<style>${defaultUiCss}
  * For more extensive customizations, we recommend defining your own custom UI using
  * a {@link UIContainer | `<theoplayer-ui>`}.
  *
- * @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
+ * @attribute `configuration` - The THEOplayer {@link theoplayer!UIPlayerConfiguration | UIPlayerConfiguration}, as a JSON string.
  * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
  * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
  * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
@@ -102,7 +102,7 @@ export class DefaultUI extends HTMLElement {
      *   the underlying THEOplayer instance.
      *   Can also be set later on through the {@link DefaultUI.configuration} property.
      */
-    constructor(configuration: PlayerConfiguration = {}) {
+    constructor(configuration: UIPlayerConfiguration = {}) {
         super();
         this._shadowRoot = this.initShadowRoot();
 
@@ -154,16 +154,16 @@ export class DefaultUI extends HTMLElement {
      *
      * Used to create the underlying THEOplayer instance.
      */
-    get configuration(): PlayerConfiguration {
+    get configuration(): UIPlayerConfiguration {
         return this._ui.configuration;
     }
 
-    set configuration(configuration: PlayerConfiguration) {
+    set configuration(configuration: UIPlayerConfiguration) {
         this.removeAttribute(Attribute.CONFIGURATION);
         this.setConfiguration_(configuration);
     }
 
-    private setConfiguration_(configuration: PlayerConfiguration) {
+    private setConfiguration_(configuration: UIPlayerConfiguration) {
         this._ui.configuration = {
             ...configuration,
             ads: {
@@ -287,7 +287,7 @@ export class DefaultUI extends HTMLElement {
         if (attrName === Attribute.SOURCE) {
             this._ui.source = newValue ? (JSON.parse(newValue) as SourceDescription) : undefined;
         } else if (attrName === Attribute.CONFIGURATION) {
-            this.setConfiguration_(newValue ? (JSON.parse(newValue) as PlayerConfiguration) : {});
+            this.setConfiguration_(newValue ? (JSON.parse(newValue) as UIPlayerConfiguration) : {});
         } else if (attrName === Attribute.MUTED) {
             this.muted = hasValue;
         } else if (attrName === Attribute.AUTOPLAY) {

src/THEOliveDefaultUI.ts

@@ -2,7 +2,7 @@ import './components/theolive/quality/BadNetworkModeButton';
 import './components/theolive/quality/BadNetworkModeMenu';
 import css from './THEOliveDefaultUI.css';
 import html from './THEOliveDefaultUI.html';
-import type { ErrorEvent, PlayerConfiguration } from 'theoplayer/chromeless';
+import type { ErrorEvent, UIPlayerConfiguration } from 'theoplayer/chromeless';
 import { DefaultUI } from './DefaultUI';
 import { READY_EVENT } from './events/ReadyEvent';
 import { ErrorDisplay, PlayButton } from './components';
@@ -23,7 +23,7 @@ export class THEOliveDefaultUI extends DefaultUI {
     private readonly _playButton: PlayButton;
     private readonly _root: HTMLElement;
 
-    constructor(configuration: PlayerConfiguration = {}) {
+    constructor(configuration: UIPlayerConfiguration = {}) {
         super(configuration);
         this._loading = this._shadowRoot.querySelector<HTMLParagraphElement>('#loading-announcement')!;
         this._offline = this._shadowRoot.querySelector<HTMLParagraphElement>('#offline-announcement')!;

src/UIContainer.ts

@@ -1,5 +1,5 @@
 import * as shadyCss from '@webcomponents/shadycss';
-import { ChromelessPlayer, type MediaTrack, type PlayerConfiguration, type SourceDescription, type VideoQuality } from 'theoplayer/chromeless';
+import { ChromelessPlayer, type MediaTrack, type SourceDescription, type UIPlayerConfiguration, type VideoQuality } from 'theoplayer/chromeless';
 import elementCss from './UIContainer.css';
 import elementHtml from './UIContainer.html';
 import {
@@ -70,7 +70,7 @@ const FULL_WINDOW_ROOT_CLASS = 'theoplayer-ui-full-window';
  *
  * The styling can be controlled using CSS custom properties (see below).
  *
- * @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
+ * @attribute `configuration` - The THEOplayer {@link theoplayer!UIPlayerConfiguration | UIPlayerConfiguration}, as a JSON string.
  * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
  * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
  * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
@@ -143,7 +143,7 @@ export class UIContainer extends HTMLElement {
         ];
     }
 
-    private _configuration: PlayerConfiguration = {};
+    private _configuration: UIPlayerConfiguration = {};
     private readonly _playerEl: HTMLElement;
     private readonly _menuEl: HTMLElement;
     private readonly _menuGroup: MenuGroup;
@@ -172,7 +172,7 @@ export class UIContainer extends HTMLElement {
      *   the underlying THEOplayer instance.
      *   Can also be set later on through the {@link UIContainer.configuration} property.
      */
-    constructor(configuration: PlayerConfiguration = {}) {
+    constructor(configuration: UIPlayerConfiguration = {}) {
         super();
         const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true });
         shadowRoot.appendChild(template().content.cloneNode(true));
@@ -235,16 +235,16 @@ export class UIContainer extends HTMLElement {
      *
      * Used to create the underlying THEOplayer instance.
      */
-    get configuration(): PlayerConfiguration {
+    get configuration(): UIPlayerConfiguration {
         return this._configuration;
     }
 
-    set configuration(playerConfiguration: PlayerConfiguration) {
+    set configuration(playerConfiguration: UIPlayerConfiguration) {
         this.removeAttribute(Attribute.CONFIGURATION);
         this._setConfiguration(playerConfiguration);
     }
 
-    private _setConfiguration(playerConfiguration: PlayerConfiguration): void {
+    private _setConfiguration(playerConfiguration: UIPlayerConfiguration): void {
         this._configuration = playerConfiguration ?? {};
         this.tryInitializePlayer_();
     }
@@ -491,7 +491,7 @@ export class UIContainer extends HTMLElement {
         }
         const hasValue = newValue != null;
         if (attrName === Attribute.CONFIGURATION) {
-            this._setConfiguration(newValue ? (JSON.parse(newValue) as PlayerConfiguration) : {});
+            this._setConfiguration(newValue ? (JSON.parse(newValue) as UIPlayerConfiguration) : {});
         } else if (attrName === Attribute.SOURCE) {
             this._setSource(newValue ? (JSON.parse(newValue) as SourceDescription) : undefined);
         } else if (attrName === Attribute.MUTED) {
@@ -726,7 +726,10 @@ export class UIContainer extends HTMLElement {
         const event = rawEvent as EnterFullscreenEvent;
         event.stopPropagation();
         if (fullscreenAPI && document[fullscreenAPI.fullscreenEnabled_] && this[fullscreenAPI.requestFullscreen_]) {
-            const promise = this[fullscreenAPI.requestFullscreen_]();
+            const promise = this[fullscreenAPI.requestFullscreen_]({
+                navigationUI: 'hide',
+                ...this._configuration?.ui?.fullscreenOptions
+            });
             if (promise && promise.then) {
                 promise.then(noOp, noOp);
             }