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

Keyboard nav fixes (seek & focus trap in fullscreen), SASS updates

Browse Source
This commit is contained in:
Sam Potts 2016-01-14 21:20:46 +11:00
parent 353d920e25
commit bc7a6ebdde
8 changed files with 196 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
changelog.md
View File

@ -12,7 +12,9 @@
- Better handling of mission controls (fixes #132) - Better handling of mission controls (fixes #132)
- Retain classname on source change (fixes #120) - Retain classname on source change (fixes #120)
- Increased thumb size on seek (partially fixes #130) - Increased thumb size on seek (partially fixes #130)
- Passing no argument to `source` api method, now returns current source - Passing no argument to `source` api method, now returns current source (by @gurupras)
- Ability to add custom handlers to controls prior to Plyr bindings (by @gurupras)
- Keyboard navigation improvements (focus on seek, focus trap in fullscreen) (fixes #135)
## v1.3.5 ## v1.3.5
- Fixed bug with API use on basic supported browsers - Fixed bug with API use on basic supported browsers

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

2
dist/sprite.svg vendored
View File

@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><title>Captions Off</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><title>Captions On</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><title>Enter Fullscreen</title><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><title>Exit Fullscreen</title><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><title>Fast Forward</title><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><title>Muted</title><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>Pause</title><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><title>Play</title><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 18 18"><title>Restart</title><path d="M1 2c.552 0 1 .448 1 1v4.318L11 2c.552 0 1 .448 1 1v1.954L17 2c.552 0 1 .448 1 1v12c0 .552-.448 1-1 1l-5-2.955V15c0 .552-.448 1-1 1l-9-5.318V15c0 .552-.448 1-1 1s-1-.448-1-1V3c0-.552.448-1 1-1zm11 8.722l4 2.364V4.914l-4 2.364v3.444zm-2 2.364V4.914L3.085 9 10 13.086z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>Rewind</title><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><title>Volume</title><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg> <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><title>Captions Off</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><title>Captions On</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><title>Enter Fullscreen</title><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><title>Exit Fullscreen</title><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><title>Fast Forward</title><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><title>Muted</title><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>Pause</title><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><title>Play</title><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>Rewind</title><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><title>Volume</title><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

64
src/js/plyr.js
View File

@ -835,6 +835,44 @@
} }
} }
// Trap focus inside container
function _focusTrap() {
var tabbables = _getElements('input:not([disabled]), button:not([disabled])'),
first = tabbables[0],
last = tabbables[tabbables.length - 1];
function _checkFocus(event) {
// If it is TAB
if (event.which === 9 && plyr.isFullscreen) {
// Move focus to first element that can be tabbed if Shift isn't used
if (event.target === last && !event.shiftKey) {
event.preventDefault();
first.focus();
}
// Move focus to last element that can be tabbed if Shift is used
else if (event.target === first && event.shiftKey) {
event.preventDefault();
last.focus();
}
}
}
// Bind the handler
_on(plyr.container, 'keydown', _checkFocus);
}
// Add elements to HTML5 media (source, tracks, etc)
function _insertChildElements(type, attributes) {
if (typeof attributes === 'string') {
_insertElement(type, plyr.media, { src: attributes });
}
else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]);
}
}
}
// Insert controls // Insert controls
function _injectControls() { function _injectControls() {
// Make a copy of the html // Make a copy of the html
@ -1481,6 +1519,9 @@
// Toggle state // Toggle state
_toggleState(plyr.buttons.fullscreen, false); _toggleState(plyr.buttons.fullscreen, false);
// Setup focus trap
_focusTrap();
// Set control hide class hook // Set control hide class hook
if (config.fullscreen.hideControls) { if (config.fullscreen.hideControls) {
_toggleClass(plyr.container, config.classes.fullscreen.hideControls, true); _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
@ -1642,6 +1683,17 @@
// Set class hook // Set class hook
_toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
// Trap focus
if(plyr.isFullscreen) {
plyr.container.setAttribute('tabindex', '-1');
}
else {
plyr.container.removeAttribute('tabindex');
}
// Trap focus
_focusTrap(plyr.isFullscreen);
// Set button state // Set button state
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
@ -1940,18 +1992,6 @@
_updateProgress(event); _updateProgress(event);
} }
// Add elements to HTML5 media (source, tracks, etc)
function _insertChildElements(type, attributes) {
if (typeof attributes === 'string') {
_insertElement(type, plyr.media, { src: attributes });
}
else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]);
}
}
}
// Add common function to retrieve media source // Add common function to retrieve media source
function _source(source) { function _source(source) {
// If not null or undefined, parse it // If not null or undefined, parse it

9
src/less/plyr.less
View File

@ -111,7 +111,7 @@
background: @volume-thumb-bg; background: @volume-thumb-bg;
border: 0; border: 0;
border-radius: 100%; border-radius: 100%;
transition: background .3s ease, transform .2s ease; transition: background .3s ease;
cursor: ew-resize; cursor: ew-resize;
} }
.volume-track() { .volume-track() {
@ -243,7 +243,7 @@
background: @controls-bg; background: @controls-bg;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
box-shadow: 0 1px 1px rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .2); box-shadow: 0 1px 1px fade(@gray-dark, 20%);
// Layout // Layout
&--right { &--right {
@ -283,7 +283,7 @@
} }
// Hover and tab focus // Hover and tab focus
&.tab-focus, &.tab-focus:focus,
&:hover { &:hover {
background: @control-bg-hover; background: @control-bg-hover;
color: @control-color-hover; color: @control-color-hover;
@ -309,7 +309,6 @@
color: @control-color; color: @control-color;
font-weight: 600; font-weight: 600;
font-size: @font-size-small; font-size: @font-size-small;
.font-smoothing();
} }
// Media duration hidden on small screens // Media duration hidden on small screens
@ -388,7 +387,7 @@
} }
// Common range styles // Common range styles
input[type='range'].tab-focus { input[type='range'].tab-focus:focus {
.tab-focus(); .tab-focus();
} }

173
src/sass/plyr.scss
View File

@ -33,12 +33,14 @@ $control-color-hover: null !default;
// Contrast // Contrast
@if lightness($controls-bg) >= 65% { @if lightness($controls-bg) >= 65% {
$control-color: $gray-light; $control-color: $gray-light;
} @else { }
@else {
$control-color: $gray-lighter; $control-color: $gray-lighter;
} }
@if lightness($control-bg-hover) >= 65% { @if lightness($control-bg-hover) >= 65% {
$control-color-hover: $gray; $control-color-hover: $gray;
} @else { }
@else {
$control-color-hover: #fff; $control-color-hover: #fff;
} }
@ -99,55 +101,39 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
&:after { clear: both; } &:after { clear: both; }
} }
// Tab focus styles // Tab focus styles
@mixin tab-focus() @mixin tab-focus() {
{ outline: thin dotted transparentize($gray-dark, .8);
outline: thin dotted #000; outline-offset: 3px;
outline-offset: 0;
} }
// <input type="range"> styling // <input type="range"> styling
@mixin volume-thumb() @mixin volume-thumb() {
{
height: $volume-thumb-height; height: $volume-thumb-height;
width: $volume-thumb-width; width: $volume-thumb-width;
background: $volume-thumb-bg; background: $volume-thumb-bg;
border: 0; border: 0;
border-radius: ($volume-thumb-height / 2); border-radius: 100%;
transition: background .3s ease; transition: background .3s ease;
cursor: ew-resize; cursor: ew-resize;
} }
@mixin volume-track() @mixin volume-track() {
{
height: $volume-track-height; height: $volume-track-height;
background: $volume-track-bg; background: $volume-track-bg;
border: 0; border: 0;
border-radius: ($volume-track-height / 2); border-radius: ($volume-track-height / 2);
} }
@mixin seek-thumb() @mixin seek-thumb() {
{
background: transparent; background: transparent;
border: 0; border: 0;
width: ($control-spacing * 2); width: ($control-spacing * 4);
height: $control-spacing; height: $control-spacing;
transform: translateX(-50%);
} }
@mixin seek-track() @mixin seek-track() {
{
background: none; background: none;
border: 0; border: 0;
} }
// Screen reader only
// -------------------------------
.sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
// Styles // Styles
// ------------------------------- // -------------------------------
// Base // Base
@ -165,8 +151,24 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
box-sizing: border-box; box-sizing: border-box;
} }
// Fix 300ms delay
a, button, input, label {
touch-action: manipulation;
}
// Screen reader only
&__sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
// For video // For video
&-video-wrapper { &__video-wrapper {
position: relative; position: relative;
} }
video, video,
@ -177,7 +179,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// For embeds // For embeds
&-video-embed { &__video-embed {
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%; /* 16:9 */
height: 0; height: 0;
overflow: hidden; overflow: hidden;
@ -201,7 +203,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// Captions // Captions
&-captions { &__captions {
display: none; display: none;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -226,15 +228,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
font-size: $font-size-captions-medium; font-size: $font-size-captions-medium;
} }
} }
&.captions-active &-captions { &--captions-active &__captions {
display: block; display: block;
} }
&.fullscreen-active &-captions { &--fullscreen-active &__captions {
font-size: $font-size-captions-large; font-size: $font-size-captions-large;
} }
// Playback controls // Playback controls
&-controls { &__controls {
@include clearfix(); @include clearfix();
@include font-smoothing(); @include font-smoothing();
position: relative; position: relative;
@ -242,18 +244,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
background: $controls-bg; background: $controls-bg;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
box-shadow: 0 1px 1px rgba(red($gray-dark), green($gray-dark), blue($gray-dark), .2); box-shadow: 0 1px 1px transparentize($gray-dark, .2);
// Layout // Layout
&-right { &--right {
display: block; display: block;
margin: $control-spacing auto 0; margin: $control-spacing auto 0;
} }
@media (min-width: $bp-control-split) { @media (min-width: $bp-control-split) {
&-left { &--left {
float: left; float: left;
} }
&-right { &--right {
float: right; float: right;
margin-top: 0; margin-top: 0;
} }
@ -282,7 +284,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// Hover and tab focus // Hover and tab focus
&.tab-focus, &.tab-focus:hover,
&:hover { &:hover {
background: $control-bg-hover; background: $control-bg-hover;
color: $control-color-hover; color: $control-color-hover;
@ -294,25 +296,24 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// Hide toggle icons by default // Hide toggle icons by default
.icon-exit-fullscreen, .icon--exit-fullscreen,
.icon-muted, .icon--muted,
.icon-captions-on { .icon--captions-on {
display: none; display: none;
} }
// Time display // Time display
.plyr-time { .plyr__time {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: $control-spacing; margin-left: $control-spacing;
color: $control-color; color: $control-color;
font-weight: 600; font-weight: 600;
font-size: $font-size-small; font-size: $font-size-small;
@include font-smoothing();
} }
// Media duration hidden on small screens // Media duration hidden on small screens
.plyr-time + .plyr-time { .plyr__time + .plyr__time {
display: none; display: none;
@media (min-width: $bp-control-split) { @media (min-width: $bp-control-split) {
@ -328,7 +329,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// Tooltips // Tooltips
&-tooltip { &__tooltip {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
bottom: 100%; bottom: 100%;
@ -377,15 +378,20 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
z-index: 2; z-index: 2;
} }
} }
button:hover .plyr-tooltip, button:hover .plyr__tooltip,
button:focus .plyr-tooltip { button.tab-focus:focus .plyr__tooltip {
opacity: 1; opacity: 1;
transform: translate(-50%, 0) scale(1); transform: translate(-50%, 0) scale(1);
} }
button:hover .plyr-tooltip { button:hover .plyr__tooltip {
z-index: 3; z-index: 3;
} }
// Common range styles
input[type='range'].tab-focus:focus {
.tab-focus();
}
// Playback progress // Playback progress
// <progress> element // <progress> element
&-progress { &-progress {
@ -397,9 +403,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
height: $control-spacing; height: $control-spacing;
background: $progress-bg; background: $progress-bg;
&-buffer[value], &--buffer[value],
&-played[value], &--played[value],
&-seek[type='range'] { &--seek[type='range'] {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -414,8 +420,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
border: none; border: none;
background: transparent; background: transparent;
} }
&-buffer[value], &--buffer[value],
&-played[value] { &--played[value] {
&::-webkit-progress-bar { &::-webkit-progress-bar {
background: transparent; background: transparent;
} }
@ -428,18 +434,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
background: currentColor; background: currentColor;
} }
} }
&-played[value] { &--played[value] {
z-index: 2; z-index: 2;
color: $progress-playing-bg; color: $progress-playing-bg;
} }
&-buffer[value] { &--buffer[value] {
color: $progress-buffered-bg; color: $progress-buffered-bg;
} }
// Seek control // Seek control
// <input[type='range']> element // <input[type='range']> element
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
&-seek[type='range'] { &--seek[type='range'] {
z-index: 4; z-index: 4;
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
@ -485,7 +491,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// Loading state // Loading state
&.loading .plyr-progress-buffer { &--loading .plyr__progress--buffer {
animation: progress 1s linear infinite; animation: progress 1s linear infinite;
background-size: $progress-loading-size $progress-loading-size; background-size: $progress-loading-size $progress-loading-size;
background-repeat: repeat-x; background-repeat: repeat-x;
@ -503,18 +509,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// States // States
&-controls [data-plyr='pause'], &__controls [data-plyr='pause'],
&.playing .plyr-controls [data-plyr='play'] { &--playing .plyr__controls [data-plyr='play'] {
display: none; display: none;
} }
&.playing .plyr-controls [data-plyr='pause'] { &--playing .plyr__controls [data-plyr='pause'] {
display: inline-block; display: inline-block;
} }
// Volume control // Volume control
// <input[type='range']> element // <input[type='range']> element
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
&-volume[type='range'] { &__volume[type='range'] {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
-webkit-appearance: none; -webkit-appearance: none;
@ -578,30 +584,30 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
// Hide sound controls on iOS // Hide sound controls on iOS
// It's not supported to change volume using JavaScript: // It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume, &--is-ios &__volume,
&.ios [data-plyr='mute'], &--is-ios [data-plyr='mute'],
&-audio.ios &-controls-right { &--is-ios.plyr--audio &__controls--right {
display: none; display: none;
} }
// Center buttons so it looks less odd // Center buttons so it looks less odd
&-audio.ios &-controls-left { &--is-ios.plyr--audio &__controls--left {
float: none; float: none;
} }
// Audio specific styles // Audio specific styles
// Position the progress within the container // Position the progress within the container
&-audio .plyr-controls { &--audio .plyr__controls {
padding-top: ($control-spacing * 2); padding-top: ($control-spacing * 2);
} }
&-audio .plyr-progress { &--audio .plyr__progress {
bottom: auto; bottom: auto;
top: 0; top: 0;
background: $off-white; background: $off-white;
} }
// Full screen mode // Full screen mode
&-fullscreen, &--fullscreen,
&.fullscreen-active { &--fullscreen-active {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -615,11 +621,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
video { video {
height: 100%; height: 100%;
} }
.plyr-video-wrapper { .plyr__video-wrapper {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.plyr-controls { .plyr__controls {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -627,23 +633,24 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// Hide controls when playing in full screen // Hide controls when playing in full screen
&.fullscreen-hide-controls.playing { &--fullscreen--hide-controls&--fullscreen-active&--playing {
.plyr-controls { .plyr__controls {
transform: translateY(100%) translateY($control-spacing / 2); transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s .2s ease; transition: transform .3s .2s ease;
} }
&.plyr-hover .plyr-controls { &.plyr--hover .plyr__controls {
transform: translateY(0); transform: translateY(0);
} }
.plyr-captions { .plyr__captions {
bottom: ($control-spacing / 2); bottom: ($control-spacing / 2);
transition: bottom .3s .2s ease; transition: bottom .3s .2s ease;
} }
} }
// Captions // Captions
.plyr-captions, &--fullscreen .plyr__captions,
&.fullscreen-hide-controls.playing.plyr-hover .plyr-captions { &--fullscreen-active .plyr__captions,
&--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions {
top: auto; top: auto;
bottom: 90px; bottom: 90px;
@ -654,9 +661,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
} }
// Change icons on state change // Change icons on state change
&.fullscreen-active .icon-exit-fullscreen, &--fullscreen-active .icon--exit-fullscreen,
&.muted .plyr-controls .icon-muted, &--muted .plyr__controls .icon--muted,
&.captions-active .plyr-controls .icon-captions-on { &--captions-active .plyr__controls .icon--captions-on {
display: block; display: block;
& + svg { & + svg {
@ -669,8 +676,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
[data-plyr='fullscreen'] { [data-plyr='fullscreen'] {
display: none; display: none;
} }
&.captions-enabled [data-plyr='captions'], &--captions-enabled [data-plyr='captions'],
&.fullscreen-enabled [data-plyr='fullscreen'] { &--fullscreen-enabled [data-plyr='fullscreen'] {
display: inline-block; display: inline-block;
} }
} }

12
src/sprite/icon-restart.svg Normal file → Executable file
View File

@ -1,5 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<title>Restart</title> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M7.7,1.2l0.7,6.4l2.1-2.1c1.9,1.9,1.9,5.1,0,7C9.6,13.5,8.3,14,7,14c-1.3,0-2.6-0.5-3.5-1.5
c-1.9-1.9-1.9-5.1,0-7c0.6-0.6,1.4-1.1,2.3-1.3L5.2,2.3C4,2.6,2.9,3.2,2,4.1c-2.7,2.7-2.7,7.1,0,9.9c1.3,1.3,3.1,2,4.9,2
c1.9,0,3.6-0.7,4.9-2c2.7-2.7,2.7-7.1,0-9.9l2.2-2.2L7.7,1.2z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 702 B

After

Width:  |  Height:  |  Size: 760 B