964598e41d
- Cursor-based feed endpoint using v_feed view with hashtag filtering - Like toggle (INSERT ON CONFLICT), comments CRUD - Feed delta endpoint for SSE-driven incremental updates - SSE client with Page Visibility API (pause/reconnect) - Responsive photo/video grid with infinite scroll - Hashtag filter chips, lightbox modal with comments - Media file serving via tower-http ServeDir Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
81 lines
3.3 KiB
Svelte
81 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import type { FeedUpload } from '$lib/types';
|
|
|
|
interface Props {
|
|
uploads: FeedUpload[];
|
|
onlike: (id: string) => void;
|
|
oncomment: (id: string) => void;
|
|
onselect: (upload: FeedUpload) => void;
|
|
}
|
|
|
|
let { uploads, onlike, oncomment, onselect }: Props = $props();
|
|
|
|
function isVideo(mime: string): boolean {
|
|
return mime.startsWith('video/');
|
|
}
|
|
|
|
function imageUrl(upload: FeedUpload): string {
|
|
if (upload.thumbnail_url) return upload.thumbnail_url;
|
|
if (upload.preview_url) return upload.preview_url;
|
|
return '';
|
|
}
|
|
</script>
|
|
|
|
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
|
{#each uploads as upload (upload.id)}
|
|
<div class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100">
|
|
<button
|
|
onclick={() => onselect(upload)}
|
|
class="block h-full w-full"
|
|
aria-label="Upload anzeigen"
|
|
>
|
|
{#if isVideo(upload.mime_type)}
|
|
<div class="flex h-full items-center justify-center bg-gray-800">
|
|
{#if imageUrl(upload)}
|
|
<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" />
|
|
{/if}
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<svg class="h-10 w-10 text-white/80" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{:else if imageUrl(upload)}
|
|
<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" loading="lazy" />
|
|
{:else}
|
|
<div class="flex h-full items-center justify-center text-gray-400">
|
|
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
</button>
|
|
|
|
<!-- Overlay with name and stats -->
|
|
<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2">
|
|
<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
|
|
<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
|
|
<button
|
|
class="pointer-events-auto flex items-center gap-0.5"
|
|
onclick={(e) => { e.stopPropagation(); onlike(upload.id); }}
|
|
>
|
|
<svg class="h-3.5 w-3.5 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
{upload.like_count}
|
|
</button>
|
|
<button
|
|
class="pointer-events-auto flex items-center gap-0.5"
|
|
onclick={(e) => { e.stopPropagation(); oncomment(upload.id); }}
|
|
>
|
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
{upload.comment_count}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|