From 29eb390f1fd4a377e0e252a87db797e07f19d669 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sun, 26 May 2013 15:58:37 -0400
Subject: [PATCH] re-implemented quality menu

---
 .../css/images/media/qualityflyout.png        | Bin 0 -> 1301 bytes
 dashboard-ui/css/images/media/selected.png    | Bin 0 -> 1216 bytes
 dashboard-ui/css/site.css                     |   6 +-
 dashboard-ui/scripts/mediaplayer.js           | 139 ++++++++++++++----
 4 files changed, 112 insertions(+), 33 deletions(-)
 create mode 100644 dashboard-ui/css/images/media/qualityflyout.png
 create mode 100644 dashboard-ui/css/images/media/selected.png

diff --git a/dashboard-ui/css/images/media/qualityflyout.png b/dashboard-ui/css/images/media/qualityflyout.png
new file mode 100644
index 0000000000000000000000000000000000000000..da7ab544c90830290e7ab13cf9e703e0fc86f2e6
GIT binary patch
literal 1301
zcmV+w1?u{VP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1gc3yK~#8N?U_wz
zTvZf+C&?fQj1tQTozRI9YAB(QW-<v`D5;<j5kawmy0Qxeu@+odB@5RoEvUE<e-?#O
zDyYzfi$aSS2pIE+!4e8aF<_E`1PMBr5cA`A<{h)h%$xV#y>Ffi?+1_bGjHC!d+xdS
zo_i<da5x+ehr{7;I2?}uAx$b1p|7v+cyn{}+5P?f2Qj;vnwq+hY3$#Scd>uwnt|JL
ze-b1bfI^}0It{#}rXMr2v$F%LH=JgbNzt#e9>-NCLec>^p|T$B{r&w})f-M?0Vo!W
zClO%+kYboTu4=<+QEAQa@Nhbt&A!pm(Xqa|y1K6J)WE>NQMklJ_X!QVN8Lf3$>nk<
z^7;Jt%gf7usILOqahl&K^BaGu%Zk`0L0;@V#A}|Fnxw%W)8M1%Z*sL)yb<9UTRh`k
zR*oCHySvZfI){A>d6S9q$;wTZ#1a4+e+Kb|XC=lML3l@XW2^%}<7He=b7d-ygdjV1
z$cD!V!i2hvu$}~Yk+%_vHeR6dQb2vGrZH9-(A(SF)zZ@Ple~<&qOd^&W{_pBqK<77
zBn!S(Ju+4qkWQ!18#MmP&d$z5y!8EZb8}B{J<FBH{{YuzN$tvAA>sb>sv2RO0W5p1
z<#KryHPj5xi<S^C(b%s&Pi-idhY0Fb)KC?n1dJ@qPft(F^CM%N0c&e(G6p4u!xGqd
zfqN!d_C~{I0>RoMqfCd7c_Bmqw!6E#uWxT}--kKmd40J;!-6(J2du2Dlqh!O-A;QR
zUls{~45J^^j!ay2z{`k_JgXW>(W$8^+46=)hS;CrH^-16w<(TB=jZ1))MZ30djVd?
zw+HxaJ!<2H@$vC3#2wG7$u--?3$X-%Uh*A-d^V}73H9cfSaytY1;C^Z2!!WKjZl-g
zelxBi;JXCzS<nRO3*RlOTE*VpUgTj_i&z2xPpPbep32IWSj|ZA-BYSoA<tFS3aj&g
zo}QjeXJ_YEsOLOSZRp7q`}bRFhJuylRm3x%RSf|c$>nmbEXCtXOG|s|j*Rg#I5;?X
zi~{5qFA{jlLja_xc~puV&r=`SV^C)Qh#F>-b#rrbb97;0!FRr>hw%`g4Bnvep(-%$
zOLJXiDEOxIzi8v-Y$5CpbEK`U?Z2r6Nx@DU<~vax;s_Jhi&Ei{wiAcbR*%$Pp$wKG
zCI1(MMNWr4P(3nMm7pASlHQW4k>ERW)O81084~D2=qHh_l^Y_!_nr>3$MD0t6lSve
z4q?31S+Yp)KdibD*2^GieSuzxw1<z8iz<z=J{B*PN-N9-vS}GnS5jQ2_ditKm{<xS
z#^C#8!41(R8$>4{&tpbD;W-T7{~R%fyz6-?zKKjGGp42$v22G0male}ud}FM(lZBt
zjOahY(o<10L?+0KJnP`pm-*%q8vg>@>$gl#fDRK|0D@q}kiW&Rt63NBlhdQm)NCk;
z1wbei3V$;+f_8Cbdi`G28%|uCp|C8ftjEDvPl7}PK<@_zfb=&$-!s8_8H@sD@Foph
zClJ4@>j<{|#q|qv4*MJQYwR3<^*(ku91e%W;cz${4u>OtQmKCcm3_7n4-Qe+00000
LNkvXXu0mjfFVth2

literal 0
HcmV?d00001

diff --git a/dashboard-ui/css/images/media/selected.png b/dashboard-ui/css/images/media/selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..00d65f8fc328804a4f01436327820886589d00de
GIT binary patch
literal 1216
zcmV;x1V8(UP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1XW2yK~!i%?U_GF
z8*voJ?=GQLNQ$FlhYlhZ&A-}0K?Dn3q!jGnP*6~)gHWMD1C<t9=+dFkf<gt|I@qDm
z4&77~{FB5eh&XiU;LyQANJ@ev`StrQ&or0Z<?iz5OrRf7^B&QB-|zR{@4eqCwK_8Y
zYzcNkq0TGk=WT4Nv_t@_0|V}B$>duh#8XL@-RzcNZ#I1Z(LkUJN<Tw*AG=h9Bz<pB
zrAC`NfT-U;h9C0~uSpvO^d-2r_lRC9s-ww3%CyA-fh7p1FO7Ign}pXp%4YM`K+Na6
zA!K=_G-U{gKW<N_Lp?`FNp>~Y4(#}RL5Sbb6A$$#IhSj&SUk}*0YLnHMNw8EzLQ-A
zP_Sq4-|LS=ezU7UQv^W8>XPMe$Y&3`3P5}k{^4LOcFZmfmmWYQ5O{^vrD83d?*)X&
z;QKhlZ{{84Tv`!RbMhn-^Rg^Yu&WHL{&Xl7`^cs)ml6Pp_a+k5oJQDHju3Bf*3YqJ
zh~oiR5f4$zfmm#u&5Af$0~S~Q@M<bG&6X*S1z<%yoj5r~87)2QE8$20mR26fLQLO^
zMi1GvM8gBHEFO7}qFrXwG7SyDs(8D3Ura*-fcOt);?+(o#6vrIUyLSz-C%I&u)Djg
zomT@cBF`cI37dvsc$*Bw<3HK7joJrzt6$;+U(j~Cve{wZ!ND)}9aVtwU<7}7g-v6G
zSU}!Su~il74p2*1#S^mJlXbbau!470+a~;bOL?mTLhR#WGQ(EY$PvGP0`tfxw*QeI
zq$cg0415`(dA@8UE{5`6$>n^tq|OBjKI{R%)<V-ErbN2hA;q+JQXS&Gy&XA>#Af1|
za6QBm3UYNEt9`<D8Cb0`)W;UBF1vI=+O1$GyVx{Fh&8hb(+&z|?NhXG3W8EbA6)V9
zo;VdJdo=9&{m<~8AvO)6)WHE^X-Kn*dI}M^6}^Utd?8nWI;N7z%;1zdBYP(l>Vv2V
zez*KWQUU@no$u{Z2!M`KoJOli1M|~|F4&4Pi-KK4F>c_GR7@`wqz(>*LAL5fApin}
zcs=8G$KmW?S7n4qW93Z?oZg3Sd$V4JTa2a?Q}cp&>p5ygJjhAXTqDF2WwQ{9`YTp!
zfz6sh-f#c$df&5IcXWq2wL_v)vROTpI@r;{^>yPDu10hNzz3#Lq>t&?V^>vB>KHxG
zsTaBd5PUP5&0F?qbn0B7Ife8<f1n4gl`kZvpebgBxYHkxN7>Ub40oV_EKfm@;izH2
zq7&i?(*S7Hz-msiX^Ify6rDNDX2UVx0f5!~0cBQ4fbhkb;RKcfAaJzK(mxp3G$NYx
zdTl>hs0Gs^F2;0lL*ZiH*=EZTEbjo(ABpTkyzT>6?9QUo;t5*;5DAax9sQ$?O%<H^
zXP9CgE8Jpi2S8(iJDV--(qTHS__d?h4uDXnRv|8)q(ze+&mzBWEvQT5>o%LM2i@ZM
e<$tO}lKuh~P{H{I<q+lo0000<MNUMnLSTX&vn_%E

literal 0
HcmV?d00001

diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 4c0b2ba12a..3b8781db36 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -910,7 +910,11 @@ input[type="range"]::-ms-fill-upper {
     }
 
 .selectedMediaFlyoutOption {
-    background-color: #e4F4FF;
+    background-color: #d9F4FF;
+    background-image: url(images/media/selected.png);
+    background-repeat: no-repeat;
+    background-position: right top;
+    background-size: 16px 16px;
 }
 
 .mediaFlyoutOptionImage {
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index 56e2200bda..619436d71e 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -38,7 +38,7 @@
         }
 
         function isFullScreen() {
-            return document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen ? true : false;
+            return document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen || document.mozFullScreen ? true : false;
         }
 
         $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
@@ -76,7 +76,7 @@
 
         function onPlaybackStopped() {
 
-            currentTimeElement.hide();
+            currentTimeElement.empty();
 
             var endTime = this.currentTime;
 
@@ -141,6 +141,12 @@
                 if (params.SubtitleStreamIndex != null) {
                     currentSrc = replaceQueryString(currentSrc, 'SubtitleStreamIndex', params.SubtitleStreamIndex);
                 }
+                if (params.MaxWidth != null) {
+                    currentSrc = replaceQueryString(currentSrc, 'MaxWidth', params.MaxWidth);
+                }
+                if (params.VideoBitrate != null) {
+                    currentSrc = replaceQueryString(currentSrc, 'VideoBitrate', params.VideoBitrate);
+                }
 
                 clearProgressInterval();
 
@@ -246,6 +252,19 @@
 
                 hideFlyout($('#subtitleFlyout'));
             });
+
+            $('#qualityFlyout').on('click', '.mediaFlyoutOption', function () {
+
+                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
+
+                    var maxWidth = parseInt(this.getAttribute('data-maxwidth'));
+                    var videoBitrate = parseInt(this.getAttribute('data-videobitrate'));
+
+                    changeStream(getCurrentTicks(), { MaxWidth: maxWidth, VideoBitrate: videoBitrate });
+                }
+
+                hideFlyout($('#qualityFlyout'));
+            });
         });
 
         function endsWith(text, pattern) {
@@ -392,8 +411,6 @@
                 var duration = this.duration;
                 isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
 
-                currentTimeElement.show();
-
                 audioElement.off("play.once");
 
                 ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
@@ -434,19 +451,32 @@
 
             // Account for screen rotation. Use the larger dimension as the width.
             var screenWidth = Math.max(screen.height, screen.width);
-            var screenHeight = Math.min(screen.height, screen.width);
 
             var baseParams = {
                 audioChannels: 2,
                 audioBitrate: 128000,
-                videoBitrate: 1500000,
-                maxWidth: screenWidth,
-                maxHeight: screenHeight,
+                videoBitrate: 2000000,
+                maxWidth: Math.min(screenWidth, 1280),
                 StartTimeTicks: 0,
                 SubtitleStreamIndex: getInitialSubtitleStreamIndex(item.MediaStreams, user),
                 AudioStreamIndex: getInitialAudioStreamIndex(item.MediaStreams, user)
             };
 
+            var videoStream = item.MediaStreams.filter(function (i) {
+                return i.Type == "Video";
+            })[0];
+
+            if (videoStream && videoStream.Width) {
+
+                if (videoStream.Width >= 1280) {
+                    baseParams.videoBitrate = 2000000;
+                }
+
+                else if (videoStream.Width >= 720) {
+                    baseParams.videoBitrate = 400000;
+                }
+            }
+
             if (startPosition) {
                 baseParams.StartTimeTicks = startPosition;
             }
@@ -454,31 +484,20 @@
             var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
                 videoCodec: 'h264',
                 audioCodec: 'aac',
-                profile: 'high',
-                videoBitrate: 2500000
-            }));
-
-            var tsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ts', $.extend({}, baseParams, {
-                videoCodec: 'h264',
-                audioCodec: 'aac',
-                profile: 'high',
-                videoBitrate: 2500000
+                profile: 'baseline',
+                level: 3
             }));
 
             var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
                 videoCodec: 'vpx',
-                audioCodec: 'Vorbis',
-                videoBitrate: 2500000
+                audioCodec: 'Vorbis'
             }));
 
             var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
                 videoCodec: 'h264',
-                audioCodec: 'aac'
-            }));
-
-            var ogvVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.ogv', $.extend({}, baseParams, {
-                videoCodec: 'theora',
-                audioCodec: 'Vorbis'
+                audioCodec: 'aac',
+                profile: 'baseline',
+                level: 3
             }));
 
             var html = '';
@@ -488,16 +507,14 @@
 
             // Can't autoplay in these browsers so we need to use the full controls
             if ($.browser.msie || $.browser.android || $.browser.iphone || $.browser.ipad) {
-                html += '<video class="itemVideo" preload="auto" autoplay controls>';
+                html += '<video class="itemVideo" autoplay controls preload="auto">';
             } else {
-                html += '<video class="itemVideo" preload="auto" autoplay>';
+                html += '<video class="itemVideo" autoplay preload="auto">';
             }
 
             html += '<source type="application/x-mpegURL" src="' + hlsVideoUrl + '" />';
             html += '<source type="video/webm" src="' + webmVideoUrl + '" />';
             html += '<source type="video/mp4" src="' + mp4VideoUrl + '" />';
-            html += '<source type="video/mp2t" src="' + tsVideoUrl + '" />';
-            html += '<source type="video/ogg" src="' + ogvVideoUrl + '" />';
             html += '</video';
 
             var nowPlayingBar = $('#nowPlayingBar').show();
@@ -558,8 +575,6 @@
                 var duration = this.duration;
                 isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;
 
-                currentTimeElement.show();
-
                 videoElement.off("play.once");
 
                 ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id);
@@ -1136,7 +1151,7 @@
                     html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
                 }
 
-                html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';
+                html += '<img class="mediaFlyoutOptionImage" src="css/images/media/subtitleflyout.png" />';
 
                 html += '<div class="mediaFlyoutOptionContent">';
 
@@ -1189,6 +1204,65 @@
             return html;
         }
 
+        function getQualityFlyoutHtml(item) {
+
+            var html = '';
+
+            var videoStream = item.MediaStreams.filter(function (i) {
+                return i.Type == "Video";
+            })[0];
+
+            var currentVideoBitrate = getParameterByName('videoBitrate', currentMediaElement.currentSrc) || getParameterByName('VideoBitrate', currentMediaElement.currentSrc);
+
+            var maxAllowedWidth = Math.max(screen.height, screen.width);
+
+            var options = [];
+
+            // We have media info
+            if (videoStream && videoStream.Width) {
+
+                maxAllowedWidth = Math.min(videoStream.Width, maxAllowedWidth);
+            }
+
+            // Some 1080- videos are reported as 1912?
+            if (maxAllowedWidth >= 1910) {
+                options.push({ name: '1080p+', maxWidth: 1920, videoBitrate: 4000000 });
+                options.push({ name: '1080p', maxWidth: 1920, videoBitrate: 2500000 });
+            }
+
+            if (maxAllowedWidth >= 1280) {
+                options.push({ name: '720p+', maxWidth: 1280, videoBitrate: 2000000 });
+                options.push({ name: '720p', maxWidth: 1280, videoBitrate: 1000000 });
+            }
+
+            if (maxAllowedWidth >= 480) {
+                options.push({ name: '480p', maxWidth: 720, videoBitrate: 400000 });
+            }
+
+            for (var i = 0, length = options.length; i < length; i++) {
+
+                var option = options[i];
+
+                var cssClass = "mediaFlyoutOption";
+                
+                if (option.videoBitrate == currentVideoBitrate) {
+                    cssClass += " selectedMediaFlyoutOption";
+                }
+
+                html += '<div data-maxwidth="' + option.maxWidth + '" data-videobitrate="' + option.videoBitrate + '" class="' + cssClass + '">';
+
+                html += '<div class="mediaFlyoutOptionContent">';
+
+                html += '<div class="mediaFlyoutOptionName" style="padding:.5em;">' + option.name + '</div>';
+
+                html += "</div>";
+
+                html += "</div>";
+            }
+
+            return html;
+        }
+
         self.showAudioTracksFlyout = function () {
 
             var flyout = $('#audioTracksFlyout');
@@ -1226,6 +1300,7 @@
 
                 showFlyout(flyout, '#qualityButton');
 
+                flyout.html(getQualityFlyoutHtml(currentItem)).scrollTop(0);
             }
         };