From cd0260b41e4062933d61de9359516b78f1e22e4c Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 25 May 2013 21:53:34 -0400
Subject: [PATCH] restored chapter flyout

---
 .../css/images/media/chapterflyout.png        | Bin 0 -> 990 bytes
 dashboard-ui/css/site.css                     |  52 ++++++++
 dashboard-ui/scripts/mediaplayer.js           | 122 ++++++++++++++----
 dashboard-ui/scripts/site.js                  |   2 +-
 4 files changed, 153 insertions(+), 23 deletions(-)
 create mode 100644 dashboard-ui/css/images/media/chapterflyout.png

diff --git a/dashboard-ui/css/images/media/chapterflyout.png b/dashboard-ui/css/images/media/chapterflyout.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e71abe95cb1a8e52395592d1543ceb1f4b25e80
GIT binary patch
literal 990
zcmV<410np0P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D19M44K~#8N?U+wU
z(_t9Lw>eN@%7P9aJQ#Qo3H+DhLD0ZRPZe|t47^4Jd60?@B_1p~WXCA*Vst35Lx+Ne
z2|EaGnjqpqsDp<cIxO5_$kaa1yLUE5m){@V#-0znJkR^*_uHQD`@YZnZUIG66h%=K
zMNt%`1_@eQRrK}soyQDOt{opAH>|I(-!dI8s0smwhlj(NOhy8Z5^yRQ45mY&Q2Oxj
zaGAEYrlzKID=RBmGuR;&D?nFQS6et79wXqZ1UyPp#0GyknN04;nEw9$77>B=sf~?|
zFVg0eiV>i*volg(U*AE1VFJowM<_3B_X))!AX2ohu5L)4q5jDZaYR`K=;`UX#8MuW
zS*9vWe470{Z#tp3xA#85y|mQ=8OARX`0Im%gY@R+<}cgsiZc~JmTWGUYZafs-cY(t
zM-j4|OGKDs+z9P4?6*iH5@)~XY`14lRREG#1IcSpW>|tfIy$<?Ufq>GGI<B>%e1$c
z!9|D&%<y;dd1jC0{o8b$0=^5tvTi3R*~@pS%Ce4_4j{02Hk%#a-rmkgy&wW^loFR2
zrhHB$5?j)L7I+pwl2>D6;}|p5Ky?SZ8;wRY`}_Ov3Fc;g)IUT7GWTuvzMSQT=H})t
zx5t=QTnoVLjbJ28x0{AQAWRu&xyGd;XLpGRX@ZYozal`)Yx437F9JNpJRzuO1ewJD
zK#`?wM38fwecVEyWce7Em4u(k%P%|&K#`fv5NIoQ5BrgA@J_Y@vz#`AD;U=T*yHJ;
ztqPAQt9kd#Ny){?`i}6j0v0fn`C1-X>YU+M#FrzG9Pks7N{_i4g<Bi%xQ<y8zX0z@
zv0W|{k|IJc@eUbR%slUy5@%pwpq0DDV?Ote>2XNNT3=w#Pg^&@`7gJ)(%@GM!Ap`P
z*jdwB1kcPA1wZ(o;N^$VbL$64sI!cb6UY^Q3b44gw)R6Dxuatqh+l$i69cPbf-ip2
zRtxNM(|c=uVb0oOUhz38akyD_BjSW<b%`HIuo5`g5>9cw0#Lpp&T-2hYaQcj4yZ;{
z0BdU&6~Nk>rRD|j@>^h%i_8MYq50>gT<{&_XZZ~G0J)bq#<KvnT5enmpgF+Wn#GST
zQ0^;n8>M_XK$Bo)ph?gzngp$NjOGB%0g9q1ilQirq9}?|odg1Z0q(Je<SDA{1poj5
M07*qoM6N<$f|&%q`v3p{

literal 0
HcmV?d00001

diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index efce771085..509f2aabdf 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -885,6 +885,58 @@ input[type="range"]::-ms-fill-upper {
     z-index: 99999;
     bottom: 55px;
     margin-left: -50px;
+    max-height: 300px;
+    overflow-y: auto;
+    font-size: 13px;
+}
+
+.chaptersFlyout {
+    width: 250px;
+}
+
+.mediaFlyoutOption {
+    display: block;
+    text-decoration: none;
+    color: #000;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+}
+
+    .mediaFlyoutOption:hover, .mediaFlyoutOption:focus {
+        background-color: #eee;
+    }
+
+.selectedMediaFlyoutOption {
+    background-color: #e4F4FF;
+}
+
+.mediaFlyoutOptionImage {
+    display: inline-block;
+    width: 40%;
+    vertical-align: middle;
+}
+
+    .mediaFlyoutOptionImage + .mediaFlyoutOptionContent {
+        vertical-align: top;
+        display: inline-block;
+        width: 60%;
+    }
+
+.mediaFlyoutOptionName {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-left: 5px;
+}
+
+.mediaFlyoutOptionSecondaryText {
+    font-size: 11px;
+    color: #999;
+    margin-top: 3px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-left: 5px;
 }
 
 .installedPluginTitle {
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index 67fa06a81b..fcea5e514e 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -115,19 +115,13 @@
             }
         }
 
-        function onPositionSliderChange() {
-
-            isPositionSliderActive = false;
+        function seek(ticks) {
 
             var element = currentMediaElement;
 
-            var newPercent = parseInt(this.value);
-
-            var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
-
             if (isStaticStream) {
 
-                element.currentTime = newPositionTicks / (1000 * 10000);
+                element.currentTime = ticks / (1000 * 10000);
 
             } else {
 
@@ -135,10 +129,10 @@
 
                 if (currentSrc.toLowerCase().indexOf('starttimeticks') == -1) {
 
-                    currentSrc += "&starttimeticks=" + newPositionTicks;
+                    currentSrc += "&starttimeticks=" + ticks;
 
                 } else {
-                    currentSrc = replaceQueryString(currentSrc, 'starttimeticks', newPositionTicks);
+                    currentSrc = replaceQueryString(currentSrc, 'starttimeticks', ticks);
                 }
 
                 clearProgressInterval();
@@ -150,12 +144,23 @@
                     sendProgressUpdate(currentItem.Id);
 
                 });
-                startTimeTicksOffset = newPositionTicks;
+                startTimeTicksOffset = ticks;
 
                 element.src = currentSrc;
             }
         }
 
+        function onPositionSliderChange() {
+
+            isPositionSliderActive = false;
+
+            var newPercent = parseInt(this.value);
+
+            var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;
+
+            seek(newPositionTicks);
+        }
+
         $(function () {
 
             muteButton = $('#muteButton');
@@ -203,6 +208,15 @@
                     timer = setTimeout(trig, timeout);
                 });
             })(positionSlider, 500);
+
+            $('#chaptersFlyout').on('click', '.mediaFlyoutOption', function () {
+
+                var ticks = parseInt(this.getAttribute('data-positionticks'));
+
+                seek(ticks);
+                
+                hideFlyout($('#chaptersFlyout'));
+            });
         });
 
         function endsWith(text, pattern) {
@@ -740,27 +754,29 @@
 
             var url = "";
 
-            if (item.BackdropImageTags && item.BackdropImageTags.length) {
+            if (imageTags.Primary) {
+
+                url = ApiClient.getImageUrl(item.Id, {
+                    type: "Primary",
+                    height: 80,
+                    tag: item.ImageTags.Primary
+                });
+            }
+            else if (item.BackdropImageTags && item.BackdropImageTags.length) {
 
                 url = ApiClient.getImageUrl(item.Id, {
                     type: "Backdrop",
-                    height: 36,
+                    height: 80,
                     tag: item.BackdropImageTags[0]
                 });
             } else if (imageTags.Thumb) {
 
                 url = ApiClient.getImageUrl(item.Id, {
                     type: "Thumb",
-                    height: 36,
+                    height: 80,
                     tag: item.ImageTags.Thumb
                 });
-            } else if (imageTags.Primary) {
 
-                url = ApiClient.getImageUrl(item.Id, {
-                    type: "Primary",
-                    height: 36,
-                    tag: item.ImageTags.Primary
-                });
             } else {
                 url = "css/images/items/detail/video.png";
             }
@@ -908,6 +924,11 @@
             return currentMediaElement;
         };
 
+        function hideFlyout(flyout) {
+            flyout.hide().empty();
+            $(document.body).off("mousedown.hidesearchhints");
+        }
+
         function showFlyout(flyout, button) {
 
             $(document.body).off("mousedown.mediaflyout").on("mousedown.mediaflyout", function (e) {
@@ -918,8 +939,7 @@
                 var safeItems = button + ',#' + flyoutId;
 
                 if (!elem.is(safeItems) && !elem.parents(safeItems).length) {
-                    flyout.hide();
-                    $(document.body).off("mousedown.hidesearchhints");
+                    hideFlyout(flyout);
                 }
 
             });
@@ -927,6 +947,63 @@
             flyout.show();
         }
 
+        function getChaptersFlyoutHtml(item) {
+
+            var html = '';
+
+            var currentTicks = Math.floor(10000000 * currentMediaElement.currentTime) + startTimeTicksOffset;
+            
+            for (var i = 0, length = item.Chapters.length; i < length; i++) {
+
+                var chapter = item.Chapters[i];
+
+                var isSelected = false;
+
+                if (currentTicks >= chapter.StartPositionTicks) {
+
+                    var nextChapter = item.Chapters[i + 1];
+
+                    isSelected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
+                }
+
+                if (isSelected) {
+                    html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
+                } else {
+                    html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption">';
+                }
+
+                var imgUrl;
+
+                if (chapter.ImageTag) {
+
+                    imgUrl = ApiClient.getImageUrl(item.Id, {
+                        maxwidth: 200,
+                        tag: chapter.ImageTag,
+                        type: "Chapter",
+                        index: i
+                    });
+
+                } else {
+                    imgUrl = "css/images/media/chapterflyout.png";
+                }
+
+                html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';
+
+                html += '<div class="mediaFlyoutOptionContent">';
+
+                var name = chapter.Name || "Chapter " + (i + 1);
+
+                html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
+                html += '<div class="mediaFlyoutOptionSecondaryText">' + DashboardPage.getDisplayText(chapter.StartPositionTicks) + '</div>';
+
+                html += '</div>';
+
+                html += "</div>";
+            }
+
+            return html;
+        }
+
         self.showAudioTracksFlyout = function () {
 
             var flyout = $('#audioTracksFlyout');
@@ -946,6 +1023,7 @@
 
                 showFlyout(flyout, '#chaptersButton');
 
+                flyout.html(getChaptersFlyoutHtml(currentItem));
             }
         };
 
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 02003eaff0..94c61592ac 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1130,7 +1130,7 @@ $(function () {
     footerHtml += '<div class="mediaFlyoutContainer"><div id="subtitleFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>';
 
     footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="imageButton mediaButton chaptersButton" title="Scenes" type="button"><img src="css/images/media/chapters.png" /></button>';
-    footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>';
+    footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout">Coming soon</div></div>';
 
     footerHtml += '</div>';