Skip to content
Permalink
Browse files

Cleanup and changes

Implement brand colors for switch component
Use boolean for model prop
Pull jw switch into shared component
Check for shortcuts enabled once
  • Loading branch information...
jnatalzia committed Oct 9, 2019
1 parent 528703c commit 0dc6e28e1d747ccebc9a95c43d9f2956ebcab4ed
@@ -14,6 +14,7 @@
@import "controls/imports/nextup.less";
@import "controls/imports/autostartmute.less";
@import "controls/imports/settings-menu.less";
@import "controls/imports/switch.less";
@import "controls/imports/playback-label.less";
@import "controls/imports/info-overlay.less";
@import "controls/imports/drop-shadow-variants.less";
@@ -2,10 +2,6 @@
@import "../../shared-imports/mixins.less";

.jwplayer .jw-shortcuts-tooltip {
@rightclick-primary-text: #fefefe;
@rightclick-secondary-text: #333;
@rightclick-bg: #333;
@rightclick-secondary-bg: #fefefe;
@ui-padding: 0.5em;
@ui-margin: 20px;

@@ -43,88 +39,37 @@
font-weight: bold;
}

.jw-shortcuts-switch {
position: relative;
left: 25px;
display: inline-block;
transition: ease-out 0.15s;
transition-property: opacity, background;
border-radius: 18px;
width: 80px;
height: 20px;
padding: 10px;
background: fade(@rightclick-secondary-bg, 80%);
cursor: pointer;
font-size: inherit;
vertical-align: middle;

.jw-shortcuts-switch-knob {
position: absolute;
top: 2px;
left: 1px;
transition: ease-out 0.15s;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
border-radius: 13px;
width: 15px;
height: 15px;
background: @rightclick-secondary-bg;
}

&:before,
&:after {
position: absolute;
top: 3px;
transition: inherit;
color: @rightclick-primary-text;
}

&:before {
content: attr(data-jw-shortcuts-disabled);
right: 8px;
}

&:after {
content: attr(data-jw-shortcuts-enabled);
left: 8px;
opacity: 0;
}

&[aria-checked="true"] {
background: @rightclick-bg;

&:before {
opacity: 0;
}

&:after {
opacity: 1;
}

.jw-shortcuts-switch-knob {
left: 60px;
}
}
.jw-shortcuts-header {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.jw-shortcuts-tooltip-list {
display: flex;
max-width: 340px;
margin: 0 10px;

.jw-shortcuts-tooltip-descriptions {
width: 100%;
}

.jw-shortcuts-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
width: 100%;

.jw-shortcuts-description {
margin-right: 10px;
max-width: 70%;
}

.jw-shortcuts-key {
background: @rightclick-secondary-bg;
color: @rightclick-secondary-text;
background: @rightclick-shortcuts-secondary-bg;
color: @rightclick-shortcuts-secondary-text;
overflow: hidden;
padding: 7px 10px;
text-overflow: ellipsis;
@@ -133,4 +78,4 @@
}
}
}
}
}
@@ -0,0 +1,63 @@
.jw-shortcuts-container {
.jw-switch {
position: relative;
display: inline-block;
transition: ease-out 0.15s;
transition-property: opacity, background;
border-radius: 18px;
width: 80px;
height: 20px;
padding: 10px;
background: fade(#505050, 80%);
cursor: pointer;
font-size: inherit;
vertical-align: middle;

.jw-switch-knob {
position: absolute;
top: 2px;
left: 1px;
transition: ease-out 0.15s;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
border-radius: 13px;
width: 15px;
height: 15px;
background: @rightclick-shortcuts-secondary-bg;
}

&:before,
&:after {
position: absolute;
top: 3px;
transition: inherit;
color: @rightclick-shortcuts-primary-text;
}

&:before {
content: attr(data-jw-switch-disabled);
right: 8px;
}

&:after {
content: attr(data-jw-switch-enabled);
left: 8px;
opacity: 0;
}

&[aria-checked="true"] {
background: #475470;

&:before {
opacity: 0;
}

&:after {
opacity: 1;
}

.jw-switch-knob {
left: 60px;
}
}
}
}
@@ -114,3 +114,9 @@
// Settings menu and floating player close buttons
@dismiss-top-padding: 3px;
@dismiss-right-padding: 5px;

// Keyboard shortcuts
@rightclick-shortcuts-primary-text: #fefefe;
@rightclick-shortcuts-bg: #333;
@rightclick-shortcuts-secondary-text: #333;
@rightclick-shortcuts-secondary-bg: #fefefe;
@@ -25,7 +25,7 @@ export const Defaults = {
displaydescription: true,
displaytitle: true,
displayPlaybackLabel: false,
enableShortcuts: 'true',
enableShortcuts: true,
height: 360,
intl: {},
language: 'en',
@@ -21,6 +21,8 @@ import FloatingCloseButton from 'view/floating-close-button';
require('css/controls.less');

const ACTIVE_TIMEOUT = OS.mobile ? 4000 : 2000;
// Keys which bypass keyboard shortcuts being off
const ALWAYS_ALLOWED_KEYS = [27];

ErrorContainer.cloneIcon = cloneIcon;
instances.forEach(api => {
@@ -276,8 +278,13 @@ export default class Controls extends Events {
return true;
}
const menuHidden = !this.settingsMenu.visible;
const shortcutsEnabled = model.get('enableShortcuts') === 'true';
const shortcutsEnabled = model.get('enableShortcuts') === true;
const adMode = this.instreamState;

if (!shortcutsEnabled && ALWAYS_ALLOWED_KEYS.indexOf(evt.keyCode) === -1) {
return;
}

switch (evt.keyCode) {
case 27: // Esc
if (model.get('fullscreen')) {
@@ -304,63 +311,56 @@ export default class Controls extends Events {
break;
case 13: // enter
case 32: // space
if (document.activeElement.className === 'jw-shortcuts-switch' && evt.keyCode === 32) {
if (document.activeElement.className === 'jw-switch' && evt.keyCode === 32) {
// Let event bubble up so the spacebar can control the toggle if focused on
return true;
}
if (shortcutsEnabled) {
api.playToggle(reasonInteraction());
}
api.playToggle(reasonInteraction());
break;
case 37: // left-arrow, if shortcuts are enabled, not adMode, and settings menu is hidden
if (shortcutsEnabled && !adMode && menuHidden) {
if (!adMode && menuHidden) {
adjustSeek(-5);
}
break;
case 39: // right-arrow, if shortcuts are enabled, not adMode, and settings menu is hidden
if (shortcutsEnabled && !adMode && menuHidden) {
if (!adMode && menuHidden) {
adjustSeek(5);
}
break;
case 38: // up-arrow, if shortcuts are enabled and settings menu is hidden
if (shortcutsEnabled && menuHidden) {
if (menuHidden) {
adjustVolume(10);
}
break;
case 40: // down-arrow, if shortcuts are enabled and settings menu is hidden
if (shortcutsEnabled && menuHidden) {
if (menuHidden) {
adjustVolume(-10);
}
break;
case 67: // c-key, if shortcuts are enabled
if (shortcutsEnabled) {
const captionsList = api.getCaptionsList();
const listLength = captionsList.length;
if (listLength) {
const nextIndex = (api.getCurrentCaptions() + 1) % listLength;
api.setCurrentCaptions(nextIndex);
}
case 67: {
// c-key, if shortcuts are enabled
const captionsList = api.getCaptionsList();
const listLength = captionsList.length;
if (listLength) {
const nextIndex = (api.getCurrentCaptions() + 1) % listLength;
api.setCurrentCaptions(nextIndex);
}

break;
}
case 77: // m-key, if shortcuts are enabled
if (shortcutsEnabled) {
api.setMute();
}
api.setMute();
break;
case 70: // f-key, if shortcuts are enabled
if (shortcutsEnabled) {
api.setFullscreen();
}
api.setFullscreen();
break;
case 191: // ? key
if (this.shortcutsTooltip) {
this.shortcutsTooltip.toggleVisibility();
}
break;
default:
if (evt.keyCode >= 48 && evt.keyCode <= 59 && shortcutsEnabled) {
// if 0-9 number key and shortcuts are enabled, move to n/10 of the percentage of the video
if (evt.keyCode >= 48 && evt.keyCode <= 59) {
// if 0-9 number key, move to n/10 of the percentage of the video
const number = evt.keyCode - 48;
const newSeek = (number / 10) * model.get('duration');
api.seek(newSeek, reasonInteraction());
@@ -6,17 +6,17 @@ import { STATE_PLAYING } from 'events/events';


function getShortcuts(shortcuts) {
const {
playPause,
volumeToggle,
fullscreenToggle,
seekPercent,
increaseVolume,
decreaseVolume,
seekForward,
seekBackward,
spacebar,
captionsToggle
const {
playPause,
volumeToggle,
fullscreenToggle,
seekPercent,
increaseVolume,
decreaseVolume,
seekForward,
seekBackward,
spacebar,
captionsToggle
} = shortcuts;

return [
@@ -63,9 +63,11 @@ export default function (container, api, model) {
let isOpen = false;
let lastState = null;
const shortcuts = model.get('localization').shortcuts;
const template = createElement(shortcutTooltipTemplate(getShortcuts(shortcuts), shortcuts.keyboardShortcuts));
const template = createElement(
shortcutTooltipTemplate(getShortcuts(shortcuts), shortcuts.keyboardShortcuts)
);
const settingsInteraction = { reason: 'settingsInteraction' };
const shortcutToggle = template.querySelector('.jw-shortcuts-switch');
const shortcutToggle = template.querySelector('.jw-switch');

const open = () => {
shortcutToggle.setAttribute('aria-checked', model.get('enableShortcuts'));
@@ -80,7 +82,7 @@ export default function (container, api, model) {
};
const close = () => {
shortcutToggle.removeEventListener('click', toggleClickHandler);
removeClass(template, 'jw-open');
removeClass(template, 'jw-open');
document.removeEventListener('click', documentClickHandler);
container.focus();
isOpen = false;
@@ -89,14 +91,15 @@ export default function (container, api, model) {
}
};
const documentClickHandler = (e) => {
if (!/jw-shortcuts/.test(e.target.className)) {
if (!/jw-shortcuts|jw-switch/.test(e.target.className)) {
close();
}
};
const toggleClickHandler = (e) => {
const toggle = e.currentTarget;
toggle.setAttribute('aria-checked', toggle.getAttribute('aria-checked') === 'true' ? 'false' : 'true');
model.set('enableShortcuts', toggle.getAttribute('aria-checked'));
const isChecked = toggle.getAttribute('aria-checked') === 'true' ? false : true;
toggle.setAttribute('aria-checked', isChecked);
model.set('enableShortcuts', isChecked);
};
const toggleVisibility = () => {
if (isOpen) {
@@ -113,7 +116,7 @@ export default function (container, api, model) {
// Append close button to modal.
prependChild(template, closeButton.element());
closeButton.show();

// Append modal to container
container.appendChild(template);
};

0 comments on commit 0dc6e28

Please sign in to comment.
You can’t perform that action at this time.