Type search (#1353)

apps/photos/public/locales/en/translation.json

@@ -209,7 +209,8 @@
         "DATE": "Date",
         "FILE_NAME": "File name",
         "THING": "Content",
-        "FILE_CAPTION": "Description"
+        "FILE_CAPTION": "Description",
+        "FILE_TYPE": "File type"
     },
     "photos_count_zero": "No memories",
     "photos_count_one": "1 memory",
@@ -583,5 +584,12 @@
     "DOWNLOAD_COMPLETE": "Download complete",
     "DOWNLOADING_COLLECTION": "Downloading {{name}}",
     "DOWNLOAD_FAILED": "Download failed",
-    "DOWNLOAD_PROGRESS": "{{progress.current}} / {{progress.total}} files"
+    "DOWNLOAD_PROGRESS": "{{progress.current}} / {{progress.total}} files",
+    "CHRISTMAS": "Christmas",
+    "CHRISTMAS_EVE": "Christmas Eve",
+    "NEW_YEAR": "New Year",
+    "NEW_YEAR_EVE": "New Year's Eve",
+    "IMAGE": "Image",
+    "VIDEO": "Video",
+    "LIVE_PHOTO": "Live Photo"
 }

apps/photos/src/components/PhotoList.tsx

@@ -105,6 +105,15 @@ function getGapFromScreenEdge(width: number) {
     }
 }
 
+function getShrinkRatio(width: number, columns: number) {
+    return (
+        (width -
+            2 * getGapFromScreenEdge(width) -
+            (columns - 1) * GAP_BTW_TILES) /
+        (columns * IMAGE_CONTAINER_MAX_WIDTH)
+    );
+}
+
 const ListContainer = styled(Box)<{
     columns: number;
     shrinkRatio: number;
@@ -264,10 +273,10 @@ export function PhotoList({
 
     let skipMerge = false;
     if (columns < MIN_COLUMNS) {
-        columns = MIN_COLUMNS - 1;
+        columns = MIN_COLUMNS;
         skipMerge = true;
     }
-    const shrinkRatio = fittableColumns / columns;
+    const shrinkRatio = getShrinkRatio(width, columns);
     const listItemHeight =
         IMAGE_CONTAINER_MAX_HEIGHT * shrinkRatio + GAP_BTW_TILES;
 

apps/photos/src/components/Search/SearchBar/searchInput/index.tsx

@@ -27,6 +27,7 @@ import { Person, Thing, WordGroup } from 'types/machineLearning';
 import { t } from 'i18next';
 import memoize from 'memoize-one';
 import { LocationTagData } from 'types/entity';
+import { FILE_TYPE } from 'constants/file';
 
 interface Iprops {
     isOpen: boolean;
@@ -117,6 +118,10 @@ export default function SearchInput(props: Iprops) {
                 break;
             case SuggestionType.TEXT:
                 search = { text: selectedOption.value as WordGroup };
+                break;
+            case SuggestionType.FILE_TYPE:
+                search = { fileType: selectedOption.value as FILE_TYPE };
+                break;
         }
         props.updateSearch(search, {
             optionName: selectedOption.label,

apps/photos/src/pages/credentials/index.tsx

@@ -121,7 +121,8 @@ export default function Credentials() {
             );
             if (srpAttributes) {
                 setSrpAttributes(srpAttributes);
-                return;
+            } else {
+                router.push(PAGES.ROOT);
             }
         };
         main();

apps/photos/src/pages/gallery/index.tsx

@@ -523,6 +523,12 @@ export default function Gallery() {
                     if (search?.files && search.files.indexOf(item.id) === -1) {
                         return false;
                     }
+                    if (
+                        typeof search?.fileType !== 'undefined' &&
+                        search.fileType !== item.metadata.fileType
+                    ) {
+                        return false;
+                    }
                     return true;
                 }
 

apps/photos/src/services/searchService.ts

@@ -25,6 +25,7 @@ import { getUniqueFiles } from 'utils/file';
 import { getLatestEntities } from './entityService';
 import { LocationTag, LocationTagData, EntityType } from 'types/entity';
 import { addLogLine } from 'utils/logging';
+import { FILE_TYPE } from 'constants/file';
 
 const DIGITS = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
 
@@ -44,6 +45,7 @@ export const getAutoCompleteSuggestions =
                 return [];
             }
             const suggestions: Suggestion[] = [
+                ...getFileTypeSuggestion(searchPhrase),
                 ...getHolidaySuggestion(searchPhrase),
                 ...getYearSuggestion(searchPhrase),
                 ...getDateSuggestion(searchPhrase),
@@ -84,26 +86,47 @@ function convertSuggestionsToOptions(
 
     return previewImageAppendedOptions;
 }
+function getFileTypeSuggestion(searchPhrase: string): Suggestion[] {
+    return [
+        {
+            label: t('IMAGE'),
+            value: FILE_TYPE.IMAGE,
+            type: SuggestionType.FILE_TYPE,
+        },
+        {
+            label: t('VIDEO'),
+            value: FILE_TYPE.VIDEO,
+            type: SuggestionType.FILE_TYPE,
+        },
+        {
+            label: t('LIVE_PHOTO'),
+            value: FILE_TYPE.LIVE_PHOTO,
+            type: SuggestionType.FILE_TYPE,
+        },
+    ].filter((suggestion) =>
+        suggestion.label.toLowerCase().includes(searchPhrase)
+    );
+}
 
 function getHolidaySuggestion(searchPhrase: string): Suggestion[] {
     return [
         {
-            label: 'Christmas',
+            label: t('CHRISTMAS'),
             value: { month: 11, date: 25 },
             type: SuggestionType.DATE,
         },
         {
-            label: 'Christmas Eve',
+            label: t('CHRISTMAS_EVE'),
             value: { month: 11, date: 24 },
             type: SuggestionType.DATE,
         },
         {
-            label: 'New Year',
+            label: t('NEW_YEAR'),
             value: { month: 0, date: 1 },
             type: SuggestionType.DATE,
         },
         {
-            label: 'New Year Eve',
+            label: t('NEW_YEAR_EVE'),
             value: { month: 11, date: 31 },
             type: SuggestionType.DATE,
         },
@@ -353,6 +376,9 @@ function isSearchedFile(file: EnteFile, search: Search) {
     if (search?.text) {
         return search.text.files.indexOf(file.id) !== -1;
     }
+    if (typeof search?.fileType !== 'undefined') {
+        return search.fileType === file.metadata.fileType;
+    }
     return false;
 }
 
@@ -382,5 +408,7 @@ function convertSuggestionToSearchQuery(option: Suggestion): Search {
 
         case SuggestionType.THING:
             return { thing: option.value as Thing };
+        case SuggestionType.FILE_TYPE:
+            return { fileType: option.value as FILE_TYPE };
     }
 }

apps/photos/src/types/search/index.ts

@@ -2,6 +2,7 @@ import { Person, Thing, WordGroup } from 'types/machineLearning';
 import { IndexStatus } from 'types/machineLearning/ui';
 import { EnteFile } from 'types/file';
 import { LocationTagData } from 'types/entity';
+import { FILE_TYPE } from 'constants/file';
 
 export enum SuggestionType {
     DATE = 'DATE',
@@ -13,6 +14,7 @@ export enum SuggestionType {
     THING = 'THING',
     TEXT = 'TEXT',
     FILE_CAPTION = 'FILE_CAPTION',
+    FILE_TYPE = 'FILE_TYPE',
 }
 
 export interface DateValue {
@@ -31,7 +33,8 @@ export interface Suggestion {
         | IndexStatus
         | Thing
         | WordGroup
-        | LocationTagData;
+        | LocationTagData
+        | FILE_TYPE;
     hide?: boolean;
 }
 
@@ -43,6 +46,7 @@ export type Search = {
     person?: Person;
     thing?: Thing;
     text?: WordGroup;
+    fileType?: FILE_TYPE;
 };
 
 export type SearchResultSummary = {