Merge branch 'master' into trickplay-new

.eslintrc.js

@@ -261,7 +261,11 @@ module.exports = {
                 'ServerNotifications': 'writable',
                 'TaskButton': 'writable',
                 'UserParentalControlPage': 'writable',
-                'Windows': 'readonly'
+                'Windows': 'readonly',
+                // Build time definitions
+                __JF_BUILD_VERSION__: 'readonly',
+                __USE_SYSTEM_FONTS__: 'readonly',
+                __WEBPACK_SERVE__: 'readonly'
             },
             rules: {
                 '@typescript-eslint/prefer-string-starts-ends-with': ['error']

package-lock.json

@@ -58,6 +58,7 @@
         "screenfull": "6.0.2",
         "sortablejs": "1.15.2",
         "swiper": "11.0.5",
+        "usehooks-ts": "2.14.0",
         "webcomponents.js": "0.7.24",
         "whatwg-fetch": "3.6.20"
       },
@@ -12671,8 +12672,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-      "dev": true
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
@@ -21900,6 +21900,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.14.0.tgz",
+      "integrity": "sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -31866,8 +31880,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-      "dev": true
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -38668,6 +38681,14 @@
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
       "requires": {}
     },
+    "usehooks-ts": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.14.0.tgz",
+      "integrity": "sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==",
+      "requires": {
+        "lodash.debounce": "^4.0.8"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -119,6 +119,7 @@
     "screenfull": "6.0.2",
     "sortablejs": "1.15.2",
     "swiper": "11.0.5",
+    "usehooks-ts": "2.14.0",
     "webcomponents.js": "0.7.24",
     "whatwg-fetch": "3.6.20"
   },

src/apps/experimental/components/drawers/DrawerHeaderLink.tsx

@@ -3,15 +3,13 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import React from 'react';
 
-import { useApi } from 'hooks/useApi';
 import { useSystemInfo } from 'hooks/useSystemInfo';
 import ListItemLink from 'components/ListItemLink';
 
 import appIcon from 'assets/img/icon-transparent.png';
 
 const DrawerHeaderLink = () => {
-    const { api } = useApi();
+    const { data: systemInfo } = useSystemInfo();
-    const { data: systemInfo } = useSystemInfo(api);
 
     return (
         <ListItemLink to='/'>

src/apps/stable/routes/search.tsx

@@ -1,16 +1,46 @@
-import React, { FunctionComponent, useState } from 'react';
+import React, { type FC, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import Page from '../../../components/Page';
+import Page from 'components/Page';
-import SearchFields from '../../../components/search/SearchFields';
+import SearchFields from 'components/search/SearchFields';
-import SearchResults from '../../../components/search/SearchResults';
+import SearchResults from 'components/search/SearchResults';
-import SearchSuggestions from '../../../components/search/SearchSuggestions';
+import SearchSuggestions from 'components/search/SearchSuggestions';
-import LiveTVSearchResults from '../../../components/search/LiveTVSearchResults';
+import LiveTVSearchResults from 'components/search/LiveTVSearchResults';
-import globalize from '../../../scripts/globalize';
+import { usePrevious } from 'hooks/usePrevious';
+import globalize from 'scripts/globalize';
 
-const Search: FunctionComponent = () => {
+const COLLECTION_TYPE_PARAM = 'collectionType';
-    const [ query, setQuery ] = useState<string>();
+const PARENT_ID_PARAM = 'parentId';
-    const [ searchParams ] = useSearchParams();
+const QUERY_PARAM = 'query';
+const SERVER_ID_PARAM = 'serverId';
+
+const Search: FC = () => {
+    const [ searchParams, setSearchParams ] = useSearchParams();
+    const urlQuery = searchParams.get(QUERY_PARAM) || '';
+    const [ query, setQuery ] = useState(urlQuery);
+    const prevQuery = usePrevious(query, '');
+
+    useEffect(() => {
+        if (query !== prevQuery) {
+            if (query === '' && urlQuery !== '') {
+                // The query input has been cleared; remove the url param
+                searchParams.delete(QUERY_PARAM);
+                setSearchParams(searchParams, { replace: true });
+            } else if (query !== urlQuery) {
+                // Update the query url param value
+                searchParams.set(QUERY_PARAM, query);
+                setSearchParams(searchParams, { replace: true });
+            }
+        } else if (query !== urlQuery) {
+            // Update the query if the query url param has changed
+            if (!urlQuery) {
+                searchParams.delete(QUERY_PARAM);
+                setSearchParams(searchParams, { replace: true });
+            }
+
+            setQuery(urlQuery);
+        }
+    }, [query, prevQuery, searchParams, setSearchParams, urlQuery]);
 
     return (
         <Page
@@ -18,22 +48,22 @@ const Search: FunctionComponent = () => {
             title={globalize.translate('Search')}
             className='mainAnimatedPage libraryPage allLibraryPage noSecondaryNavPage'
         >
-            <SearchFields onSearch={setQuery} />
+            <SearchFields query={query} onSearch={setQuery} />
             {!query
                 && <SearchSuggestions
-                    parentId={searchParams.get('parentId')}
+                    parentId={searchParams.get(PARENT_ID_PARAM)}
                 />
             }
             <SearchResults
-                serverId={searchParams.get('serverId') || window.ApiClient.serverId()}
+                serverId={searchParams.get(SERVER_ID_PARAM) || window.ApiClient.serverId()}
-                parentId={searchParams.get('parentId')}
+                parentId={searchParams.get(PARENT_ID_PARAM)}
-                collectionType={searchParams.get('collectionType')}
+                collectionType={searchParams.get(COLLECTION_TYPE_PARAM)}
                 query={query}
             />
             <LiveTVSearchResults
-                serverId={searchParams.get('serverId') || window.ApiClient.serverId()}
+                serverId={searchParams.get(SERVER_ID_PARAM) || window.ApiClient.serverId()}
-                parentId={searchParams.get('parentId')}
+                parentId={searchParams.get(PARENT_ID_PARAM)}
-                collectionType={searchParams.get('collectionType')}
+                collectionType={searchParams.get(COLLECTION_TYPE_PARAM)}
                 query={query}
             />
         </Page>

src/components/itemContextMenu.js

@@ -339,7 +339,8 @@ function executeCommand(item, id, options) {
                 break;
             case 'addtoplaylist':
                 import('./playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
-                    new PlaylistEditor({
+                    const playlistEditor = new PlaylistEditor();
+                    playlistEditor.show({
                         items: [itemId],
                         serverId: serverId
                     }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));

src/components/multiSelect/multiSelect.js

@@ -6,7 +6,6 @@ import dom from '../../scripts/dom';
 import './multiSelect.scss';
 import ServerConnections from '../ServerConnections';
 import alert from '../alert';
-import PlaylistEditor from '../playlisteditor/playlisteditor';
 import confirm from '../confirm/confirm';
 import itemHelper from '../itemHelper';
 import datetime from '../../scripts/datetime';
@@ -269,9 +268,16 @@ function showMenuForSelectedItems(e) {
                                 dispatchNeedsRefresh();
                                 break;
                             case 'playlist':
-                                new PlaylistEditor({
+                                import('../playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
-                                    items: items,
+                                    const playlistEditor = new PlaylistEditor();
-                                    serverId: serverId
+                                    playlistEditor.show({
+                                        items: items,
+                                        serverId: serverId
+                                    }).catch(() => {
+                                        // Dialog closed
+                                    });
+                                }).catch(err => {
+                                    console.error('[AddToPlaylist] failed to load playlist editor', err);
                                 });
                                 hideSelections();
                                 dispatchNeedsRefresh();

src/components/playlisteditor/playlisteditor.js

@@ -222,7 +222,7 @@ function centerFocus(elem, horiz, on) {
 }
 
 export class PlaylistEditor {
-    constructor(options) {
+    show(options) {
         const items = options.items || {};
         currentServerId = options.serverId;
 

src/components/remotecontrol/remotecontrol.js

@@ -704,15 +704,20 @@ export default function () {
         import('../playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
             getSaveablePlaylistItems().then(function (items) {
                 const serverId = items.length ? items[0].ServerId : ApiClient.serverId();
-                new PlaylistEditor({
+                const playlistEditor = new PlaylistEditor();
+                playlistEditor.show({
                     items: items.map(function (i) {
                         return i.Id;
                     }),
                     serverId: serverId,
                     enableAddToPlayQueue: false,
                     defaultValue: 'new'
+                }).catch(() => {
+                    // Dialog closed
                 });
             });
+        }).catch(err => {
+            console.error('[savePlaylist] failed to load playlist editor', err);
         });
     }
 

src/components/search/LiveTVSearchResults.tsx

@@ -2,7 +2,8 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import type { ApiClient } from 'jellyfin-apiclient';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
 import classNames from 'classnames';
-import React, { FunctionComponent, useEffect, useState } from 'react';
+import React, { type FC, useCallback, useEffect, useState } from 'react';
+import { useDebounceValue } from 'usehooks-ts';
 
 import globalize from '../../scripts/globalize';
 import ServerConnections from '../ServerConnections';
@@ -30,7 +31,7 @@ type LiveTVSearchResultsProps = {
 /*
  * React component to display search result rows for live tv library search
  */
-const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: LiveTVSearchResultsProps) => {
+const LiveTVSearchResults: FC<LiveTVSearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: LiveTVSearchResultsProps) => {
     const [ movies, setMovies ] = useState<BaseItemDto[]>([]);
     const [ episodes, setEpisodes ] = useState<BaseItemDto[]>([]);
     const [ sports, setSports ] = useState<BaseItemDto[]>([]);
@@ -38,23 +39,24 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
     const [ news, setNews ] = useState<BaseItemDto[]>([]);
     const [ programs, setPrograms ] = useState<BaseItemDto[]>([]);
     const [ channels, setChannels ] = useState<BaseItemDto[]>([]);
+    const [ debouncedQuery ] = useDebounceValue(query, 500);
+
+    const getDefaultParameters = useCallback(() => ({
+        ParentId: parentId,
+        searchTerm: debouncedQuery,
+        Limit: 24,
+        Fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount',
+        Recursive: true,
+        EnableTotalRecordCount: false,
+        ImageTypeLimit: 1,
+        IncludePeople: false,
+        IncludeMedia: false,
+        IncludeGenres: false,
+        IncludeStudios: false,
+        IncludeArtists: false
+    }), [ parentId, debouncedQuery ]);
 
     useEffect(() => {
-        const getDefaultParameters = () => ({
-            ParentId: parentId,
-            searchTerm: query,
-            Limit: 24,
-            Fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount',
-            Recursive: true,
-            EnableTotalRecordCount: false,
-            ImageTypeLimit: 1,
-            IncludePeople: false,
-            IncludeMedia: false,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false
-        });
-
         const fetchItems = (apiClient: ApiClient, params = {}) => apiClient?.getItems(
             apiClient?.getCurrentUserId(),
             {
@@ -73,65 +75,67 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
         setPrograms([]);
         setChannels([]);
 
-        if (query && collectionType === CollectionType.Livetv) {
+        if (!debouncedQuery || collectionType !== CollectionType.Livetv) {
-            const apiClient = ServerConnections.getApiClient(serverId);
+            return;
-
-            // Movies row
-            fetchItems(apiClient, {
-                IncludeItemTypes: 'LiveTvProgram',
-                IsMovie: true
-            })
-                .then(result => setMovies(result.Items || []))
-                .catch(() => setMovies([]));
-            // Episodes row
-            fetchItems(apiClient, {
-                IncludeItemTypes: 'LiveTvProgram',
-                IsMovie: false,
-                IsSeries: true,
-                IsSports: false,
-                IsKids: false,
-                IsNews: false
-            })
-                .then(result => setEpisodes(result.Items || []))
-                .catch(() => setEpisodes([]));
-            // Sports row
-            fetchItems(apiClient, {
-                IncludeItemTypes: 'LiveTvProgram',
-                IsSports: true
-            })
-                .then(result => setSports(result.Items || []))
-                .catch(() => setSports([]));
-            // Kids row
-            fetchItems(apiClient, {
-                IncludeItemTypes: 'LiveTvProgram',
-                IsKids: true
-            })
-                .then(result => setKids(result.Items || []))
-                .catch(() => setKids([]));
-            // News row
-            fetchItems(apiClient, {
-                IncludeItemTypes: 'LiveTvProgram',
-                IsNews: true
-            })
-                .then(result => setNews(result.Items || []))
-                .catch(() => setNews([]));
-            // Programs row
-            fetchItems(apiClient, {
-                IncludeItemTypes: 'LiveTvProgram',
-                IsMovie: false,
-                IsSeries: false,
-                IsSports: false,
-                IsKids: false,
-                IsNews: false
-            })
-                .then(result => setPrograms(result.Items || []))
-                .catch(() => setPrograms([]));
-            // Channels row
-            fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
-                .then(result => setChannels(result.Items || []))
-                .catch(() => setChannels([]));
         }
-    }, [collectionType, parentId, query, serverId]);
+
+        const apiClient = ServerConnections.getApiClient(serverId);
+
+        // Movies row
+        fetchItems(apiClient, {
+            IncludeItemTypes: 'LiveTvProgram',
+            IsMovie: true
+        })
+            .then(result => setMovies(result.Items || []))
+            .catch(() => setMovies([]));
+        // Episodes row
+        fetchItems(apiClient, {
+            IncludeItemTypes: 'LiveTvProgram',
+            IsMovie: false,
+            IsSeries: true,
+            IsSports: false,
+            IsKids: false,
+            IsNews: false
+        })
+            .then(result => setEpisodes(result.Items || []))
+            .catch(() => setEpisodes([]));
+        // Sports row
+        fetchItems(apiClient, {
+            IncludeItemTypes: 'LiveTvProgram',
+            IsSports: true
+        })
+            .then(result => setSports(result.Items || []))
+            .catch(() => setSports([]));
+        // Kids row
+        fetchItems(apiClient, {
+            IncludeItemTypes: 'LiveTvProgram',
+            IsKids: true
+        })
+            .then(result => setKids(result.Items || []))
+            .catch(() => setKids([]));
+        // News row
+        fetchItems(apiClient, {
+            IncludeItemTypes: 'LiveTvProgram',
+            IsNews: true
+        })
+            .then(result => setNews(result.Items || []))
+            .catch(() => setNews([]));
+        // Programs row
+        fetchItems(apiClient, {
+            IncludeItemTypes: 'LiveTvProgram',
+            IsMovie: false,
+            IsSeries: false,
+            IsSports: false,
+            IsKids: false,
+            IsNews: false
+        })
+            .then(result => setPrograms(result.Items || []))
+            .catch(() => setPrograms([]));
+        // Channels row
+        fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
+            .then(result => setChannels(result.Items || []))
+            .catch(() => setChannels([]));
+    }, [collectionType, debouncedQuery, getDefaultParameters, parentId, serverId]);
 
     return (
         <div
@@ -139,7 +143,7 @@ const LiveTVSearchResults: FunctionComponent<LiveTVSearchResultsProps> = ({ serv
                 'searchResults',
                 'padded-bottom-page',
                 'padded-top',
-                { 'hide': !query || collectionType !== CollectionType.Livetv }
+                { 'hide': !debouncedQuery || collectionType !== CollectionType.Livetv }
             )}
         >
             <SearchResultsRow

src/components/search/SearchFields.tsx

@@ -1,89 +1,61 @@
-import debounce from 'lodash-es/debounce';
+import React, { type ChangeEvent, type FC, useCallback } from 'react';
-import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import AlphaPicker from '../alphaPicker/AlphaPickerComponent';
+import Input from 'elements/emby-input/Input';
 import globalize from '../../scripts/globalize';
-
-import 'material-design-icons-iconfont';
-
-import '../../elements/emby-input/emby-input';
-import '../../styles/flexstyles.scss';
-import './searchfields.scss';
 import layoutManager from '../layoutManager';
 import browser from '../../scripts/browser';
 
-// There seems to be some compatibility issues here between
+import 'material-design-icons-iconfont';
-// React and our legacy web components, so we need to inject
-// them as an html string for now =/
-const createInputElement = () => ({
-    __html: `<input
-    is="emby-input"
-    class="searchfields-txtSearch"
-    type="text"
-    data-keyboard="true"
-    placeholder="${globalize.translate('Search')}"
-    autocomplete="off"
-    maxlength="40"
-    autofocus
-/>`
-});
 
-const normalizeInput = (value = '') => value.trim();
+import '../../styles/flexstyles.scss';
+import './searchfields.scss';
 
 type SearchFieldsProps = {
+    query: string,
     onSearch?: (query: string) => void
 };
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
+const SearchFields: FC<SearchFieldsProps> = ({
-const SearchFields: FunctionComponent<SearchFieldsProps> = ({ onSearch = () => {} }: SearchFieldsProps) => {
+    onSearch = () => { /* no-op */ },
-    const element = useRef<HTMLDivElement>(null);
+    query
-
+}: SearchFieldsProps) => {
-    const getSearchInput = () => element?.current?.querySelector<HTMLInputElement>('.searchfields-txtSearch');
-
-    const debouncedOnSearch = useMemo(() => debounce(onSearch, 400), [onSearch]);
-
-    useEffect(() => {
-        getSearchInput()?.addEventListener('input', e => {
-            debouncedOnSearch(normalizeInput((e.target as HTMLInputElement).value));
-        });
-        getSearchInput()?.focus();
-
-        return () => {
-            debouncedOnSearch.cancel();
-        };
-    }, [debouncedOnSearch]);
-
     const onAlphaPicked = useCallback((e: Event) => {
         const value = (e as CustomEvent).detail.value;
-        const searchInput = getSearchInput();
-
-        if (!searchInput) {
-            console.error('Unexpected null reference');
-            return;
-        }
 
         if (value === 'backspace') {
-            const currentValue = searchInput.value;
+            onSearch(query.length ? query.substring(0, query.length - 1) : '');
-            searchInput.value = currentValue.length ? currentValue.substring(0, currentValue.length - 1) : '';
         } else {
-            searchInput.value += value;
+            onSearch(query + value);
         }
+    }, [ onSearch, query ]);
 
-        searchInput.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+    const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    }, []);
+        onSearch(e.target.value);
+    }, [ onSearch ]);
 
     return (
-        <div
+        <div className='padded-left padded-right searchFields'>
-            className='padded-left padded-right searchFields'
-            ref={element}
-        >
             <div className='searchFieldsInner flex align-items-center justify-content-center'>
                 <span className='searchfields-icon material-icons search' aria-hidden='true' />
                 <div
                     className='inputContainer flex-grow'
                     style={{ marginBottom: 0 }}
-                    dangerouslySetInnerHTML={createInputElement()}
+                >
-                />
+                    <Input
+                        id='searchTextInput'
+                        className='searchfields-txtSearch'
+                        type='text'
+                        data-keyboard='true'
+                        placeholder={globalize.translate('Search')}
+                        autoComplete='off'
+                        maxLength={40}
+                        // eslint-disable-next-line jsx-a11y/no-autofocus
+                        autoFocus
+                        value={query}
+                        onChange={onChange}
+                    />
+                </div>
             </div>
             {layoutManager.tv && !browser.tv
                 && <AlphaPicker onAlphaPicked={onAlphaPicked} />

src/components/search/SearchResults.tsx

@@ -1,8 +1,9 @@
 import type { BaseItemDto, BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
 import type { ApiClient } from 'jellyfin-apiclient';
 import classNames from 'classnames';
-import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import React, { type FC, useCallback, useEffect, useState } from 'react';
 import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
+import { useDebounceValue } from 'usehooks-ts';
 
 import globalize from '../../scripts/globalize';
 import ServerConnections from '../ServerConnections';
@@ -30,7 +31,7 @@ const isTVShows = (collectionType: string) => collectionType === CollectionType.
 /*
  * React component to display search result rows for global search and non-live tv library search
  */
-const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: SearchResultsProps) => {
+const SearchResults: FC<SearchResultsProps> = ({ serverId = window.ApiClient.serverId(), parentId, collectionType, query }: SearchResultsProps) => {
     const [ movies, setMovies ] = useState<BaseItemDto[]>([]);
     const [ shows, setShows ] = useState<BaseItemDto[]>([]);
     const [ episodes, setEpisodes ] = useState<BaseItemDto[]>([]);
@@ -47,11 +48,12 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
     const [ books, setBooks ] = useState<BaseItemDto[]>([]);
     const [ people, setPeople ] = useState<BaseItemDto[]>([]);
     const [ collections, setCollections ] = useState<BaseItemDto[]>([]);
-    const [isLoading, setIsLoading] = useState(false);
+    const [ isLoading, setIsLoading ] = useState(false);
+    const [ debouncedQuery ] = useDebounceValue(query, 500);
 
     const getDefaultParameters = useCallback(() => ({
         ParentId: parentId,
-        searchTerm: query,
+        searchTerm: debouncedQuery,
         Limit: 100,
         Fields: 'PrimaryImageAspectRatio,CanDelete,MediaSourceCount',
         Recursive: true,
@@ -62,7 +64,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
         IncludeGenres: false,
         IncludeStudios: false,
         IncludeArtists: false
-    }), [parentId, query]);
+    }), [ parentId, debouncedQuery ]);
 
     const fetchArtists = useCallback((apiClient: ApiClient, params = {}) => (
         apiClient?.getArtists(
@@ -97,6 +99,10 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
         ).then(ensureNonNullItems)
     ), [getDefaultParameters]);
 
+    useEffect(() => {
+        if (query) setIsLoading(true);
+    }, [ query ]);
+
     useEffect(() => {
         // Reset state
         setMovies([]);
@@ -116,13 +122,11 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
         setPeople([]);
         setCollections([]);
 
-        if (!query) {
+        if (!debouncedQuery) {
             setIsLoading(false);
             return;
         }
 
-        setIsLoading(true);
-
         const apiClient = ServerConnections.getApiClient(serverId);
         const fetchPromises = [];
 
@@ -230,7 +234,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
                 console.error('An error occurred while fetching data:', error);
                 setIsLoading(false); // Set loading to false even if an error occurs
             });
-    }, [collectionType, fetchArtists, fetchItems, fetchPeople, query, serverId]);
+    }, [collectionType, fetchArtists, fetchItems, fetchPeople, debouncedQuery, serverId]);
 
     const allEmpty = [movies, shows, episodes, videos, programs, channels, playlists, artists, albums, songs, photoAlbums, photos, audioBooks, books, people, collections].every(arr => arr.length === 0);
 
@@ -240,7 +244,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
                 'searchResults',
                 'padded-bottom-page',
                 'padded-top',
-                { 'hide': !query || collectionType === CollectionType.Livetv }
+                { 'hide': !debouncedQuery || collectionType === CollectionType.Livetv }
             )}
         >
             {isLoading ? (
@@ -335,8 +339,10 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
                         cardOptions={{ coverImage: true }}
                     />
 
-                    {allEmpty && query && !isLoading && (
+                    {allEmpty && debouncedQuery && !isLoading && (
-                        <div className='sorry-text'>{globalize.translate('SearchResultsEmpty', query)}</div>
+                        <div className='noItemsMessage centerMessage'>
+                            {globalize.translate('SearchResultsEmpty', debouncedQuery)}
+                        </div>
                     )}
                 </>
             )}

src/components/search/searchfields.scss

@@ -9,14 +9,3 @@
     font-size: 2em;
     align-self: flex-end;
 }
-
-.sorry-text {
-    font-size: 2em;
-    text-align: center;
-    font-family: inherit;
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}

src/components/shortcuts.js

@@ -282,11 +282,15 @@ function executeAction(card, target, action) {
 
 function addToPlaylist(item) {
     import('./playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
-        new PlaylistEditor().show({
+        const playlistEditor = new PlaylistEditor();
+        playlistEditor.show({
             items: [item.Id],
             serverId: item.ServerId
-
+        }).catch(() => {
+            // Dialog closed
         });
+    }).catch(err => {
+        console.error('[addToPlaylist] failed to load playlist editor', err);
     });
 }
 

src/controllers/dashboard/dashboard.html

@@ -8,16 +8,22 @@
                         <span class="material-icons chevron_right" aria-hidden="true"></span>
                     </a>
 
-                    <div class="paperList" style="padding: 1em;">
+                    <div class="serverInfo paperList">
-                        <p id="serverName"></p>
+                        <div>${LabelServerName}</div>
-                        <p id="versionNumber"></p>
+                        <div id="serverName"></div>
+                        <div>${LabelServerVersion}</div>
+                        <div id="versionNumber"></div>
+                        <div>${LabelWebVersion}</div>
+                        <div id="webVersion"></div>
+                        <div>${LabelBuildVersion}</div>
+                        <div id="buildVersion"></div>
                     </div>
 
                     <div class="dashboardActionsContainer">
                         <button is="emby-button" type="button" class="raised btnRefresh">
                             <span>${ButtonScanAllLibraries}</span>
                         </button>
-                        <button is="emby-button" type="button" id="btnRestartServer" class="raised hide" onclick="DashboardPage.restart(this);">
+                        <button is="emby-button" type="button" id="btnRestartServer" class="raised" onclick="DashboardPage.restart(this);">
                             <span>${Restart}</span>
                         </button>
                         <button is="emby-button" type="button" id="btnShutdown" class="raised" onclick="DashboardPage.shutdown(this);">

src/controllers/dashboard/dashboard.js

@@ -1,4 +1,5 @@
 import escapeHtml from 'escape-html';
+
 import datetime from '../../scripts/datetime';
 import Events from '../../utils/events.ts';
 import itemHelper from '../../components/itemHelper';
@@ -14,10 +15,6 @@ import imageLoader from '../../components/images/imageLoader';
 import ActivityLog from '../../components/activitylog';
 import imageHelper from '../../utils/image';
 import indicators from '../../components/indicators/indicators';
-import '../../components/listview/listview.scss';
-import '../../elements/emby-button/emby-button';
-import '../../styles/flexstyles.scss';
-import '../../elements/emby-itemscontainer/emby-itemscontainer';
 import taskButton from '../../scripts/taskbutton';
 import Dashboard from '../../utils/dashboard';
 import ServerConnections from '../../components/ServerConnections';
@@ -25,6 +22,19 @@ import alert from '../../components/alert';
 import confirm from '../../components/confirm/confirm';
 import { getDefaultBackgroundClass } from '../../components/cardbuilder/cardBuilderUtils';
 
+import { getSystemInfoQuery } from 'hooks/useSystemInfo';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+import { queryClient } from 'utils/query/queryClient';
+
+import { version as WEB_VERSION } from '../../../package.json';
+
+import '../../elements/emby-button/emby-button';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+
+import '../../components/listview/listview.scss';
+import '../../styles/flexstyles.scss';
+import './dashboard.scss';
+
 function showPlaybackInfo(btn, session) {
     let title;
     const text = [];
@@ -199,22 +209,21 @@ function refreshActiveRecordings(view, apiClient) {
 }
 
 function reloadSystemInfo(view, apiClient) {
-    apiClient.getSystemInfo().then(function (systemInfo) {
+    view.querySelector('#buildVersion').innerText = __JF_BUILD_VERSION__;
-        view.querySelector('#serverName').innerText = globalize.translate('DashboardServerName', systemInfo.ServerName);
+    view.querySelector('#webVersion').innerText = WEB_VERSION;
-        view.querySelector('#versionNumber').innerText = globalize.translate('DashboardVersionNumber', systemInfo.Version);
 
-        if (systemInfo.CanSelfRestart) {
+    queryClient
-            view.querySelector('#btnRestartServer').classList.remove('hide');
+        .fetchQuery(getSystemInfoQuery(toApi(apiClient)))
-        } else {
+        .then(systemInfo => {
-            view.querySelector('#btnRestartServer').classList.add('hide');
+            view.querySelector('#serverName').innerText = systemInfo.ServerName;
-        }
+            view.querySelector('#versionNumber').innerText = systemInfo.Version;
 
-        view.querySelector('#cachePath').innerText = systemInfo.CachePath;
+            view.querySelector('#cachePath').innerText = systemInfo.CachePath;
-        view.querySelector('#logPath').innerText = systemInfo.LogPath;
+            view.querySelector('#logPath').innerText = systemInfo.LogPath;
-        view.querySelector('#transcodePath').innerText = systemInfo.TranscodingTempPath;
+            view.querySelector('#transcodePath').innerText = systemInfo.TranscodingTempPath;
-        view.querySelector('#metadataPath').innerText = systemInfo.InternalMetadataPath;
+            view.querySelector('#metadataPath').innerText = systemInfo.InternalMetadataPath;
-        view.querySelector('#webPath').innerText = systemInfo.WebPath;
+            view.querySelector('#webPath').innerText = systemInfo.WebPath;
-    });
+        });
 }
 
 function renderInfo(view, sessions) {

src/controllers/dashboard/dashboard.scss

@@ -0,0 +1,17 @@
+.serverInfo {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    padding: 1em;
+
+    > *:nth-child(odd) {
+        flex: 1 0 20%;
+        min-width: 7.5em;
+
+        font-weight: bold;
+    }
+
+    > *:nth-child(even) {
+        flex: 1 0 70%;
+    }
+}

src/controllers/itemDetails/index.js

@@ -1257,12 +1257,16 @@ function renderTags(page, item) {
         tags = [];
     }
 
-    for (let i = 0, length = tags.length; i < length; i++) {
+    tags.forEach(tag => {
-        tagElements.push(tags[i]);
+        tagElements.push(
-    }
+            `<a href="#/search.html?query=${encodeURIComponent(tag)}" class="button-link emby-button" is="emby-linkbutton">`
+            + escapeHtml(tag)
+            + '</a>'
+        );
+    });
 
     if (tagElements.length) {
-        itemTags.innerText = globalize.translate('TagsValue', tagElements.join(', '));
+        itemTags.innerHTML = globalize.translate('TagsValue', tagElements.join(', '));
         itemTags.classList.remove('hide');
     } else {
         itemTags.innerHTML = '';

src/controllers/list.js

@@ -401,10 +401,15 @@ function onNewItemClick() {
     const instance = this;
 
     import('../components/playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
-        new PlaylistEditor({
+        const playlistEditor = new PlaylistEditor();
+        playlistEditor.show({
             items: [],
             serverId: instance.params.serverId
+        }).catch(() => {
+            // Dialog closed
         });
+    }).catch(err => {
+        console.error('[onNewItemClick] failed to load playlist editor', err);
     });
 }
 

src/elements/emby-input/Input.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import React, { type DetailedHTMLProps, type InputHTMLAttributes, type FC, useState, useCallback } from 'react';
+
+import './emby-input.scss';
+
+interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    id: string,
+    label?: string
+}
+
+const Input: FC<InputProps> = ({
+    id,
+    label,
+    className,
+    onBlur,
+    onFocus,
+    ...props
+}) => {
+    const [ isFocused, setIsFocused ] = useState(false);
+
+    const onBlurInternal = useCallback(e => {
+        setIsFocused(false);
+        onBlur?.(e);
+    }, [ onBlur ]);
+
+    const onFocusInternal = useCallback(e => {
+        setIsFocused(true);
+        onFocus?.(e);
+    }, [ onFocus ]);
+
+    return (
+        <>
+            <label
+                htmlFor={id}
+                className={classNames(
+                    'inputLabel',
+                    {
+                        inputLabelUnfocused: !isFocused,
+                        inputLabelFocused: isFocused
+                    }
+                )}
+            >
+                {label}
+            </label>
+            <input
+                id={id}
+                className={classNames(
+                    'emby-input',
+                    className
+                )}
+                onBlur={onBlurInternal}
+                onFocus={onFocusInternal}
+                {...props}
+            />
+        </>
+    );
+};
+
+export default Input;

src/global.d.ts

@@ -14,4 +14,8 @@ export declare global {
     interface DocumentEventMap {
         'viewshow': CustomEvent;
     }
+
+    const __JF_BUILD_VERSION__: string;
+    const __USE_SYSTEM_FONTS__: string;
+    const __WEBPACK_SERVE__: string;
 }

src/hooks/usePrevious.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * A hook that returns the previous value of a stateful value.
+ * @param value A stateful value created by a `useState` hook.
+ * @param initialValue The default value.
+ * @returns The previous value.
+ */
+export function usePrevious<T>(value: T, initialValue?: T): T | undefined {
+    const ref = useRef<T | undefined>(initialValue);
+
+    useEffect(() => {
+        ref.current = value;
+    }, [ value ]);
+
+    return ref.current;
+}

src/hooks/useSystemInfo.ts

@@ -3,21 +3,34 @@ import type { Api } from '@jellyfin/sdk';
 import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
 import type { AxiosRequestConfig } from 'axios';
 
+import { useApi } from './useApi';
+import { queryOptions } from 'utils/query/queryOptions';
+
 const fetchSystemInfo = async (
-    api: Api | undefined,
+    api?: Api,
-    options: AxiosRequestConfig
+    options?: AxiosRequestConfig
 ) => {
-    if (!api) throw new Error('No API instance available');
+    if (!api) {
+        console.warn('[fetchSystemInfo] No API instance available');
+        return;
+    }
 
     const response = await getSystemApi(api)
         .getSystemInfo(options);
     return response.data;
 };
 
-export const useSystemInfo = (api: Api | undefined) => {
+export const getSystemInfoQuery = (
-    return useQuery({
+    api?: Api
-        queryKey: [ 'SystemInfo' ],
+) => queryOptions({
-        queryFn: ({ signal }) => fetchSystemInfo(api, { signal }),
+    queryKey: [ 'SystemInfo' ],
-        enabled: !!api
+    queryFn: ({ signal }) => fetchSystemInfo(api, { signal }),
-    });
+    // Allow for query reuse in legacy javascript.
+    staleTime: 1000, // 1 second
+    enabled: !!api
+});
+
+export const useSystemInfo = () => {
+    const { api } = useApi();
+    return useQuery(getSystemInfoQuery(api));
 };

src/index.jsx

@@ -94,7 +94,7 @@ function onGlobalizeInit() {
     if (browser.tv && !browser.android) {
         console.debug('using system fonts with explicit sizes');
         import('./styles/fonts.sized.scss');
-    } else if (__USE_SYSTEM_FONTS__) { // eslint-disable-line no-undef
+    } else if (__USE_SYSTEM_FONTS__) {
         console.debug('using system fonts');
         import('./styles/fonts.scss');
     } else {

src/scripts/playlists.js

@@ -187,10 +187,15 @@ export default function (view) {
     view.querySelector('.btnNewPlaylist').addEventListener('click', function () {
         import('../components/playlisteditor/playlisteditor').then(({ default: PlaylistEditor }) => {
             const serverId = ApiClient.serverInfo().Id;
-            new PlaylistEditor({
+            const playlistEditor = new PlaylistEditor();
+            playlistEditor.show({
                 items: [],
                 serverId: serverId
+            }).catch(() => {
+                // Dialog closed
             });
+        }).catch(err => {
+            console.error('[btnNewPlaylist] failed to load playlist editor', err);
         });
     });
     onViewStyleChange();

src/scripts/settings/webSettings.js

@@ -35,7 +35,7 @@ export function getIncludeCorsCredentials() {
 
 export function getMultiServer() {
     // Enable multi-server support when served by webpack
-    if (__WEBPACK_SERVE__) { // eslint-disable-line no-undef
+    if (__WEBPACK_SERVE__) {
         return Promise.resolve(true);
     }
 

src/strings/cs.json

@@ -1782,5 +1782,8 @@
     "LabelTrackGain": "Na úrovni skladby",
     "SelectAudioNormalizationHelp": "Normalizace na úrovni skladby upraví hlasitost všech skladeb tak, aby byla všude stejná. Normalizace na úrovni alba upraví hlasitost všech skladeb tak, aby byla hlasitost stejná v rámci jednotlivých alb.",
     "SearchResultsEmpty": "Pro “{0}” nebylo nic nalezeno",
-    "HeaderAllRecordings": "Všechny nahrávky"
+    "HeaderAllRecordings": "Všechny nahrávky",
+    "LabelBuildVersion": "Verze sestavení",
+    "LabelServerVersion": "Verze serveru",
+    "LabelWebVersion": "Verze webu"
 }

src/strings/de.json

@@ -428,7 +428,7 @@
     "LabelCollection": "Sammlung",
     "LabelCommunityRating": "Community Bewertung",
     "LabelContentType": "Typ des Inhalts",
-    "LabelCountry": "Land",
+    "LabelCountry": "Land/Region",
     "LabelCriticRating": "Kritikerbewertung",
     "LabelCurrentPassword": "Aktuelles Passwort",
     "LabelCustomCertificatePath": "Benutzerdefinierter Pfad zum SSL-Zertifikat",
@@ -1782,5 +1782,8 @@
     "SelectAudioNormalizationHelp": "Track Gain - passt die Lautstärke der einzelnen Tracks an, so dass sie mit der gleichen Lautstärke wiedergegeben werden. Albumverstärkung - passt die Lautstärke aller Titel eines Albums an, wobei der Dynamikbereich des Albums erhalten bleibt.",
     "LabelAlbumGain": "Albumlautstärke",
     "LabelSelectAudioNormalization": "Audio Normalisierung",
-    "HeaderAllRecordings": "Alle Aufnahmen"
+    "HeaderAllRecordings": "Alle Aufnahmen",
+    "LabelBuildVersion": "Build-Version",
+    "LabelServerVersion": "Server-Version",
+    "LabelWebVersion": "Web-Version"
 }

src/strings/en-gb.json

@@ -984,7 +984,7 @@
     "LabelCustomCertificatePathHelp": "Path to a PKCS #12 file containing a certificate and private key to enable TLS support on a custom domain.",
     "LabelCurrentPassword": "Current password",
     "LabelCriticRating": "Critics rating",
-    "LabelCountry": "Country",
+    "LabelCountry": "Country/Region",
     "LabelContentType": "Content type",
     "LabelCommunityRating": "Community rating",
     "LabelCertificatePassword": "Certificate password",

src/strings/en-us.json

@@ -190,8 +190,6 @@
     "Cursive": "Cursive",
     "CustomDlnaProfilesHelp": "Create a custom profile to target a new device or override a system profile.",
     "DailyAt": "Daily at {0}",
-    "DashboardServerName": "Server: {0}",
-    "DashboardVersionNumber": "Version: {0}",
     "Data": "Data",
     "DateAdded": "Date added",
     "DatePlayed": "Date played",
@@ -626,6 +624,7 @@
     "LabelBlastMessageInterval": "Alive message interval",
     "LabelBlastMessageIntervalHelp": "Determine the duration in seconds between blast alive messages.",
     "LabelBlockContentWithTags": "Block items with tags",
+    "LabelBuildVersion": "Build version",
     "LabelBurnSubtitles": "Burn subtitles",
     "LabelCache": "Cache",
     "LabelCachePath": "Cache path",
@@ -939,6 +938,7 @@
     "LabelServerHostHelp": "192.168.1.100:8096 or https://myserver.com",
     "LabelServerName": "Server name",
     "LabelServerNameHelp": "This name will be used to identify the server and will default to the server's hostname.",
+    "LabelServerVersion": "Server version",
     "LabelSimultaneousConnectionLimit": "Simultaneous stream limit",
     "LabelSize": "Size",
     "LabelSkipBackLength": "Skip back length",
@@ -1079,6 +1079,7 @@
     "LabelVppTonemappingContrast": "VPP Tone mapping contrast gain",
     "LabelVppTonemappingContrastHelp": "Apply contrast gain in VPP tone mapping. Both recommended and default values are 1.",
     "LabelWeb": "Web",
+    "LabelWebVersion": "Web version",
     "LabelWidthResolutions": "Width Resolutions",
     "LabelWidthResolutionsHelp": "Comma separated list of the width (px) that trickplay images will be generated at. All images should generate proportionally to the source, so a width of 320 on a 16:9 video ends up around 320x180.",
     "LabelXDlnaCap": "Device Capability ID",

src/strings/fr.json

@@ -449,7 +449,7 @@
     "LabelCollection": "Collection",
     "LabelCommunityRating": "Note de la communauté",
     "LabelContentType": "Type de contenu",
-    "LabelCountry": "Pays",
+    "LabelCountry": "Pays/Région",
     "LabelCriticRating": "Note des critiques",
     "LabelCurrentPassword": "Mot de passe actuel",
     "LabelCustomCertificatePath": "Chemin vers le certificat SSL personnalisé",
@@ -1782,5 +1782,8 @@
     "LabelAlbumGain": "Gain de l'album",
     "LabelSelectAudioNormalization": "Normalisation de l'audio",
     "LabelTrackGain": "Gain de piste",
-    "HeaderAllRecordings": "Tous les enregistrements"
+    "HeaderAllRecordings": "Tous les enregistrements",
+    "LabelBuildVersion": "Numéro de build",
+    "LabelServerVersion": "Version du serveur",
+    "LabelWebVersion": "Version web"
 }

src/strings/ga.json

@@ -0,0 +1,26 @@
+{
+    "Actor": "Aisteoir",
+    "Add": "Cuir le",
+    "AddedOnValue": "Curtha {0}",
+    "AddToFavorites": "Cur le ceanáin",
+    "AgeValue": "({0} bliana d'aois)",
+    "AirDate": "Dáta Croalta",
+    "Aired": "Craolta",
+    "AlbumArtist": "Ealaíontóir Albam",
+    "Albums": "Albaim",
+    "Alerts": "Foláirimh",
+    "AllChannels": "Gach cainéal",
+    "AllLanguages": "Gach teanga",
+    "AllEpisodes": "Gach eagrán",
+    "AllLibraries": "Gach leabharlann",
+    "AllowCollectionManagement": "Lig don úsáideoir seo bailiúcháin a bhainistiú",
+    "Absolute": "Absalóideach",
+    "AccessRestrictedTryAgainLater": "Tá rochtain srianta faoi láthair. Bain triail eile as ar ball.",
+    "All": "Uilig",
+    "Album": "Albam",
+    "AddToCollection": "Cur le bailiúcháin",
+    "AddToPlaylist": "Cur le seinnliosta",
+    "AddToPlayQueue": "Cur le scuaine seinnteoir",
+    "AllComplexFormats": "Gach formáid chasta (ASS, SSA, VobSub, PGS, SUB, IDX, ...)",
+    "AllowedRemoteAddressesHelp": "Liosta scartha camóg de seoltaí IP nó iontráil IP/netmask do líonraí a ligfear nascadh go cianda. Má fhágtar folamh é, ceadófar gach ciansheoladh."
+}

src/strings/hr.json

@@ -294,7 +294,7 @@
     "LabelCollection": "Kolekcija",
     "LabelCommunityRating": "Ocjene zajednice",
     "LabelContentType": "Tip sadržaja",
-    "LabelCountry": "Zemlja",
+    "LabelCountry": "Zemlja/Regija",
     "LabelCriticRating": "Ocjena kritičara",
     "LabelCurrentPassword": "Trenutna lozinka",
     "LabelCustomCss": "Prilagođeni CSS kod",
@@ -1512,5 +1512,8 @@
     "ShowYear": "Prikaži godinu",
     "LabelLocalCustomCss": "Prilagođeni CSS kod za stil koji se odnosi samo na ovog klijenta. Možda ćete htjeti onemogućiti prilagođeni CSS kod poslužitelja.",
     "LabelPlayerDimensions": "Dimenzije izvođača",
-    "LabelSegmentKeepSecondsHelp": "Vrijeme u sekundama za koje se segmenti trebaju čuvati prije nego što se prebrišu. Mora biti veći od \"Throttle after\". Radi samo ako je omogućeno brisanje segmenta."
+    "LabelSegmentKeepSecondsHelp": "Vrijeme u sekundama za koje se segmenti trebaju čuvati prije nego što se prebrišu. Mora biti veći od \"Throttle after\". Radi samo ako je omogućeno brisanje segmenta.",
+    "LabelKnownProxies": "Poznati proxy-i",
+    "ButtonBackspace": "Backspace",
+    "LabelHomeScreenSectionValue": "{0}. odjeljak početne"
 }

src/strings/hu.json

@@ -170,7 +170,7 @@
     "LabelCollection": "Gyűjtemény",
     "LabelCommunityRating": "Közösségi értékelés",
     "LabelContentType": "Tartalom típusa",
-    "LabelCountry": "Ország",
+    "LabelCountry": "Ország/Régió",
     "LabelCriticRating": "Kritikusok értékelése",
     "LabelCurrentPassword": "Jelenlegi jelszó",
     "LabelCustomDeviceDisplayNameHelp": "Adj meg egy egyedi nevet, vagy hagyd üresen a készülék által elküldött név használatához.",
@@ -1781,5 +1781,6 @@
     "LabelTrackGain": "Címnyereség",
     "ForeignPartsOnly": "Kényszerített/külföldi alkatrészek",
     "HearingImpairedShort": "HI/SDH",
-    "HeaderGuestCast": "Vendégsztárok"
+    "HeaderGuestCast": "Vendégsztárok",
+    "HeaderAllRecordings": "Összes Felvétel"
 }

src/strings/ms.json

@@ -102,7 +102,7 @@
     "AskAdminToCreateLibrary": "Minta pentadbir untuk membuat perpustakaan.",
     "Artist": "Artis",
     "ApiKeysCaption": "Senarai kunci API yang diaktifkan sekarang",
-    "AllowTonemappingHelp": "Pemetaan-tone dapat mengubah dinamik video daripada HDR ke SDR sambil mengekalkan perincian dan warna gambar, yang merupakan maklumat yang sangat penting untuk mewakili pemandangan asal. Pada masa ini ia hanya berfungsi dengan video 10bit HDR10, HLG dan Dolby Visoion. Ini memerlukan pemadanan bersesuian dengan OpenCL atau CUDA runtime.",
+    "AllowTonemappingHelp": "Pemetaan-tone dapat mengubah dinamik video daripada HDR ke SDR sambil mengekalkan perincian dan warna gambar, yang merupakan maklumat yang sangat penting untuk mewakili pemandangan asal. Pada masa ini ia hanya berfungsi dengan video 10bit HDR10, HLG, dan Dolby Vision. Ini memerlukan pemadanan bersesuian dengan OpenCL atau CUDA runtime.",
     "Songs": "Lagu-lagu",
     "Playlists": "Senarai ulangmain",
     "Photos": "Gambar-gambar",
@@ -210,7 +210,7 @@
     "DisplayInMyMedia": "Pamerkan di skrin utama",
     "DirectStreaming": "Mainkan secara terus",
     "DirectStreamHelp1": "Strim video ini serasi dengan peranti ini, tetapi ia mempunya format audio (DTS, Dolby TrueHD, dll.) ataupun jumlah saluran audio yang tidak sepadan. Strim video ini akan dipakej tanpa dimampatkan secara masa sebenar sebelum dihantar ke peranti. Hanya strim audio sahaja yang akan ditranskod.",
-    "DirectPlayHelp": "Fail sumber ini serasi sepenuhnya dengan klien ini, dan sesi ini menerima fail tanpa pengubahsuaian.",
+    "DirectPlayHelp": "Fail sumber ini serasi sepenuhnya dengan klien ini dan sesi ini menerima fail tanpa pengubahsuaian.",
     "DirectPlaying": "Mainkan secara terus",
     "Directors": "Pengarah",
     "Digital": "Digital",
@@ -258,5 +258,42 @@
     "Cursive": "Sambung",
     "DefaultSubtitlesHelp": "Sari kata dimuatkan berdasarkan bendera lalai dan paksa dalam metadata yang disematkan. Keutamaan bahasa diambil kira apabila terdapat beberapa pilihan.",
     "LabelThrottleDelaySecondsHelp": "Masa dalam saat selepas mana transkoder akan dihadkan. Mesti cukup besar untuk klien mengekalkan penimbal yang sihat. Hanya berfungsi jika penghadan diaktifkan.",
-    "LabelSegmentKeepSeconds": "Masa untuk mengekalkan segmen"
+    "LabelSegmentKeepSeconds": "Masa untuk mengekalkan segmen",
+    "PreviousTrack": "Langkau ke sebelumnya",
+    "QuickConnectAuthorizeFail": "Kod Sambung Pantas tidak dikenali",
+    "AllowEmbeddedSubtitlesAllowImageOption": "Benarkan Imej",
+    "QuickConnect": "Sambung Pantas",
+    "Production": "Penerbitan",
+    "Primary": "Utama",
+    "Print": "Cetak",
+    "Producer": "Penerbit",
+    "Profile": "Profil",
+    "Quality": "Kualiti",
+    "ProductionLocations": "Lokasi penerbitan",
+    "QuickConnectNotActive": "Sambung Pantas tidak aktif pada pelayan ini",
+    "QuickConnectNotAvailable": "Minta pentadbir pelayan anda untuk mendayakan Sambung Pantas",
+    "Rate": "Kadar",
+    "PreviousChapter": "Bab sebelumnya",
+    "QuickConnectAuthorizeCode": "Masukkan kod {0} untuk log masuk",
+    "QuickConnectDeactivated": "Sambungan Pantas telah dinyahaktifkan sebelum permintaan log masuk dapat diluluskan",
+    "Previous": "Sebelumnya",
+    "LabelSegmentKeepSecondsHelp": "Masa dalam saat yang segmen harus disimpan sebelum ia ditulis ganti. Mesti melebihi \"Penghad laju setelah\". Hanya berfungsi jika pemadaman segmen didayakan.",
+    "AllowEmbeddedSubtitlesAllowAllOption": "Benarkan Semua",
+    "AllowEmbeddedSubtitlesAllowTextOption": "Benarkan Teks",
+    "QuickConnectDescription": "Untuk log masuk dengan Sambung Pantas, pilihlah butang 'Sambung Pantas' pada peranti yang anda menggunakan untuk log masuk dan memasukkan kod yang muncul di bawah.",
+    "QuickConnectInvalidCode": "Kod Sambung Pantas tidak sah",
+    "EnableNextVideoInfoOverlay": "Tunjukkan informasi video seterusnya semasa main balik",
+    "EnablePhotosHelp": "Imej akan dikesan dan dipaparkan bersama fail media lain.",
+    "Help": "Bantuan",
+    "DownloadAll": "Muat Turun Semua",
+    "EnablePhotos": "Paparkan gambar",
+    "EnableQuickConnect": "Dayakan Sambung Pantas pada pelayan ini",
+    "DisplayMissingEpisodesWithinSeasonsHelp": "Ini juga mesti didayakan untuk perpustakaan TV dalam konfigurasi pelayan.",
+    "EnableExternalVideoPlayers": "Pemain video luaran",
+    "Desktop": "Desktop",
+    "EnableNextVideoInfoOverlayHelp": "Pada penghujung video, paparkan maklumat tentang video seterusnya yang muncul dalam senarai main semasa.",
+    "EnableCinemaMode": "Mod pawagam",
+    "DisableCustomCss": "Lumpuhkan kod CSS kustom yang disediakan oleh pelayan",
+    "EnablePlugin": "Dayakan",
+    "DisablePlugin": "Lumpuhkan"
 }

src/strings/nl.json

@@ -1781,5 +1781,8 @@
     "LabelSelectAudioNormalization": "Geluidsnormalisatie",
     "LabelTrackGain": "Nummerversterking",
     "SearchResultsEmpty": "Sorry! Geen resultaten gevonden voor \"{0}\"",
-    "HeaderAllRecordings": "Alle opnamen"
+    "HeaderAllRecordings": "Alle opnamen",
+    "LabelBuildVersion": "Buildversie",
+    "LabelServerVersion": "Serverversie",
+    "LabelWebVersion": "Webversie"
 }

src/strings/pl.json

@@ -1782,5 +1782,8 @@
     "LabelTrackGain": "Wzmocnienie utworu",
     "SelectAudioNormalizationHelp": "Wzmocnienie utworu – reguluje głośność każdego utworu tak, aby odtwarzał się z tą samą głośnością. Wzmocnienie albumu – reguluje głośność tylko wszystkich utworów w albumie, zachowując zakres dynamiki albumu.",
     "SearchResultsEmpty": "Wybacz! Nie znaleziono wyników dla „{0}”",
-    "HeaderAllRecordings": "Wszystkie nagrania"
+    "HeaderAllRecordings": "Wszystkie nagrania",
+    "LabelBuildVersion": "Wersja kompilacji",
+    "LabelServerVersion": "Wersja serwera",
+    "LabelWebVersion": "Wersja sieciowa"
 }

src/strings/sq.json

@@ -581,5 +581,7 @@
     "HeaderAutoDiscovery": "Zbulim ne rrjet",
     "HeaderStopRecording": "Ndaloni regjistrimin",
     "HeaderSubtitleProfilesHelp": "Profilet e titrave përshkruajnë formatin e titrave që suportohen nga paisja.",
-    "HeaderSyncPlaySelectGroup": "Bashkohuni një grupi"
+    "HeaderSyncPlaySelectGroup": "Bashkohuni një grupi",
+    "DirectStreamHelp2": "Energjia e konsumuar nga transmetimi i drejtpërdrejtë zakonisht varet nga profili i audios. Vetëm transmetimi i videove është pa humbje.",
+    "EnableDetailsBannerHelp": "Shfaqni një imazh baneri në krye të faqes së  artikullit."
 }

src/strings/tr.json

@@ -68,7 +68,7 @@
     "LabelCachePath": "Önbellek yolu",
     "LabelCachePathHelp": "Sunucunun resim vb. önbellek dosyalarını tutması için bir yer belirt. Öntanımlı yeri kullanmak için boş bırak.",
     "LabelContentType": "İçerik türü",
-    "LabelCountry": "Ülke",
+    "LabelCountry": "Ülke/Bölge",
     "LabelCurrentPassword": "Kullanımdaki parola",
     "LabelDay": "Haftanın günü",
     "LabelEnableDlnaServer": "DLNA sunucusunu etkinleştir",
@@ -248,7 +248,7 @@
     "ChannelNameOnly": "Yalnızca {0} kanalı",
     "ConfirmDeleteItems": "Bu ögeleri silmek, onları hem dosya sisteminden hem de medya kütüphanenizden siler. Devam etmek istediğinize emin misiniz?",
     "ConfirmDeletion": "Silme İşlemini Onayla",
-    "ConfirmEndPlayerSession": "Jellyfin'i {0} tarihinde kapatmak ister misiniz?",
+    "ConfirmEndPlayerSession": "{0} üzerindeki Jellyfin'i kapatmak ister misiniz?",
     "Connect": "Bağlan",
     "Disconnect": "Bağlantıyı Kes",
     "Display": "Görünüm",

src/strings/uk.json

@@ -17,7 +17,7 @@
     "HeaderUsers": "Користувачі",
     "LabelBirthDate": "Дата народження",
     "LabelBirthYear": "Рік народження",
-    "LabelCountry": "Країна",
+    "LabelCountry": "Країна/Регіон",
     "LabelCurrentPassword": "Поточний пароль",
     "LabelDeathDate": "Дата смерті",
     "LabelLanguage": "Мова",

src/strings/vi.json

@@ -35,7 +35,7 @@
     "LabelNewPassword": "Mật khẩu mới",
     "LabelNewPasswordConfirm": "Xác nhận mật khẩu mới",
     "LabelSaveLocalMetadata": "Lưu các ảnh bìa minh họa và dữ liệu mô tả vào trong các thư mục phương tiện",
-    "LabelSaveLocalMetadataHelp": "Lưu ảnh bìa minh họa vào các thư mục phương tiện giúp đưa chúng vào một nơi dễ chỉnh sửa hơn.",
+    "LabelSaveLocalMetadataHelp": "Lưu ảnh bìa minh họa vào thư mục phương tiện để đưa chúng vào nơi dễ chỉnh sửa hơn.",
     "LabelTime": "Thời gian",
     "LabelYoureDone": "Bạn đã hoàn thành!",
     "MaxParentalRatingHelp": "Nội dung với đánh giá cao hơn sẽ được ẩn đi từ người dùng này.",
@@ -99,7 +99,7 @@
     "ButtonGotIt": "Hiểu rồi",
     "ButtonFullscreen": "Toàn màn hình",
     "ButtonForgotPassword": "Quên mật khẩu",
-    "ButtonEditOtherUserPreferences": "Chỉnh sửa hồ sơ, ảnh và sở thích cá nhân của người dùng này.",
+    "ButtonEditOtherUserPreferences": "Sửa hồ sơ, ảnh và sở thích cá nhân của người dùng này.",
     "ButtonChangeServer": "Đổi máy chủ",
     "ButtonBack": "Quay lại",
     "ButtonAudioTracks": "Bản Ghi Âm Thanh",
@@ -206,7 +206,7 @@
     "BoxSet": "",
     "Box": "Hộp",
     "Banner": "Ảnh bìa",
-    "Art": "",
+    "Art": "Minh họa",
     "Artist": "Ca Sĩ",
     "AllowFfmpegThrottlingHelp": "Tạm dừng quá trình chuyển mã hoặc chuyển đổi định dạng để tiết kiệm tài nguyên máy chủ khi việc này đã đủ để phát so với vị trí hiện tại. Nó hữu ích khi xem mà không cần tua. Tắt tính năng này nếu bạn gặp sự cố phát lại.",
     "AllowFfmpegThrottling": "Điều tiết sự chuyển mã",
@@ -235,7 +235,7 @@
     "DeleteDeviceConfirmation": "Bạn có chắc chắn muốn xoá thiết bị này? Nó sẽ xuất hiện lại khi người dùng đăng nhập bằng thiết bị đó.",
     "DeinterlaceMethodHelp": "Chọn cách khử xen kẽ để dùng khi phần mềm chuyển mã xen kẽ nội dung. Khi hỗ trợ tăng tốc phần cứng khử xen kẽ được bật, trình khử xen kẽ phần cứng sẽ dùng cài đặt này.",
     "DefaultSubtitlesHelp": "Phụ đề được tải dựa trên mặc định và bắt buộc gắn cờ trong dữ liệu mô tả. Ngôn ngữ ưa thích được xem xét khi có nhiều lựa chọn.",
-    "DefaultMetadataLangaugeDescription": "Đây là thiết lập mặc định chung, bạn có thể tuỳ chỉnh thiết lập riêng cho từng thư viện.",
+    "DefaultMetadataLangaugeDescription": "Đây là mặc định của bạn và có thể tùy chỉnh trên cơ sở từng thư viện.",
     "DisplayModeHelp": "Chọn kiểu bố trí giao diện mà bạn muốn.",
     "Download": "Tải về",
     "Down": "Xuống",
@@ -243,9 +243,9 @@
     "EnableCinemaMode": "Chế độ rạp phim",
     "EnableBackdropsHelp": "Hiển thị phông nền trong nền của một số trang trong khi duyệt thư viện.",
     "EditSubtitles": "Chỉnh sửa phụ đề",
-    "EditMetadata": "Chỉnh sửa thông tin",
+    "EditMetadata": "Sửa dữ liệu mô tả",
-    "EditImages": "Chỉnh sửa hình ảnh",
+    "EditImages": "Sửa ảnh",
-    "Edit": "Chỉnh sửa",
+    "Edit": "Sửa",
     "EasyPasswordHelp": "Mã PIN Tiện Lợi dùng cho việc truy cập ngoại tuyến trên thiết bị hỗ trợ và cũng dùng để đăng nhập trong mạng dễ dàng.",
     "DropShadow": "Bóng đổ",
     "DrmChannelsNotImported": "Những kênh được bảo vệ bản quyền sẽ không được nhập vào.",
@@ -405,7 +405,7 @@
     "HeaderError": "Lỗi",
     "HeaderEnabledFieldsHelp": "Bỏ chọn một mục để khóa nó và ngăn dữ liệu của nó bị thay đổi.",
     "HeaderEnabledFields": "Những Mục Được Kích Hoạt",
-    "HeaderEditImages": "Chỉnh Sửa Hình Ảnh",
+    "HeaderEditImages": "Sửa Ảnh",
     "HeaderEasyPinCode": "Mã PIN Tiện Lợi",
     "HeaderDownloadSync": "Tải Xuống Và Đồng Bộ",
     "HeaderDirectPlayProfileHelp": "Thêm cấu hình phát lại trực tiếp để chỉ ra những định dạng mà thiết bị có thể xử lý nguyên bản.",
@@ -439,7 +439,7 @@
     "HeaderScenes": "Phân Cảnh",
     "HeaderRunningTasks": "Những Tác Vụ Hoạt Động",
     "HeaderRevisionHistory": "Lịch Sử Chỉnh Sửa",
-    "HeaderResponseProfileHelp": "Hồ sơ phản hồi là phương thức tuỳ chỉnh thông tin gửi về thiết bị phát khi phát một số nội dung nhất định.",
+    "HeaderResponseProfileHelp": "Cấu hình phản hồi là phương thức tuỳ chỉnh thông tin gửi về thiết bị phát khi phát một số loại phương tiện.",
     "HeaderResponseProfile": "Hồ Sơ Phản Hồi",
     "HeaderRemoveMediaLocation": "Xoá Đường Dẫn Nội Dung",
     "HeaderRemoveMediaFolder": "Xoá Thư Mục Phương Tiện",
@@ -605,7 +605,7 @@
     "HeaderDVR": "DVR",
     "LabelExtractChaptersDuringLibraryScanHelp": "Tạo hình ảnh phân cảnh khi video được nhập trong quá trình quét thư viện. Nếu không chúng sẽ được trích xuất thông qua những tác vụ định kì, giúp cho quá trình quét thư viện diễn ra nhanh hơn.",
     "LabelExtractChaptersDuringLibraryScan": "Trích xuất hình ảnh phân đoạn khi quét thư viện",
-    "LabelBaseUrlHelp": "Thêm một thư mục con tùy chỉnh vào đường dẫn máy chủ. Ví dụ: <code>http://example.com/<b>&lt;baseurl&gt;</b></code>",
+    "LabelBaseUrlHelp": "Thêm một thư mục con tùy chỉnh vào URL máy chủ. Ví dụ: <code>http://example.com/<b>&lt;baseurl&gt;</b></code>",
     "LabelLoginDisclaimerHelp": "Một thông báo sẽ được hiển thị ở cuối trang đăng nhập.",
     "LabelLoginDisclaimer": "Hiển thị khi đăng nhập",
     "LabelLockItemToPreventChanges": "Khoá mục này để ngăn những thay đổi trong tương lai",
@@ -954,7 +954,7 @@
     "LiveBroadcasts": "Chương trình phát sóng trực tiếp",
     "Live": "Trực tiếp",
     "List": "Danh sách",
-    "LibraryAccessHelp": "Chọn thư viện để chia sẻ với người dùng này. Quản trị viên có thể chỉnh sửa các thư mục bằng trình quản lý dữ liệu mô tả.",
+    "LibraryAccessHelp": "Chọn thư viện chia sẻ với người dùng này. Quản trị viên có thể sửa các thư mục bằng trình quản lý dữ liệu mô tả.",
     "LeaveBlankToNotSetAPassword": "Bạn có thể để trống trường này để không đặt mật khẩu.",
     "LearnHowYouCanContribute": "Tìm hiểu cách bạn có thể đóng góp.",
     "LatestFromLibrary": "{0} Đã Thêm Vào Gần Đây",
@@ -999,7 +999,7 @@
     "LabelTranscodingProgress": "Tiến trình chuyển mã",
     "LabelTranscodingFramerate": "Tốc độ khung hình chuyển mã",
     "LabelTranscodes": "Chuyển mã",
-    "LabelTranscodingTempPathHelp": "Chỉ định một đường dẫn tùy chỉnh cho các tệp chuyển mã được cung cấp cho máy khách. Để trống để sử dụng mặc định của máy chủ.",
+    "LabelTranscodingTempPathHelp": "Tùy chỉnh một đường dẫn cho các tệp chuyển mã để cung cấp cho máy khách. Để trống để dùng mặc định.",
     "LabelTranscodePath": "Đường dẫn chuyển mã",
     "LabelTrackNumber": "Số bản ghi",
     "LabelTitle": "Tiêu đề",
@@ -1271,7 +1271,7 @@
     "Transcoding": "Chuyển mã",
     "Trailers": "Đoạn giới thiệu",
     "TabAccess": "Truy cập",
-    "SystemDlnaProfilesHelp": "Cấu hình hệ thống ở chế độ chỉ đọc. Thay đổi cấu hình hệ thống sẽ được lưu vào cấu hình tùy chỉnh mới.",
+    "SystemDlnaProfilesHelp": "Cấu hình hệ thống là chỉ đọc. Thay đổi cấu hình hệ thống sẽ được lưu vào cấu hình tùy chỉnh mới.",
     "Sports": "Thể thao",
     "SpecialFeatures": "Các tính năng đặc biệt",
     "SortName": "Sắp xếp tên",
@@ -1322,7 +1322,7 @@
     "UnsupportedPlayback": "Jellyfin không thể giải mã nội dung bảo vệ DRM nhưng sẽ cố gắng thử với tất cả nội dung, bao gồm cả các tiêu đề được bảo vệ. Một số tệp có thể xuất hiện toàn màu đen do mã hóa hoặc tính năng không được hỗ trợ, chẳng hạn như tiêu đề tương tác.",
     "EnableBlurHashHelp": "Hình ảnh đang được tải sẽ được hiển thị với một trình giữ chỗ duy nhất.",
     "ButtonPlayer": "Trình Phát",
-    "LabelOpenclDeviceHelp": "Đây là thiết bị OpenCL dùng để chỉnh tông màu. Phía bên trái của dấu chấm là số nền tảng và phía bên phải là số thiết bị trên nền tảng. Mặc định là 0.0. Bắt buộc tệp ứng dụng FFmpeg phải có tính năng tăng tốc phần cứng OpenCL.",
+    "LabelOpenclDeviceHelp": "Đây là thiết bị OpenCL dùng để chỉnh tông màu. Phía bên trái của dấu chấm là số nền tảng và phía bên phải là số thiết bị trên nền tảng. Mặc định là 0.0. Cần có tệp ứng dụng FFmpeg chứa phương pháp tăng tốc phần cứng OpenCL.",
     "LabelMaxMuxingQueueSizeHelp": "Số gói tối đa có thể được lưu vào bộ đệm trong khi chờ tất cả các luồng khởi tạo. Hãy thử tăng lên nếu bạn vẫn gặp lỗi \"Quá nhiều gói được lưu vào bộ đệm cho luồng đầu ra\" trong nhật ký FFmpeg. Giá trị đề xuất là 2048.",
     "ClearQueue": "Xóa hàng đợi",
     "LabelTonemappingParamHelp": "Điều chỉnh thuật toán ánh xạ tông màu. Các giá trị được đề xuất và mặc định là NaN. Nói chung là để trống.",
@@ -1427,7 +1427,7 @@
     "HeaderDeleteDevices": "Xóa Tất Cả Thiết Bị",
     "DeleteDevicesConfirmation": "Bạn có chắc muốn xóa hết các thiết bị không? Tất cả các phiên khác sẽ được đăng xuất. Thiết bị sẽ xuất hiện lại vào lần tiếp theo khi người dùng đăng nhập.",
     "DeleteAll": "Xóa Hết",
-    "EnableFallbackFontHelp": "Bật phông chữ thay thế tùy chỉnh. Điều này có thể tránh sự cố hiển thị phụ đề không chính xác.",
+    "EnableFallbackFontHelp": "Bật phông chữ thay thế tùy chỉnh. Nó có thể tránh lỗi kết xuất phụ đề không chính xác.",
     "EnableFallbackFont": "Bật phông chữ dự phòng",
     "LabelFallbackFontPathHelp": "Những phông chữ này được một số máy khách sử dụng để hiển thị phụ đề. Vui lòng tham khảo tài liệu để biết thêm thông tin.",
     "LabelFallbackFontPath": "Đường dẫn thư mục phông chữ dự phòng",
@@ -1665,7 +1665,7 @@
     "VideoRangeTypeNotSupported": "Không hỗ trợ loại dải động của video",
     "Interview": "Phỏng vấn",
     "Sample": "Mẫu",
-    "Trailer": "",
+    "Trailer": "Đoạn giới thiệu",
     "TypeOptionPluralVideo": "Videos",
     "ButtonSpace": "Cách",
     "ButtonBackspace": "Xóa",
@@ -1722,7 +1722,7 @@
     "EnableAudioNormalization": "Chuẩn hóa âm thanh",
     "GetThePlugin": "Nhận phần bổ sung",
     "Notifications": "Thông báo",
-    "NotificationsMovedMessage": "Chức năng thông báo đã chuyển sang plugin Webhook.",
+    "NotificationsMovedMessage": "Chức năng thông báo đã được chuyển sang plugin Webhook.",
     "LabelEnableLUFSScan": "Bật tính năng quét LUFS",
     "LabelEnableLUFSScanHelp": "Khách hàng có thể bình thường hóa việc phát lại âm thanh để có được âm lượng như nhau trên các bản nhạc. Điều này sẽ khiến việc quét thư viện lâu hơn và tốn nhiều tài nguyên hơn.",
     "PasswordRequiredForAdmin": "Cần có mật khẩu cho tài khoản quản trị viên.",
@@ -1761,13 +1761,14 @@
     "LabelSelectAudioNormalization": "Chuẩn Hóa Âm Thanh",
     "SearchResultsEmpty": "Rất tiếc! Không có kết quả tìm thấy cho \"{0}\"",
     "HeaderAllRecordings": "Tất Cả Bản Ghi",
-    "LabelTrackGain": "Chỉnh Nhạc",
+    "LabelTrackGain": "Điều Chỉnh Nhạc",
     "GridView": "Xem Lưới",
     "ListView": "Xem Danh Sách",
-    "SelectAudioNormalizationHelp": "Chỉnh nhạc - điều chỉnh âm lượng của mỗi bản nhạc để chúng phát lại với cùng một độ to. Chỉnh Album - điều chỉnh âm lượng của tất cả các bản nhạc trong một album, giữ nguyên dải động của album.",
+    "SelectAudioNormalizationHelp": "Điều chỉnh nhạc - điều chỉnh âm lượng của mỗi bản nhạc để chúng phát lại với cùng một độ to. Điều chỉnh album - điều chỉnh âm lượng tất cả bản nhạc trong album, giữ nguyên dải động của album.",
-    "LabelAlbumGain": "Chỉnh Album",
+    "LabelAlbumGain": "Điều Chỉnh Album",
     "LabelSegmentKeepSecondsHelp": "Thời gian tính bằng giây mà các phân đoạn cần được giữ lại trước khi chúng bị ghi đè. Phải lớn hơn \"Throle after\". Chỉ hoạt động nếu tính năng xóa phân đoạn được bật.",
     "MenuClose": "Đóng Menu",
     "MenuOpen": "Mở Menu",
-    "UserMenu": "Menu Người Dùng"
+    "UserMenu": "Menu Người Dùng",
+    "LogLevel.Trace": "Dấu vết"
 }

src/strings/zh-cn.json

@@ -272,7 +272,7 @@
     "HeaderImageSettings": "图片设置",
     "HeaderInstall": "安装",
     "HeaderInstantMix": "速成合辑",
-    "HeaderKodiMetadataHelp": "要启用或禁用 NFO 元数据，请编辑库并找到“元数据保护程序”部分。",
+    "HeaderKodiMetadataHelp": "要启用或禁用 NFO 元数据，请编辑库并找到“元数据储存方式”部分。",
     "HeaderLatestEpisodes": "新增剧集",
     "HeaderLatestMedia": "新增媒体",
     "HeaderLatestMovies": "新增电影",

src/strings/zh-tw.json

@@ -264,7 +264,7 @@
     "ButtonMore": "更多",
     "ButtonNetwork": "網路",
     "ButtonNextTrack": "下一首",
-    "ButtonOpen": "開",
+    "ButtonOpen": "開啟",
     "ButtonParentalControl": "家長控制",
     "ButtonPause": "暫停",
     "ButtonPreviousTrack": "上一首",

webpack.common.js

@@ -47,6 +47,10 @@ const config = {
     },
     plugins: [
         new DefinePlugin({
+            __JF_BUILD_VERSION__: JSON.stringify(
+                process.env.WEBPACK_SERVE ?
+                    'Dev Server' :
+                    process.env.JELLYFIN_VERSION || 'Release'),
             __USE_SYSTEM_FONTS__: JSON.stringify(!!process.env.USE_SYSTEM_FONTS),
             __WEBPACK_SERVE__: JSON.stringify(!!process.env.WEBPACK_SERVE)
         }),
@@ -204,6 +208,7 @@ const config = {
                     path.resolve(__dirname, 'node_modules/screenfull'),
                     path.resolve(__dirname, 'node_modules/ssr-window'),
                     path.resolve(__dirname, 'node_modules/swiper'),
+                    path.resolve(__dirname, 'node_modules/usehooks-ts'),
                     path.resolve(__dirname, 'src')
                 ],
                 use: [{