diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 16 | ||||
| -rw-r--r-- | src/less/plyr.less | 6 | ||||
| -rw-r--r-- | src/scss/plyr.scss | 37 |
3 files changed, 28 insertions, 31 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 6d3ea417..847f1a72 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -3525,10 +3525,10 @@ // Handle global presses if (config.keyboardShortcuts.global) { on(window, 'keydown keyup', function(event) { - var code = getKeyCode(event), - focused = getFocusElement(), - allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67], - count = get().length; + var code = getKeyCode(event); + var focused = getFocusElement(); + var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67]; + var count = get().length; //add also to allowed the keys of looping events allowed = allowed.concat(Object.values(config.loopKeyEvents)); @@ -3548,9 +3548,9 @@ } function handleKey(event) { - var code = getKeyCode(event), - pressed = event.type === 'keydown', - held = pressed && code === last; + var code = getKeyCode(event); + var pressed = event.type === 'keydown'; + var held = pressed && code === last; // If the event is bubbled from the media element // Firefox doesn't get the keycode for whatever reason @@ -3632,7 +3632,7 @@ case 77: // M key if (!held) { - toggleMute() + toggleMute(); } break; diff --git a/src/less/plyr.less b/src/less/plyr.less index 9e1dee8d..b85a5221 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -291,16 +291,14 @@ .plyr__menu { margin-left: (@plyr-control-spacing / 2); - &:first-child { + &:first-child, + &:first-child + [data-plyr="pause"] { margin-left: 0; } } .plyr__volume { margin-left: (@plyr-control-spacing / 2); } - [data-plyr="pause"] { - margin-left: 0; - } @media (min-width: @plyr-bp-screen-sm) { > .plyr__control, diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 639caaf1..60d2e2fe 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -61,14 +61,14 @@ height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale); width: 100%; margin: 0; - padding: 0; + padding: 0; vertical-align: middle; - + appearance: none; cursor: pointer; border: none; background: transparent; - + // WebKit &::-webkit-slider-runnable-track { @include plyr-range-track(); @@ -86,7 +86,7 @@ &::-moz-range-thumb { @include plyr-range-thumb(); } - + // Microsoft &::-ms-track { height: $plyr-range-track-height; @@ -104,7 +104,7 @@ &::-ms-thumb { @include plyr-range-thumb(); // For some reason, Edge uses the -webkit margin above - margin-top: 0; + margin-top: 0; } &::-ms-tooltip { display: none; @@ -116,11 +116,11 @@ } &::-moz-focus-outer { border: 0; - } + } &.tab-focus:focus { outline-offset: 3px; } - + // Pressed styles &:active { &::-webkit-slider-thumb { @@ -264,26 +264,25 @@ // Playback controls .plyr__controls { display: flex; - align-items: center; + align-items: center; line-height: 1; text-align: center; // Spacing - > button, + > .plyr__control, .plyr__progress, - .plyr__time { + .plyr__time, + .plyr__menu { margin-left: ($plyr-control-spacing / 2); - &:first-child { + &:first-child, + &:first-child + [data-plyr="pause"] { margin-left: 0; } } .plyr__volume { margin-left: ($plyr-control-spacing / 2); } - [data-plyr="pause"] { - margin-left: 0; - } // Buttons button { @@ -328,7 +327,7 @@ } } } -// Hide controls +// Hide controls .plyr--hide-controls .plyr__controls { opacity: 0; pointer-events: none; @@ -475,7 +474,7 @@ height: 0; left: 50%; transform: translateX(-50%); - + // The background triangle bottom: -$plyr-tooltip-arrow-size; border-right: $plyr-tooltip-arrow-size solid transparent; @@ -624,16 +623,16 @@ } &::-moz-progress-bar { transition: width .2s ease; - } + } &::-ms-fill { transition: width .2s ease; - } + } } .plyr--video .plyr__progress--buffer, .plyr--video .plyr__volume--display { background: $plyr-video-range-track-bg; } -.plyr--video .plyr__progress--buffer { +.plyr--video .plyr__progress--buffer { color: $plyr-video-progress-buffered-bg; } .plyr--audio .plyr__progress--buffer, |