merge branch master into controllers

.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>
@@ -53,7 +53,7 @@ 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
    yarn install
    ```

package.json

@@ -5,12 +5,14 @@
   "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",
@@ -33,9 +35,25 @@
     "shaka-player": "^2.5.5",
     "sortablejs": "^1.9.0",
     "swiper": "^3.4.2",
+    "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/librarybrowser.css

@@ -15,7 +15,6 @@
 .headerSelectedPlayer,
 .itemMiscInfo,
 .navMenuOptionText {
-    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
@@ -25,7 +24,7 @@
 }
 
 .itemDetailPage {
-    padding-top: 4em !important
+    padding-top: 0em !important
 }
 
 .standalonePage {
@@ -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;
@@ -233,6 +200,7 @@
 }
 
 @media all and (min-width:40em) {
+
     .dashboardDocument .adminDrawerLogo,
     .dashboardDocument .mainDrawerButton {
         display: none !important
@@ -242,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%
@@ -281,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;
@@ -346,8 +307,6 @@
 }
 
 .flexPageTabContent.is-active {
-    display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: flex !important
 }
 
@@ -363,7 +322,6 @@
     margin: 1.5em 0;
     background: #222;
     padding: .8em .8em .8em 3em;
-    -webkit-border-radius: .3em;
     border-radius: .3em;
     position: relative
 }
@@ -422,8 +380,9 @@
 }
 
 .itemBackdrop {
-    -webkit-background-size: cover;
     background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
     height: 50vh;
     position: relative
 }
@@ -435,41 +394,73 @@
     right: 0
 }
 
-.itemBackdropFader {
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    right: 0;
-    height: 15vh
-}
-
 .desktopMiscInfoContainer {
     position: absolute;
     bottom: .75em
 }
 
+.layout-mobile .detailPagePrimaryContainer {
+    display: block;
+    position: relative;
+}
+
+.layout-tv .detailPagePrimaryContainer {
+    position: relative;
+}
+
+.detailPagePrimaryContainer {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    position: sticky;
+    background-color: #101010;
+    top: 0;
+    z-index: 2;
+}
+
+.infoWrapper {
+    flex: 1 0 0;
+}
+
+.infoText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+}
+
+.detailPageSecondaryContainer {
+    margin: 1.25em 0;
+    display: flex;
+    flex-direction: column;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.layout-mobile .detailImageContainer,
+.layout-tv .detailImageContainer {
+    position: relative;
+}
+
 .detailImageContainer {
-    margin-right: 2em;
+    margin: 1.25em 0;
-    width: 280px;
+    position: sticky;
-    -webkit-flex-shrink: 0;
+    top: 15%;
-    flex-shrink: 0;
+    float: left;
-    margin-left: .6em
+    width: 22.786458333333332vw;
 }
 
 .detailPagePrimaryContent {
     position: relative;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
 .detailLogo {
-    width: 21.3em;
+    width: 25em;
-    height: 5em;
+    height: 9.375em;
     position: absolute;
-    top: 13.5%;
+    top: 14.5%;
-    right: 19.5%;
+    right: 10.5%;
-    -webkit-background-size: contain;
     background-size: contain
 }
 
@@ -498,13 +489,8 @@
 }
 
 .itemDetailImage {
-    width: 100%;
+    width: 100% !important;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
-}
-
-.thumbDetailImageContainer {
-    width: 400px
 }
 
 @media all and (max-width:62.5em) {
@@ -512,36 +498,11 @@
         position: relative
     }
 
-    .detailImageContainer {
-        position: absolute;
-        top: -90px;
-        left: 5%;
-        width: auto
-    }
-
-    .itemDetailImage {
-        height: 120px;
-        width: auto !important
-    }
-
     .btnPlaySimple {
         display: none !important
     }
 }
 
-@media all and (min-width:62.5em) {
-    .itemBackdrop {
-        display: none
-    }
-
-    .detailPagePrimaryContainer {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: flex;
-        margin-bottom: 3em
-    }
-}
-
 @media all and (max-width:75em) {
     .lnkSibling {
         display: none !important
@@ -597,8 +558,7 @@
 
 .detailButton-mobile,
 .mainDetailButtons {
-    display: -webkit-box;
+    display: flex;
-    display: -webkit-flex
 }
 
 .itemName {
@@ -619,18 +579,14 @@
 
 .mainDetailButtons {
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    margin: 1em 0
+    margin: 1em 0;
 }
 
 .recordingFields button {
     margin-left: 0;
     margin-right: .5em;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -641,11 +597,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
@@ -677,18 +629,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
 }
 
@@ -699,11 +642,8 @@
 }
 
 .detailImageProgressContainer {
-    position: absolute;
+    margin-left: 6px;
-    bottom: 4px;
+    width: 21.886458333333332vw;
-    right: 1px;
-    left: 1px;
-    text-align: center
 }
 
 .detailButton-mobile-text {
@@ -723,7 +663,7 @@
 }
 
 @media all and (min-width:62.5em) {
-    .detailButton-mobile {
+    .detailFloatingButton {
         display: none !important
     }
 
@@ -745,21 +685,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
     }
 
@@ -775,13 +708,11 @@
 .detailPageContent {
     border-spacing: 0;
     border-collapse: collapse;
-    padding-top: 3em
 }
 
 @media all and (max-width:62.5em) {
     .detailPageContent-nodetailimg {
         padding-top: 0;
-        margin-top: -3em
     }
 }
 
@@ -851,7 +782,6 @@
 }
 
 .btnSyncComplete i {
-    -webkit-border-radius: 100em;
     border-radius: 100em
 }
 
@@ -860,14 +790,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
 }
 
@@ -892,17 +817,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
 }
 
@@ -912,22 +839,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
 }
@@ -999,8 +921,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,28 +23,24 @@
 
 .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 {
     width: 0 !important;
     display: none;
-}
+}

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/assets/img/devices/android.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M24 19H0a13.6 13.6 0 0 1 2.21-6.07A11.2 11.2 0 0 1 5.87 9.4l.41-.23-2.02-3.41a.51.51 0 0 1 .17-.7.5.5 0 0 1 .69.18l2.08 3.5a12.62 12.62 0 0 1 4.84-.9 12.2 12.2 0 0 1 4.75.9l2.07-3.5a.5.5 0 0 1 .7-.17.51.51 0 0 1 .16.7L17.7 9.19l.5.28a11.38 11.38 0 0 1 3.63 3.62A14.48 14.48 0 0 1 24 19zm-7.5-4.48a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1zm-11 0a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1z"/>
+</svg>

src/assets/img/devices/kodi.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(-36.173 -93.796)">
+        <g transform="matrix(.08 0 0 .08 40.527 88.485)">
+            <path d="m53.295 119.35v-39.688h79.375v79.375h-79.375z" fill="#fcfdfd" stroke-width=".26458"/>
+        </g>
+        <g transform="matrix(1.3761 0 0 1.3825 -26.63 -38.456)" fill="#fff">
+            <path transform="matrix(.08 0 0 .08 40.527 88.485)" d="m86.822 141.89c-4.738-4.7596-5.2168-5.3235-5.2168-6.1442 0-0.82158 0.47505-1.3787 5.2329-6.1365 4.7552-4.7552 5.3153-5.2329 6.1353-5.2329 0.81617 0 1.3676 0.46161 5.7678 4.8286 4.8692 4.8324 5.6182 5.7452 5.6182 6.8466 0 0.41218-1.5697 2.1641-5.2274 5.834-4.8206 4.8367-5.3 5.2449-6.1603 5.2449-0.86046 0-1.3378-0.40681-6.1497-5.2406zm22.168-12.455c-0.43656-0.27248-2.9071-2.6371-5.4901-5.2547-4.1957-4.2519-4.6964-4.8534-4.6964-5.6418 0-0.7938 0.52954-1.414 5.2644-6.1655 4.6582-4.6746 5.362-5.2829 6.1127-5.2829 0.75071 0 1.4546 0.60829 6.1127 5.2829 4.7729 4.7898 5.2644 5.3668 5.2644 6.1818 0 0.81542-0.48628 1.3851-5.2394 6.1382-5.6104 5.6104-5.7707 5.7142-7.3283 4.742zm-40.16-5.2731c-3.5636-3.5816-4.9518-5.1483-4.9518-5.5886 0-0.75745 9.3384-10.601 10.057-10.601 0.2584 0 0.54208 0.18833 0.63041 0.41851s0.1606 4.7624 0.1606 10.072c0 9.1098-0.10948 10.677-0.74606 10.677-0.10905 0-2.4266-2.2396-5.1501-4.9768zm13.2-1.5272c-0.08833-0.23018-0.1606-5.3558-0.1606-11.39 0-8.9734 0.06852-11.102 0.37621-11.686 0.20691-0.39296 2.447-2.7683 4.9781-5.2785 4.3226-4.2871 4.6624-4.5641 5.5987-4.5641 0.94583 0 1.2591 0.26717 6.1277 5.2255 4.658 4.7439 5.1315 5.3102 5.1376 6.1439 6e-3 0.85888-0.67407 1.6-10.506 11.443-5.782 5.7887-10.71 10.525-10.952 10.525s-0.51144-0.18833-0.59977-0.41852z" fill="#fff" stroke-width=".26458"/>
+        </g>
+    </g>
+</svg>

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,7 +73,7 @@ _define("swiper", function() {
 });
 
 // sortable
-var sortable = require("sortablejs");
+var sortable = require("sortablejs").default;
 _define("sortable", function() {
     return sortable;
 });
@@ -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,11 +37,12 @@
     box-shadow: none;
     flex-shrink: 0;
     border-radius: 0;
+    margin: 0;
 }
 
-    .actionSheetMenuItem:focus {
+.actionSheetMenuItem:focus {
-        transform: none !important;
+    transform: none !important;
-    }
+}
 
 .actionsheetListItemBody {
     padding: .4em 1em .4em .6em !important;
@@ -104,7 +105,7 @@
 }
 
 .actionsheet-xlargeFont {
-    font-size: 112%!important;
+    font-size: 112% !important;
 }
 
 .btnCloseActionSheet {

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/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 {
@@ -780,4 +775,4 @@ button {
 .cardOverlayFab-primary:hover {
     transform: scale(1.4, 1.4);
     transition: 0.2s;
-}
+}

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/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/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;
@@ -15,4 +16,4 @@
     min-width: 24px;
     min-height: 24px;
     display: block;
-}
+}

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 {
+    padding-left: 3.3%;
+    padding-right: 3.3%;
     margin-left: 0;
+    margin-right: 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/emby-tabs.css

@@ -22,7 +22,7 @@
 
 .emby-tab-button.show-focus:focus {
     /* these buttons are small so scale larger than usual */
-    transform: scale(1.6) !important;
+    transform: scale(1.3) !important;
     background: 0 !important;
 }
 

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/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);
         };
 
@@ -511,4 +494,4 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     };
 
     return HtmlAudioPlayer;
-});
+});

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,6 +193,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
 
         var lastCustomTrackMs = 0;
         var currentClock;
+        var currentSubtitlesOctopus;
         var currentAssRenderer;
         var customTrackIndex = -1;
 
@@ -962,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);
@@ -1026,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 = {};
@@ -1072,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
@@ -1182,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;
                 }
 
@@ -1483,6 +1523,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
             }
         }
 
+        if (browser.safari || browser.iOS || browser.iPad) {
+            list.push('AirPlay')
+        }
+
         list.push('SetBrightness');
         list.push("SetAspectRatio")
 
@@ -1591,6 +1635,31 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         return false;
     };
 
+    HtmlVideoPlayer.prototype.isAirPlayEnabled = function () {
+
+        if (document.AirPlayEnabled) {
+            return document.AirplayElement ? true : false;
+        }
+
+        return false;
+    };
+
+    HtmlVideoPlayer.prototype.setAirPlayEnabled = function (isEnabled) {
+        var video = this._mediaElement;
+
+        if (document.AirPlayEnabled) {
+            if (video) {
+                if (isEnabled) {
+                    video.requestAirPlay().catch(onAirPlayError);
+                } else {
+                    document.exitAirPLay().catch(onAirPlayError);
+                }
+            }
+        } else {
+            video.webkitShowPlaybackTargetPicker();
+        }
+    };
+
     HtmlVideoPlayer.prototype.setBrightness = function (val) {
 
         var elem = this._mediaElement;
@@ -1744,6 +1813,10 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa
         return this.setPictureInPictureEnabled(!this.isPictureInPictureEnabled());
     };
 
+    HtmlVideoPlayer.prototype.toggleAirPlay = function () {
+        return this.setAirPlayEnabled(!this.isAirPlayEnabled());
+    };
+
     HtmlVideoPlayer.prototype.getBufferedRanges = function () {
         var mediaElement = this._mediaElement;
         if (mediaElement) {

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/imageuploader/imageuploader.js

@@ -74,7 +74,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
             return false;
         }
 
-        if (file.type !== "image/png" && file.type !== "image/x-png" && file.type !== "image/jpeg") {
+        if (!file.type.startsWith("image/")) {
             require(['toast'], function (toast) {
                 toast(globalize.translate('MessageImageFileTypeAllowed'));
             });
@@ -185,4 +185,4 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
             });
         }
     };
-});
+});

src/components/imageuploader/imageuploader.template.html

@@ -22,7 +22,7 @@
                 <div class="imageEditor-dropZone fieldDescription">
                     <div>${LabelDropImageHere}</div>
                     <output id="imageOutput" class="flex align-items-center justify-content-center" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;"></output>
-                    <input type="file" accept="image/png,image/x-png,image/jpeg" id="uploadImage" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
+                    <input type="file" accept="image/*" id="uploadImage" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
                 </div>
                 <div id="fldUpload" class="hide">
                     <br />

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/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/listview/listview.css

@@ -126,20 +126,20 @@
     align-self: center;
     justify-self: center;
     margin: auto;
-    color: rgba(255, 255, 255, .6);
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(0, 0, 0, 0.4);
     font-size: 1.6em;
-    background: transparent;
+    transition: 200ms ease-out;
-    transition: transform 200ms ease-out;
     display: flex;
 }
 
 .listItemImageButton:hover {
+    color: #00a4dc;
+    background: rgba(0, 164, 220, 0.2);
     transform: scale(1.2, 1.2);
 }
 
 .listItemImageButton-icon {
-    background: rgba(0,0,0,.4);
-    border: 0.1em solid currentColor;
     border-radius: 100em;
     display: flex;
     justify-content: center;
@@ -264,4 +264,4 @@
 
 .listItemCheckboxContainer {
     width: auto !important;
-}
+}

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,11 +20,9 @@ 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,10 +84,9 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     LoadingDialog.prototype.destroy = function () {
-
         this.dlg = null;
         this.options = null;
     };
 
     return LoadingDialog;
-});
+});

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/playback/playbackmanager.js

@@ -1540,6 +1540,11 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
             return player.togglePictureInPicture();
         };
 
+        self.toggleAirPlay = function (player) {
+            player = player || self._currentPlayer;
+            return player.toggleAirPlay();
+        };
+
         self.getSubtitleStreamIndex = function (player) {
 
             player = player || self._currentPlayer;
@@ -3854,6 +3859,9 @@ define(['events', 'datetime', 'appSettings', 'itemHelper', 'pluginManager', 'pla
                 if (player.supports('PictureInPicture')) {
                     list.push('PictureInPicture');
                 }
+                if (player.supports('AirPlay')) {
+                    list.push('AirPlay');
+                }
                 if (player.supports('SetBrightness')) {
                     list.push('SetBrightness');
                 }

src/components/remotecontrol/remotecontrol.css

@@ -1,10 +1,5 @@
 .nowPlayingInfoContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
     flex-direction: row
 }
 
@@ -21,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
 }
 
@@ -52,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
 }
 
@@ -70,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
     }
 
@@ -102,8 +73,6 @@
     }
 
     .nowPlayingInfoButtons {
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -131,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
     }
 }
@@ -174,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 {

src/components/screensavermanager.js

@@ -0,0 +1,132 @@
+define(["events", "playbackManager", "pluginManager", "inputManager", "connectionManager", "userSettings"], function (events, playbackManager, pluginManager, inputManager, connectionManager, userSettings) {
+    "use strict";
+
+    function getMinIdleTime() {
+        // Returns the minimum amount of idle time required before the screen saver can be displayed
+        //time units used Millisecond
+        return 180000;
+    }
+
+    var lastFunctionalEvent = 0;
+
+    function getFunctionalEventIdleTime() {
+        return new Date().getTime() - lastFunctionalEvent;
+    }
+
+    events.on(playbackManager, "playbackstop", function (e, stopInfo) {
+        var state = stopInfo.state;
+        if (state.NowPlayingItem && state.NowPlayingItem.MediaType == "Video") {
+            lastFunctionalEvent = new Date().getTime();
+        }
+    });
+
+    function getScreensaverPlugin(isLoggedIn) {
+
+        var option;
+        try {
+            option = userSettings.get("screensaver", false);
+        } catch (err) {
+            option = isLoggedIn ? "backdropscreensaver" : "logoscreensaver";
+        }
+
+        var plugins = pluginManager.ofType("screensaver");
+
+        for (var i = 0, length = plugins.length; i < length; i++) {
+            var plugin = plugins[i];
+
+            if (plugin.id === option) {
+                return plugin;
+            }
+        }
+
+        return null;
+    }
+
+    function ScreenSaverManager() {
+
+        var self = this;
+        var activeScreenSaver;
+
+        function showScreenSaver(screensaver) {
+
+            if (activeScreenSaver) {
+                throw new Error("An existing screensaver is already active.");
+            }
+
+            console.log("Showing screensaver " + screensaver.name);
+
+            screensaver.show();
+            activeScreenSaver = screensaver;
+
+            if (screensaver.hideOnClick !== false) {
+                window.addEventListener("click", hide, true);
+            }
+            if (screensaver.hideOnMouse !== false) {
+                window.addEventListener("mousemove", hide, true);
+            }
+            if (screensaver.hideOnKey !== false) {
+                window.addEventListener("keydown", hide, true);
+            }
+        }
+
+        function hide() {
+            if (activeScreenSaver) {
+                console.log("Hiding screensaver");
+                activeScreenSaver.hide();
+                activeScreenSaver = null;
+            }
+
+            window.removeEventListener("click", hide, true);
+            window.removeEventListener("mousemove", hide, true);
+            window.removeEventListener("keydown", hide, true);
+        }
+
+        self.isShowing = function () {
+            return activeScreenSaver != null;
+        };
+
+        self.show = function () {
+            var isLoggedIn;
+            var apiClient = connectionManager.currentApiClient();
+
+            if (apiClient && apiClient.isLoggedIn()) {
+                isLoggedIn = true;
+            }
+
+            var screensaver = getScreensaverPlugin(isLoggedIn);
+
+            if (screensaver) {
+                showScreenSaver(screensaver);
+            }
+        };
+
+        self.hide = function () {
+            hide();
+        };
+
+        function onInterval() {
+
+            if (self.isShowing()) {
+                return;
+            }
+
+            if (inputManager.idleTime() < getMinIdleTime()) {
+                return;
+            }
+
+            if (getFunctionalEventIdleTime < getMinIdleTime()) {
+                return;
+            }
+
+            if (playbackManager.isPlayingVideo()) {
+                return;
+            }
+
+            self.show();
+        }
+
+        setInterval(onInterval, 10000);
+    }
+
+    return new ScreenSaverManager();
+});

src/components/serverNotifications/package.json

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

src/components/serverNotifications/serverNotifications.js

@@ -4,20 +4,15 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
     var serverNotifications = {};
 
     function notifyApp() {
-
         inputManager.notify();
     }
 
     function displayMessage(cmd) {
-
         var args = cmd.Arguments;
-
         if (args.TimeoutMs) {
-
             require(['toast'], function (toast) {
                 toast({ title: args.Header, text: args.Text });
             });
-
         } else {
             require(['alert'], function (alert) {
                 alert({ title: args.Header, text: args.Text });
@@ -146,14 +141,10 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
     }
 
     function onMessageReceived(e, msg) {
-
         var apiClient = this;
-
         if (msg.MessageType === "Play") {
-
             notifyApp();
             var serverId = apiClient.serverInfo().Id;
-
             if (msg.Data.PlayCommand === "PlayNext") {
                 playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
             } else if (msg.Data.PlayCommand === "PlayLast") {
@@ -169,9 +160,7 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
                     serverId: serverId
                 });
             }
-
         } else if (msg.MessageType === "Playstate") {
-
             if (msg.Data.Command === 'Stop') {
                 inputManager.trigger('stop');
             } else if (msg.Data.Command === 'Pause') {
@@ -193,22 +182,17 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
             var cmd = msg.Data;
             processGeneralCommand(cmd, apiClient);
         } else if (msg.MessageType === "UserDataChanged") {
-
             if (msg.Data.UserId === apiClient.getCurrentUserId()) {
-
                 for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
                     events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
                 }
             }
         } else {
-
             events.trigger(serverNotifications, msg.MessageType, [apiClient, msg.Data]);
         }
-
     }
 
     function bindEvents(apiClient) {
-
         events.off(apiClient, "message", onMessageReceived);
         events.on(apiClient, "message", onMessageReceived);
     }
@@ -229,7 +213,6 @@ define(['connectionManager', 'playbackManager', 'events', 'inputManager', 'focus
     connectionManager.getApiClients().forEach(bindEvents);
 
     events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
-
         bindEvents(newApiClient);
     });
 

src/components/skinManager.js

@@ -72,7 +72,7 @@ define(['apphost', 'userSettings', 'browser', 'events', 'pluginManager', 'backdr
 
         selectedTheme = selectedTheme || defaultTheme;
         return {
-            stylesheetPath: require.toUrl('components/themes/' + selectedTheme.id + '/theme.css'),
+            stylesheetPath: require.toUrl('themes/' + selectedTheme.id + '/theme.css'),
             themeId: selectedTheme.id
         };
     }

src/components/slideshow/style.css

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

src/components/viewContainer.js

@@ -41,84 +41,87 @@ define(["browser", "dom", "layoutManager", "css!components/viewManager/viewConta
             var isPluginpage = -1 !== options.url.toLowerCase().indexOf("/configurationpage");
             var newViewInfo = normalizeNewView(options, isPluginpage);
             var newView = newViewInfo.elem;
+            var modulesToLoad = [];
 
             if (isPluginpage) {
-                require(["legacyDashboard"]);
+                modulesToLoad.push("legacyDashboard");
             }
 
             if (newViewInfo.hasjQuerySelect) {
-                require(["legacySelectMenu"]);
+                modulesToLoad.push("legacySelectMenu");
             }
 
             if (newViewInfo.hasjQueryChecked) {
-                require(["fnchecked"]);
+                modulesToLoad.push("fnchecked");
             }
 
             return new Promise(function (resolve) {
-                var currentPage = allPages[pageIndex];
+                require(modulesToLoad, function () {
+                    var currentPage = allPages[pageIndex];
 
-                if (currentPage) {
+                    if (currentPage) {
-                    triggerDestroy(currentPage);
+                        triggerDestroy(currentPage);
-                }
+                    }
 
-                var view = newView;
+                    var view = newView;
 
-                if ("string" == typeof view) {
+                    if ("string" == typeof view) {
-                    view = document.createElement("div");
+                        view = document.createElement("div");
-                    view.innerHTML = newView;
+                        view.innerHTML = newView;
-                }
+                    }
 
-                view.classList.add("mainAnimatedPage");
+                    view.classList.add("mainAnimatedPage");
 
-                if (currentPage) {
+                    if (currentPage) {
-                    if (newViewInfo.hasScript && window.$) {
+                        if (newViewInfo.hasScript && window.$) {
-                        view = $(view).appendTo(mainAnimatedPages)[0];
+                            view = $(view).appendTo(mainAnimatedPages)[0];
-                        mainAnimatedPages.removeChild(currentPage);
+                            mainAnimatedPages.removeChild(currentPage);
+                        } else {
+                            mainAnimatedPages.replaceChild(view, currentPage);
+                        }
                     } else {
-                        mainAnimatedPages.replaceChild(view, currentPage);
+                        if (newViewInfo.hasScript && window.$) {
-                    }
+                            view = $(view).appendTo(mainAnimatedPages)[0];
-                } else {
+                        } else {
-                    if (newViewInfo.hasScript && window.$) {
+                            mainAnimatedPages.appendChild(view);
-                        view = $(view).appendTo(mainAnimatedPages)[0];
+                        }
-                    } else {
-                        mainAnimatedPages.appendChild(view);
-                    }
-                }
-
-                if (options.type) {
-                    view.setAttribute("data-type", options.type);
-                }
-
-                var properties = [];
-
-                if (options.fullscreen) {
-                    properties.push("fullscreen");
-                }
-
-                if (properties.length) {
-                    view.setAttribute("data-properties", properties.join(","));
-                }
-
-                allPages[pageIndex] = view;
-                setControllerClass(view, options).then(function () {
-                    if (onBeforeChange) {
-                        onBeforeChange(view, false, options);
                     }
 
-                    beforeAnimate(allPages, pageIndex, selected);
+                    if (options.type) {
-                    selectedPageIndex = pageIndex;
+                        view.setAttribute("data-type", options.type);
-                    currentUrls[pageIndex] = options.url;
-
-                    if (!options.cancel && previousAnimatable) {
-                        afterAnimate(allPages, pageIndex);
                     }
 
-                    if (window.$) {
+                    var properties = [];
-                        $.mobile = $.mobile || {};
+
-                        $.mobile.activePage = view;
+                    if (options.fullscreen) {
+                        properties.push("fullscreen");
                     }
 
-                    resolve(view);
+                    if (properties.length) {
+                        view.setAttribute("data-properties", properties.join(","));
+                    }
+
+                    allPages[pageIndex] = view;
+                    setControllerClass(view, options).then(function () {
+                        if (onBeforeChange) {
+                            onBeforeChange(view, false, options);
+                        }
+
+                        beforeAnimate(allPages, pageIndex, selected);
+                        selectedPageIndex = pageIndex;
+                        currentUrls[pageIndex] = options.url;
+
+                        if (!options.cancel && previousAnimatable) {
+                            afterAnimate(allPages, pageIndex);
+                        }
+
+                        if (window.$) {
+                            $.mobile = $.mobile || {};
+                            $.mobile.activePage = view;
+                        }
+
+                        resolve(view);
+                    });
                 });
             });
         }