Added quality in menu

This commit is contained in:
Sam Potts 2016-09-07 22:18:05 +10:00
parent 42a2642d40
commit 46f82a4af3
6 changed files with 23 additions and 12 deletions

2
demo/dist/demo.css vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -150,7 +150,8 @@
frameTitle: 'Player for {title}',
captions: 'Captions',
settings: 'Settings',
speed: 'Speed'
speed: 'Speed',
quality: 'Quality'
},
types: {
embed: ['youtube', 'vimeo', 'soundcloud'],
@ -886,6 +887,11 @@
config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>',
'</button>',
'</li>',
'<li>',
'<button type="button" data-plyr="slide-speed">',
config.i18n.quality + ' <span class="plyr__menu__value">Auto</span>',
'</button>',
'</li>',
'</ul>',
'</div>',
'</div>'

View File

@ -482,12 +482,12 @@
right: -5px;
margin-bottom: 10px;
animation: plyr-popup .2s ease;
background: fade(@plyr-video-controls-bg, 90%);
background: @plyr-menu-bg;
box-shadow: 0 1px 0 fade(#000, 20%);
border-radius: 4px;
white-space: nowrap;
text-align: left;
color: @plyr-video-control-color;
color: @plyr-menu-color;
font-size: @plyr-font-size-small;
ul {
@ -500,7 +500,7 @@
display: flex;
width: 100%;
padding: 10px 30px 10px 12px;
color: @plyr-video-control-color;
color: @plyr-menu-color;
font-weight: 600;
// Arrow
@ -511,7 +511,7 @@
transform: translateY(-50%);
right: 5px;
border: 5px solid transparent;
border-left-color: fade(@plyr-video-control-color, 80%);
border-left-color: fade(@plyr-menu-color, 80%);
}
}
@ -520,7 +520,7 @@
margin-left: auto;
padding-left: 25px;
font-weight: 400;
color: fade(@plyr-video-control-color, 80%);
color: fade(@plyr-menu-color, 80%);
}
// Arrow
@ -532,7 +532,7 @@
height: 0;
width: 0;
border: 6px solid transparent;
border-top-color: fade(@plyr-video-controls-bg, 90%);
border-top-color: @plyr-menu-bg;
}
}
}

View File

@ -38,12 +38,17 @@
@plyr-audio-control-bg-hover: @plyr-color-main;
// Tooltips
@plyr-tooltip-bg: fade(#343f4a, 85%);
@plyr-tooltip-bg: fade(#343f4a, 90%);
@plyr-tooltip-color: #fff;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
// Menus
@plyr-menu-bg: @plyr-tooltip-bg;
@plyr-menu-color: @plyr-tooltip-color;
@plyr-menu-arrow-size: 6px;
// Progress
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#343f4a, 20%);