Merge pull request #4824 from GGProGaming/Search

Resolve null searches with return text | Loading circle in search

CONTRIBUTORS.md

@@ -70,6 +70,7 @@
  - [tehciolo](https://github.com/tehciolo)
  - [scampower3](https://github.com/scampower3)
  - [LittleBigOwI] (https://github.com/LittleBigOwI/)
+ - [Nate G](https://github.com/GGProGaming)
 
 # Emby Contributors
 

src/components/search/SearchResults.tsx

@@ -6,6 +6,7 @@ import React, { FunctionComponent, useCallback, useEffect, useState } from 'reac
 import globalize from '../../scripts/globalize';
 import ServerConnections from '../ServerConnections';
 import SearchResultsRow from './SearchResultsRow';
+import Loading from '../loading/LoadingComponent';
 
 type SearchResultsProps = {
     serverId?: string;
@@ -45,6 +46,7 @@ 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 getDefaultParameters = useCallback(() => ({
         ParentId: parentId,
@@ -114,99 +116,123 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
         setCollections([]);
 
         if (!query) {
+            setIsLoading(false);
             return;
         }
 
+        setIsLoading(true);
+
         const apiClient = ServerConnections.getApiClient(serverId);
+        const fetchPromises = [];
 
         // Movie libraries
         if (!collectionType || isMovies(collectionType)) {
+            fetchPromises.push(
                 // Movies row
                 fetchItems(apiClient, { IncludeItemTypes: 'Movie' })
                     .then(result => setMovies(result.Items))
-                .catch(() => setMovies([]));
+                    .catch(() => setMovies([]))
+            );
         }
 
         // TV Show libraries
         if (!collectionType || isTVShows(collectionType)) {
+            fetchPromises.push(
                 // Shows row
                 fetchItems(apiClient, { IncludeItemTypes: 'Series' })
                     .then(result => setShows(result.Items))
-                .catch(() => setShows([]));
+                    .catch(() => setShows([])),
                 // Episodes row
                 fetchItems(apiClient, { IncludeItemTypes: 'Episode' })
                     .then(result => setEpisodes(result.Items))
-                .catch(() => setEpisodes([]));
+                    .catch(() => setEpisodes([]))
+            );
         }
 
         // People are included for Movies and TV Shows
         if (!collectionType || isMovies(collectionType) || isTVShows(collectionType)) {
+            fetchPromises.push(
                 // People row
                 fetchPeople(apiClient)
                     .then(result => setPeople(result.Items))
-                .catch(() => setPeople([]));
+                    .catch(() => setPeople([]))
+            );
         }
 
         // Music libraries
         if (!collectionType || isMusic(collectionType)) {
+            fetchPromises.push(
                 // Playlists row
                 fetchItems(apiClient, { IncludeItemTypes: 'Playlist' })
                     .then(results => setPlaylists(results.Items))
-                .catch(() => setPlaylists([]));
+                    .catch(() => setPlaylists([])),
                 // Artists row
                 fetchArtists(apiClient)
                     .then(result => setArtists(result.Items))
-                .catch(() => setArtists([]));
+                    .catch(() => setArtists([])),
                 // Albums row
                 fetchItems(apiClient, { IncludeItemTypes: 'MusicAlbum' })
                     .then(result => setAlbums(result.Items))
-                .catch(() => setAlbums([]));
+                    .catch(() => setAlbums([])),
                 // Songs row
                 fetchItems(apiClient, { IncludeItemTypes: 'Audio' })
                     .then(result => setSongs(result.Items))
-                .catch(() => setSongs([]));
+                    .catch(() => setSongs([]))
+            );
         }
 
         // Other libraries do not support in-library search currently
         if (!collectionType) {
+            fetchPromises.push(
                 // Videos row
                 fetchItems(apiClient, {
                     MediaTypes: 'Video',
                     ExcludeItemTypes: 'Movie,Episode,TvChannel'
                 })
                     .then(result => setVideos(result.Items))
-                .catch(() => setVideos([]));
+                    .catch(() => setVideos([])),
                 // Programs row
                 fetchItems(apiClient, { IncludeItemTypes: 'LiveTvProgram' })
                     .then(result => setPrograms(result.Items))
-                .catch(() => setPrograms([]));
+                    .catch(() => setPrograms([])),
                 // Channels row
                 fetchItems(apiClient, { IncludeItemTypes: 'TvChannel' })
                     .then(result => setChannels(result.Items))
-                .catch(() => setChannels([]));
+                    .catch(() => setChannels([])),
                 // Photo Albums row
                 fetchItems(apiClient, { IncludeItemTypes: 'PhotoAlbum' })
                     .then(result => setPhotoAlbums(result.Items))
-                .catch(() => setPhotoAlbums([]));
+                    .catch(() => setPhotoAlbums([])),
                 // Photos row
                 fetchItems(apiClient, { IncludeItemTypes: 'Photo' })
                     .then(result => setPhotos(result.Items))
-                .catch(() => setPhotos([]));
+                    .catch(() => setPhotos([])),
                 // Audio Books row
                 fetchItems(apiClient, { IncludeItemTypes: 'AudioBook' })
                     .then(result => setAudioBooks(result.Items))
-                .catch(() => setAudioBooks([]));
+                    .catch(() => setAudioBooks([])),
                 // Books row
                 fetchItems(apiClient, { IncludeItemTypes: 'Book' })
                     .then(result => setBooks(result.Items))
-                .catch(() => setBooks([]));
+                    .catch(() => setBooks([])),
                 // Collections row
                 fetchItems(apiClient, { IncludeItemTypes: 'BoxSet' })
                     .then(result => setCollections(result.Items))
-                .catch(() => setCollections([]));
+                    .catch(() => setCollections([]))
+            );
         }
+        Promise.all(fetchPromises)
+            .then(() => {
+                setIsLoading(false); // Set loading to false when all fetch calls are done
+            })
+            .catch((error) => {
+                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]);
 
+    const allEmpty = [movies, shows, episodes, videos, programs, channels, playlists, artists, albums, songs, photoAlbums, photos, audioBooks, books, people, collections].every(arr => arr.length === 0);
+
     return (
         <div
             className={classNames(
@@ -216,6 +242,10 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
                 { 'hide': !query || collectionType === 'livetv' }
             )}
         >
+            {isLoading ? (
+                <Loading />
+            ) : (
+                <>
                     <SearchResultsRow
                         title={globalize.translate('Movies')}
                         items={movies}
@@ -303,6 +333,13 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
                         items={people}
                         cardOptions={{ coverImage: true }}
                     />
+
+                    {allEmpty && query && !isLoading && (
+                        <div className='sorry-text'>{globalize.translate('SearchResultsEmpty', query)}</div>
+                    )}
+                </>
+            )}
+
         </div>
     );
 };

src/components/search/searchfields.scss

@@ -9,3 +9,14 @@
     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/strings/en-us.json

@@ -1428,6 +1428,7 @@
     "SearchForMissingMetadata": "Search for missing metadata",
     "SearchForSubtitles": "Search for Subtitles",
     "SearchResults": "Search Results",
+    "SearchResultsEmpty": "Sorry! No results found for \"{0}\"",
     "Season": "Season",
     "SecondarySubtitles": "Secondary Subtitles",
     "SelectAdminUsername": "Please select a username for the admin account.",