support timeshifting with safari mac and edge mobile

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

@@ -13,7 +13,7 @@ define(['apphost'], function (appHost) {
             item = item.ProgramInfo || item;
         }
 
-        var name = (item.Type === 'Program' && item.IsSeries ? item.EpisodeTitle : item.Name) || '';
+        var name = ((item.Type === 'Program' || item.Type === 'Recording') && item.IsSeries ? item.EpisodeTitle : item.Name) || '';
 
         if (item.Type === "TvChannel") {
 

dashboard-ui/css/librarybrowser.css

@@ -380,6 +380,16 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         display: flex;
         margin-bottom: 3.6em;
     }
+
+    .shadedDetailSection, .detailPagePrimaryContainer {
+        background: rgba(0,0,0,.7);
+        padding: 1em;
+        box-shadow: 0 0 10px 1px black;
+    }
+
+    .detailSection h1 {
+        opacity: .9;
+    }
 }
 
 @media all and (max-width: 1200px) {

dashboard-ui/itemdetails.html

@@ -1,5 +1,29 @@
 <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-theme="b" data-backbutton="true">
 
+    <style>
+        @media all and (min-width: 800px) {
+
+            .itemBackdrop {
+                display: none;
+            }
+
+            .detailPagePrimaryContainer {
+                display: flex;
+                margin-bottom: 3.6em;
+            }
+
+            .shadedDetailSection, .detailPagePrimaryContainer {
+                background: rgba(0, 0, 0, .7) !important;
+                padding: 1em !important;
+                box-shadow: 0 0 10px 1px black !important;
+            }
+
+            .detailSection h1 {
+                opacity: .9;
+            }
+        }
+    </style>
+
     <div id="itemBackdrop" class="itemBackdrop noBackdrop">
         <div class="itemBackdropContent">
         </div>
@@ -179,7 +203,7 @@
                 <div id="themeVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
             </div>
 
-            <div class="detailSection audioVideoMediaInfo hide">
+            <div class="detailSection audioVideoMediaInfo hide shadedDetailSection">
                 <h1>${HeaderMediaInfo}</h1>
                 <div>
                     <div class="splitVersionContainer" style="border-bottom: 1px solid #444; padding: 1em 0;">

dashboard-ui/scripts/htmlmediarenderer.js

@@ -195,13 +195,8 @@
                     //return false;
                 }
 
-                // For now don't do this in edge because we lose some native audio support
-                if (browser.edge && browser.mobile) {
-                    return false;
-                }
-
                 // hls.js is only in beta. needs more testing.
-                if (browser.safari) {
+                if (browser.safari && !browser.osx) {
                     return false;
                 }
 
@@ -225,17 +220,20 @@
             // Safari often displays the poster under the video and it doesn't look good
             var poster = !browser.safari && options.poster ? (' poster="' + options.poster + '"') : '';
 
+            // playsinline new for iOS 10
+            // https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
+
             // Can't autoplay in these browsers so we need to use the full controls
             if (requiresNativeControls && AppInfo.isNativeApp && browser.android) {
-                html += '<video class="itemVideo" id="itemVideo" preload="metadata" autoplay="autoplay"' + poster + ' webkit-playsinline>';
+                html += '<video class="itemVideo" id="itemVideo" preload="metadata" autoplay="autoplay"' + poster + ' webkit-playsinline playsinline>';
             }
             else if (requiresNativeControls) {
-                html += '<video class="itemVideo" id="itemVideo" preload="metadata" autoplay="autoplay"' + poster + ' controls="controls" webkit-playsinline>';
+                html += '<video class="itemVideo" id="itemVideo" preload="metadata" autoplay="autoplay"' + poster + ' controls="controls" webkit-playsinline playsinline>';
             }
             else {
 
                 // Chrome 35 won't play with preload none
-                html += '<video class="itemVideo" id="itemVideo" preload="metadata" autoplay="autoplay"' + poster + ' webkit-playsinline>';
+                html += '<video class="itemVideo" id="itemVideo" preload="metadata" autoplay="autoplay"' + poster + ' webkit-playsinline playsinline>';
             }
 
             html += '</video>';
@@ -605,15 +603,6 @@
             currentAssRenderer = null;
         }
 
-        function fetchSubtitles(track) {
-
-            return ApiClient.ajax({
-                url: track.url.replace('.vtt', '.js'),
-                type: 'GET',
-                dataType: 'json'
-            });
-        }
-
         function setTrackForCustomDisplay(videoElement, track) {
 
             if (!track) {
@@ -819,7 +808,7 @@
 
             if (AppInfo.isNativeApp && browser.safari) {
 
-                if (navigator.userAgent.toLowerCase().indexOf('ipad') != -1) {
+                if (browser.ipad) {
                     // Need to disable it in order to support picture in picture
                     return false;
                 }

dashboard-ui/scripts/itemdetailpage.js

@@ -129,9 +129,7 @@
             renderDetails(page, item, context);
 
             if (dom.getWindowSize().innerWidth >= 800) {
-                backdrop.setBackdrops([item], {
+                backdrop.setBackdrops([item]);
-                    blur: 20
-                }, false);
             } else {
                 backdrop.clear();
             }

dashboard-ui/scripts/site.js

@@ -1087,6 +1087,10 @@ var AppInfo = {};
             return;
         }
 
+        if (AppInfo.isNativeApp) {
+            return;
+        }
+
         var date = new Date();
         var month = date.getMonth();
         var day = date.getDate();