Keyboard nav fixes (seek & focus trap in fullscreen), SASS updates
This commit is contained in:
Sam Potts
parent
353d920e25
commit
bc7a6ebdde
@ -12,7 +12,9 @@
|
||||
- Better handling of mission controls (fixes #132)
|
||||
- Retain classname on source change (fixes #120)
|
||||
- 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
|
||||
- Fixed bug with API use on basic supported browsers
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/sprite.svg
vendored
2
dist/sprite.svg
vendored
@ -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>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
@ -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
|
||||
function _injectControls() {
|
||||
// Make a copy of the html
|
||||
@ -1481,6 +1519,9 @@
|
||||
// Toggle state
|
||||
_toggleState(plyr.buttons.fullscreen, false);
|
||||
|
||||
// Setup focus trap
|
||||
_focusTrap();
|
||||
|
||||
// Set control hide class hook
|
||||
if (config.fullscreen.hideControls) {
|
||||
_toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
|
||||
@ -1642,6 +1683,17 @@
|
||||
// Set class hook
|
||||
_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
|
||||
_toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
|
||||
|
||||
@ -1940,18 +1992,6 @@
|
||||
_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
|
||||
function _source(source) {
|
||||
// If not null or undefined, parse it
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
background: @volume-thumb-bg;
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
transition: background .3s ease, transform .2s ease;
|
||||
transition: background .3s ease;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.volume-track() {
|
||||
@ -243,7 +243,7 @@
|
||||
background: @controls-bg;
|
||||
line-height: 1;
|
||||
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
|
||||
&--right {
|
||||
@ -283,7 +283,7 @@
|
||||
}
|
||||
|
||||
// Hover and tab focus
|
||||
&.tab-focus,
|
||||
&.tab-focus:focus,
|
||||
&:hover {
|
||||
background: @control-bg-hover;
|
||||
color: @control-color-hover;
|
||||
@ -309,7 +309,6 @@
|
||||
color: @control-color;
|
||||
font-weight: 600;
|
||||
font-size: @font-size-small;
|
||||
.font-smoothing();
|
||||
}
|
||||
|
||||
// Media duration hidden on small screens
|
||||
@ -388,7 +387,7 @@
|
||||
}
|
||||
|
||||
// Common range styles
|
||||
input[type='range'].tab-focus {
|
||||
input[type='range'].tab-focus:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
|
||||
@ -32,14 +32,16 @@ $control-color-hover: null !default;
|
||||
|
||||
// Contrast
|
||||
@if lightness($controls-bg) >= 65% {
|
||||
$control-color: $gray-light;
|
||||
} @else {
|
||||
$control-color: $gray-lighter;
|
||||
$control-color: $gray-light;
|
||||
}
|
||||
@else {
|
||||
$control-color: $gray-lighter;
|
||||
}
|
||||
@if lightness($control-bg-hover) >= 65% {
|
||||
$control-color-hover: $gray;
|
||||
} @else {
|
||||
$control-color-hover: #fff;
|
||||
$control-color-hover: $gray;
|
||||
}
|
||||
@else {
|
||||
$control-color-hover: #fff;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
@ -48,7 +50,7 @@ $tooltip-border-color: transparentize(@gray-dark, .1) !default;
|
||||
$tooltip-border-width: 1px;
|
||||
$tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color;
|
||||
$tooltip-color: $control-color !default;
|
||||
$tooltip-padding: $control-spacing !default;
|
||||
$tooltip-padding: $control-spacing !default;
|
||||
$tooltip-arrow-size: 6px !default;
|
||||
$tooltip-radius: 3px !default;
|
||||
|
||||
@ -80,77 +82,61 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
// Font smoothing
|
||||
@mixin font-smoothing($mode: on)
|
||||
{
|
||||
@if ($mode == 'on') {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@else if ($mode == 'off') {
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
@if ($mode == 'on') {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@else if ($mode == 'off') {
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
||||
@mixin clearfix()
|
||||
{
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:before,
|
||||
&:after { content: ''; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
// Tab focus styles
|
||||
@mixin tab-focus()
|
||||
{
|
||||
outline: thin dotted #000;
|
||||
outline-offset: 0;
|
||||
@mixin tab-focus() {
|
||||
outline: thin dotted transparentize($gray-dark, .8);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
// <input type="range"> styling
|
||||
@mixin volume-thumb()
|
||||
{
|
||||
@mixin volume-thumb() {
|
||||
height: $volume-thumb-height;
|
||||
width: $volume-thumb-width;
|
||||
background: $volume-thumb-bg;
|
||||
border: 0;
|
||||
border-radius: ($volume-thumb-height / 2);
|
||||
border-radius: 100%;
|
||||
transition: background .3s ease;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
@mixin volume-track()
|
||||
{
|
||||
@mixin volume-track() {
|
||||
height: $volume-track-height;
|
||||
background: $volume-track-bg;
|
||||
border: 0;
|
||||
border-radius: ($volume-track-height / 2);
|
||||
}
|
||||
@mixin seek-thumb()
|
||||
{
|
||||
@mixin seek-thumb() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: ($control-spacing * 2);
|
||||
width: ($control-spacing * 4);
|
||||
height: $control-spacing;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@mixin seek-track()
|
||||
{
|
||||
@mixin seek-track() {
|
||||
background: none;
|
||||
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
|
||||
// -------------------------------
|
||||
// Base
|
||||
// Base
|
||||
.plyr {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
@ -161,12 +147,28 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
&,
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
*::before {
|
||||
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
|
||||
&-video-wrapper {
|
||||
&__video-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
video,
|
||||
@ -177,12 +179,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
|
||||
// For embeds
|
||||
&-video-embed {
|
||||
&__video-embed {
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -201,7 +203,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
|
||||
// Captions
|
||||
&-captions {
|
||||
&__captions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -226,15 +228,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
font-size: $font-size-captions-medium;
|
||||
}
|
||||
}
|
||||
&.captions-active &-captions {
|
||||
&--captions-active &__captions {
|
||||
display: block;
|
||||
}
|
||||
&.fullscreen-active &-captions {
|
||||
&--fullscreen-active &__captions {
|
||||
font-size: $font-size-captions-large;
|
||||
}
|
||||
|
||||
// Playback controls
|
||||
&-controls {
|
||||
&__controls {
|
||||
@include clearfix();
|
||||
@include font-smoothing();
|
||||
position: relative;
|
||||
@ -242,23 +244,23 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
background: $controls-bg;
|
||||
line-height: 1;
|
||||
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
|
||||
&-right {
|
||||
&--right {
|
||||
display: block;
|
||||
margin: $control-spacing auto 0;
|
||||
}
|
||||
@media (min-width: $bp-control-split) {
|
||||
&-left {
|
||||
&--left {
|
||||
float: left;
|
||||
}
|
||||
&-right {
|
||||
&--right {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Buttons
|
||||
button {
|
||||
display: inline-block;
|
||||
@ -272,7 +274,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
cursor: pointer;
|
||||
color: $control-color;
|
||||
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
||||
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@ -280,9 +282,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
fill: currentColor;
|
||||
transition: fill .3s ease;
|
||||
}
|
||||
|
||||
|
||||
// Hover and tab focus
|
||||
&.tab-focus,
|
||||
&.tab-focus:hover,
|
||||
&:hover {
|
||||
background: $control-bg-hover;
|
||||
color: $control-color-hover;
|
||||
@ -292,27 +294,26 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hide toggle icons by default
|
||||
.icon-exit-fullscreen,
|
||||
.icon-muted,
|
||||
.icon-captions-on {
|
||||
.icon--exit-fullscreen,
|
||||
.icon--muted,
|
||||
.icon--captions-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Time display
|
||||
.plyr-time {
|
||||
.plyr__time {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: $control-spacing;
|
||||
color: $control-color;
|
||||
font-weight: 600;
|
||||
font-size: $font-size-small;
|
||||
@include font-smoothing();
|
||||
}
|
||||
|
||||
// Media duration hidden on small screens
|
||||
.plyr-time + .plyr-time {
|
||||
.plyr__time + .plyr__time {
|
||||
display: none;
|
||||
|
||||
@media (min-width: $bp-control-split) {
|
||||
@ -328,7 +329,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
&-tooltip {
|
||||
&__tooltip {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 100%;
|
||||
@ -367,8 +368,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
border-top: $border-arrow-size solid $tooltip-border-color;
|
||||
border-left: $border-arrow-size solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
// The background triangle
|
||||
}
|
||||
// The background triangle
|
||||
&::before {
|
||||
bottom: -$tooltip-arrow-size;
|
||||
border-right: $tooltip-arrow-size solid transparent;
|
||||
@ -377,15 +378,20 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
button:hover .plyr-tooltip,
|
||||
button:focus .plyr-tooltip {
|
||||
button:hover .plyr__tooltip,
|
||||
button.tab-focus:focus .plyr__tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
button:hover .plyr-tooltip {
|
||||
button:hover .plyr__tooltip {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Common range styles
|
||||
input[type='range'].tab-focus:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
// Playback progress
|
||||
// <progress> element
|
||||
&-progress {
|
||||
@ -397,9 +403,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
height: $control-spacing;
|
||||
background: $progress-bg;
|
||||
|
||||
&-buffer[value],
|
||||
&-played[value],
|
||||
&-seek[type='range'] {
|
||||
&--buffer[value],
|
||||
&--played[value],
|
||||
&--seek[type='range'] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -414,8 +420,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
&-buffer[value],
|
||||
&-played[value] {
|
||||
&--buffer[value],
|
||||
&--played[value] {
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
@ -428,18 +434,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
&-played[value] {
|
||||
&--played[value] {
|
||||
z-index: 2;
|
||||
color: $progress-playing-bg;
|
||||
}
|
||||
&-buffer[value] {
|
||||
&--buffer[value] {
|
||||
color: $progress-buffered-bg;
|
||||
}
|
||||
|
||||
// Seek control
|
||||
// <input[type='range']> element
|
||||
// Specificity is for bootstrap compatibility
|
||||
&-seek[type='range'] {
|
||||
&--seek[type='range'] {
|
||||
z-index: 4;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
@ -461,7 +467,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
-moz-appearance: none;
|
||||
@include seek-thumb();
|
||||
}
|
||||
|
||||
|
||||
// Microsoft
|
||||
&::-ms-track {
|
||||
color: transparent;
|
||||
@ -485,47 +491,47 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&.loading .plyr-progress-buffer {
|
||||
&--loading .plyr__progress--buffer {
|
||||
animation: progress 1s linear infinite;
|
||||
background-size: $progress-loading-size $progress-loading-size;
|
||||
background-repeat: repeat-x;
|
||||
background-color: $progress-buffered-bg;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
$progress-loading-bg 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
$progress-loading-bg 50%,
|
||||
-45deg,
|
||||
$progress-loading-bg 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
$progress-loading-bg 50%,
|
||||
$progress-loading-bg 75%,
|
||||
transparent 75%,
|
||||
transparent 75%,
|
||||
transparent);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
// States
|
||||
&-controls [data-plyr='pause'],
|
||||
&.playing .plyr-controls [data-plyr='play'] {
|
||||
&__controls [data-plyr='pause'],
|
||||
&--playing .plyr__controls [data-plyr='play'] {
|
||||
display: none;
|
||||
}
|
||||
&.playing .plyr-controls [data-plyr='pause'] {
|
||||
&--playing .plyr__controls [data-plyr='pause'] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Volume control
|
||||
// <input[type='range']> element
|
||||
// Specificity is for bootstrap compatibility
|
||||
&-volume[type='range'] {
|
||||
&__volume[type='range'] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 100px;
|
||||
margin: 0 $control-spacing 0 0;
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
|
||||
// Webkit
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include volume-track();
|
||||
@ -543,7 +549,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
&::-moz-range-thumb {
|
||||
@include volume-thumb();
|
||||
}
|
||||
|
||||
|
||||
// Microsoft
|
||||
&::-ms-track {
|
||||
height: $volume-track-height;
|
||||
@ -578,30 +584,30 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
// Hide sound controls on iOS
|
||||
// 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
|
||||
&.ios &-volume,
|
||||
&.ios [data-plyr='mute'],
|
||||
&-audio.ios &-controls-right {
|
||||
&--is-ios &__volume,
|
||||
&--is-ios [data-plyr='mute'],
|
||||
&--is-ios.plyr--audio &__controls--right {
|
||||
display: none;
|
||||
}
|
||||
// Center buttons so it looks less odd
|
||||
&-audio.ios &-controls-left {
|
||||
&--is-ios.plyr--audio &__controls--left {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Audio specific styles
|
||||
// Position the progress within the container
|
||||
&-audio .plyr-controls {
|
||||
&--audio .plyr__controls {
|
||||
padding-top: ($control-spacing * 2);
|
||||
}
|
||||
&-audio .plyr-progress {
|
||||
&--audio .plyr__progress {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
background: $off-white;
|
||||
}
|
||||
|
||||
// Full screen mode
|
||||
&-fullscreen,
|
||||
&.fullscreen-active {
|
||||
&--fullscreen,
|
||||
&--fullscreen-active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -615,11 +621,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
video {
|
||||
height: 100%;
|
||||
}
|
||||
.plyr-video-wrapper {
|
||||
.plyr__video-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.plyr-controls {
|
||||
.plyr__controls {
|
||||
position: absolute;
|
||||
bottom: 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
|
||||
&.fullscreen-hide-controls.playing {
|
||||
.plyr-controls {
|
||||
&--fullscreen--hide-controls&--fullscreen-active&--playing {
|
||||
.plyr__controls {
|
||||
transform: translateY(100%) translateY($control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
&.plyr-hover .plyr-controls {
|
||||
&.plyr--hover .plyr__controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.plyr-captions {
|
||||
.plyr__captions {
|
||||
bottom: ($control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
.plyr-captions,
|
||||
&.fullscreen-hide-controls.playing.plyr-hover .plyr-captions {
|
||||
&--fullscreen .plyr__captions,
|
||||
&--fullscreen-active .plyr__captions,
|
||||
&--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@ -654,9 +661,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
|
||||
// Change icons on state change
|
||||
&.fullscreen-active .icon-exit-fullscreen,
|
||||
&.muted .plyr-controls .icon-muted,
|
||||
&.captions-active .plyr-controls .icon-captions-on {
|
||||
&--fullscreen-active .icon--exit-fullscreen,
|
||||
&--muted .plyr__controls .icon--muted,
|
||||
&--captions-active .plyr__controls .icon--captions-on {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
@ -669,8 +676,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
[data-plyr='fullscreen'] {
|
||||
display: none;
|
||||
}
|
||||
&.captions-enabled [data-plyr='captions'],
|
||||
&.fullscreen-enabled [data-plyr='fullscreen'] {
|
||||
&--captions-enabled [data-plyr='captions'],
|
||||
&--fullscreen-enabled [data-plyr='fullscreen'] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
14
src/sprite/icon-restart.svg
Normal file → Executable file
14
src/sprite/icon-restart.svg
Normal file → Executable file
@ -1,5 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Restart</title>
|
||||
<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>
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 702 B After Width: | Height: | Size: 760 B |
Loading…
x
Reference in New Issue
Block a user