dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(preview): inline split-pane preview + sidebar metadata pass

Browse Source 
Replace the fullscreen PreviewOverlay with an inline top pane above
each grid surface. SplitGrid + InlinePreview render the focused
photo/video inside the host page; a resizableVertical action drives
the divider and the height persists via the view store. Applied to
the timeline, /tags drill-in, /review cause tabs, /photo/[uid], and
/map. selection.focused is now the single source of truth for both
the inline pane and the right sidebar — preview.svelte store and
PreviewOverlay are removed.

Sidebar: drop the thumb; lead with icon-led filename and folder
rows that match the date/place rhythm. Move dims+size to the top
(below date) and camera/lens/exposure into the collapsible File
section. Read-only spans share the input padding so the text column
aligns across rows. Folder row sits between date and dims+size.

VideoPlayer: stop forcing width/height: 100% so videos honour their
intrinsic aspect ratio inside the pane. Key the player on file hash
in InlinePreview so navigating between videos remounts the element
and autoplay fires again.

Sidebar (LeftSidebar): switch the labels badge to a dedicated
countPhotos('label:*') query so it reports photos with a label
rather than PhotoPrism's category roll-up.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-05-18 22:46:02 +02:00
parent 2a75896274
commit e36f1939c6
19 changed files with 701 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/lib/components/preview/VideoPlayer.svelte
View File

@@ -77,11 +77,21 @@
<style>
:global(.vds-player) {
width: 100%;
height: 100%;
/* Let the player size to the video's intrinsic aspect ratio,
capped by the host pane. Don't set width/height to 100% — that
was stretching widescreen video into the square inline-preview
pane. The default vidstack layout reads the loaded media's
aspect and sizes the box accordingly; we just clamp the upper
bound so it can't escape the SplitGrid top pane. */
max-width: 100%;
max-height: 100%;
aspect-ratio: auto;
--media-brand: #3b82f6;
--media-focus-ring-color: #3b82f6;
}
:global(.vds-player video),
:global(.vds-player media-provider) {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>