-
+
@@ -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
```
diff --git a/package.json b/package.json
index a7ef3f7e62..fbf1163d34 100644
--- a/package.json
+++ b/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",
@@ -36,6 +38,21 @@
"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/bundle.js b/src/bundle.js
index 508e2c3065..4748c6d281 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,7 +73,7 @@ _define("swiper", function() {
});
// sortable
-var sortable = require("sortablejs");
+var sortable = require("sortablejs").default;
_define("sortable", function() {
return sortable;
});
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/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 39cd65ba64..5520ce2c7e 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -243,7 +243,7 @@ button {
}
.coveredImage {
- background-size: 100% 100%;
+ background-size: cover;
background-position: center center;
}
@@ -622,7 +622,7 @@ button {
@media (min-width: 43.75em) {
.overflowSquareCard, .overflowPortraitCard {
- width: 23.3vw;
+ width: 23.1vw;
}
}
@@ -638,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;
}
}
@@ -656,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 {
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index c211cbc598..44c5b3b079 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -893,7 +893,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
if (item.EndDate && item.ProductionYear) {
var endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
- lines.push(item.ProductionYear + (endYear === item.ProductionYear) ? '' : (' - ' + endYear));
+ lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
} else {
lines.push(item.ProductionYear || '');
}
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/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/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 @@
${HeaderAccessScheduleHelp}
-${HeaderAccessScheduleHelp}
+${WizardCompleted}
-