Merge branch 'master' of https://github.com/jellyfin/jellyfin-web into item-detail-page-

# Conflicts:
#	src/assets/css/librarybrowser.css
#	src/itemdetails.html

src/components/backdrop/backdrop.js

@@ -1,4 +1,4 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom) {
+define(['browser', 'connectionManager', 'playbackManager', 'dom', "userSettings", 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom, userSettings) {
     'use strict';
 
     function enableAnimation(elem) {
@@ -236,16 +236,22 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdro
         return true;
     }
 
+    function enabled() {
+        return userSettings.enableBackdrops();
+    }
+
     var rotationInterval;
     var currentRotatingImages = [];
     var currentRotationIndex = -1;
     function setBackdrops(items, imageOptions, enableImageRotation) {
-        var images = getImageUrls(items, imageOptions);
+        if (enabled()) {
+            var images = getImageUrls(items, imageOptions);
 
-        if (images.length) {
-            startRotation(images, enableImageRotation);
-        } else {
-            clearBackdrop();
+            if (images.length) {
+                startRotation(images, enableImageRotation);
+            } else {
+                clearBackdrop();
+            }
         }
     }
 
@@ -310,4 +316,4 @@ define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdro
         clear: clearBackdrop,
         externalBackdrop: externalBackdrop
     };
-});
+});

src/components/cardbuilder/card.css

@@ -18,6 +18,7 @@ button {
     padding: 0;
     display: block;
     color: inherit !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     cursor: pointer;
     contain: layout style;
@@ -79,6 +80,8 @@ button {
     margin: 0.6em;
     transition: none;
     border: 0 solid transparent;
+    /* These both are needed in case cardBox is a button */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     contain: layout;
     contain: style;
@@ -146,6 +149,7 @@ button {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -179,6 +183,7 @@ button {
     margin: 0 !important;
     /* Needed in safari */
     height: 100%;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     contain: strict;
 }
@@ -342,6 +347,7 @@ button {
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     color: inherit;
     vertical-align: middle;

src/components/dialogHelper/dialoghelper.css

@@ -16,6 +16,7 @@
 .dialog {
     margin: 0;
     border-radius: .2em;
+    -webkit-font-smoothing: antialiased;
     border: 0;
     padding: 0;
     will-change: transform, opacity;

src/components/emby-scroller/emby-scroller.js

@@ -155,7 +155,7 @@ define(['scroller', 'dom', 'layoutManager', 'inputManager', 'focusManager', 'bro
             initCenterFocus(this, this.scroller);
         }
 
-        if (bindHeader) {
+        if (bindHeader && layoutManager.mobile) {
             initHeadroom(this);
         }
 

src/components/filterdialog/style.css

@@ -5,6 +5,7 @@
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     margin-right: 0 !important;
+    -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
     max-height: none !important;
     max-width: none !important
@@ -28,8 +29,8 @@
 
 @media all and (min-width:400px) {
     .dynamicFilterDialog {
-        width: 300px;
-        margin-left: -150px !important;
+        width: 20.16em;
+        margin-left: -10.08em !important;
         left: 50% !important
     }
 }

src/components/homesections/homesections.css

@@ -13,11 +13,13 @@
 .homeLibraryIcon {
     margin-left: .5em;
     margin-right: .5em;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
 .homeLibraryText {
     white-space: nowrap;
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }

src/components/htmlvideoplayer/plugin.js

@@ -95,23 +95,19 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     }
 
     function getMediaStreamAudioTracks(mediaSource) {
-
         return mediaSource.MediaStreams.filter(function (s) {
             return s.Type === 'Audio';
         });
     }
 
     function getMediaStreamTextTracks(mediaSource) {
-
         return mediaSource.MediaStreams.filter(function (s) {
             return s.Type === 'Subtitle';
         });
     }
 
     function zoomIn(elem) {
-
         return new Promise(function (resolve, reject) {
-
             var duration = 240;
             elem.style.animation = 'htmlvideoplayer-zoomin ' + duration + 'ms ease-in normal';
             dom.addEventListener(elem, dom.whichAnimationEvent(), resolve, {
@@ -1429,7 +1425,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                         if (!appHost.supports('htmlvideoautoplay')) {
                             html += '<video class="' + cssClass + '" preload="metadata" autoplay="autoplay" controls="controls" webkit-playsinline playsinline>';
                         } else {
-
                             // Chrome 35 won't play with preload none
                             html += '<video class="' + cssClass + '" preload="metadata" autoplay="autoplay" webkit-playsinline playsinline>';
                         }
@@ -1805,7 +1800,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
     };
 
     HtmlVideoPlayer.prototype.getAspectRatio = function () {
-        return this._currentAspectRatio;
+        return this._currentAspectRatio || "auto";
     };
 
     HtmlVideoPlayer.prototype.getSupportedAspectRatios = function () {

src/components/htmlvideoplayer/style.css

@@ -42,6 +42,7 @@ video::-webkit-media-controls {
 .htmlvideoplayer::cue {
     background-color: transparent;
     text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
+    -webkit-font-smoothing: antialiased;
     font-family: inherit;
 }
 

src/components/images/style.css

@@ -18,9 +18,21 @@
 
 .lazy-image-fadein {
     opacity: 0;
+    -webkit-animation-duration: .8s;
+    -moz-animation-duration: .8s;
+    -o-animation-duration: .8s;
     animation-duration: .8s;
+    -webkit-animation-name: popInAnimation;
+    -moz-animation-name: popInAnimation;
+    -o-animation-name: popInAnimation;
     animation-name: popInAnimation;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    -o-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
+    -webkit-animation-timing-function: cubic-bezier(0,0,.5,1);
+    -moz-animation-timing-function: cubic-bezier(0,0,.5,1);
+    -o-animation-timing-function: cubic-bezier(0,0,.5,1);
     animation-timing-function: cubic-bezier(0,0,.5,1);
 }
 

src/components/indicators/indicators.css

@@ -14,6 +14,7 @@
 
 .indicator {
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -42,6 +43,7 @@
 
 .countIndicator {
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -53,6 +55,7 @@
 
 .playedIndicator {
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -64,6 +67,7 @@
 .videoIndicator {
     background: #444;
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;

src/components/itemcontextmenu.js

@@ -70,7 +70,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("InstantMix"),
                     id: "instantmix",
-                    icon: "shuffle"
+                    icon: "explore"
                 });
             }
         }
@@ -178,7 +178,7 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
                 commands.push({
                     name: globalize.translate("EditImages"),
                     id: "editimages",
-                    icon: "edit"
+                    icon: "image"
                 });
             }
         }

src/components/listview/listview.css

@@ -35,6 +35,8 @@
 }
 
 .listItem-indexnumberleft {
+    min-width: 2%;
+    text-align: center;
     margin-right: 1em;
 }
 

src/components/loading/loading.css

@@ -7,11 +7,20 @@
 
 .mdlSpinnerActive {
     display: inline-block;
+    -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
     animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
 }
 
+@-webkit-keyframes mdl-spinner__container-rotate {
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
 @keyframes mdl-spinner__container-rotate {
     to {
+        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
@@ -28,6 +37,7 @@
 }
 
 .mdl-spinner__layer-1-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -36,6 +46,7 @@
 }
 
 .mdl-spinner__layer-2-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -44,6 +55,7 @@
 }
 
 .mdl-spinner__layer-3-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -52,39 +64,90 @@
 }
 
 .mdl-spinner__layer-4-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@keyframes mdl-spinner__fill-unfill-rotate {
+@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
     12.5% {
+        -webkit-transform: rotate(135deg);
         transform: rotate(135deg);
     }
 
     25% {
+        -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
     }
 
     37.5% {
+        -webkit-transform: rotate(405deg);
         transform: rotate(405deg);
     }
 
     50% {
+        -webkit-transform: rotate(540deg);
         transform: rotate(540deg);
     }
 
     62.5% {
+        -webkit-transform: rotate(675deg);
         transform: rotate(675deg);
     }
 
     75% {
+        -webkit-transform: rotate(810deg);
         transform: rotate(810deg);
     }
 
     87.5% {
+        -webkit-transform: rotate(945deg);
         transform: rotate(945deg);
     }
 
     to {
+        -webkit-transform: rotate(1080deg);
+        transform: rotate(1080deg);
+    }
+}
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+    12.5% {
+        -webkit-transform: rotate(135deg);
+        transform: rotate(135deg);
+    }
+
+    25% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    37.5% {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(540deg);
+        transform: rotate(540deg);
+    }
+
+    62.5% {
+        -webkit-transform: rotate(675deg);
+        transform: rotate(675deg);
+    }
+
+    75% {
+        -webkit-transform: rotate(810deg);
+        transform: rotate(810deg);
+    }
+
+    87.5% {
+        -webkit-transform: rotate(945deg);
+        transform: rotate(945deg);
+    }
+
+    to {
+        -webkit-transform: rotate(1080deg);
         transform: rotate(1080deg);
     }
 }
@@ -98,6 +161,32 @@
 * - https://github.com/Polymer/paper-spinner/issues/9
 * - https://code.google.com/p/chromium/issues/detail?id=436255
 */
+@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
+    from {
+        opacity: 0.99;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    26% {
+        opacity: 0;
+    }
+
+    89% {
+        opacity: 0;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0.99;
+    }
+}
+
 @keyframes mdl-spinner__layer-1-fade-in-out {
     from {
         opacity: 0.99;
@@ -124,6 +213,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    15% {
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    51% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-2-fade-in-out {
     from {
         opacity: 0;
@@ -146,6 +257,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    76% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-3-fade-in-out {
     from {
         opacity: 0;
@@ -168,6 +301,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    65% {
+        opacity: 0;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-4-fade-in-out {
     from {
         opacity: 0;
@@ -211,6 +366,7 @@
     border-color: inherit;
     border-bottom-color: transparent !important;
     border-radius: 50%;
+    -webkit-animation: none;
     animation: none;
     position: absolute;
     top: 0;
@@ -221,47 +377,91 @@
 
 .mdl-spinner__circleLeft {
     border-right-color: transparent !important;
+    -webkit-transform: rotate(129deg);
     transform: rotate(129deg);
 }
 
 .mdl-spinner__circleLeft-active {
+    -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
 .mdl-spinner__circleRight {
     left: -100%;
     border-left-color: transparent !important;
+    -webkit-transform: rotate(-129deg);
     transform: rotate(-129deg);
 }
 
 .mdl-spinner__circleRight-active {
+    -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@keyframes mdl-spinner__left-spin {
+@-webkit-keyframes mdl-spinner__left-spin {
     from {
+        -webkit-transform: rotate(130deg);
         transform: rotate(130deg);
     }
 
     50% {
+        -webkit-transform: rotate(-5deg);
         transform: rotate(-5deg);
     }
 
     to {
+        -webkit-transform: rotate(130deg);
         transform: rotate(130deg);
     }
 }
 
+@keyframes mdl-spinner__left-spin {
+    from {
+        -webkit-transform: rotate(130deg);
+        transform: rotate(130deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(-5deg);
+        transform: rotate(-5deg);
+    }
+
+    to {
+        -webkit-transform: rotate(130deg);
+        transform: rotate(130deg);
+    }
+}
+
+@-webkit-keyframes mdl-spinner__right-spin {
+    from {
+        -webkit-transform: rotate(-130deg);
+        transform: rotate(-130deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(5deg);
+        transform: rotate(5deg);
+    }
+
+    to {
+        -webkit-transform: rotate(-130deg);
+        transform: rotate(-130deg);
+    }
+}
+
 @keyframes mdl-spinner__right-spin {
     from {
+        -webkit-transform: rotate(-130deg);
         transform: rotate(-130deg);
     }
 
     50% {
+        -webkit-transform: rotate(5deg);
         transform: rotate(5deg);
     }
 
     to {
+        -webkit-transform: rotate(-130deg);
         transform: rotate(-130deg);
     }
 }

src/components/logoscreensaver/plugin.js

@@ -160,7 +160,7 @@ define(["pluginManager"], function (pluginManager) {
                     elem.classList.add("logoScreenSaver");
                     document.body.appendChild(elem);
 
-                    elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "logowhite.png") + '" />';
+                    elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "assets/img/banner-light.png") + '" />';
                 }
 
                 stopInterval();

src/components/navdrawer/navdrawer.css

@@ -9,20 +9,29 @@
 .touch-menu-la {
     background-color: #FFF;
     will-change: transform;
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
+    -o-transition: transform ease-out 40ms, left ease-out 260ms;
     transition: transform ease-out 40ms, left ease-out 260ms;
     z-index: 1099
 }
 
 .touch-menu-la.transition {
+    -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
+    -o-transition: transform ease-out 240ms, left ease-out 260ms;
     transition: transform ease-out 240ms, left ease-out 260ms
 }
 
 .drawer-open {
+    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
     box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
 }
 
 .scrollContainer {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -32,6 +41,8 @@
     background-color: #000;
     opacity: 0;
     z-index: 1098;
+    -webkit-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
     transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
     will-change: opacity;
     background-color: rgba(0, 0, 0, .3)

src/components/remotecontrol/remotecontrol.css

@@ -1,5 +1,10 @@
 .nowPlayingInfoContainer {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
     flex-direction: row
 }
 
@@ -7,6 +12,26 @@
     text-align: center
 }
 
+.btnArrowUp{
+    border-radius: 40% 40% 10% 10%;
+}
+
+.btnArrowLeft{
+    border-radius: 40% 10% 10% 40%;
+}
+
+.btnArrowRight{
+    border-radius: 10% 40% 40% 10%;
+}
+
+.btnArrowDown{
+    border-radius: 10% 10% 40% 40%;
+}
+
+.btnOk{
+    border-radius: 10%;
+}
+
 .nowPlayingPageTitle {
     margin: 0 0 .5em .5em
 }
@@ -16,20 +41,28 @@
 }
 
 .nowPlayingInfoButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap
 }
 
 .nowPlayingInfoControls,
 .nowPlayingTime {
     display: flex;
+    display: -webkit-box;
+    display: -webkit-flex
 }
 
 .nowPlayingPageImageContainer {
     width: 20%;
     margin-right: .25em;
     position: relative;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -40,9 +73,16 @@
 }
 
 .nowPlayingInfoControls {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
     flex-direction: column;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 
@@ -51,15 +91,25 @@
     left: 0;
     right: 0;
     width: 100%;
+    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: .1em solid #222;
     user-drag: none;
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none
 }
 
 @media all and (orientation:portrait) and (max-width:50em) {
     .nowPlayingInfoContainer {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: column !important;
         flex-direction: column !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
         align-items: center
     }
 
@@ -73,6 +123,8 @@
     }
 
     .nowPlayingInfoButtons {
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -100,20 +152,33 @@
 
 .nowPlayingTime {
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
     margin: 0 1em
 }
 
 .nowPlayingSecondaryButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 
 @media all and (min-width:50em) {
     .nowPlayingSecondaryButtons {
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
         flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
         justify-content: flex-end
     }
 }
@@ -130,11 +195,13 @@
 
 .smallBackdropPosterItem .cardOverlayInner>div {
     white-space: nowrap;
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
 
 .playlistIndexIndicatorImage {
+    -webkit-background-size: initial initial !important;
     background-size: initial !important;
     background-image: url(assets/img/equalizer.gif) !important;
 }
@@ -151,6 +218,9 @@
     .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
         display: none !important
     }
+    .navigationSection .collapseContent i{
+        font-size: 4em;
+    }
 }
 
 @media all and (max-width:47em) {

src/components/remotecontrol/remotecontrol.js

@@ -215,23 +215,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 context.querySelector(".sendTextSection").classList.add("hide");
             }
 
-            if (!currentPlayer.isLocalPlayer) {
+            if (-1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
                 context.querySelector(".navigationSection").classList.remove("hide");
             } else {
                 context.querySelector(".navigationSection").classList.add("hide");
             }
 
-            buttonVisible(context.querySelector(".btnArrowUp"), -1 != supportedCommands.indexOf("MoveUp"));
-            buttonVisible(context.querySelector(".btnArrowLeft"), -1 != supportedCommands.indexOf("MoveDown"));
-            buttonVisible(context.querySelector(".btnArrowRight"), -1 != supportedCommands.indexOf("MoveRight"));
-            buttonVisible(context.querySelector(".btnArrowDown"), -1 != supportedCommands.indexOf("MoveLeft"));
-            buttonVisible(context.querySelector(".btnOk"), -1 != supportedCommands.indexOf("Select"));
-            buttonVisible(context.querySelector(".btnBack"), -1 != supportedCommands.indexOf("Back"));
-            buttonVisible(context.querySelector(".btnContextMenu"), -1 != supportedCommands.indexOf("ToggleContextMenu"));
-            buttonVisible(context.querySelector(".btnShowSearch"), -1 != supportedCommands.indexOf("GoToSearch"));
-            buttonVisible(context.querySelector(".bthShowSettings"), -1 != supportedCommands.indexOf("GoToSettings"));
-            buttonVisible(context.querySelector(".btnGoHome"), -1 != supportedCommands.indexOf("GoHome"));
-
             buttonVisible(context.querySelector(".btnStop"), null != item);
             buttonVisible(context.querySelector(".btnNextTrack"), null != item);
             buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);

src/components/skinManager.js

@@ -34,15 +34,12 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
             id: "dark",
             isDefault: true,
             isDefaultServerDashboard: true
-        }, {
-            name: "Emby",
-            id: "emby"
         }, {
             name: "Light",
             id: "light"
         }, {
             name: "Purple Haze",
-            id: "purple-haze"
+            id: "purplehaze"
         }, {
             name: "Windows Media Center",
             id: "wmc"

src/components/slideshow/style.css

@@ -41,6 +41,9 @@
     height: auto;
     max-width: 100%;
     max-height: 100%;
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     position: absolute;
     left: 50%;

src/components/subtitlesync/subtitlesync.css

@@ -40,6 +40,8 @@
     margin-right: 1%;
     top: 2.5em;
     height: 1.4em;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     border-radius: .3em;
     z-index: 1; 

src/components/upnextdialog/upnextdialog.css

@@ -11,6 +11,7 @@
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     user-select: none;
+    -webkit-touch-callout: none;
 }
 
 .upNextDialog-hidden {
@@ -66,4 +67,8 @@
     border: 0;
     user-drag: none;
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }