From dc3383cc481fda244ec49de331976539fa208a52 Mon Sep 17 00:00:00 2001 From: Derk-Jan Hartman Date: Sat, 23 Apr 2016 15:34:06 +0200 Subject: [PATCH 1/3] Fix indentation --- lib/videojs-resolution-switcher.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/lib/videojs-resolution-switcher.css b/lib/videojs-resolution-switcher.css index aee4eac..2570759 100644 --- a/lib/videojs-resolution-switcher.css +++ b/lib/videojs-resolution-switcher.css @@ -10,16 +10,16 @@ } .vjs-resolution-button .vjs-resolution-button-label { - font-size: 1em; - line-height: 3em; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - box-sizing: inherit; - font-family: Arial, Helvetica, sans-serif; + font-size: 1em; + line-height: 3em; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + box-sizing: inherit; + font-family: Arial, Helvetica, sans-serif; } .vjs-resolution-button ul.vjs-menu-content { @@ -32,6 +32,6 @@ .vjs-resolution-button .vjs-menu li { text-transform: none; - font-size: 1em; - font-family: Arial, Helvetica, sans-serif; + font-size: 1em; + font-family: Arial, Helvetica, sans-serif; } From c1a41a463585a5a4a424370e476b0b3cd79b0f54 Mon Sep 17 00:00:00 2001 From: Derk-Jan Hartman Date: Sat, 23 Apr 2016 17:36:32 +0200 Subject: [PATCH 2/3] Cleanup styling - Remove color override - Simplify how the dynamic label vs cog icon is styled - Don't use !important, but specificity to override video.js - Use more isolated method to center the menu. --- lib/videojs-resolution-switcher.css | 21 +++++++----------- lib/videojs-resolution-switcher.js | 34 ++++++++++++++--------------- 2 files changed, 24 insertions(+), 31 deletions(-) diff --git a/lib/videojs-resolution-switcher.css b/lib/videojs-resolution-switcher.css index 2570759..ac03f75 100644 --- a/lib/videojs-resolution-switcher.css +++ b/lib/videojs-resolution-switcher.css @@ -1,12 +1,11 @@ -.vjs-resolution-button { - color: #ccc; +.vjs-resolution-button.vjs-menu-icon { font-family: VideoJS; + font-weight: normal; + font-style: normal; } -.vjs-resolution-button .vjs-resolution-button-staticlabel:before { +.vjs-resolution-button.vjs-menu-icon:before { content: '\f110'; - font-size: 1.8em; - line-height: 1.67; } .vjs-resolution-button .vjs-resolution-button-label { @@ -19,19 +18,15 @@ height: 100%; text-align: center; box-sizing: inherit; - font-family: Arial, Helvetica, sans-serif; } -.vjs-resolution-button ul.vjs-menu-content { - width: 4em !important; -} - -.vjs-resolution-button .vjs-menu { - left: 0; +.vjs-resolution-button .vjs-menu .vjs-menu-content { + width: 4em; + left: 50%; /* Center the menu, in it's parent */ + margin-left: -2em; /* half of width, to center */ } .vjs-resolution-button .vjs-menu li { text-transform: none; font-size: 1em; - font-family: Arial, Helvetica, sans-serif; } diff --git a/lib/videojs-resolution-switcher.js b/lib/videojs-resolution-switcher.js index 5b1448e..e651c99 100644 --- a/lib/videojs-resolution-switcher.js +++ b/lib/videojs-resolution-switcher.js @@ -117,10 +117,8 @@ if(settings.dynamicLabel){ this.el().appendChild(label); - }else{ - var staticLabel = document.createElement('span'); - videojs.addClass(staticLabel, 'vjs-resolution-button-staticlabel'); - this.el().appendChild(staticLabel); + } else { + videojs.addClass(this.el(), 'vjs-menu-icon'); } }, createItems: function(){ @@ -164,7 +162,7 @@ groupedSrc = {}; videojs.addClass(label, 'vjs-resolution-button-label'); - + /** * Updates player sources or returns current source URL * @param {Array} [src] array of sources [{src: '', type: '', label: '', res: ''}] @@ -276,29 +274,29 @@ } else if (groupedSrc.res[selectedRes]) { selectedLabel = groupedSrc.res[selectedRes][0].label; } - + return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]}; } - + function initResolutionForYt(player){ // Init resolution player.tech_.ytPlayer.setPlaybackQuality('default'); - + // Capture events player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function(){ player.trigger('resolutionchange'); }); - + // We must wait for play event player.one('play', function(){ var qualities = player.tech_.ytPlayer.getAvailableQualityLevels(); // Map youtube qualities names var _yts = { highres: {res: 1080, label: '1080', yt: 'highres'}, - hd1080: {res: 1080, label: '1080', yt: 'hd1080'}, - hd720: {res: 720, label: '720', yt: 'hd720'}, + hd1080: {res: 1080, label: '1080', yt: 'hd1080'}, + hd720: {res: 720, label: '720', yt: 'hd720'}, large: {res: 480, label: '480', yt: 'large'}, - medium: {res: 360, label: '360', yt: 'medium'}, + medium: {res: 360, label: '360', yt: 'medium'}, small: {res: 240, label: '240', yt: 'small'}, tiny: {res: 144, label: '144', yt: 'tiny'}, auto: {res: 0, label: 'auto', yt: 'default'} @@ -325,10 +323,10 @@ }; var choosen = {label: 'auto', res: 0, sources: groupedSrc.label.auto}; - var menuButton = new ResolutionMenuButton(player, { - sources: groupedSrc, - initialySelectedLabel: choosen.label, - initialySelectedRes: choosen.res, + var menuButton = new ResolutionMenuButton(player, { + sources: groupedSrc, + initialySelectedLabel: choosen.label, + initialySelectedRes: choosen.res, customSourcePicker: _customSourcePicker }, settings, label); @@ -336,14 +334,14 @@ player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton); }); } - + player.ready(function(){ if(player.options_.sources.length > 1){ // tech: Html5 and Flash // Create resolution switcher for videos form tag inside