422 lines
12 KiB
TypeScript
422 lines
12 KiB
TypeScript
/**
|
|
* <folk-photo-gallery> — Community photo gallery powered by Immich.
|
|
*
|
|
* Browse shared albums, view recent photos, and open the full
|
|
* Immich interface for uploads and management.
|
|
*
|
|
* Attributes:
|
|
* space — space slug (default: "demo")
|
|
*/
|
|
|
|
interface Album {
|
|
id: string;
|
|
albumName: string;
|
|
description: string;
|
|
assetCount: number;
|
|
albumThumbnailAssetId: string | null;
|
|
updatedAt: string;
|
|
shared: boolean;
|
|
}
|
|
|
|
interface Asset {
|
|
id: string;
|
|
type: string;
|
|
originalFileName: string;
|
|
exifInfo?: {
|
|
city?: string;
|
|
country?: string;
|
|
dateTimeOriginal?: string;
|
|
make?: string;
|
|
model?: string;
|
|
};
|
|
fileCreatedAt: string;
|
|
}
|
|
|
|
class FolkPhotoGallery extends HTMLElement {
|
|
private shadow: ShadowRoot;
|
|
private space = "demo";
|
|
private view: "gallery" | "album" | "lightbox" = "gallery";
|
|
private albums: Album[] = [];
|
|
private assets: Asset[] = [];
|
|
private albumAssets: Asset[] = [];
|
|
private selectedAlbum: Album | null = null;
|
|
private lightboxAsset: Asset | null = null;
|
|
private loading = false;
|
|
private error = "";
|
|
|
|
constructor() {
|
|
super();
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.space = this.getAttribute("space") || "demo";
|
|
this.loadGallery();
|
|
}
|
|
|
|
private getApiBase(): string {
|
|
const path = window.location.pathname;
|
|
const match = path.match(/^\/([^/]+)\/photos/);
|
|
return match ? `/${match[1]}/photos` : "";
|
|
}
|
|
|
|
private getImmichUrl(): string {
|
|
return `https://${this.space}.rphotos.online`;
|
|
}
|
|
|
|
private async loadGallery() {
|
|
this.loading = true;
|
|
this.render();
|
|
|
|
const base = this.getApiBase();
|
|
try {
|
|
const [albumsRes, assetsRes] = await Promise.all([
|
|
fetch(`${base}/api/albums`),
|
|
fetch(`${base}/api/assets?size=24`),
|
|
]);
|
|
const albumsData = await albumsRes.json();
|
|
const assetsData = await assetsRes.json();
|
|
this.albums = albumsData.albums || [];
|
|
this.assets = assetsData.assets || [];
|
|
} catch {
|
|
this.error = "Could not connect to photo service. Make sure Immich is running.";
|
|
}
|
|
|
|
this.loading = false;
|
|
this.render();
|
|
}
|
|
|
|
private async loadAlbum(album: Album) {
|
|
this.selectedAlbum = album;
|
|
this.view = "album";
|
|
this.loading = true;
|
|
this.render();
|
|
|
|
try {
|
|
const base = this.getApiBase();
|
|
const res = await fetch(`${base}/api/albums/${album.id}`);
|
|
const data = await res.json();
|
|
this.albumAssets = data.assets || [];
|
|
} catch {
|
|
this.error = "Failed to load album";
|
|
}
|
|
|
|
this.loading = false;
|
|
this.render();
|
|
}
|
|
|
|
private openLightbox(asset: Asset) {
|
|
this.lightboxAsset = asset;
|
|
this.view = "lightbox";
|
|
this.render();
|
|
}
|
|
|
|
private closeLightbox() {
|
|
this.lightboxAsset = null;
|
|
this.view = this.selectedAlbum ? "album" : "gallery";
|
|
this.render();
|
|
}
|
|
|
|
private thumbUrl(assetId: string): string {
|
|
const base = this.getApiBase();
|
|
return `${base}/api/assets/${assetId}/thumbnail`;
|
|
}
|
|
|
|
private originalUrl(assetId: string): string {
|
|
const base = this.getApiBase();
|
|
return `${base}/api/assets/${assetId}/original`;
|
|
}
|
|
|
|
private formatDate(d: string): string {
|
|
return new Date(d).toLocaleDateString(undefined, {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|
|
|
|
private render() {
|
|
this.shadow.innerHTML = `
|
|
<style>
|
|
:host { display: block; font-family: system-ui, -apple-system, sans-serif; color: #e2e8f0; }
|
|
* { box-sizing: border-box; }
|
|
|
|
.rapp-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 36px; }
|
|
.rapp-nav__back { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: #94a3b8; cursor: pointer; font-size: 13px; transition: color 0.15s, border-color 0.15s; }
|
|
.rapp-nav__back:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.2); }
|
|
.rapp-nav__title { font-size: 15px; font-weight: 600; color: #e2e8f0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.rapp-nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
|
.rapp-nav__btn { padding: 6px 14px; border-radius: 6px; border: none; background: #4f46e5; color: #fff; font-weight: 600; cursor: pointer; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
|
|
.rapp-nav__btn:hover { background: #6366f1; }
|
|
.rapp-nav__btn--secondary { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: #94a3b8; }
|
|
.rapp-nav__btn--secondary:hover { color: #e2e8f0; border-color: rgba(255,255,255,0.3); }
|
|
|
|
.albums-section { margin-bottom: 2rem; }
|
|
.section-title { font-size: 13px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
|
|
|
|
.albums-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.album-card {
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, transform 0.15s;
|
|
}
|
|
.album-card:hover { border-color: #f9a8d4; transform: translateY(-2px); }
|
|
|
|
.album-thumb {
|
|
aspect-ratio: 16/10;
|
|
background: #0f172a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.album-thumb img { width: 100%; height: 100%; object-fit: cover; }
|
|
.album-thumb-empty { font-size: 2.5rem; opacity: 0.3; }
|
|
|
|
.album-info { padding: 10px 12px; }
|
|
.album-name { font-size: 14px; font-weight: 600; color: #f1f5f9; margin-bottom: 2px; }
|
|
.album-meta { font-size: 12px; color: #64748b; }
|
|
|
|
.photo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
gap: 4px;
|
|
}
|
|
|
|
.photo-cell {
|
|
aspect-ratio: 1;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
background: #0f172a;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.photo-cell:hover { opacity: 0.85; }
|
|
.photo-cell img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
.lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
background: rgba(0,0,0,0.92);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.lightbox img {
|
|
max-width: 90vw;
|
|
max-height: 80vh;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
.lightbox-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
background: rgba(255,255,255,0.1);
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
|
|
.lightbox-info {
|
|
text-align: center;
|
|
color: #94a3b8;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.empty { text-align: center; color: #64748b; padding: 3rem 1rem; }
|
|
.empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
|
|
.empty h3 { color: #94a3b8; margin: 0 0 0.5rem; }
|
|
.empty p { margin: 0 0 1.5rem; font-size: 0.9rem; }
|
|
|
|
.loading { text-align: center; color: #64748b; padding: 3rem; }
|
|
.error { text-align: center; color: #f87171; padding: 1.5rem; background: rgba(248,113,113,0.08); border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
|
|
</style>
|
|
|
|
${this.error ? `<div class="error">${this.esc(this.error)}</div>` : ""}
|
|
${this.loading ? '<div class="loading">Loading photos...</div>' : ""}
|
|
${!this.loading ? this.renderView() : ""}
|
|
${this.view === "lightbox" && this.lightboxAsset ? this.renderLightbox() : ""}
|
|
`;
|
|
|
|
this.attachListeners();
|
|
}
|
|
|
|
private renderView(): string {
|
|
if (this.view === "album" && this.selectedAlbum) return this.renderAlbum();
|
|
return this.renderGalleryView();
|
|
}
|
|
|
|
private renderGalleryView(): string {
|
|
const hasContent = this.albums.length > 0 || this.assets.length > 0;
|
|
|
|
return `
|
|
<div class="rapp-nav">
|
|
<span class="rapp-nav__title">Photos</span>
|
|
<div class="rapp-nav__actions">
|
|
<a class="rapp-nav__btn" href="${this.getImmichUrl()}" target="_blank" rel="noopener">
|
|
Open Immich
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
${!hasContent ? `
|
|
<div class="empty">
|
|
<div class="empty-icon">📸</div>
|
|
<h3>No photos yet</h3>
|
|
<p>Upload photos through Immich to see them here. Shared albums will appear automatically.</p>
|
|
<a class="rapp-nav__btn" href="${this.getImmichUrl()}" target="_blank" rel="noopener">
|
|
Open Immich to Upload
|
|
</a>
|
|
</div>
|
|
` : ""}
|
|
|
|
${this.albums.length > 0 ? `
|
|
<div class="albums-section">
|
|
<div class="section-title">Shared Albums</div>
|
|
<div class="albums-grid">
|
|
${this.albums.map((a) => `
|
|
<div class="album-card" data-album-id="${a.id}">
|
|
<div class="album-thumb">
|
|
${a.albumThumbnailAssetId
|
|
? `<img src="${this.thumbUrl(a.albumThumbnailAssetId)}" alt="${this.esc(a.albumName)}" loading="lazy">`
|
|
: '<span class="album-thumb-empty">📷</span>'}
|
|
</div>
|
|
<div class="album-info">
|
|
<div class="album-name">${this.esc(a.albumName)}</div>
|
|
<div class="album-meta">${a.assetCount} photo${a.assetCount !== 1 ? "s" : ""}</div>
|
|
</div>
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
</div>
|
|
` : ""}
|
|
|
|
${this.assets.length > 0 ? `
|
|
<div class="section-title">Recent Photos</div>
|
|
<div class="photo-grid">
|
|
${this.assets.map((a) => `
|
|
<div class="photo-cell" data-asset-id="${a.id}">
|
|
<img src="${this.thumbUrl(a.id)}" alt="${this.esc(a.originalFileName)}" loading="lazy">
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
` : ""}
|
|
`;
|
|
}
|
|
|
|
private renderAlbum(): string {
|
|
const album = this.selectedAlbum!;
|
|
return `
|
|
<div class="rapp-nav">
|
|
<button class="rapp-nav__back" data-back="gallery">\u2190 Photos</button>
|
|
<span class="rapp-nav__title">${this.esc(album.albumName)}</span>
|
|
<div class="rapp-nav__actions">
|
|
<a class="rapp-nav__btn rapp-nav__btn--secondary" href="${this.getImmichUrl()}/albums/${album.id}" target="_blank" rel="noopener">
|
|
Open in Immich
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
${this.albumAssets.length === 0 ? `
|
|
<div class="empty">
|
|
<div class="empty-icon">📷</div>
|
|
<h3>Album is empty</h3>
|
|
<p>Add photos to this album in Immich.</p>
|
|
</div>
|
|
` : `
|
|
<div class="photo-grid">
|
|
${this.albumAssets.map((a) => `
|
|
<div class="photo-cell" data-asset-id="${a.id}">
|
|
<img src="${this.thumbUrl(a.id)}" alt="${this.esc(a.originalFileName)}" loading="lazy">
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
`}
|
|
`;
|
|
}
|
|
|
|
private renderLightbox(): string {
|
|
const asset = this.lightboxAsset!;
|
|
const info = asset.exifInfo;
|
|
const location = [info?.city, info?.country].filter(Boolean).join(", ");
|
|
const camera = [info?.make, info?.model].filter(Boolean).join(" ");
|
|
|
|
return `
|
|
<div class="lightbox" data-lightbox>
|
|
<button class="lightbox-close" data-close-lightbox>\u2715</button>
|
|
<img src="${this.originalUrl(asset.id)}" alt="${this.esc(asset.originalFileName)}">
|
|
<div class="lightbox-info">
|
|
${asset.originalFileName}
|
|
${location ? ` · ${this.esc(location)}` : ""}
|
|
${camera ? ` · ${this.esc(camera)}` : ""}
|
|
· ${this.formatDate(asset.fileCreatedAt)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private attachListeners() {
|
|
// Album cards
|
|
this.shadow.querySelectorAll("[data-album-id]").forEach((el) => {
|
|
el.addEventListener("click", () => {
|
|
const id = (el as HTMLElement).dataset.albumId!;
|
|
const album = this.albums.find((a) => a.id === id);
|
|
if (album) this.loadAlbum(album);
|
|
});
|
|
});
|
|
|
|
// Photo cells
|
|
this.shadow.querySelectorAll("[data-asset-id]").forEach((el) => {
|
|
el.addEventListener("click", () => {
|
|
const id = (el as HTMLElement).dataset.assetId!;
|
|
const assets = this.view === "album" ? this.albumAssets : this.assets;
|
|
const asset = assets.find((a) => a.id === id);
|
|
if (asset) this.openLightbox(asset);
|
|
});
|
|
});
|
|
|
|
// Back button
|
|
this.shadow.querySelectorAll("[data-back]").forEach((el) => {
|
|
el.addEventListener("click", () => {
|
|
this.selectedAlbum = null;
|
|
this.albumAssets = [];
|
|
this.view = "gallery";
|
|
this.render();
|
|
});
|
|
});
|
|
|
|
// Lightbox close
|
|
this.shadow.querySelector("[data-close-lightbox]")?.addEventListener("click", () => this.closeLightbox());
|
|
this.shadow.querySelector("[data-lightbox]")?.addEventListener("click", (e) => {
|
|
if ((e.target as HTMLElement).matches("[data-lightbox]")) this.closeLightbox();
|
|
});
|
|
}
|
|
|
|
private esc(s: string): string {
|
|
const d = document.createElement("div");
|
|
d.textContent = s || "";
|
|
return d.innerHTML;
|
|
}
|
|
}
|
|
|
|
customElements.define("folk-photo-gallery", FolkPhotoGallery);
|