fixed resolution switcher displaying the wrong label, closes #267

static/videojs/videojs-resolution-switcher.js

-/*! videojs-resolution-switcher - 2015-7-26
+/*! videojs-resolution-switcher - 2017-05-20
  * Copyright (c) 2016 Kasper Moskwiak
- * Modified by Pierre Kraft and Derk-Jan Hartman
+ * Modified by Pierre Kraft, Derk-Jan Hartman and Andreas Valder
  * Licensed under the Apache-2.0 license. */
 
 (function() {
@@ -70,9 +70,40 @@
 		} );
 		ResolutionMenuButton.prototype.createItems = function(){
 			var menuItems = [];
-			var labels = (this.sources && this.sources.label) || {};
 
-			// FIXME order is not guaranteed here.
+			// one large hack to sort the labels
+			var labels = (this.sources && this.sources.label) || [];
+			var sortable = [];
+			for (var l in labels) {
+				sortable.push({'key': l, 'value': labels[l]});
+			}
+			sortable.sort(function(a,b) {
+				var calcPixel = function(item) {
+					var exp = item.res.replace('x','*');
+					if (exp != item.res) {
+						return eval(exp);
+					} else {
+						return 0;
+					}
+				};
+				if (a.value[0].res && b.value[0].res) {
+					return calcPixel(a.value[0])-calcPixel(b.value[0]);
+				}
+				return 0;
+			});
+			sortable.reverse();
+			var labels = {}
+			for (var i=0; i<sortable.length; i++) {
+				if (! labels[sortable[i].key]) {
+					labels[sortable[i].key] = [];
+				}
+				for (var l=0; l<sortable[i].value.length; l++) {
+					labels[sortable[i].key].push(sortable[i].value[l]);
+				}
+			}
+			labels = labels || {};
+			//hack ends here
+
 			for (var key in labels) {
 				if (labels.hasOwnProperty(key)) {
 					menuItems.push(new ResolutionMenuItem(
@@ -117,6 +148,11 @@
 			player.updateSrc = function(src){
 				//Return current src if src is not given
 				if(!src){ return player.src(); }
+				for (var i=0; i<src.length;i++) {
+					src[i].res = src[i]['data-res'];
+					src[i].label = src[i]['data-label'];
+					src[i].prio = -src[i]['data-player_prio'];
+				}
 
 				// Only add those sources which we can (maybe) play
 				src = src.filter( function(source) {
@@ -217,6 +253,9 @@
 			 * @returns {Number} result of comparation
 			 */
 			function compareResolutions(a, b){
+				if(a.prio && b.prio){
+					return (+b.prio)-(+a.prio)
+				}
 				if(!a.res || !b.res){ return 0; }
 				return (+b.res)-(+a.res);
 			}

templates/macros.html

@@ -51,7 +51,7 @@
 {% macro player(lecture, videos, msgs) %}
 <video id="videoplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls data-wasnotplayed="1"  data-setup='{ "language":"de", "plugins" : {"hotkeys": {"seekStep": 15, "enableVolumeScroll": false, "alwaysCaptureHotkeys": true}, "videoJsResolutionSwitcher": { "ui": true, "default": "720p", "dynamicLabel": false } }, "customControlsOnMobile": true, "playbackRates": [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4] }'>
 	{% for v in videos|sort(attribute='formats.player_prio', reverse=True) %}
-	<source type="{{ v.mimetype }}" src="{{ config.VIDEOPREFIX }}/{{ v.path }}" data-label="{{ v.formats.description }}" data-res="{{v.formats.resolution}}" data-aspect="{{v.formats.aspect}}" data-playerprio="{{v.formats.player_prio}}"/>
+	<source type="{{ v.formats.mimetype }}" src="{{ config.VIDEOPREFIX }}/{{ v.path }}" data-label="{{ v.formats.description }}" data-res="{{v.formats.resolution}}" data-aspect="{{v.formats.aspect}}" data-player_prio="{{v.formats.player_prio}}"/>
 	{{ v|safe }}
 	{% endfor %}
 	<track srclang="de" kind="chapters" src="{{ url_for('chapters',lectureid=lecture.id) }}" />