-
+
@@ -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
```
diff --git a/package.json b/package.json
index 8eea3ca247..76d01b1841 100644
--- a/package.json
+++ b/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",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..a26de7e9f1
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: [
+ require('autoprefixer')
+ ]
+}
diff --git a/src/components/clearbutton.css b/src/assets/css/clearbutton.css
similarity index 100%
rename from src/components/clearbutton.css
rename to src/assets/css/clearbutton.css
diff --git a/src/css/dashboard.css b/src/assets/css/dashboard.css
similarity index 83%
rename from src/css/dashboard.css
rename to src/assets/css/dashboard.css
index 1c69dfccb4..d4928db691 100644
--- a/src/css/dashboard.css
+++ b/src/assets/css/dashboard.css
@@ -1,7 +1,6 @@
.dashboardColumn,
.dashboardSections {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal
+ flex-direction: column;
}
.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;
- -webkit-user-select: none;
- -webkit-background-clip: padding-box;
+ 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)
}
diff --git a/src/css/detailtable.css b/src/assets/css/detailtable.css
similarity index 100%
rename from src/css/detailtable.css
rename to src/assets/css/detailtable.css
diff --git a/src/components/flexstyles.css b/src/assets/css/flexstyles.css
similarity index 100%
rename from src/components/flexstyles.css
rename to src/assets/css/flexstyles.css
diff --git a/src/css/fonts.css b/src/assets/css/fonts.css
similarity index 95%
rename from src/css/fonts.css
rename to src/assets/css/fonts.css
index 12f1eaf4b7..da5515fc1e 100644
--- a/src/css/fonts.css
+++ b/src/assets/css/fonts.css
@@ -4,7 +4,6 @@ html {
html {
font-size: 93%;
- -webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
diff --git a/src/css/fonts.sized.css b/src/assets/css/fonts.sized.css
similarity index 99%
rename from src/css/fonts.sized.css
rename to src/assets/css/fonts.sized.css
index 073b74167c..9cdd666109 100644
--- a/src/css/fonts.sized.css
+++ b/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;
}
diff --git a/src/css/ios.css b/src/assets/css/ios.css
similarity index 100%
rename from src/css/ios.css
rename to src/assets/css/ios.css
diff --git a/src/css/librarybrowser.css b/src/assets/css/librarybrowser.css
similarity index 82%
rename from src/css/librarybrowser.css
rename to src/assets/css/librarybrowser.css
index f93ee91b83..8b4f766195 100644
--- a/src/css/librarybrowser.css
+++ b/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: -webkit-flex
+ display: flex;
}
.detailButton-mobile,
.skinHeader {
- -webkit-flex-direction: column;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal
+ flex-direction: column;
}
.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: -webkit-flex;
+ display: 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 {
- margin-bottom: 0;
+div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
+ 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
}
diff --git a/src/css/livetv.css b/src/assets/css/livetv.css
similarity index 100%
rename from src/css/livetv.css
rename to src/assets/css/livetv.css
diff --git a/src/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff
similarity index 100%
rename from src/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff
rename to src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff
diff --git a/src/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 b/src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
similarity index 100%
rename from src/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
rename to src/assets/css/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
diff --git a/src/css/material-icons/style.css b/src/assets/css/material-icons/style.css
similarity index 100%
rename from src/css/material-icons/style.css
rename to src/assets/css/material-icons/style.css
diff --git a/src/css/metadataeditor.css b/src/assets/css/metadataeditor.css
similarity index 88%
rename from src/css/metadataeditor.css
rename to src/assets/css/metadataeditor.css
index 542c7c8f2b..c5de6f3efe 100644
--- a/src/css/metadataeditor.css
+++ b/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
}
diff --git a/src/css/scrollstyles.css b/src/assets/css/scrollstyles.css
similarity index 58%
rename from src/css/scrollstyles.css
rename to src/assets/css/scrollstyles.css
index aa2f7dafad..69039ce341 100644
--- a/src/css/scrollstyles.css
+++ b/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;
- /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
- /*overflow: -moz-scrollbars-none;*/
+ scrollbar-width: 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;
- /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
- /*overflow: -moz-scrollbars-none;*/
+ scrollbar-width: 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;
-}
\ No newline at end of file
+}
diff --git a/src/css/site.css b/src/assets/css/site.css
similarity index 87%
rename from src/css/site.css
rename to src/assets/css/site.css
index 292fc67454..6491799117 100644
--- a/src/css/site.css
+++ b/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 {
diff --git a/src/css/videoosd.css b/src/assets/css/videoosd.css
similarity index 64%
rename from src/css/videoosd.css
rename to src/assets/css/videoosd.css
index f9c4798e97..f20abf9d07 100644
--- a/src/css/videoosd.css
+++ b/src/assets/css/videoosd.css
@@ -1,8 +1,6 @@
.chapterThumbTextContainer,
.videoOsdBottom {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none
+ 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;
- -webkit-touch-callout: none
+ user-select: 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: -webkit-flex;
- -webkit-box-align: center
+ display: flex;
+ align-items: 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;
- -moz-user-select: none;
- -webkit-user-drag: none;
- -webkit-user-select: none;
- -ms-user-select: none
+ 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); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+@keyframes spin {
+ 100% {
+ transform:rotate(360deg);
+ }
+}
+
.osdMediaStatus .animate {
- -webkit-animation:spin 4s linear infinite;
- -moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
diff --git a/src/img/logindefault.png b/src/assets/img/avatar.png
similarity index 100%
rename from src/img/logindefault.png
rename to src/assets/img/avatar.png
diff --git a/src/img/devices/chrome.svg b/src/assets/img/devices/chrome.svg
similarity index 100%
rename from src/img/devices/chrome.svg
rename to src/assets/img/devices/chrome.svg
diff --git a/src/img/devices/edge.svg b/src/assets/img/devices/edge.svg
similarity index 100%
rename from src/img/devices/edge.svg
rename to src/assets/img/devices/edge.svg
diff --git a/src/img/devices/firefox.svg b/src/assets/img/devices/firefox.svg
similarity index 100%
rename from src/img/devices/firefox.svg
rename to src/assets/img/devices/firefox.svg
diff --git a/src/img/devices/html5.svg b/src/assets/img/devices/html5.svg
similarity index 100%
rename from src/img/devices/html5.svg
rename to src/assets/img/devices/html5.svg
diff --git a/src/img/devices/msie.svg b/src/assets/img/devices/msie.svg
similarity index 100%
rename from src/img/devices/msie.svg
rename to src/assets/img/devices/msie.svg
diff --git a/src/img/devices/opera.svg b/src/assets/img/devices/opera.svg
similarity index 100%
rename from src/img/devices/opera.svg
rename to src/assets/img/devices/opera.svg
diff --git a/src/img/devices/other.svg b/src/assets/img/devices/other.svg
similarity index 100%
rename from src/img/devices/other.svg
rename to src/assets/img/devices/other.svg
diff --git a/src/img/devices/playstation.svg b/src/assets/img/devices/playstation.svg
similarity index 100%
rename from src/img/devices/playstation.svg
rename to src/assets/img/devices/playstation.svg
diff --git a/src/img/devices/safari.svg b/src/assets/img/devices/safari.svg
similarity index 100%
rename from src/img/devices/safari.svg
rename to src/assets/img/devices/safari.svg
diff --git a/src/img/devices/samsungtv.svg b/src/assets/img/devices/samsungtv.svg
similarity index 100%
rename from src/img/devices/samsungtv.svg
rename to src/assets/img/devices/samsungtv.svg
diff --git a/src/img/devices/windows.svg b/src/assets/img/devices/windows.svg
similarity index 100%
rename from src/img/devices/windows.svg
rename to src/assets/img/devices/windows.svg
diff --git a/src/img/devices/xbox.svg b/src/assets/img/devices/xbox.svg
similarity index 100%
rename from src/img/devices/xbox.svg
rename to src/assets/img/devices/xbox.svg
diff --git a/src/img/equalizer.gif b/src/assets/img/equalizer.gif
similarity index 100%
rename from src/img/equalizer.gif
rename to src/assets/img/equalizer.gif
diff --git a/src/img/logo.png b/src/assets/img/logo.png
similarity index 100%
rename from src/img/logo.png
rename to src/assets/img/logo.png
diff --git a/src/splashscreens/ipad_splash.png b/src/assets/splash/ipad_splash.png
similarity index 100%
rename from src/splashscreens/ipad_splash.png
rename to src/assets/splash/ipad_splash.png
diff --git a/src/splashscreens/ipad_splash_l.png b/src/assets/splash/ipad_splash_l.png
similarity index 100%
rename from src/splashscreens/ipad_splash_l.png
rename to src/assets/splash/ipad_splash_l.png
diff --git a/src/splashscreens/ipadpro1_splash.png b/src/assets/splash/ipadpro1_splash.png
similarity index 100%
rename from src/splashscreens/ipadpro1_splash.png
rename to src/assets/splash/ipadpro1_splash.png
diff --git a/src/splashscreens/ipadpro1_splash_l.png b/src/assets/splash/ipadpro1_splash_l.png
similarity index 100%
rename from src/splashscreens/ipadpro1_splash_l.png
rename to src/assets/splash/ipadpro1_splash_l.png
diff --git a/src/splashscreens/ipadpro2_splash.png b/src/assets/splash/ipadpro2_splash.png
similarity index 100%
rename from src/splashscreens/ipadpro2_splash.png
rename to src/assets/splash/ipadpro2_splash.png
diff --git a/src/splashscreens/ipadpro2_splash_l.png b/src/assets/splash/ipadpro2_splash_l.png
similarity index 100%
rename from src/splashscreens/ipadpro2_splash_l.png
rename to src/assets/splash/ipadpro2_splash_l.png
diff --git a/src/splashscreens/ipadpro3_splash.png b/src/assets/splash/ipadpro3_splash.png
similarity index 100%
rename from src/splashscreens/ipadpro3_splash.png
rename to src/assets/splash/ipadpro3_splash.png
diff --git a/src/splashscreens/ipadpro3_splash_l.png b/src/assets/splash/ipadpro3_splash_l.png
similarity index 100%
rename from src/splashscreens/ipadpro3_splash_l.png
rename to src/assets/splash/ipadpro3_splash_l.png
diff --git a/src/splashscreens/iphone5_splash.png b/src/assets/splash/iphone5_splash.png
similarity index 100%
rename from src/splashscreens/iphone5_splash.png
rename to src/assets/splash/iphone5_splash.png
diff --git a/src/splashscreens/iphone5_splash_l.png b/src/assets/splash/iphone5_splash_l.png
similarity index 100%
rename from src/splashscreens/iphone5_splash_l.png
rename to src/assets/splash/iphone5_splash_l.png
diff --git a/src/splashscreens/iphone6_splash.png b/src/assets/splash/iphone6_splash.png
similarity index 100%
rename from src/splashscreens/iphone6_splash.png
rename to src/assets/splash/iphone6_splash.png
diff --git a/src/splashscreens/iphone6_splash_l.png b/src/assets/splash/iphone6_splash_l.png
similarity index 100%
rename from src/splashscreens/iphone6_splash_l.png
rename to src/assets/splash/iphone6_splash_l.png
diff --git a/src/splashscreens/iphoneplus_splash.png b/src/assets/splash/iphoneplus_splash.png
similarity index 100%
rename from src/splashscreens/iphoneplus_splash.png
rename to src/assets/splash/iphoneplus_splash.png
diff --git a/src/splashscreens/iphoneplus_splash_l.png b/src/assets/splash/iphoneplus_splash_l.png
similarity index 100%
rename from src/splashscreens/iphoneplus_splash_l.png
rename to src/assets/splash/iphoneplus_splash_l.png
diff --git a/src/splashscreens/iphonex_splash.png b/src/assets/splash/iphonex_splash.png
similarity index 100%
rename from src/splashscreens/iphonex_splash.png
rename to src/assets/splash/iphonex_splash.png
diff --git a/src/splashscreens/iphonex_splash_l.png b/src/assets/splash/iphonex_splash_l.png
similarity index 100%
rename from src/splashscreens/iphonex_splash_l.png
rename to src/assets/splash/iphonex_splash_l.png
diff --git a/src/splashscreens/iphonexr_splash.png b/src/assets/splash/iphonexr_splash.png
similarity index 100%
rename from src/splashscreens/iphonexr_splash.png
rename to src/assets/splash/iphonexr_splash.png
diff --git a/src/splashscreens/iphonexr_splash_l.png b/src/assets/splash/iphonexr_splash_l.png
similarity index 100%
rename from src/splashscreens/iphonexr_splash_l.png
rename to src/assets/splash/iphonexr_splash_l.png
diff --git a/src/splashscreens/iphonexsmax_splash.png b/src/assets/splash/iphonexsmax_splash.png
similarity index 100%
rename from src/splashscreens/iphonexsmax_splash.png
rename to src/assets/splash/iphonexsmax_splash.png
diff --git a/src/splashscreens/iphonexsmax_splash_l.png b/src/assets/splash/iphonexsmax_splash_l.png
similarity index 100%
rename from src/splashscreens/iphonexsmax_splash_l.png
rename to src/assets/splash/iphonexsmax_splash_l.png
diff --git a/src/bundle.js b/src/bundle.js
index 6931b34dd0..54623fab74 100644
--- a/src/bundle.js
+++ b/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;
+});
diff --git a/src/components/actionsheet/actionsheet.css b/src/components/actionsheet/actionsheet.css
index c1b169889c..8e5084038a 100644
--- a/src/components/actionsheet/actionsheet.css
+++ b/src/components/actionsheet/actionsheet.css
@@ -37,11 +37,12 @@
box-shadow: none;
flex-shrink: 0;
border-radius: 0;
+ margin: 0;
}
- .actionSheetMenuItem:focus {
- transform: none !important;
- }
+.actionSheetMenuItem:focus {
+ 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 {
diff --git a/src/components/actionsheet/package.json b/src/components/actionsheet/package.json
deleted file mode 100644
index 622f1e075d..0000000000
--- a/src/components/actionsheet/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "actionsheet.js"
-}
\ No newline at end of file
diff --git a/src/components/apphost.js b/src/components/apphost.js
index ad3540e210..b1b1c30dc9 100644
--- a/src/components/apphost.js
+++ b/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");
diff --git a/src/components/backdrop/style.css b/src/components/backdrop/backdrop.css
similarity index 100%
rename from src/components/backdrop/style.css
rename to src/components/backdrop/backdrop.css
diff --git a/src/components/backdrop/backdrop.js b/src/components/backdrop/backdrop.js
index 61f458dd87..ae07ac3abc 100644
--- a/src/components/backdrop/backdrop.js
+++ b/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) {
diff --git a/src/components/backdrop/package.json b/src/components/backdrop/package.json
deleted file mode 100644
index 5f04e53a9e..0000000000
--- a/src/components/backdrop/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "backdrop.js"
-}
\ No newline at end of file
diff --git a/src/components/backdropscreensaver/plugin.js b/src/components/backdropscreensaver/plugin.js
new file mode 100644
index 0000000000..c0bd31fb86
--- /dev/null
+++ b/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;
+ }
+ };
+ }
+});
diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index ec19c83f00..5520ce2c7e 100644
--- a/src/components/cardbuilder/card.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 3b7516309c..44c5b3b079 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/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 || '');
}
diff --git a/src/components/dialog/package.json b/src/components/dialog/package.json
deleted file mode 100644
index d13dd844ba..0000000000
--- a/src/components/dialog/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "dialog.js"
-}
\ No newline at end of file
diff --git a/src/components/dialogHelper/dialoghelper.css b/src/components/dialogHelper/dialoghelper.css
index 2cc20b5ff2..aa4145e016 100644
--- a/src/components/dialogHelper/dialoghelper.css
+++ b/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;
diff --git a/src/components/dialogHelper/package.json b/src/components/dialogHelper/package.json
deleted file mode 100644
index 71863d045f..0000000000
--- a/src/components/dialogHelper/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "dialogHelper.js"
-}
\ No newline at end of file
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index ef51ce45b5..344d4bb593 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/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() {
diff --git a/src/components/emby-input/package.json b/src/components/emby-input/package.json
deleted file mode 100644
index 07be9f7b45..0000000000
--- a/src/components/emby-input/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "emby-input.js"
-}
\ No newline at end of file
diff --git a/src/components/emby-radio/package.json b/src/components/emby-radio/package.json
deleted file mode 100644
index 2c1b97bd32..0000000000
--- a/src/components/emby-radio/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "emby-radio.js"
-}
\ No newline at end of file
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
index 007557be91..6786824bd6 100644
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/components/emby-scroller/emby-scroller.css b/src/components/emby-scroller/emby-scroller.css
index 1e0b05b83c..11c2c73271 100644
--- a/src/components/emby-scroller/emby-scroller.css
+++ b/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 */
-/* still not ideal solution but better than the last method */
-.verticalSection > .itemsContainer .cardBox {
+.layout-tv .emby-scroller,
+.layout-mobile .emby-scroller {
+ 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;
- }
-}
\ No newline at end of file
diff --git a/src/components/emby-tabs/package.json b/src/components/emby-tabs/package.json
deleted file mode 100644
index 0813d041c7..0000000000
--- a/src/components/emby-tabs/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "emby-tabs.js"
-}
\ No newline at end of file
diff --git a/src/components/filterdialog/style.css b/src/components/filterdialog/style.css
index 5daf6eb38c..69a82d2408 100644
--- a/src/components/filterdialog/style.css
+++ b/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
diff --git a/src/components/headroom/package.json b/src/components/headroom/package.json
deleted file mode 100644
index 9c6c42c82a..0000000000
--- a/src/components/headroom/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "headroom.js"
-}
\ No newline at end of file
diff --git a/src/components/homescreensettings/homescreensettings.template.html b/src/components/homescreensettings/homescreensettings.template.html
index 56be1bc5a8..1ed2ec1b9c 100644
--- a/src/components/homescreensettings/homescreensettings.template.html
+++ b/src/components/homescreensettings/homescreensettings.template.html
@@ -104,32 +104,21 @@
${LabelSelectFolderGroups}
diff --git a/src/components/homesections/homesections.css b/src/components/homesections/homesections.css index 45df67c482..5df2440f82 100644 --- a/src/components/homesections/homesections.css +++ b/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 } diff --git a/src/components/htmlaudioplayer/plugin.js b/src/components/htmlaudioplayer/plugin.js index 1b41cc544d..ef64bad046 100644 --- a/src/components/htmlaudioplayer/plugin.js +++ b/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; -}); \ No newline at end of file +}); diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index 080cdb3e27..adc76f67b1 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/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; } diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css index 9550f2c873..e1875ff332 100644 --- a/src/components/htmlvideoplayer/style.css +++ b/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; } diff --git a/src/components/images/style.css b/src/components/images/style.css index 5cf39c1e4b..06fbf1f9cf 100644 --- a/src/components/images/style.css +++ b/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); } diff --git a/src/components/indicators/indicators.css b/src/components/indicators/indicators.css index c2d089e1af..b0d0119c05 100644 --- a/src/components/indicators/indicators.css +++ b/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; diff --git a/src/components/indicators/indicators.js b/src/components/indicators/indicators.js index 8deedef6c8..e8813d9470 100644 --- a/src/components/indicators/indicators.js +++ b/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') { diff --git a/src/components/itemMediaInfo/itemMediaInfo.template.html b/src/components/itemMediaInfo/itemMediaInfo.template.html index a947a55d2e..1eeab4fbd9 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.template.html +++ b/src/components/itemMediaInfo/itemMediaInfo.template.html @@ -1,8 +1,8 @@
';
+ html += '
';
html += "";
html += toolsMenuHtml;
navDrawerScrollContainer.innerHTML = html;
diff --git a/src/scripts/site.js b/src/scripts/site.js
index 828b882e7e..d7c3a1c8a4 100644
--- a/src/scripts/site.js
+++ b/src/scripts/site.js
@@ -453,8 +453,8 @@ var AppInfo = {};
}
function init() {
- define("livetvcss", ["css!css/livetv.css"], returnFirstDependency);
- define("detailtablecss", ["css!css/detailtable.css"], returnFirstDependency);
+ define("livetvcss", ["css!assets/css/livetv.css"], returnFirstDependency);
+ define("detailtablecss", ["css!assets/css/detailtable.css"], returnFirstDependency);
var promises = [];
if (!window.fetch) {
@@ -517,7 +517,7 @@ var AppInfo = {};
require(["systemFontsCss"]);
}
- require(["apphost", "css!css/librarybrowser"], function (appHost) {
+ require(["apphost", "css!assets/css/librarybrowser"], function (appHost) {
loadPlugins(appHost, browser).then(function () {
onAppReady(browser);
});
@@ -532,7 +532,9 @@ var AppInfo = {};
"components/htmlaudioplayer/plugin",
"components/htmlvideoplayer/plugin",
"components/photoplayer/plugin",
- "components/youtubeplayer/plugin"
+ "components/youtubeplayer/plugin",
+ "components/backdropscreensaver/plugin",
+ "components/logoscreensaver/plugin"
];
if (appHost.supports("remotecontrol")) {
@@ -573,7 +575,7 @@ var AppInfo = {};
console.log("onAppReady - loading dependencies");
if (browser.iOS) {
- require(['css!css/ios.css']);
+ require(['css!assets/css/ios.css']);
}
window.Emby.Page = appRouter;
@@ -594,6 +596,8 @@ var AppInfo = {};
require(["playerSelectionMenu", "components/playback/remotecontrolautoplay"]);
}
+ require(["components/screensavermanager"]);
+
if (!appHost.supports("physicalvolumecontrol") || browser.touch) {
require(["components/playback/volumeosd"]);
}
@@ -671,7 +675,8 @@ var AppInfo = {};
autoPlayDetect: componentsPath + "/playback/autoplaydetect",
nowPlayingHelper: componentsPath + "/playback/nowplayinghelper",
pluginManager: componentsPath + "/pluginManager",
- packageManager: componentsPath + "/packagemanager"
+ packageManager: componentsPath + "/packagemanager",
+ screensaverManager: componentsPath + "/screensavermanager"
};
requirejs.onError = onRequireJsError;
@@ -712,21 +717,21 @@ var AppInfo = {};
window.jQuery = jQuery;
});
- require(["css!css/site"]);
+ require(["css!assets/css/site"]);
// define styles
// TODO determine which of these files can be moved to the components themselves
- define("material-icons", ["css!css/material-icons/style"], returnFirstDependency);
- define("systemFontsCss", ["css!css/fonts"], returnFirstDependency);
- define("systemFontsSizedCss", ["css!css/fonts.sized"], returnFirstDependency);
- define("scrollStyles", ["css!css/scrollstyles"], returnFirstDependency);
- define("dashboardcss", ["css!css/dashboard"], returnFirstDependency);
+ define("material-icons", ["css!assets/css/material-icons/style"], returnFirstDependency);
+ define("systemFontsCss", ["css!assets/css/fonts"], returnFirstDependency);
+ define("systemFontsSizedCss", ["css!assets/css/fonts.sized"], returnFirstDependency);
+ define("scrollStyles", ["css!assets/css/scrollstyles"], returnFirstDependency);
+ define("dashboardcss", ["css!assets/css/dashboard"], returnFirstDependency);
define("programStyles", ["css!" + componentsPath + "/guide/programs"], returnFirstDependency);
define("listViewStyle", ["css!" + componentsPath + "/listview/listview"], returnFirstDependency);
define("formDialogStyle", ["css!" + componentsPath + "/formdialog"], returnFirstDependency);
- define("clearButtonStyle", ["css!" + componentsPath + "/clearbutton"], returnFirstDependency);
+ define("clearButtonStyle", ["css!assets/css/clearbutton"], returnFirstDependency);
define("cardStyle", ["css!" + componentsPath + "/cardbuilder/card"], returnFirstDependency);
- define("flexStyles", ["css!" + componentsPath + "/flexstyles"], returnFirstDependency);
+ define("flexStyles", ["css!assets/css/flexstyles"], returnFirstDependency);
// define legacy features
// TODO delete the rest of these
@@ -751,13 +756,28 @@ var AppInfo = {};
define("useractionrepository", [bowerPath + "/apiclient/sync/useractionrepository"], returnFirstDependency);
// TODO remove these libraries
- // all three have been modified so we need to fix that first
+ // all of these have been modified so we need to fix that first
define("page", [bowerPath + "/pagejs/page"], returnFirstDependency);
+ define("headroom", [componentsPath + "/headroom/headroom"], returnFirstDependency);
define("scroller", [componentsPath + "/scroller"], returnFirstDependency);
+ define("navdrawer", [componentsPath + "/navdrawer/navdrawer"], returnFirstDependency);
define("queryString", [bowerPath + "/query-string/index"], function () {
return queryString;
});
+ var elementsPath = "elements"
+ define("emby-button", [elementsPath + "/emby-button/emby-button"], returnFirstDependency);
+ define("paper-icon-button-light", [elementsPath + "/emby-button/paper-icon-button-light"], returnFirstDependency);
+ define("emby-checkbox", [elementsPath + "/emby-checkbox/emby-checkbox"], returnFirstDependency);
+ define("emby-collapse", [elementsPath + "/emby-collapse/emby-collapse"], returnFirstDependency);
+ define("emby-input", [elementsPath + "/emby-input/emby-input"], returnFirstDependency);
+ define("emby-progressring", [elementsPath + "/emby-progressring/emby-progressring"], returnFirstDependency);
+ define("emby-radio", [elementsPath + "/emby-radio/emby-radio"], returnFirstDependency);
+ define("emby-select", [elementsPath + "/emby-select/emby-select"], returnFirstDependency);
+ define("emby-slider", [elementsPath + "/emby-slider/emby-slider"], returnFirstDependency);
+ define("emby-textarea", [elementsPath + "/emby-textarea/emby-textarea"], returnFirstDependency);
+ define("emby-toggle", [elementsPath + "/emby-toggle/emby-toggle"], returnFirstDependency);
+
define("chromecastHelper", [componentsPath + "/chromecast/chromecasthelpers"], returnFirstDependency);
define("mediaSession", [componentsPath + "/playback/mediasession"], returnFirstDependency);
define("actionsheet", [componentsPath + "/actionsheet/actionsheet"], returnFirstDependency);
@@ -771,27 +791,16 @@ var AppInfo = {};
define("playerSettingsMenu", [componentsPath + "/playback/playersettingsmenu"], returnFirstDependency);
define("playMethodHelper", [componentsPath + "/playback/playmethodhelper"], returnFirstDependency);
define("brightnessOsd", [componentsPath + "/playback/brightnessosd"], returnFirstDependency);
- define("emby-collapse", [componentsPath + "/emby-collapse/emby-collapse"], returnFirstDependency);
- define("emby-button", [componentsPath + "/emby-button/emby-button"], returnFirstDependency);
define("emby-itemscontainer", [componentsPath + "/emby-itemscontainer/emby-itemscontainer"], returnFirstDependency);
define("alphaNumericShortcuts", [componentsPath + "/alphanumericshortcuts/alphanumericshortcuts"], returnFirstDependency);
define("emby-scroller", [componentsPath + "/emby-scroller/emby-scroller"], returnFirstDependency);
define("emby-tabs", [componentsPath + "/emby-tabs/emby-tabs"], returnFirstDependency);
define("emby-scrollbuttons", [componentsPath + "/emby-scrollbuttons/emby-scrollbuttons"], returnFirstDependency);
- define("emby-progressring", [componentsPath + "/emby-progressring/emby-progressring"], returnFirstDependency);
define("emby-itemrefreshindicator", [componentsPath + "/emby-itemrefreshindicator/emby-itemrefreshindicator"], returnFirstDependency);
define("multiSelect", [componentsPath + "/multiselect/multiselect"], returnFirstDependency);
define("alphaPicker", [componentsPath + "/alphapicker/alphapicker"], returnFirstDependency);
- define("paper-icon-button-light", [componentsPath + "/emby-button/paper-icon-button-light"], returnFirstDependency);
define("tabbedView", [componentsPath + "/tabbedview/tabbedview"], returnFirstDependency);
define("itemsTab", [componentsPath + "/tabbedview/itemstab"], returnFirstDependency);
- define("emby-input", [componentsPath + "/emby-input/emby-input"], returnFirstDependency);
- define("emby-select", [componentsPath + "/emby-select/emby-select"], returnFirstDependency);
- define("emby-slider", [componentsPath + "/emby-slider/emby-slider"], returnFirstDependency);
- define("emby-checkbox", [componentsPath + "/emby-checkbox/emby-checkbox"], returnFirstDependency);
- define("emby-toggle", [componentsPath + "/emby-toggle/emby-toggle"], returnFirstDependency);
- define("emby-radio", [componentsPath + "/emby-radio/emby-radio"], returnFirstDependency);
- define("emby-textarea", [componentsPath + "/emby-textarea/emby-textarea"], returnFirstDependency);
define("collectionEditor", [componentsPath + "/collectioneditor/collectioneditor"], returnFirstDependency);
define("serverRestartDialog", [componentsPath + "/serverRestartDialog"], returnFirstDependency);
define("playlistEditor", [componentsPath + "/playlisteditor/playlisteditor"], returnFirstDependency);
@@ -816,7 +825,6 @@ var AppInfo = {};
define("upNextDialog", [componentsPath + "/upnextdialog/upnextdialog"], returnFirstDependency);
define("fullscreen-doubleclick", [componentsPath + "/fullscreen/fullscreen-dc"], returnFirstDependency);
define("fullscreenManager", [componentsPath + "/fullscreenManager", "events"], returnFirstDependency);
- define("headroom", [componentsPath + "/headroom/headroom"], returnFirstDependency);
define("subtitleAppearanceHelper", [componentsPath + "/subtitlesettings/subtitleappearancehelper"], returnFirstDependency);
define("subtitleSettings", [componentsPath + "/subtitlesettings/subtitlesettings"], returnFirstDependency);
define("displaySettings", [componentsPath + "/displaysettings/displaysettings"], returnFirstDependency);
@@ -861,7 +869,6 @@ var AppInfo = {};
define("userSettings", [componentsPath + "/usersettings/usersettings"], returnFirstDependency);
define("userSettingsBuilder", [componentsPath + "/usersettings/usersettingsbuilder", "layoutManager", "browser"], returnFirstDependency);
define("imageUploader", [componentsPath + "/imageuploader/imageuploader"], returnFirstDependency);
- define("navdrawer", [componentsPath + "/navdrawer/navdrawer"], returnFirstDependency);
define("htmlMediaHelper", [componentsPath + "/htmlMediaHelper"], returnFirstDependency);
define("viewContainer", [componentsPath + "/viewContainer"], returnFirstDependency);
define("dialogHelper", [componentsPath + "/dialogHelper/dialogHelper"], returnFirstDependency);
diff --git a/src/search.html b/src/search.html
index 1fc65e3f11..acf65e7317 100644
--- a/src/search.html
+++ b/src/search.html
@@ -1,8 +1,4 @@
${HeaderAccessScheduleHelp}
-${HeaderAccessScheduleHelp}
+${WizardCompleted}
-