Change USEROPTS.default_quality values

player/youtube.coffee

@@ -8,21 +8,25 @@ window.YouTubePlayer = class YouTubePlayer extends Player
         @pauseSeekRaceCondition = false
 
         waitUntilDefined(window, 'YT', =>
-            removeOld()
+            # Even after window.YT is defined, YT.Player may not be, which causes a
+            # "YT.Player is not a constructor" error occasionally
+            waitUntilDefined(YT, 'Player', =>
+                removeOld()
 
-            wmode = if USEROPTS.wmode_transparent then 'transparent' else 'opaque'
+                wmode = if USEROPTS.wmode_transparent then 'transparent' else 'opaque'
-            @yt = new YT.Player('ytapiplayer',
+                @yt = new YT.Player('ytapiplayer',
-                videoId: data.id
+                    videoId: data.id
-                playerVars:
+                    playerVars:
-                    autohide: 1
+                        autohide: 1
-                    autoplay: 1
+                        autoplay: 1
-                    controls: 1
+                        controls: 1
-                    iv_load_policy: 3 # iv_load_policy 3 indicates no annotations
+                        iv_load_policy: 3 # iv_load_policy 3 indicates no annotations
-                    rel: 0
+                        rel: 0
-                    wmode: wmode
+                        wmode: wmode
-                events:
+                    events:
-                    onReady: @onReady.bind(this)
+                        onReady: @onReady.bind(this)
-                    onStateChange: @onStateChange.bind(this)
+                        onStateChange: @onStateChange.bind(this)
+                )
             )
         )
 
@@ -32,7 +36,7 @@ window.YouTubePlayer = class YouTubePlayer extends Player
             @yt.loadVideoById(data.id, data.currentTime)
             @qualityRaceCondition = true
             if USEROPTS.default_quality
-                @yt.setPlaybackQuality(USEROPTS.default_quality)
+                @setQuality(USEROPTS.default_quality)
         else
             console.error('WTF?  YouTubePlayer::load() called but yt is not ready')
 
@@ -46,7 +50,7 @@ window.YouTubePlayer = class YouTubePlayer extends Player
         if @qualityRaceCondition
             @qualityRaceCondition = false
             if USEROPTS.default_quality
-                @yt.setPlaybackQuality(USEROPTS.default_quality)
+                @setQuality(USEROPTS.default_quality)
 
         # Similar to above, if you pause the video before the first PLAYING
         # event is emitted, weird things happen.
@@ -85,6 +89,22 @@ window.YouTubePlayer = class YouTubePlayer extends Player
                 @yt.unMute()
             @yt.setVolume(volume * 100)
 
+    setQuality: (quality) ->
+        if not @yt or not @yt.ready
+            return
+
+        ytQuality = switch String(quality)
+            when "240" then "small"
+            when "360" then "medium"
+            when "480" then "large"
+            when "720" then "hd720"
+            when "1080" then "hd1080"
+            when "best" then "highres"
+            else "auto"
+
+        if ytQuality != "auto"
+            @yt.setPlaybackQuality(ytQuality)
+
     getTime: (cb) ->
         if @yt and @yt.ready
             cb(@yt.getCurrentTime())

templates/useroptions.jade

@@ -83,12 +83,12 @@ mixin us-playback
         .col-sm-8
           select#us-default-quality.form-control
             option(value="auto") Auto
-            option(value="small") 240p
+            option(value="240") 240p
-            option(value="medium") 360p
+            option(value="360") 360p
-            option(value="large") 480p
+            option(value="480") 480p
-            option(value="hd720") 720p
+            option(value="720") 720p
-            option(value="hd1080") 1080p
+            option(value="1080") 1080p
-            option(value="highres") Highest Available
+            option(value="best") Highest Available
 
 mixin us-chat
   #us-chat.tab-pane

www/js/data.js

@@ -111,7 +111,7 @@ var USEROPTS = {
     ignore_channeljs     : getOrDefault("ignore_channeljs", false),
     sort_rank            : getOrDefault("sort_rank", true),
     sort_afk             : getOrDefault("sort_afk", false),
-    default_quality      : getOrDefault("default_quality", ""),
+    default_quality      : getOrDefault("default_quality", "auto"),
     boop                 : getOrDefault("boop", "never"),
     secure_connection    : getOrDefault("secure_connection", false),
     show_shadowchat      : getOrDefault("show_shadowchat", false)
@@ -137,6 +137,22 @@ if (["never", "onlyping", "always"].indexOf(USEROPTS.boop) === -1) {
     USEROPTS.boop = "onlyping";
 }
 
+// As of 3.8, preferred quality names are different
+(function () {
+    var fix = {
+        small: "240",
+        medium: "360",
+        large: "480",
+        hd720: "720",
+        hd1080: "1080",
+        highres: "best"
+    };
+
+    if (fix.hasOwnProperty(USEROPTS.default_quality)) {
+        USEROPTS.default_quality = fix[USEROPTS.default_quality];
+    }
+})();
+
 var VOLUME = parseFloat(getOrDefault("volume", 1));
 
 var NO_WEBSOCKETS = USEROPTS.altsocket;

www/js/player-new.js

@@ -162,23 +162,25 @@
       this.pauseSeekRaceCondition = false;
       waitUntilDefined(window, 'YT', (function(_this) {
         return function() {
-          var wmode;
+          return waitUntilDefined(YT, 'Player', function() {
-          removeOld();
+            var wmode;
-          wmode = USEROPTS.wmode_transparent ? 'transparent' : 'opaque';
+            removeOld();
-          return _this.yt = new YT.Player('ytapiplayer', {
+            wmode = USEROPTS.wmode_transparent ? 'transparent' : 'opaque';
-            videoId: data.id,
+            return _this.yt = new YT.Player('ytapiplayer', {
-            playerVars: {
+              videoId: data.id,
-              autohide: 1,
+              playerVars: {
-              autoplay: 1,
+                autohide: 1,
-              controls: 1,
+                autoplay: 1,
-              iv_load_policy: 3,
+                controls: 1,
-              rel: 0,
+                iv_load_policy: 3,
-              wmode: wmode
+                rel: 0,
-            },
+                wmode: wmode
-            events: {
+              },
-              onReady: _this.onReady.bind(_this),
+              events: {
-              onStateChange: _this.onStateChange.bind(_this)
+                onReady: _this.onReady.bind(_this),
-            }
+                onStateChange: _this.onStateChange.bind(_this)
+              }
+            });
           });
         };
       })(this));
@@ -190,7 +192,7 @@
         this.yt.loadVideoById(data.id, data.currentTime);
         this.qualityRaceCondition = true;
         if (USEROPTS.default_quality) {
-          return this.yt.setPlaybackQuality(USEROPTS.default_quality);
+          return this.setQuality(USEROPTS.default_quality);
         }
       } else {
         return console.error('WTF?  YouTubePlayer::load() called but yt is not ready');
@@ -206,7 +208,7 @@
       if (this.qualityRaceCondition) {
         this.qualityRaceCondition = false;
         if (USEROPTS.default_quality) {
-          this.yt.setPlaybackQuality(USEROPTS.default_quality);
+          this.setQuality(USEROPTS.default_quality);
         }
       }
       if (ev.data === YT.PlayerState.PLAYING && this.pauseSeekRaceCondition) {
@@ -253,6 +255,34 @@
       }
     };
 
+    YouTubePlayer.prototype.setQuality = function(quality) {
+      var ytQuality;
+      if (!this.yt || !this.yt.ready) {
+        return;
+      }
+      ytQuality = (function() {
+        switch (String(quality)) {
+          case "240":
+            return "small";
+          case "360":
+            return "medium";
+          case "480":
+            return "large";
+          case "720":
+            return "hd720";
+          case "1080":
+            return "hd1080";
+          case "best":
+            return "highres";
+          default:
+            return "auto";
+        }
+      })();
+      if (ytQuality !== "auto") {
+        return this.yt.setPlaybackQuality(ytQuality);
+      }
+    };
+
     YouTubePlayer.prototype.getTime = function(cb) {
       if (this.yt && this.yt.ready) {
         return cb(this.yt.getCurrentTime());

www/js/ui.js

@@ -296,8 +296,8 @@ $("#userpl_save").click(function() {
 /* video controls */
 
 $("#mediarefresh").click(function() {
-    PLAYER.type = "";
+    PLAYER.mediaType = "";
-    PLAYER.id = "";
+    PLAYER.mediaId = "";
     // playerReady triggers the server to send a changeMedia.
     // the changeMedia handler then reloads the player
     socket.emit("playerReady");