use unified theme media player

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

@@ -17,7 +17,6 @@
     font-weight: inherit;
     color: inherit;
     padding: .35em 0 .3em 0;
-    cursor: pointer;
     outline: none !important;
     width: 100%;
     background-color: transparent;

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

@@ -46,6 +46,7 @@
         var label = this.ownerDocument.createElement('label');
         label.innerHTML = this.getAttribute('label') || '';
         label.classList.add('inputLabel');
+        label.classList.add('inputLabelUnfocused');
 
         var instanceSupportsFloat = supportsFloatingLabel && this.type != 'date';
 

dashboard-ui/bower_components/emby-webcomponents/require/requirecss.js

@@ -35,7 +35,7 @@ define(function () {
 
         var url = cssId + '.css';
 
-        if (url.indexOf('http') != 0 && url.indexOf('file:') != 0) {
+        if (url.indexOf('://') == -1) {
             url = config.baseUrl + url;
         }
 

dashboard-ui/bower_components/emby-webcomponents/scroller/smoothscroller.js

@@ -475,7 +475,7 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
             };
         };
 
-        self.getCenterPosition = function(item) {
+        self.getCenterPosition = function (item) {
 
             var pos = self.getPos(item);
             return within(pos.center, pos.start, pos.end);
@@ -664,11 +664,15 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
             // Bind dragging events
             if (isTouch) {
                 dragTouchEvents.forEach(function (eventName) {
-                    document.addEventListener(eventName, dragHandler);
+                    dom.addEventListener(document, eventName, dragHandler, {
+                        passive: true
+                    });
                 });
             } else {
                 dragMouseEvents.forEach(function (eventName) {
-                    document.addEventListener(eventName, dragHandler);
+                    dom.addEventListener(document, eventName, dragHandler, {
+                        passive: true
+                    });
                 });
             }
 
@@ -753,11 +757,15 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
 
             if (dragging.touch) {
                 dragTouchEvents.forEach(function (eventName) {
-                    document.removeEventListener(eventName, dragHandler);
+                    dom.removeEventListener(document, eventName, dragHandler, {
+                        passive: true
+                    });
                 });
             } else {
                 dragMouseEvents.forEach(function (eventName) {
-                    document.removeEventListener(eventName, dragHandler);
+                    dom.removeEventListener(document, eventName, dragHandler, {
+                        passive: true
+                    });
                 });
             }
 
@@ -853,7 +861,10 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
 		 */
         self.destroy = function () {
 
-            window.removeEventListener('resize', onResize, true);
+            dom.removeEventListener(window, 'resize', onResize, {
+                passive: true,
+                capture: true
+            });
 
             // Reset native FRAME element scroll
             dom.removeEventListener(frameElement, 'scroll', resetScroll, {
@@ -934,7 +945,10 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
                 dragSourceElement.addEventListener('mousedown', dragInitSlidee);
 
                 if (!o.scrollWidth) {
-                    window.addEventListener('resize', onResize, true);
+                    dom.addEventListener(window, 'resize', onResize, {
+                        passive: true,
+                        capture: true
+                    });
                 }
 
                 if (!o.horizontal) {

dashboard-ui/metadatasubtitles.html

@@ -1,4 +1,4 @@
-<div id="metadataSubtitlesPage" data-role="page" class="page type-interior metadataConfigurationPage" data-require="jqmlistview,scripts/metadatasubtitles,paper-input,paper-checkbox,emby-button">
+<div id="metadataSubtitlesPage" data-role="page" class="page type-interior metadataConfigurationPage" data-require="scripts/metadatasubtitles,emby-input,emby-checkbox,emby-button">
 
     <div data-role="content">
 
@@ -6,48 +6,64 @@
 
             <form class="metadataSubtitlesForm">
 
+                <div style="height:0; overflow: hidden;"><input type="text" name="fakeusernameremembered" tabindex="-1" /><input type="password" name="fakepasswordremembered" tabindex="-1" /></div>
+
                 <div style="display: none;">
                     <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
                 </div>
 
-                <div class="paperListLabel">${HeaderDownloadSubtitlesFor}</div>
+                <h3 class="checkboxListLabel">${HeaderDownloadSubtitlesFor}</h3>
-                <div class="paperCheckboxList">
+                <div class="checkboxList">
-                    <paper-checkbox id="chkSubtitlesMovies">${OptionMovies}</paper-checkbox>
+                    <label>
-                    <paper-checkbox id="chkSubtitlesEpisodes">${OptionEpisodes}</paper-checkbox>
+                        <input is="emby-checkbox" type="checkbox" id="chkSubtitlesMovies" />
+                        <span>${OptionMovies}</span>
+                    </label>
+                    <label>
+                        <input is="emby-checkbox" type="checkbox" id="chkSubtitlesEpisodes" />
+                        <span>${OptionEpisodes}</span>
+                    </label>
                 </div>
                 <br />
                 <div>
-                    <div class="paperListLabel">${LabelDownloadLanguages}</div>
+                    <h3 class="checkboxListLabel">${LabelDownloadLanguages}</h3>
-                    <div class="downloadLanguages paperList paperCheckboxList" style="max-height: 150px; overflow-y: auto; padding: .5em 1em;">
+                    <div class="downloadLanguages paperList checkboxList" style="max-height: 150px; overflow-y: auto; padding: .5em 1em;">
                     </div>
                 </div>
                 <br /><br />
 
-                <ul data-role="listview" class="ulForm">
+                <label class="checkboxContainer">
-                    <li>
+                    <input is="emby-checkbox" type="checkbox" id="chkRequirePerfectMatch"/>
-                        <paper-checkbox id="chkRequirePerfectMatch">${OptionRequirePerfectSubtitleMatch}</paper-checkbox>
+                    <span>${OptionRequirePerfectSubtitleMatch}</span>
-                    </li>
+                </label>
-                    <li>
+                <div class="checkboxContainer checkboxContainer-withDescription">
-                        <paper-checkbox id="chkSkipIfAudioTrackPresent">${LabelSkipIfAudioTrackPresent}</paper-checkbox>
+                    <label>
-                        <div class="fieldDescription paperCheckboxFieldDescription">${LabelSkipIfAudioTrackPresentHelp}</div>
+                        <input is="emby-checkbox" type="checkbox" id="chkSkipIfAudioTrackPresent" />
-                    </li>
+                        <span>${LabelSkipIfAudioTrackPresent}</span>
-                    <li>
+                    </label>
-                        <paper-checkbox id="chkSkipIfGraphicalSubsPresent">${LabelSkipIfGraphicalSubsPresent}</paper-checkbox>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelSkipIfAudioTrackPresentHelp}</div>
-                        <div class="fieldDescription paperCheckboxFieldDescription">${LabelSkipIfGraphicalSubsPresentHelp}</div>
+                </div>
-                    </li>
+                <div class="checkboxContainer checkboxContainer-withDescription">
-                    <li>
+                    <label>
-                        <paper-input type="text" id="txtOpenSubtitleUsername" autocomplete="off" label="${LabelOpenSubtitlesUsername}"></paper-input>
+                        <input is="emby-checkbox" type="checkbox" id="chkSkipIfGraphicalSubsPresent" />
-                        <div class="fieldDescription"><a target="_blank" href="http://www.opensubtitles.org/">${ButtonRegister}</a></div>
+                        <span>${LabelSkipIfGraphicalSubsPresent}</span>
-                    </li>
+                    </label>
-                    <li>
+                    <div class="fieldDescription checkboxFieldDescription">${LabelSkipIfGraphicalSubsPresentHelp}</div>
-                        <paper-input type="password" id="txtOpenSubtitlePassword" autocomplete="off" label="${LabelOpenSubtitlesPassword}"></paper-input>
+                </div>
-                    </li>
+                <br />
-                </ul>
+                <div class="inputContainer">
-                <ul data-role="listview" class="ulForm">
+                    <input is="emby-input" type="text" id="txtOpenSubtitleUsername" autocomplete="off" label="${LabelOpenSubtitlesUsername}" />
-                    <li>
+                    <div class="fieldDescription">
+                        <a target="_blank" href="http://www.opensubtitles.org/">${ButtonRegister}</a>
+                    </div>
+                </div>
+
+                <div class="inputContainer">
+                    <input is="emby-input" type="password" id="txtOpenSubtitlePassword" autocomplete="off" label="${LabelOpenSubtitlesPassword}" />
+                </div>
+
+                <div>
                     <button is="emby-button" type="submit" class="raised submit block"><i class="md-icon">check</i><span>${ButtonSave}</span></button>
-                    </li>
+                </div>
-                </ul>
             </form>
         </div>
 

dashboard-ui/mysync.html

@@ -30,7 +30,6 @@
         <div class="ehsContent" style="clear:both;">
             <br />
             <div class="localSyncStatus hide" style="text-align:right;margin:0 0 1em;">
-                <span style="vertical-align: middle;margin-right:.5em;" class="labelSyncStatus"></span>
                 <button type="button" is="emby-button" class="btnSyncNow mini accent fab autoSize" style="margin-right:.5em;"><i class="md-icon">sync</i></button>
             </div>
             <div class="syncActivity">

dashboard-ui/scripts/itemdetailpage.js

@@ -1531,16 +1531,7 @@
 
             renderThemeSongs(page, themeSongs);
             renderThemeVideos(page, themeVideos);
-
-            page.dispatchEvent(new CustomEvent("thememediadownload", {
-                detail: {
-                    themeMediaResult: result
-                },
-                bubbles: true
-            }));
-
         });
-
     }
 
     function renderThemeSongs(page, items) {

dashboard-ui/scripts/metadatasubtitles.js

@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'fnchecked'], function ($) {
 
     function loadPage(page, config, languages) {
 
@@ -25,7 +25,7 @@
 
             var culture = languages[i];
 
-            html += '<paper-checkbox class="chkLang" data-lang="' + culture.ThreeLetterISOLanguageName.toLowerCase() + '">' + culture.DisplayName + '</paper-checkbox>';
+            html += '<label><input type="checkbox" is="emby-checkbox" class="chkLang" data-lang="' + culture.ThreeLetterISOLanguageName.toLowerCase() + '" /><span>' + culture.DisplayName + '</span></label>';
         }
 
         $('.downloadLanguages', page).html(html);

dashboard-ui/scripts/mysync.js

@@ -1,4 +1,4 @@
-define(['loading', 'apphost', 'globalize', 'syncJobList', 'events', 'localsync', 'emby-button', 'paper-icon-button-light'], function (loading, appHost, globalize, syncJobList, events, localSync) {
+define(['apphost', 'globalize', 'syncJobList', 'events', 'localsync', 'emby-button', 'paper-icon-button-light'], function (appHost, globalize, syncJobList, events, localSync) {
 
     function initSupporterInfo(view, params) {
 
@@ -40,13 +40,6 @@
 
                 var status = localSync.getSyncStatus();
 
-                page.querySelector('.labelSyncStatus').innerHTML = Globalize.translate('LabelLocalSyncStatusValue', status);
-                if (status == 'Active') {
-                    loading.show();
-                } else {
-                    loading.hide();
-                }
-
                 if (status == "Active") {
                     page.querySelector('.btnSyncNow').classList.add('hide');
                 }
@@ -103,8 +96,6 @@
 
         view.addEventListener('viewbeforehide', function () {
 
-            loading.hide();
-
             if (interval) {
                 clearInterval(interval);
                 interval = null;

dashboard-ui/scripts/site.js

@@ -179,7 +179,7 @@ var Dashboard = {
         }
 
         if (url.indexOf('/') != 0) {
-            if (url.indexOf('http') != 0 && url.indexOf('file:') != 0) {
+            if (url.indexOf('://') == -1) {
                 url = '/' + url;
             }
         }
@@ -1528,10 +1528,21 @@ var AppInfo = {};
         // mock this for now. not used in this app
         define("playbackManager", [], function () {
             return {
+                isPlaying: function () {
+                    return MediaPlayer.currentItem != null;
+                },
                 isPlayingVideo: function () {
-                    return false;
+                    return MediaPlayer.currentItem != null;
                 },
                 play: function (options) {
+
+                    if (options.fullscreen === false) {
+                        // theme backdrops - not supported
+                        if (!options.items || options.items[0].MediaType == 'Video') {
+                            return;
+                        }
+                    }
+
                     MediaController.play(options);
                 },
                 currentPlaylistIndex: function (options) {
@@ -1554,6 +1565,9 @@ var AppInfo = {};
                 },
                 pause: function () {
                     return MediaController.pause();
+                },
+                stop: function () {
+                    return MediaController.stop();
                 }
             };
         });
@@ -1645,7 +1659,7 @@ var AppInfo = {};
                         apiClient.getItem(apiClient.getCurrentUserId(), item).then(showItem);
                     });
                 } else {
-                    Dashboard.navigate(LibraryBrowser.getHref(item));
+                    Emby.Page.show('/' + LibraryBrowser.getHref(item), { item: item });
                 }
             }
 
@@ -2726,7 +2740,7 @@ var AppInfo = {};
 
             var postInitDependencies = [];
 
-            postInitDependencies.push('scripts/thememediaplayer');
+            postInitDependencies.push('bower_components/emby-webcomponents/thememediaplayer');
             postInitDependencies.push('scripts/remotecontrol');
             postInitDependencies.push('css!css/chromecast.css');
             postInitDependencies.push('scripts/autobackdrops');

dashboard-ui/scripts/thememediaplayer.js

@@ -1,76 +0,0 @@
-define(['appStorage'], function (appStorage) {
-
-    var currentOwnerId;
-    var currentThemeIds = [];
-
-    function playThemeSongs(items, ownerId) {
-
-        var player = getPlayer();
-
-        if (items.length && player.isDefaultPlayer && player.canAutoPlayAudio()) {
-
-            // Stop if a theme song from another ownerId
-            // Leave it alone if anything else (e.g user playing a movie)
-            if (!currentOwnerId && player.isPlaying()) {
-                return;
-            }
-
-            currentThemeIds = items.map(function (i) {
-                return i.Id;
-            });
-
-            currentOwnerId = ownerId;
-
-            player.play({
-                items: items
-            });
-
-        } else {
-            currentOwnerId = null;
-        }
-    }
-
-    function onPlayItem(item) {
-
-        // User played something manually
-        if (currentThemeIds.indexOf(item.Id) == -1) {
-
-            currentOwnerId = null;
-
-        }
-    }
-
-    function enabled() {
-
-        var userId = Dashboard.getCurrentUserId();
-
-        var val = appStorage.getItem('enableThemeSongs-' + userId);
-
-        var localAutoPlayers = MediaController.getPlayers().filter(function (p) {
-
-            return p.isLocalPlayer && p.canAutoPlayAudio();
-        });
-
-        // For bandwidth
-        return val == '1' || (val != '0' && localAutoPlayers.length);
-    }
-
-    function getPlayer() {
-        return MediaController.getCurrentPlayer();
-    }
-
-    document.addEventListener('thememediadownload', function (e) {
-
-        if (!enabled()) {
-            return;
-        }
-
-        var themeMediaResult = e.detail.themeMediaResult;
-        var ownerId = themeMediaResult.ThemeSongsResult.OwnerId;
-
-        if (ownerId != currentOwnerId) {
-            playThemeSongs(themeMediaResult.ThemeSongsResult.Items, ownerId);
-        }
-    });
-
-});

dashboard-ui/wizarduser.html

@@ -1,4 +1,4 @@
-<div id="wizardUserPage" data-role="page" class="page standalonePage wizardPage" data-require="scripts/wizarduserpage,paper-input,emby-button">
+<div id="wizardUserPage" data-role="page" class="page standalonePage wizardPage" data-require="scripts/wizarduserpage,emby-input,emby-button">
 
     <div data-role="content">