merge branch master into itemdetailpage-layout

.gitignore

@@ -81,6 +81,9 @@ build/Release
 node_modules/
 jspm_packages/
 
+# Dependency lockfile
+package-lock.json
+
 # TypeScript v1 declaration files
 typings/
 

README.md

@@ -16,7 +16,7 @@
 <a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/?utm_source=widget">
 <img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/svg-badge.svg" alt="Translation Status"/>
 </a>
-</br>
+<br/>
 <a href="https://opencollective.com/jellyfin">
 <img alt="Donate" src="https://img.shields.io/opencollective/all/jellyfin.svg?label=backers"/>
 </a>
@@ -44,7 +44,7 @@ Jellyfin Web is the frontend used for most of the clients available for end user
 
 ### Dependencies
 
-- Yarn or NPM
+- Yarn
 
 ### Getting Started
 
@@ -53,7 +53,12 @@ Jellyfin Web is the frontend used for most of the clients available for end user
    git clone https://github.com/jellyfin/jellyfin-web.git
    cd jellyfin-web
    ```
-2. Install build dependencies in the project directory via npm.
+2. Install build dependencies in the project directory.
    ```sh
-   npm install
+   yarn install
+   ```
+
+3. Run the web client with webpack for local development.
+   ```sh
+   yarn serve
    ```

package.json

@@ -5,14 +5,18 @@
   "repository": "https://github.com/jellyfin/jellyfin-web",
   "license": "GPL-2.0-or-later",
   "devDependencies": {
+    "autoprefixer": "^9.7.3",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.0.3",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^2.1.0",
     "eslint": "^5.16.0",
     "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "postcss-loader": "^3.0.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
+    "webpack-concat-plugin": "^3.0.0",
     "webpack-dev-server": "^3.8.1",
     "webpack-merge": "^4.2.2"
   },
@@ -31,9 +35,25 @@
     "shaka-player": "^2.5.5",
     "sortablejs": "^1.9.0",
     "swiper": "^3.4.2",
-    "webcomponents.js-2": "^0.7.24",
+    "libass-wasm": "^2.1.1",
+    "webcomponents.js": "^0.7.24",
     "whatwg-fetch": "^1.1.1"
   },
+  "browserslist": [
+    "last 2 Firefox versions",
+    "last 2 Chrome versions",
+    "last 2 ChromeAndroid versions",
+    "last 2 Safari versions",
+    "last 2 iOS versions",
+    "last 2 Edge versions",
+    "Chrome 38",
+    "Chrome 47",
+    "Chrome 53",
+    "Chrome 56",
+    "Chrome 63",
+    "Explorer 11",
+    "Firefox ESR"
+  ],
   "scripts": {
     "serve": "webpack-dev-server --config webpack.dev.js --open",
     "build": "webpack --config webpack.prod.js",

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')
+    ]
+}

src/assets/css/dashboard.css

@@ -1,7 +1,6 @@
 .dashboardColumn,
 .dashboardSections {
-    -webkit-box-orient: vertical;
+    flex-direction: column;
-    -webkit-box-direction: normal
 }
 
 .dashboardFooter {
@@ -15,8 +14,6 @@
 
 progress {
     appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     margin: 0;
     background: #ccc !important
 }
@@ -76,23 +73,17 @@ progress[aria-valuenow]:before {
 div[data-role=controlgroup] a[data-role=button] {
     display: inline-block !important;
     margin: 0 !important;
-    -webkit-box-shadow: none !important;
     box-shadow: none !important;
-    -webkit-border-radius: 0;
     border-radius: 0
 }
 
 div[data-role=controlgroup] a[data-role=button]:first-child {
-    -webkit-border-bottom-left-radius: .3125em;
     border-bottom-left-radius: .3125em;
-    -webkit-border-top-left-radius: .3125em;
     border-top-left-radius: .3125em
 }
 
 div[data-role=controlgroup] a[data-role=button]:last-child {
-    -webkit-border-bottom-right-radius: .3125em;
     border-bottom-right-radius: .3125em;
-    -webkit-border-top-right-radius: .3125em;
     border-top-right-radius: .3125em
 }
 
@@ -146,23 +137,14 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .dashboardSections {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-direction: column;
     flex-direction: column
 }
 
 .dashboardColumn {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-direction: column;
     flex-direction: column;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -171,7 +153,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .dashboardSection {
-    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     margin: 0 0 2em
 }
@@ -187,11 +168,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 @media all and (min-width:70em) {
     .dashboardSections {
-        -webkit-flex-wrap: wrap;
         flex-wrap: wrap;
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: row;
         flex-direction: row
     }
 
@@ -296,7 +273,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionNowPlayingContent {
-    -webkit-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -395,7 +371,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .disabledUser {
-    -webkit-filter: grayscale(100%);
     filter: grayscale(100%)
 }
 
@@ -416,9 +391,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 a[data-role=button] {
-    -webkit-font-smoothing: antialiased;
+    background-clip: padding-box;
-    -webkit-user-select: none;
-    -webkit-background-clip: padding-box;
     cursor: pointer !important;
     font-family: inherit !important;
     font-weight: 500 !important;
@@ -430,37 +403,21 @@ a[data-role=button] {
     background: #292929 !important;
 }
 
-@-webkit-keyframes rotating {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0)
-    }
-
-    to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg)
-    }
-}
-
 @keyframes rotating {
     from {
-        -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 
     to {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
     }
 }
 
 .rotatingCircle {
-    -webkit-animation: rotating 2s linear infinite;
     animation: rotating 2s linear infinite
 }
 
 .pluginPreviewImg {
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 

src/assets/css/fonts.css

@@ -4,7 +4,6 @@ html {
 
 html {
     font-size: 93%;
-    -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }
 

src/assets/css/fonts.sized.css

@@ -25,7 +25,6 @@ h3 {
 
 /* This is supposed to be 1080p, but had to reduce the min height to account for possible browser chrome */
 @media all and (min-height: 1000px) {
-
     html {
         font-size: 27px;
     }

src/assets/css/librarybrowser.css

@@ -15,7 +15,6 @@
 .headerSelectedPlayer,
 .itemMiscInfo,
 .navMenuOptionText {
-    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
@@ -48,8 +47,6 @@
     z-index: 1;
     margin: 0 !important;
     top: 6.9em !important;
-    -webkit-transition: -webkit-transform .2s ease-out;
-    -o-transition: transform .2s ease-out;
     transition: transform .2s ease-out
 }
 
@@ -58,17 +55,14 @@
 }
 
 .headerUserImage {
-    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
-    -webkit-border-radius: 100em;
     border-radius: 100em;
     display: inline-block
 }
 
 .headerUserButtonRound div {
-    -webkit-border-radius: 100em;
     border-radius: 100em;
     background-size: cover;
     background-repeat: no-repeat;
@@ -76,7 +70,6 @@
 }
 
 .headerButton {
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -90,34 +83,25 @@
 }
 
 .pageTitle {
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
     display: inline-flex;
-    margin: 0 0 0 .5em;
+    margin: .3em 0 0 .5em;
     height: 1.7em;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-shrink: 1;
     flex-shrink: 1
 }
 
 .headerLeft,
 .skinHeader {
-    display: -webkit-box;
+    display: flex;
-    display: -webkit-flex
 }
 
 .detailButton-mobile,
 .skinHeader {
-    -webkit-flex-direction: column;
+    flex-direction: column;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal
 }
 
 .pageTitleWithLogo {
     background-position: left center;
-    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     width: 13.2em
@@ -137,7 +121,7 @@
 
 .headerLeft,
 .headerRight {
-    -webkit-box-align: center
+    justify-content: center;
 }
 
 .hiddenViewMenuBar .skinHeader {
@@ -150,12 +134,10 @@
 
 .headerLeft {
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
-    overflow: hidden
+    overflow: hidden;
+    justify-content: left;
 }
 
 .sectionTabs {
@@ -163,13 +145,8 @@
 }
 
 .headerRight {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
     justify-content: flex-end
 }
 
@@ -178,27 +155,19 @@
 }
 
 .navMenuOption {
-    display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: flex !important;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
     text-decoration: none;
     color: inherit;
     padding: .9em 0 .9em 2.4em !important;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
     font-weight: 400 !important;
     margin: 0 !important;
-    -webkit-border-radius: 0 !important;
     border-radius: 0 !important
 }
 
 .navMenuOptionIcon {
     margin-right: 1.2em;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -212,8 +181,6 @@
 }
 
 .dashboardDocument .skinBody {
-    -webkit-transition: left ease-in-out .3s, padding ease-in-out .3s;
-    -o-transition: left ease-in-out .3s, padding ease-in-out .3s;
     transition: left ease-in-out .3s, padding ease-in-out .3s;
     position: absolute;
     top: 0;
@@ -243,9 +210,7 @@
         z-index: inherit !important;
         left: 0 !important;
         top: 0 !important;
-        -webkit-transform: none !important;
         transform: none !important;
-        -webkit-box-shadow: none !important;
         box-shadow: none !important;
         width: 20.205em !important;
         font-size: 94%
@@ -282,14 +247,9 @@
     }
 
     .headerTabs {
-        -webkit-align-self: center;
         align-self: center;
         width: auto;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
         align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center;
         margin-top: -3.34em;
         position: relative;
@@ -347,8 +307,6 @@
 }
 
 .flexPageTabContent.is-active {
-    display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: flex !important
 }
 
@@ -364,7 +322,6 @@
     margin: 1.5em 0;
     background: #222;
     padding: .8em .8em .8em 3em;
-    -webkit-border-radius: .3em;
     border-radius: .3em;
     position: relative
 }
@@ -423,7 +380,6 @@
 }
 
 .itemBackdrop {
-    -webkit-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
@@ -495,8 +451,6 @@
 
 .detailPagePrimaryContent {
     position: relative;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -506,7 +460,6 @@
     position: absolute;
     top: 14.5%;
     right: 10.5%;
-    -webkit-background-size: contain;
     background-size: contain
 }
 
@@ -535,10 +488,8 @@
 }
 
 .itemDetailImage {
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     width: 100% !important;
-
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
 }
 
 @media all and (max-width:62.5em) {
@@ -606,8 +557,7 @@
 
 .detailButton-mobile,
 .mainDetailButtons {
-    display: -webkit-box;
+    display: flex;
-    display: -webkit-flex;
 }
 
 .itemName {
@@ -628,10 +578,7 @@
 
 .mainDetailButtons {
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 1em 0;
 }
@@ -639,7 +586,6 @@
 .recordingFields button {
     margin-left: 0;
     margin-right: .5em;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -650,11 +596,7 @@
 .detailButton-mobile {
     display: flex;
     flex-direction: column;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     justify-content: center;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
     margin: 0 !important;
     padding: .5em .7em !important
@@ -686,18 +628,9 @@
 }
 
 .detailButton-mobile-content {
-    display: -webkit-box;
-    display: -webkit-flex;
     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;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center
 }
 
@@ -751,21 +684,14 @@
 }
 
 .itemMiscInfo {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center
 }
 
 @media all and (max-width:31.25em) {
     .mobileDetails .itemMiscInfo {
         text-align: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -855,7 +781,6 @@
 }
 
 .btnSyncComplete i {
-    -webkit-border-radius: 100em;
     border-radius: 100em
 }
 
@@ -864,14 +789,9 @@
 }
 
 .mediaInfoIcons {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
     margin: 1em 0;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap
 }
 
@@ -896,17 +816,19 @@
     vertical-align: middle;
 }
 
+/* these next two rules are for the scroller element headers */
 .sectionTitleContainer-cards {
-    margin-bottom: 0;
+    margin: 0;
+    padding-top: 1.25em;
 }
 
-.sectionTitle-cards {
+div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
-    margin-bottom: 0;
+    margin: 0;
+    padding-top: 1.25em;
 }
 
 .sectionTitleButton {
     margin-left: 1.5em !important;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -916,22 +838,17 @@
 
 .sectionTitleIconButton {
     margin-left: 1.5em !important;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     font-size: 84% !important;
     padding: .5em !important
 }
 
 .horizontalItemsContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex
 }
 
 .sectionTitleTextButton {
     margin: 0 !important;
-    display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: inline-flex !important;
     color: inherit !important
 }
@@ -1003,8 +920,6 @@
 }
 
 .itemsViewSettingsContainer {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     justify-content: center
 }
 

src/assets/css/metadataeditor.css

@@ -28,17 +28,13 @@
 
 .jstree-wholerow-hovered {
     background: #38c !important;
-    -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
-    -webkit-box-shadow: none !important;
     box-shadow: none !important
 }
 
 .jstree-default .jstree-hovered {
     background: 0 0 !important;
-    -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
-    -webkit-box-shadow: none !important;
     box-shadow: none !important;
     color: #fff !important
 }

src/assets/css/scrollstyles.css

@@ -1,6 +1,5 @@
 .scrollX {
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
     overflow-y: hidden;
     white-space: nowrap;
 }
@@ -10,13 +9,11 @@
 }
 
 .hiddenScrollX, .layout-tv .scrollX {
-    -ms-overflow-style: none;
+    scrollbar-width: none;
-    /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
-    /*overflow: -moz-scrollbars-none;*/
 }
 
 .hiddenScrollX-forced {
-    overflow: -moz-scrollbars-none;
+    scrollbar-width: none;
 }
 
 .hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
@@ -26,25 +23,21 @@
 
 .scrollY {
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
 }
 
 .smoothScrollY {
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     scroll-behavior: smooth;
 }
 
 .hiddenScrollY, .layout-tv .smoothScrollY {
-    -ms-overflow-style: none;
+    scrollbar-width: none;
-    /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
-    /*overflow: -moz-scrollbars-none;*/
 }
 
 .hiddenScrollY-forced {
-    overflow: -moz-scrollbars-none;
+    scrollbar-width: none;
 }
 
 .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {

src/assets/css/site.css

@@ -20,18 +20,12 @@ html {
 
 .layout-mobile,
 .layout-tv {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none
 }
 
 body {
     overflow-x: hidden;
     background-color: transparent !important;
-    -webkit-font-smoothing: antialiased
 }
 
 .mainAnimatedPage {

src/assets/css/videoosd.css

@@ -1,8 +1,6 @@
 .chapterThumbTextContainer,
 .videoOsdBottom {
-    -webkit-user-select: none;
+    user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none
 }
 
 .osdPoster img,
@@ -14,13 +12,10 @@
 }
 
 .osdHeader {
-    -webkit-transition: opacity .3s ease-out;
-    -o-transition: opacity .3s ease-out;
     transition: opacity .3s ease-out;
     position: relative;
     z-index: 1;
     background: rgba(0, 0, 0, 0.7) !important;
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     color: #eee !important;
 }
@@ -34,17 +29,13 @@
 }
 
 .chapterThumbContainer {
-    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
     position: relative
 }
 
 .chapterThumb {
     background-position: center center;
-    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     border: 0;
@@ -90,20 +81,12 @@
     position: fixed;
     background-color: rgba(0, 0, 0, 0.7);
     padding: 1%;
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
     flex-direction: row;
     will-change: opacity;
-    -webkit-transition: opacity 0.3s ease-out;
-    -o-transition: opacity 0.3s ease-out;
     transition: opacity 0.3s ease-out;
     color: #fff;
-    user-select: none;
+    user-select: none
-    -webkit-touch-callout: none
 }
 
 .videoOsdBottom-hidden {
@@ -111,49 +94,35 @@
 }
 
 .osdControls {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
 .videoOsdBottom .buttons {
     padding: .25em 0 0;
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center
 }
 
 .osdVolumeSliderContainer {
     width: 9em;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
 .osdMediaInfo,
 .volumeButtons {
-    display: -webkit-box;
+    display: flex;
-    display: -webkit-flex;
+    align-items: center;
-    -webkit-box-align: center
 }
 
 .volumeButtons {
     margin: 0 .5em 0 auto;
     display: flex;
-    -webkit-align-items: center;
     align-items: center
 }
 
 .osdTimeText {
     margin-left: 1em;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none
 }
 
@@ -167,15 +136,10 @@
     position: absolute;
     height: auto;
     width: 100%;
-    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: .08em solid #222;
     user-drag: none;
-    user-select: none;
+    user-select: none
-    -moz-user-select: none;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -ms-user-select: none
 }
 
 .osdTitle,
@@ -185,7 +149,6 @@
 
 .osdMediaInfo {
     display: flex;
-    -webkit-align-items: center;
     align-items: center
 }
 
@@ -194,23 +157,14 @@
 }
 
 .osdTextContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     margin-bottom: .7em;
     padding-left: .5em
 }
 
 .osdMainTextContainer {
-    -webkit-box-align: baseline;
-    -webkit-align-items: baseline;
     align-items: baseline
 }
 
@@ -218,12 +172,13 @@
     margin-left: auto;
 }
 
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@keyframes spin {
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+    100% {
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+        transform:rotate(360deg);
+    }
+}
+
 .osdMediaStatus .animate {
-    -webkit-animation:spin 4s linear infinite;
-    -moz-animation:spin 4s linear infinite;
     animation:spin 4s linear infinite;
 }
 

src/bundle.js

@@ -17,7 +17,7 @@ _define("fetch", function() {
 });
 
 // flvjs
-var flvjs = require("flv.js");
+var flvjs = require("flv.js").default;
 _define("flvjs", function() {
     return flvjs;
 });
@@ -54,7 +54,7 @@ _define("native-promise-only", function() {
 });
 
 // resize-observer-polyfill
-var resize = require("resize-observer-polyfill");
+var resize = require("resize-observer-polyfill").default;
 _define("resize-observer-polyfill", function() {
     return resize;
 });
@@ -73,13 +73,13 @@ _define("swiper", function() {
 });
 
 // sortable
-var sortable = require("sortablejs");
+var sortable = require("sortablejs").default;
 _define("sortable", function() {
     return sortable;
 });
 
 // webcomponents
-var webcomponents = require("webcomponents.js-2");
+var webcomponents = require("webcomponents.js/webcomponents-lite");
 _define("webcomponents", function() {
     return webcomponents
 });
@@ -90,3 +90,9 @@ require("libjass/libjass.css");
 _define("libjass", function() {
     return libjass;
 });
+
+// libass-wasm
+var libass_wasm = require("libass-wasm");
+_define("JavascriptSubtitlesOctopus", function() {
+    return libass_wasm;
+});

src/components/actionsheet/actionsheet.css

@@ -37,6 +37,7 @@
     box-shadow: none;
     flex-shrink: 0;
     border-radius: 0;
+    margin: 0;
 }
 
 .actionSheetMenuItem:focus {

src/components/actionsheet/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "actionsheet.js"
-}

src/components/apphost.js

@@ -278,6 +278,7 @@ define(["appSettings", "browser", "events", "htmlMediaHelper"], function (appSet
         features.push("targetblank");
         // allows users to connect to more than one server
         //features.push("multiserver");
+        features.push("screensaver");
 
         if (!browser.orsay && !browser.tizen && !browser.msie && (browser.firefox || browser.ps4 || browser.edge || cueSupported())) {
             features.push("subtitleappearancesettings");

src/components/backdrop/backdrop.js

@@ -1,4 +1,4 @@
-define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./style'], function (browser, connectionManager, playbackManager, dom) {
+define(['browser', 'connectionManager', 'playbackManager', 'dom', 'css!./backdrop'], function (browser, connectionManager, playbackManager, dom) {
     'use strict';
 
     function enableAnimation(elem) {

src/components/backdrop/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "backdrop.js"
-}

src/components/backdropscreensaver/plugin.js

@@ -0,0 +1,56 @@
+define(["connectionManager"], function (connectionManager) {
+
+    return function () {
+
+        var self = this;
+
+        self.name = "Backdrop ScreenSaver";
+        self.type = "screensaver";
+        self.id = "backdropscreensaver";
+        self.supportsAnonymous = false;
+
+        var currentSlideshow;
+
+        self.show = function () {
+
+            var query = {
+                ImageTypes: "Backdrop",
+                EnableImageTypes: "Backdrop",
+                IncludeItemTypes: "Movie,Series,MusicArtist",
+                SortBy: "Random",
+                Recursive: true,
+                Fields: "Taglines",
+                ImageTypeLimit: 1,
+                StartIndex: 0,
+                Limit: 200
+            };
+
+            var apiClient = connectionManager.currentApiClient();
+            apiClient.getItems(apiClient.getCurrentUserId(), query).then(function (result) {
+
+                if (result.Items.length) {
+
+                    require(["slideshow"], function (slideshow) {
+
+                        var newSlideShow = new slideshow({
+                            showTitle: true,
+                            cover: true,
+                            items: result.Items
+                        });
+
+                        newSlideShow.show();
+                        currentSlideshow = newSlideShow;
+                    });
+                }
+            });
+        };
+
+        self.hide = function () {
+
+            if (currentSlideshow) {
+                currentSlideshow.hide();
+                currentSlideshow = null;
+            }
+        };
+    }
+});

src/components/cardbuilder/card.css

@@ -18,7 +18,6 @@ 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;
@@ -80,10 +79,9 @@ 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 style;
+    contain: layout;
+    contain: style;
 }
 
 .card.show-focus:not(.show-animation) .cardBox {
@@ -148,7 +146,6 @@ button {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -182,7 +179,6 @@ button {
     margin: 0 !important;
     /* Needed in safari */
     height: 100%;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     contain: strict;
 }
@@ -247,7 +243,7 @@ button {
 }
 
 .coveredImage {
-    background-size: 100% 100%;
+    background-size: cover;
     background-position: center center;
 }
 
@@ -346,7 +342,6 @@ 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;
@@ -627,7 +622,7 @@ button {
 
 @media (min-width: 43.75em) {
     .overflowSquareCard, .overflowPortraitCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
@@ -643,13 +638,13 @@ button {
     }
 
     .overflowSquareCard, .overflowPortraitCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
 @media (orientation: landscape) and (min-width: 48.125em) {
     .overflowBackdropCard, .overflowSmallBackdropCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
@@ -661,13 +656,13 @@ button {
 
 @media (min-width: 50em) {
     .overflowSquareCard, .overflowPortraitCard {
-        width: 18.4vw;
+        width: 18.5vw;
     }
 }
 
 @media (min-width: 75em) {
     .overflowBackdropCard, .overflowSmallBackdropCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 
     .overflowSquareCard, .overflowPortraitCard {

src/components/cardbuilder/cardBuilder.js

@@ -892,7 +892,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                         } else {
 
                             if (item.EndDate && item.ProductionYear) {
-                                lines.push(item.ProductionYear + ' - ' + datetime.parseISO8601Date(item.EndDate).getFullYear());
+                                var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
+                                lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
                             } else {
                                 lines.push(item.ProductionYear || '');
                             }

src/components/dialog/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "dialog.js"
-}

src/components/dialogHelper/dialoghelper.css

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

src/components/dialogHelper/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "dialogHelper.js"
-}

src/components/directorybrowser/directorybrowser.js

@@ -223,9 +223,9 @@ define(['loading', 'dialogHelper', 'dom', 'listViewStyle', 'emby-input', 'paper-
 
     function getDefaultPath(options) {
         if (options.path) {
-            Promise.resolve(options.path);
+            return Promise.resolve(options.path);
         } else {
-            ApiClient.getJSON(ApiClient.getUrl("Environment/DefaultDirectoryBrowser")).then(
+            return ApiClient.getJSON(ApiClient.getUrl("Environment/DefaultDirectoryBrowser")).then(
                 function(result) {
                     return result.Path || "";
                 }, function() {

src/components/emby-input/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-input.js"
-}

src/components/emby-radio/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-radio.js"
-}

src/components/emby-scrollbuttons/emby-scrollbuttons.css

@@ -6,6 +6,7 @@
     justify-content: center;
     min-width:104px;
     min-height:24px;
+    padding-top: 1.25em;
     z-index: 1;
     color: #ffffff;
     display: flex;

src/components/emby-scroller/emby-scroller.css

@@ -8,21 +8,15 @@
 }
 
 /* align first card in scroller to heading */
-.emby-scroller .card:first-of-type > .cardBox {
+.itemsContainer > .card > .cardBox {
     margin-left: 0;
+    margin-right: 1.2em;
 }
 
-/* align heading for normal item containers */
+.layout-tv .emby-scroller,
-/* still not ideal solution but better than the last method */
+.layout-mobile .emby-scroller {
-.verticalSection > .itemsContainer .cardBox {
-    margin-left: 0;
-}
-
-@media all and (max-width:50em) {
-    .emby-scroller {
     padding-left: 3.3%;
     padding-right: 3.3%;
     margin-left: 0;
     margin-right: 0;
 }
-}

src/components/emby-tabs/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "emby-tabs.js"
-}

src/components/filterdialog/style.css

@@ -5,7 +5,6 @@
     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

src/components/headroom/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "headroom.js"
-}

src/components/homescreensettings/homescreensettings.template.html

@@ -104,32 +104,21 @@
     </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
-
+        <h2 class="sectionTitle">${HeaderLibraryOrder}</h2>
-        <h2 class="sectionTitle">
+        <div class="paperList viewOrderList"></div>
-            ${HeaderLibraryOrder}
-        </h2>
-        <div class="paperList viewOrderList">
-
     </div>
 
-    </div>
+    <div class="perLibrarySettings"></div>
-
-    <div class="perLibrarySettings">
-
-    </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
         <label class="checkboxContainer">
             <input class="chkHidePlayedFromLatest" type="checkbox" is="emby-checkbox" />
             <span>${HideWatchedContentFromLatestMedia}</span>
         </label>
-
     </div>
 
     <div class="verticalSection verticalSection-extrabottompadding">
-        <h2 class="sectionTitle">
+        <h2 class="sectionTitle">${HeaderLibraryFolders}</h2>
-            ${HeaderLibraryFolders}
-        </h2>
         <div>
             <p>${LabelSelectFolderGroups}</p>
             <div class="folderGroupList"></div>

src/components/homesections/homesections.css

@@ -13,13 +13,11 @@
 .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/htmlaudioplayer/plugin.js

@@ -2,11 +2,8 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     "use strict";
 
     function getDefaultProfile() {
-
         return new Promise(function (resolve, reject) {
-
             require(['browserdeviceprofile'], function (profileBuilder) {
-
                 resolve(profileBuilder({}));
             });
         });
@@ -14,28 +11,22 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
 
     var fadeTimeout;
     function fade(instance, elem, startingVolume) {
-
         instance._isFadingOut = true;
 
         // Need to record the starting volume on each pass rather than querying elem.volume
         // This is due to iOS safari not allowing volume changes and always returning the system volume value
-
         var newVolume = Math.max(0, startingVolume - 0.15);
         console.log('fading volume to ' + newVolume);
         elem.volume = newVolume;
 
         if (newVolume <= 0) {
-
             instance._isFadingOut = false;
             return Promise.resolve();
         }
 
         return new Promise(function (resolve, reject) {
-
             cancelFadeTimeout();
-
             fadeTimeout = setTimeout(function () {
-
                 fade(instance, elem, newVolume).then(resolve, reject);
             }, 100);
         });
@@ -50,7 +41,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     }
 
     function supportsFade() {
-
         if (browser.tv) {
             // Not working on tizen.
             // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive
@@ -68,9 +58,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     }
 
     function enableHlsPlayer(url, item, mediaSource, mediaType) {
-
         if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) {
-
             return Promise.reject();
         }
 
@@ -86,21 +74,18 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
                     url: url,
                     type: 'HEAD'
                 }).then(function (response) {
-
                     var contentType = (response.headers.get('Content-Type') || '').toLowerCase();
                     if (contentType === 'application/x-mpegurl') {
                         resolve();
                     } else {
                         reject();
                     }
-
                 }, reject);
             });
         });
     }
 
     function HtmlAudioPlayer() {
-
         var self = this;
 
         self.name = 'Html Audio Player';
@@ -114,11 +99,9 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
 
             self._started = false;
             self._timeUpdated = false;
-
             self._currentTime = null;
 
             var elem = createMediaElement(options);
-
             return setCurrentSrc(elem, options);
         };
 

src/components/htmlvideoplayer/plugin.js

@@ -27,6 +27,14 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         return _supportsTextTracks;
     }
 
+    function supportsCanvas() {
+        return !!document.createElement('canvas').getContext;
+    }
+
+    function supportsWebWorkers() {
+        return !!window.Worker;
+    }
+
     function enableNativeTrackSupport(currentSrc, track) {
 
         if (track) {
@@ -185,10 +193,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         var lastCustomTrackMs = 0;
         var currentClock;
+        var currentSubtitlesOctopus;
         var currentAssRenderer;
         var customTrackIndex = -1;
 
-        var showTrackOffset = false;
+        var showTrackOffset;
         var currentTrackOffset;
 
         var videoSubtitlesElem;
@@ -280,6 +289,8 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
             self._currentTime = null;
 
+            self.resetSubtitleOffset();
+
             return createMediaElement(options).then(function (elem) {
 
                 return updateVideoUrl(options, options.mediaSource).then(function () {
@@ -556,6 +567,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             setCurrentTrackElement(index);
         };
 
+        self.resetSubtitleOffset = function() {
+            currentTrackOffset = 0;
+            showTrackOffset = false;
+        }
+
         self.enableShowingSubtitleOffset = function() {
             showTrackOffset = true;
         }
@@ -955,6 +971,12 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             currentClock = null;
             self._currentAspectRatio = null;
 
+            var octopus = currentSubtitlesOctopus;
+            if (octopus) {
+                octopus.dispose();
+            }
+            currentSubtitlesOctopus = null;
+
             var renderer = currentAssRenderer;
             if (renderer) {
                 renderer.setEnabled(false);
@@ -1019,6 +1041,22 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             lastCustomTrackMs = 0;
         }
 
+        function renderWithSubtitlesOctopus(videoElement, track, item) {
+            var attachments = self._currentPlayOptions.mediaSource.MediaAttachments || [];
+            var options = {
+                video: videoElement,
+                subUrl: getTextTrackUrl(track, item),
+                fonts: attachments.map(i => i.DeliveryUrl),
+                workerUrl: appRouter.baseUrl() + "/libraries/subtitles-octopus-worker.js",
+                onError: function() {
+                    htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror')
+                }
+            };
+            require(['JavascriptSubtitlesOctopus'], function(SubtitlesOctopus) {
+                currentSubtitlesOctopus = new SubtitlesOctopus(options);
+            });
+        }
+
         function renderWithLibjass(videoElement, track, item) {
 
             var rendererSettings = {};
@@ -1065,6 +1103,15 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             });
         }
 
+        function renderSsaAss(videoElement, track, item) {
+            if (supportsCanvas() && supportsWebWorkers()) {
+                renderWithSubtitlesOctopus(videoElement, track, item);
+            } else {
+                console.log('rendering subtitles with libjass');
+                renderWithLibjass(videoElement, track, item);
+            }
+        }
+
         function onVideoResize() {
             if (browser.iOS) {
                 // the new sizes will be delayed for about 500ms with wkwebview
@@ -1175,7 +1222,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
                 var format = (track.Codec || '').toLowerCase();
                 if (format === 'ssa' || format === 'ass') {
                     // libjass is needed here
-                    renderWithLibjass(videoElement, track, item);
+                    renderSsaAss(videoElement, track, item);
                     return;
                 }
 

src/components/htmlvideoplayer/style.css

@@ -24,6 +24,10 @@
     z-index: 1000;
 }
 
+.videoPlayerContainer .libassjs-canvas-parent {
+    order: -1;
+}
+
 video::-webkit-media-controls {
     display: none !important;
 }
@@ -38,7 +42,6 @@ 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,21 +18,9 @@
 
 .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,7 +14,6 @@
 
 .indicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -43,7 +42,6 @@
 
 .countIndicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,7 +53,6 @@
 
 .playedIndicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -67,7 +64,6 @@
 .videoIndicator {
     background: #444;
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;

src/components/indicators/indicators.js

@@ -115,7 +115,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getTimerIndicator(item) {
-
         var status;
 
         if (item.Type === 'SeriesTimer') {

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,8 +1,8 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-    <h3 class="formDialogHeaderTitle">
+        <i class="md-icon">arrow_back</i>
-        ${HeaderMediaInfo}
+    </button>
-    </h3>
+    <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">

src/components/itemcontextmenu.js

@@ -3,10 +3,11 @@ define(["apphost", "globalize", "connectionManager", "itemHelper", "appRouter",
 
     function getCommands(options) {
         var item = options.item;
+        var user = options.user;
+
         var canPlay = playbackManager.canPlay(item);
         var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator;
 
-        var user = options.user;
         var commands = [];
 
         if (canPlay && item.MediaType !== "Photo") {

src/components/itemidentifier/itemidentifier.template.html

@@ -2,9 +2,7 @@
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
         <i class="md-icon">arrow_back</i>
     </button>
-    <h3 class="formDialogHeaderTitle">
+    <h3 class="formDialogHeaderTitle">${Identify}</h3>
-        ${Identify}
-    </h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">
@@ -17,16 +15,13 @@
                 <div class="txtPath fieldDescription"></div>
             </div>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name"
+                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name" label="${LabelName}" />
-                    label="${LabelName}" />
             </div>
             <div class="fldLookupYear inputContainer">
-                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year"
+                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year" pattern="[0-9]*" min="1800" label="${LabelYear}" />
-                    pattern="[0-9]*" min="1800" label="${LabelYear}" />
             </div>
 
-            <div class="identifyProviderIds">
+            <div class="identifyProviderIds"></div>
-            </div>
 
             <div class="formDialogFooter">
                 <button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">
@@ -34,14 +29,13 @@
                 </button>
             </div>
         </form>
-        <div class="identificationSearchResults hide">
 
+        <div class="identificationSearchResults hide">
             <h1>${SearchResults}</h1>
             <div class="identificationSearchResultList itemsContainer vertical-wrap"></div>
         </div>
 
         <form class="identifyOptionsForm hide" style="margin:auto;">
-
             <br />
             <div class="selectedSearchResult"></div>
             <br />
@@ -51,8 +45,7 @@
             </label>
 
             <div class="formDialogFooter">
-                <button is="emby-button" type="submit"
+                <button is="emby-button" type="submit" class="raised button-submit block btnSubmit formDialogFooterItem">
-                    class="raised button-submit block btnSubmit formDialogFooterItem">
                     <span>${ButtonOk}</span>
                 </button>
             </div>

src/components/loading/loading.css

@@ -7,20 +7,11 @@
 
 .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);
     }
 }
@@ -37,7 +28,6 @@
 }
 
 .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;
 }
 
@@ -46,7 +36,6 @@
 }
 
 .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;
 }
 
@@ -55,7 +44,6 @@
 }
 
 .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;
 }
 
@@ -64,90 +52,39 @@
 }
 
 .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;
 }
 
-@-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);
     }
 }
@@ -161,32 +98,6 @@
 * - 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;
@@ -213,28 +124,6 @@
     }
 }
 
-@-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;
@@ -257,28 +146,6 @@
     }
 }
 
-@-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;
@@ -301,28 +168,6 @@
     }
 }
 
-@-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;
@@ -366,7 +211,6 @@
     border-color: inherit;
     border-bottom-color: transparent !important;
     border-radius: 50%;
-    -webkit-animation: none;
     animation: none;
     position: absolute;
     top: 0;
@@ -377,91 +221,47 @@
 
 .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;
 }
 
-@-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/loading/loadingLegacy.js

@@ -6,14 +6,11 @@ define(['require', 'css!./loadingLegacy'], function (require) {
     return {
         show: function () {
             var elem = loadingElem;
-
             if (!elem) {
-
                 elem = document.createElement("img");
-                elem.src = require.toUrl('.').split('?')[0] + '/loader2.gif';
+                elem.src = require.toUrl('.').split('?')[0] + '/loader.gif';
 
                 loadingElem = elem;
-
                 elem.classList.add('loading-spinner');
 
                 document.body.appendChild(elem);
@@ -23,9 +20,7 @@ define(['require', 'css!./loadingLegacy'], function (require) {
         },
         hide: function () {
             var elem = loadingElem;
-
             if (elem) {
-
                 elem.classList.add('hide');
             }
         }

src/components/loading/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "loading.js"
-}

src/components/loadingdialog/loadingdialog.js

@@ -2,14 +2,12 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     'use strict';
 
     function showDialog(instance, options, template) {
-
         var dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
 
         var enableTvLayout = layoutManager.tv;
-
         if (enableTvLayout) {
             dialogOptions.size = 'fullscreen';
         }
@@ -48,7 +46,6 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
         instance.dlg = dlg;
 
         return dialogHelper.open(dlg).then(function () {
-
             if (enableTvLayout) {
                 scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
             }
@@ -58,12 +55,10 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     }
 
     function LoadingDialog(options) {
-
         this.options = options;
     }
 
     LoadingDialog.prototype.show = function () {
-
         var instance = this;
         loading.show();
 
@@ -76,15 +71,12 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     LoadingDialog.prototype.setTitle = function (title) {
-
     };
 
     LoadingDialog.prototype.setText = function (text) {
-
     };
 
     LoadingDialog.prototype.hide = function () {
-
         if (this.dlg) {
             dialogHelper.close(this.dlg);
             this.dlg = null;
@@ -92,7 +84,6 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     LoadingDialog.prototype.destroy = function () {
-
         this.dlg = null;
         this.options = null;
     };

src/components/logoscreensaver/plugin.js

@@ -0,0 +1,192 @@
+define(["pluginManager"], function (pluginManager) {
+
+    return function () {
+
+        var self = this;
+
+        self.name = "Logo ScreenSaver";
+        self.type = "screensaver";
+        self.id = "logoscreensaver";
+        self.supportsAnonymous = true;
+
+        var interval;
+
+        function animate() {
+
+            var animations = [
+
+                bounceInLeft,
+                bounceInRight,
+                swing,
+                tada,
+                wobble,
+                rotateIn,
+                rotateOut
+            ];
+
+            var elem = document.querySelector(".logoScreenSaverImage");
+
+            if (elem && elem.animate) {
+                var random = getRandomInt(0, animations.length - 1);
+
+                animations[random](elem, 1);
+            }
+        }
+
+        function getRandomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        function bounceInLeft(elem, iterations) {
+            var keyframes = [
+                { transform: "translate3d(-3000px, 0, 0)", opacity: "0", offset: 0 },
+                { transform: "translate3d(25px, 0, 0)", opacity: "1", offset: 0.6 },
+                { transform: "translate3d(-100px, 0, 0)", offset: 0.75 },
+                { transform: "translate3d(5px, 0, 0)", offset: 0.9 },
+                { transform: "none", opacity: "1", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations, easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)" };
+            return elem.animate(keyframes, timing);
+        }
+
+        function bounceInRight(elem, iterations) {
+            var keyframes = [
+                { transform: "translate3d(3000px, 0, 0)", opacity: "0", offset: 0 },
+                { transform: "translate3d(-25px, 0, 0)", opacity: "1", offset: 0.6 },
+                { transform: "translate3d(100px, 0, 0)", offset: 0.75 },
+                { transform: "translate3d(-5px, 0, 0)", offset: 0.9 },
+                { transform: "none", opacity: "1", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations, easing: "cubic-bezier(0.215, 0.610, 0.355, 1.000)" };
+            return elem.animate(keyframes, timing);
+        }
+
+        function shake(elem, iterations) {
+            var keyframes = [
+                { transform: "translate3d(0, 0, 0)", offset: 0 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.1 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.2 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.3 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.4 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.5 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.6 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.7 },
+                { transform: "translate3d(10px, 0, 0)", offset: 0.8 },
+                { transform: "translate3d(-10px, 0, 0)", offset: 0.9 },
+                { transform: "translate3d(0, 0, 0)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function swing(elem, iterations) {
+            var keyframes = [
+                { transform: "translate(0%)", offset: 0 },
+                { transform: "rotate3d(0, 0, 1, 15deg)", offset: 0.2 },
+                { transform: "rotate3d(0, 0, 1, -10deg)", offset: 0.4 },
+                { transform: "rotate3d(0, 0, 1, 5deg)", offset: 0.6 },
+                { transform: "rotate3d(0, 0, 1, -5deg)", offset: 0.8 },
+                { transform: "rotate3d(0, 0, 1, 0deg)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function tada(elem, iterations) {
+            var keyframes = [
+                { transform: "scale3d(1, 1, 1)", offset: 0 },
+                { transform: "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", offset: 0.1 },
+                { transform: "scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)", offset: 0.2 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.3 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.4 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.5 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.6 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.7 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)", offset: 0.8 },
+                { transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)", offset: 0.9 },
+                { transform: "scale3d(1, 1, 1)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function wobble(elem, iterations) {
+            var keyframes = [
+                { transform: "translate(0%)", offset: 0 },
+                { transform: "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)", offset: 0.15 },
+                { transform: "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)", offset: 0.45 },
+                { transform: "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)", offset: 0.6 },
+                { transform: "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)", offset: 0.75 },
+                { transform: "translateX(0%)", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function rotateIn(elem, iterations) {
+            var transformOrigin = elem.style["transform-origin"];
+            var keyframes = [{ transform: "rotate3d(0, 0, 1, -200deg)", opacity: "0", transformOrigin: "center", offset: 0 },
+                { transform: "none", opacity: "1", transformOrigin: "center", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function rotateOut(elem, iterations) {
+            var transformOrigin = elem.style["transform-origin"];
+            var keyframes = [{ transform: "none", opacity: "1", transformOrigin: "center", offset: 0 },
+                { transform: "rotate3d(0, 0, 1, 200deg)", opacity: "0", transformOrigin: "center", offset: 1 }];
+            var timing = { duration: 900, iterations: iterations };
+            return elem.animate(keyframes, timing);
+
+        }
+
+        function fadeOut(elem, iterations) {
+            var keyframes = [
+                { opacity: "1", offset: 0 },
+                { opacity: "0", offset: 1 }];
+            var timing = { duration: 400, iterations: iterations };
+            return elem.animate(keyframes, timing);
+        }
+
+        function stopInterval() {
+            if (interval) {
+                clearInterval(interval);
+                interval = null;
+            }
+        }
+
+        self.show = function () {
+
+            require(["css!" + pluginManager.mapPath(self, "style.css")], function () {
+
+                var elem = document.querySelector(".logoScreenSaver");
+
+                if (!elem) {
+                    elem = document.createElement("div");
+                    elem.classList.add("logoScreenSaver");
+                    document.body.appendChild(elem);
+
+                    elem.innerHTML = '<img class="logoScreenSaverImage" src="' + pluginManager.mapPath(self, "logowhite.png") + '" />';
+                }
+
+                stopInterval();
+                interval = setInterval(animate, 3000);
+            });
+        };
+
+        self.hide = function () {
+
+            stopInterval();
+
+            var elem = document.querySelector(".logoScreenSaver");
+
+            if (elem) {
+
+                var onAnimationFinish = function () {
+                    elem.parentNode.removeChild(elem);
+                };
+
+                if (elem.animate) {
+                    var animation = fadeOut(elem, 1);
+                    animation.onfinish = onAnimationFinish;
+                } else {
+                    onAnimationFinish();
+                }
+            }
+        };
+    }
+});

src/components/logoscreensaver/style.css

@@ -0,0 +1,18 @@
+.logoScreenSaver {
+    background: #101010;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    text-align: center;
+}
+
+.logoScreenSaverImage {
+    height: 120px;
+    position: absolute;
+    top: 50%;
+    margin-top: -60px;
+    margin-left: -197px;
+}

src/components/mediainfo/mediainfo.css

@@ -69,10 +69,7 @@
 }
 
 .closedCaptionMediaInfoText {
-    /*padding: .24em .4em;*/
     font-weight: bold;
-    /*font-size: inherit;*/
-    /*background: rgba(81, 81, 81, .7);*/
 }
 
 .mediaInfoOfficialRating {

src/components/navdrawer/navdrawer.css

@@ -9,29 +9,20 @@
 .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
 }
 
@@ -41,8 +32,6 @@
     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/navdrawer/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "navdrawer.js"
-}

src/components/notifications/notifications.js

@@ -2,7 +2,6 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     'use strict';
 
     function onOneDocumentClick() {
-
         document.removeEventListener('click', onOneDocumentClick);
         document.removeEventListener('keydown', onOneDocumentClick);
 
@@ -10,15 +9,14 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             Notification.requestPermission();
         }
     }
+
     document.addEventListener('click', onOneDocumentClick);
     document.addEventListener('keydown', onOneDocumentClick);
 
     var serviceWorkerRegistration;
 
     function closeAfter(notification, timeoutMs) {
-
         setTimeout(function () {
-
             if (notification.close) {
                 notification.close();
             } else if (notification.cancel) {
@@ -28,9 +26,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
     }
 
     function resetRegistration() {
-
         var serviceWorker = navigator.serviceWorker;
-
         if (serviceWorker) {
             serviceWorker.ready.then(function (registration) {
                 serviceWorkerRegistration = registration;

src/components/remotecontrol/remotecontrol.css

@@ -1,13 +1,12 @@
 .nowPlayingInfoContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
     flex-direction: row
 }
 
+.navigationSection {
+    text-align: center
+}
+
 .nowPlayingPageTitle {
     margin: 0 0 .5em .5em
 }
@@ -17,27 +16,20 @@
 }
 
 .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: -webkit-box;
+    display: flex;
-    display: -webkit-flex
 }
 
 .nowPlayingPageImageContainer {
     width: 20%;
     margin-right: .25em;
     position: relative;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -48,16 +40,9 @@
 }
 
 .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
 }
 
@@ -66,25 +51,15 @@
     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
     }
 
@@ -98,8 +73,6 @@
     }
 
     .nowPlayingInfoButtons {
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -127,33 +100,20 @@
 
 .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
     }
 }
@@ -170,15 +130,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(../../img/equalizer.gif) !important;
+    background-image: url(assets/img/equalizer.gif) !important;
 }
 
 .hideVideoButtons .videoButton {