update offline detection

dashboard-ui/apiclient/localassetmanager.js

@@ -102,6 +102,13 @@
         return deferred.promise();
     }
 
+    function translateFilePath(path) {
+
+        var deferred = DeferredBuilder.Deferred();
+        deferred.resolveWith(null, [path]);
+        return deferred.promise();
+    }
+
     window.LocalAssetManager = {
         getLocalMediaSource: getLocalMediaSource,
         saveOfflineUser: saveOfflineUser,
@@ -118,7 +125,8 @@
         downloadSubtitles: downloadSubtitles,
         hasImage: hasImage,
         downloadImage: downloadImage,
-        fileExists: fileExists
+        fileExists: fileExists,
+        translateFilePath: translateFilePath
     };
 
 })();

dashboard-ui/bower_components/paper-progress/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-progress",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "http://polymer.github.io/LICENSE.txt",
   "description": "A material design progress bar",
   "authors": "The Polymer Authors",
@@ -29,11 +29,11 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "homepage": "https://github.com/PolymerElements/paper-progress",
-  "_release": "1.0.4",
+  "_release": "1.0.5",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.4",
+    "tag": "v1.0.5",
-    "commit": "3bef91b5f9479b8b85c4725b441acf8fb433e008"
+    "commit": "baf8049bb33c3f9557d0d3608dc0824847ac34c4"
   },
   "_source": "git://github.com/PolymerElements/paper-progress.git",
   "_target": "^1.0.0",

dashboard-ui/bower_components/paper-progress/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-progress",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "http://polymer.github.io/LICENSE.txt",
   "description": "A material design progress bar",
   "authors": "The Polymer Authors",

dashboard-ui/bower_components/paper-progress/paper-progress.html

@@ -108,7 +108,8 @@ Custom property                             | Description
       background-color: var(--paper-progress-container-color, --google-grey-300);
     }
 
-    :host(.transiting) > * {
+    :host(.transiting) #primaryProgress,
+    :host(.transiting) #secondaryProgress {
       -webkit-transition-property: -webkit-transform;
       transition-property: transform;
 

dashboard-ui/bower_components/paper-progress/test/basic.html

@@ -30,89 +30,116 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </template>
   </test-fixture>
 
+  <test-fixture id="transitingProgress">
+    <template>
+      <paper-progress class="transiting"></paper-progress>
+    </template>
+  </test-fixture>
+
   <script>
-    suite('<paper-progress>', function() {
+    suite('basic features', function() {
-      var range;
+      var progress;
 
       setup(function() {
-        range = fixture('trivialProgress');
+        progress = fixture('trivialProgress');
       });
 
       test('check default', function() {
-        assert.equal(range.min, 0);
+        assert.equal(progress.min, 0);
-        assert.equal(range.max, 100);
+        assert.equal(progress.max, 100);
-        assert.equal(range.value, 0);
+        assert.equal(progress.value, 0);
       });
 
       test('set value', function(done) {
-        range.value = 50;
+        progress.value = 50;
         asyncPlatformFlush(function() {
-          assert.equal(range.value, 50);
+          assert.equal(progress.value, 50);
           // test clamp value
-          range.value = 60.1;
+          progress.value = 60.1;
           asyncPlatformFlush(function() {
-            assert.equal(range.value, 60);
+            assert.equal(progress.value, 60);
             done();
           });
         });
       });
 
       test('set max', function(done) {
-        range.max = 10;
+        progress.max = 10;
-        range.value = 11;
+        progress.value = 11;
         asyncPlatformFlush(function() {
-          assert.equal(range.value, range.max);
+          assert.equal(progress.value, progress.max);
           done();
         });
       });
 
       test('test ratio', function(done) {
-        range.max = 10;
+        progress.max = 10;
-        range.value = 5;
+        progress.value = 5;
         asyncPlatformFlush(function() {
-          assert.equal(range.ratio, 50);
+          assert.equal(progress.ratio, 50);
           done();
         });
       });
 
       test('test secondary ratio', function(done) {
-        range.max = 10;
+        progress.max = 10;
-        range.secondaryProgress = 5;
+        progress.secondaryProgress = 5;
         asyncPlatformFlush(function() {
-          assert.equal(range.secondaryRatio, 50);
+          assert.equal(progress.secondaryRatio, 50);
           done();
         });
       });
 
       test('set min', function(done) {
-        range.min = 10
+        progress.min = 10
-        range.max = 50;
+        progress.max = 50;
-        range.value = 30;
+        progress.value = 30;
         asyncPlatformFlush(function() {
-          assert.equal(range.ratio, 50);
+          assert.equal(progress.ratio, 50);
-          range.value = 0;
+          progress.value = 0;
           asyncPlatformFlush(function() {
-            assert.equal(range.value, range.min);
+            assert.equal(progress.value, progress.min);
             done();
           });
         });
       });
 
       test('set step', function(done) {
-        range.min = 0;
+        progress.min = 0;
-        range.max = 10;
+        progress.max = 10;
-        range.value = 5.1;
+        progress.value = 5.1;
         asyncPlatformFlush(function() {
-          assert.equal(range.value, 5);
+          assert.equal(progress.value, 5);
-          range.step = 0.1;
+          progress.step = 0.1;
-          range.value = 5.1;
+          progress.value = 5.1;
           asyncPlatformFlush(function() {
-            assert.equal(range.value, 5.1);
+            assert.equal(progress.value, 5.1);
             done();
           });
         });
       });
+    });
 
+    suite('transiting class', function() {
+      var progress;
+
+      setup(function() {
+        progress = fixture('transitingProgress');
+      });
+
+      test('progress bars', function() {
+        var stylesForPrimaryProgress = window.getComputedStyle(progress.$.primaryProgress);
+        var stylesForSecondaryProgress = window.getComputedStyle(progress.$.secondaryProgress);
+        var transitionProp = stylesForPrimaryProgress['transition-property'];
+
+        assert.isTrue(transitionProp === 'transform' || transitionProp === '-webkit-transform');
+        assert.equal(stylesForPrimaryProgress['transition-duration'], '0.08s');
+
+        transitionProp = stylesForSecondaryProgress['transition-property'];
+
+        assert.isTrue(transitionProp === 'transform' || transitionProp === '-webkit-transform');
+        assert.equal(stylesForSecondaryProgress['transition-duration'], '0.08s');
+      });
     });
 
   </script>

dashboard-ui/channelitems.html

@@ -24,29 +24,13 @@
                             ${HeaderFilters}
                         </h1>
 
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-filter="IsUnPlayed" data-mini="true" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
-                            <label for="chkUnplayed">${OptionUnplayed}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
-
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                        <div class="checkboxContainer">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                            <input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-filter="IsResumable" data-mini="true" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-                            <label for="chkResumable">${OptionResumable}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-filter="IsFavorite" data-mini="true" data-role="none">
-                            <label for="chkIsFavorite">${OptionFavorite}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" name="chkLikes" id="chkLikes" data-filter="Likes" data-mini="true" data-role="none">
-                            <label for="chkLikes">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-filter="Dislikes" data-mini="true" data-role="none">
-                            <label for="chkDislikes">${OptionDislikes}</label>
                         </div>
 
                     </div>

dashboard-ui/cordova/localassetmanager.js

@@ -467,38 +467,95 @@
 
         getFileSystem().done(function (fileSystem) {
 
-            fileSystem.root.getFile(fileName, { create: true }, function (targetFile) {
+            createDirectory(getParentDirectoryPath(localPath)).done(function () {
 
-                var downloader = new BackgroundTransfer.BackgroundDownloader();
+                fileSystem.root.getFile(localPath, { create: true }, function (targetFile) {
-                // Create a new download operation.
-                var download = downloader.createDownload(url, targetFile.toURL());
-                // Start the download and persist the promise to be able to cancel the download.
-                var downloadPromise = download.startAsync().then(function () {
 
-                    // on success
+                    var downloader = new BackgroundTransfer.BackgroundDownloader();
-                    var localUrl = localPath;
+                    // Create a new download operation.
+                    var download = downloader.createDownload(url, targetFile);
+                    // Start the download and persist the promise to be able to cancel the download.
+                    var downloadPromise = download.startAsync().then(function () {
 
-                    Logger.log('Downloaded local url: ' + localUrl);
+                        // on success
-                    deferred.resolveWith(null, [localUrl]);
+                        var localUrl = localPath;
 
-                }, function () {
+                        Logger.log('Downloaded local url: ' + localUrl);
+                        deferred.resolveWith(null, [localUrl]);
 
-                    // on error
+                    }, function () {
-                    Logger.log('download failed: ' + url + ' to ' + localPath);
-                    deferred.reject();
 
-                }, function (value) {
+                        // on error
+                        Logger.log('download failed: ' + url + ' to ' + localPath);
+                        deferred.reject();
 
-                    // on progress
+                    }, function (value) {
-                    Logger.log('download progress: ' + value);
 
+                        // on progress
+                        Logger.log('download progress: ' + value);
+
+                    });
                 });
-            });
+
-        });
+            }).fail(getOnFail(deferred));;
+
+        }).fail(getOnFail(deferred));
 
         return deferred.promise();
     }
 
+    function createDirectory(path) {
+
+        var deferred = DeferredBuilder.Deferred();
+        createDirectoryPart(path, 0, deferred);
+        return deferred.promise();
+    }
+
+    function createDirectoryPart(path, index, deferred) {
+
+        var parts = path.split('/');
+        if (index >= parts.length) {
+            deferred.resolve();
+            return;
+        }
+
+        parts.length = index + 1;
+        var pathToCreate = parts.join('/');
+
+        createDirectoryInternal(pathToCreate).done(function () {
+
+            createDirectoryPart(path, index + 1, deferred);
+
+        }).fail(getOnFail(deferred));
+    }
+
+    function createDirectoryInternal(path) {
+
+        Logger.log('creating directory: ' + path);
+        var deferred = DeferredBuilder.Deferred();
+
+        getFileSystem().done(function (fileSystem) {
+
+            fileSystem.root.getDirectory(path, { create: true, exclusive: false }, function (targetFile) {
+
+                Logger.log('createDirectory succeeded');
+                deferred.resolve();
+
+            }, function () {
+
+                Logger.log('createDirectory failed');
+                deferred.reject();
+            });
+
+        }).fail(getOnFail(deferred));
+
+        return deferred.promise();
+    }
+
+    function getParentDirectoryPath(path) {
+        return path.substring(0, path.lastIndexOf('/'));;
+    }
+
     function downloadSubtitles(url, localItem, subtitleStream) {
 
         var path = item.LocalPath;
@@ -593,7 +650,7 @@
     function getImageLocalPath(serverId, itemId, imageTag) {
         var deferred = DeferredBuilder.Deferred();
 
-        var path = "images/" + serverId + "-" + itemId + "/" + imageTag;
+        var path = "images/" + serverId + "/" + itemId + "/" + imageTag;
 
         deferred.resolveWith(null, [path]);
 
@@ -640,6 +697,23 @@
         };
     }
 
+    function translateFilePath(path) {
+
+        var deferred = DeferredBuilder.Deferred();
+
+        resolveFile(path, function (fileEntry) {
+            Logger.log('translateFilePath fileExists: true - path: ' + path);
+            Logger.log('translateFilePath resolving with: ' + fileEntry.toURL());
+            deferred.resolveWith(null, [fileEntry.toURL()]);
+
+        }, function () {
+            Logger.log('translateFilePath fileExists: false - path: ' + path);
+            deferred.resolveWith(null, [path]);
+        });
+
+        return deferred.promise();
+    }
+
     window.LocalAssetManager = {
         getLocalMediaSource: getLocalMediaSource,
         saveOfflineUser: saveOfflineUser,
@@ -656,7 +730,8 @@
         downloadSubtitles: downloadSubtitles,
         hasImage: hasImage,
         downloadImage: downloadImage,
-        fileExists: fileExists
+        fileExists: fileExists,
+        translateFilePath: translateFilePath
     };
 
 })();

dashboard-ui/css/librarybrowser.css

@@ -1036,7 +1036,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 .syncIndicator {
     display: block;
     position: absolute;
-    top: 32px;
+    top: 5px;
     right: 5px;
     text-align: center;
     vertical-align: middle;
@@ -1044,15 +1044,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     height: 24px;
     border-radius: 50%;
     color: #fff;
-    background: rgba(0, 0, 0, .8);
     line-height: 19px;
+    background-color: #38c;
 }
 
-.workingSyncIndicator iron-icon {
+.playedIndicator + .syncIndicator {
-    -webkit-animation: spin 3s infinite linear;
+    top: 32px;
-    -moz-animation: spin 3s infinite linear;
-    -o-animation: spin 3s infinite linear;
-    -ms-animation: spin 3s infinite linear;
 }
 
 .playedIndicator {

dashboard-ui/itemlist.html

@@ -26,34 +26,13 @@
                             ${HeaderFilters}
                         </h1>
 
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" id="chkPlayed" data-filter="IsPlayed" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
-                            <label for="chkPlayed">${OptionPlayed}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
-
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                        <div class="checkboxContainer">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                            <input class="chkStandardFilter" type="checkbox" id="chkUnplayed" data-filter="IsUnPlayed" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-                            <label for="chkUnplayed">${OptionUnplayed}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkResumable" data-filter="IsResumable" data-role="none">
-                            <label for="chkResumable">${OptionResumable}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkIsFavorite" data-filter="IsFavorite" data-role="none">
-                            <label for="chkIsFavorite">${OptionFavorite}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikes" data-filter="Likes" data-role="none">
-                            <label for="chkLikes">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikes" data-filter="Dislikes" data-role="none">
-                            <label for="chkDislikes">${OptionDislikes}</label>
                         </div>
 
                     </div>

dashboard-ui/livetv.html

@@ -138,17 +138,10 @@
                 <form>
                     <div>
                         <h1>${HeaderFilters}</h1>
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikes" data-filter="Likes" data-mini="true" data-role="none">
+                            <paper-checkbox class="chkStandardFilter chkFavorite" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                            <label for="chkLikes">${OptionLikes}</label>
+                            <paper-checkbox class="chkStandardFilter chkLikes" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter chkDislikes" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikes" data-filter="Dislikes" data-mini="true" data-role="none">
-                            <label for="chkDislikes">${OptionDislikes}</label>
-                        </div>
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkFavorite" data-filter="IsFavorite" data-mini="true" data-role="none">
-                            <label for="chkFavorite">${OptionFavorite}</label>
                         </div>
                     </div>
                 </form>

dashboard-ui/movies.html

@@ -147,35 +147,13 @@
                         <h1>
                             ${HeaderFilters}
                         </h1>
-
+                        <div class="paperCheckboxList">
-                        <div class="checkboxContainer">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
-                            <input class="chkStandardFilter" type="checkbox" id="chkPlayedMovie" data-filter="IsPlayed" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
-                            <label for="chkPlayedMovie">${OptionPlayed}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                        <div class="checkboxContainer">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-                            <input class="chkStandardFilter" type="checkbox" id="chkUnplayedMovie" data-filter="IsUnPlayed" data-role="none">
-                            <label for="chkUnplayedMovie">${OptionUnplayed}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkResumableMovie" data-filter="IsResumable" data-role="none">
-                            <label for="chkResumableMovie">${OptionResumable}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteMovie" data-filter="IsFavorite" data-role="none">
-                            <label for="chkIsFavoriteMovie">${OptionFavorite}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikesMovie" data-filter="Likes" data-role="none">
-                            <label for="chkLikesMovie">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikesMovie" data-filter="Dislikes" data-role="none">
-                            <label for="chkDislikesMovie">${OptionDislikes}</label>
                         </div>
                     </div>
                     <br />
@@ -256,34 +234,13 @@
                         <h1>
                             ${HeaderFilters}
                         </h1>
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" id="chkPlayedTrailer" data-filter="IsPlayed" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
-                            <label for="chkPlayedTrailer">${OptionPlayed}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsResumable">${OptionResumable}</paper-checkbox>
-
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                        <div class="checkboxContainer">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                            <input class="chkStandardFilter" type="checkbox" id="chkUnplayedTrailer" data-filter="IsUnPlayed" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-                            <label for="chkUnplayedTrailer">${OptionUnplayed}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkResumableTrailer" data-filter="IsResumable" data-role="none">
-                            <label for="chkResumableTrailer">${OptionResumable}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteTrailer" data-filter="IsFavorite" data-role="none">
-                            <label for="chkIsFavoriteTrailer">${OptionFavorite}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikesTrailer" data-filter="Likes" data-role="none">
-                            <label for="chkLikesTrailer">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikesTrailer" data-filter="Dislikes" data-role="none">
-                            <label for="chkDislikesTrailer">${OptionDislikes}</label>
                         </div>
                     </div>
 

dashboard-ui/music.html

@@ -143,19 +143,10 @@
                     <div>
                         <h1>${HeaderFilters}</h1>
 
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteAlbums" data-filter="IsFavorite" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                            <label for="chkIsFavoriteAlbums">${OptionFavorite}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikesAlbums" data-filter="Likes" data-role="none">
-                            <label for="chkLikesAlbums">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikesAlbums" data-filter="Dislikes" data-role="none">
-                            <label for="chkDislikesAlbums">${OptionDislikes}</label>
                         </div>
                     </div>
                     <br />
@@ -199,19 +190,10 @@
                     <div>
                         <h1>${HeaderFilters}</h1>
 
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteArtist" data-filter="IsFavorite" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                            <label for="chkIsFavoriteArtist">${OptionFavorite}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikesArtist" data-filter="Likes" data-role="none">
-                            <label for="chkLikesArtist">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikesArtist" data-filter="Dislikes" data-role="none">
-                            <label for="chkDislikesArtist">${OptionDislikes}</label>
                         </div>
                     </div>
                     <br />
@@ -234,19 +216,10 @@
                     <div>
                         <h1>${HeaderFilters}</h1>
 
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteAlbumArtist" data-filter="IsFavorite" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-                            <label for="chkIsFavoriteAlbumArtist">${OptionFavorite}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikesAlbumArtist" data-filter="Likes" data-role="none">
-                            <label for="chkLikesAlbumArtist">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikesAlbumArtist" data-filter="Dislikes" data-role="none">
-                            <label for="chkDislikesAlbumArtist">${OptionDislikes}</label>
                         </div>
 
                     </div>
@@ -270,29 +243,12 @@
                     <div>
                         <h1>${HeaderFilters}</h1>
 
-                        <div class="checkboxContainer">
+                        <div class="paperCheckboxList">
-                            <input class="chkStandardFilter" type="checkbox" id="chkPlayedSongs" data-filter="IsPlayed" data-mini="true" data-role="none">
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsPlayed">${OptionPlayed}</paper-checkbox>
-                            <label for="chkPlayedSongs">${OptionPlayed}</label>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsUnPlayed">${OptionUnplayed}</paper-checkbox>
-                        </div>
+                            <paper-checkbox class="chkStandardFilter" data-filter="IsFavorite">${OptionFavorite}</paper-checkbox>
-
+                            <paper-checkbox class="chkStandardFilter" data-filter="Likes">${OptionLikes}</paper-checkbox>
-                        <div class="checkboxContainer">
+                            <paper-checkbox class="chkStandardFilter" data-filter="Dislikes">${OptionDislikes}</paper-checkbox>
-                            <input class="chkStandardFilter" type="checkbox" id="chkUnplayedSongs" data-filter="IsUnPlayed" data-mini="true" data-role="none">
-                            <label for="chkUnplayedSongs">${OptionUnplayed}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkIsFavoriteSongs" data-filter="IsFavorite" data-mini="true" data-role="none">
-                            <label for="chkIsFavoriteSongs">${OptionFavorite}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkLikesSongs" data-filter="Likes" data-mini="true" data-role="none">
-                            <label for="chkLikesSongs">${OptionLikes}</label>
-                        </div>
-
-                        <div class="checkboxContainer">
-                            <input class="chkStandardFilter" type="checkbox" id="chkDislikesSongs" data-filter="Dislikes" data-mini="true" data-role="none">
-                            <label for="chkDislikesSongs">${OptionDislikes}</label>
                         </div>
 
                     </div>

dashboard-ui/scripts/externalplayer.js

@@ -137,28 +137,30 @@
             }
         };
 
-        var streamInfo = MediaPlayer.createStreamInfo('Video', item, mediaSource, startPosition);
+        MediaPlayer.createStreamInfo('Video', item, mediaSource, startPosition).done(function (streamInfo) {
-        var currentSrc = streamInfo.url;
 
-        var audioStreamIndex = getParameterByName('AudioStreamIndex', currentSrc);
+            var currentSrc = streamInfo.url;
 
-        if (audioStreamIndex) {
+            var audioStreamIndex = getParameterByName('AudioStreamIndex', currentSrc);
-            basePlayerState.PlayState.AudioStreamIndex = parseInt(audioStreamIndex);
-        }
-        basePlayerState.PlayState.SubtitleStreamIndex = self.currentSubtitleStreamIndex;
 
-        basePlayerState.PlayState.PlayMethod = getParameterByName('static', currentSrc) == 'true' ?
+            if (audioStreamIndex) {
-            'DirectStream' :
+                basePlayerState.PlayState.AudioStreamIndex = parseInt(audioStreamIndex);
-            'Transcode';
+            }
+            basePlayerState.PlayState.SubtitleStreamIndex = self.currentSubtitleStreamIndex;
 
-        basePlayerState.PlayState.LiveStreamId = getParameterByName('LiveStreamId', currentSrc);
+            basePlayerState.PlayState.PlayMethod = getParameterByName('static', currentSrc) == 'true' ?
-        basePlayerState.PlayState.PlaySessionId = getParameterByName('PlaySessionId', currentSrc);
+                'DirectStream' :
+                'Transcode';
 
-        basePlayerState.PlayState.MediaSourceId = mediaSource.Id;
+            basePlayerState.PlayState.LiveStreamId = getParameterByName('LiveStreamId', currentSrc);
-        basePlayerState.PlayState.CanSeek = false;
+            basePlayerState.PlayState.PlaySessionId = getParameterByName('PlaySessionId', currentSrc);
-        basePlayerState.NowPlayingItem = MediaPlayer.getNowPlayingItemForReporting(item, mediaSource);
 
-        deferred.resolveWith(null, [streamInfo]);
+            basePlayerState.PlayState.MediaSourceId = mediaSource.Id;
+            basePlayerState.PlayState.CanSeek = false;
+            basePlayerState.NowPlayingItem = MediaPlayer.getNowPlayingItemForReporting(item, mediaSource);
+
+            deferred.resolveWith(null, [streamInfo]);
+        });
     }
 
     function getPlayerState(positionTicks) {

dashboard-ui/scripts/htmlmediarenderer.js

@@ -12,7 +12,7 @@
         function hideStatusBar() {
             if (options.type == 'video' && window.StatusBar) {
                 StatusBar.backgroundColorByName("black");
-                StatusBar.overlaysWebView(true);
+                //StatusBar.overlaysWebView(true);
                 StatusBar.hide();
             }
         }
@@ -20,7 +20,7 @@
         function showStatusBar() {
             if (options.type == 'video' && window.StatusBar) {
                 StatusBar.show();
-                StatusBar.overlaysWebView(false);
+                //StatusBar.overlaysWebView(false);
             }
         }
 
@@ -355,6 +355,11 @@
             }
 
             var val = streamInfo.url;
+
+            if (AppInfo.isNativeApp && $.browser.safari) {
+                val = val.replace('file://', '');
+            }
+
             requiresSettingStartTimeOnStart = false;
             var startTime = getStartTime(val);
             var playNow = false;

dashboard-ui/scripts/librarybrowser.js

@@ -270,9 +270,26 @@
                 }, delay);
             });
 
+            function fadeOutLeftBig(elem, iterations) {
+                var keyframes = [{ opacity: '1', transform: 'none', offset: 0 },
+                  { opacity: '0', transform: 'translate3d(-2000px, 0, 0)', offset: 1 }];
+                var timing = { duration: 700, iterations: iterations };
+                return elem.animate(keyframes, timing);
+            }
+
             if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
                 tabs.addEventListener('iron-select', function () {
-                    pages.selected = this.selected;
+
+                    var selected = pages.selected;
+                    if (selected != null) {
+                        var newValue = this.selected;
+                        fadeOutLeftBig(pages.querySelectorAll('.pageTabContent')[selected], 1).onfinish = function () {
+                            pages.selected = newValue;
+                        };
+                    }
+                    else {
+                        pages.selected = this.selected;
+                    }
                 });
             }
         },
@@ -2362,12 +2379,12 @@
 
             var syncPercent = item.SyncPercent;
             if (syncPercent) {
-                return '<div class="workingSyncIndicator syncIndicator"><iron-icon icon="sync"></iron-icon></div>';
+                return '<div class="syncIndicator"><iron-icon icon="sync"></iron-icon></div>';
             }
 
             if (item.SyncStatus == 'Queued' || item.SyncStatus == 'Converting' || item.SyncStatus == 'ReadyToTransfer' || item.SyncStatus == 'Transferring') {
 
-                return '<div class="workingSyncIndicator syncIndicator"><iron-icon icon="sync"></iron-icon></div>';
+                return '<div class="syncIndicator"><iron-icon icon="sync"></iron-icon></div>';
             }
 
             return '';

dashboard-ui/scripts/librarylist.js

@@ -617,6 +617,13 @@
                 return;
             }
 
+            var url = 'itemdetails.html?id=' + itemId;
+            if (context) {
+                url += '&context=' + context;
+            }
+            Dashboard.navigate(url);
+            return;
+
             var ids = items.map(function (i) {
                 return i.Id;
             });

dashboard-ui/scripts/librarymenu.js

@@ -121,7 +121,7 @@
         var mainDrawerButton = document.querySelector('.mainDrawerButton');
 
         if (mainDrawerButton) {
-            if (AppInfo.isTouchPreferred) {
+            if (AppInfo.isTouchPreferred || $.browser.mobile) {
 
                 Events.on(mainDrawerButton, 'click', openMainDrawer);
 
@@ -178,32 +178,35 @@
             document.body.classList.add('bodyWithPopupOpen');
         }
 
-        var drawer = document.querySelector('.mainDrawerPanel .mainDrawer');
+        var pageElem = $($.mobile.activePage)[0];
 
-        ConnectionManager.user(window.ApiClient).done(function (user) {
+        if (requiresDrawerRefresh || requiresDashboardDrawerRefresh) {
 
-            if (requiresDrawerRefresh) {
+            ConnectionManager.user(window.ApiClient).done(function (user) {
-                ensureDrawerStructure(drawer);
 
-                refreshUserInfoInDrawer(user, drawer);
+                var drawer = document.querySelector('.mainDrawerPanel .mainDrawer');
-                refreshLibraryInfoInDrawer(user, drawer);
-                refreshBottomUserInfoInDrawer(user, drawer);
 
-                Events.trigger(document, 'libraryMenuCreated');
+                if (requiresDrawerRefresh) {
-                updateLibraryMenu(user.localUser);
+                    ensureDrawerStructure(drawer);
-            }
 
-            var pageElem = $($.mobile.activePage)[0];
+                    refreshUserInfoInDrawer(user, drawer);
+                    refreshLibraryInfoInDrawer(user, drawer);
+                    refreshBottomUserInfoInDrawer(user, drawer);
 
-            if (requiresDrawerRefresh || requiresDashboardDrawerRefresh) {
+                    Events.trigger(document, 'libraryMenuCreated');
-                refreshDashboardInfoInDrawer(pageElem, user, drawer);
+                    updateLibraryMenu(user.localUser);
-                requiresDashboardDrawerRefresh = false;
+                }
-            }
 
-            requiresDrawerRefresh = false;
+                if (requiresDrawerRefresh || requiresDashboardDrawerRefresh) {
+                    refreshDashboardInfoInDrawer(pageElem, user, drawer);
+                    requiresDashboardDrawerRefresh = false;
+                }
 
-            updateLibraryNavLinks(pageElem);
+                requiresDrawerRefresh = false;
-        });
+            });
+        }
+
+        updateLibraryNavLinks(pageElem);
 
         document.querySelector('.mainDrawerPanel #drawer').classList.add('verticalScrollingDrawer');
     }
@@ -714,26 +717,33 @@
                 lnkMediaFolder.classList.remove('selectedMediaFolder');
             }
         }
+    }
 
+    function updateTabLinks(page) {
         var context = getParameterByName('context');
 
-        if (context !== 'playlists') {
+        var elems = page.querySelectorAll('.scopedLibraryViewNav a');
 
-            elems = page.querySelectorAll('.scopedLibraryViewNav a');
+        var id = page.classList.contains('liveTvPage') || page.classList.contains('channelsPage') || page.classList.contains('metadataEditorPage') || page.classList.contains('reportsPage') || page.classList.contains('mySyncPage') || page.classList.contains('allLibraryPage') ?
+            '' :
+            getTopParentId() || '';
 
-            for (i = 0, length = elems.length; i < length; i++) {
+        if (!id) {
+            return;
+        }
 
-                var lnk = elems[i];
+        for (i = 0, length = elems.length; i < length; i++) {
-                var src = lnk.href;
 
-                if (src.indexOf('#') != -1) {
+            var lnk = elems[i];
-                    continue;
+            var src = lnk.href;
-                }
 
-                src = replaceQueryString(src, 'topParentId', id);
+            if (src.indexOf('#') != -1) {
-
+                continue;
-                lnk.href = src;
             }
+
+            src = replaceQueryString(src, 'topParentId', id);
+
+            lnk.href = src;
         }
     }
 
@@ -792,7 +802,9 @@
 
         var page = this;
 
-        requiresDashboardDrawerRefresh = true;
+        if (page.classList.contains('type-interior')) {
+            requiresDashboardDrawerRefresh = true;
+        }
 
         onPageBeforeShowDocumentReady(page);
 
@@ -861,7 +873,12 @@
             if (AppInfo.enableBottomTabs) {
                 page.classList.add('noSecondaryNavPage');
 
-                document.querySelector('.footer').classList.add('footerOverBottomTabs');
+                if (page.classList.contains('pageWithAbsoluteTabs')) {
+                    document.querySelector('.footer').classList.add('footerOverBottomTabs');
+                }
+                else {
+                    document.querySelector('.footer').classList.remove('footerOverBottomTabs');
+                }
 
             } else {
 
@@ -927,6 +944,7 @@
             // Scroll back up so in case vertical scroll was messed with
             window.scrollTo(0, 0);
         }
+        updateTabLinks(page);
     }
 
     function initHeadRoom(elem) {

dashboard-ui/scripts/livetvchannels.js

@@ -96,16 +96,16 @@
     function updateFilterControls(page) {
 
         var query = getQuery();
-        $('#chkFavorite', page).checked(query.IsFavorite == true);
+        $('.chkFavorite', page).checked(query.IsFavorite == true);
-        $('#chkLikes', page).checked(query.IsLiked == true);
+        $('.chkLikes', page).checked(query.IsLiked == true);
-        $('#chkDislikes', page).checked(query.IsDisliked == true);
+        $('.chkDislikes', page).checked(query.IsDisliked == true);
     }
 
     window.LiveTvPage.initChannelsTab = function (page, tabContent) {
 
         var viewPanel = page.querySelector('.channelViewPanel');
 
-        $('#chkFavorite', viewPanel).on('change', function () {
+        $('.chkFavorite', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
@@ -115,7 +115,7 @@
         });
 
 
-        $('#chkLikes', viewPanel).on('change', function () {
+        $('.chkLikes', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;
@@ -124,7 +124,7 @@
             reloadItems(tabContent, viewPanel);
         });
 
-        $('#chkDislikes', viewPanel).on('change', function () {
+        $('.chkDislikes', viewPanel).on('change', function () {
 
             var query = getQuery();
             query.StartIndex = 0;

dashboard-ui/scripts/mediaplayer-video.js

@@ -891,28 +891,29 @@
 
             requirejs(['videorenderer'], function () {
 
-                var streamInfo = self.createStreamInfo('Video', item, mediaSource, startPosition);
+                self.createStreamInfo('Video', item, mediaSource, startPosition).done(function (streamInfo) {
 
-                // Huge hack alert. Safari doesn't seem to like if the segments aren't available right away when playback starts
+                    // Huge hack alert. Safari doesn't seem to like if the segments aren't available right away when playback starts
-                // This will start the transcoding process before actually feeding the video url into the player
+                    // This will start the transcoding process before actually feeding the video url into the player
-                if ($.browser.safari && !mediaSource.RunTimeTicks) {
+                    if ($.browser.safari && !mediaSource.RunTimeTicks) {
 
-                    Dashboard.showLoadingMsg();
+                        Dashboard.showLoadingMsg();
 
-                    ApiClient.ajax({
+                        ApiClient.ajax({
-                        type: 'GET',
+                            type: 'GET',
-                        url: streamInfo.url.replace('master.m3u8', 'live.m3u8')
+                            url: streamInfo.url.replace('master.m3u8', 'live.m3u8')
-                    }).always(function () {
+                        }).always(function () {
 
-                        Dashboard.hideLoadingMsg();
+                            Dashboard.hideLoadingMsg();
 
-                    }).done(function () {
+                        }).done(function () {
+                            self.playVideoInternal(item, mediaSource, startPosition, streamInfo, callback);
+                        });
+
+                    } else {
                         self.playVideoInternal(item, mediaSource, startPosition, streamInfo, callback);
-                    });
+                    }
-
+                });
-                } else {
-                    self.playVideoInternal(item, mediaSource, startPosition, streamInfo, callback);
-                }
             });
         };
 

dashboard-ui/scripts/mediaplayer.js

@@ -291,8 +291,6 @@
 
             profile.ContainerProfiles = [];
 
-            var maxAudioChannels = isVlc ? '6' : '2';
-
             profile.CodecProfiles = [];
             profile.CodecProfiles.push({
                 Type: 'Audio',
@@ -303,16 +301,6 @@
                 }]
             });
 
-            profile.CodecProfiles.push({
-                Type: 'VideoAudio',
-                Codec: 'mp3',
-                Conditions: [{
-                    Condition: 'LessThanEqual',
-                    Property: 'AudioChannels',
-                    Value: maxAudioChannels
-                }]
-            });
-
             if (!isVlc) {
                 profile.CodecProfiles.push({
                     Type: 'VideoAudio',
@@ -340,7 +328,7 @@
                     {
                         Condition: 'LessThanEqual',
                         Property: 'AudioChannels',
-                        Value: maxAudioChannels
+                        Value: '6'
                     }
                 ]
             });
@@ -641,17 +629,18 @@
                 if (validatePlaybackInfoResult(result)) {
 
                     self.currentMediaSource = result.MediaSources[0];
-                    var streamInfo = self.createStreamInfo(self.currentItem.MediaType, self.currentItem, self.currentMediaSource, ticks);
+                    self.createStreamInfo(self.currentItem.MediaType, self.currentItem, self.currentMediaSource, ticks).done(function (streamInfo) {
 
-                    if (!streamInfo.url) {
+                        if (!streamInfo.url) {
-                        MediaController.showPlaybackInfoErrorMessage('NoCompatibleStream');
+                            MediaController.showPlaybackInfoErrorMessage('NoCompatibleStream');
-                        self.stop();
+                            self.stop();
-                        return false;
+                            return;
-                    }
+                        }
 
-                    self.currentSubtitleStreamIndex = subtitleStreamIndex;
+                        self.currentSubtitleStreamIndex = subtitleStreamIndex;
 
-                    changeStreamToUrl(mediaRenderer, playSessionId, streamInfo, streamInfo.startTimeTicksOffset || 0);
+                        changeStreamToUrl(mediaRenderer, playSessionId, streamInfo, streamInfo.startTimeTicksOffset || 0);
+                    });
                 }
             });
         };
@@ -915,6 +904,8 @@
 
         self.createStreamInfo = function (type, item, mediaSource, startPosition) {
 
+            var deferred = $.Deferred();
+
             var mediaUrl;
             var contentType;
             var startTimeTicksOffset = 0;
@@ -1018,13 +1009,32 @@
                 }
             }
 
-            return {
+            var resultInfo = {
                 url: mediaUrl,
                 mimeType: contentType,
                 startTimeTicksOffset: startTimeTicksOffset,
                 startPositionInSeekParam: startPositionInSeekParam,
                 playMethod: playMethod
             };
+
+            if (playMethod == 'DirectPlay' && mediaSource.Protocol == 'File') {
+
+                require(['localassetmanager'], function () {
+
+                    LocalAssetManager.translateFilePath(resultInfo.url).done(function (path) {
+
+                        resultInfo.url = path;
+                        Logger.log('LocalAssetManager.translateFilePath: path: ' + resultInfo.url + ' result: ' + path);
+                        deferred.resolveWith(null, [resultInfo]);
+                    });
+                });
+
+            }
+            else {
+                deferred.resolveWith(null, [resultInfo]);
+            }
+
+            return deferred.promise();
         };
 
         self.lastBitrateDetect = 0;
@@ -1872,65 +1882,67 @@
 
         function playAudioInternal(item, mediaSource, startPositionTicks) {
 
-            var streamInfo = self.createStreamInfo('Audio', item, mediaSource, startPositionTicks);
+            self.createStreamInfo('Audio', item, mediaSource, startPositionTicks).done(function (streamInfo) {
-            var audioUrl = streamInfo.url;
-            self.startTimeTicksOffset = streamInfo.startTimeTicksOffset;
 
-            var initialVolume = self.getSavedVolume();
+                var audioUrl = streamInfo.url;
+                self.startTimeTicksOffset = streamInfo.startTimeTicksOffset;
 
-            var mediaRenderer = new AudioRenderer({
+                var initialVolume = self.getSavedVolume();
-                poster: self.getPosterUrl(item)
-            });
 
-            Events.on(mediaRenderer, "volumechange.mediaplayerevent", function () {
+                var mediaRenderer = new AudioRenderer({
+                    poster: self.getPosterUrl(item)
+                });
 
-                Logger.log('audio element event: volumechange');
+                Events.on(mediaRenderer, "volumechange.mediaplayerevent", function () {
 
-                self.onVolumeChanged(this);
+                    Logger.log('audio element event: volumechange');
 
-            });
+                    self.onVolumeChanged(this);
 
-            $(mediaRenderer).one("playing.mediaplayerevent", function () {
+                });
 
-                Logger.log('audio element event: playing');
+                $(mediaRenderer).one("playing.mediaplayerevent", function () {
 
-                // For some reason this is firing at the start, so don't bind until playback has begun
+                    Logger.log('audio element event: playing');
-                Events.on(this, 'ended', self.onPlaybackStopped);
 
-                $(this).one('ended', self.playNextAfterEnded);
+                    // For some reason this is firing at the start, so don't bind until playback has begun
+                    Events.on(this, 'ended', self.onPlaybackStopped);
 
-                self.onPlaybackStart(this, item, mediaSource);
+                    $(this).one('ended', self.playNextAfterEnded);
 
-            }).on("pause.mediaplayerevent", function () {
+                    self.onPlaybackStart(this, item, mediaSource);
 
-                Logger.log('audio element event: pause');
+                }).on("pause.mediaplayerevent", function () {
 
-                self.onPlaystateChange(this);
+                    Logger.log('audio element event: pause');
 
-                // In the event timeupdate isn't firing, at least we can update when this happens
+                    self.onPlaystateChange(this);
-                self.setCurrentTime(self.getCurrentTicks());
 
-            }).on("playing.mediaplayerevent", function () {
+                    // In the event timeupdate isn't firing, at least we can update when this happens
+                    self.setCurrentTime(self.getCurrentTicks());
 
-                Logger.log('audio element event: playing');
+                }).on("playing.mediaplayerevent", function () {
 
-                self.onPlaystateChange(this);
+                    Logger.log('audio element event: playing');
 
-                // In the event timeupdate isn't firing, at least we can update when this happens
+                    self.onPlaystateChange(this);
-                self.setCurrentTime(self.getCurrentTicks());
 
-            }).on("timeupdate.mediaplayerevent", onTimeUpdate);
+                    // In the event timeupdate isn't firing, at least we can update when this happens
+                    self.setCurrentTime(self.getCurrentTicks());
 
-            self.currentMediaRenderer = mediaRenderer;
+                }).on("timeupdate.mediaplayerevent", onTimeUpdate);
-            self.currentDurationTicks = self.currentMediaSource.RunTimeTicks;
 
-            mediaRenderer.init().done(function () {
+                self.currentMediaRenderer = mediaRenderer;
+                self.currentDurationTicks = self.currentMediaSource.RunTimeTicks;
 
-                // Set volume first to avoid an audible change
+                mediaRenderer.init().done(function () {
-                mediaRenderer.volume(initialVolume);
 
-                mediaRenderer.setCurrentSrc(streamInfo, item, mediaSource);
+                    // Set volume first to avoid an audible change
-                self.streamInfo = streamInfo;
+                    mediaRenderer.volume(initialVolume);
+
+                    mediaRenderer.setCurrentSrc(streamInfo, item, mediaSource);
+                    self.streamInfo = streamInfo;
+                });
             });
         }
 

dashboard-ui/scripts/syncactivity.js

@@ -22,6 +22,39 @@
         });
     }
 
+    function getSyncStatusBanner(job) {
+
+        var opacity = '.85';
+        var background = 'rgba(204,51,51,' + opacity + ')';
+        var text = Globalize.translate('SyncJobStatus' + job.Status);
+
+        if (job.Status == 'Completed') {
+            background = 'rgba(82, 181, 75, ' + opacity + ')';
+        }
+        else if (job.Status == 'CompletedWithError') {
+
+        }
+        else if (job.Status == 'Queued') {
+            background = 'rgba(51, 136, 204, ' + opacity + ')';
+        }
+        else if (job.Status == 'ReadyToTransfer') {
+            background = 'rgba(51, 136, 204, ' + opacity + ')';
+        }
+        else if (job.Status == 'Transferring') {
+            background = 'rgba(72, 0, 255, ' + opacity + ')';
+        }
+        else if (job.Status == 'Converting') {
+            background = 'rgba(255, 106, 0, ' + opacity + ')';
+        }
+
+        var html = '';
+        html += '<div class="syncStatusBanner" data-status="' + job.Status + '" style="background-color:' + background + ';position:absolute;top:0;right:0;padding:.5em .5em; text-align:left;color: #fff; font-weight: 500; text-transform:uppercase; border-bottom-left-radius: 3px;">';
+        html += text;
+        html += '</div>';
+
+        return html;
+    }
+
     function getSyncJobHtml(page, job, cardBoxCssClass, syncJobPage) {
 
         var html = '';
@@ -54,42 +87,23 @@
 
         html += '<div class="cardImage coveredCardImage lazy" data-src="' + imgUrl + '" style="' + style + '">';
 
-        if (job.Progress && job.Progress < 100) {
+        var progress = job.Progress || 0;
-            html += '<div class="cardFooter fullCardFooter lightCardFooter">';
+
-            html += "<div class='cardText cardProgress'>";
+        var footerClass = 'cardFooter fullCardFooter lightCardFooter';
-            html += '<progress class="itemProgressBar" min="0" max="100" value="' + job.Progress + '"></progress>';
+
-            html += "</div>";
+        if (progress == 0 || progress >= 100) {
-            html += "</div>";
+            footerClass += ' hide';
         }
 
+        html += '<div class="' + footerClass + '">';
+        html += "<div class='cardText cardProgress'>";
+        html += '<progress class="itemProgressBar" min="0" max="100" value="' + progress + '"></progress>';
+        html += "</div>";
+        html += "</div>";
+
         html += "</div>";
 
-        var opacity = '.85';
+        html += getSyncStatusBanner(job);
-        var background = 'rgba(204,51,51,' + opacity + ')';
-        var text = Globalize.translate('SyncJobStatus' + job.Status);
-
-        if (job.Status == 'Completed') {
-            background = 'rgba(82, 181, 75, ' + opacity + ')';
-        }
-        else if (job.Status == 'CompletedWithError') {
-
-        }
-        else if (job.Status == 'Queued') {
-            background = 'rgba(51, 136, 204, ' + opacity + ')';
-        }
-        else if (job.Status == 'ReadyToTransfer') {
-            background = 'rgba(51, 136, 204, ' + opacity + ')';
-        }
-        else if (job.Status == 'Transferring') {
-            background = 'rgba(72, 0, 255, ' + opacity + ')';
-        }
-        else if (job.Status == 'Converting') {
-            background = 'rgba(255, 106, 0, ' + opacity + ')';
-        }
-
-        html += '<div class="syncStatusBanner" style="background-color:' + background + ';position:absolute;top:0;right:0;padding:.5em .5em; text-align:left;color: #fff; font-weight: 500; text-transform:uppercase; border-bottom-left-radius: 3px;">';
-        html += text;
-        html += '</div>';
 
         // cardContent
         html += "</a>";
@@ -139,8 +153,17 @@
         return html;
     }
 
+    var lastDataLoad = 0;
+
     function loadData(page, jobs) {
 
+        if ((new Date().getTime() - lastDataLoad) < 60000) {
+            refreshData(page, jobs);
+            return;
+        }
+
+        lastDataLoad = new Date().getTime();
+
         var html = '';
         var lastTargetName = '';
 
@@ -195,6 +218,46 @@
         }
     }
 
+    function refreshData(page, jobs) {
+
+        for (var i = 0, length = jobs.length; i < length; i++) {
+
+            var job = jobs[i];
+            refreshJob(page, job);
+        }
+    }
+
+    function refreshJob(page, job) {
+
+        var card = page.querySelector('.card[data-id=\'' + job.Id + '\']');
+
+        if (!card) {
+            return;
+        }
+
+        var banner = card.querySelector('.syncStatusBanner');
+
+        if (banner.getAttribute('data-status') == job.Status) {
+            var elem = document.createElement('div');
+            elem.innerHTML = getSyncStatusBanner(job);
+            elem = elem.querySelector('.syncStatusBanner');
+            elem.parentNode.removeChild(elem);
+
+            banner.parentNode.replaceChild(elem, banner);
+        }
+
+        var progress = job.Progress || 0;
+        var cardFooter = card.querySelector('.cardFooter');
+
+        if (progress == 0 || progress >= 100) {
+            cardFooter.classList.add('hide');
+        }
+        else {
+            cardFooter.classList.remove('hide');
+            cardFooter.querySelector('.itemProgressBar').value = progress;
+        }
+    }
+
     function showJobMenu(page, elem) {
 
         var card = $(elem).parents('.card');
@@ -265,6 +328,9 @@
 
                 loadData(page, response.Items);
 
+                setTimeout(function () {
+                    loadData(page, response.Items);
+                }, 2000);
                 Dashboard.hideLoadingMsg();
 
             });
@@ -314,6 +380,7 @@
     $(document).on('pageshowready', ".syncActivityPage", function () {
 
         var page = this;
+        lastDataLoad = 0;
 
         Dashboard.getPluginSecurityInfo().done(function (pluginSecurityInfo) {
 

dashboard-ui/scripts/syncjob.js

@@ -85,6 +85,10 @@
         }
         html += '</div>';
 
+        html += '<div secondary style="padding-top:5px;">';
+        html += '<paper-progress class="mini" style="width:100%;" value="' + (jobItem.Progress || 0) + '"></paper-progress>';
+        html += '</div>';
+
         html += '</paper-item-body>';
 
         if (hasActions) {

dashboard-ui/themes/ios.css

@@ -21,7 +21,7 @@
 }
 
     .viewMenuBar.semiTransparent {
-        background-color: rgba(28, 28, 28, .8);
+        background-color: rgba(28, 28, 28, .75);
     }
 
     .libraryViewNav a {
@@ -192,198 +192,3 @@ paper-tab {
     /* Eliminate transparency to prevent clicks from passing through to the elements underneath */
     background-color: rgb(26,26,26);
 }
-
-
-/* Checkboxes */
-input[type='checkbox'] {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -ms-appearance: none;
-    -o-appearance: none;
-    appearance: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    height: 31px;
-    width: 51px;
-    position: relative;
-    border-radius: 16px;
-    cursor: pointer;
-    outline: 0;
-    z-index: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    -webkit-transition-duration: 600ms;
-    -moz-transition-duration: 600ms;
-    transition-duration: 600ms;
-    -webkit-transition-timing-function: ease-in-out;
-    -moz-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    -webkit-touch-callout: none;
-    -webkit-text-size-adjust: none;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-user-select: none;
-}
-
-.ui-body-a input[type='checkbox'] {
-    background-color: #e5e5e5;
-}
-
-.ui-body-b input[type='checkbox'] {
-    background-color: #1f1f1f;
-}
-
-input[type='checkbox']::before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    height: 27px;
-    width: 47px;
-    content: ' ';
-    position: absolute;
-    left: 2px;
-    top: 2px;
-    border-radius: 16px;
-    z-index: 1;
-    -webkit-transition-duration: 300ms;
-    -moz-transition-duration: 300ms;
-    transition-duration: 300ms;
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
-    transform: scale(1);
-}
-
-.ui-body-a input[type='checkbox']::before {
-    background-color: #ffffff;
-}
-
-.ui-body-b input[type='checkbox']::before {
-    background-color: #000;
-}
-
-input[type='checkbox']::after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    height: 27px;
-    width: 27px;
-    content: ' ';
-    position: absolute;
-    border-radius: 27px;
-    background: #ffffff;
-    z-index: 2;
-    top: 2px;
-    left: 2px;
-    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 4px 11px 0px rgba(0, 0, 0, 0.08), -1px 3px 3px 0px rgba(0, 0, 0, 0.14);
-    -webkit-transition: -webkit-transform 300ms, width 280ms;
-    -moz-transition: -moz-transform 300ms, width 280ms;
-    transition: transform 300ms, width 280ms;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    -webkit-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
-    -moz-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
-    transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
-}
-
-input[type='checkbox']:checked {
-    background-color: #4CD964;
-    background-image: -webkit-linear-gradient(-90deg, #4CD964 0%, #4dd865 100%);
-    background-image: linear-gradient(-180deg,#4CD964 0%, #4dd865 100%);
-}
-
-    input[type='checkbox']:checked::after {
-        -webkit-transform: translate3d(16px, 0, 0);
-        -moz-transform: translate3d(16px, 0, 0);
-        -ms-transform: translate3d(16px, 0, 0);
-        -o-transform: translate3d(16px, 0, 0);
-        transform: translate3d(16px, 0, 0);
-        right: 18px;
-        left: inherit;
-    }
-
-input[type='checkbox']:active::after {
-    width: 35px;
-}
-
-input[type='checkbox']:checked::before, input[type='checkbox']:active::before {
-    -webkit-transform: scale(0);
-    -moz-transform: scale(0);
-    -ms-transform: scale(0);
-    -o-transform: scale(0);
-    transform: scale(0);
-}
-
-input[type='checkbox']:disabled {
-    opacity: 0.5;
-    cursor: default;
-    -webkit-transition: none;
-    -moz-transition: none;
-    transition: none;
-}
-
-    input[type='checkbox']:disabled:active::before, input[type='checkbox']:disabled:active::after, input[type='checkbox']:disabled:checked:active::before, input[type='checkbox']:disabled:checked::before {
-        width: 27px;
-        -webkit-transition: none;
-        -moz-transition: none;
-        transition: none;
-    }
-
-    input[type='checkbox']:disabled:active::before {
-        height: 27px;
-        width: 41px;
-        -webkit-transform: translate3d(6px, 0, 0);
-        -moz-transform: translate3d(6px, 0, 0);
-        -ms-transform: translate3d(6px, 0, 0);
-        -o-transform: translate3d(6px, 0, 0);
-        transform: translate3d(6px, 0, 0);
-    }
-
-    input[type='checkbox']:disabled:checked:active::before {
-        height: 27px;
-        width: 27px;
-        -webkit-transform: scale(0);
-        -moz-transform: scale(0);
-        -ms-transform: scale(0);
-        -o-transform: scale(0);
-        transform: scale(0);
-    }
-
-.ui-body-a input[type='checkbox'] {
-    background-color: #e5e5e5;
-}
-
-.ui-body-b input[type='checkbox'] {
-    background-color: #151515;
-}
-
-.ui-body-a input[type='checkbox']::before {
-    background-color: #ffffff;
-}
-
-.ui-body-b input[type='checkbox']::before {
-    background-color: #000;
-}
-
-.ui-body-a input[type='checkbox']::after {
-    background: #ffffff;
-}
-
-.ui-body-b input[type='checkbox']::after {
-    background: #444;
-}
-
-input[type='checkbox']:checked {
-    background-color: #4CD964;
-    background-image: -webkit-linear-gradient(-90deg, #4CD964 0%, #4dd865 100%);
-    background-image: linear-gradient(-180deg,#4CD964 0%, #4dd865 100%);
-}

dashboard-ui/thirdparty/jquerymobile-1.4.5/jqm.popup.css

@@ -1,63 +1,81 @@
-.ui-popup-open .ui-header-fixed,
+.ui-popup.ui-body-a {
+    background: #f4f4f4;
+}
+.ui-popup.ui-body-b {
+    background: #222;
+}
+.ui-popup-open .ui-header-fixed,
 .ui-popup-open .ui-footer-fixed {
-	position: absolute !important; /* See issues #4816, #4844 and #4874 and popup.js */
+    position: absolute !important; /* See issues #4816, #4844 and #4874 and popup.js */
 }
+
 .ui-popup-screen {
-	background-image: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
+    background-image: url("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); /* Necessary to set some form of background to ensure element is clickable in IE6/7. While legacy IE won't understand the data-URI'd image, it ensures no additional requests occur in all other browsers with little overhead. */
-	top: 0;
+    top: 0;
-	left: 0;
+    left: 0;
-	right: 0;
+    right: 0;
-	bottom: 1px;
+    bottom: 1px;
-	position: absolute;
+    position: absolute;
-	filter: Alpha(Opacity=0);
+    filter: Alpha(Opacity=0);
-	opacity: 0;
+    opacity: 0;
-	z-index: 1099;
+    z-index: 1099;
-}
-.ui-popup-screen.in {
-	opacity: 0.5;
-	filter: Alpha(Opacity=50);
-}
-.ui-popup-screen.out {
-	opacity: 0;
-	filter: Alpha(Opacity=0);
 }
+
+    .ui-popup-screen.in {
+        opacity: 0.5;
+        filter: Alpha(Opacity=50);
+    }
+
+    .ui-popup-screen.out {
+        opacity: 0;
+        filter: Alpha(Opacity=0);
+    }
+
 .ui-popup-container {
-	z-index: 1100;
+    z-index: 1100;
-	display: inline-block;
+    display: inline-block;
-	position: absolute;
+    position: absolute;
-	padding: 0;
+    padding: 0;
-	outline: 0;
+    outline: 0;
 }
+
 .ui-popup {
-	position: relative;
+    position: relative;
-}
-.ui-popup.ui-body-inherit {
-	border-width: 1px;
-	border-style: solid;
 }
+
+    .ui-popup.ui-body-inherit {
+        border-width: 1px;
+        border-style: solid;
+    }
+
 .ui-popup-hidden {
-	left: 0;
+    left: 0;
-	top: 0;
+    top: 0;
-	position: absolute !important;
+    position: absolute !important;
-	visibility: hidden;
+    visibility: hidden;
 }
+
 .ui-popup-truncate {
-	height: 1px;
+    height: 1px;
-	width: 1px;
+    width: 1px;
-	margin: -1px;
+    margin: -1px;
-	overflow: hidden;
+    overflow: hidden;
-	clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
 }
+
 .ui-popup.ui-content,
 .ui-popup .ui-content {
-	overflow: visible;
+    overflow: visible;
 }
+
 .ui-popup > .ui-header {
-	border-top-width: 0;
+    border-top-width: 0;
 }
+
 .ui-popup > .ui-footer {
-	border-bottom-width: 0;
+    border-bottom-width: 0;
 }
+
 .ui-popup > p,
 .ui-popup > h1,
 .ui-popup > h2,
@@ -65,12 +83,14 @@
 .ui-popup > h4,
 .ui-popup > h5,
 .ui-popup > h6 {
-	margin: .5em .4375em;
+    margin: .5em .4375em;
 }
+
 .ui-popup > span {
-	display: block;
+    display: block;
-	margin: .5em .4375em;
+    margin: .5em .4375em;
 }
+
 .ui-popup-container .ui-content > p,
 .ui-popup-container .ui-content > h1,
 .ui-popup-container .ui-content > h2,
@@ -78,11 +98,13 @@
 .ui-popup-container .ui-content > h4,
 .ui-popup-container .ui-content > h5,
 .ui-popup-container .ui-content > h6 {
-	margin: .5em 0;
+    margin: .5em 0;
 }
+
 .ui-popup-container .ui-content > span {
-	margin: 0;
+    margin: 0;
 }
+
 .ui-popup-container .ui-content > p:first-child,
 .ui-popup-container .ui-content > h1:first-child,
 .ui-popup-container .ui-content > h2:first-child,
@@ -90,8 +112,9 @@
 .ui-popup-container .ui-content > h4:first-child,
 .ui-popup-container .ui-content > h5:first-child,
 .ui-popup-container .ui-content > h6:first-child {
-	margin-top: 0;
+    margin-top: 0;
 }
+
 .ui-popup-container .ui-content > p:last-child,
 .ui-popup-container .ui-content > h1:last-child,
 .ui-popup-container .ui-content > h2:last-child,
@@ -99,81 +122,121 @@
 .ui-popup-container .ui-content > h4:last-child,
 .ui-popup-container .ui-content > h5:last-child,
 .ui-popup-container .ui-content > h6:last-child {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
+
 .ui-popup > img {
-	max-width: 100%;
+    max-width: 100%;
-	max-height: 100%;
+    max-height: 100%;
-	vertical-align: middle;
+    vertical-align: middle;
 }
+
 .ui-popup:not(.ui-content) > img:only-child,
 .ui-popup:not(.ui-content) > .ui-btn-left:first-child + img:last-child,
 .ui-popup:not(.ui-content) > .ui-btn-right:first-child + img:last-child {
-	-webkit-border-radius: inherit;
+    -webkit-border-radius: inherit;
-	border-radius: inherit;
+    border-radius: inherit;
 }
+
 .ui-popup iframe {
-	vertical-align: middle;
+    vertical-align: middle;
 }
+
 .ui-popup > .ui-btn-left,
 .ui-popup > .ui-btn-right {
-	position: absolute; 
+    position: absolute;
-	top: -11px;
+    top: -11px;
-	margin: 0;
+    margin: 0;
-	z-index: 1101;
+    z-index: 1101;
 }
+
 .ui-popup > .ui-btn-left {
-	left: -11px;
+    left: -11px;
 }
+
 .ui-popup > .ui-btn-right {
-	right: -11px;
+    right: -11px;
 }
 
 
 @-webkit-keyframes fadein {
-    from { opacity: 0; }
+    from {
-    to { opacity: 1; }
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
+
 @-moz-keyframes fadein {
-    from { opacity: 0; }
+    from {
-    to { opacity: 1; }
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
+
 @keyframes fadein {
-    from { opacity: 0; }
+    from {
-    to { opacity: 1; }
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 @-webkit-keyframes fadeout {
-    from { opacity: 1; }
+    from {
-    to { opacity: 0; }
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
 }
+
 @-moz-keyframes fadeout {
-    from { opacity: 1; }
+    from {
-    to { opacity: 0; }
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
 }
+
 @keyframes fadeout {
-    from { opacity: 1; }
+    from {
-    to { opacity: 0; }
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
 }
 
 .fade.out {
-	opacity: 0;
+    opacity: 0;
-	-webkit-animation-duration: 125ms;
+    -webkit-animation-duration: 125ms;
-	-webkit-animation-name: fadeout;
+    -webkit-animation-name: fadeout;
-	-moz-animation-duration: 125ms;
+    -moz-animation-duration: 125ms;
-	-moz-animation-name: fadeout;
+    -moz-animation-name: fadeout;
-	animation-duration: 125ms;
+    animation-duration: 125ms;
-	animation-name: fadeout;
+    animation-name: fadeout;
 }
 
 .fade.in {
-	opacity: 1;
+    opacity: 1;
-	-webkit-animation-duration: 225ms;
+    -webkit-animation-duration: 225ms;
-	-webkit-animation-name: fadein;
+    -webkit-animation-name: fadein;
-	-moz-animation-duration: 225ms;
+    -moz-animation-duration: 225ms;
-	-moz-animation-name: fadein;
+    -moz-animation-name: fadein;
-	animation-duration: 225ms;
+    animation-duration: 225ms;
-	animation-name: fadein;
+    animation-name: fadein;
 }
 
 
@@ -222,32 +285,32 @@
  **/
 
 .ui-popup-arrow-container {
-	width: 20px;
+    width: 20px;
-	height: 20px;
+    height: 20px;
 }
 
-/* aside from the "infinities" (-1000,2000), triangle height is used */
+    /* aside from the "infinities" (-1000,2000), triangle height is used */
-.ui-popup-arrow-container.ui-popup-arrow-l {
+    .ui-popup-arrow-container.ui-popup-arrow-l {
-	left: -10px;
+        left: -10px;
-	clip: rect(-1000px,10px,2000px,-1000px);
+        clip: rect(-1000px,10px,2000px,-1000px);
-}
+    }
 
-.ui-popup-arrow-container.ui-popup-arrow-t {
+    .ui-popup-arrow-container.ui-popup-arrow-t {
-	top: -10px;
+        top: -10px;
-	clip: rect(-1000px,2000px,10px,-1000px);
+        clip: rect(-1000px,2000px,10px,-1000px);
-}
+    }
 
-.ui-popup-arrow-container.ui-popup-arrow-r {
+    .ui-popup-arrow-container.ui-popup-arrow-r {
-	right: -10px;
+        right: -10px;
-	clip: rect(-1000px,2000px,2000px,10px);
+        clip: rect(-1000px,2000px,2000px,10px);
-}
+    }
 
-.ui-popup-arrow-container.ui-popup-arrow-b {
+    .ui-popup-arrow-container.ui-popup-arrow-b {
-	bottom: -10px;
+        bottom: -10px;
-	clip: rect(10px,2000px,1000px,-1000px);
+        clip: rect(10px,2000px,1000px,-1000px);
-}
+    }
 
-/**
+    /**
  * For each side, the arrow is twice the desired size and its corner is aligned
  * with the edge of the container:
  *                                           
@@ -268,85 +331,82 @@
  *                     (clips arrow)
  **/
 
-.ui-popup-arrow-container .ui-popup-arrow {
+    .ui-popup-arrow-container .ui-popup-arrow {
-	/* (4*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
+        /* (4*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
-	width: 28.284271247px;
+        width: 28.284271247px;
-	height: 28.284271247px;
+        height: 28.284271247px;
-	border-width: 1px;
+        border-width: 1px;
-	border-style: solid;
+        border-style: solid;
-}
+    }
 
-.ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow {
+    .ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow {
-	left: -4.142135623px;
+        left: -4.142135623px;
-	top: 5.857864376px;
+        top: 5.857864376px;
-}
+    }
 
-.ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow {
+    .ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow {
-	left: -4.142135623px;
+        left: -4.142135623px;
-	top: -14.142135623px;
+        top: -14.142135623px;
-}
+    }
 
-.ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow {
+    .ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow {
-	left: 5.857864376px;
+        left: 5.857864376px;
-	top: -4.142135623px;
+        top: -4.142135623px;
-}
+    }
 
-.ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow {
+    .ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow {
-	left: -14.142135623px;
+        left: -14.142135623px;
-	top: -4.142135623px;
+        top: -4.142135623px;
-}
+    }
 
-/* Fix rotation center for oldIE - see http://www.useragentman.com/IETransformsTranslator/ */
+    /* Fix rotation center for oldIE - see http://www.useragentman.com/IETransformsTranslator/ */
-.ui-popup-arrow-container.ui-popup-arrow-t.ie .ui-popup-arrow {
+    .ui-popup-arrow-container.ui-popup-arrow-t.ie .ui-popup-arrow {
-    margin-left: -5.857864376269049px;
+        margin-left: -5.857864376269049px;
-    margin-top: -7.0710678118654755px;
+        margin-top: -7.0710678118654755px;
-}
+    }
-.ui-popup-arrow-container.ui-popup-arrow-b.ie .ui-popup-arrow {
-    margin-left: -5.857864376269049px;
-    margin-top: -4.142135623730951px;
-}
 
-.ui-popup-arrow-container.ui-popup-arrow-l.ie .ui-popup-arrow {
+    .ui-popup-arrow-container.ui-popup-arrow-b.ie .ui-popup-arrow {
-    margin-left: -7.0710678118654755px;
+        margin-left: -5.857864376269049px;
-    margin-top: -5.857864376269049px;
+        margin-top: -4.142135623730951px;
-}
+    }
-.ui-popup-arrow-container.ui-popup-arrow-r.ie .ui-popup-arrow {
+
-    margin-left: -4.142135623730951px;
+    .ui-popup-arrow-container.ui-popup-arrow-l.ie .ui-popup-arrow {
-    margin-top: -5.857864376269049px;
+        margin-left: -7.0710678118654755px;
-}
+        margin-top: -5.857864376269049px;
+    }
+
+    .ui-popup-arrow-container.ui-popup-arrow-r.ie .ui-popup-arrow {
+        margin-left: -4.142135623730951px;
+        margin-top: -5.857864376269049px;
+    }
 
 /* structure */
 .ui-popup > .ui-popup-arrow-guide {
-	position: absolute;
+    position: absolute;
-	left: 0;
+    left: 0;
-	right: 0;
+    right: 0;
-	top: 0;
+    top: 0;
-	bottom: 0;
+    bottom: 0;
-	visibility: hidden;
+    visibility: hidden;
 }
 
 .ui-popup-arrow-container {
-	position: absolute;
+    position: absolute;
 }
 
 .ui-popup-arrow {
-	-webkit-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
-	-moz-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
-	transform: rotate(45deg);
+    transform: rotate(45deg);
-	position: absolute;
+    position: absolute;
-	overflow: hidden;
+    overflow: hidden;
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 .ui-popup-arrow-container.ie .ui-popup-arrow {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
+    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
-	filter: progid:DXImageTransform.Microsoft.Matrix(
+    filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand');
-	      	M11=0.7071067811865474,
-        	M12=-0.7071067811865477,
-        	M21=0.7071067811865477,
-        	M22=0.7071067811865474,
-        	SizingMethod='auto expand');
 }
 
 
@@ -355,8 +415,8 @@
 
 /* Popup arrow */
 .ui-popup.ui-corner-all > .ui-popup-arrow-guide {
-	left: .6em /*{global-radii-blocks}*/;
+    left: .6em /*{global-radii-blocks}*/;
-	right: .6em /*{global-radii-blocks}*/;
+    right: .6em /*{global-radii-blocks}*/;
-	top: .6em /*{global-radii-blocks}*/;
+    top: .6em /*{global-radii-blocks}*/;
-	bottom: .6em /*{global-radii-blocks}*/;
+    bottom: .6em /*{global-radii-blocks}*/;
 }

dashboard-ui/thirdparty/paper-button-style.css

@@ -391,9 +391,29 @@ paper-menu-item {
     border-color: #eee;
 }
 
+.ui-body-a paper-checkbox #checkbox.checked.paper-checkbox {
+    background-color: #52B54B;
+    border-color: #52B54B;
+}
+
 .ui-body-b paper-checkbox #checkbox.checked.paper-checkbox {
-    background-color: #2ad;
+    background-color: #52B54B;
-    border-color: #2ad;
+    border-color: #52B54B;
+}
+
+paper-checkbox #checkboxContainer {
+    width: 22px !important;
+    height: 22px !important;
+}
+
+paper-checkbox paper-ripple {
+    top: -13px !important;
+    left: -13px !important;
+}
+
+paper-checkbox #checkmark {
+    border-right-width: 4px !important;
+    border-bottom-width: 4px !important;
 }
 
 .paperCheckboxList paper-checkbox {
@@ -533,3 +553,36 @@ paper-dialog paper-radio-group paper-radio-button {
     padding: 0 1em;
     margin-top: 1em;
 }
+
+.paperToggleContainer {
+    padding: .5em 0;
+}
+
+    .paperToggleContainer paper-toggle-button {
+        vertical-align: middle;
+    }
+
+    .paperToggleContainer > span {
+        vertical-align: middle;
+        margin-left: 1em;
+    }
+
+paper-toggle-button #toggleBar {
+    background-color: #080808;
+}
+
+paper-toggle-button #toggleButton, paper-toggle-button[checked] #toggleBar {
+    background-color: #52B54B;
+}
+
+paper-toggle-button paper-ripple {
+    color: #52B54B;
+}
+
+.ui-body-b paper-progress #progressContainer {
+    background-color: #222 !important;
+}
+
+paper-progress.mini #progressContainer {
+    height: 3px !important;
+}

dashboard-ui/vulcanize-out.html

@@ -16614,7 +16614,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
       background-color: var(--paper-progress-container-color, --google-grey-300);
     }
 
-    :host(.transiting) > * {
+    :host(.transiting) #primaryProgress,
+    :host(.transiting) #secondaryProgress {
       -webkit-transition-property: -webkit-transform;
       transition-property: transform;