From b2372a96e25120b218a210b656900ac1a7aa07d0 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Thu, 14 Apr 2022 01:19:27 -0400 Subject: [PATCH 01/39] Add react-router --- package-lock.json | 17 +++++++ package.json | 1 + src/components/HistoryRouter.tsx | 22 ++++++++ src/components/Page.tsx | 50 +++++++++++++++++++ src/components/appRouter.js | 4 +- src/components/pages/SearchPage.tsx | 42 ---------------- src/components/search/LiveTVSearchResults.tsx | 4 +- src/components/search/SearchResults.tsx | 4 +- src/components/search/SearchSuggestions.tsx | 2 +- src/components/viewManager/viewManager.js | 9 ++++ src/controllers/search.html | 2 - src/index.html | 1 + src/routes/index.tsx | 16 ++++++ src/routes/search.tsx | 40 +++++++++++++++ src/scripts/routes.js | 6 --- src/scripts/site.js | 15 +++++- 16 files changed, 176 insertions(+), 59 deletions(-) create mode 100644 src/components/HistoryRouter.tsx create mode 100644 src/components/Page.tsx delete mode 100644 src/components/pages/SearchPage.tsx delete mode 100644 src/controllers/search.html create mode 100644 src/routes/index.tsx create mode 100644 src/routes/search.tsx diff --git a/package-lock.json b/package-lock.json index 765cfd27cd..50dd570d6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10760,6 +10760,23 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "react-router": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz", + "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz", + "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==", + "requires": { + "history": "^5.2.0", + "react-router": "6.3.0" + } + }, "read-file-stdin": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/read-file-stdin/-/read-file-stdin-0.2.1.tgz", diff --git a/package.json b/package.json index 8c14b329f1..022483d232 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "pdfjs-dist": "2.12.313", "react": "17.0.2", "react-dom": "17.0.2", + "react-router-dom": "6.3.0", "resize-observer-polyfill": "1.5.1", "screenfull": "6.0.0", "sortablejs": "1.14.0", diff --git a/src/components/HistoryRouter.tsx b/src/components/HistoryRouter.tsx new file mode 100644 index 0000000000..d789944e03 --- /dev/null +++ b/src/components/HistoryRouter.tsx @@ -0,0 +1,22 @@ +import React, { useLayoutEffect } from 'react'; +import { HistoryRouterProps, Router } from 'react-router-dom'; + +export function HistoryRouter({ basename, children, history }: HistoryRouterProps) { + const [state, setState] = React.useState({ + action: history.action, + location: history.location + }); + + useLayoutEffect(() => history.listen(setState), [history]); + + return ( + + ); +} diff --git a/src/components/Page.tsx b/src/components/Page.tsx new file mode 100644 index 0000000000..7772e495cd --- /dev/null +++ b/src/components/Page.tsx @@ -0,0 +1,50 @@ +import React, { FunctionComponent, useEffect, useRef } from 'react'; + +import viewManager from './viewManager/viewManager'; + +type PageProps = { + title?: string +}; + +/** + * Page component that handles hiding active non-react views, triggering the required events for + * navigation and appRouter state updates, and setting the correct classes and data attributes. + */ +const Page: FunctionComponent = ({ children, title }) => { + const element = useRef(null); + + useEffect(() => { + // hide active non-react views + viewManager.hideView(); + }, []); + + useEffect(() => { + const event = { + bubbles: true, + cancelable: false, + detail: { + isRestored: false + } + }; + // pagebeforeshow - hides tabs on tabless pages in libraryMenu + element.current?.dispatchEvent(new CustomEvent('pagebeforeshow', event)); + // viewshow - updates state of appRouter + element.current?.dispatchEvent(new CustomEvent('viewshow', event)); + // pageshow - updates header/navigation in libraryMenu + element.current?.dispatchEvent(new CustomEvent('pageshow', event)); + }, [ element ]); + + return ( +
+ {children} +
+ ); +}; + +export default Page; diff --git a/src/components/appRouter.js b/src/components/appRouter.js index 3b5f356653..7cad70394a 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -122,7 +122,7 @@ class AppRouter { isBack: action === Action.Pop }); } else { - console.warn('[appRouter] "%s" route not found', normalizedPath, location); + console.info('[appRouter] "%s" route not found', normalizedPath, location); } } @@ -139,7 +139,7 @@ class AppRouter { Events.on(apiClient, 'requestfail', this.onRequestFail); }); - ServerConnections.connect().then(result => { + return ServerConnections.connect().then(result => { this.firstConnectionResult = result; // Handle the initial route diff --git a/src/components/pages/SearchPage.tsx b/src/components/pages/SearchPage.tsx deleted file mode 100644 index a63d450e8e..0000000000 --- a/src/components/pages/SearchPage.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { FunctionComponent, useState } from 'react'; - -import SearchFields from '../search/SearchFields'; -import SearchResults from '../search/SearchResults'; -import SearchSuggestions from '../search/SearchSuggestions'; -import LiveTVSearchResults from '../search/LiveTVSearchResults'; - -type SearchProps = { - serverId?: string, - parentId?: string, - collectionType?: string -}; - -const SearchPage: FunctionComponent = ({ serverId, parentId, collectionType }: SearchProps) => { - const [ query, setQuery ] = useState(); - - return ( - <> - - {!query && - - } - - - - ); -}; - -export default SearchPage; diff --git a/src/components/search/LiveTVSearchResults.tsx b/src/components/search/LiveTVSearchResults.tsx index 67378bc138..b79a24c3be 100644 --- a/src/components/search/LiveTVSearchResults.tsx +++ b/src/components/search/LiveTVSearchResults.tsx @@ -21,8 +21,8 @@ const CARD_OPTIONS = { type LiveTVSearchResultsProps = { serverId?: string; - parentId?: string; - collectionType?: string; + parentId?: string | null; + collectionType?: string | null; query?: string; } diff --git a/src/components/search/SearchResults.tsx b/src/components/search/SearchResults.tsx index 9f6d30a708..a54e568a3c 100644 --- a/src/components/search/SearchResults.tsx +++ b/src/components/search/SearchResults.tsx @@ -9,8 +9,8 @@ import SearchResultsRow from './SearchResultsRow'; type SearchResultsProps = { serverId?: string; - parentId?: string; - collectionType?: string; + parentId?: string | null; + collectionType?: string | null; query?: string; } diff --git a/src/components/search/SearchSuggestions.tsx b/src/components/search/SearchSuggestions.tsx index fee361a162..abc24eb7f6 100644 --- a/src/components/search/SearchSuggestions.tsx +++ b/src/components/search/SearchSuggestions.tsx @@ -22,7 +22,7 @@ const createSuggestionLink = ({ name, href }: { name: string, href: string }) => type SearchSuggestionsProps = { serverId?: string; - parentId?: string; + parentId?: string | null; } const SearchSuggestions: FunctionComponent = ({ serverId = window.ApiClient.serverId(), parentId }: SearchSuggestionsProps) => { diff --git a/src/components/viewManager/viewManager.js b/src/components/viewManager/viewManager.js index 501bd928ae..5073cccf8c 100644 --- a/src/components/viewManager/viewManager.js +++ b/src/components/viewManager/viewManager.js @@ -147,6 +147,15 @@ class ViewManager { }); } + hideView() { + if (currentView) { + dispatchViewEvent(currentView, null, 'viewbeforehide'); + dispatchViewEvent(currentView, null, 'viewhide'); + currentView.classList.add('hide'); + currentView = null; + } + } + tryRestoreView(options, onViewChanging) { if (options.cancel) { return Promise.reject({ cancelled: true }); diff --git a/src/controllers/search.html b/src/controllers/search.html deleted file mode 100644 index e6fa92c0fc..0000000000 --- a/src/controllers/search.html +++ /dev/null @@ -1,2 +0,0 @@ -
-
diff --git a/src/index.html b/src/index.html index f6a4a956c8..d77378d3f8 100644 --- a/src/index.html +++ b/src/index.html @@ -158,6 +158,7 @@
+
diff --git a/src/routes/index.tsx b/src/routes/index.tsx new file mode 100644 index 0000000000..31cb06b8c2 --- /dev/null +++ b/src/routes/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Route, Routes } from 'react-router-dom'; + +import SearchPage from './search'; + +const AppRoutes = () => ( + + + } /> + {/* Suppress warnings for unhandled routes */} + + + +); + +export default AppRoutes; diff --git a/src/routes/search.tsx b/src/routes/search.tsx new file mode 100644 index 0000000000..864af6141e --- /dev/null +++ b/src/routes/search.tsx @@ -0,0 +1,40 @@ +import React, { FunctionComponent, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; + +import Page from '../components/Page'; +import SearchFields from '../components/search/SearchFields'; +import SearchResults from '../components/search/SearchResults'; +import SearchSuggestions from '../components/search/SearchSuggestions'; +import LiveTVSearchResults from '../components/search/LiveTVSearchResults'; +import globalize from '../scripts/globalize'; + +const SearchPage: FunctionComponent = () => { + const [ query, setQuery ] = useState(); + const [ searchParams ] = useSearchParams(); + + return ( + + + {!query && + + } + + + + ); +}; + +export default SearchPage; diff --git a/src/scripts/routes.js b/src/scripts/routes.js index a96ab7a30d..e1f7cd8a3b 100644 --- a/src/scripts/routes.js +++ b/src/scripts/routes.js @@ -308,12 +308,6 @@ import { appRouter } from '../components/appRouter'; type: 'home' }); - defineRoute({ - alias: '/search.html', - path: 'search.html', - pageComponent: 'SearchPage' - }); - defineRoute({ alias: '/list.html', path: 'list.html', diff --git a/src/scripts/site.js b/src/scripts/site.js index bfe40d5045..edf2dab2cd 100644 --- a/src/scripts/site.js +++ b/src/scripts/site.js @@ -7,6 +7,8 @@ import 'classlist.js'; import 'whatwg-fetch'; import 'resize-observer-polyfill'; import '../assets/css/site.scss'; +import React from 'react'; +import * as ReactDOM from 'react-dom'; import { Events } from 'jellyfin-apiclient'; import ServerConnections from '../components/ServerConnections'; import globalize from './globalize'; @@ -18,7 +20,7 @@ import { appHost } from '../components/apphost'; import { getPlugins } from './settings/webSettings'; import { pluginManager } from '../components/pluginManager'; import packageManager from '../components/packageManager'; -import { appRouter } from '../components/appRouter'; +import { appRouter, history } from '../components/appRouter'; import '../elements/emby-button/emby-button'; import './autoThemes'; import './libraryMenu'; @@ -40,6 +42,8 @@ import SyncPlayHtmlVideoPlayer from '../components/syncPlay/ui/players/HtmlVideo import SyncPlayHtmlAudioPlayer from '../components/syncPlay/ui/players/HtmlAudioPlayer'; import { currentSettings } from './settings/userSettings'; import taskButton from './taskbutton'; +import { HistoryRouter } from '../components/HistoryRouter.tsx'; +import AppRoutes from '../routes/index.tsx'; function loadCoreDictionary() { const languages = ['af', 'ar', 'be-by', 'bg-bg', 'bn_bd', 'ca', 'cs', 'cy', 'da', 'de', 'el', 'en-gb', 'en-us', 'eo', 'es', 'es-419', 'es-ar', 'es_do', 'es-mx', 'et', 'fa', 'fi', 'fil', 'fr', 'fr-ca', 'gl', 'gsw', 'he', 'hi-in', 'hr', 'hu', 'id', 'it', 'ja', 'kk', 'ko', 'lt-lt', 'lv', 'mr', 'ms', 'nb', 'nl', 'nn', 'pl', 'pr', 'pt', 'pt-br', 'pt-pt', 'ro', 'ru', 'sk', 'sl-si', 'sq', 'sv', 'ta', 'th', 'tr', 'uk', 'ur_pk', 'vi', 'zh-cn', 'zh-hk', 'zh-tw']; @@ -167,7 +171,14 @@ async function onAppReady() { ServerConnections.currentApiClient()?.ensureWebSocket(); }); - appRouter.start(); + await appRouter.start(); + + ReactDOM.render( + + + , + document.getElementById('reactRoot') + ); if (!browser.tv && !browser.xboxOne && !browser.ps4) { import('../components/nowPlayingBar/nowPlayingBar'); From 1aeb90d323d3c3c943c388cbc0d36b521cafb18e Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Fri, 22 Apr 2022 14:27:28 -0400 Subject: [PATCH 02/39] Add authentication/connection checks for react-router routes --- src/components/ConnectedRoute.tsx | 162 ++++++++++++++++++++++++++++++ src/routes/index.tsx | 10 +- 2 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 src/components/ConnectedRoute.tsx diff --git a/src/components/ConnectedRoute.tsx b/src/components/ConnectedRoute.tsx new file mode 100644 index 0000000000..ce5f639eba --- /dev/null +++ b/src/components/ConnectedRoute.tsx @@ -0,0 +1,162 @@ +import React, { FunctionComponent, useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import globalize from '../scripts/globalize'; + +import alert from './alert'; +import { appRouter } from './appRouter'; +import loading from './loading/loading'; +import ServerConnections from './ServerConnections'; + +enum Routes { + Home = '/home.html', + Login = '/login.html', + SelectServer = '/selectserver.html', + StartWizard = '/wizardstart.html' +} + +// TODO: This should probably be in the SDK +enum ConnectionState { + SignedIn = 'SignedIn', + ServerSignIn = 'ServerSignIn', + ServerSelection = 'ServerSelection', + ServerUpdateNeeded = 'ServerUpdateNeeded' +} + +type ConnectedRouteProps = { + isAdminRoute?: boolean, + isUserRoute?: boolean, + roles?: string[] +}; + +const ConnectedRoute: FunctionComponent = ({ + children, + isAdminRoute = false, + isUserRoute = true +}) => { + const navigate = useNavigate(); + + const [ isLoading, setIsLoading ] = useState(true); + + useEffect(() => { + const bounce = async (connectionResponse: any) => { + switch (connectionResponse.State) { + case ConnectionState.SignedIn: + // Already logged in, bounce to the home page + console.debug('[ConnectedRoute] already logged in, redirecting to home'); + navigate(Routes.Home); + return; + case ConnectionState.ServerSignIn: + // Bounce to the login page + console.debug('[ConnectedRoute] not logged in, redirecting to login page'); + navigate(Routes.Login, { + state: { + serverid: connectionResponse.ApiClient.serverId() + } + }); + return; + case ConnectionState.ServerSelection: + // Bounce to select server page + console.debug('[ConnectedRoute] redirecting to select server page'); + navigate(Routes.SelectServer); + return; + case ConnectionState.ServerUpdateNeeded: + // Show update needed message and bounce to select server page + try { + await alert({ + text: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'), + html: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin') + }); + } catch (ex) { + console.warn('[ConnectedRoute] failed to show alert', ex); + } + console.debug('[ConnectedRoute] server update required, redirecting to select server page'); + navigate(Routes.SelectServer); + return; + } + + console.warn('[ConnectedRoute] unhandled connection state', connectionResponse.State); + }; + + const validateConnection = async () => { + // Check connection status on initial page load + const firstConnection = appRouter.firstConnectionResult; + appRouter.firstConnectionResult = null; + + if (firstConnection && firstConnection.State !== ConnectionState.SignedIn) { + if (firstConnection.State === ConnectionState.ServerSignIn) { + // Verify the wizard is complete + try { + const infoResponse = await fetch(`${firstConnection.ApiClient.serverAddress()}/System/Info/Public`); + if (!infoResponse.ok) { + throw new Error('Public system info request failed'); + } + const systemInfo = await infoResponse.json(); + if (!systemInfo.StartupWizardCompleted) { + // Bounce to the wizard + console.info('[ConnectedRoute] startup wizard is not complete, redirecting there'); + navigate(Routes.StartWizard); + return; + } + } catch (ex) { + console.error('[ConnectedRoute] checking wizard status failed', ex); + } + } + + // Bounce to the correct page in the login flow + bounce(firstConnection); + return; + } + + // TODO: should exiting the app be handled here? + + const client = ServerConnections.currentApiClient(); + + // If this is a user route, ensure a user is logged in + if ((isAdminRoute || isUserRoute) && !client?.isLoggedIn()) { + try { + console.warn('[ConnectedRoute] unauthenticated user attempted to access user route'); + bounce(await ServerConnections.connect()); + } catch (ex) { + console.warn('[ConnectedRoute] error bouncing from user route', ex); + } + return; + } + + // If this is an admin route, ensure the user has access + if (isAdminRoute) { + try { + const user = await client.getCurrentUser(); + if (!user.Policy.IsAdministrator) { + console.warn('[ConnectedRoute] normal user attempted to access admin route'); + bounce(await ServerConnections.connect()); + return; + } + } catch (ex) { + console.warn('[ConnectedRoute] error bouncing from admin route', ex); + return; + } + } + + setIsLoading(false); + }; + + loading.show(); + validateConnection(); + }, [ isAdminRoute, isUserRoute, navigate ]); + + useEffect(() => { + if (!isLoading) { + loading.hide(); + } + }, [ isLoading ]); + + if (isLoading) { + return null; + } + + return ( + <>{children} + ); +}; + +export default ConnectedRoute; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 31cb06b8c2..49c8e52a49 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,12 +1,20 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; +import ConnectedRoute from '../components/ConnectedRoute'; import SearchPage from './search'; const AppRoutes = () => ( - } /> + + + + } + /> {/* Suppress warnings for unhandled routes */} From 05dbeff4733f3f6bf180ceb0d00012e8d86649f5 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Sat, 23 Apr 2022 01:42:42 -0400 Subject: [PATCH 03/39] Fix hashbang route handling for react-router --- src/components/HistoryRouter.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/HistoryRouter.tsx b/src/components/HistoryRouter.tsx index d789944e03..9b0e64f60a 100644 --- a/src/components/HistoryRouter.tsx +++ b/src/components/HistoryRouter.tsx @@ -1,5 +1,8 @@ import React, { useLayoutEffect } from 'react'; import { HistoryRouterProps, Router } from 'react-router-dom'; +import { Update } from 'history'; + +const normalizePath = (pathname: string) => pathname.replace(/^!/, ''); export function HistoryRouter({ basename, children, history }: HistoryRouterProps) { const [state, setState] = React.useState({ @@ -7,14 +10,27 @@ export function HistoryRouter({ basename, children, history }: HistoryRouterProp location: history.location }); - useLayoutEffect(() => history.listen(setState), [history]); + useLayoutEffect(() => { + const onHistoryChange = (update: Update) => { + if (update.location.pathname.startsWith('!')) { + history.replace(normalizePath(update.location.pathname), update.location.state); + } else { + setState(update); + } + }; + + history.listen(onHistoryChange); + }, [ history ]); return ( From 2e49d2db8b0eb008f9b4adb139c7f3e6bec9003b Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Mon, 25 Apr 2022 12:38:10 -0400 Subject: [PATCH 04/39] Rename ConnectedRoute component --- ...nectedRoute.tsx => ConnectionRequired.tsx} | 65 ++++++++++--------- src/components/HistoryRouter.tsx | 10 +++ src/routes/index.tsx | 6 +- 3 files changed, 48 insertions(+), 33 deletions(-) rename src/components/{ConnectedRoute.tsx => ConnectionRequired.tsx} (66%) diff --git a/src/components/ConnectedRoute.tsx b/src/components/ConnectionRequired.tsx similarity index 66% rename from src/components/ConnectedRoute.tsx rename to src/components/ConnectionRequired.tsx index ce5f639eba..1d127e2e89 100644 --- a/src/components/ConnectedRoute.tsx +++ b/src/components/ConnectionRequired.tsx @@ -1,13 +1,13 @@ import React, { FunctionComponent, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import globalize from '../scripts/globalize'; import alert from './alert'; import { appRouter } from './appRouter'; import loading from './loading/loading'; import ServerConnections from './ServerConnections'; +import globalize from '../scripts/globalize'; -enum Routes { +enum BounceRoutes { Home = '/home.html', Login = '/login.html', SelectServer = '/selectserver.html', @@ -22,33 +22,38 @@ enum ConnectionState { ServerUpdateNeeded = 'ServerUpdateNeeded' } -type ConnectedRouteProps = { - isAdminRoute?: boolean, - isUserRoute?: boolean, - roles?: string[] +type ConnectionRequiredProps = { + isAdminRequired?: boolean, + isUserRequired?: boolean }; -const ConnectedRoute: FunctionComponent = ({ +/** + * A component that ensures a server connection has been established. + * Additional parameters exist to verify a user or admin have authenticated. + * If a condition fails, this component will navigate to the appropriate page. + */ +const ConnectionRequired: FunctionComponent = ({ children, - isAdminRoute = false, - isUserRoute = true + isAdminRequired = false, + isUserRequired = true }) => { const navigate = useNavigate(); const [ isLoading, setIsLoading ] = useState(true); useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const bounce = async (connectionResponse: any) => { switch (connectionResponse.State) { case ConnectionState.SignedIn: // Already logged in, bounce to the home page - console.debug('[ConnectedRoute] already logged in, redirecting to home'); - navigate(Routes.Home); + console.debug('[ConnectionRequired] already logged in, redirecting to home'); + navigate(BounceRoutes.Home); return; case ConnectionState.ServerSignIn: // Bounce to the login page - console.debug('[ConnectedRoute] not logged in, redirecting to login page'); - navigate(Routes.Login, { + console.debug('[ConnectionRequired] not logged in, redirecting to login page'); + navigate(BounceRoutes.Login, { state: { serverid: connectionResponse.ApiClient.serverId() } @@ -56,8 +61,8 @@ const ConnectedRoute: FunctionComponent = ({ return; case ConnectionState.ServerSelection: // Bounce to select server page - console.debug('[ConnectedRoute] redirecting to select server page'); - navigate(Routes.SelectServer); + console.debug('[ConnectionRequired] redirecting to select server page'); + navigate(BounceRoutes.SelectServer); return; case ConnectionState.ServerUpdateNeeded: // Show update needed message and bounce to select server page @@ -67,14 +72,14 @@ const ConnectedRoute: FunctionComponent = ({ html: globalize.translate('ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin') }); } catch (ex) { - console.warn('[ConnectedRoute] failed to show alert', ex); + console.warn('[ConnectionRequired] failed to show alert', ex); } - console.debug('[ConnectedRoute] server update required, redirecting to select server page'); - navigate(Routes.SelectServer); + console.debug('[ConnectionRequired] server update required, redirecting to select server page'); + navigate(BounceRoutes.SelectServer); return; } - console.warn('[ConnectedRoute] unhandled connection state', connectionResponse.State); + console.warn('[ConnectionRequired] unhandled connection state', connectionResponse.State); }; const validateConnection = async () => { @@ -93,12 +98,12 @@ const ConnectedRoute: FunctionComponent = ({ const systemInfo = await infoResponse.json(); if (!systemInfo.StartupWizardCompleted) { // Bounce to the wizard - console.info('[ConnectedRoute] startup wizard is not complete, redirecting there'); - navigate(Routes.StartWizard); + console.info('[ConnectionRequired] startup wizard is not complete, redirecting there'); + navigate(BounceRoutes.StartWizard); return; } } catch (ex) { - console.error('[ConnectedRoute] checking wizard status failed', ex); + console.error('[ConnectionRequired] checking wizard status failed', ex); } } @@ -112,27 +117,27 @@ const ConnectedRoute: FunctionComponent = ({ const client = ServerConnections.currentApiClient(); // If this is a user route, ensure a user is logged in - if ((isAdminRoute || isUserRoute) && !client?.isLoggedIn()) { + if ((isAdminRequired || isUserRequired) && !client?.isLoggedIn()) { try { - console.warn('[ConnectedRoute] unauthenticated user attempted to access user route'); + console.warn('[ConnectionRequired] unauthenticated user attempted to access user route'); bounce(await ServerConnections.connect()); } catch (ex) { - console.warn('[ConnectedRoute] error bouncing from user route', ex); + console.warn('[ConnectionRequired] error bouncing from user route', ex); } return; } // If this is an admin route, ensure the user has access - if (isAdminRoute) { + if (isAdminRequired) { try { const user = await client.getCurrentUser(); if (!user.Policy.IsAdministrator) { - console.warn('[ConnectedRoute] normal user attempted to access admin route'); + console.warn('[ConnectionRequired] normal user attempted to access admin route'); bounce(await ServerConnections.connect()); return; } } catch (ex) { - console.warn('[ConnectedRoute] error bouncing from admin route', ex); + console.warn('[ConnectionRequired] error bouncing from admin route', ex); return; } } @@ -142,7 +147,7 @@ const ConnectedRoute: FunctionComponent = ({ loading.show(); validateConnection(); - }, [ isAdminRoute, isUserRoute, navigate ]); + }, [ isAdminRequired, isUserRequired, navigate ]); useEffect(() => { if (!isLoading) { @@ -159,4 +164,4 @@ const ConnectedRoute: FunctionComponent = ({ ); }; -export default ConnectedRoute; +export default ConnectionRequired; diff --git a/src/components/HistoryRouter.tsx b/src/components/HistoryRouter.tsx index 9b0e64f60a..68577dc1d5 100644 --- a/src/components/HistoryRouter.tsx +++ b/src/components/HistoryRouter.tsx @@ -2,8 +2,16 @@ import React, { useLayoutEffect } from 'react'; import { HistoryRouterProps, Router } from 'react-router-dom'; import { Update } from 'history'; +/** Strips leading "!" from paths */ const normalizePath = (pathname: string) => pathname.replace(/^!/, ''); +/** + * A slightly customized version of the HistoryRouter from react-router-dom. + * We need to use HistoryRouter to have a shared history state between react-router and appRouter, but it does not seem + * to be properly exported in the upstream package. + * We also needed some customizations to handle #! routes. + * Refs: https://github.com/remix-run/react-router/blob/v6.3.0/packages/react-router-dom/index.tsx#L222 + */ export function HistoryRouter({ basename, children, history }: HistoryRouterProps) { const [state, setState] = React.useState({ action: history.action, @@ -13,6 +21,7 @@ export function HistoryRouter({ basename, children, history }: HistoryRouterProp useLayoutEffect(() => { const onHistoryChange = (update: Update) => { if (update.location.pathname.startsWith('!')) { + // When the location changes, we need to check for #! paths and replace the location with the "!" stripped history.replace(normalizePath(update.location.pathname), update.location.state); } else { setState(update); @@ -29,6 +38,7 @@ export function HistoryRouter({ basename, children, history }: HistoryRouterProp children={children} location={{ ...state.location, + // The original location does not get replaced with the normalized version, so we need to strip it here pathname: normalizePath(state.location.pathname) }} navigationType={state.action} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 49c8e52a49..3cc4896874 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; -import ConnectedRoute from '../components/ConnectedRoute'; +import ConnectionRequired from '../components/ConnectionRequired'; import SearchPage from './search'; const AppRoutes = () => ( @@ -10,9 +10,9 @@ const AppRoutes = () => ( + - + } /> {/* Suppress warnings for unhandled routes */} From ceb10e2877e86c76e471f0db3c9d5ec469fa00d7 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Mon, 25 Apr 2022 12:53:33 -0400 Subject: [PATCH 05/39] Update current route state for unhandled routes in app router --- src/components/appRouter.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/appRouter.js b/src/components/appRouter.js index 7cad70394a..cab40043b1 100644 --- a/src/components/appRouter.js +++ b/src/components/appRouter.js @@ -123,6 +123,10 @@ class AppRouter { }); } else { console.info('[appRouter] "%s" route not found', normalizedPath, location); + this.currentRouteInfo = { + route: {}, + path: normalizedPath + location.search + }; } } From b349d8953475efd106cee83eae8da7e9d74a0c8a Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Tue, 14 Jun 2022 12:48:49 -0400 Subject: [PATCH 06/39] Add options to Page props --- src/components/Page.tsx | 16 +++++++++++----- src/routes/search.tsx | 2 +- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/Page.tsx b/src/components/Page.tsx index 7772e495cd..399c1a55c1 100644 --- a/src/components/Page.tsx +++ b/src/components/Page.tsx @@ -1,16 +1,22 @@ -import React, { FunctionComponent, useEffect, useRef } from 'react'; +import React, { FunctionComponent, HTMLAttributes, useEffect, useRef } from 'react'; import viewManager from './viewManager/viewManager'; type PageProps = { - title?: string + title?: string, + isBackButtonEnabled?: boolean }; /** * Page component that handles hiding active non-react views, triggering the required events for * navigation and appRouter state updates, and setting the correct classes and data attributes. */ -const Page: FunctionComponent = ({ children, title }) => { +const Page: FunctionComponent> = ({ + children, + className = '', + title, + isBackButtonEnabled = true +}) => { const element = useRef(null); useEffect(() => { @@ -38,9 +44,9 @@ const Page: FunctionComponent = ({ children, title }) => {
{children}
diff --git a/src/routes/search.tsx b/src/routes/search.tsx index 864af6141e..cd50e9e0b6 100644 --- a/src/routes/search.tsx +++ b/src/routes/search.tsx @@ -13,7 +13,7 @@ const SearchPage: FunctionComponent = () => { const [ searchParams ] = useSearchParams(); return ( - + {!query && Date: Wed, 15 Jun 2022 10:53:13 -0400 Subject: [PATCH 07/39] Use babel transform for react-router --- webpack.common.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.common.js b/webpack.common.js index fb0db8f0a5..8d6d702bf6 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -96,7 +96,7 @@ module.exports = { }, { test: /\.(js|jsx)$/, - exclude: /node_modules[\\/](?!@uupaa[\\/]dynamic-import-polyfill|blurhash|date-fns|epubjs|flv.js|libarchive.js|marked|screenfull)/, + exclude: /node_modules[\\/](?!@uupaa[\\/]dynamic-import-polyfill|blurhash|date-fns|epubjs|flv.js|libarchive.js|marked|react-router|screenfull)/, use: [{ loader: 'babel-loader' }] From c4ab1a5868b2dc6251e2bfdfc3f46bedd7bfb973 Mon Sep 17 00:00:00 2001 From: Madh93 Date: Wed, 6 Apr 2022 17:20:52 +0100 Subject: [PATCH 08/39] Show subtitle text color setting --- .../subtitlesettings/subtitlesettings.js | 8 +++++++- .../subtitlesettings.template.html | 17 +++++++++++++++-- src/elements/emby-input/emby-input.scss | 5 +++++ 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 067d8f9e40..c201200399 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -32,7 +32,7 @@ function getSubtitleAppearanceObject(context) { appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value; appearanceSettings.font = context.querySelector('#selectFont').value; appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value; - appearanceSettings.textColor = context.querySelector('#inputTextColor').value; + appearanceSettings.textColor = layoutManager.tv ? context.querySelector('#selectTextColor').value : context.querySelector('#inputTextColor').value; appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value; return appearanceSettings; @@ -57,6 +57,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) { context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal'; context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; + context.querySelector('#selectTextColor').value = appearanceSettings.textColor || '#ffffff'; context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; context.querySelector('#selectFont').value = appearanceSettings.font || ''; context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition; @@ -171,6 +172,7 @@ function embed(options, self) { options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange); + options.element.querySelector('#selectTextColor').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); @@ -201,6 +203,10 @@ function embed(options, self) { sliderVerticalPosition.classList.add('focusable'); sliderVerticalPosition.enableKeyboardDragging(); }, 0); + + // Replace color picker + dom.parentWithTag(options.element.querySelector('#inputTextColor'), 'DIV').classList.add('hide'); + dom.parentWithTag(options.element.querySelector('#selectTextColor'), 'DIV').classList.remove('hide'); } options.element.querySelector('.chkPreview').addEventListener('change', (e) => { diff --git a/src/components/subtitlesettings/subtitlesettings.template.html b/src/components/subtitlesettings/subtitlesettings.template.html index 941cd937d9..685b03997e 100644 --- a/src/components/subtitlesettings/subtitlesettings.template.html +++ b/src/components/subtitlesettings/subtitlesettings.template.html @@ -95,8 +95,21 @@ -
- +
+ +
+ +
+
diff --git a/src/elements/emby-input/emby-input.scss b/src/elements/emby-input/emby-input.scss index 195e680279..08376e5dea 100644 --- a/src/elements/emby-input/emby-input.scss +++ b/src/elements/emby-input/emby-input.scss @@ -17,6 +17,11 @@ width: 100%; } +.emby-input[type=color] { + height: 2.5em; + padding: 0; +} + .emby-input::-moz-focus-inner { border: 0; } From 5b5784a448264a10c0f418576d276de28075424c Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Fri, 17 Jun 2022 02:31:13 -0400 Subject: [PATCH 09/39] Fix review issues --- src/components/ConnectionRequired.tsx | 6 ++++-- src/components/HistoryRouter.tsx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ConnectionRequired.tsx b/src/components/ConnectionRequired.tsx index 1d127e2e89..7ec089af50 100644 --- a/src/components/ConnectionRequired.tsx +++ b/src/components/ConnectionRequired.tsx @@ -96,7 +96,7 @@ const ConnectionRequired: FunctionComponent = ({ throw new Error('Public system info request failed'); } const systemInfo = await infoResponse.json(); - if (!systemInfo.StartupWizardCompleted) { + if (!systemInfo?.StartupWizardCompleted) { // Bounce to the wizard console.info('[ConnectionRequired] startup wizard is not complete, redirecting there'); navigate(BounceRoutes.StartWizard); @@ -104,6 +104,7 @@ const ConnectionRequired: FunctionComponent = ({ } } catch (ex) { console.error('[ConnectionRequired] checking wizard status failed', ex); + return; } } @@ -112,7 +113,8 @@ const ConnectionRequired: FunctionComponent = ({ return; } - // TODO: should exiting the app be handled here? + // TODO: appRouter will call appHost.exit() if navigating back when you are already at the default route. + // This case will need to be handled elsewhere before appRouter can be killed. const client = ServerConnections.currentApiClient(); diff --git a/src/components/HistoryRouter.tsx b/src/components/HistoryRouter.tsx index 68577dc1d5..21e1efe0fe 100644 --- a/src/components/HistoryRouter.tsx +++ b/src/components/HistoryRouter.tsx @@ -13,7 +13,7 @@ const normalizePath = (pathname: string) => pathname.replace(/^!/, ''); * Refs: https://github.com/remix-run/react-router/blob/v6.3.0/packages/react-router-dom/index.tsx#L222 */ export function HistoryRouter({ basename, children, history }: HistoryRouterProps) { - const [state, setState] = React.useState({ + const [state, setState] = React.useState({ action: history.action, location: history.location }); From 9dabb58acf6992f669178b95f7aafe072e5efb59 Mon Sep 17 00:00:00 2001 From: Franco Castillo Date: Fri, 24 Jun 2022 21:59:28 +0000 Subject: [PATCH 10/39] Translated using Weblate (Spanish (Argentina)) Translation: Jellyfin/Jellyfin Web Translate-URL: https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/es_AR/ --- src/strings/es-ar.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/strings/es-ar.json b/src/strings/es-ar.json index 97c5494050..9ce9a38da3 100644 --- a/src/strings/es-ar.json +++ b/src/strings/es-ar.json @@ -1645,5 +1645,6 @@ "EnableRewatchingNextUpHelp": "Habilite 'Mostrar episodios ya vistos' en las secciones 'Siguiente'.", "EnableRewatchingNextUp": "Habilitar \"Volver a mirar\" en \"Siguiente\"", "Bold": "Audaz", - "LabelTextWeight": "Peso del texto:" + "LabelTextWeight": "Peso del texto:", + "EnableSplashScreen": "Habilitar pantalla de inicio" } From e2a6f08822e97d47539a6dd280dc4cc636df6884 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Mon, 27 Jun 2022 11:49:56 -0400 Subject: [PATCH 11/39] Fix Page component compatibility issues --- src/components/Page.tsx | 23 ++++++++++++++++++----- src/routes/search.tsx | 6 +++++- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/Page.tsx b/src/components/Page.tsx index 399c1a55c1..be1253740f 100644 --- a/src/components/Page.tsx +++ b/src/components/Page.tsx @@ -3,8 +3,11 @@ import React, { FunctionComponent, HTMLAttributes, useEffect, useRef } from 'rea import viewManager from './viewManager/viewManager'; type PageProps = { + id: string, // id is required for libraryMenu title?: string, - isBackButtonEnabled?: boolean + isBackButtonEnabled?: boolean, + isNowPlayingBarEnabled?: boolean, + isThemeMediaSupported?: boolean }; /** @@ -13,9 +16,12 @@ type PageProps = { */ const Page: FunctionComponent> = ({ children, + id, className = '', title, - isBackButtonEnabled = true + isBackButtonEnabled = true, + isNowPlayingBarEnabled = true, + isThemeMediaSupported = false }) => { const element = useRef(null); @@ -29,20 +35,27 @@ const Page: FunctionComponent> = ({ bubbles: true, cancelable: false, detail: { - isRestored: false + isRestored: false, + options: { + enableMediaControl: isNowPlayingBarEnabled, + supportsThemeMedia: isThemeMediaSupported + } } }; - // pagebeforeshow - hides tabs on tabless pages in libraryMenu + // viewbeforeshow - switches between the admin dashboard and standard themes + element.current?.dispatchEvent(new CustomEvent('viewbeforeshow', event)); + // pagebeforeshow - hides tabs on tables pages in libraryMenu element.current?.dispatchEvent(new CustomEvent('pagebeforeshow', event)); // viewshow - updates state of appRouter element.current?.dispatchEvent(new CustomEvent('viewshow', event)); // pageshow - updates header/navigation in libraryMenu element.current?.dispatchEvent(new CustomEvent('pageshow', event)); - }, [ element ]); + }, [ element, isNowPlayingBarEnabled, isThemeMediaSupported ]); return (
{ const [ searchParams ] = useSearchParams(); return ( - + {!query && Date: Tue, 28 Jun 2022 16:03:16 -0400 Subject: [PATCH 12/39] Add vscode configuration to fix issues on saving --- .gitignore | 1 - .vscode/extensions.json | 5 +++++ .vscode/settings.json | 7 +++++++ 3 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore index 4492164776..52cd61ad14 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,6 @@ config.json # ide .idea -.vscode # log yarn-error.log diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000000..b308e58914 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..c54aff90bb --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "eslint.format.enable": true, + "editor.formatOnSave": false +} From fa84f0aef5c40a59df4fae8c6e6fd1f62e02d91f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikael=20=C3=96stergren?= Date: Wed, 29 Jun 2022 02:24:59 +0000 Subject: [PATCH 13/39] Translated using Weblate (Swedish) Translation: Jellyfin/Jellyfin Web Translate-URL: https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/sv/ --- src/strings/sv.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/strings/sv.json b/src/strings/sv.json index 55ee3e391a..571c9e4eee 100644 --- a/src/strings/sv.json +++ b/src/strings/sv.json @@ -207,7 +207,7 @@ "HeaderAddToPlaylist": "Lägg till i spellista", "HeaderAddUpdateImage": "Lägg till/uppdatera bild", "HeaderAdditionalParts": "Ytterligare delar", - "HeaderAlbumArtists": "Albumsartister", + "HeaderAlbumArtists": "Albumartister", "HeaderAlert": "Varning", "HeaderAllowMediaDeletionFrom": "Tillåt mediaborttagning från:", "HeaderApiKey": "API-nyckel", From c2229c409f22e589280673f88d6e3a2a5f1300fc Mon Sep 17 00:00:00 2001 From: Cody Robibero Date: Thu, 23 Jun 2022 08:06:21 -0600 Subject: [PATCH 14/39] Merge pull request #3571 from mihawk90/fedora-spec-rework Cleanup and standardise Fedora build (web) (cherry picked from commit c20243c8bf07bc7f684b39668e3fc2e0960c928e) Signed-off-by: Bill Thornton --- deployment/Dockerfile.fedora | 4 ++-- fedora/Makefile | 6 +++++- fedora/jellyfin-web.spec | 25 +++++++++++++------------ 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/deployment/Dockerfile.fedora b/deployment/Dockerfile.fedora index 05ff5a7ae7..90df6f8584 100644 --- a/deployment/Dockerfile.fedora +++ b/deployment/Dockerfile.fedora @@ -1,4 +1,4 @@ -FROM fedora:33 +FROM fedora:36 # Docker build arguments ARG SOURCE_DIR=/jellyfin @@ -11,7 +11,7 @@ ENV IS_DOCKER=YES # Prepare Fedora environment RUN dnf update -y \ - && dnf install -y @buildsys-build rpmdevtools git dnf-plugins-core nodejs autoconf automake glibc-devel + && dnf install -y @buildsys-build rpmdevtools git dnf-plugins-core nodejs autoconf automake glibc-devel make # Link to build script RUN ln -sf ${SOURCE_DIR}/deployment/build.fedora /build.sh diff --git a/fedora/Makefile b/fedora/Makefile index 344c10b626..c094073bc8 100644 --- a/fedora/Makefile +++ b/fedora/Makefile @@ -9,8 +9,12 @@ TARBALL :=$(NAME)-$(subst -,~,$(VERSION)).tar.gz epel-7-x86_64_repos := https://rpm.nodesource.com/pub_16.x/el/\$$releasever/\$$basearch/ +fed_ver := $(shell rpm -E %fedora) +# fallback when not running on Fedora +fed_ver ?= 36 +TARGET ?= fedora-$(fed_ver)-x86_64 + outdir ?= $(PWD)/$(DIR)/ -TARGET ?= fedora-35-x86_64 srpm: $(DIR)/$(SRPM) tarball: $(DIR)/$(TARBALL) diff --git a/fedora/jellyfin-web.spec b/fedora/jellyfin-web.spec index 3a4e0aeace..2c48737ed5 100644 --- a/fedora/jellyfin-web.spec +++ b/fedora/jellyfin-web.spec @@ -4,7 +4,7 @@ Name: jellyfin-web Version: 10.8.0 Release: 1%{?dist} Summary: The Free Software Media System web client -License: GPLv3 +License: GPLv2 URL: https://jellyfin.org # Jellyfin Server tarball created by `make -f .copr/Makefile srpm`, real URL ends with `v%%{version}.tar.gz` Source0: jellyfin-web-%{version}.tar.gz @@ -17,9 +17,6 @@ BuildRequires: git BuildRequires: npm %endif -# Disable Automatic Dependency Processing -AutoReqProv: no - %description Jellyfin is a free software media system that puts you in control of managing and streaming your media. @@ -27,22 +24,26 @@ Jellyfin is a free software media system that puts you in control of managing an %prep %autosetup -n jellyfin-web-%{version} -b 0 -%build - -%install %if 0%{?rhel} > 0 && 0%{?rhel} < 8 # Required for CentOS build chown root:root -R . %endif + + +%build npm ci --no-audit --unsafe-perm -%{__mkdir} -p %{buildroot}%{_datadir} -mv dist %{buildroot}%{_datadir}/jellyfin-web -%{__install} -D -m 0644 LICENSE %{buildroot}%{_datadir}/licenses/jellyfin/LICENSE + + +%install +%{__mkdir} -p %{buildroot}%{_libdir}/jellyfin/jellyfin-web +%{__cp} -r dist/* %{buildroot}%{_libdir}/jellyfin/jellyfin-web + %files %defattr(644,root,root,755) -%{_datadir}/jellyfin-web -%{_datadir}/licenses/jellyfin/LICENSE +%{_libdir}/jellyfin/jellyfin-web +%license LICENSE + %changelog * Fri Dec 04 2020 Jellyfin Packaging Team From b632824314e4a2257ad2285912448a4000558c8c Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Fri, 17 Jun 2022 13:10:36 -0400 Subject: [PATCH 15/39] Merge pull request #3713 from nyanmisaka/video-range-condition Add VideoRangeType condition for web client (cherry picked from commit c8590d37ed4e1a16857940420798bbd55be72a9a) Signed-off-by: Bill Thornton --- src/scripts/browserDeviceProfile.js | 65 +++++++++++++++++++++++++++++ src/strings/en-us.json | 7 +++- 2 files changed, 71 insertions(+), 1 deletion(-) diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js index d1e91183af..a022c96b04 100644 --- a/src/scripts/browserDeviceProfile.js +++ b/src/scripts/browserDeviceProfile.js @@ -851,6 +851,29 @@ import browser from './browser'; hevcProfiles = 'main|main 10'; } + const h264VideoRangeTypes = 'SDR'; + let hevcVideoRangeTypes = 'SDR'; + let vp9VideoRangeTypes = 'SDR'; + let av1VideoRangeTypes = 'SDR'; + + if (browser.safari && ((browser.iOS && browser.iOSVersion >= 11) || browser.osx)) { + hevcVideoRangeTypes += '|HDR10|HLG'; + if ((browser.iOS && browser.iOSVersion >= 13) || browser.osx) { + hevcVideoRangeTypes += '|DOVI'; + } + } + + if (browser.tizen || browser.web0s) { + hevcVideoRangeTypes += '|HDR10|HLG|DOVI'; + vp9VideoRangeTypes += '|HDR10|HLG'; + av1VideoRangeTypes += '|HDR10|HLG'; + } + + if (browser.edgeChromium || browser.chrome || browser.firefox) { + vp9VideoRangeTypes += '|HDR10|HLG'; + av1VideoRangeTypes += '|HDR10|HLG'; + } + const h264CodecProfileConditions = [ { Condition: 'NotEquals', @@ -864,6 +887,12 @@ import browser from './browser'; Value: h264Profiles, IsRequired: false }, + { + Condition: 'EqualsAny', + Property: 'VideoRangeType', + Value: h264VideoRangeTypes, + IsRequired: false + }, { Condition: 'LessThanEqual', Property: 'VideoLevel', @@ -885,6 +914,12 @@ import browser from './browser'; Value: hevcProfiles, IsRequired: false }, + { + Condition: 'EqualsAny', + Property: 'VideoRangeType', + Value: hevcVideoRangeTypes, + IsRequired: false + }, { Condition: 'LessThanEqual', Property: 'VideoLevel', @@ -893,6 +928,24 @@ import browser from './browser'; } ]; + const vp9CodecProfileConditions = [ + { + Condition: 'EqualsAny', + Property: 'VideoRangeType', + Value: vp9VideoRangeTypes, + IsRequired: false + } + ]; + + const av1CodecProfileConditions = [ + { + Condition: 'EqualsAny', + Property: 'VideoRangeType', + Value: av1VideoRangeTypes, + IsRequired: false + } + ]; + if (!browser.edgeUwp && !browser.tizen && !browser.web0s) { h264CodecProfileConditions.push({ Condition: 'NotEquals', @@ -982,6 +1035,18 @@ import browser from './browser'; Conditions: hevcCodecProfileConditions }); + profile.CodecProfiles.push({ + Type: 'Video', + Codec: 'vp9', + Conditions: vp9CodecProfileConditions + }); + + profile.CodecProfiles.push({ + Type: 'Video', + Codec: 'av1', + Conditions: av1CodecProfileConditions + }); + const globalVideoConditions = []; if (globalMaxVideoBitrate) { diff --git a/src/strings/en-us.json b/src/strings/en-us.json index baadda44bc..e4fbac207f 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1643,5 +1643,10 @@ "ThemeSong": "Theme Song", "ThemeVideo": "Theme Video", "EnableEnhancedNvdecDecoderHelp": "Experimental NVDEC implementation, do not enable this option unless you encounter decoding errors.", - "EnableSplashScreen": "Enable the splash screen" + "EnableSplashScreen": "Enable the splash screen", + "LabelVppTonemappingBrightness": "VPP Tone mapping brightness gain:", + "LabelVppTonemappingBrightnessHelp": "Apply brightness gain in VPP tone mapping. Both recommended and default values are 0.", + "LabelVppTonemappingContrast": "VPP Tone mapping contrast gain:", + "LabelVppTonemappingContrastHelp": "Apply contrast gain in VPP tone mapping. The recommended and default values are 1.2 and 1.", + "VideoRangeTypeNotSupported": "The video's range type is not supported" } From 372291e9375d504184f1dbc8c9b72084723da86f Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Fri, 17 Jun 2022 12:52:15 -0400 Subject: [PATCH 16/39] Merge pull request #3714 from nyanmisaka/vpp-tm-configs Expose VPP TM brightness/contrast gain options (cherry picked from commit 6142283e99d2c8f1a3419b62a05480859fa3331a) Signed-off-by: Bill Thornton --- .../dashboard/encodingsettings.html | 23 ++++++++++++++----- src/controllers/dashboard/encodingsettings.js | 8 +++++-- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/controllers/dashboard/encodingsettings.html b/src/controllers/dashboard/encodingsettings.html index adb9ef62c6..048a957b4e 100644 --- a/src/controllers/dashboard/encodingsettings.html +++ b/src/controllers/dashboard/encodingsettings.html @@ -126,13 +126,24 @@
-
- -
${AllowVppTonemappingHelp}
+
+
+ +
${AllowVppTonemappingHelp}
+
+
+ +
${LabelVppTonemappingBrightnessHelp}
+
+
+ +
${LabelVppTonemappingContrastHelp}
+
+
diff --git a/src/components/qualityOptions.js b/src/components/qualityOptions.js index a185a5f5fa..bf59ad1669 100644 --- a/src/components/qualityOptions.js +++ b/src/components/qualityOptions.js @@ -1,5 +1,6 @@ import { appHost } from '../components/apphost'; import globalize from '../scripts/globalize'; +import appSettings from '../scripts/settings/appSettings'; export function getVideoQualityOptions(options) { const maxStreamingBitrate = options.currentMaxBitrate; @@ -12,7 +13,9 @@ export function getVideoQualityOptions(options) { videoWidth = videoHeight * (16 / 9); } - const hostScreenWidth = appHost.screen()?.maxAllowedWidth || 4096; + const maxVideoWidth = options.maxVideoWidth == null ? appSettings.maxVideoWidth() : options.maxVideoWidth; + + const hostScreenWidth = (maxVideoWidth < 0 ? appHost.screen()?.maxAllowedWidth : maxVideoWidth) || 4096; const maxAllowedWidth = videoWidth || 4096; const qualityOptions = []; diff --git a/src/scripts/settings/appSettings.js b/src/scripts/settings/appSettings.js index 5ebf98100a..35fe28455b 100644 --- a/src/scripts/settings/appSettings.js +++ b/src/scripts/settings/appSettings.js @@ -92,6 +92,19 @@ class AppSettings { return val ? parseInt(val) : null; } + /** + * Get or set 'Maximum video width' + * @param {number|undefined} val - Maximum video width or undefined. + * @return {number} Maximum video width. + */ + maxVideoWidth(val) { + if (val !== undefined) { + return this.set('maxVideoWidth', val.toString()); + } + + return parseInt(this.get('maxVideoWidth') || '0', 10) || 0; + } + set(name, value, userId) { const currentValue = this.get(name, userId); AppStorage.setItem(this.#getKey(name, userId), value); diff --git a/src/strings/en-us.json b/src/strings/en-us.json index e4fbac207f..62892b2a96 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -709,6 +709,7 @@ "LabelLibraryPageSizeHelp": "Set the amount of items to show on a library page. Set to 0 in order to disable paging.", "LabelMaxDaysForNextUp": "Max days in 'Next Up':", "LabelMaxDaysForNextUpHelp": "Set the maximum amount of days a show should stay in the 'Next Up' list without watching it.", + "LabelMaxVideoResolution": "Maximum Allowed Video Transcoding Resolution", "LabelLineup": "Lineup:", "LabelLocalCustomCss": "Custom CSS code for styling which applies to this client only. You may want to disable server custom CSS code.", "LabelLocalHttpServerPortNumber": "Local HTTP port number:", @@ -1378,6 +1379,7 @@ "ScanForNewAndUpdatedFiles": "Scan for new and updated files", "ScanLibrary": "Scan library", "Schedule": "Schedule", + "ScreenResolution": "Screen Resolution", "Search": "Search", "SearchForCollectionInternetMetadata": "Search the internet for artwork and metadata", "SearchForMissingMetadata": "Search for missing metadata", From df6d9aaecbb3460031685b8c0024c5af264fee90 Mon Sep 17 00:00:00 2001 From: "Joshua M. Boniface" Date: Sun, 26 Jun 2022 20:55:44 -0400 Subject: [PATCH 19/39] Merge pull request #3719 from nyanmisaka/dovi-meta (cherry picked from commit 66b86044a9a71536499f4c61e2f1697560257906) Signed-off-by: Bill Thornton --- src/components/itemMediaInfo/itemMediaInfo.js | 36 +++++++++++++++++-- src/components/playerstats/playerstats.js | 27 ++------------ src/strings/en-us.json | 13 ++++++- 3 files changed, 48 insertions(+), 28 deletions(-) diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js index bf3e4f0932..520dccaa4d 100644 --- a/src/components/itemMediaInfo/itemMediaInfo.js +++ b/src/components/itemMediaInfo/itemMediaInfo.js @@ -113,7 +113,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : ': 0) { attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level)); } if (stream.Width || stream.Height) { @@ -128,7 +128,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : ': : : Date: Sun, 26 Jun 2022 20:56:17 -0400 Subject: [PATCH 20/39] Merge pull request #3720 from Shadowghost/device-logo-fix (cherry picked from commit ae83d1d356e307713d8a11e8aab4f229a76b8df3) Signed-off-by: Bill Thornton --- src/scripts/imagehelper.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/scripts/imagehelper.js b/src/scripts/imagehelper.js index 8b5fcf42f2..4fd2c0a0c7 100644 --- a/src/scripts/imagehelper.js +++ b/src/scripts/imagehelper.js @@ -11,6 +11,7 @@ case 'Sony PS4': return baseUrl + 'playstation.svg'; case 'Kodi': + case 'Kodi JellyCon': return baseUrl + 'kodi.svg'; case 'Jellyfin Android': case 'AndroidTV': @@ -18,6 +19,8 @@ return baseUrl + 'android.svg'; case 'Jellyfin Mobile (iOS)': case 'Jellyfin Mobile (iPadOS)': + case 'Jellyfin iOS': + case 'Infuse': return baseUrl + 'apple.svg'; case 'Jellyfin Web': switch (device.Name || device.DeviceName) { From 5312358f91ef4a3ba11bd843d0815f8431c447f3 Mon Sep 17 00:00:00 2001 From: "Joshua M. Boniface" Date: Sun, 26 Jun 2022 20:54:51 -0400 Subject: [PATCH 21/39] Merge pull request #3721 from Shadowghost/fix-stream-autoselect (cherry picked from commit d967ce860c1d7ef3ac97a9c1f3c45b4b02e38a06) Signed-off-by: Bill Thornton --- src/components/playback/playbackmanager.js | 25 ++++++++----------- .../playbackSettings/playbackSettings.js | 6 +++-- .../playbackSettings.template.html | 14 ++++++++--- src/scripts/settings/userSettings.js | 14 ----------- src/strings/en-us.json | 6 +++-- 5 files changed, 29 insertions(+), 36 deletions(-) diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js index 6aae77d834..5d0f371f7d 100644 --- a/src/components/playback/playbackmanager.js +++ b/src/components/playback/playbackmanager.js @@ -2281,7 +2281,7 @@ class PlaybackManager { score += 1; if (prevRelIndex == newRelIndex) score += 1; - if (prevStream.Title && prevStream.Title == stream.Title) + if (prevStream.DisplayTitle && prevStream.DisplayTitle == stream.DisplayTitle) score += 2; if (prevStream.Language && prevStream.Language != 'und' && prevStream.Language == stream.Language) score += 2; @@ -2306,7 +2306,7 @@ class PlaybackManager { } } - function autoSetNextTracks(prevSource, mediaSource) { + function autoSetNextTracks(prevSource, mediaSource, audio, subtitle) { try { if (!prevSource) return; @@ -2315,18 +2315,13 @@ class PlaybackManager { return; } - if (typeof prevSource.DefaultAudioStreamIndex != 'number' - || typeof prevSource.DefaultSubtitleStreamIndex != 'number') - return; - - if (typeof mediaSource.DefaultAudioStreamIndex != 'number' - || typeof mediaSource.DefaultSubtitleStreamIndex != 'number') { - console.warn('AutoSet - No stream indexes (but prevSource has them)'); - return; + if (audio && typeof prevSource.DefaultAudioStreamIndex == 'number') { + rankStreamType(prevSource.DefaultAudioStreamIndex, prevSource, mediaSource, 'Audio'); } - rankStreamType(prevSource.DefaultAudioStreamIndex, prevSource, mediaSource, 'Audio'); - rankStreamType(prevSource.DefaultSubtitleStreamIndex, prevSource, mediaSource, 'Subtitle'); + if (subtitle && typeof prevSource.DefaultSubtitleStreamIndex == 'number') { + rankStreamType(prevSource.DefaultSubtitleStreamIndex, prevSource, mediaSource, 'Subtitle'); + } } catch (e) { console.error(`AutoSet - Caught unexpected error: ${e}`); } @@ -2390,9 +2385,9 @@ class PlaybackManager { // this reference was only needed by sendPlaybackListToPlayer playOptions.items = null; - return getPlaybackMediaSource(player, apiClient, deviceProfile, maxBitrate, item, startPosition, mediaSourceId, audioStreamIndex, subtitleStreamIndex).then(function (mediaSource) { - if (userSettings.enableSetUsingLastTracks()) - autoSetNextTracks(prevSource, mediaSource); + return getPlaybackMediaSource(player, apiClient, deviceProfile, maxBitrate, item, startPosition, mediaSourceId, audioStreamIndex, subtitleStreamIndex).then(async (mediaSource) => { + const user = await apiClient.getCurrentUser(); + autoSetNextTracks(prevSource, mediaSource, user.Configuration.RememberAudioSelections, user.Configuration.RememberSubtitleSelections); const streamInfo = createStreamInfo(apiClient, item.MediaType, item, mediaSource, startPosition, player); diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js index 6eea27a57d..7c959c0a44 100644 --- a/src/components/playbackSettings/playbackSettings.js +++ b/src/components/playbackSettings/playbackSettings.js @@ -186,7 +186,8 @@ import template from './playbackSettings.template.html'; context.querySelector('.chkPreferFmp4HlsContainer').checked = userSettings.preferFmp4HlsContainer(); context.querySelector('.chkEnableCinemaMode').checked = userSettings.enableCinemaMode(); context.querySelector('.chkEnableNextVideoOverlay').checked = userSettings.enableNextVideoInfoOverlay(); - context.querySelector('.chkSetUsingLastTracks').checked = userSettings.enableSetUsingLastTracks(); + context.querySelector('.chkRememberAudioSelections').checked = user.Configuration.RememberAudioSelections || false; + context.querySelector('.chkRememberSubtitleSelections').checked = user.Configuration.RememberSubtitleSelections || false; context.querySelector('.chkExternalVideoPlayer').checked = appSettings.enableSystemExternalPlayers(); setMaxBitrateIntoField(context.querySelector('.selectVideoInNetworkQuality'), true, 'Video'); @@ -232,7 +233,8 @@ import template from './playbackSettings.template.html'; userSettingsInstance.enableCinemaMode(context.querySelector('.chkEnableCinemaMode').checked); userSettingsInstance.enableNextVideoInfoOverlay(context.querySelector('.chkEnableNextVideoOverlay').checked); - userSettingsInstance.enableSetUsingLastTracks(context.querySelector('.chkSetUsingLastTracks').checked); + user.Configuration.RememberAudioSelections = context.querySelector('.chkRememberAudioSelections').checked; + user.Configuration.RememberSubtitleSelections = context.querySelector('.chkRememberSubtitleSelections').checked; userSettingsInstance.chromecastVersion(context.querySelector('.selectChromecastVersion').value); userSettingsInstance.skipForwardLength(context.querySelector('.selectSkipForwardLength').value); userSettingsInstance.skipBackLength(context.querySelector('.selectSkipBackLength').value); diff --git a/src/components/playbackSettings/playbackSettings.template.html b/src/components/playbackSettings/playbackSettings.template.html index c1a93e0e64..82c7483b9b 100644 --- a/src/components/playbackSettings/playbackSettings.template.html +++ b/src/components/playbackSettings/playbackSettings.template.html @@ -97,10 +97,18 @@
-
${SetUsingLastTracksHelp}
+
${RememberAudioSelectionsHelp}
+
+ +
+ +
${RememberSubtitleSelectionsHelp}
diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js index cff3be87c0..7eb9d2ff49 100644 --- a/src/scripts/settings/userSettings.js +++ b/src/scripts/settings/userSettings.js @@ -164,19 +164,6 @@ export class UserSettings { return toBoolean(this.get('enableNextVideoInfoOverlay', false), true); } - /** - * Get or set 'SetUsingLastTracks' state. - * @param {boolean|undefined} val - Flag to enable 'SetUsingLastTracks' or undefined. - * @return {boolean} 'SetUsingLastTracks' state. - */ - enableSetUsingLastTracks(val) { - if (val !== undefined) { - return this.set('enableSetUsingLastTracks', val.toString()); - } - - return toBoolean(this.get('enableSetUsingLastTracks', false), true); - } - /** * Get or set 'Theme Songs' state. * @param {boolean|undefined} val - Flag to enable 'Theme Songs' or undefined. @@ -561,7 +548,6 @@ export const allowedAudioChannels = currentSettings.allowedAudioChannels.bind(cu export const preferFmp4HlsContainer = currentSettings.preferFmp4HlsContainer.bind(currentSettings); export const enableCinemaMode = currentSettings.enableCinemaMode.bind(currentSettings); export const enableNextVideoInfoOverlay = currentSettings.enableNextVideoInfoOverlay.bind(currentSettings); -export const enableSetUsingLastTracks = currentSettings.enableSetUsingLastTracks.bind(currentSettings); export const enableThemeSongs = currentSettings.enableThemeSongs.bind(currentSettings); export const enableThemeVideos = currentSettings.enableThemeVideos.bind(currentSettings); export const enableFastFadein = currentSettings.enableFastFadein.bind(currentSettings); diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 6365894d03..3d02560e2a 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1355,7 +1355,11 @@ "RefreshQueued": "Refresh queued.", "ReleaseDate": "Release date", "ReleaseGroup": "Release Group", + "RememberAudioSelections": "Set audio track based on previous item", + "RememberAudioSelectionsHelp": "Try to set the audio track to the closest match to the last video.", "RememberMe": "Remember Me", + "RememberSubtitleSelections": "Set subtitle track based on previous item", + "RememberSubtitleSelectionsHelp": "Try to set the subtitle track to the closest match to the last video.", "Remixer": "Remixer", "RemoveFromCollection": "Remove from collection", "RemoveFromPlaylist": "Remove from playlist", @@ -1402,8 +1406,6 @@ "Settings": "Settings", "SettingsSaved": "Settings saved.", "SettingsWarning": "Changing these values may cause instability or connectivity failures. If you experience any problems, we recommend changing them back to default.", - "SetUsingLastTracks": "Set Subtitle/Audio Tracks with Previous Item", - "SetUsingLastTracksHelp": "Try to set the Subtitle/Audio track to the closest match to the last video.", "Share": "Share", "ShowAdvancedSettings": "Show advanced settings", "ShowIndicatorsFor": "Show indicators for:", From e455c70e365c1a2f735dc89f5f7a6633d0d477e7 Mon Sep 17 00:00:00 2001 From: "Joshua M. Boniface" Date: Sun, 26 Jun 2022 20:53:47 -0400 Subject: [PATCH 22/39] Merge pull request #3722 from nyanmisaka/fix-audio-ch (cherry picked from commit 0e0dd46c1b19b43c2ff8b703fe9be6fb4769b5ae) Signed-off-by: Bill Thornton --- src/scripts/browserDeviceProfile.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js index a022c96b04..18892ae3ea 100644 --- a/src/scripts/browserDeviceProfile.js +++ b/src/scripts/browserDeviceProfile.js @@ -312,7 +312,7 @@ import browser from './browser'; return -1; } - function getPhysicalAudioChannels(options) { + function getPhysicalAudioChannels(options, videoTestElement) { const allowedAudioChannels = parseInt(userSettings.allowedAudioChannels(), 10); if (allowedAudioChannels > 0) { @@ -324,8 +324,14 @@ import browser from './browser'; } const isSurroundSoundSupportedBrowser = browser.safari || browser.chrome || browser.edgeChromium || browser.firefox || browser.tv || browser.ps4 || browser.xboxOne; + const isAc3Eac3Supported = supportsAc3(videoTestElement) || supportsEac3(videoTestElement); const speakerCount = getSpeakerCount(); + // AC3/EAC3 hinted that device is able to play dolby surround sound. + if (isAc3Eac3Supported && isSurroundSoundSupportedBrowser) { + return speakerCount > 6 ? speakerCount : 6; + } + if (speakerCount > 2) { if (isSurroundSoundSupportedBrowser) { return speakerCount; @@ -348,12 +354,12 @@ import browser from './browser'; export default function (options) { options = options || {}; - const physicalAudioChannels = getPhysicalAudioChannels(options); - const bitrateSetting = getMaxBitrate(); const videoTestElement = document.createElement('video'); + const physicalAudioChannels = getPhysicalAudioChannels(options, videoTestElement); + const canPlayVp8 = videoTestElement.canPlayType('video/webm; codecs="vp8"').replace(/no/, ''); const canPlayVp9 = videoTestElement.canPlayType('video/webm; codecs="vp9"').replace(/no/, ''); const webmAudioCodecs = ['vorbis']; From b8ae732c98e381804d88b591d6bea490b14cafbc Mon Sep 17 00:00:00 2001 From: "Joshua M. Boniface" Date: Sun, 26 Jun 2022 20:58:23 -0400 Subject: [PATCH 23/39] Merge pull request #3724 from samcon/fix_resume_webos (cherry picked from commit bc48691738591bfac698fb79b1f4997d32dc8f34) Signed-off-by: Bill Thornton --- src/components/htmlMediaHelper.js | 3 ++- src/plugins/htmlVideoPlayer/plugin.js | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/htmlMediaHelper.js b/src/components/htmlMediaHelper.js index a7a9961e1c..3bb29ca912 100644 --- a/src/components/htmlMediaHelper.js +++ b/src/components/htmlMediaHelper.js @@ -131,7 +131,8 @@ import { Events } from 'jellyfin-apiclient'; } function setCurrentTimeIfNeeded(element, seconds) { - if (Math.abs(element.currentTime || 0, seconds) <= 1) { + // If it's worth skipping (1 sec or less of a difference) + if (Math.abs((element.currentTime || 0) - seconds) >= 1) { element.currentTime = seconds; } } diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 1359aecb8c..c4204010ab 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/src/plugins/htmlVideoPlayer/plugin.js @@ -1376,6 +1376,9 @@ function tryRemoveElement(elem) { // Can't autoplay in these browsers so we need to use the full controls, at least until playback starts if (!appHost.supports('htmlvideoautoplay')) { html += '