revert demo
feature demo is available here: https://codepen.io/theprojectsomething/full/bGdyJmv
This commit is contained in:
Som Meaden
parent
c23b4576df
commit
11214caf77
63
demo/dist/demo.js
vendored
63
demo/dist/demo.js
vendored
@ -17736,25 +17736,6 @@ typeof navigator === "object" && (function () {
|
||||
|
||||
var method = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
|
||||
return method.call(element, selector);
|
||||
} // Closest ancestor element matching selector (also tests element itself)
|
||||
|
||||
function closest(element, selector) {
|
||||
var _Element2 = Element,
|
||||
prototype = _Element2.prototype; // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
|
||||
|
||||
function closestElement() {
|
||||
var el = this;
|
||||
|
||||
do {
|
||||
if (matches$2.matches(el, selector)) return el;
|
||||
el = el.parentElement || el.parentNode;
|
||||
} while (el !== null && el.nodeType === 1);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
var method = prototype.closest || closestElement;
|
||||
return method.call(element, selector);
|
||||
} // Find all elements
|
||||
|
||||
function getElements(selector) {
|
||||
@ -18260,7 +18241,7 @@ typeof navigator === "object" && (function () {
|
||||
});
|
||||
} // Get the closest value in an array
|
||||
|
||||
function closest$1(array, value) {
|
||||
function closest(array, value) {
|
||||
if (!is$2.array(array) || !array.length) {
|
||||
return null;
|
||||
}
|
||||
@ -20723,9 +20704,6 @@ typeof navigator === "object" && (function () {
|
||||
fallback: true,
|
||||
// Fallback using full viewport/window
|
||||
iosNative: false // Use the native fullscreen in iOS (disables custom controls)
|
||||
// Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode
|
||||
// Non-ancestors of the player element will be ignored
|
||||
// container: null, // defaults to the player element
|
||||
|
||||
},
|
||||
// Local storage
|
||||
@ -21082,10 +21060,7 @@ typeof navigator === "object" && (function () {
|
||||
y: 0
|
||||
}; // Force the use of 'full window/browser' rather than fullscreen
|
||||
|
||||
this.forceFallback = player.config.fullscreen.fallback === 'force'; // Get the fullscreen element
|
||||
// Checks container is an ancestor, defaults to null
|
||||
|
||||
this.player.elements.fullscreen = player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container); // Register event listeners
|
||||
this.forceFallback = player.config.fullscreen.fallback === 'force'; // Register event listeners
|
||||
// Handle event (incase user presses escape etc)
|
||||
|
||||
on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
|
||||
@ -21311,7 +21286,7 @@ typeof navigator === "object" && (function () {
|
||||
}, {
|
||||
key: "target",
|
||||
get: function get() {
|
||||
return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.fullscreen || this.player.elements.container;
|
||||
return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container;
|
||||
}
|
||||
}], [{
|
||||
key: "native",
|
||||
@ -22314,18 +22289,7 @@ typeof navigator === "object" && (function () {
|
||||
|
||||
this.bind(elements.controls, 'mouseenter mouseleave', function (event) {
|
||||
elements.controls.hover = !player.touch && event.type === 'mouseenter';
|
||||
}); // Also update controls.hover state for any non-player children of fullscreen element (as above)
|
||||
|
||||
if (elements.fullscreen) {
|
||||
for (var i = 0; i < elements.fullscreen.children.length; i++) {
|
||||
if (!elements.fullscreen.children[i].contains(elements.container)) {
|
||||
this.bind(elements.fullscreen.children[i], 'mouseenter mouseleave', function (event) {
|
||||
elements.controls.hover = !player.touch && event.type === 'mouseenter';
|
||||
});
|
||||
}
|
||||
}
|
||||
} // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
|
||||
|
||||
}); // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
|
||||
|
||||
this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
|
||||
elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
|
||||
@ -25184,7 +25148,6 @@ typeof navigator === "object" && (function () {
|
||||
|
||||
this.elements = {
|
||||
container: null,
|
||||
fullscreen: null,
|
||||
captions: null,
|
||||
buttons: {},
|
||||
display: {},
|
||||
@ -25370,12 +25333,10 @@ typeof navigator === "object" && (function () {
|
||||
on.call(this, this.elements.container, this.config.events.join(' '), function (event) {
|
||||
_this.debug.log("event: ".concat(event.type));
|
||||
});
|
||||
} // Setup fullscreen
|
||||
|
||||
|
||||
this.fullscreen = new Fullscreen(this); // Setup interface
|
||||
} // Setup interface
|
||||
// If embed but not fully supported, build interface now to avoid flash of controls
|
||||
|
||||
|
||||
if (this.isHTML5 || this.isEmbed && !this.supported.ui) {
|
||||
ui.build.call(this);
|
||||
} // Container listeners
|
||||
@ -25383,7 +25344,9 @@ typeof navigator === "object" && (function () {
|
||||
|
||||
this.listeners.container(); // Global listeners
|
||||
|
||||
this.listeners.global(); // Setup ads if provided
|
||||
this.listeners.global(); // Setup fullscreen
|
||||
|
||||
this.fullscreen = new Fullscreen(this); // Setup ads if provided
|
||||
|
||||
if (this.config.ads.enabled) {
|
||||
this.ads = new Ads(this);
|
||||
@ -26082,7 +26045,7 @@ typeof navigator === "object" && (function () {
|
||||
var updateStorage = true;
|
||||
|
||||
if (!options.includes(quality)) {
|
||||
var value = closest$1(options, quality);
|
||||
var value = closest(options, quality);
|
||||
this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
|
||||
quality = value; // Don't update storage if quality is not supported
|
||||
|
||||
@ -26523,12 +26486,6 @@ typeof navigator === "object" && (function () {
|
||||
vimeo: {
|
||||
// Prevent Vimeo blocking plyr.io demo site
|
||||
referrerPolicy: 'no-referrer'
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: true,
|
||||
fallback: true,
|
||||
iosNative: false,
|
||||
container: '#container'
|
||||
}
|
||||
}); // Expose for tinkering in the console
|
||||
|
||||
|
||||
2
demo/dist/demo.min.js
vendored
2
demo/dist/demo.min.js
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.min.js.map
vendored
2
demo/dist/demo.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -180,92 +180,6 @@
|
||||
>Download</a
|
||||
>
|
||||
</video>
|
||||
|
||||
<!-- BEGIN FULLSCREEN OVERLAY EXAMPLE -->
|
||||
<style>
|
||||
#container {
|
||||
overflow: hidden;
|
||||
}
|
||||
#container:not(.plyr--fullscreen-fallback) {
|
||||
position: relative;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.plyr {
|
||||
margin-top: 0;
|
||||
}
|
||||
.plyr--overlay {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0.4444em;
|
||||
transition: 0.2s 0.3s opacity ease-in-out,
|
||||
0.3s 0.3s visibility ease-in-out,
|
||||
0.3s 0.3s transform ease-in-out;
|
||||
}
|
||||
.plyr--hide-controls ~ .plyr--overlay {
|
||||
transition-delay: 0;
|
||||
transform: translateX(-1em);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.plyr--title {
|
||||
padding: 0.125em 0.625em;
|
||||
background: linear-gradient(to left top,#e0f6ff,#f5fcff);
|
||||
color: #00b3ff;
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
pointer-events: all;
|
||||
}
|
||||
.plyr--tags {
|
||||
display: flex;
|
||||
margin-top: 0.2em;
|
||||
list-style: none;
|
||||
transition: 0.3s 0.2s transform ease-in-out;
|
||||
}
|
||||
.plyr--hide-controls ~ .plyr--overlay .plyr--tags {
|
||||
transition-delay: 0.2s;
|
||||
transform: translateX(-1em);
|
||||
}
|
||||
.plyr--tags-item {
|
||||
color: #fff;
|
||||
background: #00b3ff;
|
||||
padding: 0 0.4em 0.1em;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.2em;
|
||||
pointer-events: all;
|
||||
}
|
||||
.plyr--tags-item:hover {
|
||||
color: #00b3ff;
|
||||
background: #fff;
|
||||
transition: none;
|
||||
}
|
||||
.plyr--tags-item small {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
.plyr--tags-item::after {
|
||||
content: none;
|
||||
}
|
||||
</style>
|
||||
<div class="plyr--overlay">
|
||||
<h2 class="plyr--title">View From A Blue Moon</h2>
|
||||
<ul class="plyr--tags">
|
||||
<li>
|
||||
<a class="plyr--tags-item" href="#surf-film"><small>Surf film</small></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="plyr--tags-item" href="#oceans"><small>Oceans</small></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="plyr--tags-item" href="#bio"><small>Bio</small></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- / END FULLSCREEN OVERLAY EXAMPLE -->
|
||||
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
|
||||
@ -65,12 +65,6 @@ import toggleClass from './toggle-class';
|
||||
// Prevent Vimeo blocking plyr.io demo site
|
||||
referrerPolicy: 'no-referrer',
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: true,
|
||||
fallback: true,
|
||||
iosNative: false,
|
||||
container: '#container',
|
||||
},
|
||||
});
|
||||
|
||||
// Expose for tinkering in the console
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user