diff --git a/fedora/jellyfin-web.spec b/fedora/jellyfin-web.spec index b8c77f2a1f..1d85e5ae6b 100644 --- a/fedora/jellyfin-web.spec +++ b/fedora/jellyfin-web.spec @@ -11,6 +11,8 @@ Source0: jellyfin-web-%{version}.tar.gz %if 0%{?centos} BuildRequires: yarn +# sadly the yarn RPM at https://dl.yarnpkg.com/rpm/ uses git but doesn't Requires: it +BuildRequires: git %else BuildRequires: nodejs-yarn %endif diff --git a/package.json b/package.json index 8e08e10952..cb6c0dbbbb 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-import": "^2.21.2", "eslint-plugin-promise": "^4.2.1", - "file-loader": "^6.0.0", + "file-loader": "^6.1.0", "gulp": "^4.0.2", "gulp-babel": "^8.0.0", "gulp-cli": "^2.3.0", @@ -40,26 +40,27 @@ "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-terser": "^1.4.0", - "html-webpack-plugin": "^4.3.0", + "html-webpack-plugin": "^4.4.1", "lazypipe": "^1.0.2", "node-sass": "^4.13.1", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "style-loader": "^1.1.3", - "stylelint": "^13.6.1", + "stylelint": "^13.7.0", "stylelint-config-rational-order": "^0.1.2", "stylelint-no-browser-hacks": "^1.2.1", "stylelint-order": "^4.1.0", "webpack": "^4.44.1", "webpack-merge": "^4.2.2", - "webpack-stream": "^5.2.1" + "webpack-stream": "^6.0.0", + "worker-plugin": "^5.0.0" }, "dependencies": { "alameda": "^1.4.0", "blurhash": "^1.1.3", "classlist.js": "https://github.com/eligrey/classList.js/archive/1.2.20180112.tar.gz", "core-js": "^3.6.5", - "date-fns": "^2.16.0", + "date-fns": "^2.16.1", "epubjs": "^0.3.85", "fast-text-encoding": "^1.0.3", "flv.js": "^1.5.0", @@ -71,15 +72,16 @@ "jellyfin-noto": "https://github.com/jellyfin/jellyfin-noto", "jquery": "^3.5.1", "jstree": "^3.3.10", + "libarchive.js": "^1.3.0", "libass-wasm": "https://github.com/jellyfin/JavascriptSubtitlesOctopus#4.0.0-jf-smarttv", - "material-design-icons-iconfont": "^5.0.1", + "material-design-icons-iconfont": "^6.0.1", "native-promise-only": "^0.8.0-a", "page": "^1.11.6", "query-string": "^6.13.1", "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.2", "sortablejs": "^1.10.2", - "swiper": "^5.4.5", + "swiper": "^6.1.1", "webcomponents.js": "^0.7.24", "whatwg-fetch": "^3.4.0" }, @@ -178,6 +180,7 @@ "src/plugins/experimentalWarnings/plugin.js", "src/plugins/sessionPlayer/plugin.js", "src/plugins/htmlAudioPlayer/plugin.js", + "src/plugins/comicsPlayer/plugin.js", "src/plugins/chromecastPlayer/plugin.js", "src/components/slideshow/slideshow.js", "src/components/sortmenu/sortmenu.js", diff --git a/scripts/unused.py b/scripts/unused.py index 12af27320a..abbc399cf6 100644 --- a/scripts/unused.py +++ b/scripts/unused.py @@ -16,7 +16,7 @@ langlst.append('en-us.json') dep = [] def grep(key): - command = 'grep -r -E "(\(\\\"|\(\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key + command = 'grep -r -E "(\\\"|\'|\{)%s(\\\"|\'|\})" --include=\*.{js,html} --exclude-dir=../src/strings ../src' % key p = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.STDOUT) output = p.stdout.readlines() if output: diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index cb0da0f80f..6e87f11d9d 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -1,7 +1,5 @@ html { font-family: "Noto Sans", sans-serif; - font-size: 93%; - -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -29,7 +27,9 @@ h3 { } .layout-tv { - font-size: 130%; + /* Per WebOS and Tizen guidelines, fonts must be 20px minimum. + This takes the 16px baseline and multiplies it by 1.25 to get 20px. */ + font-size: 125%; } .layout-mobile { diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 643fb9ca97..c9ee82c8a0 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -28,6 +28,10 @@ padding-top: 0 !important; } +.layout-tv .itemDetailPage { + padding-top: 4.2em !important; +} + .standalonePage { padding-top: 4.5em !important; } @@ -163,6 +167,12 @@ transition: background ease-in-out 0.5s; } +.layout-tv .skinHeader { + /* In TV layout, it makes more sense to keep the top bar at the top of the page + Having it follow the view only makes us lose vertical space, while not being focusable */ + position: relative; +} + .hiddenViewMenuBar .skinHeader { display: none; } @@ -447,8 +457,7 @@ height: 26.5vh; } -.layout-desktop .itemBackdrop::after, -.layout-tv .itemBackdrop::after { +.layout-desktop .itemBackdrop::after { content: ""; width: 100%; height: 100%; @@ -456,8 +465,8 @@ display: block; } -.layout-desktop .noBackdrop .itemBackdrop, -.layout-tv .noBackdrop .itemBackdrop { +.layout-tv .itemBackdrop, +.layout-desktop .noBackdrop .itemBackdrop { display: none; } @@ -624,6 +633,10 @@ z-index: 2; } +.layout-tv .detailPagePrimaryContainer { + display: block; +} + .layout-mobile .detailPagePrimaryContainer { display: block; position: relative; @@ -637,12 +650,16 @@ padding-left: 32.45vw; } -.layout-desktop .detailRibbon, -.layout-tv .detailRibbon { +.layout-desktop .detailRibbon { margin-top: -7.2em; height: 7.2em; } +.layout-tv .detailRibbon { + margin-top: 0; + height: inherit; +} + .layout-desktop .noBackdrop .detailRibbon, .layout-tv .noBackdrop .detailRibbon { margin-top: 0; @@ -748,8 +765,7 @@ div.itemDetailGalleryLink.defaultCardBackground { position: relative; } - .layout-desktop .itemBackdrop, - .layout-tv .itemBackdrop { + .layout-desktop .itemBackdrop { height: 40vh; } @@ -775,13 +791,8 @@ div.itemDetailGalleryLink.defaultCardBackground { } .emby-button.detailFloatingButton { - position: absolute; - background-color: rgba(0, 0, 0, 0.5); - z-index: 3; - top: 100%; - left: 90%; - margin: -2.2em 0 0 -2.2em; - padding: 0.4em; + font-size: 1.4em; + margin-right: 0.5em !important; color: rgba(255, 255, 255, 0.76); } @@ -844,7 +855,7 @@ div.itemDetailGalleryLink.defaultCardBackground { -webkit-align-items: center; align-items: center; margin: 0 !important; - padding: 0.5em 0.7em !important; + padding: 0.7em 0.7em !important; } @media all and (min-width: 29em) { @@ -913,10 +924,6 @@ div.itemDetailGalleryLink.defaultCardBackground { } @media all and (min-width: 100em) { - .detailFloatingButton { - display: none !important; - } - .personBackdrop { display: none !important; } @@ -925,6 +932,11 @@ div.itemDetailGalleryLink.defaultCardBackground { font-size: 108%; margin: 1.25em 0; } + + .layout-tv .mainDetailButtons { + font-size: 108%; + margin: 1em 0 1.25em; + } } @media all and (max-width: 50em) { @@ -1140,13 +1152,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .layout-tv .padded-top-focusscale { - padding-top: 1em; - margin-top: -1em; + padding-top: 1.5em; + margin-top: -1.5em; } .layout-tv .padded-bottom-focusscale { - padding-bottom: 1em; - margin-bottom: -1em; + padding-bottom: 1.5em; + margin-bottom: -1.5em; } @media all and (min-height: 31.25em) { diff --git a/src/bundle.js b/src/bundle.js index 5a7ffed075..25810f58ee 100644 --- a/src/bundle.js +++ b/src/bundle.js @@ -60,8 +60,8 @@ _define('resize-observer-polyfill', function() { }); // swiper -const swiper = require('swiper/js/swiper'); -require('swiper/css/swiper.min.css'); +const swiper = require('swiper/swiper-bundle'); +require('swiper/swiper-bundle.css'); _define('swiper', function() { return swiper; }); @@ -175,3 +175,9 @@ _define('connectionManagerFactory', function () { _define('appStorage', function () { return apiclient.AppStorage; }); + +// libarchive.js +var libarchive = require('libarchive.js'); +_define('libarchive', function () { + return libarchive; +}); diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 74c376e85b..4c046ce984 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -209,6 +209,10 @@ button::-moz-focus-inner { contain: strict; } +.defaultCardBackground { + display: flex; +} + .cardContent:not(.defaultCardBackground) { background-color: transparent; } diff --git a/src/components/channelMapper/channelMapper.js b/src/components/channelMapper/channelMapper.js index 65d30ebe0d..294f9e223a 100644 --- a/src/components/channelMapper/channelMapper.js +++ b/src/components/channelMapper/channelMapper.js @@ -23,6 +23,7 @@ export default class channelMapper { tunerChannelId: channelId, providerChannelId: providerChannelId }), + contentType: 'application/json', dataType: 'json' }).then(mapping => { const listItem = dom.parentWithClass(button, 'listItem'); diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js index 4205e04a4f..3dd3302b28 100644 --- a/src/components/directorybrowser/directorybrowser.js +++ b/src/components/directorybrowser/directorybrowser.js @@ -169,7 +169,8 @@ import 'emby-button'; data: JSON.stringify({ ValidateWriteable: validateWriteable, Path: path - }) + }), + contentType: 'application/json' }).catch(response => { if (response) { if (response.status === 404) { diff --git a/src/components/favoriteitems.js b/src/components/favoriteitems.js index 7a94b07454..86cd050216 100644 --- a/src/components/favoriteitems.js +++ b/src/components/favoriteitems.js @@ -28,21 +28,21 @@ import 'emby-itemscontainer'; function getSections() { return [{ - name: 'HeaderFavoriteMovies', + name: 'Movies', types: 'Movie', id: 'favoriteMovies', shape: getPosterShape(), showTitle: false, overlayPlayButton: true }, { - name: 'HeaderFavoriteShows', + name: 'Shows', types: 'Series', id: 'favoriteShows', shape: getPosterShape(), showTitle: false, overlayPlayButton: true }, { - name: 'HeaderFavoriteEpisodes', + name: 'Episodes', types: 'Episode', id: 'favoriteEpisode', shape: getThumbShape(), @@ -53,7 +53,7 @@ import 'emby-itemscontainer'; overlayText: false, centerText: true }, { - name: 'HeaderFavoriteVideos', + name: 'Videos', types: 'Video,MusicVideo', id: 'favoriteVideos', shape: getThumbShape(), @@ -63,7 +63,7 @@ import 'emby-itemscontainer'; overlayText: false, centerText: true }, { - name: 'HeaderFavoriteArtists', + name: 'Artists', types: 'MusicArtist', id: 'favoriteArtists', shape: getSquareShape(), @@ -75,7 +75,7 @@ import 'emby-itemscontainer'; overlayPlayButton: true, coverImage: true }, { - name: 'HeaderFavoriteAlbums', + name: 'Albums', types: 'MusicAlbum', id: 'favoriteAlbums', shape: getSquareShape(), @@ -87,7 +87,7 @@ import 'emby-itemscontainer'; overlayPlayButton: true, coverImage: true }, { - name: 'HeaderFavoriteSongs', + name: 'Songs', types: 'Audio', id: 'favoriteSongs', shape: getSquareShape(), diff --git a/src/components/filterdialog/filterdialog.template.html b/src/components/filterdialog/filterdialog.template.html index 1d61f3923e..03aba5ee35 100644 --- a/src/components/filterdialog/filterdialog.template.html +++ b/src/components/filterdialog/filterdialog.template.html @@ -6,12 +6,12 @@