d1ce5d0951
- Add matrix-js-sdk, marked, highlight.js, twemoji, @tanstack/svelte-virtual deps - Copy Matrix core layer: /matrix/, /stores/matrix.ts, /cache/, /services/ - Copy Matrix components: matrix/, message/, chat-layout/, chat-settings/ - Copy UI components: EmojiPicker, Twemoji, ImagePreviewModal, VirtualList - Copy utils: emojiData, twemoji, twemojiGlobal - Replace lucide-svelte with Material Symbols in SyncRecoveryBanner - Extend Avatar with xs size and status indicator prop - Fix ui.ts store conflict: re-export toasts from toast.svelte.ts - Add migration 020_matrix_credentials for storing Matrix tokens per user/org - Add /api/matrix-credentials endpoint (GET/POST/DELETE) - Create [orgSlug]/chat page with Matrix login form + full chat UI - Add Chat to sidebar navigation
104 lines
2.7 KiB
Svelte
104 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy } from 'svelte';
|
|
import ImagePreviewModal from '$lib/components/ui/ImagePreviewModal.svelte';
|
|
import { getAuthenticatedMediaUrl } from '$lib/matrix';
|
|
import { formatFileSize } from '../utils';
|
|
import type { MediaInfo } from '$lib/matrix/types';
|
|
|
|
interface Props {
|
|
type: 'image' | 'video' | 'audio' | 'file';
|
|
media: MediaInfo;
|
|
altText?: string;
|
|
}
|
|
|
|
let { type, media, altText = '' }: Props = $props();
|
|
|
|
let mediaUrl = $state<string | null>(null);
|
|
let isLoading = $state(true);
|
|
let showPreview = $state(false);
|
|
|
|
// Load authenticated media URL
|
|
$effect(() => {
|
|
if (media?.url) {
|
|
isLoading = true;
|
|
getAuthenticatedMediaUrl(media.url)
|
|
.then((url) => {
|
|
mediaUrl = url;
|
|
isLoading = false;
|
|
})
|
|
.catch(() => {
|
|
mediaUrl = media?.httpUrl || null;
|
|
isLoading = false;
|
|
});
|
|
}
|
|
});
|
|
|
|
// Cleanup blob URLs
|
|
onDestroy(() => {
|
|
if (mediaUrl?.startsWith('blob:')) {
|
|
URL.revokeObjectURL(mediaUrl);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if type === 'image'}
|
|
{#if isLoading}
|
|
<div class="w-48 h-32 bg-dark/50 rounded-lg animate-pulse flex items-center justify-center">
|
|
<span class="text-light/30 text-sm">Loading...</span>
|
|
</div>
|
|
{:else if mediaUrl}
|
|
<button
|
|
class="block max-w-md cursor-pointer"
|
|
onclick={() => (showPreview = true)}
|
|
>
|
|
<img
|
|
src={mediaUrl}
|
|
alt={altText}
|
|
class="rounded-lg max-h-80 object-contain bg-dark/50 hover:opacity-90 transition-opacity"
|
|
style="max-width: 100%;"
|
|
/>
|
|
</button>
|
|
{/if}
|
|
{:else if type === 'video' && mediaUrl}
|
|
<video
|
|
src={mediaUrl}
|
|
controls
|
|
class="rounded-lg max-w-md max-h-80 bg-dark/50"
|
|
>
|
|
<track kind="captions" />
|
|
</video>
|
|
{:else if type === 'audio' && mediaUrl}
|
|
<audio src={mediaUrl} controls class="w-full max-w-md">
|
|
<track kind="captions" />
|
|
</audio>
|
|
{:else if type === 'file'}
|
|
<a
|
|
href={mediaUrl || '#'}
|
|
download={media.filename}
|
|
class="flex items-center gap-3 px-4 py-3 bg-dark/50 rounded-lg hover:bg-dark/70 transition-colors max-w-sm"
|
|
>
|
|
<svg
|
|
class="w-8 h-8 text-primary shrink-0"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14,2 14,8 20,8" />
|
|
</svg>
|
|
<div class="min-w-0">
|
|
<p class="text-light truncate">{media.filename || altText}</p>
|
|
<p class="text-xs text-light/50">{formatFileSize(media.size)}</p>
|
|
</div>
|
|
</a>
|
|
{/if}
|
|
|
|
{#if showPreview && mediaUrl}
|
|
<ImagePreviewModal
|
|
src={mediaUrl}
|
|
alt={altText}
|
|
onClose={() => (showPreview = false)}
|
|
/>
|
|
{/if}
|