From ec45985eb08da65d7f96c8ab690d34b8c53a6ada Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 17 Sep 2015 21:51:22 -0400
Subject: [PATCH] update series timers

---
 .../imagedownloader/imagedownloader.js        |  5 ++-
 .../imagedownloader.template.html             | 12 ++----
 .../components/imageeditor/imageeditor.js     | 27 +++++++-----
 .../imageeditor/imageeditor.template.html     |  8 +++-
 .../components/imageuploader/imageuploader.js |  3 ++
 .../subtitleeditor/subtitleeditor.js          |  3 ++
 dashboard-ui/css/metadataeditor.css           | 41 ++++++++++++++++---
 dashboard-ui/scripts/mediacontroller.js       |  3 +-
 8 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/dashboard-ui/components/imagedownloader/imagedownloader.js b/dashboard-ui/components/imagedownloader/imagedownloader.js
index 95ae7ff207..a66b7f3642 100644
--- a/dashboard-ui/components/imagedownloader/imagedownloader.js
+++ b/dashboard-ui/components/imagedownloader/imagedownloader.js
@@ -6,7 +6,7 @@
     var hasChanges = false;
 
     // These images can be large and we're seeing memory problems in safari
-    var browsableImagePageSize = $.browser.safari ? 6 : 12;
+    var browsableImagePageSize = $.browser.safari ? 6 : 10;
 
     var browsableImageStartIndex = 0;
     var browsableImageType = 'Primary';
@@ -275,10 +275,13 @@
             dlg.setAttribute('role', 'alertdialog');
             // without this safari will scroll the background instead of the dialog contents
             dlg.setAttribute('modal', 'modal');
+            // seeing max call stack size exceeded in the debugger with this
+            dlg.setAttribute('noAutoFocus', 'noAutoFocus');
             dlg.entryAnimation = 'scale-up-animation';
             dlg.exitAnimation = 'fade-out-animation';
             dlg.classList.add('fullscreen-editor-paper-dialog');
             dlg.classList.add('ui-body-b');
+            dlg.classList.add('smoothScrollY');
 
             var html = '';
             html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/components/imagedownloader/imagedownloader.template.html b/dashboard-ui/components/imagedownloader/imagedownloader.template.html
index 33cbfd589c..ee29a300d1 100644
--- a/dashboard-ui/components/imagedownloader/imagedownloader.template.html
+++ b/dashboard-ui/components/imagedownloader/imagedownloader.template.html
@@ -1,17 +1,13 @@
 <div style="text-align: center;">
     <div style="margin: 0; display: inline-block;">
-        <label for="selectImageProvider">${LabelSource}</label>
-    </div>
-    <div style="margin: 0; display: inline-block;">
-        <select id="selectImageProvider" style="padding-left:.5em;padding-right:0;">
+        <label for="selectImageProvider" style="display: inline-block;">${LabelSource}</label>
+        <select id="selectImageProvider" style="padding-left:.5em;padding-right:0;display: inline-block;width:auto!important;">
             <option value="">${OptionAll}</option>
         </select>
     </div>
     <div style="margin-left:.5em; display: inline-block;">
-        <label for="selectBrowsableImageType">${LabelImage}</label>
-    </div>
-    <div style="display: inline-block;">
-        <select id="selectBrowsableImageType" style="padding-left:.5em;padding-right:0;">
+        <label for="selectBrowsableImageType" style="display: inline-block;">${LabelImage}</label>
+        <select id="selectBrowsableImageType" style="padding-left:.5em;padding-right:0;display: inline-block;width:auto!important;">
             <option value="Primary">${OptionPrimary}</option>
             <option value="Art">${OptionArt}</option>
             <option value="Backdrop">${OptionBackdrop}</option>
diff --git a/dashboard-ui/components/imageeditor/imageeditor.js b/dashboard-ui/components/imageeditor/imageeditor.js
index 86bd396493..0b1d5437ee 100644
--- a/dashboard-ui/components/imageeditor/imageeditor.js
+++ b/dashboard-ui/components/imageeditor/imageeditor.js
@@ -56,17 +56,18 @@
             var image = images[i];
 
             html += '<div class="editorTile imageEditorTile">';
+            html += '<div class="editorTileInner">';
+
+            var height = 150;
+
+            html += '<div style="height:' + height + 'px;vertical-align:top;background-repeat:no-repeat;background-position:center bottom;background-size:contain;background-image:url(\'' + LibraryBrowser.getImageUrl(currentItem, image.ImageType, image.ImageIndex, { height: height }) + '\');"></div>';
+
+            html += '<div class="editorTileFooter">';
 
             if (image.ImageType !== "Backdrop" && image.ImageType !== "Screenshot") {
                 html += '<h3>' + image.ImageType + '</h3>';
             }
 
-            var height = 150;
-
-            html += '<div style="height:' + height + 'px;vertical-align:top;background-repeat:no-repeat;background-position:center center;background-size:contain;background-image:url(\'' + LibraryBrowser.getImageUrl(currentItem, image.ImageType, image.ImageIndex, { height: height }) + '\');"></div>';
-
-            html += '<div class="editorTileInner">';
-
             if (image.Width && image.Height) {
                 html += '<p>' + image.Width + ' X ' + image.Height + '</p>';
             } else {
@@ -89,9 +90,10 @@
                     html += '<paper-icon-button icon="chevron-right" disabled title="' + Globalize.translate('ButtonMoveRight') + '"></paper-icon-button>';
                 }
             }
-
-            if (imageProviders.length) {
-                html += '<paper-icon-button icon="search" data-imagetype="' + image.ImageType + '" class="btnSearchImages" title="' + Globalize.translate('ButtonBrowseOnlineImages') + '"></paper-icon-button>';
+            else {
+                if (imageProviders.length) {
+                    html += '<paper-icon-button icon="search" data-imagetype="' + image.ImageType + '" class="btnSearchImages" title="' + Globalize.translate('ButtonBrowseOnlineImages') + '"></paper-icon-button>';
+                }
             }
 
             html += '<paper-icon-button icon="delete" data-imagetype="' + image.ImageType + '" data-index="' + (image.ImageIndex != null ? image.ImageIndex : "null") + '" class="btnDeleteImage" title="' + Globalize.translate('Delete') + '"></paper-icon-button>';
@@ -99,7 +101,7 @@
             html += '</div>';
 
             html += '</div>';
-
+            html += '</div>';
             html += '</div>';
         }
 
@@ -210,7 +212,7 @@
         });
 
         $('.btnBrowseAllImages', page).on('click', function () {
-            showImageDownloader(page, 'Primary');
+            showImageDownloader(page, this.getAttribute('data-imagetype') || 'Primary');
         });
     }
 
@@ -233,10 +235,13 @@
                 dlg.setAttribute('role', 'alertdialog');
                 // without this safari will scroll the background instead of the dialog contents
                 dlg.setAttribute('modal', 'modal');
+                // seeing max call stack size exceeded in the debugger with this
+                dlg.setAttribute('noAutoFocus', 'noAutoFocus');
                 dlg.entryAnimation = 'scale-up-animation';
                 dlg.exitAnimation = 'fade-out-animation';
                 dlg.classList.add('fullscreen-editor-paper-dialog');
                 dlg.classList.add('ui-body-b');
+                dlg.classList.add('smoothScrollY');
 
                 var html = '';
                 html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/components/imageeditor/imageeditor.template.html b/dashboard-ui/components/imageeditor/imageeditor.template.html
index f61fac363d..8073ad58fa 100644
--- a/dashboard-ui/components/imageeditor/imageeditor.template.html
+++ b/dashboard-ui/components/imageeditor/imageeditor.template.html
@@ -12,7 +12,7 @@
 <div id="backdropsContainer" style="display: none;">
     <div>
         <h1 style="display:inline-block;vertical-align:middle;">${HeaderBackdrops}</h1>
-        <paper-fab icon="search" class="btnBrowseAllImages mini subdued" style="vertical-align:middle;margin-left:1em;"></paper-fab>
+        <paper-fab icon="search" class="btnBrowseAllImages mini subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Backdrop"></paper-fab>
         <paper-fab icon="add" class="btnOpenUploadMenu mini subdued" style="vertical-align:middle;margin-left:.25em;"></paper-fab>
     </div>
     <div id="backdrops">
@@ -21,7 +21,11 @@
 </div>
 
 <div id="screenshotsContainer" style="display: none;">
-    <h1>${Screenshots}</h1>
+    <div>
+        <h1 style="display:inline-block;vertical-align:middle;">${Screenshots}</h1>
+        <paper-fab icon="search" class="btnBrowseAllImages mini subdued" style="vertical-align:middle;margin-left:1em;" data-imagetype="Screenshot"></paper-fab>
+        <paper-fab icon="add" class="btnOpenUploadMenu mini subdued" style="vertical-align:middle;margin-left:.25em;"></paper-fab>
+    </div>
     <div id="screenshots">
     </div>
 </div>
\ No newline at end of file
diff --git a/dashboard-ui/components/imageuploader/imageuploader.js b/dashboard-ui/components/imageuploader/imageuploader.js
index 7a069a76b0..0b423c316d 100644
--- a/dashboard-ui/components/imageuploader/imageuploader.js
+++ b/dashboard-ui/components/imageuploader/imageuploader.js
@@ -139,10 +139,13 @@
             dlg.setAttribute('role', 'alertdialog');
             // without this safari will scroll the background instead of the dialog contents
             dlg.setAttribute('modal', 'modal');
+            // seeing max call stack size exceeded in the debugger with this
+            dlg.setAttribute('noAutoFocus', 'noAutoFocus');
             dlg.entryAnimation = 'scale-up-animation';
             dlg.exitAnimation = 'fade-out-animation';
             dlg.classList.add('fullscreen-editor-paper-dialog');
             dlg.classList.add('ui-body-b');
+            dlg.classList.add('smoothScrollY');
 
             var html = '';
             html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/components/subtitleeditor/subtitleeditor.js b/dashboard-ui/components/subtitleeditor/subtitleeditor.js
index 8642a70d8d..7975505cb8 100644
--- a/dashboard-ui/components/subtitleeditor/subtitleeditor.js
+++ b/dashboard-ui/components/subtitleeditor/subtitleeditor.js
@@ -341,10 +341,13 @@
                 dlg.setAttribute('role', 'alertdialog');
                 // without this safari will scroll the background instead of the dialog contents
                 dlg.setAttribute('modal', 'modal');
+                // seeing max call stack size exceeded in the debugger with this
+                dlg.setAttribute('noAutoFocus', 'noAutoFocus');
                 dlg.entryAnimation = 'scale-up-animation';
                 dlg.exitAnimation = 'fade-out-animation';
                 dlg.classList.add('fullscreen-editor-paper-dialog');
                 dlg.classList.add('ui-body-b');
+                dlg.classList.add('smoothScrollY');
 
                 var html = '';
                 html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css
index 02d282cc92..432731494a 100644
--- a/dashboard-ui/css/metadataeditor.css
+++ b/dashboard-ui/css/metadataeditor.css
@@ -197,29 +197,31 @@
 
 .editorTile {
     display: inline-block;
-    margin: .5em;
     text-align: center;
     vertical-align: middle;
 }
 
+.editorTileInner {
+    margin: 1em .5em;
+}
+
 .imageEditorTile {
-    width: 256px;
-    background-color: #282828;
+    width: 100%;
     padding: 0;
 }
 
 .editorTile h3 {
-    text-transform: uppercase;
     text-align: center;
-    color: #ddd;
+    margin: .5em 0 .7em;
 }
 
 .editorTile p {
     margin: .5em 0;
 }
 
-.editorTileInner {
+.editorTileFooter {
     padding: .5em;
+    background-color: #282828;
 }
 
 .editorTile .ui-field-contain {
@@ -259,6 +261,10 @@
     .subtitleViewerContent {
         width: 400px;
     }
+
+    .imageEditorTile {
+        width: 50%;
+    }
 }
 
 @media all and (min-width: 600px) {
@@ -281,6 +287,10 @@
     .subtitleViewerContent {
         width: 600px;
     }
+
+    .imageEditorTile {
+        width: 33.3%;
+    }
 }
 
 @media all and (min-width: 800px) {
@@ -317,6 +327,10 @@
     .popupIdentify {
         width: 800px;
     }
+
+    .imageEditorTile {
+        width: 25%;
+    }
 }
 
 @media all and (min-width: 1100px) {
@@ -331,6 +345,17 @@
     .popupIdentify {
         width: 1000px;
     }
+
+    .imageEditorTile {
+        width: 20%;
+    }
+}
+
+@media all and (min-width: 1400px) {
+
+    .imageEditorTile {
+        width: 16.666666666666666666666666666667%;
+    }
 }
 
 @media all and (min-width: 1800px) {
@@ -342,6 +367,10 @@
     .editPageInnerContent {
         width: 72.5%;
     }
+
+    .imageEditorTile {
+        width: 14.285714285714285714285714285714%;
+    }
 }
 
 .popupIdentify form, .identificationSearchResults {
diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js
index 9874e6ef94..8f5574fab4 100644
--- a/dashboard-ui/scripts/mediacontroller.js
+++ b/dashboard-ui/scripts/mediacontroller.js
@@ -589,7 +589,8 @@
         self.currentPlaylistIndex = function (i) {
 
             if (i == null) {
-                return currentPlayer.currentPlaylistIndex();
+                // TODO: Get this implemented in all of the players
+                return currentPlayer.currentPlaylistIndex ? currentPlayer.currentPlaylistIndex() : -1;
             }
 
             currentPlayer.currentPlaylistIndex(i);