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

Added quality in menu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/js/plyr.js
View File

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

12
src/less/plyr.less
View File

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

7
src/less/variables.less
View File

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