5dffadbe3c
- Lightbox renders <video> with controls for video assets - PhotoGrid shows video indicator overlay on video thumbnails - Skip video preloading in lightbox (streams on demand) - Add video-related CSS styles - Update catch-all page to pass video URLs to components
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import type { ImmichAlbum } from '@/lib/immich';
|
|
import type { PhotoItem } from './PhotoGrid';
|
|
import { PhotoGrid } from './PhotoGrid';
|
|
import { BackLink } from '@/components/BackLink';
|
|
import type { GridConfig } from '@/lib/config';
|
|
import React from 'react';
|
|
|
|
interface AlbumDetailViewProps {
|
|
album: ImmichAlbum;
|
|
images: PhotoItem[];
|
|
layout: GridConfig['layout'];
|
|
gridStyle: React.CSSProperties;
|
|
backLinkHref: string;
|
|
backLinkLabel: string;
|
|
subtitle?: string;
|
|
}
|
|
|
|
export function AlbumDetailView({
|
|
album,
|
|
images,
|
|
layout,
|
|
gridStyle,
|
|
backLinkHref,
|
|
backLinkLabel,
|
|
subtitle,
|
|
}: AlbumDetailViewProps) {
|
|
return (
|
|
<>
|
|
<div className="album-header">
|
|
<BackLink href={backLinkHref} label={backLinkLabel} />
|
|
<h1 className="album-header__title">{album.albumName}</h1>
|
|
{subtitle && (
|
|
<p className="subpage-subtitle" style={{ textAlign: 'left', marginLeft: 0 }}>
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
{album.description && <p className="album-header__description">{album.description}</p>}
|
|
<p className="album-header__meta">
|
|
{images.length} {images.length === 1 ? 'photo' : 'photos'}
|
|
</p>
|
|
</div>
|
|
<PhotoGrid assets={images} layout={layout} gridStyle={gridStyle} />
|
|
</>
|
|
);
|
|
}
|