use shared alpha picker

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.31",
+  "version": "1.4.32",
-  "_release": "1.4.31",
+  "_release": "1.4.32",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.31",
+    "tag": "1.4.32",
-    "commit": "c2a74911a4ce0de5a826fac66213e7309121d475"
+    "commit": "426134a6a3e7ac58f429862eb998e0f20c23e38f"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js

@@ -0,0 +1,258 @@
+define(['focusManager', 'layoutManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light'], function (focusManager, layoutManager) {
+
+    function focus() {
+        var selected = this.querySelector('.selected');
+
+        if (selected) {
+            focusManager.focus(selected);
+        } else {
+            focusManager.autoFocus(this, true);
+        }
+    }
+
+    function getLetterButton(l) {
+        return '<button data-value="' + l + '" class="clearButton alphaPickerButton">' + l + '</button>';
+    }
+
+    function render(element, options) {
+
+        element.classList.add('alphaPicker');
+        element.classList.add('focuscontainer-x');
+
+        var html = '';
+        var letters;
+
+        html += '<div class="alphaPickerRow">';
+        if (options.mode == 'keyboard') {
+            html += '<button data-value=" " is="paper-icon-button-light" class="alphaPickerButton">\
+                <iron-icon icon="space-bar"></iron-icon>\
+            </button>';
+        } else {
+            letters = ['#'];
+            html += letters.map(getLetterButton).join('');
+        }
+
+        letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+        html += letters.map(getLetterButton).join('');
+
+        if (options.mode == 'keyboard') {
+            html += '<button data-value="backspace" is="paper-icon-button-light" class="alphaPickerButton">\
+                <iron-icon icon="backspace"></iron-icon>\
+            </button>';
+            html += '</div>';
+
+            letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+            html += '<div class="alphaPickerRow">';
+            html += '<br/>';
+            html += letters.map(getLetterButton).join('');
+            html += '</div>';
+        } else {
+            html += '</div>';
+        }
+
+        element.innerHTML = html;
+
+        if (options.mode != 'keyboard') {
+            element.querySelector('.alphaPickerButton').classList.add('selected');
+        }
+
+        element.classList.add('focusable');
+        element.focus = focus;
+    }
+
+    function alphaPicker(options) {
+
+        var self = this;
+
+        var element = options.element;
+        var itemsContainer = options.itemsContainer;
+        var itemClass = options.itemClass;
+
+        var itemFocusValue;
+        var itemFocusTimeout;
+
+        function onItemFocusTimeout() {
+            itemFocusTimeout = null;
+            self.value(itemFocusValue);
+        }
+
+        var alphaFocusedElement;
+        var alphaFocusTimeout;
+
+        function onAlphaFocusTimeout() {
+
+            alphaFocusTimeout = null;
+
+            if (document.activeElement == alphaFocusedElement) {
+                var value = alphaFocusedElement.getAttribute('data-value');
+
+                self.value(value, true);
+            }
+        }
+
+        function parentWithClass(elem, className) {
+
+            while (!elem.classList || !elem.classList.contains(className)) {
+                elem = elem.parentNode;
+
+                if (!elem) {
+                    return null;
+                }
+            }
+
+            return elem;
+        }
+
+        function onAlphaPickerClick(e) {
+
+            var alphaPickerButton = parentWithClass(e.target, 'alphaPickerButton');
+
+            if (alphaPickerButton) {
+                var value = alphaPickerButton.getAttribute('data-value');
+
+                element.dispatchEvent(new CustomEvent("alphavalueclicked", {
+                    detail: {
+                        value: value
+                    }
+                }));
+            }
+        }
+
+        function onAlphaPickerFocusIn(e) {
+
+            if (alphaFocusTimeout) {
+                clearTimeout(alphaFocusTimeout);
+                alphaFocusTimeout = null;
+            }
+
+            var alphaPickerButton = parentWithClass(e.target, 'alphaPickerButton');
+
+            if (alphaPickerButton) {
+                alphaFocusedElement = alphaPickerButton;
+                alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 100);
+            }
+        }
+
+        function onItemsFocusIn(e) {
+
+            var item = parentWithClass(e.target, itemClass);
+
+            if (item) {
+                var prefix = item.getAttribute('data-prefix');
+                if (prefix && prefix.length) {
+
+                    itemFocusValue = prefix[0];
+                    if (itemFocusTimeout) {
+                        clearTimeout(itemFocusTimeout);
+                    }
+                    itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
+                }
+            }
+        }
+
+        self.enabled = function (enabled) {
+
+            if (enabled) {
+
+                if (itemsContainer) {
+                    itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+                }
+
+                if (options.mode == 'keyboard') {
+                    element.addEventListener('click', onAlphaPickerClick);
+                }
+
+                if (layoutManager.tv) {
+                    element.addEventListener('focus', onAlphaPickerFocusIn, true);
+                } else {
+                    element.addEventListener('click', onAlphaPickerFocusIn);
+                }
+
+            } else {
+
+                if (itemsContainer) {
+                    itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
+                }
+
+                element.removeEventListener('click', onAlphaPickerClick);
+                element.removeEventListener('focus', onAlphaPickerFocusIn, true);
+                element.removeEventListener('click', onAlphaPickerFocusIn);
+            }
+        };
+
+        self.on = function (name, fn) {
+            element.addEventListener(name, fn);
+        };
+
+        self.off = function (name, fn) {
+            element.removeEventListener(name, fn);
+        };
+
+        self.destroy = function () {
+
+            self.enabled(false);
+            element.classList.remove('focuscontainer-x');
+        };
+
+        self.visible = function (visible) {
+
+            element.style.visibility = visible ? 'visible' : 'hidden';
+        };
+
+        var currentValue;
+        self.value = function (value, applyValue) {
+
+            if (value != null) {
+
+                value = value.toUpperCase();
+                currentValue = value;
+
+                if (options.mode != 'keyboard') {
+                    var selected = element.querySelector('.selected');
+                    var btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
+
+                    if (btn && btn != selected) {
+                        btn.classList.add('selected');
+                    }
+                    if (selected && selected != btn) {
+                        selected.classList.remove('selected');
+                    }
+                }
+
+                if (applyValue) {
+                    element.dispatchEvent(new CustomEvent("alphavaluechanged", {
+                        detail: {
+                            value: value
+                        }
+                    }));
+                }
+            }
+
+            return currentValue;
+        };
+
+        self.values = function () {
+
+            var elems = element.querySelectorAll('.alphaPickerButton');
+            var values = [];
+            for (var i = 0, length = elems.length; i < length; i++) {
+
+                values.push(elems[i].getAttribute('data-value'));
+
+            }
+
+            return values;
+        };
+
+        self.focus = function () {
+            focusManager.autoFocus(element, true);
+        };
+
+        render(element, options);
+
+        self.enabled(true);
+        self.visible(true);
+    }
+
+    return alphaPicker;
+});

dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css

@@ -0,0 +1,52 @@
+.alphaPicker {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.alphaPickerRow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+}
+
+.alphaPicker.vertical .alphaPickerRow {
+    flex-direction: column;
+}
+
+button.alphaPickerButton {
+    min-width: initial;
+    margin: 0;
+    padding: .1em .4em !important;
+    width: auto;
+    border-radius: .1em;
+    font-weight: normal;
+    opacity: .25;
+}
+
+.vertical .alphaPickerButton {
+    padding: .25em .4em !important;
+}
+
+.layout-desktop .alphaPickerButton {
+    opacity: .7;
+}
+
+[is=paper-icon-button-light].alphaPickerButton {
+    opacity: .25;
+    width: 4.4vh;
+    height: 4.4vh;
+}
+
+.alphaPickerButton.selected {
+    color: #000;
+    background-color: #bbb;
+    opacity: 1;
+}
+
+.alphaPickerButton:focus {
+    background-color: #52B54B;
+    opacity: 1;
+    color: #fff;
+}

dashboard-ui/bower_components/emby-webcomponents/guide/guide.css

@@ -4,25 +4,6 @@
     align-items: initial;
 }
 
-    .tvguide ::-webkit-scrollbar {
-        width: 10px;
-        height: 10px;
-    }
-
-    .tvguide ::-webkit-scrollbar-button:start:decrement,
-    .tvguide ::-webkit-scrollbar-button:end:increment {
-        display: none;
-    }
-
-    .tvguide ::-webkit-scrollbar-track-piece {
-        background-color: #3b3b3b;
-    }
-
-    .tvguide ::-webkit-scrollbar-thumb:vertical, .tvguide ::-webkit-scrollbar-thumb:horizontal {
-        -webkit-border-radius: 2px;
-        background: #888 no-repeat center;
-    }
-
 .tvGuideHeader {
     white-space: nowrap;
     width: 100%;
@@ -144,7 +125,7 @@
 
 .currentTimeIndicatorArrowContainer {
     position: absolute;
-    bottom: -1.35vh;
+    bottom: -1.3vh;
     width: 100%;
     color: #52B54B;
     margin-left: .65vh;

dashboard-ui/bower_components/iron-a11y-announcer/.bower.json

@@ -30,14 +30,14 @@
     "web-component-tester": "polymer/web-component-tester#^3.4.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/PolymerElements/iron-a11y-announcer",
+  "homepage": "https://github.com/polymerelements/iron-a11y-announcer",
   "_release": "1.0.4",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.4",
     "commit": "5ce3eb8c4282bb53cd72e348858dc6be6b4c50b9"
   },
-  "_source": "git://github.com/PolymerElements/iron-a11y-announcer.git",
+  "_source": "git://github.com/polymerelements/iron-a11y-announcer.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/iron-a11y-announcer"
+  "_originalSource": "polymerelements/iron-a11y-announcer"
 }

dashboard-ui/bower_components/polymer/.bower.json

@@ -39,6 +39,6 @@
     "commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
   },
   "_source": "git://github.com/Polymer/polymer.git",
-  "_target": "^1.1.0",
+  "_target": "^1.0.0",
   "_originalSource": "Polymer/polymer"
 }

dashboard-ui/channelitems.html

@@ -1,4 +1,4 @@
-<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems,paper-checkbox,scripts/alphapicker" data-backbutton="true" data-menubutton="false">
+<div id="channelItemsPage" data-role="page" class="page libraryPage channelsPage noSecondaryNavPage" data-contextname="${HeaderChannels}" data-require="scripts/channelitems,paper-checkbox" data-backbutton="true" data-menubutton="false">
 
     <div data-role="content">
         <div class="viewSettings">

dashboard-ui/css/librarybrowser.css

@@ -1088,11 +1088,14 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     padding-top: 1px;
 }
 
-@media all and (min-height: 480px) {
+@media all and (max-height: 480px) {
 
     .alphabetPicker {
-        display: block;
+        display: none;
     }
+}
+
+@media all and (min-height: 480px) {
 
     .itemsContainerWithAlphaPicker {
         margin-right: 20px;
@@ -1117,38 +1120,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 }
 
-@media all and (min-height: 600px) {
-
-    .alphabetPicker a {
-        padding-top: 2px;
-        padding-bottom: 2px;
-    }
-}
-
-@media all and (min-height: 650px) {
-
-    .alphabetPicker a {
-        padding-top: 3px;
-        padding-bottom: 3px;
-    }
-}
-
-@media all and (min-height: 700px) {
-
-    .alphabetPicker a {
-        padding-top: 4px;
-        padding-bottom: 4px;
-    }
-}
-
-@media all and (min-height: 750px) {
-
-    .alphabetPicker a {
-        padding-top: 5px;
-        padding-bottom: 5px;
-    }
-}
-
 @media all and (min-height: 900px) {
 
     .alphabetPicker {

dashboard-ui/games.html

@@ -1,4 +1,4 @@
-<div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="scripts/gamespage,scripts/alphapicker">
+<div id="gamesPage" data-role="page" class="page libraryPage listPage" data-require="scripts/gamespage">
     <div class="libraryViewNav scopedLibraryViewNav">
         <a href="gamesrecommended.html">${TabSuggestions}</a>
         <a href="#" class="ui-btn-active">${TabGames}</a>

dashboard-ui/itemlist.html

@@ -1,5 +1,5 @@
 <div id="itemListPage" data-role="page" class="page libraryPage folderListPage noSecondaryNavPage">
-    <div class="alphabetPicker">
+    <div class="alphaPicker vertical alphabetPicker">
     </div>
     <div data-role="content" class="itemListContent">
 
@@ -7,6 +7,6 @@
             <div class="listTopPaging">
             </div>
         </div>
-        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>
 </div>

dashboard-ui/movies.html

@@ -37,22 +37,22 @@
         </div>
     </div>
     <div class="pageTabContent ehsContent" id="moviesTab" data-index="1">
-        <div class="alphabetPicker">
+        <div class="alphaPicker alphabetPicker vertical">
         </div>
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div class="itemsContainer" style="text-align:center;"></div>
+        <div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>
     <div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
-        <div class="alphabetPicker">
+        <div class="alphaPicker alphabetPicker vertical">
         </div>
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div class="itemsContainer" style="text-align:center;"></div>
+        <div class="itemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
         <p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
     </div>
     <div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">

dashboard-ui/music.html

@@ -41,31 +41,31 @@
         <div class="favoriteSections homePageSection"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="albumsTab" data-index="1">
-        <div class="alphabetPicker">
+        <div class="alphaPicker alphabetPicker vertical">
         </div>
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div id="items" class="itemsContainer paddedItemsContainer"></div>
+        <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
-        <div class="alphabetPicker">
+        <div class="alphaPicker alphabetPicker vertical">
         </div>
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="artistsTab" data-index="3">
-        <div class="alphabetPicker">
+        <div class="alphaPicker alphabetPicker vertical">
         </div>
         <div class="viewSettings">
             <div class="listTopPaging">
             </div>
         </div>
-        <div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
+        <div id="items" class="itemsContainer paddedItemsContainer itemsContainerWithAlphaPicker" style="text-align:center;"></div>
     </div>
     <div class="pageTabContent pageTabContent ehsContent" id="songsTab" data-index="4">
         <div class="viewSettings">

dashboard-ui/scripts/alphapicker.js

@@ -1,113 +0,0 @@
-define(['jQuery'], function ($) {
-
-    function getPickerHtml() {
-
-        var html = '';
-
-        html += '<a href="#">#</a>';
-        html += '<a href="#">A</a>';
-        html += '<a href="#">B</a>';
-        html += '<a href="#">C</a>';
-        html += '<a href="#">D</a>';
-        html += '<a href="#">E</a>';
-        html += '<a href="#">F</a>';
-        html += '<a href="#">G</a>';
-        html += '<a href="#">H</a>';
-        html += '<a href="#">I</a>';
-        html += '<a href="#">J</a>';
-        html += '<a href="#">K</a>';
-        html += '<a href="#">L</a>';
-        html += '<a href="#">M</a>';
-        html += '<a href="#">N</a>';
-        html += '<a href="#">O</a>';
-        html += '<a href="#">P</a>';
-        html += '<a href="#">Q</a>';
-        html += '<a href="#">R</a>';
-        html += '<a href="#">S</a>';
-        html += '<a href="#">T</a>';
-        html += '<a href="#">U</a>';
-        html += '<a href="#">V</a>';
-        html += '<a href="#">W</a>';
-        html += '<a href="#">X</a>';
-        html += '<a href="#">Y</a>';
-        html += '<a href="#">Z</a>';
-
-        return html;
-    }
-
-    function init(container, picker) {
-
-        $('.itemsContainer', container).addClass('itemsContainerWithAlphaPicker');
-
-        picker.innerHTML = getPickerHtml();
-
-        $(picker).on('click', 'a', function () {
-
-            var elem = this;
-
-            var isSelected = elem.classList.contains('selectedCharacter');
-
-            $('.selectedCharacter', picker).removeClass('selectedCharacter');
-
-            if (!isSelected) {
-
-                elem.classList.add('selectedCharacter');
-                $(picker).trigger('alphaselect', [this.innerHTML]);
-            } else {
-                $(picker).trigger('alphaclear');
-            }
-        });
-    }
-
-    pageClassOn('pageinit', "libraryPage", function () {
-
-        var page = this;
-
-        var pickers = page.querySelectorAll('.alphabetPicker');
-
-        if (!pickers.length) {
-            return;
-        }
-
-        if (page.classList.contains('pageWithAbsoluteTabs')) {
-
-            for (var i = 0, length = pickers.length; i < length; i++) {
-                init($(pickers[i]).parents('.pageTabContent'), pickers[i]);
-            }
-
-        } else {
-            init(page, pickers[0]);
-        }
-    });
-
-    $.fn.alphaValue = function (val) {
-
-        if (val == null) {
-            return $('.selectedCharacter', this).html();
-        }
-
-        val = val.toLowerCase();
-
-        $('.selectedCharacter', this).removeClass('selectedCharacter');
-
-        $('a', this).each(function () {
-
-            if (this.innerHTML.toLowerCase() == val) {
-
-                this.classList.add('selectedCharacter');
-
-            } else {
-                this.classList.remove('selectedCharacter');
-            }
-
-        });
-
-        return this;
-    };
-
-    $.fn.alphaClear = function (val) {
-
-        return this.alphaValue('');
-    };
-
-});

dashboard-ui/scripts/channelitems.js

@@ -247,32 +247,8 @@
 
     function updateFilterControls(page) {
 
-        var query = getQuery(page);
-        $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
     }
 
-    pageIdOn('pageinit', "channelItemsPage", function () {
-
-        var page = this;
-
-        $('.alphabetPicker', this).on('alphaselect', function (e, character) {
-
-            var query = getQuery(page);
-            query.NameStartsWithOrGreater = character;
-            query.StartIndex = 0;
-
-            reloadItems(page);
-
-        }).on('alphaclear', function (e) {
-
-            var query = getQuery(page);
-            query.NameStartsWithOrGreater = '';
-
-            reloadItems(page);
-        });
-
-    });
-
     pageIdOn('pagebeforeshow', "channelItemsPage", function () {
 
         var page = this;

dashboard-ui/scripts/itemlistpage.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'jQuery'], function (libraryBrowser, $) {
+define(['libraryBrowser', 'jQuery', 'alphaPicker'], function (libraryBrowser, $, alphaPicker) {
 
     return function (view, params) {
 
@@ -237,13 +237,6 @@
             });
         }
 
-        function updateFilterControls() {
-
-            var query = getQuery();
-
-            $('.alphabetPicker', view).alphaValue(query.NameStartsWithOrGreater);
-        }
-
         function onListItemClick(e) {
 
             var query = getQuery();
@@ -257,28 +250,38 @@
             }
         }
 
-        $('.alphabetPicker', view).on('alphaselect', function (e, character) {
+        var alphaPickerElement = view.querySelector('.alphaPicker');
-
+        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+            var newValue = e.detail.value;
             var query = getQuery();
-            query.NameStartsWithOrGreater = character;
+            query.NameStartsWithOrGreater = newValue;
             query.StartIndex = 0;
-
-            reloadItems(view);
-
-        }).on('alphaclear', function (e) {
-
-            var query = getQuery();
-            query.NameStartsWithOrGreater = '';
-
             reloadItems(view);
         });
 
+        self.alphaPicker = new alphaPicker({
+            element: alphaPickerElement
+        });
+
         $(view).on('click', '.mediaItem', onListItemClick);
 
+        function updateFilterControls() {
+
+            var query = getQuery();
+
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
+        }
+
         view.addEventListener('viewbeforeshow', function (e) {
             reloadItems(view);
             updateFilterControls();
             LibraryMenu.setBackButtonVisible(params.context);
         });
+
+        view.addEventListener('viewdestroy', function (e) {
+            if (self.alphaPicker) {
+                self.alphaPicker.destroy();
+            }
+        });
     };
 });

dashboard-ui/scripts/librarylist.js

@@ -1593,7 +1593,7 @@
             cardProgress.innerHTML = progressHtml;
         }
         else {
-            cardProgress = card.querySelector('.cardFooter');
+            cardProgress = card.querySelector('.cardProgress');
             if (cardProgress) {
                 cardProgress.parentNode.removeChild(cardProgress);
             }

dashboard-ui/scripts/mediaplayer-video.js

@@ -432,12 +432,28 @@
                 nowPlayingTabButtons[i].addEventListener('click', onTabButtonClick);
             }
 
-            elem.querySelector('.chapterCard').addEventListener('click', function () {
+            elem.addEventListener('click', function (e) {
 
-                self.seek(parseInt(this.getAttribute('data-position')));
+                var chapterCard = parentWithClass(e.target, 'chapterCard');
+                if (chapterCard) {
+                    self.seek(parseInt(chapterCard.getAttribute('data-position')));
+                }
             });
         };
 
+        function parentWithClass(elem, className) {
+
+            while (!elem.classList || !elem.classList.contains(className)) {
+                elem = elem.parentNode;
+
+                if (!elem) {
+                    return null;
+                }
+            }
+
+            return elem;
+        }
+
         function getNowPlayingTabsHtml(item) {
 
             var html = '';

dashboard-ui/scripts/movies.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
 
     return function (view, params, tabContent) {
 
@@ -270,25 +270,22 @@
 
             var query = getQuery(context);
 
-            $('.alphabetPicker', context).alphaValue(query.NameStartsWithOrGreater);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
         function initPage(context) {
 
-            $('.alphabetPicker', context).on('alphaselect', function (e, character) {
+            var alphaPickerElement = context.querySelector('.alphaPicker');
-
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                var newValue = e.detail.value;
                 var query = getQuery(context);
-                query.NameStartsWithOrGreater = character;
+                query.NameStartsWithOrGreater = newValue;
                 query.StartIndex = 0;
-
                 reloadItems(context);
+            });
 
-            }).on('alphaclear', function (e) {
+            self.alphaPicker = new alphaPicker({
-
+                element: alphaPickerElement
-                var query = getQuery(context);
-                query.NameStartsWithOrGreater = '';
-
-                reloadItems(context);
             });
 
             context.querySelector('.itemsContainer').addEventListener('needsrefresh', function () {

dashboard-ui/scripts/movietrailers.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
 
     var data = {};
 
@@ -159,25 +159,22 @@
 
         var query = getQuery(tabContent);
 
-        $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
+        self.alphaPicker.value(query.NameStartsWithOrGreater);
     }
 
     function initPage(page, tabContent) {
 
-        $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
+        var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-
+        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
-            var query = getQuery(page);
+            var newValue = e.detail.value;
-            query.NameStartsWithOrGreater = character;
+            var query = getQuery(tabContent);
+            query.NameStartsWithOrGreater = newValue;
             query.StartIndex = 0;
-
             reloadItems(tabContent);
+        });
 
-        }).on('alphaclear', function (e) {
+        self.alphaPicker = new alphaPicker({
-
+            element: alphaPickerElement
-            var query = getQuery(page);
-            query.NameStartsWithOrGreater = '';
-
-            reloadItems(tabContent);
         });
 
         tabContent.querySelector('.itemsContainer').addEventListener('needsrefresh', function () {

dashboard-ui/scripts/musicalbumartists.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
 
     return function (view, params, tabContent) {
 
@@ -156,25 +156,20 @@
 
             var query = getQuery(tabContent);
 
-            $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
-        $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
+        var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-
+        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+            var newValue = e.detail.value;
             var query = getQuery(tabContent);
-
+            query.NameStartsWithOrGreater = newValue;
-            query.NameStartsWithOrGreater = character;
             query.StartIndex = 0;
-
             reloadItems(tabContent);
+        });
 
-        }).on('alphaclear', function (e) {
+        self.alphaPicker = new alphaPicker({
-
+            element: alphaPickerElement
-            var query = getQuery(tabContent);
-
-            query.NameStartsWithOrGreater = '';
-
-            reloadItems(tabContent);
         });
 
         self.renderTab = function () {

dashboard-ui/scripts/musicalbums.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
 
     return function (view, params, tabContent) {
 
@@ -209,33 +209,20 @@
 
             var query = getQuery(page);
 
-            $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
-        $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
+        var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-
+        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+            var newValue = e.detail.value;
             var query = getQuery(tabContent);
-
+            query.NameStartsWithOrGreater = newValue;
-            if (query.SortBy.indexOf('AlbumArtist') == -1) {
-                query.NameStartsWithOrGreater = character;
-                query.AlbumArtistStartsWithOrGreater = '';
-            } else {
-                query.AlbumArtistStartsWithOrGreater = character;
-                query.NameStartsWithOrGreater = '';
-            }
-
             query.StartIndex = 0;
-
             reloadItems(tabContent);
+        });
 
-        }).on('alphaclear', function (e) {
+        self.alphaPicker = new alphaPicker({
-
+            element: alphaPickerElement
-            var query = getQuery(tabContent);
-
-            query.NameStartsWithOrGreater = '';
-            query.AlbumArtistStartsWithOrGreater = '';
-
-            reloadItems(tabContent);
         });
 
         self.renderTab = function () {

dashboard-ui/scripts/musicartists.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'alphaPicker'], function ($, alphaPicker) {
 
     return function (view, params, tabContent) {
 
@@ -156,26 +156,22 @@
 
             var query = getQuery(tabContent);
 
-            $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
-        $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
+        var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-
+        alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+            var newValue = e.detail.value;
             var query = getQuery(tabContent);
-
+            query.NameStartsWithOrGreater = newValue;
-            query.NameStartsWithOrGreater = character;
             query.StartIndex = 0;
-
-            reloadItems(tabContent);
-
-        }).on('alphaclear', function (e) {
-
-            var query = getQuery(tabContent);
-
-            query.NameStartsWithOrGreater = '';
-
             reloadItems(tabContent);
         });
+
+        self.alphaPicker = new alphaPicker({
+            element: alphaPickerElement
+        });
+
         self.renderTab = function () {
 
             reloadItems(tabContent);

dashboard-ui/scripts/site.js

@@ -1792,6 +1792,7 @@ var AppInfo = {};
         define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
 
         define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency);
+        define("alphaPicker", [embyWebComponentsBowerPath + "/alphapicker/alphapicker"], returnFirstDependency);
         define("paper-icon-button-light", [embyWebComponentsBowerPath + "/emby-button/paper-icon-button-light"]);
 
         define("emby-input", [embyWebComponentsBowerPath + "/emby-input/emby-input"], returnFirstDependency);
@@ -2582,7 +2583,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/itemlist.html',
-            dependencies: ['paper-checkbox', 'scripts/alphapicker'],
+            dependencies: ['paper-checkbox'],
             autoFocus: false,
             controller: 'scripts/itemlistpage',
             transition: 'fade'
@@ -2744,7 +2745,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/movies.html',
-            dependencies: ['paper-checkbox', 'scripts/alphapicker', 'emby-button'],
+            dependencies: ['paper-checkbox', 'emby-button'],
             autoFocus: false,
             controller: 'scripts/moviesrecommended',
             transition: 'fade'
@@ -2752,7 +2753,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/music.html',
-            dependencies: ['scripts/alphapicker'],
+            dependencies: [],
             controller: 'scripts/musicrecommended',
             autoFocus: false,
             transition: 'fade'

dashboard-ui/scripts/tvrecommended.js

@@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scripts/alphapicker', 'scrollStyles'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {
 
     return function (view, params) {
 

dashboard-ui/scripts/tvshows.js

@@ -1,4 +1,4 @@
-define(['events', 'libraryBrowser', 'imageLoader', 'jQuery'], function (events, libraryBrowser, imageLoader, $) {
+define(['events', 'libraryBrowser', 'imageLoader', 'jQuery', 'alphaPicker'], function (events, libraryBrowser, imageLoader, $, alphaPicker) {
 
     return function (view, params, tabContent) {
 
@@ -187,26 +187,22 @@
         function updateFilterControls(tabContent) {
 
             var query = getQuery(tabContent);
-            $('.alphabetPicker', tabContent).alphaValue(query.NameStartsWithOrGreater);
+            self.alphaPicker.value(query.NameStartsWithOrGreater);
         }
 
         function initPage(tabContent) {
 
-            $('.alphabetPicker', tabContent).on('alphaselect', function (e, character) {
+            var alphaPickerElement = tabContent.querySelector('.alphaPicker');
-
+            alphaPickerElement.addEventListener('alphavaluechanged', function (e) {
+                var newValue = e.detail.value;
                 var query = getQuery(tabContent);
-                query.NameStartsWithOrGreater = character;
+                query.NameStartsWithOrGreater = newValue;
                 query.StartIndex = 0;
-
                 reloadItems(tabContent);
+            });
 
-            }).on('alphaclear', function (e) {
+            self.alphaPicker = new alphaPicker({
-
+                element: alphaPickerElement
-                var query = getQuery(tabContent);
-                query.NameStartsWithOrGreater = '';
-                getQuery(tabContent).StartIndex = 0;
-
-                reloadItems(tabContent);
             });
 
             tabContent.querySelector('.btnFilter').addEventListener('click', function () {

dashboard-ui/tv.html

@@ -60,10 +60,10 @@
             </div>
         </div>
 
-        <div class="alphabetPicker">
+        <div class="alphaPicker alphabetPicker vertical">
         </div>
 
-        <div class="itemsContainer">
+        <div class="itemsContainer itemsContainerWithAlphaPicker">
         </div>
         <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
             <div class="paging"></div>