ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fullscreen improvements

Browse Source
This commit is contained in:
Sam Potts 2017-10-18 23:55:53 +11:00
parent 751708ff23
commit 57517a9dcc
6 changed files with 122 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
demo/index.html
View File

@ -22,13 +22,15 @@
<body> <body>
<header> <header>
<h1>Plyr</h1> <h1>Plyr</h1>
<p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p> <p>A simple, accessible HTML5 media player by
<a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a>
</p>
<nav> <nav>
<ul> <ul>
<li> <li>
<a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github"> <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-github" /> <use xlink:href="#icon-github"></use>
</svg>Download on GitHub </svg>Download on GitHub
</a> </a>
</li> </li>
@ -36,7 +38,7 @@
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter"> target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-twitter" /> <use xlink:href="#icon-twitter"></use>
</svg>Tweet </svg>Tweet
</a> </a>
</li> </li>
@ -54,10 +56,16 @@
<button type="button" class="btn" data-source="audio">Audio</button> <button type="button" class="btn" data-source="audio">Audio</button>
</li> </li>
<li> <li>
<button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button> <button type="button" class="btn btn--youtube" data-source="youtube">
<svg class="icon">
<use xlink:href="#icon-youtube"></use>
</svg>YouTube</button>
</li> </li>
<li> <li>
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button> <button type="button" class="btn btn--vimeo" data-source="vimeo">
<svg class="icon">
<use xlink:href="#icon-vimeo"></use>
</svg>Vimeo</button>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -91,7 +99,7 @@
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
<span class="color--youtube"> <span class="color--youtube">
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-youtube"/> <use xlink:href="#icon-youtube"></use>
</svg> YouTube </svg> YouTube
</span> </span>
</small> </small>
@ -101,7 +109,7 @@
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
<span class="color--vimeo"> <span class="color--vimeo">
<svg class="icon"> <svg class="icon">
<use xlink:href="#icon-vimeo"/> <use xlink:href="#icon-vimeo"></use>
</svg> Vimeo </svg> Vimeo
</span> </span>
</small> </small>

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

119
src/js/plyr.js
View File

@ -113,9 +113,8 @@
// Fullscreen settings // Fullscreen settings
fullscreen: { fullscreen: {
enabled: true, enabled: true, // Allow fullscreen?
fallback: true, fallback: true, // Fallback for vintage browsers
allowAudio: false,
}, },
// Local storage // Local storage
@ -316,14 +315,13 @@
fullscreen: { fullscreen: {
enabled: 'plyr--fullscreen-enabled', enabled: 'plyr--fullscreen-enabled',
fallback: 'plyr--fullscreen-fallback', fallback: 'plyr--fullscreen-fallback',
active: 'plyr--fullscreen-active',
}, },
pip: { pip: {
enabled: 'plyr--pip-enabled', supported: 'plyr--pip-supported',
active: 'plyr--pip-active', active: 'plyr--pip-active',
}, },
airplay: { airplay: {
enabled: 'plyr--airplay-enabled', supported: 'plyr--airplay-supported',
active: 'plyr--airplay-active', active: 'plyr--airplay-active',
}, },
tabFocus: 'tab-focus', tabFocus: 'tab-focus',
@ -2368,36 +2366,29 @@
// Setup fullscreen // Setup fullscreen
function setupFullscreen() { function setupFullscreen() {
if (!player.supported.full) { if (!player.supported.full || player.type === 'audio' || !player.config.fullscreen.enabled) {
return; return;
} }
if ((player.type !== 'audio' || player.config.fullscreen.allowAudio) && player.config.fullscreen.enabled) { // Check for native support
// Check for native support var nativeSupport = support.fullscreen;
var nativeSupport = support.fullscreen;
if (nativeSupport || (player.config.fullscreen.fallback && !utils.inFrame())) { if (nativeSupport || (player.config.fullscreen.fallback && !utils.inFrame())) {
log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
// Add styling hook // Add styling hook to show button
if (!nativeSupport) { utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.enabled, true);
utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.fallback, true); } else {
} log('Fullscreen not supported and fallback disabled');
// Add styling hook
utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.enabled, true);
} else {
log('Fullscreen not supported and fallback disabled');
}
// Toggle state
if (player.elements.buttons && player.elements.buttons.fullscreen) {
utils.toggleState(player.elements.buttons.fullscreen, false);
}
// Setup focus trap
focusTrap();
} }
// Toggle state
if (player.elements.buttons && player.elements.buttons.fullscreen) {
utils.toggleState(player.elements.buttons.fullscreen, false);
}
// Setup focus trap
focusTrap();
} }
// Setup captions // Setup captions
@ -2892,14 +2883,14 @@
// Check for picture-in-picture support // Check for picture-in-picture support
utils.toggleClass( utils.toggleClass(
player.elements.container, player.elements.container,
player.config.classNames.pip.enabled, player.config.classNames.pip.supported,
support.pip && player.type === 'video' support.pip && player.type === 'video'
); );
// Check for airplay support // Check for airplay support
utils.toggleClass( utils.toggleClass(
player.elements.container, player.elements.container,
player.config.classNames.airplay.enabled, player.config.classNames.airplay.supported,
support.airplay && utils.inArray(types.html5, player.type) support.airplay && utils.inArray(types.html5, player.type)
); );
@ -3914,11 +3905,6 @@
} }
// Restore class hooks // Restore class hooks
utils.toggleClass(
player.elements.container,
player.config.classNames.fullscreen.active,
player.fullscreen.active
);
utils.toggleClass( utils.toggleClass(
player.elements.container, player.elements.container,
player.config.classNames.captions.active, player.config.classNames.captions.active,
@ -4239,10 +4225,8 @@
}); });
// Fullscreen // Fullscreen
utils.proxy(player.elements.buttons.fullscreen, 'click', player.config.listeners.fullscreen, function( utils.proxy(player.elements.buttons.fullscreen, 'click', player.config.listeners.fullscreen, function() {
event player.toggleFullscreen();
) {
player.toggleFullscreen(event);
}); });
// Picture-in-Picture // Picture-in-Picture
@ -4398,9 +4382,7 @@
// Handle user exiting fullscreen by escaping etc // Handle user exiting fullscreen by escaping etc
if (support.fullscreen) { if (support.fullscreen) {
utils.on(document, fullscreen.eventType, function(event) { utils.on(document, fullscreen.eventType, function(event) { player.toggleFullscreen(event); });
player.toggleFullscreen(event);
});
} }
} }
@ -5396,32 +5378,14 @@
Plyr.prototype.toggleFullscreen = function(event) { Plyr.prototype.toggleFullscreen = function(event) {
var player = this; var player = this;
// Save scroll position
function saveScrollPosition() {
scroll = {
x: window.pageXOffset || 0,
y: window.pageYOffset || 0,
};
}
// Restore scroll position
function restoreScrollPosition() {
window.scrollTo(scroll.x, scroll.y);
}
// Check for native support // Check for native support
var nativeSupport = support.fullscreen; if (support.fullscreen) {
if (nativeSupport) {
// If it's a fullscreen change event, update the UI // If it's a fullscreen change event, update the UI
if (utils.is.event(event) && event.type === fullscreen.eventType) { if (utils.is.event(event) && event.type === fullscreen.eventType) {
player.fullscreen.active = fullscreen.isFullScreen(player.elements.container); player.fullscreen.active = fullscreen.isFullScreen(player.elements.container);
} else { } else {
// Else it's a user request to enter or exit // Else it's a user request to enter or exit
if (!fullscreen.isFullScreen(player.elements.container)) { if (!player.fullscreen.active) {
// Save scroll position
saveScrollPosition();
// Request full screen // Request full screen
fullscreen.requestFullScreen(player.elements.container); fullscreen.requestFullScreen(player.elements.container);
} else { } else {
@ -5438,29 +5402,30 @@
// Otherwise, it's a simple toggle // Otherwise, it's a simple toggle
player.fullscreen.active = !player.fullscreen.active; player.fullscreen.active = !player.fullscreen.active;
// Add class hook
utils.toggleClass(player.elements.container, player.config.classNames.fullscreen.fallback, player.fullscreen.active);
// Make sure we don't lose scroll position
if (player.fullscreen.active) {
scroll = {
x: window.pageXOffset || 0,
y: window.pageYOffset || 0,
};
} else {
window.scrollTo(scroll.x, scroll.y);
}
// Bind/unbind escape key // Bind/unbind escape key
document.body.style.overflow = player.fullscreen.active ? 'hidden' : ''; document.body.style.overflow = player.fullscreen.active ? 'hidden' : '';
} }
// Set class hook
utils.toggleClass(
player.elements.container,
player.config.classNames.fullscreen.active,
player.fullscreen.active
);
// Set button state // Set button state
if (player.elements.buttons && player.elements.buttons.fullscreen) { if (player.elements.buttons && player.elements.buttons.fullscreen) {
utils.toggleState(player.elements.buttons.fullscreen, player.fullscreen.active); utils.toggleState(player.elements.buttons.fullscreen, player.fullscreen.active);
} }
// Trigger an event // Trigger an event
player.core.trigger(player.media, player.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen', true); player.core.trigger(player.media, player.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen');
// Restore scroll position
if (!player.fullscreen.active && nativeSupport) {
restoreScrollPosition();
}
// Allow chaining // Allow chaining
return player; return player;

43
src/less/mixins.less
View File

@ -27,3 +27,46 @@
border-color: @plyr-range-thumb-active-border-color; border-color: @plyr-range-thumb-active-border-color;
transform: scale(@plyr-range-thumb-active-scale); transform: scale(@plyr-range-thumb-active-scale);
} }
// Fullscreen styles
.plyr-fullscreen-active() {
height: 100%;
width: 100%;
background: #000;
border-radius: 0 !important;
video {
height: 100%;
}
.plyr__video-wrapper {
height: 100%;
width: 100%;
}
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
top: 50%;
transform: translateY(-50%);
}
// Display correct icon
.plyr__control .icon--exit-fullscreen {
display: block;
+ svg {
display: none;
}
}
// Large captions in full screen on larger screens
@media (min-width: @plyr-bp-screen-lg) {
.plyr__captions {
font-size: @plyr-font-size-captions-large;
}
}
}

58
src/less/plyr.less
View File

@ -308,12 +308,6 @@
.plyr--hide-controls .plyr__captions { .plyr--hide-controls .plyr__captions {
transform: translateY(-(@plyr-control-spacing * 1.5)); transform: translateY(-(@plyr-control-spacing * 1.5));
} }
// Large captions in full screen on larger screens
@media (min-width: @plyr-bp-screen-lg) {
.plyr--fullscreen-active .plyr__captions {
font-size: @plyr-font-size-captions-large;
}
}
// Controls // Controls
// -------------------------------------------------------------- // --------------------------------------------------------------
@ -409,7 +403,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing; padding: (@plyr-control-spacing * 3.5) (@plyr-control-spacing + 2) @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%)); background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
@ -506,7 +500,6 @@
} }
// Change icons on state change // Change icons on state change
.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen,
.plyr--muted .plyr__control .icon--muted, .plyr--muted .plyr__control .icon--muted,
.plyr--captions-active .plyr__control .icon--captions-on { .plyr--captions-active .plyr__control .icon--captions-on {
display: block; display: block;
@ -518,15 +511,15 @@
// Some options are hidden by default // Some options are hidden by default
.plyr [data-plyr='captions'], .plyr [data-plyr='captions'],
.plyr [data-plyr='fullscreen'],
.plyr [data-plyr='pip'], .plyr [data-plyr='pip'],
.plyr [data-plyr='airplay'] { .plyr [data-plyr='airplay'],
.plyr [data-plyr='fullscreen'] {
display: none; display: none;
} }
.plyr--captions-enabled [data-plyr='captions'], .plyr--captions-enabled [data-plyr='captions'],
.plyr--fullscreen-enabled [data-plyr='fullscreen'], .plyr--pip-supported [data-plyr='pip'],
.plyr--pip-enabled [data-plyr='pip'], .plyr--airplay-supported [data-plyr='airplay'],
.plyr--airplay-enabled [data-plyr='airplay'] { .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block; display: inline-block;
} }
@ -922,34 +915,23 @@
// Fullscreen // Fullscreen
// -------------------------------------------------------------- // --------------------------------------------------------------
.plyr--fullscreen-active { .plyr:fullscreen {
height: 100%; .plyr-fullscreen-active();
width: 100%; }
background: #000; .plyr:-webkit-full-screen {
border-radius: 0 !important; .plyr-fullscreen-active();
}
video { .plyr:-moz-full-screen {
height: 100%; .plyr-fullscreen-active();
} }
.plyr__video-wrapper { .plyr:-ms-fullscreen {
height: 100%; .plyr-fullscreen-active();
width: 100%;
}
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
top: 50%;
transform: translateY(-50%);
}
} }
// Fallback for unsupported browsers // Fallback for unsupported browsers
.plyr--fullscreen-fallback.plyr--fullscreen-active { .plyr--fullscreen-fallback {
.plyr-fullscreen-active();
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;