Merge pull request #2683 from thornbill/react

Add react support

src/components/alphaPicker/AlphaPickerComponent.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+
+import AlphaPicker from './alphaPicker';
+
+// React compatibility wrapper component for alphaPicker.js
+const AlphaPickerComponent = ({ onAlphaPicked = () => {} }) => {
+    const [ alphaPicker, setAlphaPicker ] = useState(null);
+    const element = useRef(null);
+
+    useEffect(() => {
+        setAlphaPicker(new AlphaPicker({
+            element: element.current,
+            mode: 'keyboard'
+        }));
+
+        element.current?.addEventListener('alphavalueclicked', onAlphaPicked);
+
+        return () => {
+            alphaPicker?.destroy();
+        };
+    }, []);
+
+    return (
+        <div
+            ref={element}
+            className='alphaPicker align-items-center'
+        />
+    );
+};
+
+AlphaPickerComponent.propTypes = {
+    onAlphaPicked: PropTypes.func
+};
+
+export default AlphaPickerComponent;

src/components/appRouter.js

@@ -11,6 +11,7 @@ import viewManager from './viewManager/viewManager';
 import Dashboard from '../scripts/clientUtils';
 import ServerConnections from './ServerConnections';
 import alert from './alert';
+import reactControllerFactory from './reactControllerFactory';
 
 class AppRouter {
     allRoutes = [];
@@ -341,7 +342,9 @@ class AppRouter {
             this.sendRouteToViewManager(ctx, next, route, controllerFactory);
         };
 
-        if (route.controller) {
+        if (route.pageComponent) {
+            onInitComplete(reactControllerFactory);
+        } else if (route.controller) {
             import('../controllers/' + route.controller).then(onInitComplete);
         } else {
             onInitComplete();
@@ -373,6 +376,7 @@ class AppRouter {
             fullscreen: route.fullscreen,
             controllerFactory: controllerFactory,
             options: {
+                pageComponent: route.pageComponent,
                 supportsThemeMedia: route.supportsThemeMedia || false,
                 enableMediaControl: route.enableMediaControl !== false
             },

src/components/pages/SearchPage.js

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import SearchFields from '../search/SearchFields';
+import SearchResults from '../search/SearchResults';
+import SearchSuggestions from '../search/SearchSuggestions';
+import LiveTVSearchResults from '../search/LiveTVSearchResults';
+
+const SearchPage = ({ serverId, parentId, collectionType }) => {
+    const [ query, setQuery ] = useState(null);
+
+    return (
+        <>
+            <SearchFields onSearch={setQuery} />
+            {!query &&
+                <SearchSuggestions
+                    serverId={serverId || ApiClient.serverId()}
+                    parentId={parentId}
+                />
+            }
+            <SearchResults
+                serverId={serverId || ApiClient.serverId()}
+                parentId={parentId}
+                collectionType={collectionType}
+                query={query}
+            />
+            <LiveTVSearchResults
+                serverId={serverId || ApiClient.serverId()}
+                parentId={parentId}
+                collectionType={collectionType}
+                query={query}
+            />
+        </>
+    );
+};
+
+SearchPage.propTypes = {
+    serverId: PropTypes.string,
+    parentId: PropTypes.string,
+    collectionType: PropTypes.string
+};
+
+export default SearchPage;

src/components/reactControllerFactory.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export default (view, params, { detail }) => {
+    if (detail.options?.pageComponent) {
+        // Fetch and render the page component to the view
+        import(/* webpackChunkName: "[request]" */ `./pages/${detail.options.pageComponent}`)
+            .then(({ default: component }) => {
+                ReactDOM.render(React.createElement(component, params), view);
+            });
+
+        // Unmount component when view is destroyed
+        view.addEventListener('viewdestroy', () => {
+            ReactDOM.unmountComponentAtNode(view);
+        });
+    }
+};

src/components/search/LiveTVSearchResults.js

@@ -0,0 +1,191 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+import globalize from '../../scripts/globalize';
+import ServerConnections from '../ServerConnections';
+import SearchResultsRow from './SearchResultsRow';
+
+const CARD_OPTIONS = {
+    preferThumb: true,
+    inheritThumb: false,
+    showParentTitleOrTitle: true,
+    showTitle: false,
+    coverImage: true,
+    overlayMoreButton: true,
+    showAirTime: true,
+    showAirDateTime: true,
+    showChannelName: true
+};
+
+/*
+ * React component to display search result rows for live tv library search
+ */
+const LiveTVSearchResults = ({ serverId, parentId, collectionType, query }) => {
+    const [ movies, setMovies ] = useState([]);
+    const [ episodes, setEpisodes ] = useState([]);
+    const [ sports, setSports ] = useState([]);
+    const [ kids, setKids ] = useState([]);
+    const [ news, setNews ] = useState([]);
+    const [ programs, setPrograms ] = useState([]);
+    const [ channels, setChannels ] = useState([]);
+
+    const getDefaultParameters = () => ({
+        ParentId: parentId,
+        searchTerm: query,
+        Limit: 24,
+        Fields: 'PrimaryImageAspectRatio,CanDelete,BasicSyncInfo,MediaSourceCount',
+        Recursive: true,
+        EnableTotalRecordCount: false,
+        ImageTypeLimit: 1,
+        IncludePeople: false,
+        IncludeMedia: false,
+        IncludeGenres: false,
+        IncludeStudios: false,
+        IncludeArtists: false
+    });
+
+    // FIXME: This query does not support Live TV filters
+    const fetchItems = (apiClient, params = {}) => apiClient?.getItems(
+        apiClient?.getCurrentUserId(),
+        {
+            ...getDefaultParameters(),
+            IncludeMedia: true,
+            ...params
+        }
+    );
+
+    const isLiveTV = () => collectionType === 'livetv';
+
+    useEffect(() => {
+        // Reset state
+        setMovies([]);
+        setEpisodes([]);
+        setSports([]);
+        setKids([]);
+        setNews([]);
+        setPrograms([]);
+        setChannels([]);
+
+        if (query && isLiveTV()) {
+            const apiClient = ServerConnections.getApiClient(serverId);
+
+            // Movies row
+            fetchItems(apiClient, {
+                IncludeItemTypes: 'LiveTvProgram',
+                IsMovie: true,
+                IsSeries: false,
+                IsSports: false,
+                IsKids: false,
+                IsNews: false
+            }).then(result => setMovies(result.Items));
+            // Episodes row
+            fetchItems(apiClient, {
+                IncludeItemTypes: 'LiveTvProgram',
+                IsMovie: false,
+                IsSeries: true,
+                IsSports: false,
+                IsKids: false,
+                IsNews: false
+            }).then(result => setEpisodes(result.Items));
+            // Sports row
+            fetchItems(apiClient, {
+                IncludeItemTypes: 'LiveTvProgram',
+                IsMovie: false,
+                IsSeries: false,
+                IsSports: true,
+                IsKids: false,
+                IsNews: false
+            }).then(result => setSports(result.Items));
+            // Kids row
+            fetchItems(apiClient, {
+                IncludeItemTypes: 'LiveTvProgram',
+                IsMovie: false,
+                IsSeries: false,
+                IsSports: false,
+                IsKids: true,
+                IsNews: false
+            }).then(result => setKids(result.Items));
+            // News row
+            fetchItems(apiClient, {
+                IncludeItemTypes: 'LiveTvProgram',
+                IsMovie: false,
+                IsSeries: false,
+                IsSports: false,
+                IsKids: false,
+                IsNews: true
+            }).then(result => setNews(result.Items));
+            // Programs row
+            fetchItems(apiClient, {
+                IncludeItemTypes: 'LiveTvProgram',
+                IsMovie: false,
+                IsSeries: false,
+                IsSports: false,
+                IsKids: false,
+                IsNews: false
+            }).then(result => setPrograms(result.Items));
+            // Channels row
+            fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
+                .then(result => setChannels(result.Items));
+        }
+    }, [ query ]);
+
+    return (
+        <div
+            className={classNames(
+                'searchResults',
+                'padded-bottom-page',
+                'padded-top',
+                { 'hide': !query || !isLiveTV() }
+            )}
+        >
+            <SearchResultsRow
+                title={globalize.translate('Movies')}
+                items={movies}
+                cardOptions={{
+                    ...CARD_OPTIONS,
+                    shape: 'overflowPortrait'
+                }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Episodes')}
+                items={episodes}
+                cardOptions={CARD_OPTIONS}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Sports')}
+                items={sports}
+                cardOptions={CARD_OPTIONS}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Kids')}
+                items={kids}
+                cardOptions={CARD_OPTIONS}
+            />
+            <SearchResultsRow
+                title={globalize.translate('News')}
+                items={news}
+                cardOptions={CARD_OPTIONS}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Programs')}
+                items={programs}
+                cardOptions={CARD_OPTIONS}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Channels')}
+                items={channels}
+                cardOptions={{ shape: 'square' }}
+            />
+        </div>
+    );
+};
+
+LiveTVSearchResults.propTypes = {
+    serverId: PropTypes.string,
+    parentId: PropTypes.string,
+    collectionType: PropTypes.string,
+    query: PropTypes.string
+};
+
+export default LiveTVSearchResults;

src/components/search/SearchFields.js

@@ -0,0 +1,90 @@
+import debounce from 'lodash-es/debounce';
+import PropTypes from 'prop-types';
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import AlphaPicker from '../alphaPicker/AlphaPickerComponent';
+import globalize from '../../scripts/globalize';
+
+import 'material-design-icons-iconfont';
+
+import '../../elements/emby-input/emby-input';
+import '../../assets/css/flexstyles.scss';
+import './searchfields.scss';
+import layoutManager from '../layoutManager';
+import browser from '../../scripts/browser';
+
+// There seems to be some compatibility issues here between
+// 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();
+
+const SearchFields = ({ onSearch = () => {} }) => {
+    const element = useRef(null);
+
+    const getSearchInput = () => element?.current?.querySelector('.searchfields-txtSearch');
+
+    const debouncedOnSearch = useMemo(() => debounce(onSearch, 400), []);
+
+    useEffect(() => {
+        getSearchInput()?.addEventListener('input', e => {
+            debouncedOnSearch(normalizeInput(e.target?.value));
+        });
+        getSearchInput()?.focus();
+
+        return () => {
+            debouncedOnSearch.cancel();
+        };
+    }, []);
+
+    const onAlphaPicked = e => {
+        const value = e.detail.value;
+        const searchInput = getSearchInput();
+
+        if (value === 'backspace') {
+            const currentValue = searchInput.value;
+            searchInput.value = currentValue.length ? currentValue.substring(0, currentValue.length - 1) : '';
+        } else {
+            searchInput.value += value;
+        }
+
+        searchInput.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+    };
+
+    return (
+        <div
+            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' />
+                <div
+                    className='inputContainer flex-grow'
+                    style={{ marginBottom: 0 }}
+                    dangerouslySetInnerHTML={createInputElement()}
+                />
+            </div>
+            {layoutManager.tv && !browser.tv &&
+                <AlphaPicker onAlphaPicked={onAlphaPicked} />
+            }
+        </div>
+    );
+};
+
+SearchFields.propTypes = {
+    onSearch: PropTypes.func
+};
+
+export default SearchFields;

src/components/search/SearchResults.js

@@ -0,0 +1,268 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+import globalize from '../../scripts/globalize';
+import ServerConnections from '../ServerConnections';
+import SearchResultsRow from './SearchResultsRow';
+
+/*
+ * React component to display search result rows for global search and non-live tv library search
+ */
+const SearchResults = ({ serverId, parentId, collectionType, query }) => {
+    const [ movies, setMovies ] = useState([]);
+    const [ shows, setShows ] = useState([]);
+    const [ episodes, setEpisodes ] = useState([]);
+    const [ videos, setVideos ] = useState([]);
+    const [ programs, setPrograms ] = useState([]);
+    const [ channels, setChannels ] = useState([]);
+    const [ playlists, setPlaylists ] = useState([]);
+    const [ artists, setArtists ] = useState([]);
+    const [ albums, setAlbums ] = useState([]);
+    const [ songs, setSongs ] = useState([]);
+    const [ photoAlbums, setPhotoAlbums ] = useState([]);
+    const [ photos, setPhotos ] = useState([]);
+    const [ audioBooks, setAudioBooks ] = useState([]);
+    const [ books, setBooks ] = useState([]);
+    const [ people, setPeople ] = useState([]);
+
+    const getDefaultParameters = () => ({
+        ParentId: parentId,
+        searchTerm: query,
+        Limit: 24,
+        Fields: 'PrimaryImageAspectRatio,CanDelete,BasicSyncInfo,MediaSourceCount',
+        Recursive: true,
+        EnableTotalRecordCount: false,
+        ImageTypeLimit: 1,
+        IncludePeople: false,
+        IncludeMedia: false,
+        IncludeGenres: false,
+        IncludeStudios: false,
+        IncludeArtists: false
+    });
+
+    const fetchArtists = (apiClient, params = {}) => apiClient?.getArtists(
+        apiClient?.getCurrentUserId(),
+        {
+            ...getDefaultParameters(),
+            IncludeArtists: true,
+            ...params
+        }
+    );
+
+    const fetchItems = (apiClient, params = {}) => apiClient?.getItems(
+        apiClient?.getCurrentUserId(),
+        {
+            ...getDefaultParameters(),
+            IncludeMedia: true,
+            ...params
+        }
+    );
+
+    const fetchPeople = (apiClient, params = {}) => apiClient?.getPeople(
+        apiClient?.getCurrentUserId(),
+        {
+            ...getDefaultParameters(),
+            IncludePeople: true,
+            ...params
+        }
+    );
+
+    const isMovies = () => collectionType === 'movies';
+
+    const isMusic = () => collectionType === 'music';
+
+    const isTVShows = () => collectionType === 'tvshows' || collectionType === 'tv';
+
+    useEffect(() => {
+        // Reset state
+        setMovies([]);
+        setShows([]);
+        setEpisodes([]);
+        setVideos([]);
+        setPrograms([]);
+        setChannels([]);
+        setPlaylists([]);
+        setArtists([]);
+        setAlbums([]);
+        setSongs([]);
+        setPhotoAlbums([]);
+        setPhotos([]);
+        setAudioBooks([]);
+        setBooks([]);
+        setPeople([]);
+
+        if (query) {
+            const apiClient = ServerConnections.getApiClient(serverId);
+
+            // Movie libraries
+            if (!collectionType || isMovies()) {
+                // Movies row
+                fetchItems(apiClient, { IncludeItemTypes: 'Movie' })
+                    .then(result => setMovies(result.Items));
+            }
+
+            // TV Show libraries
+            if (!collectionType || isTVShows()) {
+                // Shows row
+                fetchItems(apiClient, { IncludeItemTypes: 'Series' })
+                    .then(result => setShows(result.Items));
+                // Episodes row
+                fetchItems(apiClient, { IncludeItemTypes: 'Episode' })
+                    .then(result => setEpisodes(result.Items));
+            }
+
+            // People are included for Movies and TV Shows
+            if (!collectionType || isMovies() || isTVShows()) {
+                // People row
+                fetchPeople(apiClient).then(result => setPeople(result.Items));
+            }
+
+            // Music libraries
+            if (!collectionType || isMusic()) {
+                // Playlists row
+                fetchItems(apiClient, { IncludeItemTypes: 'Playlist' })
+                    .then(results => setPlaylists(results.Items));
+                // Artists row
+                fetchArtists(apiClient).then(result => setArtists(result.Items));
+                // Albums row
+                fetchItems(apiClient, { IncludeItemTypes: 'MusicAlbum' })
+                    .then(result => setAlbums(result.Items));
+                // Songs row
+                fetchItems(apiClient, { IncludeItemTypes: 'Audio' })
+                    .then(result => setSongs(result.Items));
+            }
+
+            // Other libraries do not support in-library search currently
+            if (!collectionType) {
+                // Videos row
+                fetchItems(apiClient, {
+                    MediaTypes: 'Video',
+                    ExcludeItemTypes: 'Movie,Episode,TvChannel'
+                }).then(result => setVideos(result.Items));
+                // Programs row
+                fetchItems(apiClient, { IncludeItemTypes: 'LiveTvProgram' })
+                    .then(result => setPrograms(result.Items));
+                // Channels row
+                fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
+                    .then(result => setChannels(result.Items));
+                // Photo Albums row
+                fetchItems(apiClient, { IncludeItemTypes: 'PhotoAlbum' })
+                    .then(results => setPhotoAlbums(results.Items));
+                // Photos row
+                fetchItems(apiClient, { IncludeItemTypes: 'Photo' })
+                    .then(results => setPhotos(results.Items));
+                // Audio Books row
+                fetchItems(apiClient, { IncludeItemTypes: 'AudioBook' })
+                    .then(results => setAudioBooks(results.Items));
+                // Books row
+                fetchItems(apiClient, { IncludeItemTypes: 'Book' })
+                    .then(results => setBooks(results.Items));
+            }
+        }
+    }, [ query ]);
+
+    return (
+        <div
+            className={classNames(
+                'searchResults',
+                'padded-bottom-page',
+                'padded-top',
+                { 'hide': !query || collectionType === 'livetv' }
+            )}
+        >
+            <SearchResultsRow
+                title={globalize.translate('Movies')}
+                items={movies}
+                cardOptions={{ showYear: true }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Shows')}
+                items={shows}
+                cardOptions={{ showYear: true }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Episodes')}
+                items={episodes}
+                cardOptions={{
+                    coverImage: true,
+                    showParentTitle: true
+                }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('HeaderVideos')}
+                items={videos}
+                cardOptions={{ showParentTitle: true }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Programs')}
+                items={programs}
+                cardOptions={{
+                    preferThumb: true,
+                    inheritThumb: false,
+                    showParentTitleOrTitle: true,
+                    showTitle: false,
+                    coverImage: true,
+                    overlayMoreButton: true,
+                    showAirTime: true,
+                    showAirDateTime: true,
+                    showChannelName: true
+                }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Channels')}
+                items={channels}
+                cardOptions={{ shape: 'square' }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Playlists')}
+                items={playlists}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Artists')}
+                items={artists}
+                cardOptions={{ coverImage: true }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Albums')}
+                items={albums}
+                cardOptions={{ showParentTitle: true }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Songs')}
+                items={songs}
+                cardOptions={{ showParentTitle: true }}
+            />
+            <SearchResultsRow
+                title={globalize.translate('HeaderPhotoAlbums')}
+                items={photoAlbums}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Photos')}
+                items={photos}
+            />
+            <SearchResultsRow
+                title={globalize.translate('HeaderAudioBooks')}
+                items={audioBooks}
+            />
+            <SearchResultsRow
+                title={globalize.translate('Books')}
+                items={books}
+            />
+            <SearchResultsRow
+                title={globalize.translate('People')}
+                items={people}
+                cardOptions={{ coverImage: true }}
+            />
+        </div>
+    );
+};
+
+SearchResults.propTypes = {
+    serverId: PropTypes.string,
+    parentId: PropTypes.string,
+    collectionType: PropTypes.string,
+    query: PropTypes.string
+};
+
+export default SearchResults;

src/components/search/SearchResultsRow.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef } from 'react';
+
+import cardBuilder from '../cardbuilder/cardBuilder';
+
+import '../../elements/emby-scroller/emby-scroller';
+import '../../elements/emby-itemscontainer/emby-itemscontainer';
+
+// There seems to be some compatibility issues here between
+// React and our legacy web components, so we need to inject
+// them as an html string for now =/
+const createScroller = ({ title = '' }) => ({
+    __html: `<h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${title}</h2>
+    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
+    <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
+</div>`
+});
+
+const SearchResultsRow = ({ title, items = [], cardOptions = {} }) => {
+    const element = useRef(null);
+
+    useEffect(() => {
+        cardBuilder.buildCards(items, {
+            itemsContainer: element.current?.querySelector('.itemsContainer'),
+            parentContainer: element.current,
+            shape: 'autooverflow',
+            scalable: true,
+            showTitle: true,
+            overlayText: false,
+            centerText: true,
+            allowBottomPadding: false,
+            ...cardOptions
+        });
+    }, [ items ]);
+
+    return (
+        <div
+            ref={element}
+            className='verticalSection'
+            dangerouslySetInnerHTML={createScroller({ title })}
+        />
+    );
+};
+
+SearchResultsRow.propTypes = {
+    title: PropTypes.string,
+    items: PropTypes.array,
+    cardOptions: PropTypes.object
+};
+
+export default SearchResultsRow;

src/components/search/SearchSuggestions.js

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+import { appRouter } from '../appRouter';
+import globalize from '../../scripts/globalize';
+import ServerConnections from '../ServerConnections';
+
+import '../../elements/emby-button/emby-button';
+
+// There seems to be some compatibility issues here between
+// React and our legacy web components, so we need to inject
+// them as an html string for now =/
+const createSuggestionLink = ({name, href}) => ({
+    __html: `<a
+    is='emby-linkbutton'
+    class='button-link'
+    style='display: inline-block; padding: 0.5em 1em;'
+    href='${href}'
+>${name}</a>`
+});
+
+const SearchSuggestions = ({ serverId, parentId }) => {
+    const [ suggestions, setSuggestions ] = useState([]);
+
+    useEffect(() => {
+        const apiClient = ServerConnections.getApiClient(serverId);
+
+        apiClient.getItems(apiClient.getCurrentUserId(), {
+            SortBy: 'IsFavoriteOrLiked,Random',
+            IncludeItemTypes: 'Movie,Series,MusicArtist',
+            Limit: 20,
+            Recursive: true,
+            ImageTypeLimit: 0,
+            EnableImages: false,
+            ParentId: parentId,
+            EnableTotalRecordCount: false
+        }).then(result => setSuggestions(result.Items));
+    }, []);
+
+    return (
+        <div
+            className='verticalSection searchSuggestions'
+            style={{ textAlign: 'center' }}
+        >
+            <div>
+                <h2 className='sectionTitle padded-left padded-right'>
+                    {globalize.translate('Suggestions')}
+                </h2>
+            </div>
+
+            <div className='searchSuggestionsList padded-left padded-right'>
+                {suggestions.map(item => (
+                    <div
+                        key={`suggestion-${item.Id}`}
+                        dangerouslySetInnerHTML={createSuggestionLink({
+                            name: item.Name,
+                            href: appRouter.getRouteUrl(item)
+                        })}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+SearchSuggestions.propTypes = {
+    parentId: PropTypes.string,
+    serverId: PropTypes.string
+};
+
+export default SearchSuggestions;

src/components/search/searchfields.js

@@ -1,115 +0,0 @@
-import layoutManager from '../layoutManager';
-import globalize from '../../scripts/globalize';
-import { Events } from 'jellyfin-apiclient';
-import browser from '../../scripts/browser';
-import AlphaPicker from '../alphaPicker/alphaPicker';
-import '../../elements/emby-input/emby-input';
-import '../../assets/css/flexstyles.scss';
-import 'material-design-icons-iconfont';
-import './searchfields.scss';
-import template from './searchfields.template.html';
-
-/* eslint-disable indent */
-
-    function onSearchTimeout() {
-        const instance = this;
-        let value = instance.nextSearchValue;
-
-        value = (value || '').trim();
-        Events.trigger(instance, 'search', [value]);
-    }
-
-    function triggerSearch(instance, value) {
-        if (instance.searchTimeout) {
-            clearTimeout(instance.searchTimeout);
-        }
-
-        instance.nextSearchValue = value;
-        instance.searchTimeout = setTimeout(onSearchTimeout.bind(instance), 400);
-    }
-
-    function onAlphaValueClicked(e) {
-        const value = e.detail.value;
-        const searchFieldsInstance = this;
-
-        const txtSearch = searchFieldsInstance.options.element.querySelector('.searchfields-txtSearch');
-
-        if (value === 'backspace') {
-            const val = txtSearch.value;
-            txtSearch.value = val.length ? val.substring(0, val.length - 1) : '';
-        } else {
-            txtSearch.value += value;
-        }
-
-        txtSearch.dispatchEvent(new CustomEvent('input', {
-            bubbles: true
-        }));
-    }
-
-    function initAlphaPicker(alphaPickerElement, instance) {
-        instance.alphaPicker = new AlphaPicker({
-            element: alphaPickerElement,
-            mode: 'keyboard'
-        });
-
-        alphaPickerElement.addEventListener('alphavalueclicked', onAlphaValueClicked.bind(instance));
-    }
-
-    function onSearchInput(e) {
-        const value = e.target.value;
-        const searchFieldsInstance = this;
-        triggerSearch(searchFieldsInstance, value);
-    }
-
-    function embed(elem, instance) {
-        elem.innerHTML = globalize.translateHtml(template, 'core');
-
-        elem.classList.add('searchFields');
-
-        const txtSearch = elem.querySelector('.searchfields-txtSearch');
-
-        if (layoutManager.tv && !browser.tv) {
-            const alphaPickerElement = elem.querySelector('.alphaPicker');
-
-            elem.querySelector('.alphaPicker').classList.remove('hide');
-            initAlphaPicker(alphaPickerElement, instance);
-        }
-
-        txtSearch.addEventListener('input', onSearchInput.bind(instance));
-
-        instance.focus();
-    }
-
-class SearchFields {
-    constructor(options) {
-        this.options = options;
-        embed(options.element, this);
-    }
-    focus() {
-        this.options.element.querySelector('.searchfields-txtSearch').focus();
-    }
-    destroy() {
-        const options = this.options;
-        if (options) {
-            options.element.classList.remove('searchFields');
-        }
-        this.options = null;
-
-        const alphaPicker = this.alphaPicker;
-        if (alphaPicker) {
-            alphaPicker.destroy();
-        }
-        this.alphaPicker = null;
-
-        const searchTimeout = this.searchTimeout;
-        if (searchTimeout) {
-            clearTimeout(searchTimeout);
-        }
-        this.searchTimeout = null;
-        this.nextSearchValue = null;
-    }
-}
-
-export default SearchFields;
-
-/* eslint-enable indent */

src/components/search/searchfields.template.html

@@ -1,7 +0,0 @@
-<div class="searchFieldsInner flex align-items-center justify-content-center">
-    <span class="searchfields-icon material-icons search"></span>
-    <div class="inputContainer flex-grow" style="margin-bottom: 0;">
-        <input is="emby-input" class="searchfields-txtSearch" type="text" data-keyboard="true" placeholder="${Search}" autocomplete="off" maxlength="40" autofocus />
-    </div>
-</div>
-<div class="alphaPicker align-items-center hide"></div>

src/components/search/searchresults.js

@@ -1,624 +0,0 @@
-import layoutManager from '../layoutManager';
-import globalize from '../../scripts/globalize';
-import cardBuilder from '../cardbuilder/cardBuilder';
-import { appRouter } from '../appRouter';
-import '../../elements/emby-scroller/emby-scroller';
-import '../../elements/emby-itemscontainer/emby-itemscontainer';
-import '../../elements/emby-button/emby-button';
-import ServerConnections from '../ServerConnections';
-import template from './searchresults.template.html';
-
-/* eslint-disable indent */
-
-    function loadSuggestions(instance, context, apiClient) {
-        const options = {
-
-            SortBy: 'IsFavoriteOrLiked,Random',
-            IncludeItemTypes: 'Movie,Series,MusicArtist',
-            Limit: 20,
-            Recursive: true,
-            ImageTypeLimit: 0,
-            EnableImages: false,
-            ParentId: instance.options.parentId,
-            EnableTotalRecordCount: false
-        };
-
-        apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
-            if (instance.mode !== 'suggestions') {
-                result.Items = [];
-            }
-
-            const html = result.Items.map(function (i) {
-                const href = appRouter.getRouteUrl(i);
-
-                let itemHtml = '<div><a is="emby-linkbutton" class="button-link" style="display:inline-block;padding:.5em 1em;" href="' + href + '">';
-                itemHtml += i.Name;
-                itemHtml += '</a></div>';
-                return itemHtml;
-            }).join('');
-
-            const searchSuggestions = context.querySelector('.searchSuggestions');
-            searchSuggestions.querySelector('.searchSuggestionsList').innerHTML = html;
-
-            if (result.Items.length) {
-                searchSuggestions.classList.remove('hide');
-            }
-        });
-    }
-
-    function getSearchHints(instance, apiClient, query) {
-        if (!query.searchTerm) {
-            return Promise.resolve({
-                SearchHints: []
-            });
-        }
-
-        let allowSearch = true;
-
-        const queryIncludeItemTypes = query.IncludeItemTypes;
-
-        if (instance.options.collectionType === 'tvshows') {
-            if (query.IncludeArtists) {
-                allowSearch = false;
-            } else if (queryIncludeItemTypes === 'Movie' ||
-                queryIncludeItemTypes === 'LiveTvProgram' ||
-                queryIncludeItemTypes === 'MusicAlbum' ||
-                queryIncludeItemTypes === 'Audio' ||
-                queryIncludeItemTypes === 'Book' ||
-                queryIncludeItemTypes === 'AudioBook' ||
-                queryIncludeItemTypes === 'Playlist' ||
-                queryIncludeItemTypes === 'PhotoAlbum' ||
-                query.MediaTypes === 'Video' ||
-                query.MediaTypes === 'Photo') {
-                allowSearch = false;
-            }
-        } else if (instance.options.collectionType === 'movies') {
-            if (query.IncludeArtists) {
-                allowSearch = false;
-            } else if (queryIncludeItemTypes === 'Series' ||
-                queryIncludeItemTypes === 'Episode' ||
-                queryIncludeItemTypes === 'LiveTvProgram' ||
-                queryIncludeItemTypes === 'MusicAlbum' ||
-                queryIncludeItemTypes === 'Audio' ||
-                queryIncludeItemTypes === 'Book' ||
-                queryIncludeItemTypes === 'AudioBook' ||
-                queryIncludeItemTypes === 'Playlist' ||
-                queryIncludeItemTypes === 'PhotoAlbum' ||
-                query.MediaTypes === 'Video' ||
-                query.MediaTypes === 'Photo') {
-                allowSearch = false;
-            }
-        } else if (instance.options.collectionType === 'music') {
-            if (query.People) {
-                allowSearch = false;
-            } else if (queryIncludeItemTypes === 'Series' ||
-                queryIncludeItemTypes === 'Episode' ||
-                queryIncludeItemTypes === 'LiveTvProgram' ||
-                queryIncludeItemTypes === 'Movie') {
-                allowSearch = false;
-            }
-        } else if (instance.options.collectionType === 'livetv') {
-            if (query.IncludeArtists || query.IncludePeople) {
-                allowSearch = false;
-            } else if (queryIncludeItemTypes === 'Series' ||
-                queryIncludeItemTypes === 'Episode' ||
-                queryIncludeItemTypes === 'MusicAlbum' ||
-                queryIncludeItemTypes === 'Audio' ||
-                queryIncludeItemTypes === 'Book' ||
-                queryIncludeItemTypes === 'AudioBook' ||
-                queryIncludeItemTypes === 'PhotoAlbum' ||
-                queryIncludeItemTypes === 'Movie' ||
-                query.MediaTypes === 'Video' ||
-                query.MediaTypes === 'Photo') {
-                allowSearch = false;
-            }
-        }
-        if (queryIncludeItemTypes === 'NullType') {
-            allowSearch = false;
-        }
-
-        if (!allowSearch) {
-            return Promise.resolve({
-                SearchHints: []
-            });
-        }
-
-        // Convert the search hint query to a regular item query
-        if (apiClient.isMinServerVersion('3.4.1.31')) {
-            query.Fields = 'PrimaryImageAspectRatio,CanDelete,BasicSyncInfo,MediaSourceCount';
-            query.Recursive = true;
-            query.EnableTotalRecordCount = false;
-            query.ImageTypeLimit = 1;
-
-            let methodName = 'getItems';
-
-            if (!query.IncludeMedia) {
-                if (query.IncludePeople) {
-                    methodName = 'getPeople';
-                } else if (query.IncludeArtists) {
-                    methodName = 'getArtists';
-                }
-            }
-
-            return apiClient[methodName](apiClient.getCurrentUserId(), query);
-        }
-
-        query.UserId = apiClient.getCurrentUserId();
-
-        return apiClient.getSearchHints(query);
-    }
-
-    function search(instance, apiClient, context, value) {
-        if (value || layoutManager.tv) {
-            instance.mode = 'search';
-            context.querySelector('.searchSuggestions').classList.add('hide');
-        } else {
-            instance.mode = 'suggestions';
-            loadSuggestions(instance, context, apiClient);
-        }
-
-        if (instance.options.collectionType === 'livetv') {
-            searchType(instance, apiClient, {
-                searchTerm: value,
-                IncludePeople: false,
-                IncludeMedia: true,
-                IncludeGenres: false,
-                IncludeStudios: false,
-                IncludeArtists: false,
-                IncludeItemTypes: 'LiveTvProgram',
-                IsMovie: true,
-                IsKids: false,
-                IsNews: false
-
-            }, context, '.movieResults', {
-
-                preferThumb: true,
-                inheritThumb: false,
-                shape: (enableScrollX() ? 'overflowPortrait' : 'portrait'),
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                centerText: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true,
-                showAirTime: true,
-                showAirDateTime: true,
-                showChannelName: true
-            });
-        } else {
-            searchType(instance, apiClient, {
-                searchTerm: value,
-                IncludePeople: false,
-                IncludeMedia: true,
-                IncludeGenres: false,
-                IncludeStudios: false,
-                IncludeArtists: false,
-                IncludeItemTypes: 'Movie'
-
-            }, context, '.movieResults', {
-
-                showTitle: true,
-                overlayText: false,
-                centerText: true,
-                showYear: true
-            });
-        }
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'Series'
-
-        }, context, '.seriesResults', {
-
-            showTitle: true,
-            overlayText: false,
-            centerText: true,
-            showYear: true
-        });
-
-        if (instance.options.collectionType === 'livetv') {
-            searchType(instance, apiClient, {
-                searchTerm: value,
-                IncludePeople: false,
-                IncludeMedia: true,
-                IncludeGenres: false,
-                IncludeStudios: false,
-                IncludeArtists: false,
-                IncludeItemTypes: 'LiveTvProgram',
-                IsSeries: true,
-                IsSports: false,
-                IsKids: false,
-                IsNews: false
-
-            }, context, '.episodeResults', {
-
-                preferThumb: true,
-                inheritThumb: false,
-                shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-                showParentTitleOrTitle: true,
-                showTitle: false,
-                centerText: true,
-                coverImage: true,
-                overlayText: false,
-                overlayMoreButton: true,
-                showAirTime: true,
-                showAirDateTime: true,
-                showChannelName: true
-            });
-        } else {
-            searchType(instance, apiClient, {
-                searchTerm: value,
-                IncludePeople: false,
-                IncludeMedia: true,
-                IncludeGenres: false,
-                IncludeStudios: false,
-                IncludeArtists: false,
-                IncludeItemTypes: 'Episode'
-
-            }, context, '.episodeResults', {
-
-                coverImage: true,
-                showTitle: true,
-                showParentTitle: true
-            });
-        }
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            // NullType to hide
-            IncludeItemTypes: instance.options.collectionType === 'livetv' ? 'LiveTvProgram' : 'NullType',
-            IsSports: true
-
-        }, context, '.sportsResults', {
-
-            preferThumb: true,
-            inheritThumb: false,
-            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-            showParentTitleOrTitle: true,
-            showTitle: false,
-            centerText: true,
-            coverImage: true,
-            overlayText: false,
-            overlayMoreButton: true,
-            showAirTime: true,
-            showAirDateTime: true,
-            showChannelName: true
-
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            // NullType to hide
-            IncludeItemTypes: instance.options.collectionType === 'livetv' ? 'LiveTvProgram' : 'NullType',
-            IsKids: true
-
-        }, context, '.kidsResults', {
-
-            preferThumb: true,
-            inheritThumb: false,
-            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-            showParentTitleOrTitle: true,
-            showTitle: false,
-            centerText: true,
-            coverImage: true,
-            overlayText: false,
-            overlayMoreButton: true,
-            showAirTime: true,
-            showAirDateTime: true,
-            showChannelName: true
-
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            // NullType to hide
-            IncludeItemTypes: instance.options.collectionType === 'livetv' ? 'LiveTvProgram' : 'NullType',
-            IsNews: true
-
-        }, context, '.newsResults', {
-
-            preferThumb: true,
-            inheritThumb: false,
-            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-            showParentTitleOrTitle: true,
-            showTitle: false,
-            centerText: true,
-            coverImage: true,
-            overlayText: false,
-            overlayMoreButton: true,
-            showAirTime: true,
-            showAirDateTime: true,
-            showChannelName: true
-
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'LiveTvProgram',
-            IsMovie: instance.options.collectionType === 'livetv' ? false : null,
-            IsSeries: instance.options.collectionType === 'livetv' ? false : null,
-            IsSports: instance.options.collectionType === 'livetv' ? false : null,
-            IsKids: instance.options.collectionType === 'livetv' ? false : null,
-            IsNews: instance.options.collectionType === 'livetv' ? false : null
-
-        }, context, '.programResults', {
-
-            preferThumb: true,
-            inheritThumb: false,
-            shape: (enableScrollX() ? 'overflowBackdrop' : 'backdrop'),
-            showParentTitleOrTitle: true,
-            showTitle: false,
-            centerText: true,
-            coverImage: true,
-            overlayText: false,
-            overlayMoreButton: true,
-            showAirTime: true,
-            showAirDateTime: true,
-            showChannelName: true
-
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            MediaTypes: 'Video',
-            ExcludeItemTypes: 'Movie,Episode'
-
-        }, context, '.videoResults', {
-
-            showParentTitle: true,
-            showTitle: true,
-            overlayText: false,
-            centerText: true
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: true,
-            IncludeMedia: false,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false
-
-        }, context, '.peopleResults', {
-
-            coverImage: true,
-            showTitle: true
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: false,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: true
-
-        }, context, '.artistResults', {
-            coverImage: true,
-            showTitle: true
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'MusicAlbum'
-
-        }, context, '.albumResults', {
-
-            showParentTitle: true,
-            showTitle: true,
-            overlayText: false,
-            centerText: true
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'Audio'
-
-        }, context, '.songResults', {
-
-            showParentTitle: true,
-            showTitle: true,
-            overlayText: false,
-            centerText: true,
-            overlayPlayButton: true
-
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            MediaTypes: 'Photo'
-
-        }, context, '.photoResults', {
-
-            showParentTitle: false,
-            showTitle: true,
-            overlayText: false,
-            centerText: true
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'PhotoAlbum'
-
-        }, context, '.photoAlbumResults', {
-
-            showTitle: true,
-            overlayText: false,
-            centerText: true
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'Book'
-
-        }, context, '.bookResults', {
-
-            showTitle: true,
-            overlayText: false,
-            centerText: true
-
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'AudioBook'
-
-        }, context, '.audioBookResults', {
-
-            showTitle: true,
-            overlayText: false,
-            centerText: true
-        });
-
-        searchType(instance, apiClient, {
-            searchTerm: value,
-            IncludePeople: false,
-            IncludeMedia: true,
-            IncludeGenres: false,
-            IncludeStudios: false,
-            IncludeArtists: false,
-            IncludeItemTypes: 'Playlist'
-
-        }, context, '.playlistResults', {
-
-            showTitle: true,
-            overlayText: false,
-            centerText: true
-        });
-    }
-
-    function searchType(instance, apiClient, query, context, section, cardOptions) {
-        query.Limit = enableScrollX() ? 24 : 16;
-        query.ParentId = instance.options.parentId;
-
-        getSearchHints(instance, apiClient, query).then(function (result) {
-            populateResults(result, context, section, cardOptions);
-        });
-    }
-
-    function populateResults(result, context, section, cardOptions) {
-        section = context.querySelector(section);
-
-        const items = result.Items || result.SearchHints;
-
-        const itemsContainer = section.querySelector('.itemsContainer');
-
-        cardBuilder.buildCards(items, Object.assign({
-
-            itemsContainer: itemsContainer,
-            parentContainer: section,
-            shape: enableScrollX() ? 'autooverflow' : 'auto',
-            scalable: true,
-            overlayText: false,
-            centerText: true,
-            allowBottomPadding: !enableScrollX()
-
-        }, cardOptions || {}));
-    }
-
-    function enableScrollX() {
-        return true;
-    }
-
-    function replaceAll(originalString, strReplace, strWith) {
-        const reg = new RegExp(strReplace, 'ig');
-        return originalString.replace(reg, strWith);
-    }
-
-    function embed(elem, instance) {
-        let workingTemplate = template;
-        if (!enableScrollX()) {
-            workingTemplate = replaceAll(workingTemplate, 'data-horizontal="true"', 'data-horizontal="false"');
-            workingTemplate = replaceAll(workingTemplate, 'itemsContainer scrollSlider', 'itemsContainer scrollSlider vertical-wrap');
-        }
-
-        const html = globalize.translateHtml(workingTemplate, 'core');
-
-        elem.innerHTML = html;
-
-        elem.classList.add('searchResults');
-        instance.search('');
-    }
-
-class SearchResults {
-    constructor(options) {
-        this.options = options;
-        embed(options.element, this);
-    }
-    search(value) {
-        const apiClient = ServerConnections.getApiClient(this.options.serverId);
-
-        search(this, apiClient, this.options.element, value);
-    }
-    destroy() {
-        const options = this.options;
-        if (options) {
-            options.element.classList.remove('searchFields');
-        }
-        this.options = null;
-    }
-}
-
-export default SearchResults;
-
-/* eslint-enable indent */

src/components/search/searchresults.template.html

@@ -1,145 +0,0 @@
-<div class="hide verticalSection searchSuggestions" style="text-align:center;">
-
-    <div>
-        <h2 class="sectionTitle padded-left padded-right">${Suggestions}</h2>
-    </div>
-
-    <div class="searchSuggestionsList padded-left padded-right">
-    </div>
-</div>
-
-<div class="hide verticalSection movieResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Movies}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection seriesResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Shows}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection episodeResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Episodes}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection sportsResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Sports}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection kidsResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Kids}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection newsResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${News}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection programResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Programs}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection videoResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Videos}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection playlistResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Playlists}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection artistResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Artists}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection albumResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Albums}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection songResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Songs}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection photoAlbumResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${HeaderPhotoAlbums}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection photoResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Photos}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection audioBookResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${HeaderAudioBooks}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection bookResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${Books}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>
-
-<div class="hide verticalSection peopleResults">
-    <h2 class="sectionTitle sectionTitle-cards focuscontainer-x padded-left padded-right">${People}</h2>
-
-    <div is="emby-scroller" data-horizontal="true" data-centerfocus="card" class="padded-top-focusscale padded-bottom-focusscale">
-        <div is="emby-itemscontainer" class="focuscontainer-x itemsContainer scrollSlider"></div>
-    </div>
-</div>

src/components/viewManager/viewManager.js

@@ -21,9 +21,9 @@ viewContainer.setOnBeforeChange(function (newView, isRestored, options) {
         newView.initComplete = true;
 
         if (typeof options.controllerFactory === 'function') {
-            new options.controllerFactory(newView, eventDetail.detail.params);
+            new options.controllerFactory(newView, eventDetail.detail.params, eventDetail);
         } else if (options.controllerFactory && typeof options.controllerFactory.default === 'function') {
-            new options.controllerFactory.default(newView, eventDetail.detail.params);
+            new options.controllerFactory.default(newView, eventDetail.detail.params, eventDetail);
         }
 
         if (!options.controllerFactory || dispatchPageEvents) {