From 765c01e83dc4173d778538061a82e1973a8574f0 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 10 May 2018 09:34:15 +1000 Subject: Remove references to window.Plyr --- src/js/fullscreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index cd2d8ac6..000ba706 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -19,7 +19,7 @@ function onChange() { } // Trigger an event - utils.dispatchEvent(this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true); + utils.dispatchEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true); // Trap focus in container if (!browser.isIos) { -- cgit v1.2.3 From 90c5735904354f5fde0dcdae9f8894fe9088739c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 28 May 2018 10:19:07 +1000 Subject: WIP --- src/js/fullscreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 000ba706..cc91d1a4 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -15,7 +15,7 @@ function onChange() { // Update toggle button const button = this.player.elements.buttons.fullscreen; if (utils.is.element(button)) { - utils.toggleState(button, this.active); + button.pressed = this.active; } // Trigger an event -- cgit v1.2.3 From 87170ab46080ae0d82afd1b39ab3fdf2e3ff1e62 Mon Sep 17 00:00:00 2001 From: cky <576779975@qq.com> Date: Tue, 12 Jun 2018 20:55:31 +0800 Subject: remove event listeners in destroy, add once method --- src/js/fullscreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 000ba706..50681c73 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -62,13 +62,13 @@ class Fullscreen { // Register event listeners // Handle event (incase user presses escape etc) - utils.on(document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => { + utils.on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => { // TODO: Filter for target?? onChange.call(this); }); // Fullscreen toggle on double click - utils.on(this.player.elements.container, 'dblclick', event => { + utils.on.call(this.player, this.player.elements.container, 'dblclick', event => { // Ignore double click in controls if (utils.is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) { return; -- cgit v1.2.3 From 392dfd024c505f5ae1bbb2f0d3e0793c251a1f35 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 13 Jun 2018 00:02:55 +1000 Subject: Utils broken down into seperate files and exports --- src/js/fullscreen.js | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 000ba706..180853c5 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -3,9 +3,10 @@ // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing // ========================================================================== -import utils from './utils'; - -const browser = utils.getBrowser(); +import browser from './utils/browser'; +import { hasClass, toggleClass, toggleState, trapFocus } from './utils/elements'; +import { on, trigger } from './utils/events'; +import is from './utils/is'; function onChange() { if (!this.enabled) { @@ -14,16 +15,16 @@ function onChange() { // Update toggle button const button = this.player.elements.buttons.fullscreen; - if (utils.is.element(button)) { - utils.toggleState(button, this.active); + if (is.element(button)) { + toggleState(button, this.active); } // Trigger an event - utils.dispatchEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true); + trigger.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true); // Trap focus in container if (!browser.isIos) { - utils.trapFocus.call(this.player, this.target, this.active); + trapFocus.call(this.player, this.target, this.active); } } @@ -42,7 +43,7 @@ function toggleFallback(toggle = false) { document.body.style.overflow = toggle ? 'hidden' : ''; // Toggle class hook - utils.toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle); + toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle); // Toggle button and fire events onChange.call(this); @@ -62,15 +63,15 @@ class Fullscreen { // Register event listeners // Handle event (incase user presses escape etc) - utils.on(document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => { + on(document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => { // TODO: Filter for target?? onChange.call(this); }); // Fullscreen toggle on double click - utils.on(this.player.elements.container, 'dblclick', event => { + on(this.player.elements.container, 'dblclick', event => { // Ignore double click in controls - if (utils.is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) { + if (is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) { return; } @@ -89,7 +90,7 @@ class Fullscreen { // Get the prefix for handlers static get prefix() { // No prefix - if (utils.is.function(document.exitFullscreen)) { + if (is.function(document.exitFullscreen)) { return ''; } @@ -102,7 +103,7 @@ class Fullscreen { ]; prefixes.some(pre => { - if (utils.is.function(document[`${pre}ExitFullscreen`]) || utils.is.function(document[`${pre}CancelFullScreen`])) { + if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) { value = pre; return true; } @@ -135,7 +136,7 @@ class Fullscreen { // Fallback using classname if (!Fullscreen.native) { - return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback); + return hasClass(this.target, this.player.config.classNames.fullscreen.fallback); } const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`]; @@ -157,7 +158,7 @@ class Fullscreen { } // Add styling hook to show button - utils.toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled); + toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled); } // Make an element fullscreen @@ -175,7 +176,7 @@ class Fullscreen { toggleFallback.call(this, true); } else if (!this.prefix) { this.target.requestFullscreen(); - } else if (!utils.is.empty(this.prefix)) { + } else if (!is.empty(this.prefix)) { this.target[`${this.prefix}Request${this.property}`](); } } @@ -194,7 +195,7 @@ class Fullscreen { toggleFallback.call(this, false); } else if (!this.prefix) { (document.cancelFullScreen || document.exitFullscreen).call(document); - } else if (!utils.is.empty(this.prefix)) { + } else if (!is.empty(this.prefix)) { const action = this.prefix === 'moz' ? 'Cancel' : 'Exit'; document[`${this.prefix}${action}${this.property}`](); } -- cgit v1.2.3 From 6bff6b317d6adcd9f94c8d4d8ee225d39f784e0f Mon Sep 17 00:00:00 2001 From: Albin Larsson Date: Wed, 13 Jun 2018 22:18:57 +0200 Subject: Remove line breaks in arrays --- src/js/fullscreen.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 998dc613..a8d8b7e5 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -96,11 +96,7 @@ class Fullscreen { // Check for fullscreen support by vendor prefix let value = ''; - const prefixes = [ - 'webkit', - 'moz', - 'ms', - ]; + const prefixes = ['webkit', 'moz', 'ms']; prefixes.some(pre => { if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) { -- cgit v1.2.3 From d4abb4b1438cb316aacae480e7b7e9b055a60b24 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 17 Jun 2018 01:04:55 +1000 Subject: 120 line width, package upgrade --- src/js/fullscreen.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index a8d8b7e5..ded581f9 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -63,10 +63,15 @@ class Fullscreen { // Register event listeners // Handle event (incase user presses escape etc) - on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => { - // TODO: Filter for target?? - onChange.call(this); - }); + on.call( + this.player, + document, + this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, + () => { + // TODO: Filter for target?? + onChange.call(this); + }, + ); // Fullscreen toggle on double click on.call(this.player, this.player.elements.container, 'dblclick', event => { @@ -84,7 +89,12 @@ class Fullscreen { // Determine if native supported static get native() { - return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled); + return !!( + document.fullscreenEnabled || + document.webkitFullscreenEnabled || + document.mozFullScreenEnabled || + document.msFullscreenEnabled + ); } // Get the prefix for handlers @@ -142,7 +152,9 @@ class Fullscreen { // Get target element get target() { - return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container; + return browser.isIos && this.player.config.fullscreen.iosNative + ? this.player.media + : this.player.elements.container; } // Update UI -- cgit v1.2.3 From 599883e684cf72a631ea366d0cb821fcb1c3d013 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 17 Jun 2018 01:30:24 +1000 Subject: Formatting fix --- src/js/fullscreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index d9cba17f..7091fde1 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -68,8 +68,8 @@ class Fullscreen { document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => { - // TODO: Filter for target?? - onChange.call(this); + // TODO: Filter for target?? + onChange.call(this); }, ); -- cgit v1.2.3 From dbf768b1bd6adb48b7e8580bcea09386ce064566 Mon Sep 17 00:00:00 2001 From: James Date: Fri, 3 Aug 2018 09:58:51 +1000 Subject: Remove 'video is playing' requirement for iosNative fullscreen --- src/js/fullscreen.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 7091fde1..44c7e1cf 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -177,9 +177,7 @@ class Fullscreen { // iOS native fullscreen doesn't need the request step if (browser.isIos && this.player.config.fullscreen.iosNative) { - if (this.player.playing) { - this.target.webkitEnterFullscreen(); - } + this.target.webkitEnterFullscreen(); } else if (!Fullscreen.native) { toggleFallback.call(this, true); } else if (!this.prefix) { -- cgit v1.2.3 From d9565e92505be3bb203ce147a20306ac2a0ababa Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 25 Sep 2018 23:29:32 +1000 Subject: Improved fullscreen on iPhone X etc --- src/js/fullscreen.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 44c7e1cf..9c21b82a 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -1,8 +1,10 @@ // ========================================================================== // Fullscreen wrapper // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing +// https://webkit.org/blog/7929/designing-websites-for-iphone-x/ // ========================================================================== +import { repaint } from './utils/animation'; import browser from './utils/browser'; import { hasClass, toggleClass, trapFocus } from './utils/elements'; import { on, triggerEvent } from './utils/events'; @@ -45,6 +47,37 @@ function toggleFallback(toggle = false) { // Toggle class hook toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle); + // Force full viewport on iPhone X+ + if (browser.isIos) { + let viewport = document.head.querySelector('meta[name="viewport"]'); + const property = 'viewport-fit=cover'; + + // Inject the viewport meta if required + if (!viewport) { + viewport = document.createElement('meta'); + viewport.setAttribute('name', 'viewport'); + } + + // Check if the property already exists + const hasProperty = is.string(viewport.content) && viewport.content.includes(property); + + if (toggle) { + this.cleanupViewport = !hasProperty; + + if (!hasProperty) { + viewport.content += `,${property}`; + } + } else if (this.cleanupViewport) { + viewport.content = viewport.content + .split(',') + .filter(part => part.trim() !== property) + .join(','); + } + + // Force a repaint as sometimes Safari doesn't want to fill the screen + setTimeout(() => repaint(this.target), 100); + } + // Toggle button and fire events onChange.call(this); } -- cgit v1.2.3 From 6782737009bec028b393dbfb8c9897cd0c6df48f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 14 Jan 2019 00:33:48 +1100 Subject: Fullscreen fixes --- src/js/fullscreen.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 9c21b82a..c86bf877 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -94,6 +94,9 @@ class Fullscreen { // Scroll position this.scrollPosition = { x: 0, y: 0 }; + // Force the use of 'full window/browser' rather than fullscreen + this.forceFallback = player.config.fullscreen.fallback === 'force'; + // Register event listeners // Handle event (incase user presses escape etc) on.call( @@ -130,6 +133,11 @@ class Fullscreen { ); } + // If we're actually using native + get usingNative() { + return Fullscreen.native && !this.forceFallback; + } + // Get the prefix for handlers static get prefix() { // No prefix @@ -174,7 +182,7 @@ class Fullscreen { } // Fallback using classname - if (!Fullscreen.native) { + if (!Fullscreen.native || this.forceFallback) { return hasClass(this.target, this.player.config.classNames.fullscreen.fallback); } @@ -193,7 +201,17 @@ class Fullscreen { // Update UI update() { if (this.enabled) { - this.player.debug.log(`${Fullscreen.native ? 'Native' : 'Fallback'} fullscreen enabled`); + let mode; + + if (this.forceFallback) { + mode = 'Fallback (forced)'; + } else if (Fullscreen.native) { + mode = 'Native'; + } else { + mode = 'Fallback'; + } + + this.player.debug.log(`${mode} fullscreen enabled`); } else { this.player.debug.log('Fullscreen not supported and fallback disabled'); } @@ -211,7 +229,7 @@ class Fullscreen { // iOS native fullscreen doesn't need the request step if (browser.isIos && this.player.config.fullscreen.iosNative) { this.target.webkitEnterFullscreen(); - } else if (!Fullscreen.native) { + } else if (!Fullscreen.native || this.forceFallback) { toggleFallback.call(this, true); } else if (!this.prefix) { this.target.requestFullscreen(); @@ -230,7 +248,7 @@ class Fullscreen { if (browser.isIos && this.player.config.fullscreen.iosNative) { this.target.webkitExitFullscreen(); this.player.play(); - } else if (!Fullscreen.native) { + } else if (!Fullscreen.native || this.forceFallback) { toggleFallback.call(this, false); } else if (!this.prefix) { (document.cancelFullScreen || document.exitFullscreen).call(document); -- cgit v1.2.3