🦉 video preview support

🦉 Update our README with more tactical information
🦉 Removing the additional first reaction chip
2026-04-18 00:17:12 +02:00 · 2026-04-17 23:43:49 +02:00 · 2026-04-16 12:08:34 +02:00 · 2026-04-16 11:55:55 +02:00 · 2026-04-16 00:26:21 +02:00 · 2026-04-15 23:09:03 +02:00
32 changed files with 1576 additions and 50 deletions
--- a/owl/README.md
+++ b/owl/README.md
@@ -0,0 +1,36 @@
+# Owl Folder
+
+owl.cx employs it's own cinny fork.
+
+this one should slowly introduce changes and features that are useful for a homeserver, and go even further into the direction of replacing teamspeak or discord.
+
+it does not try to keep up the typical matrix approach to have overengineered decisions in the chat, or avoid all kinds of exploits that are dangerous for federated servers, but less impactful for a single-server-instance.
+
+It still tries to _respect_ matrix as a tool, that can do all these things.
+
+In this owl folder should go all documents we produce for this Endeavour.
+
+## Goals
+
+ - [x] Find a way to build extensions that survive upstream merges best. This means, reduce contact point, create own files, even be in own folder if possible. This needs a thorough scan of the codebase.
+ - [ ] We will try to integrate `comms` project at some point. but this is a separate task, not needed yet. It will bring voice server to the rooms. comms uses a wasm system.
+ - [x] Try to find out how much we can change behaviour of the page with the _themes_ (skins) only. Some small silly things, like that reacting with a new emoji on a post should not be on the left side of a message, where currently it is embedded in a popup.
+ - [x] Find out how we can set that Twitter Emojis are standard - system emojis on windows are terrible.
+ - [x] Find out how we can set a theme by default for new users.
+ - [x] img tags in messages should be rendered, without requiring them to be on a local cache. We do not need to secure against identification attacks.
+ - [x] youtube links should create embedded players (if enabled).
+ - [x] 9gag links with videos should allow them to be played if possible on demand.
+
+
+## Commit Messages
+ 
+ - All Commits for OWL changes start with the Owl Emoji 🦉
+ - I do most commits as user
+
+## Code Guidelines
+
+ - This Repository follows the official cinny repo, but represents a custom modification.
+ - This means we have to keep Upstream Codebase mergable easy
+ - This means: /src/owl/ is the local override folder, longer implementations and definitions go
+ - Only required wirings, imports or unavoidable modifications should be in the main source code.
+ - Learn from owl commits
--- a/owl/REPORT-001-initial-research.md
+++ b/owl/REPORT-001-initial-research.md
@@ -0,0 +1,262 @@
+# OWL Research Report #001 - Initial Codebase Analysis
+
+Date: 2026-04-15
+
+This report covers the initial research into all goals outlined in the README, except comms integration (deferred).
+
+---
+
+## 1. Extension Strategy - Surviving Upstream Merges
+
+### Codebase Overview
+
+Cinny is a Vite 5 + React 18 SPA using TypeScript, Jotai for state, `@vanilla-extract/css` for styling, and the `folds` design system. Key layout:
+
+```
+src/
+  app/
+    components/    # Reusable React components (48 feature components)
+    features/      # Feature modules (17 major features)
+    hooks/         # Custom React hooks (~40 files)
+    pages/         # Page-level components (routing/auth)
+    plugins/       # Extension plugins (emoji, markdown, calls, etc.)
+    state/         # State management (Jotai atoms)
+    styles/        # CSS (Vanilla Extract)
+    utils/         # Utilities (matrix, room, sanitization, etc.)
+  client/          # Matrix client initialization
+  colors.css.ts    # Theme color definitions
+  index.tsx        # Application entry point
+```
+
+### No Plugin System
+
+Cinny has **no formal plugin/extension architecture**. All imports are static. The `plugins/` directory is just a naming convention for utility modules, not a registration system.
+
+### Recommended Isolation Strategy
+
+All custom owl code lives in a single `src/owl/` directory tree. React and Vite don't care where files live — imports are just paths. This keeps everything in one place that upstream will never touch, making it easy to see the full scope of our fork and trivial to manage across merges.
+
+```
+src/owl/
+  components/        # Our custom UI components (YouTubeEmbedCard, etc.)
+  features/          # Our custom feature modules
+  hooks/             # Our custom hooks
+  plugins/           # Our custom plugins
+  state/             # Our custom Jotai atoms & settings
+  styles/            # Our custom CSS (Vanilla Extract)
+  utils/             # Our custom utilities (sanitizer overrides, etc.)
+```
+
+Upstream files import our code via relative paths like `import { YouTubeEmbed } from '../../../owl/components/YouTubeEmbed'`. These one-liner injection points are the only upstream modifications needed and are easy to re-apply after a merge.
+
+### Injection Points (unavoidable upstream edits)
+
+These are the upstream files we'll need to add small imports/calls into. Each edit should be minimal — ideally a single import + one-liner call to owl code, keeping the actual logic in `src/owl/`.
+
+| File | Why | Change Size |
+|------|-----|-------------|
+| `src/app/state/settings.ts` | Change defaults (twitterEmoji, theme) and add new settings (youtubeEmbed) | ~5 lines |
+| `src/app/utils/sanitize.ts` | Allow external img src URLs | ~10 lines |
+| `src/app/plugins/react-custom-html-parser.tsx` | Render external images directly | ~10 lines |
+| `src/app/components/RenderMessageContent.tsx` | Import & call owl YouTubeEmbedCard | ~5 lines |
+| `src/colors.css.ts` | Add custom themes (if needed) | ~lines for theme |
+| `src/app/hooks/useTheme.ts` | Register custom themes (if needed) | ~5 lines |
+| `src/app/pages/Router.tsx` | Only if adding new routes | ~5 lines |
+
+### Merge Strategy
+
+- All logic lives in `src/owl/` — upstream never touches it
+- Upstream edits are kept to minimal injection points (imports + short calls)
+- On upstream merge, only the injection points can conflict — re-apply them by hand if needed
+- Consider a `src/owl/INJECTIONS.md` file listing every upstream file we touch and why, so re-applying after merge is mechanical
+
+---
+
+## 2. Theming - What CSS Can and Cannot Change
+
+### What Themes Control
+
+Themes in Cinny are **color-only**. The `createTheme()` system from vanilla-extract exposes these token categories:
+
+- **Background**: Container, ContainerHover, ContainerActive, ContainerLine, OnContainer
+- **Surface**: Same pattern
+- **SurfaceVariant**: Same pattern
+- **Primary**: Main, MainHover, MainActive, MainLine, OnMain, Container variants, OnContainer
+- **Secondary**: Same as Primary
+- **Success / Warning / Critical**: Same as Primary
+- **Other**: FocusRing, Shadow, Overlay
+
+### What Themes CANNOT Change
+
+- **Layout/positioning** - Component layout is hardcoded in vanilla-extract style objects, not CSS variables
+- **Icon choices** - Icons are imported React components, not themeable
+- **Behavior** - Popup positioning, menu structure, click handlers are all JS
+- **Spacing/sizing** - Uses `folds` design tokens (`config.space`, `config.radii`, etc.) which are not part of the theme contract
+
+### Verdict
+
+**Themes alone cannot fix the reaction popup UX or change icons/menus.** They can only change colors. Layout, positioning, and behavioral changes require component modifications.
+
+---
+
+## 3. Reaction Popup UX
+
+### Current Mechanism
+
+The reaction picker is controlled by `src/app/features/room/message/Message.tsx`:
+
+- A toolbar (`MessageOptionsBase`) appears on message hover, positioned `top: -30px; right: 0` (absolute) via `src/app/features/room/message/styles.css.ts`
+- Clicking the emoji button captures `getBoundingClientRect()` and opens a `PopOut` component with `position="Bottom"` and `align="End"`
+- The emoji board renders inside this PopOut popup
+- There's also a context menu with `MessageQuickReactions` showing 4 recent emojis
+
+### What Would Need to Change
+
+To move reactions to a more sensible position:
+
+1. **styles.css.ts** - Change `MessageOptionsBase` positioning (top/right/bottom)
+2. **Message.tsx** - Change `PopOut` props (`position`, `align`) or replace PopOut with inline rendering
+3. Optionally: render the emoji board inline below the message instead of as a floating popup
+
+This is a **component-level change**, not achievable through themes.
+
+---
+
+## 4. Twitter Emoji (Twemoji) as Default
+
+### Current State
+
+- Setting exists: `twitterEmoji` in `src/app/state/settings.ts` (line 26)
+- **Default is `false`** (line 60)
+- Font files exist: `public/font/Twemoji.Mozilla.v15.1.0.ttf` and `.woff2`
+- Applied via CSS custom property `--font-emoji` in `src/app/pages/client/ClientNonUIFeatures.tsx` (lines 30-40)
+
+### How to Make It Default
+
+**One-line change** in `src/app/state/settings.ts`:
+
+```typescript
+// Line 60: change from
+twitterEmoji: false,
+// to
+twitterEmoji: true,
+```
+
+New users get `defaultSettings` merged with their (empty) localStorage. Existing users who never touched the toggle will also get the new default via the merge logic in `getSettings()` (lines 86-93).
+
+**Merge risk: LOW** - Single line change in a defaults object.
+
+---
+
+## 5. Default Theme for New Users
+
+### Current Defaults
+
+In `src/app/state/settings.ts` (lines 52-56):
+```typescript
+themeId: undefined,        // no manual override
+useSystemTheme: true,      // follow OS preference
+lightThemeId: undefined,   // fallback: LightTheme
+darkThemeId: undefined,    // fallback: DarkTheme
+```
+
+Theme resolution in `src/app/hooks/useTheme.ts`:
+- If `useSystemTheme` is true (default): detects OS preference, picks light/dark fallback
+- If disabled: uses `themeId`, falls back to LightTheme
+
+### Available Themes
+
+| ID | Name |
+|----|------|
+| `light-theme` | Light (default light) |
+| `silver-theme` | Silver |
+| `dark-theme` | Dark (default dark) |
+| `butter-theme` | Butter |
+
+### How to Set a Default Theme
+
+**Option A - Force a specific theme:**
+```typescript
+useSystemTheme: false,
+themeId: 'butter-theme',    // or any theme ID
+```
+
+**Option B - Change the dark/light fallbacks (keeps system detection):**
+```typescript
+darkThemeId: 'butter-theme',   // dark mode users get Butter
+lightThemeId: 'silver-theme',  // light mode users get Silver
+```
+
+**Merge risk: LOW** - Changes to defaults object only.
+
+---
+
+## 6. External IMG Tags in Messages
+
+### Current Behavior
+
+External image URLs are **blocked** at two levels:
+
+1. **Sanitization** (`src/app/utils/sanitize.ts`, lines 108-127): `transformImgTag` converts any `<img>` with non-`mxc://` src into an `<a>` link
+2. **React parser** (`src/app/plugins/react-custom-html-parser.tsx`, lines 476-494): Non-mxc images are rendered as links, not `<img>` elements
+
+This is a deliberate privacy measure for federated Matrix — loading external images reveals user IPs to image hosts.
+
+### What Needs to Change
+
+Since owl.cx is a single-server instance where this threat model doesn't apply:
+
+1. **sanitize.ts**: Modify `transformImgTag` to allow `https://` and `http://` src URLs through as `<img>` tags instead of converting to `<a>`
+2. **react-custom-html-parser.tsx**: Modify the `img` handler to render external URLs directly with `<img src={originalUrl}>` instead of converting to links
+
+### Suggested Approach
+
+Add an owl setting (e.g., `allowExternalImages: true`) and conditionally bypass the mxc-only restriction. This keeps the change isolated and opt-in.
+
+**Merge risk: MEDIUM** - Touching security-sensitive sanitization code. Keep changes minimal and well-isolated.
+
+---
+
+## 7. YouTube Link Embeds
+
+### Current State
+
+- **No YouTube handling exists** in the codebase
+- **`iframe` is NOT in the allowed tags** in sanitize.ts
+- URL previews exist (`UrlPreviewCard.tsx`) but only render Open Graph metadata cards (title, image, description) — no embeds
+- Settings exist: `urlPreview` and `encUrlPreview` booleans
+
+### What Needs to Be Built
+
+**Recommended approach**: Create a `YouTubeEmbedCard` component that slots into the existing URL preview system.
+
+1. **Create** `src/owl/components/YouTubeEmbedCard.tsx`:
+   - Detect YouTube URLs via regex (`youtube.com/watch?v=`, `youtu.be/`)
+   - Extract video ID
+   - Render `<iframe src="https://www.youtube.com/embed/{ID}" ...>`
+   - Include sandbox attributes for security
+
+2. **Modify** `src/app/components/RenderMessageContent.tsx`:
+   - In `renderUrlsPreview`, check if URL is YouTube before rendering `UrlPreviewCard`
+   - If YouTube and embed enabled, render `YouTubeEmbedCard` instead
+
+3. **Add setting** in `src/app/state/settings.ts`:
+   - `youtubeEmbed: boolean` (default: true for owl)
+
+4. **No need to modify sanitize.ts** for this — the iframe is rendered by our component, not parsed from message HTML.
+
+**Merge risk: LOW-MEDIUM** - Most code is new files. Only `RenderMessageContent.tsx` and `settings.ts` need upstream modifications.
+
+---
+
+## Priority Recommendations
+
+| Task | Effort | Risk | Recommendation |
+|------|--------|------|---------------|
+| Twemoji default | 1 line | Low | Do immediately |
+| Default theme | 2-3 lines | Low | Do immediately |
+| External images | ~30 lines | Medium | Do soon, add owl setting |
+| YouTube embeds | New component + ~20 lines changes | Low-Medium | Build as isolated component |
+| Reaction UX | Component restructure | Medium | Plan carefully, touches upstream |
+
+The first two are trivial defaults changes. External images and YouTube embeds can be built mostly in isolation. The reaction UX rework is the most invasive change and should be planned carefully to minimize merge conflict surface.
--- a/owl/REPORT-002-external-images.md
+++ b/owl/REPORT-002-external-images.md
@@ -0,0 +1,176 @@
+# OWL Report #002 - External Images: Settings & Scoping
+
+Date: 2026-04-15
+
+## The Question
+
+We've already removed the external image block (sanitize.ts + react-custom-html-parser.tsx). But should this be unconditional? Options:
+
+1. Global toggle (user setting)
+2. Per-room setting
+3. Automatic based on federation status
+4. Homeserver-level default via config.json
+
+## What Context Is Available at Render Time
+
+The key rendering call chain is:
+
+```
+RoomTimeline.tsx (has: room object, mx client, settings)
+  → getReactCustomHtmlParser(mx, roomId, params)
+    → HTMLReactParserOptions (handles img tags)
+      → RenderMessageContent (receives pre-built parser options)
+```
+
+At the `RoomTimeline` level (line 528 of `src/app/features/room/RoomTimeline.tsx`), we have:
+- Full `room` object (Room from matrix-js-sdk)
+- `mx` (MatrixClient) — knows the homeserver domain
+- All user settings via Jotai atoms
+
+### Federation Detection
+
+Rooms carry an `m.federate` flag in their `m.room.create` state event:
+```typescript
+const createEvent = getStateEvent(room, StateEvent.RoomCreate);
+const isFederated = createEvent?.getContent()?.['m.federate'] !== false;
+```
+Default is `true` (federated). Local-only rooms explicitly set `m.federate: false`.
+
+### Homeserver Detection
+
+We can tell if a message sender is local:
+```typescript
+const senderDomain = event.getSender()?.split(':')[1];
+const isLocal = senderDomain === mx.getDomain();
+```
+
+## Options Analysis
+
+### Option A: Global User Setting
+
+Add `allowExternalImages: boolean` to settings, default `false` (or `true` via config.json for owl).
+
+**Pros:** Simple, one toggle, works everywhere.
+**Cons:** All-or-nothing. A privacy-conscious user can't allow it for trusted rooms only.
+
+### Option B: Per-Room Setting (Room State Event)
+
+Store a custom state event like `cx.owl.room.settings` with `{ allowExternalImages: true }` per room. Room admins control it.
+
+**Pros:** Fine-grained, admin-controlled.
+**Cons:** Requires room admin action. UX overhead. Need UI for room settings. Only works in rooms we control.
+
+### Option C: Automatic by Federation Status
+
+If `m.federate === false` (local-only room) → allow external images. If federated → block.
+
+**Pros:** Zero configuration, matches the threat model (federated = untrusted external servers can leak IPs via images).
+**Cons:** Most rooms default to `m.federate: true` even on a single homeserver. Users would need to explicitly create non-federated rooms. Doesn't match the real intent — on owl.cx, all rooms are effectively local even if technically federated.
+
+### Option D: Homeserver-Level Default via config.json
+
+Add to config.json:
+```json
+{
+  "defaultSettings": {
+    "allowExternalImages": "homeserver"
+  }
+}
+```
+
+Where the value is one of: `"always"`, `"never"`, `"homeserver"` (only in rooms on this homeserver), `"local"` (only non-federated rooms).
+
+**Pros:** Server operator controls the policy. Matches the owl use case perfectly — "we trust our own server."
+**Cons:** More logic to implement. Need to define what "homeserver room" means (all members local? room alias local? room ID local?).
+
+### Option E: Layered Approach (Recommended)
+
+Combine a global setting with smart defaults:
+
+1. **Global setting** `externalImages`: `"always"` | `"never"` | `"homeserver"`
+   - Default: `"never"` (safe for general Cinny users)
+   - owl config.json sets: `"homeserver"` or `"always"`
+2. **"homeserver" mode**: allow external images when the room's server matches the user's homeserver (check room ID domain: `!roomid:owl.cx`)
+3. **Per-room override** (future): room admins can set `cx.owl.room.settings` state event to override
+
+This gives us:
+- Safe default for upstream/general use
+- owl.cx sets `"homeserver"` via config.json — external images work in all owl rooms
+- Users can override to `"always"` or `"never"` in settings
+- Room-level control can be added later without changing the architecture
+
+## Implementation Plan
+
+### Settings Layer
+
+**`src/app/state/settings.ts`:**
+```typescript
+// Add to Settings interface:
+externalImages: 'always' | 'never' | 'homeserver';
+
+// Add to defaultSettings:
+externalImages: 'never',
+```
+
+**`config.json` (owl deployment):**
+```json
+{
+  "defaultSettings": {
+    "externalImages": "homeserver"
+  }
+}
+```
+
+### Rendering Layer
+
+**`src/app/plugins/react-custom-html-parser.tsx`:**
+Add `allowExternalImages?: boolean` to the params type. When false, revert to the original behavior (convert external img to `<a>` link).
+
+**`src/app/features/room/RoomTimeline.tsx`:**
+Read the `externalImages` setting, check room context, compute the boolean `allowExternalImages`, pass it into `getReactCustomHtmlParser` params.
+
+```typescript
+const [externalImages] = useSetting(settingsAtom, 'externalImages');
+const allowExternalImages = useMemo(() => {
+  if (externalImages === 'always') return true;
+  if (externalImages === 'never') return false;
+  // 'homeserver': check if room belongs to our homeserver
+  const roomDomain = room.roomId.split(':')[1];
+  return roomDomain === mx.getDomain();
+}, [externalImages, room.roomId, mx]);
+```
+
+**`src/app/utils/sanitize.ts`:**
+`sanitizeCustomHtml` needs the flag too, since it runs before the React parser. Either:
+- Pass it as a parameter: `sanitizeCustomHtml(html, { allowExternalImages })`
+- Or move all image logic to the React parser (simpler — sanitizer just passes img tags through, parser decides what to render)
+
+The second approach is cleaner: the sanitizer allows img tags with any src (already done), and the React parser decides whether to render or convert to link based on the flag.
+
+### Settings UI
+
+Add a dropdown in `src/app/features/settings/general/General.tsx` under the "Media" or "Privacy" section:
+
+```
+External Images: [Always / Homeserver Only / Never]
+```
+
+### Files to Touch
+
+| File | Change |
+|------|--------|
+| `src/app/state/settings.ts` | Add `externalImages` to Settings + defaults |
+| `src/app/plugins/react-custom-html-parser.tsx` | Accept + check `allowExternalImages` param |
+| `src/app/features/room/RoomTimeline.tsx` | Compute flag from setting + room context, pass to parser |
+| `src/app/features/settings/general/General.tsx` | Add UI dropdown |
+| `src/app/utils/sanitize.ts` | Already done — img tags pass through |
+
+### What About the Sanitizer?
+
+Current state: we already removed the img→link conversion in `sanitize.ts`. For the settings-based approach, we have two options:
+
+**Option 1 (simpler):** Leave sanitize.ts as-is (allows all img src through). The React parser handles the allow/block decision. This means the sanitized HTML contains `<img src="https://...">` but the React parser may convert it to a link at render time.
+
+**Option 2 (stricter):** Restore the original sanitize.ts behavior and only bypass it when `allowExternalImages` is true. This requires passing options to `sanitizeCustomHtml`, which changes its signature and every call site.
+
+**Recommendation:** Option 1. The sanitizer's job is preventing XSS, not policy decisions. Let the React parser handle the rendering policy — it already has all the context it needs.
--- a/owl/REPORT-003-external-videos.md
+++ b/owl/REPORT-003-external-videos.md
@@ -0,0 +1,337 @@
+# OWL Report #003 - External Video Embeds (YouTube + Direct Video URLs)
+
+Date: 2026-04-17
+
+## The Goal
+
+Two README items merge naturally into one feature:
+
+- **YouTube links** should create embedded players (click-to-play).
+- **9gag-style direct video URLs** (e.g. `https://img-9gag-fun.9cache.com/photo/aYQnPXN_460svav1.mp4`) should be playable inline.
+
+Both are "external video in the timeline". They share the same wiring points (URL detection → card renderer in `RenderMessageContent.tsx`) and the same policy model (`'always' | 'homeserver' | 'never'`, mirroring the external-images setting). Different rendering tech: YouTube needs an iframe, direct videos use the `<video>` tag — but that's an internal detail of the renderer.
+
+---
+
+## Existing Plumbing We Will Reuse
+
+The external-images work (Report #002, now shipped) gave us the exact pattern to follow.
+
+| Piece | File | Role |
+|-------|------|------|
+| URL extraction | `src/app/utils/regex.ts` → `URL_REG` / `HTTP_URL_PATTERN` | Already pulls every http(s) URL out of message text |
+| URL classifier | `src/owl/utils/imageUrl.ts` → `isImageUrl()` | Pattern we will mirror for `isVideoUrl`/`isYouTubeUrl` |
+| Render dispatch | `src/app/components/RenderMessageContent.tsx:63-84` → `renderUrlsPreview` | The single place we branch per URL kind |
+| Card component | `src/owl/components/ExternalImageCard.tsx` | Exact shape to mirror |
+| Policy setting | `src/app/state/settings.ts:44` → `externalImages: ExternalImageMode` | Copy for `externalVideos` |
+| Policy hook | `src/owl/hooks/useAllowExternalImages.ts` | Copy for `useAllowExternalVideos` |
+| Settings UI | `src/app/features/settings/general/General.tsx:882-954` (`SelectExternalImages`) + mount at line 1043-1048 | Copy for `SelectExternalVideos` |
+| Matrix `<video>` element | `src/app/components/media/Video.tsx` | Already exists — reusable for direct video rendering |
+
+The key insight: `renderUrlsPreview` in `RenderMessageContent.tsx` is already where all URL-derived embeds dispatch. Today it routes images to `ExternalImageCard` and everything else to `UrlPreviewCard`. Adding video is one more branch in the same `filter()` chain. **No changes to `sanitize.ts` or the HTML parser are needed** — we are rendering from the URL list, not from user HTML.
+
+---
+
+## Part A — YouTube Embeds
+
+### Detection
+
+YouTube URL variants we want to catch:
+
+```
+https://www.youtube.com/watch?v=VIDEOID
+https://youtube.com/watch?v=VIDEOID&t=42s
+https://youtu.be/VIDEOID
+https://youtu.be/VIDEOID?t=42
+https://www.youtube.com/shorts/VIDEOID
+https://www.youtube.com/embed/VIDEOID
+https://m.youtube.com/watch?v=VIDEOID
+```
+
+Parse via `URL` rather than a mega-regex. That way a typo in the query string won't break detection:
+
+```ts
+// src/owl/utils/videoUrl.ts
+export function getYouTubeId(url: string): string | null {
+  try {
+    const u = new URL(url);
+    const host = u.hostname.replace(/^www\.|^m\./, '');
+    if (host === 'youtu.be') return u.pathname.slice(1).split('/')[0] || null;
+    if (host === 'youtube.com') {
+      if (u.pathname === '/watch') return u.searchParams.get('v');
+      const m = u.pathname.match(/^\/(shorts|embed|v)\/([^/]+)/);
+      if (m) return m[2];
+    }
+    return null;
+  } catch { return null; }
+}
+
+export function getYouTubeStart(url: string): number | null {
+  try {
+    const t = new URL(url).searchParams.get('t') ?? new URL(url).searchParams.get('start');
+    if (!t) return null;
+    // handle "42", "42s", "1m30s"
+    const m = t.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?/);
+    if (!m) return null;
+    return (+(m[1] || 0)) * 3600 + (+(m[2] || 0)) * 60 + (+(m[3] || 0));
+  } catch { return null; }
+}
+```
+
+### Rendering Strategy: "Facade" (Click-to-Load)
+
+Don't render the iframe eagerly. Two reasons:
+
+1. **Privacy**: YouTube's iframe (even on `youtube-nocookie.com`) phones home as soon as it mounts. Loading a full iframe for every YouTube link in a room scrollback is a tracking and performance problem.
+2. **Performance**: A YouTube iframe is ~500KB of JS per instance. Ten YouTube links in a channel would pin the tab.
+
+Instead: show a clickable thumbnail from `https://i.ytimg.com/vi/<ID>/hqdefault.jpg` with a play-button overlay. On click, swap to the iframe. This is the standard approach (used by Reddit, Discord, Mastodon front-ends).
+
+```
+┌───────────────────────────────────┐
+│  [ YouTube thumbnail image ]      │
+│       ▶  (big play button)        │
+│                                   │
+│  youtube.com/watch?v=dQw4w9WgXcQ  │
+└───────────────────────────────────┘
+   ↓ click
+┌───────────────────────────────────┐
+│  [ <iframe> YouTube player ]      │
+└───────────────────────────────────┘
+```
+
+### iframe Attributes
+
+When the user clicks to load:
+
+```tsx
+<iframe
+  src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1${start ? `&start=${start}` : ''}`}
+  title={`YouTube: ${id}`}
+  loading="lazy"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+  allowFullScreen
+  referrerPolicy="strict-origin-when-cross-origin"
+  // no sandbox attr — the full YouTube embed API needs scripts+same-origin, and
+  // youtube-nocookie is already an isolated origin. Sandbox breaks fullscreen.
+/>
+```
+
+Notes:
+
+- **`youtube-nocookie.com`** is the reduced-tracking variant and should be the default.
+- **Don't sandbox**. The YouTube player relies on `postMessage` and same-origin window access for its controls; sandboxing breaks fullscreen and picture-in-picture. The iframe is already origin-isolated.
+- **CSP**: Cinny's `vite.config.ts` / `public/config.json` don't set CSP headers — the deployment host does. owl.cx must allow `frame-src https://www.youtube-nocookie.com https://www.youtube.com` (and the `i.ytimg.com` image host). Flag this for deployment.
+
+### Component sketch
+
+```tsx
+// src/owl/components/YouTubeEmbedCard.tsx
+export const YouTubeEmbedCard = as<'div', { url: string }>(({ url, ...p }, ref) => {
+  const id = getYouTubeId(url);
+  const start = getYouTubeStart(url);
+  const [playing, setPlaying] = useState(false);
+  if (!id) return null;
+
+  return (
+    <Box direction="Column" gap="100" {...p} ref={ref}>
+      <div className={css.YouTubeFrame}>
+        {playing ? (
+          <iframe {...see above with id + start} />
+        ) : (
+          <button onClick={() => setPlaying(true)}>
+            <img src={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`} loading="lazy" />
+            <PlayOverlay />
+          </button>
+        )}
+      </div>
+      <Text as="a" href={url} target="_blank" rel="noreferrer">{url}</Text>
+    </Box>
+  );
+});
+```
+
+Aspect ratio: 16:9 (`aspect-ratio: 16 / 9` in CSS) with a sensible `max-width` (e.g. 480px) so it doesn't dominate the timeline.
+
+---
+
+## Part B — Direct Video URLs (9gag, etc.)
+
+### Detection
+
+Mirror `isImageUrl` exactly:
+
+```ts
+// src/owl/utils/videoUrl.ts
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.m4v'];
+
+export function isVideoUrl(url: string): boolean {
+  try {
+    const { pathname } = new URL(url);
+    return VIDEO_EXTENSIONS.some((ext) => pathname.toLowerCase().endsWith(ext));
+  } catch { return false; }
+}
+```
+
+**About 9gag specifically**: their `.webp` links served under `/photo/` are actually animated images (not video). The `.mp4` variant (`aYQnPXN_460svav1.mp4`) is a true MP4 and needs `<video>`. The path-segment `photo` is misleading — extension is what matters. Our image-extension list already handles `.webp`, so animated WebP 9gag links will flow through `ExternalImageCard` today (the `<img>` tag will animate them natively). MP4 variants will flow through the new video card. No special 9gag detection needed.
+
+### Rendering
+
+No facade needed — `<video>` with `preload="metadata"` only downloads the first few KB (metadata + poster frame). Users click play to stream.
+
+```tsx
+// src/owl/components/ExternalVideoCard.tsx
+export const ExternalVideoCard = as<'div', { url: string }>(({ url, ...p }, ref) => {
+  const [error, setError] = useState(false);
+  if (error) return null;
+  return (
+    <Box direction="Column" gap="100" {...p} ref={ref}>
+      <video
+        className={css.ExternalVideo}
+        src={url}
+        controls
+        preload="metadata"
+        playsInline
+        onError={() => setError(true)}
+      />
+      <Text as="a" href={url} target="_blank" rel="noreferrer">{url}</Text>
+    </Box>
+  );
+});
+```
+
+We can reuse the existing `<Video>` wrapper from `src/app/components/media/Video.tsx` if we want shared styling, but a new card mirroring `ExternalImageCard` is simpler and keeps all owl code in `src/owl/`.
+
+### Gotchas
+
+- **CORS / Hotlinking**: Some hosts (including Cloudflare sites) block hotlinked video with `Referer` checks. 9cache.com currently allows it — easy to verify empirically. If a host blocks us, `<video onError>` falls back (card hides itself). No leaking user IP because the threat model for owl is single-server — same as external images.
+- **Autoplay**: Do **not** autoplay. Browsers require `muted` for autoplay and it's user-hostile. `preload="metadata"` gives a poster frame without streaming the whole file.
+- **Mobile data**: `preload="metadata"` is the right default; don't change it to `auto`.
+
+---
+
+## Part C — Unified Wiring
+
+### Setting
+
+```ts
+// src/app/state/settings.ts
+export type ExternalVideoMode = 'always' | 'homeserver' | 'never';
+
+// add to Settings interface:
+externalVideos: ExternalVideoMode;
+
+// add to defaultSettings:
+externalVideos: 'never',   // upstream-safe default
+```
+
+owl.cx `config.json` overrides to `'homeserver'` (or `'always'`) via the same `defaultSettings` mechanism that external-images already uses.
+
+Open question: **single setting or two?** My recommendation is **one setting `externalVideos` covering both YouTube and direct video**, because:
+
+- They have the same privacy/trust model from the user's point of view ("do I trust external video hosts?").
+- Two toggles create decision fatigue for a feature that's largely "on or off".
+- If we later want finer control, splitting later is easier than merging later.
+
+If we ever need YouTube-specific controls (e.g. "block YouTube but allow direct video" for a super-privacy-conscious user), we can add it then. Don't design for the hypothetical.
+
+### Hook
+
+```ts
+// src/owl/hooks/useAllowExternalVideos.ts  (one-to-one copy of useAllowExternalImages)
+export function useAllowExternalVideos(mx: MatrixClient, room: Room): boolean {
+  const [externalVideos] = useSetting(settingsAtom, 'externalVideos');
+  return useMemo(() => {
+    if (externalVideos === 'always') return true;
+    if (externalVideos === 'never') return false;
+    return room.roomId.split(':')[1] === mx.getDomain();
+  }, [externalVideos, room.roomId, mx]);
+}
+```
+
+### Dispatch in `RenderMessageContent.tsx`
+
+The current branch (lines 63-84):
+
+```ts
+const imageUrls = filteredUrls.filter(isImageUrl);
+const otherUrls = filteredUrls.filter((url) => !isImageUrl(url));
+```
+
+Becomes:
+
+```ts
+const imageUrls   = filteredUrls.filter(isImageUrl);
+const youtubeUrls = filteredUrls.filter((u) => !isImageUrl(u) && getYouTubeId(u));
+const videoUrls   = filteredUrls.filter((u) => !isImageUrl(u) && !getYouTubeId(u) && isVideoUrl(u));
+const otherUrls   = filteredUrls.filter(
+  (u) => !isImageUrl(u) && !getYouTubeId(u) && !isVideoUrl(u)
+);
+```
+
+And render each list with its card. **Gating**: `RenderMessageContent` doesn't currently take `allowExternalVideos` as a prop — we'd either add one (mirroring the eventual external-images gating if/when it lands here), or gate inside the new card component by reading the hook. Reading inside the card is simpler but requires the card to know its room context. Passing a prop down from `RoomTimeline` is cleaner and matches how `urlPreview` already flows. **Recommendation: prop.**
+
+The prop flow would be:
+
+- `RoomTimeline.tsx:451` — already calls `useAllowExternalImages(mx, room)`. Add a sibling `useAllowExternalVideos(mx, room)`.
+- `RoomTimeline.tsx` — pass `allowExternalVideos` into `RenderMessageContent` (need to find where `RenderMessageContent` is rendered in the timeline and thread it through; currently `allowExternalImages` goes into `getReactCustomHtmlParser` at line 533, not into `RenderMessageContent`, because images are gated inside HTML parsing. Video gating is different — it gates URL-derived embeds, not parsed HTML — so we pass directly to `RenderMessageContent`).
+
+### Settings UI
+
+In `General.tsx`, copy `SelectExternalImages` (lines 882-954) to `SelectExternalVideos`, and add a `SettingTile` row mirroring lines 1043-1048:
+
+```tsx
+<SequenceCard ...>
+  <SettingTile title="External Videos" after={<SelectExternalVideos />} />
+</SequenceCard>
+```
+
+---
+
+## Files Touched
+
+| File | Kind | Change size |
+|------|------|-------------|
+| `src/owl/utils/videoUrl.ts` | NEW | `isVideoUrl`, `getYouTubeId`, `getYouTubeStart` |
+| `src/owl/components/YouTubeEmbedCard.tsx` | NEW | Facade + iframe |
+| `src/owl/components/YouTubeEmbedCard.css.ts` | NEW | Aspect-ratio, thumbnail, play button |
+| `src/owl/components/ExternalVideoCard.tsx` | NEW | `<video>` card |
+| `src/owl/components/ExternalVideoCard.css.ts` | NEW | Sizing |
+| `src/owl/hooks/useAllowExternalVideos.ts` | NEW | Mirror of images hook |
+| `src/app/state/settings.ts` | edit | +2 lines (type + default) |
+| `src/app/components/RenderMessageContent.tsx` | edit | ~10 lines: import cards, filter branches, render |
+| `src/app/features/room/RoomTimeline.tsx` | edit | ~2 lines: add hook call, pass prop |
+| `src/app/features/settings/general/General.tsx` | edit | ~80 lines: copy `SelectExternalImages` → `SelectExternalVideos`, add tile row |
+
+Upstream surface area: the three `src/app/...` edits. All feature logic (detection, rendering, policy hook, both cards, both CSS files) lives in `src/owl/`.
+
+**Merge risk: LOW.** Pure additive change. No sanitizer or HTML-parser changes. If upstream touches `renderUrlsPreview` in `RenderMessageContent.tsx`, the branch addition is mechanical to re-apply.
+
+---
+
+## Security Summary
+
+| Concern | Mitigation |
+|---------|------------|
+| YouTube tracking | `youtube-nocookie.com`, facade (no iframe until user click), `referrerPolicy="strict-origin-when-cross-origin"` |
+| iframe XSS | YouTube iframe is on a separate origin — no DOM access to our app. No sandbox needed (and it breaks fullscreen). |
+| Video host IP leak | Same as external images: single-server threat model, already accepted by owl. Setting defaults to `'never'` for upstream. |
+| Video MIME spoofing | Browser validates MIME before playback; `<video>` rejects non-video payloads. `onError` hides the card. |
+| CSP | Deployment-side: owl.cx host config must permit `frame-src youtube-nocookie.com`, `img-src i.ytimg.com`, `media-src *` (or allowlist). Flag for deploy. |
+| Malicious autoplay | We never autoplay until user clicks. |
+
+---
+
+## Recommendation & Priority
+
+**Build this as one PR**, in this order:
+
+1. `src/owl/utils/videoUrl.ts` + unit-style smoke test (throwaway URLs in dev console is fine — this is a client app, no test infra being set up for this).
+2. `ExternalVideoCard` (easier, mostly static markup).
+3. `YouTubeEmbedCard` with facade.
+4. Settings wiring + UI row.
+5. Manual test on owl.cx dev with: YouTube watch link, `youtu.be` short link, link with `?t=` timestamp, `youtube.com/shorts/`, a 9gag mp4, an arbitrary `.webm`, and a broken URL.
+
+Overall risk: LOW. The pattern is copy-paste from external images, the only genuinely new code is the YouTube facade and the setting row.
+
+One thing to explicitly decide with the user before implementing: **single `externalVideos` setting vs. split `youtubeEmbed` + `directVideoEmbed`**. My recommendation is single; flagging it so we don't bikeshed after the PR is up.
--- a/package-lock.json
+++ b/package-lock.json
@@ -6041,7 +6041,7 @@
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "devOptional": true
+      "optional": true
    },
    "node_modules/acorn": {
      "version": "8.14.0",
@@ -6885,7 +6885,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "devOptional": true,
+      "optional": true,
      "engines": {
        "node": ">=10"
      }
@@ -9498,7 +9498,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "devOptional": true,
+      "optional": true,
      "dependencies": {
        "minipass": "^3.0.0"
      },
@@ -9510,7 +9510,7 @@
      "version": "3.3.6",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "devOptional": true,
+      "optional": true,
      "dependencies": {
        "yallist": "^4.0.0"
      },
@@ -9522,7 +9522,7 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "optional": true
    },
    "node_modules/fs.realpath": {
      "version": "1.0.0",
@@ -10448,6 +10448,7 @@
      "integrity": "sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==",
      "dev": true,
      "license": "ISC",
+      "optional": true,
      "engines": {
        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
      }
@@ -12284,7 +12285,7 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "devOptional": true,
+      "optional": true,
      "engines": {
        "node": ">=8"
      }
@@ -12293,7 +12294,7 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "devOptional": true,
+      "optional": true,
      "dependencies": {
        "minipass": "^3.0.0",
        "yallist": "^4.0.0"
@@ -12306,7 +12307,7 @@
      "version": "3.3.6",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "devOptional": true,
+      "optional": true,
      "dependencies": {
        "yallist": "^4.0.0"
      },
@@ -12318,13 +12319,13 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "optional": true
    },
    "node_modules/mkdirp": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "devOptional": true,
+      "optional": true,
      "bin": {
        "mkdirp": "bin/cmd.js"
      },
@@ -12465,7 +12466,7 @@
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
-      "devOptional": true,
+      "optional": true,
      "dependencies": {
        "abbrev": "1"
      },
@@ -17414,7 +17415,7 @@
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "devOptional": true,
+      "optional": true,
      "dependencies": {
        "chownr": "^2.0.0",
        "fs-minipass": "^2.0.0",
@@ -17431,7 +17432,7 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "optional": true
    },
    "node_modules/temp-dir": {
      "version": "2.0.0",
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -25,6 +25,11 @@ import {
  VideoContent,
 } from './message';
 import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
+import { ExternalImageCard } from '../../owl/components/ExternalImageCard';
+import { ExternalVideoCard } from '../../owl/components/ExternalVideoCard';
+import { YouTubeEmbedCard } from '../../owl/components/YouTubeEmbedCard';
+import { isImageUrl } from '../../owl/utils/imageUrl';
+import { getYouTubeId, isVideoUrl } from '../../owl/utils/videoUrl';
 import { Image, MediaControl, Video } from './media';
 import { ImageViewer } from './image-viewer';
 import { PdfViewer } from './Pdf-viewer';
@@ -40,6 +45,7 @@ type RenderMessageContentProps = {
  getContent: <T>() => T;
  mediaAutoLoad?: boolean;
  urlPreview?: boolean;
+  allowExternalVideos?: boolean;
  highlightRegex?: RegExp;
  htmlReactParserOptions: HTMLReactParserOptions;
  linkifyOpts: Opts;
@@ -53,6 +59,7 @@ export function RenderMessageContent({
  getContent,
  mediaAutoLoad,
  urlPreview,
+  allowExternalVideos,
  highlightRegex,
  htmlReactParserOptions,
  linkifyOpts,
@@ -61,12 +68,38 @@ export function RenderMessageContent({
  const renderUrlsPreview = (urls: string[]) => {
    const filteredUrls = urls.filter((url) => !testMatrixTo(url));
    if (filteredUrls.length === 0) return undefined;
+
+    const imageUrls = filteredUrls.filter(isImageUrl);
+    const nonImage = filteredUrls.filter((url) => !isImageUrl(url));
+    const youtubeUrls = allowExternalVideos
+      ? nonImage.filter((url) => getYouTubeId(url) !== null)
+      : [];
+    const videoUrls = allowExternalVideos
+      ? nonImage.filter((url) => getYouTubeId(url) === null && isVideoUrl(url))
+      : [];
+    const otherUrls = nonImage.filter(
+      (url) => !youtubeUrls.includes(url) && !videoUrls.includes(url)
+    );
+
    return (
+      <>
+        {imageUrls.map((url) => (
+          <ExternalImageCard key={url} url={url} />
+        ))}
+        {youtubeUrls.map((url) => (
+          <YouTubeEmbedCard key={url} url={url} />
+        ))}
+        {videoUrls.map((url) => (
+          <ExternalVideoCard key={url} url={url} />
+        ))}
+        {otherUrls.length > 0 && (
          <UrlPreviewHolder>
-        {filteredUrls.map((url) => (
+            {otherUrls.map((url) => (
              <UrlPreviewCard key={url} url={url} ts={ts} />
            ))}
          </UrlPreviewHolder>
+        )}
+      </>
    );
  };
  const renderCaption = () => {
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -5,6 +5,7 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import { Avatar, Box, Chip, Header, Icon, Icons, Text, config } from 'folds';
 import { Opts as LinkifyOpts } from 'linkifyjs';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useAllowExternalImages } from '../../../owl/hooks/useAllowExternalImages';
 import {
  factoryRenderLinkifyWithMention,
  getReactCustomHtmlParser,
@@ -76,6 +77,7 @@ export function SearchResultGroup({
 }: SearchResultGroupProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
+  const allowExternalImages = useAllowExternalImages(mx, room);
  const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);

  const powerLevels = usePowerLevels(room);
@@ -106,6 +108,7 @@ export function SearchResultGroup({
        linkifyOpts,
        highlightRegex,
        useAuthentication,
+        allowExternalImages,
        handleSpoilerClick: spoilerClickHandler,
        handleMentionClick: mentionClickHandler,
      }),
@@ -117,6 +120,7 @@ export function SearchResultGroup({
      mentionClickHandler,
      spoilerClickHandler,
      useAuthentication,
+      allowExternalImages,
    ]
  );

--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -116,6 +116,8 @@ import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useAllowExternalImages } from '../../../owl/hooks/useAllowExternalImages';
+import { useAllowExternalVideos } from '../../../owl/hooks/useAllowExternalVideos';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { useIsDirectRoom } from '../../hooks/useRoom';
@@ -447,6 +449,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
  const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+  const allowExternalImages = useAllowExternalImages(mx, room);
+  const allowExternalVideos = useAllowExternalVideos(mx, room);

  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
@@ -528,10 +532,11 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
      getReactCustomHtmlParser(mx, room.roomId, {
        linkifyOpts,
        useAuthentication,
+        allowExternalImages,
        handleSpoilerClick: spoilerClickHandler,
        handleMentionClick: mentionClickHandler,
      }),
-    [mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication]
+    [mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication, allowExternalImages]
  );
  const parseMemberEvent = useMemberEventParser();

@@ -1104,6 +1109,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                getContent={getContent}
                mediaAutoLoad={mediaAutoLoad}
                urlPreview={showUrlPreview}
+                allowExternalVideos={allowExternalVideos}
                htmlReactParserOptions={htmlReactParserOptions}
                linkifyOpts={linkifyOpts}
                outlineAttachment={messageLayout === MessageLayout.Bubble}
@@ -1210,6 +1216,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                      getContent={getContent}
                      mediaAutoLoad={mediaAutoLoad}
                      urlPreview={showUrlPreview}
+                      allowExternalVideos={allowExternalVideos}
                      htmlReactParserOptions={htmlReactParserOptions}
                      linkifyOpts={linkifyOpts}
                      outlineAttachment={messageLayout === MessageLayout.Bubble}
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -79,6 +79,7 @@ import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
+import { timeHourMinute } from '../../../utils/time';

 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;

@@ -813,6 +814,15 @@ export const Message = as<'div', MessageProps>(
      </AvatarBase>
    );

+    const visibleReactions = relations?.getSortedAnnotationsByKey();
+    const hasVisibleReactions = !!visibleReactions && visibleReactions.some(
+      ([key, events]) => typeof key === 'string' && Array.from(events).length > 0
+    );
+
+    const handleInlineAddReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
+      setEmojiBoardAnchor(evt.currentTarget.getBoundingClientRect());
+    };
+
    const msgContentJSX = (
      <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
        {reply}
@@ -831,7 +841,11 @@ export const Message = as<'div', MessageProps>(
        ) : (
          children
        )}
-        {reactions}
+        {reactions && React.isValidElement(reactions)
+          ? React.cloneElement(reactions as React.ReactElement<any>, {
+              onAddReaction: handleInlineAddReaction,
+            })
+          : reactions}
      </Box>
    );

@@ -1129,6 +1143,17 @@ export const Message = as<'div', MessageProps>(
            </Menu>
          </div>
        )}
+        {!edit && collapse && messageLayout !== MessageLayout.Compact
+          && (hover || !!emojiBoardAnchor) && (
+          <Text
+            className={css.CollapsedTime}
+            as="time"
+            size="T200"
+            priority="300"
+          >
+            {timeHourMinute(mEvent.getTs(), hour24Clock)}
+          </Text>
+        )}
        {messageLayout === MessageLayout.Compact && (
          <CompactLayout before={headerJSX} onContextMenu={handleContextMenu}>
            {msgContentJSX}
--- a/src/app/features/room/message/Reactions.tsx
+++ b/src/app/features/room/message/Reactions.tsx
@@ -23,6 +23,7 @@ import * as css from './styles.css';
 import { ReactionViewer } from '../reaction-viewer';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { AddReactionButton } from '../../../../owl/components/AddReactionButton';

 export type ReactionsProps = {
  room: Room;
@@ -30,9 +31,10 @@ export type ReactionsProps = {
  canSendReaction?: boolean;
  relations: Relations;
  onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
+  onAddReaction?: MouseEventHandler<HTMLButtonElement>;
 };
 export const Reactions = as<'div', ReactionsProps>(
-  ({ className, room, relations, mEventId, canSendReaction, onReactionToggle, ...props }, ref) => {
+  ({ className, room, relations, mEventId, canSendReaction, onReactionToggle, onAddReaction, ...props }, ref) => {
    const mx = useMatrixClient();
    const useAuthentication = useMediaAuthentication();
    const [viewer, setViewer] = useState<boolean | string>(false);
@@ -41,6 +43,9 @@ export const Reactions = as<'div', ReactionsProps>(
      relations,
      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
    );
+    const visibleCount = reactions.filter(
+      ([key, events]) => typeof key === 'string' && Array.from(events).length > 0
+    ).length;

    const handleViewReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
      evt.stopPropagation();
@@ -94,7 +99,10 @@ export const Reactions = as<'div', ReactionsProps>(
            </TooltipProvider>
          );
        })}
-        {reactions.length > 0 && (
+        {visibleCount > 0 && canSendReaction && onAddReaction && (
+          <AddReactionButton onClick={onAddReaction} />
+        )}
+        {visibleCount > 0 && (
          <Overlay
            onContextMenu={(evt: any) => {
              evt.stopPropagation();
--- a/src/app/features/room/message/styles.css.ts
+++ b/src/app/features/room/message/styles.css.ts
@@ -55,3 +55,13 @@ export const ReactionsContainer = style({
 export const ReactionsTooltipText = style({
  wordBreak: 'break-word',
 });
+
+export const CollapsedTime = style({
+  position: 'absolute',
+  left: config.space.S400,
+  top: '50%',
+  transform: 'translateY(-50%)',
+  opacity: 0.6,
+  userSelect: 'none',
+  pointerEvents: 'none',
+});
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -63,6 +63,7 @@ import { RenderMatrixEvent, useMatrixEventRenderer } from '../../../hooks/useMat
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useAllowExternalImages } from '../../../../owl/hooks/useAllowExternalImages';
 import * as customHtmlCss from '../../../styles/CustomHtml.css';
 import { EncryptedContent } from '../message';
 import { Image } from '../../../components/media';
@@ -273,6 +274,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
    const useAuthentication = useMediaAuthentication();
    const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
    const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+    const allowExternalImages = useAllowExternalImages(mx, room);

    const direct = useIsDirectRoom();
    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
@@ -307,10 +309,11 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
        getReactCustomHtmlParser(mx, room.roomId, {
          linkifyOpts,
          useAuthentication,
+          allowExternalImages,
          handleSpoilerClick: spoilerClickHandler,
          handleMentionClick: mentionClickHandler,
        }),
-      [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
+      [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication, allowExternalImages]
    );

    const renderMatrixEvent = useMatrixEventRenderer<[MatrixEvent, string, GetContentCallback]>(
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -32,7 +32,7 @@ import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { useSetting } from '../../../state/hooks/settings';
-import { DateFormat, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
+import { DateFormat, ExternalImageMode, ExternalVideoMode, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
 import { SettingTile } from '../../../components/setting-tile';
 import { KeySymbol } from '../../../utils/key-symbol';
 import { isMacOS } from '../../../utils/user-agent';
@@ -879,6 +879,154 @@ function SelectMessageSpacing() {
  );
 }

+const externalImageItems: { mode: ExternalImageMode; name: string }[] = [
+  { mode: 'never', name: 'Never' },
+  { mode: 'homeserver', name: 'Homeserver Only' },
+  { mode: 'always', name: 'Always' },
+];
+
+function SelectExternalImages() {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const [externalImages, setExternalImages] = useSetting(settingsAtom, 'externalImages');
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (mode: ExternalImageMode) => {
+    setExternalImages(mode);
+    setMenuCords(undefined);
+  };
+
+  return (
+    <>
+      <Button
+        size="300"
+        variant="Secondary"
+        outlined
+        fill="Soft"
+        radii="300"
+        after={<Icon size="300" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+      >
+        <Text size="T300">
+          {externalImageItems.find((i) => i.mode === externalImages)?.name ?? externalImages}
+        </Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                {externalImageItems.map((item) => (
+                  <MenuItem
+                    key={item.mode}
+                    size="300"
+                    variant={externalImages === item.mode ? 'Primary' : 'Surface'}
+                    radii="300"
+                    onClick={() => handleSelect(item.mode)}
+                  >
+                    <Text size="T300">{item.name}</Text>
+                  </MenuItem>
+                ))}
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
+const externalVideoItems: { mode: ExternalVideoMode; name: string }[] = [
+  { mode: 'never', name: 'Never' },
+  { mode: 'homeserver', name: 'Homeserver Only' },
+  { mode: 'always', name: 'Always' },
+];
+
+function SelectExternalVideos() {
+  const [menuCords, setMenuCords] = useState<RectCords>();
+  const [externalVideos, setExternalVideos] = useSetting(settingsAtom, 'externalVideos');
+
+  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleSelect = (mode: ExternalVideoMode) => {
+    setExternalVideos(mode);
+    setMenuCords(undefined);
+  };
+
+  return (
+    <>
+      <Button
+        size="300"
+        variant="Secondary"
+        outlined
+        fill="Soft"
+        radii="300"
+        after={<Icon size="300" src={Icons.ChevronBottom} />}
+        onClick={handleMenu}
+      >
+        <Text size="T300">
+          {externalVideoItems.find((i) => i.mode === externalVideos)?.name ?? externalVideos}
+        </Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        position="Bottom"
+        align="End"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => setMenuCords(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+              isKeyBackward: (evt: KeyboardEvent) =>
+                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                {externalVideoItems.map((item) => (
+                  <MenuItem
+                    key={item.mode}
+                    size="300"
+                    variant={externalVideos === item.mode ? 'Primary' : 'Surface'}
+                    radii="300"
+                    onClick={() => handleSelect(item.mode)}
+                  >
+                    <Text size="T300">{item.name}</Text>
+                  </MenuItem>
+                ))}
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
 function Messages() {
  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
    settingsAtom,
@@ -966,6 +1114,19 @@ function Messages() {
          after={<Switch variant="Primary" value={encUrlPreview} onChange={setEncUrlPreview} />}
        />
      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="External Images"
+          after={<SelectExternalImages />}
+        />
+      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="External Videos"
+          description="Embed YouTube links and play direct video URLs (mp4, webm) inline."
+          after={<SelectExternalVideos />}
+        />
+      </SequenceCard>
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <SettingTile
          title="Show Hidden Events"
--- a/src/app/hooks/useClientConfig.ts
+++ b/src/app/hooks/useClientConfig.ts
@@ -18,6 +18,8 @@ export type ClientConfig = {
  };

  hashRouter?: HashRouterConfig;
+
+  defaultSettings?: Record<string, unknown>;
 };

 const ClientConfigContext = createContext<ClientConfig | null>(null);
--- a/src/app/pages/App.tsx
+++ b/src/app/pages/App.tsx
@@ -12,6 +12,7 @@ import { FeatureCheck } from './FeatureCheck';
 import { createRouter } from './Router';
 import { ScreenSizeProvider, useScreenSize } from '../hooks/useScreenSize';
 import { useCompositionEndTracking } from '../hooks/useComposingCheck';
+import { ConfigSettingsApply } from '../../owl/components/ConfigSettingsApply';

 const queryClient = new QueryClient();

@@ -37,6 +38,7 @@ function App() {
                  <ClientConfigProvider value={clientConfig}>
                    <QueryClientProvider client={queryClient}>
                      <JotaiProvider>
+                        <ConfigSettingsApply />
                        <RouterProvider router={createRouter(clientConfig, screenSize)} />
                      </JotaiProvider>
                      <ReactQueryDevtools initialIsOpen={false} />
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -65,6 +65,7 @@ import {
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useAllowExternalImages } from '../../../../owl/hooks/useAllowExternalImages';
 import { Image } from '../../../components/media';
 import { ImageViewer } from '../../../components/image-viewer';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
@@ -236,6 +237,7 @@ function RoomNotificationsGroupComp({
  const theme = useTheme();
  const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);

+  const allowExternalImages = useAllowExternalImages(mx, room);
  const mentionClickHandler = useMentionClickHandler(room.roomId);
  const spoilerClickHandler = useSpoilerClickHandler();

@@ -253,10 +255,11 @@ function RoomNotificationsGroupComp({
      getReactCustomHtmlParser(mx, room.roomId, {
        linkifyOpts,
        useAuthentication,
+        allowExternalImages,
        handleSpoilerClick: spoilerClickHandler,
        handleMentionClick: mentionClickHandler,
      }),
-    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
+    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication, allowExternalImages]
  );

  const renderMatrixEvent = useMatrixEventRenderer<[IRoomEvent, string, GetContentCallback]>(
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -319,6 +319,7 @@ export const getReactCustomHtmlParser = (
    handleSpoilerClick?: ReactEventHandler<HTMLElement>;
    handleMentionClick?: ReactEventHandler<HTMLElement>;
    useAuthentication?: boolean;
+    allowExternalImages?: boolean;
  }
 ): HTMLReactParserOptions => {
  const opts: HTMLReactParserOptions = {
@@ -474,11 +475,15 @@ export const getReactCustomHtmlParser = (
        }

        if (name === 'img') {
-          const htmlSrc = mxcUrlToHttp(mx, props.src, params.useAuthentication);
-          if (htmlSrc && props.src.startsWith('mxc://') === false) {
+          const isMxc = typeof props.src === 'string' && props.src.startsWith('mxc://');
+          const isExternal = !isMxc && typeof props.src === 'string';
+          const htmlSrc = isMxc
+            ? mxcUrlToHttp(mx, props.src, params.useAuthentication)
+            : props.src;
+          if (isExternal && !params.allowExternalImages) {
            return (
-              <a href={htmlSrc} target="_blank" rel="noreferrer noopener">
-                {props.alt || props.title || htmlSrc}
+              <a href={props.src} target="_blank" rel="noreferrer noopener">
+                {props.alt || props.title || props.src}
              </a>
            );
          }
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -15,6 +15,9 @@ export enum MessageLayout {
  Bubble = 2,
 }

+export type ExternalImageMode = 'always' | 'homeserver' | 'never';
+export type ExternalVideoMode = 'always' | 'homeserver' | 'never';
+
 export interface Settings {
  themeId?: string;
  useSystemTheme: boolean;
@@ -39,6 +42,8 @@ export interface Settings {
  encUrlPreview: boolean;
  showHiddenEvents: boolean;
  legacyUsernameColor: boolean;
+  externalImages: ExternalImageMode;
+  externalVideos: ExternalVideoMode;

  showNotifications: boolean;
  isNotificationSounds: boolean;
@@ -73,6 +78,8 @@ const defaultSettings: Settings = {
  encUrlPreview: false,
  showHiddenEvents: false,
  legacyUsernameColor: false,
+  externalImages: 'never',
+  externalVideos: 'never',

  showNotifications: true,
  isNotificationSounds: true,
@@ -83,11 +90,12 @@ const defaultSettings: Settings = {
  developerTools: false,
 };

-export const getSettings = () => {
+export const getSettings = (configDefaults?: Partial<Settings>) => {
  const settings = localStorage.getItem(STORAGE_KEY);
-  if (settings === null) return defaultSettings;
+  if (settings === null) return { ...defaultSettings, ...configDefaults };
  return {
    ...defaultSettings,
+    ...configDefaults,
    ...(JSON.parse(settings) as Settings),
  };
 };
--- a/src/app/utils/sanitize.ts
+++ b/src/app/utils/sanitize.ts
@@ -105,26 +105,12 @@ const transformATag: Transformer = (tagName, attribs) => ({
  },
 });

-const transformImgTag: Transformer = (tagName, attribs) => {
-  const { src } = attribs;
-  if (typeof src === 'string' && src.startsWith('mxc://') === false) {
-    return {
-      tagName: 'a',
-      attribs: {
-        href: src,
-        rel: 'noreferrer noopener',
-        target: '_blank',
-      },
-      text: attribs.alt || src,
-    };
-  }
-  return {
+const transformImgTag: Transformer = (tagName, attribs) => ({
  tagName,
  attribs: {
    ...attribs,
  },
-  };
-};
+});

 export const sanitizeCustomHtml = (customHtml: string): string =>
  sanitizeHtml(customHtml, {
--- a/src/owl/components/AddReactionButton.tsx
+++ b/src/owl/components/AddReactionButton.tsx
@@ -0,0 +1,22 @@
+import React, { MouseEventHandler } from 'react';
+import { Box, Icon, Icons } from 'folds';
+import * as css from '../styles/reactions.css';
+
+type AddReactionButtonProps = {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+};
+
+export function AddReactionButton({ onClick }: AddReactionButtonProps) {
+  return (
+    <Box
+      as="button"
+      className={css.AddReactionChip}
+      alignItems="Center"
+      justifyContent="Center"
+      shrink="No"
+      onClick={onClick}
+    >
+      <Icon src={Icons.SmilePlus} size="50" />
+    </Box>
+  );
+}
--- a/src/owl/components/ConfigSettingsApply.tsx
+++ b/src/owl/components/ConfigSettingsApply.tsx
@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+import { useAtom } from 'jotai';
+import { useClientConfig } from '../../app/hooks/useClientConfig';
+import { settingsAtom, getSettings, Settings } from '../../app/state/settings';
+
+export function ConfigSettingsApply() {
+  const { defaultSettings: configDefaults } = useClientConfig();
+  const [, setSettings] = useAtom(settingsAtom);
+  const applied = useRef(false);
+
+  useEffect(() => {
+    if (applied.current || !configDefaults) return;
+    applied.current = true;
+    setSettings(getSettings(configDefaults as Partial<Settings>));
+  }, [configDefaults, setSettings]);
+
+  return null;
+}
--- a/src/owl/components/ExternalImageCard.css.tsx
+++ b/src/owl/components/ExternalImageCard.css.tsx
@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const ExternalImageCard = style([
+  DefaultReset,
+  {
+    display: 'inline-block',
+    maxWidth: toRem(400),
+    borderRadius: config.radii.R300,
+    overflow: 'hidden',
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    cursor: 'pointer',
+
+    ':hover': {
+      filter: 'brightness(0.95)',
+    },
+  },
+]);
+
+export const ExternalImage = style([
+  DefaultReset,
+  {
+    display: 'block',
+    maxWidth: '100%',
+    maxHeight: toRem(400),
+    objectFit: 'contain',
+  },
+]);
--- a/src/owl/components/ExternalImageCard.tsx
+++ b/src/owl/components/ExternalImageCard.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Box, Text, as, color } from 'folds';
+import { ImageOverlay } from '../../app/components/ImageOverlay';
+import { ImageViewer } from '../../app/components/image-viewer';
+import { onEnterOrSpace } from '../../app/utils/keyboard';
+import * as css from './ExternalImageCard.css';
+import { tryDecodeURIComponent } from '../../app/utils/dom';
+
+const linkStyles = { color: color.Success.Main };
+
+export const ExternalImageCard = as<'div', { url: string }>(({ url, ...props }, ref) => {
+  const [viewer, setViewer] = useState(false);
+  const [error, setError] = useState(false);
+
+  if (error) return null;
+
+  const filename = url.split('/').pop()?.split('?')[0] || url;
+
+  return (
+    <Box direction="Column" gap="100" {...props} ref={ref}>
+      <div
+        className={css.ExternalImageCard}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(evt) => onEnterOrSpace(() => setViewer(true))(evt)}
+        onClick={() => setViewer(true)}
+      >
+        <img
+          className={css.ExternalImage}
+          src={url}
+          alt={filename}
+          loading="lazy"
+          onError={() => setError(true)}
+        />
+      </div>
+      <Text
+        style={linkStyles}
+        truncate
+        as="a"
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        size="T200"
+        priority="300"
+      >
+        {tryDecodeURIComponent(url)}
+      </Text>
+      <ImageOverlay
+        src={url}
+        alt={filename}
+        viewer={viewer}
+        requestClose={() => setViewer(false)}
+        renderViewer={(p) => <ImageViewer {...p} />}
+      />
+    </Box>
+  );
+});
--- a/src/owl/components/ExternalVideoCard.css.tsx
+++ b/src/owl/components/ExternalVideoCard.css.tsx
@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const ExternalVideoCard = style([
+  DefaultReset,
+  {
+    display: 'inline-block',
+    maxWidth: toRem(480),
+    borderRadius: config.radii.R300,
+    overflow: 'hidden',
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    backgroundColor: color.SurfaceVariant.Container,
+  },
+]);
+
+export const ExternalVideo = style([
+  DefaultReset,
+  {
+    display: 'block',
+    width: '100%',
+    maxHeight: toRem(400),
+    backgroundColor: '#000',
+  },
+]);
--- a/src/owl/components/ExternalVideoCard.tsx
+++ b/src/owl/components/ExternalVideoCard.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Box, Text, as, color } from 'folds';
+import * as css from './ExternalVideoCard.css';
+import { tryDecodeURIComponent } from '../../app/utils/dom';
+
+const linkStyles = { color: color.Success.Main };
+
+export const ExternalVideoCard = as<'div', { url: string }>(({ url, ...props }, ref) => {
+  const [error, setError] = useState(false);
+
+  if (error) return null;
+
+  return (
+    <Box direction="Column" gap="100" {...props} ref={ref}>
+      <div className={css.ExternalVideoCard}>
+        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+        <video
+          className={css.ExternalVideo}
+          src={url}
+          controls
+          preload="metadata"
+          playsInline
+          onError={() => setError(true)}
+        />
+      </div>
+      <Text
+        style={linkStyles}
+        truncate
+        as="a"
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        size="T200"
+        priority="300"
+      >
+        {tryDecodeURIComponent(url)}
+      </Text>
+    </Box>
+  );
+});
--- a/src/owl/components/YouTubeEmbedCard.css.tsx
+++ b/src/owl/components/YouTubeEmbedCard.css.tsx
@@ -0,0 +1,83 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const YouTubeCard = style([
+  DefaultReset,
+  {
+    display: 'inline-block',
+    width: '100%',
+    maxWidth: toRem(480),
+    borderRadius: config.radii.R300,
+    overflow: 'hidden',
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    backgroundColor: '#000',
+  },
+]);
+
+export const YouTubeFrame = style([
+  DefaultReset,
+  {
+    position: 'relative',
+    width: '100%',
+    aspectRatio: '16 / 9',
+  },
+]);
+
+export const YouTubeThumbButton = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    padding: 0,
+    border: 'none',
+    background: '#000',
+    cursor: 'pointer',
+    overflow: 'hidden',
+
+    ':hover': {
+      filter: 'brightness(1.05)',
+    },
+  },
+]);
+
+export const YouTubeThumbImg = style([
+  DefaultReset,
+  {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+]);
+
+export const YouTubePlayOverlay = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: toRem(64),
+    height: toRem(64),
+    borderRadius: '50%',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    pointerEvents: 'none',
+  },
+]);
+
+export const YouTubeIframe = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    border: 'none',
+  },
+]);
--- a/src/owl/components/YouTubeEmbedCard.tsx
+++ b/src/owl/components/YouTubeEmbedCard.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Box, Icon, Icons, Text, as, color } from 'folds';
+import * as css from './YouTubeEmbedCard.css';
+import { tryDecodeURIComponent } from '../../app/utils/dom';
+import { getYouTubeId, getYouTubeStart } from '../utils/videoUrl';
+
+const linkStyles = { color: color.Success.Main };
+
+export const YouTubeEmbedCard = as<'div', { url: string }>(({ url, ...props }, ref) => {
+  const id = getYouTubeId(url);
+  const start = getYouTubeStart(url);
+  const [playing, setPlaying] = useState(false);
+  const [thumbError, setThumbError] = useState(false);
+
+  if (!id) return null;
+
+  const embedSrc =
+    `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}` +
+    `?autoplay=1&rel=0${start ? `&start=${start}` : ''}`;
+
+  return (
+    <Box direction="Column" gap="100" {...props} ref={ref}>
+      <div className={css.YouTubeCard}>
+        <div className={css.YouTubeFrame}>
+          {playing ? (
+            <iframe
+              className={css.YouTubeIframe}
+              src={embedSrc}
+              title={`YouTube: ${id}`}
+              loading="lazy"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+              allowFullScreen
+              referrerPolicy="strict-origin-when-cross-origin"
+            />
+          ) : (
+            <button
+              type="button"
+              className={css.YouTubeThumbButton}
+              onClick={() => setPlaying(true)}
+              aria-label="Play YouTube video"
+            >
+              {!thumbError && (
+                <img
+                  className={css.YouTubeThumbImg}
+                  src={`https://i.ytimg.com/vi/${encodeURIComponent(id)}/hqdefault.jpg`}
+                  alt=""
+                  loading="lazy"
+                  referrerPolicy="no-referrer"
+                  onError={() => setThumbError(true)}
+                />
+              )}
+              <span className={css.YouTubePlayOverlay}>
+                <Icon size="400" src={Icons.Play} filled />
+              </span>
+            </button>
+          )}
+        </div>
+      </div>
+      <Text
+        style={linkStyles}
+        truncate
+        as="a"
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        size="T200"
+        priority="300"
+      >
+        {tryDecodeURIComponent(url)}
+      </Text>
+    </Box>
+  );
+});
--- a/src/owl/hooks/useAllowExternalImages.ts
+++ b/src/owl/hooks/useAllowExternalImages.ts
@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { MatrixClient, Room } from 'matrix-js-sdk';
+import { useSetting } from '../../app/state/hooks/settings';
+import { settingsAtom } from '../../app/state/settings';
+
+export function useAllowExternalImages(mx: MatrixClient, room: Room): boolean {
+  const [externalImages] = useSetting(settingsAtom, 'externalImages');
+  return useMemo(() => {
+    if (externalImages === 'always') return true;
+    if (externalImages === 'never') return false;
+    const roomDomain = room.roomId.split(':')[1];
+    return roomDomain === mx.getDomain();
+  }, [externalImages, room.roomId, mx]);
+}
--- a/src/owl/hooks/useAllowExternalVideos.ts
+++ b/src/owl/hooks/useAllowExternalVideos.ts
@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { MatrixClient, Room } from 'matrix-js-sdk';
+import { useSetting } from '../../app/state/hooks/settings';
+import { settingsAtom } from '../../app/state/settings';
+
+export function useAllowExternalVideos(mx: MatrixClient, room: Room): boolean {
+  const [externalVideos] = useSetting(settingsAtom, 'externalVideos');
+  return useMemo(() => {
+    if (externalVideos === 'always') return true;
+    if (externalVideos === 'never') return false;
+    const roomDomain = room.roomId.split(':')[1];
+    return roomDomain === mx.getDomain();
+  }, [externalVideos, room.roomId, mx]);
+}
--- a/src/owl/styles/reactions.css.ts
+++ b/src/owl/styles/reactions.css.ts
@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
+
+const addReactionBase = {
+  padding: `${toRem(2)} ${config.space.S200}`,
+  backgroundColor: color.SurfaceVariant.Container,
+  border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+  borderRadius: config.radii.R300,
+  cursor: 'pointer',
+  selectors: {
+    '&:hover, &:focus-visible': {
+      backgroundColor: color.SurfaceVariant.ContainerHover,
+      opacity: 1,
+    },
+    '&:active': {
+      backgroundColor: color.SurfaceVariant.ContainerActive,
+    },
+  },
+} as const;
+
+export const AddReactionChip = style([
+  DefaultReset,
+  FocusOutline,
+  {
+    ...addReactionBase,
+    opacity: 0.6,
+  },
+]);
--- a/src/owl/utils/imageUrl.ts
+++ b/src/owl/utils/imageUrl.ts
@@ -0,0 +1,10 @@
+const IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.avif', '.svg', '.bmp', '.ico'];
+
+export function isImageUrl(url: string): boolean {
+  try {
+    const { pathname } = new URL(url);
+    return IMAGE_EXTENSIONS.some((ext) => pathname.toLowerCase().endsWith(ext));
+  } catch {
+    return false;
+  }
+}
--- a/src/owl/utils/videoUrl.ts
+++ b/src/owl/utils/videoUrl.ts
@@ -0,0 +1,46 @@
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.m4v'];
+
+export function isVideoUrl(url: string): boolean {
+  try {
+    const { pathname } = new URL(url);
+    return VIDEO_EXTENSIONS.some((ext) => pathname.toLowerCase().endsWith(ext));
+  } catch {
+    return false;
+  }
+}
+
+export function getYouTubeId(url: string): string | null {
+  try {
+    const u = new URL(url);
+    const host = u.hostname.replace(/^www\.|^m\./, '');
+    if (host === 'youtu.be') {
+      const id = u.pathname.slice(1).split('/')[0];
+      return id || null;
+    }
+    if (host === 'youtube.com') {
+      if (u.pathname === '/watch') return u.searchParams.get('v');
+      const m = u.pathname.match(/^\/(shorts|embed|v|live)\/([^/]+)/);
+      if (m) return m[2];
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export function getYouTubeStart(url: string): number | null {
+  try {
+    const u = new URL(url);
+    const raw = u.searchParams.get('t') ?? u.searchParams.get('start');
+    if (!raw) return null;
+    if (/^\d+$/.test(raw)) return parseInt(raw, 10);
+    const m = raw.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/);
+    if (!m) return null;
+    const total = (parseInt(m[1] || '0', 10)) * 3600
+      + (parseInt(m[2] || '0', 10)) * 60
+      + (parseInt(m[3] || '0', 10));
+    return total > 0 ? total : null;
+  } catch {
+    return null;
+  }
+}
Author	SHA1	Message	Date
Gabor Körber	695218595a	🦉 video preview support	2026-04-18 00:17:12 +02:00
Gabor Körber	7f08ce6b10	🦉 Update our README with more tactical information	2026-04-17 23:43:49 +02:00
Gabor Körber	5967455d60	🦉 Removing the additional first reaction chip replacing it with a timestamp instead. much more helpful and nice.	2026-04-16 12:08:34 +02:00
Gabor Körber	3b681ac766	🦉Doc Corrections I was emotional and wrong. After revisiting multiple other chats, all of them do it this way. Adding reactions to existing ones was what I was missing. the first reaction can be in the top right bar.	2026-04-16 11:55:55 +02:00
Gabor Körber	8e6b26477a	🦉 additional reaction chip left	2026-04-16 00:26:21 +02:00
Gabor Körber	3b8d7fb026	🦉 img tag conversion	2026-04-15 23:09:03 +02:00
Gabor Körber	7f12d047f3	🦉 allowing external images as setting For the config.json (server-level default for new users): ```json { "defaultSettings": { "externalImages": "homeserver" } } ``` User's own choice in the UI always overrides the config.json default.	2026-04-15 21:34:03 +02:00
Gabor Körber	1173c17452	🦉 allow images	2026-04-15 20:49:40 +02:00
Gabor Körber	8c892f14f8	🦉 Feature: configurable preset for users: - twitter emoji - useSystemTheme - themeId	2026-04-15 18:01:28 +02:00
Gabor Körber	5423e8bb7a	🦉 OWL establishment	2026-04-15 18:00:36 +02:00