From 53e4f5afe60488810d8b545d48b33c1f28ef1c13 Mon Sep 17 00:00:00 2001 From: Jared Wolff Date: Thu, 5 Mar 2026 13:40:02 -0500 Subject: [PATCH] feat(photos): add Photos timeline view with lightbox and infinite scroll Backend: new GET /api/photos endpoint with cursor-based pagination that queries image/video files sorted by EXIF captured_at (falling back to created_at), joining file_metadata for sort dates. Frontend: dense photo grid grouped by day with lazy-loaded thumbnails, IntersectionObserver infinite scroll, multi-select with batch download/delete, and a full-screen lightbox with prev/next navigation, EXIF metadata display, and download/favorite/delete toolbar. Includes navigation wiring, CSS (with dark theme), and i18n translations for all 9 locales. --- src/application/dtos/file_dto.rs | 7 + .../pg/file_blob_read_repository.rs | 60 ++++ .../services/path_resolver_service.rs | 1 + src/interfaces/api/handlers/mod.rs | 1 + src/interfaces/api/handlers/photos_handler.rs | 76 ++++ src/interfaces/api/routes.rs | 11 + static/css/views/photos.css | 258 ++++++++++++++ static/css/views/photosLightbox.css | 194 +++++++++++ static/index.html | 8 + static/js/app/main.js | 10 +- static/js/app/navigation.js | 31 +- static/js/app/state.js | 1 + static/js/features/library/photos.js | 328 ++++++++++++++++++ static/js/features/library/photosLightbox.js | 281 +++++++++++++++ static/locales/de.json | 6 + static/locales/en.json | 6 + static/locales/es.json | 6 + static/locales/fa.json | 6 + static/locales/fr.json | 6 + static/locales/it.json | 6 + static/locales/nl.json | 6 + static/locales/pt.json | 6 + static/locales/zh.json | 6 + 23 files changed, 1318 insertions(+), 3 deletions(-) create mode 100644 src/interfaces/api/handlers/photos_handler.rs create mode 100644 static/css/views/photos.css create mode 100644 static/css/views/photosLightbox.css create mode 100644 static/js/features/library/photos.js create mode 100644 static/js/features/library/photosLightbox.js diff --git a/src/application/dtos/file_dto.rs b/src/application/dtos/file_dto.rs index 18cc815a..1fba6812 100755 --- a/src/application/dtos/file_dto.rs +++ b/src/application/dtos/file_dto.rs @@ -51,6 +51,11 @@ pub struct FileDto { /// Owner user ID (omitted from JSON when None) #[serde(skip_serializing_if = "Option::is_none")] pub owner_id: Option, + + /// Sort date for Photos timeline — COALESCE(EXIF captured_at, created_at). + /// Only populated by the /api/photos endpoint. + #[serde(skip_serializing_if = "Option::is_none")] + pub sort_date: Option, } impl From for FileDto { @@ -73,6 +78,7 @@ impl From for FileDto { category: Arc::from(category_for(name, mime)), size_formatted: format_file_size(size), owner_id: file.owner_id().map(String::from), + sort_date: None, } } } @@ -112,6 +118,7 @@ impl FileDto { category: Arc::from("Document"), size_formatted: "0 Bytes".to_string(), owner_id: None, + sort_date: None, } } } diff --git a/src/infrastructure/repositories/pg/file_blob_read_repository.rs b/src/infrastructure/repositories/pg/file_blob_read_repository.rs index 6207d6fb..b7ecaa37 100755 --- a/src/infrastructure/repositories/pg/file_blob_read_repository.rs +++ b/src/infrastructure/repositories/pg/file_blob_read_repository.rs @@ -144,6 +144,66 @@ impl FileBlobReadRepository { self.hash_cache.insert(file_id.to_owned(), hash.clone()); Ok(hash) } + + /// Lists all image/video files for a user, sorted by capture date (EXIF) or + /// creation date, with cursor-based pagination for the Photos timeline. + /// + /// Returns `(Vec, Vec)` where the second vec contains the + /// `sort_date` epoch for each file (used as pagination cursor). + pub async fn list_media_files( + &self, + owner_id: &str, + before: Option, + limit: i64, + ) -> Result<(Vec, Vec), DomainError> { + let rows: Vec<( + String, // id + String, // name + Option, // folder_id + Option, // folder path + i64, // size + String, // mime_type + i64, // created_at + i64, // updated_at + Option, // user_id + i64, // sort_date + )> = sqlx::query_as( + r#" + SELECT fi.id::text, fi.name, fi.folder_id::text, fo.path, + fi.size, fi.mime_type, + EXTRACT(EPOCH FROM fi.created_at)::bigint, + EXTRACT(EPOCH FROM fi.updated_at)::bigint, + fi.user_id::text, + EXTRACT(EPOCH FROM COALESCE(fm.captured_at, fi.created_at))::bigint AS sort_date + FROM storage.files fi + LEFT JOIN storage.folders fo ON fo.id = fi.folder_id + LEFT JOIN storage.file_metadata fm ON fm.file_id = fi.id + WHERE fi.user_id = $1::uuid + AND NOT fi.is_trashed + AND (fi.mime_type LIKE 'image/%' OR fi.mime_type LIKE 'video/%') + AND ($2::bigint IS NULL + OR EXTRACT(EPOCH FROM COALESCE(fm.captured_at, fi.created_at))::bigint < $2::bigint) + ORDER BY COALESCE(fm.captured_at, fi.created_at) DESC + LIMIT $3 + "#, + ) + .bind(owner_id) + .bind(before) + .bind(limit) + .fetch_all(self.pool.as_ref()) + .await + .map_err(|e| DomainError::internal_error("FileBlobRead", format!("list_media: {e}")))?; + + let mut files = Vec::with_capacity(rows.len()); + let mut sort_dates = Vec::with_capacity(rows.len()); + + for (id, name, fid, fpath, size, mime, ca, ma, uid, sd) in rows { + files.push(Self::row_to_file(id, name, fid, fpath, size, mime, ca, ma, uid)?); + sort_dates.push(sd); + } + + Ok((files, sort_dates)) + } } impl FileReadPort for FileBlobReadRepository { diff --git a/src/infrastructure/services/path_resolver_service.rs b/src/infrastructure/services/path_resolver_service.rs index f237afe6..60a0b391 100755 --- a/src/infrastructure/services/path_resolver_service.rs +++ b/src/infrastructure/services/path_resolver_service.rs @@ -173,6 +173,7 @@ impl PathResolverService { category: Arc::from(category_for(&name, &mime)), size_formatted: format_file_size(sz), owner_id: uid, + sort_date: None, })) } } diff --git a/src/interfaces/api/handlers/mod.rs b/src/interfaces/api/handlers/mod.rs index 5dc06917..0e7048e2 100755 --- a/src/interfaces/api/handlers/mod.rs +++ b/src/interfaces/api/handlers/mod.rs @@ -11,6 +11,7 @@ pub mod favorites_handler; pub mod file_handler; pub mod folder_handler; pub mod i18n_handler; +pub mod photos_handler; pub mod recent_handler; pub mod search_handler; pub mod share_handler; diff --git a/src/interfaces/api/handlers/photos_handler.rs b/src/interfaces/api/handlers/photos_handler.rs new file mode 100644 index 00000000..9f8304fd --- /dev/null +++ b/src/interfaces/api/handlers/photos_handler.rs @@ -0,0 +1,76 @@ +use axum::{ + Json, + extract::{Query, State}, + http::StatusCode, + response::IntoResponse, +}; +use serde::Deserialize; +use std::sync::Arc; +use tracing::{error, info}; + +use crate::application::dtos::file_dto::FileDto; +use crate::common::di::AppState; +use crate::interfaces::middleware::auth::AuthUser; + +/// Query parameters for the photos timeline endpoint. +#[derive(Deserialize)] +pub struct PhotosQueryParams { + /// Cursor: only return items with sort_date < this value (epoch seconds). + pub before: Option, + /// Max items to return (default 200, max 500). + pub limit: Option, +} + +/// Lists all image/video files for the authenticated user, sorted by +/// capture date (EXIF DateTimeOriginal) falling back to upload date. +/// +/// Supports cursor-based pagination via the `before` parameter. +/// The `X-Next-Cursor` response header contains the cursor for the next page. +pub async fn list_photos( + State(state): State>, + auth_user: AuthUser, + Query(params): Query, +) -> impl IntoResponse { + let user_id = &auth_user.id; + let limit = params.limit.unwrap_or(200).min(500).max(1); + + let file_read = &state.repositories.file_read_repository; + + match file_read.list_media_files(user_id, params.before, limit).await { + Ok((files, sort_dates)) => { + info!("Photos: returned {} media files for user", files.len()); + + // Convert to DTOs with sort_date populated + let dtos: Vec = files + .into_iter() + .zip(sort_dates.iter()) + .map(|(file, &sd)| { + let mut dto = FileDto::from(file); + dto.sort_date = Some(sd as u64); + dto + }) + .collect(); + + // Set cursor header for next page + let mut response = Json(&dtos).into_response(); + if let Some(&last_sd) = sort_dates.last() { + response.headers_mut().insert( + "X-Next-Cursor", + last_sd.to_string().parse().unwrap(), + ); + } + + response + } + Err(err) => { + error!("Error listing photos: {}", err); + ( + StatusCode::INTERNAL_SERVER_ERROR, + Json(serde_json::json!({ + "error": format!("Failed to list photos: {}", err) + })), + ) + .into_response() + } + } +} diff --git a/src/interfaces/api/routes.rs b/src/interfaces/api/routes.rs index 266d0715..1062df7b 100755 --- a/src/interfaces/api/routes.rs +++ b/src/interfaces/api/routes.rs @@ -309,6 +309,17 @@ pub fn create_api_routes(app_state: &Arc) -> Router> { .nest("/favorites", favorites_router) .nest("/recent", recent_router); + // Photos timeline endpoint — lists all image/video files sorted by capture date + { + use crate::interfaces::api::handlers::photos_handler; + + let photos_router = Router::new() + .route("/", get(photos_handler::list_photos)) + .with_state(app_state.clone()); + + router = router.nest("/photos", photos_router); + } + // Re-enable trash routes to make the trash view work if let Some(_trash_service_ref) = trash_service.clone() { tracing::info!("Setting up trash routes for trash view"); diff --git a/static/css/views/photos.css b/static/css/views/photos.css new file mode 100644 index 00000000..e6476ba3 --- /dev/null +++ b/static/css/views/photos.css @@ -0,0 +1,258 @@ +/* Photos timeline view */ +.photos-container { + padding: 0; + display: none; +} + +.photos-container.active { + display: block; +} + +/* Day group header */ +.photos-day-header { + position: sticky; + top: 0; + z-index: 10; + padding: 12px 4px 8px; + font-size: 15px; + font-weight: 600; + color: #2d3748; + background: rgba(255, 255, 255, 0.92); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +.photos-day-header .photos-day-count { + font-weight: 400; + color: #94a3b8; + font-size: 13px; + margin-left: 8px; +} + +/* Photo grid */ +.photos-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 4px; + padding: 0 4px 4px; +} + +/* Individual photo tile */ +.photo-tile { + position: relative; + aspect-ratio: 1; + overflow: hidden; + border-radius: 4px; + cursor: pointer; + background: #e2e8f0; +} + +.photo-tile img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.2s ease; +} + +.photo-tile:hover img { + transform: scale(1.05); +} + +/* Selection checkbox */ +.photo-tile .photo-check { + position: absolute; + top: 6px; + left: 6px; + width: 22px; + height: 22px; + border-radius: 50%; + border: 2px solid rgba(255, 255, 255, 0.8); + background: rgba(0, 0, 0, 0.25); + opacity: 0; + transition: opacity 0.15s ease; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 11px; + z-index: 2; +} + +.photo-tile:hover .photo-check, +.photo-tile.selected .photo-check { + opacity: 1; +} + +.photo-tile.selected .photo-check { + background: #ff5e3a; + border-color: #ff5e3a; +} + +.photo-tile.selected { + outline: 3px solid #ff5e3a; + outline-offset: -3px; +} + +.photo-tile.selected img { + transform: scale(0.92); +} + +/* Video badge */ +.photo-tile .video-badge { + position: absolute; + bottom: 6px; + right: 6px; + width: 28px; + height: 28px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.55); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 12px; + z-index: 2; +} + +/* Duration badge for videos */ +.photo-tile .video-duration { + position: absolute; + bottom: 6px; + left: 6px; + font-size: 11px; + color: #fff; + background: rgba(0, 0, 0, 0.55); + padding: 2px 6px; + border-radius: 4px; + z-index: 2; +} + +/* Empty state */ +.photos-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 80px 20px; + text-align: center; + color: #94a3b8; +} + +.photos-empty i { + font-size: 56px; + margin-bottom: 16px; + color: #cbd5e1; +} + +.photos-empty p { + margin: 4px 0; + font-size: 15px; +} + +.photos-empty .photos-empty-title { + font-size: 18px; + font-weight: 600; + color: #64748b; +} + +/* Infinite scroll sentinel */ +.photos-sentinel { + height: 1px; + width: 100%; +} + +/* Loading spinner */ +.photos-loading { + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + color: #94a3b8; + font-size: 14px; + gap: 8px; +} + +.photos-loading i { + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* Selection bar */ +.photos-selection-bar { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background: #1e293b; + color: #fff; + padding: 10px 20px; + border-radius: 12px; + display: flex; + align-items: center; + gap: 16px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); + z-index: 1000; + font-size: 14px; +} + +.photos-selection-bar button { + background: none; + border: none; + color: #fff; + cursor: pointer; + padding: 6px 10px; + border-radius: 6px; + font-size: 14px; + transition: background 0.15s; +} + +.photos-selection-bar button:hover { + background: rgba(255, 255, 255, 0.15); +} + +.photos-selection-bar .selection-count { + font-weight: 600; +} + +/* Responsive */ +@media (max-width: 768px) { + .photos-grid { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 2px; + padding: 0 2px 2px; + } + + .photo-tile .photo-check { + opacity: 1; + } + + .photos-day-header { + font-size: 14px; + padding: 10px 2px 6px; + } +} + +/* Dark theme */ +[data-theme="dark"] .photos-day-header { + color: #e2e8f0; + background: rgba(15, 23, 42, 0.92); +} + +[data-theme="dark"] .photo-tile { + background: #334155; +} + +[data-theme="dark"] .photos-empty i { + color: #475569; +} + +[data-theme="dark"] .photos-empty .photos-empty-title { + color: #94a3b8; +} + +[data-theme="dark"] .photos-empty p { + color: #64748b; +} diff --git a/static/css/views/photosLightbox.css b/static/css/views/photosLightbox.css new file mode 100644 index 00000000..47eaee58 --- /dev/null +++ b/static/css/views/photosLightbox.css @@ -0,0 +1,194 @@ +/* Photos lightbox overlay */ +.photos-lightbox { + position: fixed; + inset: 0; + z-index: 10000; + background: rgba(0, 0, 0, 0.92); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.2s ease; + pointer-events: none; +} + +.photos-lightbox.active { + opacity: 1; + pointer-events: auto; +} + +/* Main content area */ +.lightbox-content { + position: relative; + max-width: 90vw; + max-height: 85vh; + display: flex; + align-items: center; + justify-content: center; +} + +.lightbox-content img, +.lightbox-content video { + max-width: 90vw; + max-height: 85vh; + object-fit: contain; + border-radius: 4px; + user-select: none; +} + +/* Navigation arrows */ +.lightbox-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 48px; + height: 48px; + border-radius: 50%; + border: none; + background: rgba(255, 255, 255, 0.12); + color: #fff; + font-size: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.15s; + z-index: 10001; +} + +.lightbox-nav:hover { + background: rgba(255, 255, 255, 0.25); +} + +.lightbox-prev { + left: 20px; +} + +.lightbox-next { + right: 20px; +} + +/* Close button */ +.lightbox-close { + position: absolute; + top: 16px; + right: 16px; + width: 40px; + height: 40px; + border-radius: 50%; + border: none; + background: rgba(255, 255, 255, 0.12); + color: #fff; + font-size: 18px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.15s; + z-index: 10001; +} + +.lightbox-close:hover { + background: rgba(255, 255, 255, 0.25); +} + +/* Top info bar */ +.lightbox-info { + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 16px 70px 16px 20px; + background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); + color: #fff; + z-index: 10001; +} + +.lightbox-filename { + font-size: 15px; + font-weight: 600; + margin-bottom: 2px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.lightbox-meta { + font-size: 12px; + color: rgba(255, 255, 255, 0.7); + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +/* Bottom toolbar */ +.lightbox-toolbar { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 16px 20px; + background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + z-index: 10001; +} + +.lightbox-toolbar button { + background: rgba(255, 255, 255, 0.12); + border: none; + color: #fff; + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + transition: background 0.15s; +} + +.lightbox-toolbar button:hover { + background: rgba(255, 255, 255, 0.25); +} + +.lightbox-toolbar button.active { + color: #ff5e3a; +} + +/* Counter */ +.lightbox-counter { + position: absolute; + bottom: 16px; + left: 20px; + color: rgba(255, 255, 255, 0.5); + font-size: 13px; + z-index: 10001; +} + +/* Responsive */ +@media (max-width: 768px) { + .lightbox-nav { + width: 36px; + height: 36px; + font-size: 16px; + } + + .lightbox-prev { + left: 8px; + } + + .lightbox-next { + right: 8px; + } + + .lightbox-content img, + .lightbox-content video { + max-width: 100vw; + max-height: 80vh; + } +} diff --git a/static/index.html b/static/index.html index cf098ace..b9734f55 100755 --- a/static/index.html +++ b/static/index.html @@ -14,6 +14,8 @@ + + @@ -32,6 +34,8 @@ + + @@ -81,6 +85,10 @@ Favorites +
Trash diff --git a/static/js/app/main.js b/static/js/app/main.js index 306e01c9..21a6496a 100755 --- a/static/js/app/main.js +++ b/static/js/app/main.js @@ -271,7 +271,7 @@ function cacheElements() { elements.pageTitle = document.querySelector('.page-title'); elements.actionsBar = document.querySelector('.actions-bar'); elements.navItems = document.querySelectorAll('.nav-item'); - elements.trashBtn = document.querySelector('.nav-item:nth-child(5)'); // The trash nav item + elements.trashBtn = document.querySelector('.nav-item:nth-child(6)'); // The trash nav item (after Photos) elements.searchInput = document.querySelector('.search-container input'); } @@ -436,7 +436,13 @@ function setupEventListeners() { switchToRecentFilesView(); return; } - + + // Check if this is the photos item + if (item.querySelector('span').getAttribute('data-i18n') === 'nav.photos') { + switchToPhotosView(); + return; + } + // Check if this is the trash item if (item === elements.trashBtn) { // Hide shared view if active diff --git a/static/js/app/navigation.js b/static/js/app/navigation.js index 662fb974..3193968e 100755 --- a/static/js/app/navigation.js +++ b/static/js/app/navigation.js @@ -73,7 +73,8 @@ const VIEW_FLAGS = { 'shared': 'isSharedView', 'recent': 'isRecentView', 'favorites': 'isFavoritesView', - 'trash': 'isTrashView' + 'trash': 'isTrashView', + 'photos': 'isPhotosView' }; /** @@ -114,6 +115,11 @@ function setCurrentSection(section) { if (section !== 'shared' && window.sharedView) { window.sharedView.hide(); } + + // Hide photosView when switching to any other section + if (section !== 'photos' && window.photosView) { + window.photosView.hide(); + } } function switchToSharedView() { @@ -223,7 +229,30 @@ function switchToRecentFilesView() { } } +function switchToPhotosView() { + setCurrentSection('photos'); + + // Hide breadcrumb + const breadcrumb = document.querySelector('.breadcrumb'); + if (breadcrumb) breadcrumb.style.display = 'none'; + + // Hide actions-bar (photos has its own upload via selection bar) + window.setActionsBarMode('hidden'); + + // Hide file containers + const filesGrid = document.getElementById('files-grid'); + const filesListView = document.getElementById('files-list-view'); + if (filesGrid) filesGrid.style.display = 'none'; + if (filesListView) filesListView.style.display = 'none'; + + // Show photos view + if (window.photosView) { + window.photosView.show(); + } +} + window.switchToFilesView = switchToFilesView; window.switchToSharedView = switchToSharedView; window.switchToFavoritesView = switchToFavoritesView; window.switchToRecentFilesView = switchToRecentFilesView; +window.switchToPhotosView = switchToPhotosView; diff --git a/static/js/app/state.js b/static/js/app/state.js index 3248ba38..2d3eb329 100755 --- a/static/js/app/state.js +++ b/static/js/app/state.js @@ -16,6 +16,7 @@ window.app = { isSharedView: false, isFavoritesView: false, isRecentView: false, + isPhotosView: false, currentSection: 'files', isSearchMode: false, shareDialogItem: null, diff --git a/static/js/features/library/photos.js b/static/js/features/library/photos.js new file mode 100644 index 00000000..b896b408 --- /dev/null +++ b/static/js/features/library/photos.js @@ -0,0 +1,328 @@ +/** + * OxiCloud - Photos Timeline View + * Dense photo grid grouped by day, with infinite scroll and multi-select. + */ + +const photosView = { + /** @type {Array} All loaded photo items */ + items: [], + /** @type {string|null} Cursor for next page */ + nextCursor: null, + /** @type {boolean} Currently fetching */ + loading: false, + /** @type {boolean} All items loaded */ + exhausted: false, + /** @type {Set} Selected item IDs */ + selected: new Set(), + /** @type {IntersectionObserver|null} */ + _observer: null, + /** @type {HTMLElement|null} */ + _container: null, + /** @type {boolean} */ + _initialized: false, + + PAGE_SIZE: 200, + + /** Auth headers (HttpOnly cookies) */ + _headers(json = false) { + const h = typeof getCsrfHeaders === 'function' ? { ...getCsrfHeaders() } : {}; + if (json) h['Content-Type'] = 'application/json'; + return h; + }, + + /** Initialize / re-initialize the photos view */ + init() { + if (!this._container) { + const contentArea = document.querySelector('.content-area'); + if (!contentArea) return; + const el = document.createElement('div'); + el.id = 'photos-container'; + el.className = 'photos-container'; + contentArea.appendChild(el); + this._container = el; + } + if (!this._initialized) { + this._initialized = true; + } + }, + + /** Show the photos view and load data */ + show() { + this.init(); + if (!this._container) return; + this._container.classList.add('active'); + this.items = []; + this.nextCursor = null; + this.exhausted = false; + this.selected.clear(); + this._render(); + this._loadPage(); + }, + + /** Hide the photos view */ + hide() { + if (this._container) { + this._container.classList.remove('active'); + } + this._destroyObserver(); + this._hideSelectionBar(); + }, + + /** Fetch a page of photos from the API */ + async _loadPage() { + if (this.loading || this.exhausted) return; + this.loading = true; + this._showLoading(true); + + try { + let url = `/api/photos?limit=${this.PAGE_SIZE}`; + if (this.nextCursor) { + url += `&before=${this.nextCursor}`; + } + + const res = await fetch(url, { + credentials: 'include', + headers: this._headers() + }); + + if (!res.ok) throw new Error(`HTTP ${res.status}`); + + const data = await res.json(); + + if (!data || data.length === 0) { + this.exhausted = true; + } else { + this.items.push(...data); + // Read cursor from header + const cursor = res.headers.get('X-Next-Cursor'); + if (cursor && data.length >= this.PAGE_SIZE) { + this.nextCursor = cursor; + } else { + this.exhausted = true; + } + } + } catch (err) { + console.error('Error loading photos:', err); + this.exhausted = true; + } finally { + this.loading = false; + this._showLoading(false); + this._render(); + } + }, + + /** Render the full timeline from this.items */ + _render() { + if (!this._container) return; + this._destroyObserver(); + + if (this.items.length === 0 && this.exhausted) { + this._renderEmpty(); + return; + } + + if (this.items.length === 0) return; + + // Group by day + const groups = this._groupByDay(this.items); + let html = ''; + + for (const [dayLabel, files] of groups) { + html += `
${this._escHtml(dayLabel)}${files.length}
`; + html += '
'; + for (const file of files) { + const isVideo = file.mime_type && file.mime_type.startsWith('video/'); + const selected = this.selected.has(file.id) ? ' selected' : ''; + const thumbUrl = `/api/files/${file.id}/thumbnail/preview`; + html += `
`; + html += `
`; + html += `${this._escAttr(file.name)}`; + if (isVideo) { + html += `
`; + } + html += `
`; + } + html += '
'; + } + + // Sentinel for infinite scroll + html += '
'; + + this._container.innerHTML = html; + + // Attach click handlers via delegation + this._container.onclick = (e) => this._handleClick(e); + + // Observe sentinel for infinite scroll + const sentinel = this._container.querySelector('.photos-sentinel'); + if (sentinel && !this.exhausted) { + this._observer = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + this._loadPage(); + } + }, { rootMargin: '400px' }); + this._observer.observe(sentinel); + } + }, + + /** Render empty state */ + _renderEmpty() { + const t = (k, d) => window.i18n ? window.i18n.t(k) : d; + this._container.innerHTML = ` +
+ +

${t('photos.empty_state', 'No photos yet')}

+

${t('photos.empty_hint', 'Upload images or videos to see them here')}

+
`; + }, + + /** Group items by day using sort_date */ + _groupByDay(items) { + const map = new Map(); + for (const item of items) { + const ts = (item.sort_date || item.created_at) * 1000; + const d = new Date(ts); + const key = d.toLocaleDateString(undefined, { + weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' + }); + if (!map.has(key)) map.set(key, []); + map.get(key).push(item); + } + return map; + }, + + /** Handle click on photo tile */ + _handleClick(e) { + const tile = e.target.closest('.photo-tile'); + if (!tile) return; + + const id = tile.dataset.id; + const check = e.target.closest('.photo-check'); + + // If clicking checkbox or in selection mode, toggle select + if (check || this.selected.size > 0) { + this._toggleSelect(id, tile); + return; + } + + // Otherwise open lightbox + const idx = this.items.findIndex(f => f.id === id); + if (idx >= 0 && window.photosLightbox) { + window.photosLightbox.open(this.items, idx); + } + }, + + /** Toggle selection of an item */ + _toggleSelect(id, tile) { + if (this.selected.has(id)) { + this.selected.delete(id); + tile.classList.remove('selected'); + } else { + this.selected.add(id); + tile.classList.add('selected'); + } + this._updateSelectionBar(); + }, + + /** Show/update selection bar */ + _updateSelectionBar() { + let bar = document.getElementById('photos-selection-bar'); + + if (this.selected.size === 0) { + this._hideSelectionBar(); + return; + } + + if (!bar) { + bar = document.createElement('div'); + bar.id = 'photos-selection-bar'; + bar.className = 'photos-selection-bar'; + document.body.appendChild(bar); + } + + const t = (k, d) => window.i18n ? window.i18n.t(k) : d; + const count = this.selected.size; + bar.innerHTML = ` + ${count} ${t('photos.items_selected', 'selected')} + + + + `; + + bar.querySelector('#photos-sel-clear').onclick = () => { + this.selected.clear(); + this._container.querySelectorAll('.photo-tile.selected').forEach(t => t.classList.remove('selected')); + this._hideSelectionBar(); + }; + + bar.querySelector('#photos-sel-delete').onclick = async () => { + if (!confirm('Delete selected items?')) return; + for (const fid of this.selected) { + try { + await fetch(`/api/files/${fid}`, { + method: 'DELETE', + credentials: 'include', + headers: this._headers() + }); + } catch (err) { + console.error('Delete failed:', fid, err); + } + } + // Remove from items and re-render + this.items = this.items.filter(f => !this.selected.has(f.id)); + this.selected.clear(); + this._hideSelectionBar(); + this._render(); + }; + + bar.querySelector('#photos-sel-download').onclick = async () => { + for (const fid of this.selected) { + const a = document.createElement('a'); + a.href = `/api/files/${fid}`; + a.download = ''; + document.body.appendChild(a); + a.click(); + a.remove(); + } + }; + + bar.style.display = 'flex'; + }, + + _hideSelectionBar() { + const bar = document.getElementById('photos-selection-bar'); + if (bar) bar.style.display = 'none'; + }, + + _showLoading(show) { + if (!this._container) return; + let loader = this._container.querySelector('.photos-loading'); + if (show && !loader) { + loader = document.createElement('div'); + loader.className = 'photos-loading'; + loader.innerHTML = ' Loading...'; + this._container.appendChild(loader); + } else if (!show && loader) { + loader.remove(); + } + }, + + _destroyObserver() { + if (this._observer) { + this._observer.disconnect(); + this._observer = null; + } + }, + + _escHtml(s) { + const d = document.createElement('div'); + d.textContent = s; + return d.innerHTML; + }, + + _escAttr(s) { + return String(s || '').replace(/"/g, '"').replace(/ { + if (this._overlay) { + this._overlay.remove(); + this._overlay = null; + } + }, 200); + } + this._revokeBlob(); + this._unbindKeys(); + }, + + /** Navigate to previous */ + prev() { + if (this.index > 0) { + this.index--; + this._show(); + } + }, + + /** Navigate to next */ + next() { + if (this.index < this.items.length - 1) { + this.index++; + this._show(); + } + }, + + /** Create the overlay DOM structure */ + _createOverlay() { + if (this._overlay) this._overlay.remove(); + + const el = document.createElement('div'); + el.className = 'photos-lightbox'; + el.innerHTML = ` +
+
+
+
+ + +
+ +
+ + + +
+
+ `; + document.body.appendChild(el); + this._overlay = el; + + // Event listeners + el.querySelector('.lightbox-close').onclick = () => this.close(); + el.querySelector('.lightbox-prev').onclick = () => this.prev(); + el.querySelector('.lightbox-next').onclick = () => this.next(); + + // Click backdrop to close + el.addEventListener('click', (e) => { + if (e.target === el || e.target.classList.contains('lightbox-content')) { + this.close(); + } + }); + + // Toolbar actions + el.querySelector('.lb-download').onclick = () => this._download(); + el.querySelector('.lb-favorite').onclick = () => this._toggleFavorite(); + el.querySelector('.lb-delete').onclick = () => this._delete(); + + // Animate in + requestAnimationFrame(() => el.classList.add('active')); + }, + + /** Display the current item */ + async _show() { + if (!this._overlay || this.index < 0) return; + + const item = this.items[this.index]; + const content = this._overlay.querySelector('.lightbox-content'); + const filename = this._overlay.querySelector('.lightbox-filename'); + const meta = this._overlay.querySelector('.lightbox-meta'); + const counter = this._overlay.querySelector('.lightbox-counter'); + + filename.textContent = item.name; + counter.textContent = `${this.index + 1} / ${this.items.length}`; + + // Format date + const ts = (item.sort_date || item.created_at) * 1000; + const dateStr = new Date(ts).toLocaleDateString(undefined, { + year: 'numeric', month: 'short', day: 'numeric', + hour: '2-digit', minute: '2-digit' + }); + meta.textContent = `${dateStr} · ${item.size_formatted || ''}`; + + // Update nav button visibility + this._overlay.querySelector('.lightbox-prev').style.visibility = this.index > 0 ? 'visible' : 'hidden'; + this._overlay.querySelector('.lightbox-next').style.visibility = this.index < this.items.length - 1 ? 'visible' : 'hidden'; + + // Load content + this._revokeBlob(); + content.innerHTML = '
'; + + try { + const isVideo = item.mime_type && item.mime_type.startsWith('video/'); + const res = await fetch(`/api/files/${item.id}`, { + credentials: 'include', + headers: this._headers() + }); + + if (!res.ok) throw new Error(`HTTP ${res.status}`); + const blob = await res.blob(); + this._blobUrl = URL.createObjectURL(blob); + + if (isVideo) { + content.innerHTML = ``; + } else { + content.innerHTML = `${this._escAttr(item.name)}`; + } + } catch (err) { + console.error('Lightbox load error:', err); + content.innerHTML = '
Failed to load
'; + } + + // Load EXIF metadata + this._loadMetadata(item.id, meta, dateStr, item.size_formatted || ''); + }, + + /** Load EXIF metadata for info bar */ + async _loadMetadata(fileId, metaEl, dateStr, sizeStr) { + try { + const res = await fetch(`/api/files/${fileId}/metadata`, { + credentials: 'include', + headers: this._headers() + }); + if (res.ok) { + const data = await res.json(); + let parts = [dateStr]; + if (sizeStr) parts.push(sizeStr); + if (data.camera_make || data.camera_model) { + parts.push([data.camera_make, data.camera_model].filter(Boolean).join(' ')); + } + if (data.width && data.height) { + parts.push(`${data.width}×${data.height}`); + } + metaEl.textContent = parts.join(' · '); + } + } catch (err) { + // Non-critical, keep existing meta + } + }, + + /** Download current item */ + _download() { + const item = this.items[this.index]; + if (!item) return; + const a = document.createElement('a'); + a.href = `/api/files/${item.id}`; + a.download = item.name; + document.body.appendChild(a); + a.click(); + a.remove(); + }, + + /** Toggle favorite on current item */ + async _toggleFavorite() { + const item = this.items[this.index]; + if (!item || !window.favorites) return; + try { + await fetch(`/api/favorites/file/${item.id}`, { + method: 'POST', + credentials: 'include', + headers: this._headers(true) + }); + const btn = this._overlay.querySelector('.lb-favorite'); + if (btn) { + btn.classList.toggle('active'); + const icon = btn.querySelector('i'); + if (icon) { + icon.className = btn.classList.contains('active') ? 'fas fa-star' : 'far fa-star'; + } + } + } catch (err) { + console.error('Favorite toggle failed:', err); + } + }, + + /** Delete current item */ + async _delete() { + const item = this.items[this.index]; + if (!item) return; + if (!confirm(`Delete ${item.name}?`)) return; + + try { + await fetch(`/api/files/${item.id}`, { + method: 'DELETE', + credentials: 'include', + headers: this._headers() + }); + // Remove from photosView items too + if (window.photosView) { + window.photosView.items = window.photosView.items.filter(f => f.id !== item.id); + } + this.items.splice(this.index, 1); + if (this.items.length === 0) { + this.close(); + if (window.photosView) window.photosView._render(); + } else { + if (this.index >= this.items.length) this.index = this.items.length - 1; + this._show(); + if (window.photosView) window.photosView._render(); + } + } catch (err) { + console.error('Delete failed:', err); + } + }, + + /** Keyboard navigation */ + _bindKeys() { + this._keyHandler = (e) => { + if (e.key === 'Escape') this.close(); + else if (e.key === 'ArrowLeft') this.prev(); + else if (e.key === 'ArrowRight') this.next(); + }; + document.addEventListener('keydown', this._keyHandler); + }, + + _unbindKeys() { + if (this._keyHandler) { + document.removeEventListener('keydown', this._keyHandler); + this._keyHandler = null; + } + }, + + _revokeBlob() { + if (this._blobUrl) { + URL.revokeObjectURL(this._blobUrl); + this._blobUrl = null; + } + }, + + _escAttr(s) { + return String(s || '').replace(/"/g, '"').replace(/