includio-cms 0.13.4 → 0.14.0

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to includio-cms are documented here.
 Generated from `src/lib/updates/` — do not edit manually.
 
+## 0.14.0 — 2026-03-24
+
+Video transcoding & optimization
+
+### Added
+- Auto-transcode uploaded videos to mp4 (h264) and webm (vp9) in background
+- Video styles system with status tracking (pending/processing/done/failed)
+- Admin maintenance: video transcoding card with batch transcode, purge & retranscode, SSE progress
+- Configurable video transcoding: formats, max resolution, CRF quality, concurrency
+- Skip logic: skip already-optimized mp4 h264 at 1080p or below, skip files over 500MB
+- Frontend video serves multiple source elements (webm, mp4, original fallback)
+- System info endpoint: CMS version, Node, PostgreSQL, ffmpeg (codec checks), sharp, OS diagnostics
+- Disk usage endpoint: breakdown per category (originals by type, image styles, video styles, posters)
+
+### Migration
+
+```sql
+CREATE TABLE IF NOT EXISTS video_styles (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  media_file_id UUID NOT NULL REFERENCES media_file(id) ON DELETE CASCADE,
+  name TEXT NOT NULL,
+  url TEXT NOT NULL,
+  width INTEGER,
+  height INTEGER,
+  format TEXT NOT NULL,
+  codec TEXT,
+  file_size INTEGER,
+  mime_type TEXT NOT NULL,
+  status TEXT NOT NULL DEFAULT 'pending',
+  error TEXT,
+  created_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE UNIQUE INDEX IF NOT EXISTS video_styles_unique_key
+ON video_styles (media_file_id, name);
+```
+
+### Notes
+
+Video transcoding requires ffmpeg with libx264 and libvpx-vp9 codecs. Graceful degradation if ffmpeg is unavailable.
+
 ## 0.13.4 — 2026-03-24
 
 Video poster regeneration, filename sanitization

package/ROADMAP.md

@@ -246,14 +246,24 @@
 - [x] `[chore]` `[P1]` Extracted video processing to reusable module <!-- files: src/lib/files-local/video.ts, src/lib/files-local/index.ts -->
 - [x] `[fix]` `[P1]` Filename sanitization normalizes Unicode to NFC <!-- files: src/lib/files-local/sanitizeFilename.ts -->
 
-## 0.14.0 — SEO module
+## 0.14.0 — Video transcoding
+
+- [x] `[feature]` `[P1]` Video styles system — auto-transcode to mp4 h264 + webm vp9 <!-- files: src/lib/db-postgres/schema/videoStyle.ts, src/lib/files-local/transcode.ts -->
+- [x] `[feature]` `[P1]` Background transcoding pipeline on upload with skip logic <!-- files: src/lib/core/server/media/styles/operations/generateDefaultVideoStyles.ts -->
+- [x] `[feature]` `[P1]` Admin maintenance: video transcoding card (batch, purge, SSE progress) <!-- files: src/lib/admin/client/maintenance/maintenance-page.svelte -->
+- [x] `[feature]` `[P2]` Frontend multi-source video delivery (webm, mp4, original) <!-- files: src/lib/sveltekit/components/video.svelte -->
+- [x] `[feature]` `[P2]` Configurable video transcoding in MediaConfig <!-- files: src/lib/types/cms.ts -->
+- [x] `[feature]` `[P2]` System info endpoint — CMS version, Node, PostgreSQL, ffmpeg, sharp, OS <!-- files: src/lib/admin/api/system-info.ts, src/lib/core/server/media/operations/getSystemInfo.ts -->
+- [x] `[feature]` `[P2]` Disk usage endpoint — breakdown per category (originals, image styles, video styles, posters) <!-- files: src/lib/admin/api/system-info.ts, src/lib/core/server/media/operations/getDiskUsage.ts -->
+
+## 0.15.0 — SEO module
 
 - [ ] `[feature]` `[P1]` SERP preview + character limits for title/description <!-- files: src/lib/admin/components/fields/seo-field.svelte -->
 - [ ] `[feature]` `[P1]` Global SEO settings
 - [ ] `[feature]` `[P1]` Dedicated frontend SEO components <!-- files: src/lib/sveltekit/components/seo.svelte -->
 - [ ] `[feature]` `[P2]` Sitemap generation
 
-## 0.15.0 — WCAG/ATAG compliance
+## 0.16.0 — WCAG/ATAG compliance
 
 - [ ] `[chore]` `[P0]` Full WCAG/ATAG audit
 - [ ] `[feature]` `[P0]` Accessibility rework based on audit findings

package/dist/admin/api/handler.js

@@ -7,7 +7,9 @@ import * as acceptInviteHandlers from './accept-invite.js';
 import * as mediaGcHandlers from './media-gc.js';
 import * as generateStylesHandlers from './generate-styles.js';
 import * as regeneratePostersHandlers from './regenerate-posters.js';
+import * as transcodeVideosHandlers from './transcode-videos.js';
 import * as uploadLimitHandlers from './upload-limit.js';
+import * as systemInfoHandlers from './system-info.js';
 import { requireAuth } from '../remote/middleware/auth.js';
 import { getCMS } from '../../core/cms.js';
 import { lookup } from 'mrmime';
@@ -21,7 +23,9 @@ export function createAdminApiHandler(options) {
         'media-gc': mediaGcHandlers,
         'generate-styles': generateStylesHandlers,
         'regenerate-posters': regeneratePostersHandlers,
+        'transcode-videos': transcodeVideosHandlers,
         'upload-limit': uploadLimitHandlers,
+        'system-info': systemInfoHandlers,
         ...options?.extraRoutes
     };
     const privateMediaGet = async (event) => {

package/dist/admin/api/media-gc.js

@@ -3,13 +3,15 @@ import { purgeAllImageStyles } from '../../core/server/media/operations/purgeIma
 import { getReconciliationReport, deleteOrphanedDiskFiles } from '../../core/server/media/operations/reconcileMedia.js';
 import { getStylesStatus } from '../../core/server/media/styles/operations/batchGenerateStyles.js';
 import { getVideoPosterStatus } from '../../core/server/media/operations/batchRegenerateVideoPosters.js';
+import { getVideoTranscodeStatus, purgeVideoStyles } from '../../core/server/media/operations/batchTranscodeVideos.js';
 import { json } from '@sveltejs/kit';
 export const GET = async ({ url }) => {
     requireRole('admin');
-    const [stylesStatus, report, videoPosterStatus] = await Promise.all([
+    const [stylesStatus, report, videoPosterStatus, videoTranscodeStatus] = await Promise.all([
         getStylesStatus(),
         getReconciliationReport(),
-        getVideoPosterStatus()
+        getVideoPosterStatus(),
+        getVideoTranscodeStatus()
     ]);
     return json({
         imageStylesCount: stylesStatus.existingStyles,
@@ -20,7 +22,12 @@ export const GET = async ({ url }) => {
         missingDiskRecords: report.missingDisk,
         videosCount: videoPosterStatus.videosCount,
         videosWithPosters: videoPosterStatus.videosWithPosters,
-        videosMissingPosters: videoPosterStatus.videosMissingPosters
+        videosMissingPosters: videoPosterStatus.videosMissingPosters,
+        videoStylesCount: videoTranscodeStatus.videoStylesCount,
+        videoStylesExpected: videoTranscodeStatus.videoStylesExpected,
+        videoStylesDone: videoTranscodeStatus.videoStylesDone,
+        videoStylesPending: videoTranscodeStatus.videoStylesPending,
+        videoStylesFailed: videoTranscodeStatus.videoStylesFailed
     });
 };
 export const DELETE = async ({ url }) => {
@@ -34,5 +41,9 @@ export const DELETE = async ({ url }) => {
         const result = await deleteOrphanedDiskFiles();
         return json(result);
     }
+    if (action === 'purge-video-styles') {
+        const result = await purgeVideoStyles();
+        return json(result);
+    }
     return json({ error: 'Unknown action' }, { status: 400 });
 };

package/dist/admin/api/system-info.d.ts

@@ -0,0 +1,2 @@
+import { type RequestHandler } from '@sveltejs/kit';
+export declare const GET: RequestHandler;

package/dist/admin/api/system-info.js

@@ -0,0 +1,9 @@
+import { requireRole } from '../remote/middleware/auth.js';
+import { getDiskUsage } from '../../core/server/media/operations/getDiskUsage.js';
+import { getSystemInfo } from '../../core/server/media/operations/getSystemInfo.js';
+import { json } from '@sveltejs/kit';
+export const GET = async () => {
+    requireRole('admin');
+    const [diskUsage, systemInfo] = await Promise.all([getDiskUsage(), getSystemInfo()]);
+    return json({ diskUsage, systemInfo });
+};

package/dist/admin/api/transcode-videos.d.ts

@@ -0,0 +1,2 @@
+import type { RequestHandler } from '@sveltejs/kit';
+export declare const POST: RequestHandler;

package/dist/admin/api/transcode-videos.js

@@ -0,0 +1,32 @@
+import { requireRole } from '../remote/middleware/auth.js';
+import { batchTranscodeVideos } from '../../core/server/media/operations/batchTranscodeVideos.js';
+export const POST = async () => {
+    requireRole('admin');
+    const abort = new AbortController();
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+        async start(controller) {
+            try {
+                for await (const event of batchTranscodeVideos(abort.signal)) {
+                    controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`));
+                }
+            }
+            catch (e) {
+                controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'error', error: e instanceof Error ? e.message : String(e) })}\n\n`));
+            }
+            finally {
+                controller.close();
+            }
+        },
+        cancel() {
+            abort.abort();
+        }
+    });
+    return new Response(stream, {
+        headers: {
+            'Content-Type': 'text/event-stream',
+            'Cache-Control': 'no-cache',
+            Connection: 'keep-alive'
+        }
+    });
+};

package/dist/admin/client/maintenance/maintenance-page.svelte

@@ -9,6 +9,9 @@
 	import PlayerStop from '@tabler/icons-svelte/icons/player-stop';
 	import CircleCheck from '@tabler/icons-svelte/icons/circle-check';
 	import Video from '@tabler/icons-svelte/icons/video';
+	import Transform from '@tabler/icons-svelte/icons/transform';
+	import Database from '@tabler/icons-svelte/icons/database';
+	import Server from '@tabler/icons-svelte/icons/server';
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as Card from '../../../components/ui/card/index.js';
 	import { toast } from 'svelte-sonner';
@@ -23,9 +26,45 @@
 		videosCount: number;
 		videosWithPosters: number;
 		videosMissingPosters: number;
+		videoStylesCount: number;
+		videoStylesExpected: number;
+		videoStylesDone: number;
+		videoStylesPending: number;
+		videoStylesFailed: number;
+	}
+
+	interface DiskUsage {
+		originals: { images: number; videos: number; audio: number; pdf: number; other: number; total: number };
+		imageStyles: { count: number; bytes: number };
+		videoStyles: { count: number; bytes: number };
+		posters: { count: number; bytes: number };
+		total: number;
+	}
+
+	interface SystemInfo {
+		cmsVersion: string;
+		nodeVersion: string;
+		postgresVersion: string | null;
+		ffmpeg: { available: boolean; version: string | null; codecs: { h264: boolean; vp9: boolean } };
+		sharp: { available: boolean; version: string | null };
+		os: { platform: string; release: string; cpus: number; totalMemory: number };
+		uploads: { path: string };
+	}
+
+	interface SystemInfoResponse {
+		diskUsage: DiskUsage;
+		systemInfo: SystemInfo;
+	}
+
+	function formatBytes(bytes: number): string {
+		if (bytes === 0) return '0 B';
+		const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+		const i = Math.floor(Math.log(bytes) / Math.log(1024));
+		return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
 	}
 
 	let report = $state<GcReport | null>(null);
+	let sysInfo = $state<SystemInfoResponse | null>(null);
 	let loading = $state(true);
 	let purging = $state(false);
 	let cleaningOrphans = $state(false);
@@ -54,12 +93,35 @@
 
 	let posterPercent = $derived(posterTotal > 0 ? Math.round((posterProcessed / posterTotal) * 100) : 0);
 
+	// Video transcode state
+	let transcoding = $state(false);
+	let transTotal = $state(0);
+	let transProcessed = $state(0);
+	let transCreated = $state(0);
+	let transSkipped = $state(0);
+	let transCurrentFile = $state('');
+	let transErrors = $state(0);
+	let transAbort: AbortController | null = null;
+	let purgingVideoStyles = $state(false);
+
+	let transPercent = $derived(transTotal > 0 ? Math.round((transProcessed / transTotal) * 100) : 0);
+
+	let videoStylesMissing = $derived(
+		report ? report.videoStylesExpected - report.videoStylesDone : 0
+	);
+
 	async function loadReport() {
 		loading = true;
 		try {
-			const res = await fetch('/admin/api/media-gc');
-			if (!res.ok) throw new Error('Failed to load');
-			report = await res.json();
+			const [gcRes, sysRes] = await Promise.all([
+				fetch('/admin/api/media-gc'),
+				fetch('/admin/api/system-info')
+			]);
+			if (!gcRes.ok) throw new Error('Failed to load GC report');
+			report = await gcRes.json();
+			if (sysRes.ok) {
+				sysInfo = await sysRes.json();
+			}
 		} catch {
 			toast.error('Nie udało się załadować raportu');
 		} finally {
@@ -239,6 +301,92 @@
 		posterAbort?.abort();
 	}
 
+	async function startTranscode() {
+		transcoding = true;
+		transTotal = 0;
+		transProcessed = 0;
+		transCreated = 0;
+		transSkipped = 0;
+		transCurrentFile = '';
+		transErrors = 0;
+		transAbort = new AbortController();
+
+		try {
+			const res = await fetch('/admin/api/transcode-videos', {
+				method: 'POST',
+				signal: transAbort.signal
+			});
+
+			if (!res.ok) throw new Error('Failed to start');
+			if (!res.body) throw new Error('No response body');
+
+			const reader = res.body.getReader();
+			const decoder = new TextDecoder();
+			let buffer = '';
+
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+
+				buffer += decoder.decode(value, { stream: true });
+				const chunks = buffer.split('\n\n');
+				buffer = chunks.pop() || '';
+
+				for (const chunk of chunks) {
+					if (!chunk.startsWith('data: ')) continue;
+					const event = JSON.parse(chunk.slice(6));
+
+					transTotal = event.total ?? transTotal;
+					transProcessed = event.processed ?? transProcessed;
+					transCreated = event.created ?? transCreated;
+					transSkipped = event.skipped ?? transSkipped;
+					transCurrentFile = event.currentFile ?? transCurrentFile;
+
+					if (event.type === 'error') {
+						transErrors++;
+					}
+
+					if (event.type === 'done') {
+						const parts = [`Przetworzono ${transTotal} wariantów`];
+						if (transCreated > 0) parts.push(`utworzono ${transCreated}`);
+						if (transSkipped > 0) parts.push(`pominięto ${transSkipped}`);
+						if (transErrors > 0) parts.push(`${transErrors} błędów`);
+						toast.success(parts.join(', '));
+					}
+				}
+			}
+		} catch (e) {
+			if (e instanceof DOMException && e.name === 'AbortError') {
+				toast.info(`Przerwano po ${transProcessed}/${transTotal} wariantów`);
+			} else {
+				toast.error('Błąd podczas transkodowania');
+			}
+		} finally {
+			transcoding = false;
+			transAbort = null;
+			await loadReport();
+		}
+	}
+
+	function cancelTranscode() {
+		transAbort?.abort();
+	}
+
+	async function purgeVideoStylesAction() {
+		purgingVideoStyles = true;
+		try {
+			const res = await fetch('/admin/api/media-gc?action=purge-video-styles', { method: 'DELETE' });
+			if (!res.ok) throw new Error('Failed');
+			const data = await res.json();
+			toast.success(`Usunięto ${data.deletedCount} styli wideo (${data.filesDeleted} plików z dysku)`);
+			await loadReport();
+		} catch {
+			toast.error('Nie udało się usunąć styli wideo');
+		} finally {
+			purgingVideoStyles = false;
+		}
+	}
+
 	$effect(() => {
 		loadReport();
 	});
@@ -413,6 +561,108 @@
 				</Card.Content>
 			</Card.Root>
 
+			<!-- Video transcoding -->
+			<Card.Root>
+				<Card.Header>
+					<div class="flex items-center gap-2">
+						<Transform class="size-5" style="color: var(--primary);" />
+						<Card.Title>Transkodowanie wideo</Card.Title>
+					</div>
+					<Card.Description>
+						Warianty wideo (mp4 h264, webm vp9) zoptymalizowane do wyświetlania
+					</Card.Description>
+				</Card.Header>
+				<Card.Content>
+					<p class="mb-1 text-3xl font-bold" style="color: var(--primary);">
+						{report.videoStylesDone}
+						<span class="text-base font-normal" style="color: var(--muted-foreground);">/ {report.videoStylesExpected}</span>
+					</p>
+					<p class="mb-4 text-xs" style="color: var(--muted-foreground);">
+						{report.videosCount} filmów{report.videoStylesPending > 0 ? `, ${report.videoStylesPending} w kolejce` : ''}{report.videoStylesFailed > 0 ? `, ${report.videoStylesFailed} błędów` : ''}
+					</p>
+
+					{#if transcoding}
+						<div class="mb-4">
+							<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
+								<span>{transProcessed}/{transTotal} wariantów</span>
+								<span>{transPercent}%</span>
+							</div>
+							<div class="h-2 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
+								<div
+									class="h-full rounded-full transition-all duration-300"
+									style="width: {transPercent}%; background: var(--primary);"
+								></div>
+							</div>
+							<p class="mt-1 text-xs" style="color: var(--muted-foreground);">
+								Utworzono: {transCreated}, pominięto: {transSkipped}{transErrors > 0 ? `, błędów: ${transErrors}` : ''}
+							</p>
+							<p class="mt-0.5 truncate text-xs" style="color: var(--muted-foreground);">
+								{transCurrentFile}
+							</p>
+							<Button
+								variant="outline"
+								size="sm"
+								onclick={cancelTranscode}
+								class="mt-2"
+							>
+								<PlayerStop class="size-4" />
+								Anuluj
+							</Button>
+						</div>
+					{:else if videoStylesMissing > 0 || report.videoStylesFailed > 0}
+						<div class="mb-3">
+							{#if videoStylesMissing > 0}
+								<p class="mb-2 text-sm" style="color: var(--warning, #C4893A);">
+									Brakuje {videoStylesMissing} wariantów wideo.
+								</p>
+							{/if}
+							{#if report.videoStylesFailed > 0}
+								<p class="mb-2 text-sm" style="color: var(--error, #C44B4B);">
+									{report.videoStylesFailed} wariantów nie udało się wygenerować.
+								</p>
+							{/if}
+							<Button
+								variant="default"
+								size="sm"
+								onclick={startTranscode}
+							>
+								<PlayerPlay class="size-4" />
+								Transkoduj brakujące
+							</Button>
+						</div>
+					{:else if report.videosCount > 0}
+						<div class="mb-3 flex items-center gap-1.5 text-sm" style="color: var(--success, #3A8A5C);">
+							<CircleCheck class="size-4" />
+							Wszystkie warianty wygenerowane
+						</div>
+					{:else}
+						<div class="mb-3 flex items-center gap-1.5 text-sm" style="color: var(--success, #3A8A5C);">
+							<CircleCheck class="size-4" />
+							Brak plików wideo
+						</div>
+					{/if}
+
+					{#if report.videoStylesCount > 0}
+						<Button
+							variant="destructive"
+							size="sm"
+							onclick={purgeVideoStylesAction}
+							disabled={purgingVideoStyles || transcoding}
+						>
+							{#if purgingVideoStyles}
+								<Loader2 class="size-4 animate-spin" />
+							{:else}
+								<Trash class="size-4" />
+							{/if}
+							Usuń wszystkie i transkoduj ponownie
+						</Button>
+						<p class="mt-2 text-xs" style="color: var(--text-light);">
+							Warianty zostaną odtworzone przy następnym transkodowaniu
+						</p>
+					{/if}
+				</Card.Content>
+			</Card.Root>
+
 			<!-- Orphaned disk files -->
 			<Card.Root>
 				<Card.Header>
@@ -489,6 +739,154 @@
 					{/if}
 				</Card.Content>
 			</Card.Root>
+
+			<!-- Disk usage -->
+			{#if sysInfo}
+				{@const du = sysInfo.diskUsage}
+				<Card.Root>
+					<Card.Header>
+						<div class="flex items-center gap-2">
+							<Database class="size-5" style="color: var(--primary);" />
+							<Card.Title>Zużycie dysku</Card.Title>
+						</div>
+						<Card.Description>
+							Rozmiar plików mediów i wygenerowanych wariantów
+						</Card.Description>
+					</Card.Header>
+					<Card.Content>
+						<p class="mb-4 text-3xl font-bold" style="color: var(--primary);">
+							{formatBytes(du.total)}
+						</p>
+						<dl class="space-y-1.5 text-sm">
+							{#if du.originals.images > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Obrazy</dt>
+									<dd class="font-medium">{formatBytes(du.originals.images)}</dd>
+								</div>
+							{/if}
+							{#if du.originals.videos > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Wideo</dt>
+									<dd class="font-medium">{formatBytes(du.originals.videos)}</dd>
+								</div>
+							{/if}
+							{#if du.originals.audio > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Audio</dt>
+									<dd class="font-medium">{formatBytes(du.originals.audio)}</dd>
+								</div>
+							{/if}
+							{#if du.originals.pdf > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">PDF</dt>
+									<dd class="font-medium">{formatBytes(du.originals.pdf)}</dd>
+								</div>
+							{/if}
+							{#if du.originals.other > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Inne</dt>
+									<dd class="font-medium">{formatBytes(du.originals.other)}</dd>
+								</div>
+							{/if}
+							{#if du.imageStyles.count > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Style obrazów ({du.imageStyles.count})</dt>
+									<dd class="font-medium">{formatBytes(du.imageStyles.bytes)}</dd>
+								</div>
+							{/if}
+							{#if du.videoStyles.count > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Style wideo ({du.videoStyles.count})</dt>
+									<dd class="font-medium">{formatBytes(du.videoStyles.bytes)}</dd>
+								</div>
+							{/if}
+							{#if du.posters.count > 0}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Postery/miniaturki ({du.posters.count})</dt>
+									<dd class="font-medium">{formatBytes(du.posters.bytes)}</dd>
+								</div>
+							{/if}
+						</dl>
+					</Card.Content>
+				</Card.Root>
+
+				<!-- System info -->
+				{@const si = sysInfo.systemInfo}
+				<Card.Root>
+					<Card.Header>
+						<div class="flex items-center gap-2">
+							<Server class="size-5" style="color: var(--primary);" />
+							<Card.Title>System</Card.Title>
+						</div>
+						<Card.Description>
+							Informacje o środowisku i zależnościach
+						</Card.Description>
+					</Card.Header>
+					<Card.Content>
+						<dl class="space-y-1.5 text-sm">
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">includio-cms</dt>
+								<dd class="font-medium">{si.cmsVersion}</dd>
+							</div>
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">Node.js</dt>
+								<dd class="font-medium">{si.nodeVersion}</dd>
+							</div>
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">PostgreSQL</dt>
+								<dd class="font-medium">{si.postgresVersion ?? 'niedostępny'}</dd>
+							</div>
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">ffmpeg</dt>
+								<dd class="font-medium">
+									{#if si.ffmpeg.available}
+										{si.ffmpeg.version}
+									{:else}
+										<span style="color: var(--error, #C44B4B);">niedostępny</span>
+									{/if}
+								</dd>
+							</div>
+							{#if si.ffmpeg.available}
+								<div class="flex justify-between">
+									<dt style="color: var(--muted-foreground);">Kodeki</dt>
+									<dd class="flex gap-1.5 font-medium">
+										<span
+											class="rounded px-1.5 py-0.5 text-xs"
+											style="background: {si.ffmpeg.codecs.h264 ? 'var(--success, #3A8A5C)' : 'var(--error, #C44B4B)'}; color: white;"
+										>h264</span>
+										<span
+											class="rounded px-1.5 py-0.5 text-xs"
+											style="background: {si.ffmpeg.codecs.vp9 ? 'var(--success, #3A8A5C)' : 'var(--error, #C44B4B)'}; color: white;"
+										>vp9</span>
+									</dd>
+								</div>
+							{/if}
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">sharp</dt>
+								<dd class="font-medium">
+									{#if si.sharp.available}
+										{si.sharp.version}
+									{:else}
+										<span style="color: var(--error, #C44B4B);">niedostępny</span>
+									{/if}
+								</dd>
+							</div>
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">OS</dt>
+								<dd class="font-medium">{si.os.platform} {si.os.release}</dd>
+							</div>
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">CPU / RAM</dt>
+								<dd class="font-medium">{si.os.cpus} rdzeni / {formatBytes(si.os.totalMemory)}</dd>
+							</div>
+							<div class="flex justify-between">
+								<dt style="color: var(--muted-foreground);">Katalog uploads</dt>
+								<dd class="max-w-[200px] truncate font-medium" title={si.uploads.path}>{si.uploads.path}</dd>
+							</div>
+						</dl>
+					</Card.Content>
+				</Card.Root>
+			{/if}
 		</div>
 
 		<!-- Refresh button -->

package/dist/core/fields/structuredToHtml.js

@@ -135,7 +135,26 @@ function renderNode(node, options) {
                 videoAttrs += ` width="${width}"`;
             if (height)
                 videoAttrs += ` height="${height}"`;
-            return `<video${videoAttrs}><source src="${escapeHtml(src)}"></video>`;
+            // Build source elements: transcoded styles first, then original
+            let sources = '';
+            const mediaData = attrs._media;
+            if (mediaData?.videoStyles) {
+                const styles = Object.values(mediaData.videoStyles)
+                    .filter((s) => s.status === 'done' && s.url);
+                // webm first, then mp4
+                styles.sort((a, b) => {
+                    if (a.mimeType === 'video/webm' && b.mimeType !== 'video/webm')
+                        return -1;
+                    if (a.mimeType !== 'video/webm' && b.mimeType === 'video/webm')
+                        return 1;
+                    return 0;
+                });
+                for (const style of styles) {
+                    sources += `<source src="${escapeHtml(resolveUrl(style.url, options.baseUrl))}" type="${escapeHtml(style.mimeType)}">`;
+                }
+            }
+            sources += `<source src="${escapeHtml(src)}">`;
+            return `<video${videoAttrs}>${sources}</video>`;
         }
         case 'table':
             return `<table>${children}</table>`;