update play buttons

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.483",
+  "version": "1.4.484",
-  "_release": "1.4.483",
+  "_release": "1.4.484",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.483",
+    "tag": "1.4.484",
-    "commit": "e82bad6f9385c42f8eb95f8d7107dd973717abd1"
+    "commit": "ed56575477c1115b8583613135206ed49841c70f"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

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

@@ -127,3 +127,13 @@
     opacity: .7;
     margin-bottom: 0;
 }
+
+@-webkit-keyframes repaintChrome {
+    from {
+        padding: 0;
+    }
+
+    to {
+        padding: 0;
+    }
+}

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

@@ -1,4 +1,4 @@
-define(['css!./emby-checkbox', 'registerElement'], function () {
+define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (browser, dom) {
     'use strict';
 
     var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
@@ -19,6 +19,22 @@
         }
     }
 
+    var enableRefreshHack = browser.tizen || browser.orsay || browser.operaTv || browser.web0s ? true : false;
+
+    function forceRefresh(loading) {
+
+        var elem = document.body;
+
+        elem.style.webkitAnimationName = 'repaintChrome';
+        elem.style.webkitAnimationDelay = (loading === true ? '500ms' : '');
+        elem.style.webkitAnimationDuration = '10ms';
+        elem.style.webkitAnimationIterationCount = '1';
+
+        setTimeout(function () {
+            elem.style.webkitAnimationName = '';
+        }, (loading === true ? 520 : 20));
+    }
+
     EmbyCheckboxPrototype.attachedCallback = function () {
 
         if (this.getAttribute('data-embycheckbox') === 'true') {
@@ -47,6 +63,23 @@
         labelTextElement.classList.add('checkboxLabel');
 
         this.addEventListener('keydown', onKeyDown);
+
+        if (enableRefreshHack) {
+
+            forceRefresh(true);
+            dom.addEventListener(this, 'click', forceRefresh, {
+                passive: true
+            });
+            dom.addEventListener(this, 'blur', forceRefresh, {
+                passive: true
+            });
+            dom.addEventListener(this, 'focus', forceRefresh, {
+                passive: true
+            });
+            dom.addEventListener(this, 'change', forceRefresh, {
+                passive: true
+            });
+        }
     };
 
     document.registerElement('emby-checkbox', {

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingfields.js

@@ -63,7 +63,7 @@
 
     function getDvrFeatureCode() {
 
-        return appHost.dvrFeatureCode || 'dvr';
+        return 'dvr';
     }
 
     function showSingleRecordingFields(context, programId, apiClient) {

dashboard-ui/components/apphost.js

@@ -187,7 +187,6 @@ define(['appStorage', 'browser'], function (appStorage, browser) {
     var version = window.dashboardVersion || '3.0';
 
     return {
-        dvrFeatureCode: 'dvr',
         getWindowState: function () {
             return document.windowState || 'Normal';
         },

dashboard-ui/css/librarybrowser.css

@@ -494,6 +494,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     padding: .5em 0;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
 }
 
     .mainDetailButtons button, .recordingFields button {

dashboard-ui/itemdetails.html

@@ -12,7 +12,7 @@
     <div id="itemBackdrop" class="itemBackdrop noBackdrop">
         <div class="itemBackdropContent">
         </div>
-        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}"><i class="md-icon">play_arrow</i></button>
+        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="playmenu"><i class="md-icon">play_arrow</i></button>
     </div>
 
     <div class="detailLogo"></div>
@@ -38,7 +38,10 @@
                     </div>
 
                     <div class="mainDetailButtons">
-                        <button is="emby-button" type="button" class="raised subdued btnPlay btnPlaySimple hide">
+                        <button is="emby-button" type="button" class="raised subdued btnPlay btnPlaySimple hide" data-mode="resume">
+                            <span>${ButtonResume}</span>
+                        </button>
+                        <button is="emby-button" type="button" class="raised subdued btnPlay btnPlaySimple hide" data-mode="play">
                             <span>${ButtonPlay}</span>
                         </button>
                         <button is="emby-button" type="button" class="raised subdued btnInstantMix hide">

dashboard-ui/scripts/itemdetailpage.js

@@ -2197,25 +2197,38 @@
 
     function showPlayMenu(item, target) {
 
-        playbackManager.play({
+        require(['playMenu'], function (playMenu) {
-            items: [item],
+            playMenu.show({
-            startPositionTicks: item.UserData ? item.UserData.PlaybackPositionTicks : 0
+                item: item,
+                positionTo: target
+            });
         });
     }
 
-    function playCurrentItem(button) {
+    function playCurrentItem(button, mode) {
 
-        if (currentItem.Type == 'Program') {
+        var item = currentItem;
 
-            ApiClient.getLiveTvChannel(currentItem.ChannelId, Dashboard.getCurrentUserId()).then(function (channel) {
+        if (item.Type === 'Program') {
 
-                showPlayMenu(channel, button);
+            ApiClient.getLiveTvChannel(item.ChannelId, Dashboard.getCurrentUserId()).then(function (channel) {
+
+                playbackManager.play({
+                    items: [channel]
+                });
             });
 
             return;
         }
 
-        showPlayMenu(currentItem, button);
+        if (mode === 'playmenu') {
+            showPlayMenu(item, button);
+        } else {
+            playbackManager.play({
+                items: [item],
+                startPositionTicks: item.UserData && mode === 'resume' ? item.UserData.PlaybackPositionTicks : 0
+            });
+        }
     }
 
     function deleteTimer(page, params, id) {
@@ -2254,7 +2267,9 @@
     window.ItemDetailPage = new itemDetailPage();
 
     function onPlayClick() {
-        playCurrentItem(this);
+
+        var mode = this.getAttribute('data-mode');
+        playCurrentItem(this, mode);
     }
 
     function onInstantMixClick() {

dashboard-ui/scripts/site.js

@@ -2548,7 +2548,7 @@ var AppInfo = {};
                     return navigator.serviceWorker.ready;
                 }).then(function (reg) {
 
-                    if (reg.sync) {
+                    if (reg && reg.sync) {
                         // https://github.com/WICG/BackgroundSync/blob/master/explainer.md
                         return reg.sync.register('emby-sync').then(function () {
                             window.SyncRegistered = Dashboard.isConnectMode();