From ba09bc32d3bcd8002abe1ae4f629fc11ff55a7fc Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 20 Dec 2020 20:11:41 +1100 Subject: fix: use bound arrow functions in classes --- src/js/fullscreen.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 7bb22391..76acbd06 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -57,6 +57,8 @@ class Fullscreen { // Update the UI this.update(); + + // this.toggle = this.toggle.bind(this); } // Determine if native supported @@ -134,7 +136,7 @@ class Fullscreen { : this.player.elements.fullscreen || this.player.elements.container; } - onChange() { + onChange = () => { if (!this.enabled) { return; } @@ -149,9 +151,9 @@ class Fullscreen { const target = this.target === this.player.media ? this.target : this.player.elements.container; // Trigger an event triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true); - } + }; - toggleFallback(toggle = false) { + toggleFallback = (toggle = false) => { // Store or restore scroll position if (toggle) { this.scrollPosition = { @@ -198,10 +200,10 @@ class Fullscreen { // Toggle button and fire events this.onChange(); - } + }; // Trap focus inside container - trapFocus(event) { + trapFocus = (event) => { // Bail if iOS, not active, not the tab key if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) { return; @@ -222,10 +224,10 @@ class Fullscreen { last.focus(); event.preventDefault(); } - } + }; // Update UI - update() { + update = () => { if (this.enabled) { let mode; @@ -244,10 +246,10 @@ class Fullscreen { // Add styling hook to show button toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled); - } + }; // Make an element fullscreen - enter() { + enter = () => { if (!this.enabled) { return; } @@ -262,10 +264,10 @@ class Fullscreen { } else if (!is.empty(this.prefix)) { this.target[`${this.prefix}Request${this.property}`](); } - } + }; // Bail from fullscreen - exit() { + exit = () => { if (!this.enabled) { return; } @@ -282,16 +284,16 @@ class Fullscreen { const action = this.prefix === 'moz' ? 'Cancel' : 'Exit'; document[`${this.prefix}${action}${this.property}`](); } - } + }; // Toggle state - toggle() { + toggle = () => { if (!this.active) { this.enter(); } else { this.exit(); } - } + }; } export default Fullscreen; -- cgit v1.2.3 From aa3378fd7303c42059728155719ff57952bb0fcc Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 29 Jan 2021 23:14:02 +1100 Subject: v3.6.4 (#2089) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * force fullscreen events to trigger on plyr element (media element in iOS) and not fullscreen container * Fixing "missing code in detail" for PlyrEvent type When using typescript and listening for youtube statechange event, it is missing the code property definition inside the event (even though it is provided in the code). By making events a map of key-value, we can add easily custom event type for specific event name. Since YouTube "statechange" event differs from the basic PlyrEvent, I added a new Event Type "PlyrStateChangeEvent" having a code property corresponding to a YoutubeState enum defined by the YouTube API documentation. This pattern follows how addEventListener in the lib.dom.d.ts is defined. * Update link to working dash.js demo (was broken) * Fix PreviewThumbnailsOptions type According to the docs, the `src` should also accept an array of strings. * fix issue #1872 * Check if key is a string before attempt --plyr checking * Fix for Slow loading videos not autoplaying * Fix for Slow loading videos not autoplaying * Network requests are not cancelled after the player is destroyed * Fix for apect ratio problem when using Vimeo player on mobile devices (issue #1940) * chore: update packages and linting * Invoke custom listener on triggering fullscreen via double-click * Fix volume when unmuting from volume 0 * adding a nice Svelte plugin that I found * Add missing unit to calc in media query * Assigning player's lastSeekTime on rewind/fast forward to prevent immediate controls hide on mobile * Fix youtube not working when player is inside shadow dom * v3.6.2 * ESLint to use common config * add BitChute to users list * Fix aspect ratio issue * Revert noCookie change * feat: demo radius tweaks * fix: poster image shouldn’t receive click events * chore: package updates * chore: linting * feat: custom controls option for embedded players * Package upgrades * ESLint to use common config * Linting changes * Update README.md * chore: formatting * fix: revert pointer events change for poster * fix: hack for Safari 14 not repainting Vimeo embed on entering fullscreen * fix: demo using custom controls for YouTube * doc: Add STROLLÿN among the list of Plyr users * Fixes #2005 * fix: overflowing volume slider * chore: clean up CSS * fix: hide poster when not using custom controls * Package upgrades * ESLint to use common config * Linting changes * chore: revert customControls default option (to prevent breaking change) * docs: changelog for v3.6.3 * Remove unnecessary calc from media query (#2049) * Enhance types (#1841) * 🏷️(type) enhance QualityOptions type Some optional properties in the QualityOptions were missing. The forced and onChange property allwoing to use an external handler. * ♻️(type) use Plyr.Provider for the readonly provider property A type exists to define all available providers. This type isn't used in the Plyr class definition and the same provider list is also defined. This code is refactored to use the Plyr.Provider type * 🏷️(type) add missing elements property in Plyr class In Plyr class, you can access elements set in cache. This property is missing in the class definition. The Plyr.Elements is for now incomplete. * FIX - object values for the providers must be used (#2053) To make use of the provider configuration, the objects values must be used. * Fix to work inside iframes. (#2069) * Fix to work inside iframes. Right now Plyr fails to load inside iframes because the selectors are not instances of Element (iframes have their own, separate globals). This is an alternative method to check isElement that will work inside iframes. This is battle-tested fallback code used before browsers supported HTMLElement. * Update is.js * Added --plyr-video-background for having control over the background of a video with alpha channel (webm) or a poster image with alpha channel. (#2076) * Fix issue with not entering iosfullscreen of vimeo videos with playsi… (#2038) * Fix issue with not entering iosfullscreen of vimeo videos with playsinline=true * Use isVimeo-function instead of hardcoded value Co-authored-by: Julian Frosch * fix: use new syntax for iframe allow attribute * Bump ini from 1.3.5 to 1.3.7 (#2044) Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.7. - [Release notes](https://github.com/isaacs/ini/releases) - [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.7) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: package updates * chore: add @babel/plugin-proposal-class-properties * fix: use bound arrow functions in classes * chore: cleanup commented out code * chore: release Co-authored-by: Som Meaden Co-authored-by: akuma06 Co-authored-by: Jonathan Arbely Co-authored-by: Takeshi Co-authored-by: Hex Co-authored-by: Syed Husain Co-authored-by: Danielh112 Co-authored-by: Danil Stoyanov Co-authored-by: Guru Prasad Srinivasa Co-authored-by: Stephane Fortin Bouchard Co-authored-by: Zev Averbach Co-authored-by: Vincent Orback Co-authored-by: trafium Co-authored-by: xansen <27698939+xansen@users.noreply.github.com> Co-authored-by: zoomerdev <59863739+zoomerdev@users.noreply.github.com> Co-authored-by: Mikaël Castellani Co-authored-by: dirkjf Co-authored-by: Naomi Co-authored-by: Manuel Raynaud Co-authored-by: syteknet-core Co-authored-by: Andre Gagnon Co-authored-by: Nepomuk Leutschacher <864660+nepomuc@users.noreply.github.com> Co-authored-by: Elias Saalmann Co-authored-by: Julian Frosch Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- src/js/fullscreen.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/js/fullscreen.js') diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 76acbd06..20e958fc 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -256,7 +256,11 @@ class Fullscreen { // iOS native fullscreen doesn't need the request step if (browser.isIos && this.player.config.fullscreen.iosNative) { - this.target.webkitEnterFullscreen(); + if (this.player.isVimeo) { + this.player.embed.requestFullscreen(); + } else { + this.target.webkitEnterFullscreen(); + } } else if (!Fullscreen.native || this.forceFallback) { this.toggleFallback(true); } else if (!this.prefix) { -- cgit v1.2.3