[ENG-888] Media view should show current folder downward (#1437)

* Done but ugly

* layout

* Now with a select

---------

Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>

core/src/api/search.rs

@@ -121,6 +121,8 @@ struct FilePathFilterArgs {
 	#[specta(optional)]
 	path: Option<String>,
 	#[specta(optional)]
+	with_descendants: Option<bool>,
+	#[specta(optional)]
 	object: Option<ObjectFilterArgs>,
 	#[specta(optional)]
 	hidden: Option<bool>,
@@ -177,7 +179,15 @@ impl FilePathFilterArgs {
 					self.hidden.map(Some).map(hidden::equals),
 					directory_materialized_path_str
 						.map(Some)
-						.map(materialized_path::equals),
+						.map(|materialized_path| {
+							if let Some(true) = self.with_descendants {
+								materialized_path::starts_with(
+									materialized_path.unwrap_or_else(|| "/".into()),
+								)
+							} else {
+								materialized_path::equals(materialized_path)
+							}
+						}),
 					self.object.and_then(|obj| {
 						let params = obj.into_params();
 

core/src/preferences/library.rs

@@ -62,6 +62,7 @@ pub struct ExplorerSettings<TOrder> {
 	grid_item_size: Option<i32>,
 	media_columns: Option<i32>,
 	media_aspect_square: Option<bool>,
+	media_view_with_descendants: Option<bool>,
 	open_on_double_click: Option<DoubleClickAction>,
 	show_bytes_in_grid_view: Option<bool>,
 	col_visibility: Option<BTreeMap<String, bool>>,

interface/app/$libraryId/Explorer/OptionsPanel.tsx

@@ -121,7 +121,7 @@ export default () => {
 
 			<div>
 				<Subheading>Explorer</Subheading>
-				<div className="flex flex-row flex-wrap justify-between gap-1">
+				<div className="grid grid-cols-2 gap-y-1">
 					<RadixCheckbox
 						checked={layoutStore.showPathBar}
 						label="Show Path Bar"
@@ -159,7 +159,7 @@ export default () => {
 					{settings.layoutMode === 'media' && (
 						<RadixCheckbox
 							checked={settings.mediaAspectSquare}
-							label="Show square thumbnails"
+							label="Square Thumbnails"
 							name="mediaAspectSquare"
 							onCheckedChange={(value) => {
 								if (typeof value !== 'boolean') return;
@@ -171,6 +171,30 @@ export default () => {
 				</div>
 			</div>
 
+			{settings.layoutMode === 'media' && (
+				<div>
+					<Subheading>Media View Context</Subheading>
+					<Select
+						className="w-full"
+						value={
+							explorer.settingsStore.mediaViewWithDescendants ?
+							'withDescendants'
+							: 'withoutDescendants'
+						}
+						onChange={(value) => {
+
+							explorer.settingsStore.mediaViewWithDescendants = value === 'withDescendants';
+						}}
+					>
+						{mediaViewContextActions.options.map((option) => (
+							<SelectOption key={option.value} value={option.value}>
+								{option.description}
+							</SelectOption>
+						))}
+					</Select>
+				</div>
+			)}
+
 			<div>
 				<Subheading>Double click action</Subheading>
 				<Select
@@ -195,3 +219,8 @@ const doubleClickActions = z.union([
 	z.literal('openFile').describe('Open File'),
 	z.literal('quickPreview').describe('Quick Preview')
 ]);
+
+const mediaViewContextActions = z.union([
+	z.literal('withDescendants').describe('Current Directory With Descendants'),
+	z.literal('withoutDescendants').describe('Current Directory')
+]);

interface/app/$libraryId/Explorer/store.ts

@@ -76,6 +76,7 @@ export const createDefaultExplorerSettings = <TOrder extends Ordering>(args?: {
 		showHiddenFiles: false as boolean,
 		mediaColumns: 8 as number,
 		mediaAspectSquare: false as boolean,
+		mediaViewWithDescendants: true as boolean,
 		openOnDoubleClick: 'openFile' as DoubleClickAction,
 		colVisibility: {
 			name: true,

interface/app/$libraryId/location/$id.tsx

@@ -143,13 +143,17 @@ const useItems = ({
 
 	const explorerSettings = settings.useSettingsSnapshot();
 
-	const filter: FilePathFilterArgs = {
-		locationId,
-		...(explorerSettings.layoutMode === 'media'
-			? { object: { kind: [ObjectKindEnum.Image, ObjectKindEnum.Video] } }
-			: { path: path ?? '' }),
-		...(explorerSettings.showHiddenFiles ? {} : { hidden: false })
-	};
+	const filter: FilePathFilterArgs = { locationId, path: path ?? '' };
+
+	if (explorerSettings.layoutMode === 'media') {
+		filter.object = { kind: [ObjectKindEnum.Image, ObjectKindEnum.Video] };
+
+		if (explorerSettings.mediaViewWithDescendants)
+			filter.withDescendants = true;
+	}
+
+	if (!explorerSettings.showHiddenFiles)
+		filter.hidden = false;
 
 	const count = useLibraryQuery(['search.pathsCount', { filter }]);
 

packages/client/src/core.ts

@@ -157,7 +157,7 @@ export type ExplorerItem = { type: "Path"; has_local_thumbnail: boolean; thumbna
 
 export type ExplorerLayout = "grid" | "list" | "media"
 
-export type ExplorerSettings<TOrder> = { layoutMode: ExplorerLayout | null; gridItemSize: number | null; mediaColumns: number | null; mediaAspectSquare: boolean | null; openOnDoubleClick: DoubleClickAction | null; showBytesInGridView: boolean | null; colVisibility: { [key: string]: boolean } | null; colSizes: { [key: string]: number } | null; order?: TOrder | null; showHiddenFiles?: boolean }
+export type ExplorerSettings<TOrder> = { layoutMode: ExplorerLayout | null; gridItemSize: number | null; mediaColumns: number | null; mediaAspectSquare: boolean | null; mediaViewWithDescendants: boolean | null; openOnDoubleClick: DoubleClickAction | null; showBytesInGridView: boolean | null; colVisibility: { [key: string]: boolean } | null; colSizes: { [key: string]: number } | null; order?: TOrder | null; showHiddenFiles?: boolean }
 
 export type FileCopierJobInit = { source_location_id: number; target_location_id: number; sources_file_path_ids: number[]; target_location_relative_directory_path: string; target_file_name_suffix: string | null }
 
@@ -173,7 +173,7 @@ export type FilePathCursor = { isDir: boolean; variant: FilePathCursorVariant }
 
 export type FilePathCursorVariant = "none" | { name: CursorOrderItem<string> } | { sizeInBytes: SortOrder } | { dateCreated: CursorOrderItem<string> } | { dateModified: CursorOrderItem<string> } | { dateIndexed: CursorOrderItem<string> } | { object: FilePathObjectCursor }
 
-export type FilePathFilterArgs = { locationId?: number | null; search?: string | null; extension?: string | null; createdAt?: OptionalRange<string>; path?: string | null; object?: ObjectFilterArgs | null; hidden?: boolean | null }
+export type FilePathFilterArgs = { locationId?: number | null; search?: string | null; extension?: string | null; createdAt?: OptionalRange<string>; path?: string | null; withDescendants?: boolean | null; object?: ObjectFilterArgs | null; hidden?: boolean | null }
 
 export type FilePathObjectCursor = { dateAccessed: CursorOrderItem<string> } | { kind: CursorOrderItem<number> }