From c471d23bc25db11dda85a18870ebd3fe37971848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <ladvan91@hotmail.com>
Date: Fri, 3 Feb 2023 21:01:33 +0100
Subject: [PATCH] feat(UI): Allow customizate FullScreen element (#4963)

Closes https://github.com/shaka-project/shaka-player/issues/4859
---
 ui/controls.js   | 3 ++-
 ui/externs/ui.js | 6 +++++-
 ui/ui.js         | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui/controls.js b/ui/controls.js
index bfb99abc73..4086051c33 100644
--- a/ui/controls.js
+++ b/ui/controls.js
@@ -594,7 +594,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
         if (document.pictureInPictureElement) {
           await document.exitPictureInPicture();
         }
-        await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
+        const fullScreenElement = this.config_.fullScreenElement;
+        await fullScreenElement.requestFullscreen({navigationUI: 'hide'});
 
         if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
           // Locking to 'landscape' should let it be either
diff --git a/ui/externs/ui.js b/ui/externs/ui.js
index 6b564b6c38..4b9cad01b6 100644
--- a/ui/externs/ui.js
+++ b/ui/externs/ui.js
@@ -85,7 +85,8 @@ shaka.extern.UIVolumeBarColors;
  *   enableFullscreenOnRotation: boolean,
  *   forceLandscapeOnFullscreen: boolean,
  *   enableTooltips: boolean,
- *   keyboardSeekDistance: number
+ *   keyboardSeekDistance: number,
+ *   fullScreenElement: HTMLElement
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -183,6 +184,9 @@ shaka.extern.UIVolumeBarColors;
  *   right keyboard keys when the video is selected. If less than or equal to 0,
  *   no seeking will occur.
  *   Defaults to 5 seconds.
+ * @property {HTMLElement} fullScreenElement
+ *   DOM element on which fullscreen will be done.
+ *   Defaults to Shaka Player Container.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;
diff --git a/ui/ui.js b/ui/ui.js
index 06ba273dd9..d514e11d04 100644
--- a/ui/ui.js
+++ b/ui/ui.js
@@ -34,6 +34,9 @@ shaka.ui.Overlay = class {
     /** @private {shaka.Player} */
     this.player_ = player;
 
+    /** @private {HTMLElement} */
+    this.videoContainer_ = videoContainer;
+
     /** @private {!shaka.extern.UIConfiguration} */
     this.config_ = this.defaultConfig_();
 
@@ -240,6 +243,7 @@ shaka.ui.Overlay = class {
       forceLandscapeOnFullscreen: true,
       enableTooltips: false,
       keyboardSeekDistance: 5,
+      fullScreenElement: this.videoContainer_,
     };
 
     // Check AirPlay support