Imrpove chat with gifs, videos, music player, redesigns and improved filesharing errors

server/src/routes/index.ts

@@ -1,5 +1,6 @@
 import { Express } from 'express';
 import healthRouter from './health';
+import klipyRouter from './klipy';
 import proxyRouter from './proxy';
 import usersRouter from './users';
 import serversRouter from './servers';
@@ -7,6 +8,7 @@ import joinRequestsRouter from './join-requests';
 
 export function registerRoutes(app: Express): void {
   app.use('/api', healthRouter);
+  app.use('/api', klipyRouter);
   app.use('/api', proxyRouter);
   app.use('/api/users', usersRouter);
   app.use('/api/servers', serversRouter);

server/src/routes/klipy.ts

@@ -0,0 +1,221 @@
+/* eslint-disable complexity, @typescript-eslint/no-explicit-any */
+import { Router } from 'express';
+import { getKlipyApiKey, hasKlipyApiKey } from '../config/variables';
+
+const router = Router();
+const KLIPY_API_BASE_URL = 'https://api.klipy.com/api/v1';
+const REQUEST_TIMEOUT_MS = 8000;
+const DEFAULT_PAGE = 1;
+const DEFAULT_PER_PAGE = 24;
+const MAX_PER_PAGE = 50;
+
+interface NormalizedMediaMeta {
+  url: string;
+  width?: number;
+  height?: number;
+}
+
+interface NormalizedKlipyGif {
+  id: string;
+  slug: string;
+  title?: string;
+  url: string;
+  previewUrl: string;
+  width: number;
+  height: number;
+}
+
+function pickFirst<T>(...values: (T | null | undefined)[]): T | undefined {
+  for (const value of values) {
+    if (value != null)
+      return value;
+  }
+
+  return undefined;
+}
+
+function sanitizeString(value: unknown): string | undefined {
+  if (typeof value !== 'string')
+    return undefined;
+
+  const trimmed = value.trim();
+
+  return trimmed || undefined;
+}
+
+function toPositiveNumber(value: unknown): number | undefined {
+  const parsed = Number(value);
+
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+function clampPositiveInt(value: unknown, fallback: number, max = Number.MAX_SAFE_INTEGER): number {
+  const parsed = Number(value);
+
+  if (!Number.isFinite(parsed) || parsed < 1)
+    return fallback;
+
+  return Math.min(Math.floor(parsed), max);
+}
+
+function normalizeMediaMeta(candidate: unknown): NormalizedMediaMeta | null {
+  if (!candidate)
+    return null;
+
+  if (typeof candidate === 'string') {
+    return { url: candidate };
+  }
+
+  if (typeof candidate === 'object' && candidate !== null) {
+    const url = sanitizeString((candidate as { url?: unknown }).url);
+
+    if (!url)
+      return null;
+
+    return {
+      url,
+      width: toPositiveNumber((candidate as { width?: unknown }).width),
+      height: toPositiveNumber((candidate as { height?: unknown }).height)
+    };
+  }
+
+  return null;
+}
+
+function pickGifMeta(sizeVariant: unknown): NormalizedMediaMeta | null {
+  const candidate = sizeVariant as {
+    gif?: unknown;
+    webp?: unknown;
+  } | undefined;
+
+  return normalizeMediaMeta(candidate?.gif) ?? normalizeMediaMeta(candidate?.webp);
+}
+
+function normalizeGifItem(item: any): NormalizedKlipyGif | null {
+  if (!item || typeof item !== 'object' || item.type === 'ad')
+    return null;
+
+  const lowVariant = pickFirst(item.file?.md, item.file?.sm, item.file?.xs, item.file?.hd);
+  const highVariant = pickFirst(item.file?.hd, item.file?.md, item.file?.sm, item.file?.xs);
+  const lowMeta = pickGifMeta(lowVariant);
+  const highMeta = pickGifMeta(highVariant);
+  const selectedMeta = highMeta ?? lowMeta;
+  const slug = sanitizeString(item.slug) ?? sanitizeString(item.id);
+
+  if (!slug || !selectedMeta?.url)
+    return null;
+
+  return {
+    id: slug,
+    slug,
+    title: sanitizeString(item.title),
+    url: selectedMeta.url,
+    previewUrl: lowMeta?.url ?? selectedMeta.url,
+    width: selectedMeta.width ?? lowMeta?.width ?? 0,
+    height: selectedMeta.height ?? lowMeta?.height ?? 0
+  };
+}
+
+function extractErrorMessage(payload: unknown): string | null {
+  if (!payload)
+    return null;
+
+  if (typeof payload === 'string')
+    return payload.slice(0, 240);
+
+  if (typeof payload === 'object' && payload !== null) {
+    const data = payload as { error?: unknown; message?: unknown };
+
+    if (typeof data.error === 'string')
+      return data.error;
+
+    if (typeof data.message === 'string')
+      return data.message;
+  }
+
+  return null;
+}
+
+router.get('/klipy/config', (_req, res) => {
+  res.json({ enabled: hasKlipyApiKey() });
+});
+
+router.get('/klipy/gifs', async (req, res) => {
+  if (!hasKlipyApiKey()) {
+    return res.status(503).json({ error: 'KLIPY is not configured on this server.' });
+  }
+
+  try {
+    const query = sanitizeString(req.query.q) ?? '';
+    const page = clampPositiveInt(req.query.page, DEFAULT_PAGE);
+    const perPage = clampPositiveInt(req.query.per_page, DEFAULT_PER_PAGE, MAX_PER_PAGE);
+    const customerId = sanitizeString(req.query.customer_id);
+    const locale = sanitizeString(req.query.locale);
+    const params = new URLSearchParams({
+      page: String(page),
+      per_page: String(perPage)
+    });
+
+    if (query)
+      params.set('q', query);
+
+    if (customerId)
+      params.set('customer_id', customerId);
+
+    if (locale)
+      params.set('locale', locale);
+
+    const endpoint = query ? 'search' : 'trending';
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    const response = await fetch(
+      `${KLIPY_API_BASE_URL}/${encodeURIComponent(getKlipyApiKey())}/gifs/${endpoint}?${params.toString()}`,
+      {
+        headers: { accept: 'application/json' },
+        signal: controller.signal
+      }
+    );
+
+    clearTimeout(timeout);
+
+    const text = await response.text();
+
+    let payload: unknown = null;
+
+    if (text) {
+      try {
+        payload = JSON.parse(text) as unknown;
+      } catch {
+        payload = text;
+      }
+    }
+
+    if (!response.ok) {
+      return res.status(response.status).json({
+        error: extractErrorMessage(payload) || 'Failed to fetch GIFs from KLIPY.'
+      });
+    }
+
+    const rawItems = Array.isArray((payload as any)?.data?.data)
+      ? (payload as any).data.data
+      : [];
+    const results = rawItems
+      .map((item: unknown) => normalizeGifItem(item))
+      .filter((item: NormalizedKlipyGif | null): item is NormalizedKlipyGif => !!item);
+
+    res.json({
+      enabled: true,
+      results,
+      hasNext: (payload as any)?.data?.has_next === true
+    });
+  } catch (error) {
+    if ((error as { name?: string })?.name === 'AbortError') {
+      return res.status(504).json({ error: 'KLIPY request timed out.' });
+    }
+
+    console.error('KLIPY GIF route error:', error);
+    res.status(502).json({ error: 'Failed to fetch GIFs from KLIPY.' });
+  }
+});
+
+export default router;

server/src/routes/servers.ts

@@ -66,13 +66,14 @@ router.post('/', async (req, res) => {
 
 router.put('/:id', async (req, res) => {
   const { id } = req.params;
-  const { ownerId, ...updates } = req.body;
+  const { currentOwnerId, ...updates } = req.body;
   const existing = await getServerById(id);
+  const authenticatedOwnerId = currentOwnerId ?? req.body.ownerId;
 
   if (!existing)
     return res.status(404).json({ error: 'Server not found' });
 
-  if (existing.ownerId !== ownerId)
+  if (existing.ownerId !== authenticatedOwnerId)
     return res.status(403).json({ error: 'Not authorized' });
 
   const server: ServerPayload = { ...existing, ...updates, lastSeen: Date.now() };