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

Work on Audio UI

Browse Source
This commit is contained in:
Sam
2016-04-25 22:48:40 +10:00
parent d41249bd90
commit e26694c322
5 changed files with 82 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/plyr.js
View File

@ -1317,6 +1317,12 @@
// Add type class
_toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
// Add video class for embeds
// This will require changes if audio embeds are added
if (_inArray(config.types.embed, plyr.type)) {
_toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
}
// If there's no autoplay attribute, assume the video is stopped and add state class
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
@ -2176,7 +2182,7 @@
// Show the player controls in fullscreen mode
function _toggleControls(toggle) {
if (!config.hideControls) {
if (!config.hideControls || plyr.type === 'audio') {
return;
}
var delay = false,

141
src/less/plyr.less
View File

@ -7,7 +7,7 @@
// -------------------------------
// Colors
@plyr-color-main: #3498DB;
@plyr-color-main: #63B4E1;
// Font sizes
@plyr-font-size-small: 14px;
@ -19,29 +19,32 @@
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls
@plyr-controls-bg: #000;
@plyr-control-color: #fff;
@plyr-control-color-hover: #fff;
// #C6D6DB
@plyr-control-spacing: 10px;
@plyr-control-bg-hover: @plyr-color-main;
//.contrast-control-color(@plyr-controls-bg);
//.contrast-control-color-hover(@plyr-control-bg-hover);
@plyr-video-controls-bg: #000;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;
@plyr-audio-controls-bg: transparent;
@plyr-audio-control-color: #565D64;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
@plyr-tooltip-bg: @plyr-controls-bg;
@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%);
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%);
@plyr-tooltip-bg: @plyr-video-controls-bg;
@plyr-tooltip-border-color: fade(darken(@plyr-video-controls-bg, 75%), 10%);
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-video-controls-bg, 75%), 20%);
@plyr-tooltip-border-width: 1px;
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
@plyr-tooltip-color: @plyr-control-color;
@plyr-tooltip-color: @plyr-video-control-color;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
// Progress
@plyr-progress-bg: fade(@plyr-control-color, 25%);
@plyr-progress-bg: fade(@plyr-video-control-color, 25%);
@plyr-progress-playing-bg: @plyr-color-main;
@plyr-progress-buffered-bg: fade(@plyr-control-color, 25%);
@plyr-progress-buffered-bg: fade(@plyr-video-control-color, 25%);
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#000, 15%);
@ -53,8 +56,8 @@
@range-thumb-bg: #fff;
@range-thumb-border: 2px solid transparent;
@range-thumb-active-border-color: #fff;
@range-thumb-active-bg: @plyr-control-bg-hover;
@range-thumb-shadow: 0 1px 1px fade(@plyr-controls-bg, 15%);
@range-thumb-active-bg: @plyr-video-control-bg-hover;
@range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
// Breakpoints
@plyr-bp-control-split: 560px; // When controls split into left/right
@ -68,20 +71,6 @@
// Mixins
// -------------------------------
// Contrast
/*.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
@plyr-control-color: @plyr-gray-light;
}
.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@plyr-control-color: @plyr-gray-lighter;
}
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
@plyr-control-color-hover: @plyr-gray;
}
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@plyr-control-color-hover: #fff;
}*/
// <input type="range"> styling
.range-track() {
height: @range-track-height;
@ -205,7 +194,7 @@
border: 0;
}
&.tab-focus:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
outline: 1px dotted fade(@plyr-video-control-color, 50%);
outline-offset: 3px;
}
@ -267,7 +256,7 @@
}
}
// To allow mouse events to be captured if full support
.plyr.plyr__video-embed iframe {
.plyr .plyr__video-embed iframe {
pointer-events: none;
}
@ -319,17 +308,8 @@
// Playback controls
.plyr__controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 50%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
line-height: 1;
text-align: center;
@ -337,15 +317,17 @@
// Spacing
> button,
.plyr__progress,
.plyr__time,
.plyr__volume[type="range"] {
.plyr__time {
margin-left: @plyr-control-spacing;
&::first-child {
&:first-child {
margin-left: 0;
}
}
[data-plyr="mute"] {
.plyr__volume[type="range"] {
margin-left: (@plyr-control-spacing / 2);
}
[data-plyr="pause"] {
margin-left: 0;
}
@ -360,8 +342,8 @@
background: transparent;
border-radius: 3px;
cursor: pointer;
color: @plyr-control-color;
transition: background .3s ease, color .3s ease, opacity .3s ease;
color: inherit;
svg {
width: 18px;
@ -370,12 +352,6 @@
fill: currentColor;
}
// Hover and tab focus
&.tab-focus:focus,
&:hover {
background: @plyr-control-bg-hover;
color: @plyr-control-color-hover;
}
// Default focus
&:focus {
outline: 0;
@ -390,6 +366,43 @@
}
}
// Video controls
.plyr--video .plyr__controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: (@plyr-control-spacing * 5) (@plyr-control-spacing * 1.5) @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
button {
// Hover and tab focus
&.tab-focus:focus,
&:hover {
background: @plyr-video-control-bg-hover;
color: @plyr-video-control-color-hover;
}
}
}
.plyr--audio .plyr__controls {
padding: @plyr-control-spacing;
border-radius: inherit;
background: @plyr-audio-controls-bg;
color: @plyr-audio-control-color;
button {
// Hover and tab focus
&.tab-focus:focus,
&:hover {
background: @plyr-audio-control-bg-hover;
color: @plyr-audio-control-color-hover;
}
}
}
// Large play button
.plyr__play-large {
position: absolute;
@ -397,10 +410,10 @@
left: 50%;
transform: translate(-50%, -50%);
padding: @plyr-control-spacing;
background: @plyr-control-bg-hover;
border: 4px solid @plyr-control-color;
background: @plyr-video-control-bg-hover;
border: 4px solid @plyr-video-control-color;
border-radius: 100%;
color: @plyr-control-color;
color: @plyr-video-control-color;
svg {
position: relative;
@ -412,9 +425,12 @@
}
&:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
outline: 1px dotted fade(@plyr-video-control-color, 50%);
}
}
.plyr--audio .plyr__play-large {
display: none;
}
// States
.plyr__controls [data-plyr='pause'],
@ -572,13 +588,11 @@
background: transparent;
&::-webkit-progress-value {
background: currentColor;
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&::-moz-progress-bar {
background: currentColor;
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@ -627,7 +641,6 @@
.plyr__time {
display: inline-block;
vertical-align: middle;
color: @plyr-control-color;
font-size: @plyr-font-size-small;
line-height: .95;
}
@ -668,18 +681,6 @@
float: none;
}
// Audio
// --------------------------------------------------------------
// Position the progress within the container
.plyr--audio .plyr__controls {
padding-top: (@plyr-control-spacing * 2);
}
.plyr--audio .plyr__progress {
bottom: auto;
top: 0;
background: #fff;
}
// Fullscreen
// --------------------------------------------------------------
.plyr--fullscreen,