From 05140f4fc761f4d7d544297ae222a45a8527ea39 Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Sat, 18 Oct 2025 12:06:22 -0700
Subject: [PATCH] design: redesign media embeds

---
 src/lib/feature/post/media/PostIframe.svelte  | 161 ++++++++++++++----
 src/lib/feature/post/media/PostMedia.svelte   |   7 +-
 .../post/media/PostMediaCompact.svelte        |   9 +-
 src/lib/ui/generic/Blobs.svelte               |   6 +-
 .../post/[instance]/[id=integer]/+page.svelte |   1 +
 5 files changed, 136 insertions(+), 48 deletions(-)

diff --git a/src/lib/feature/post/media/PostIframe.svelte b/src/lib/feature/post/media/PostIframe.svelte
index 866a06cc..5cfe3b43 100644
--- a/src/lib/feature/post/media/PostIframe.svelte
+++ b/src/lib/feature/post/media/PostIframe.svelte
@@ -1,8 +1,10 @@
 <script lang="ts" module>
   import { settings } from '$lib/app/settings.svelte'
+  import Blobs from '$lib/ui/generic/Blobs.svelte'
   import {
     Icon,
     type IconSource,
+    Play,
     PuzzlePiece,
     VideoCamera,
   } from 'svelte-hero-icons/dist'
@@ -100,16 +102,16 @@
     url: string
     opened?: boolean
     autoplay?: boolean
-    class?: string
+    title?: string
   }
 
   let {
     type = 'none',
     thumbnail = undefined,
     url,
+    title,
     opened = $bindable(!settings.embeds.clickToView),
     autoplay = settings.embeds.clickToView,
-    class: clazz = '',
   }: Props = $props()
 
   let data = $derived(typeData(type))
@@ -120,40 +122,125 @@
   @component
   Displays a video file or embedded video iframe.
 -->
-{#if opened}
-  {#if type == 'video'}
-    <!-- svelte-ignore a11y_media_has_caption -->
-    <video {autoplay} controls class="rounded-xl aspect-video {clazz}">
-      <source src={url} />
-    </video>
-  {:else}
-    <iframe
-      src={embedUrl}
-      title="Embed player"
-      frameborder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      allowfullscreen
-      class="aspect-video rounded-xl dark:bg-zinc-900 {clazz ?? ''}"
-    ></iframe>
-  {/if}
-{:else}
-  <button
-    onclick={() => (opened = true)}
-    class="aspect-video w-full h-full z-0 overflow-hidden relative rounded-xl flex flex-col gap-2 items-center justify-center text-white"
-  >
-    {#if thumbnail}
-      <img
-        src={optimizeImageURL(thumbnail, 512)}
-        class="absolute top-0 left-0 -z-10 brightness-25 w-full object-cover h-full"
-        alt=""
-      />
+<div class="iframe-container">
+  {#if opened}
+    {#if type == 'video'}
+      <!-- svelte-ignore a11y_media_has_caption -->
+      <video {autoplay} controls>
+        <source src={url} />
+      </video>
     {:else}
-      <div
-        class="absolute blur-3xl -z-10 top-0 left-0 w-full h-full bg-linear-to-br from-green-800 via-blue-900 via-20% to-red-700"
-      ></div>
+      <iframe
+        src={embedUrl}
+        title="Embed player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+      ></iframe>
     {/if}
-    <Icon src={data.icon} solid size="48" />
-    <h1 class="font-bold text-xl">{data.text}</h1>
-    <p>Click to view this content.</p>
-  </button>
-{/if}
+  {:else}
+    <button onclick={() => (opened = true)} class="iframe-preview">
+      <div role="presentation" class="preview-start">
+        <div class="start-button">
+          <Icon src={Play} size="32" mini />
+        </div>
+      </div>
+      {#if thumbnail}
+        <img
+          src={optimizeImageURL(thumbnail, 512)}
+          class="absolute top-0 left-0 -z-10 w-full object-cover h-full mask-b-from-0 brightness-75"
+          alt=""
+        />
+      {:else}
+        <div class="absolute inset-0 w-full h-full scale-200 -z-10 opacity-50">
+          <Blobs seed={title ?? data.text} />
+        </div>
+      {/if}
+      <Icon src={data.icon} solid size="48" />
+      <h1 class="font-display text-3xl font-medium text-left">
+        {title ?? data.text}
+      </h1>
+      <div class="text-slate-600 dark:text-zinc-400">
+        {URL.parse?.(url)?.hostname ?? data.text}
+      </div>
+    </button>
+  {/if}
+</div>
+
+<style>
+  @reference '../../../../app.css';
+
+  .iframe-container {
+    border-radius: var(--radius-2xl);
+    aspect-ratio: 16 / 9;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border: 1px solid var(--color-slate-200);
+
+    @variant dark {
+      border-color: var(--color-zinc-900);
+    }
+
+    & > * {
+      width: 100%;
+      height: 100%;
+    }
+
+    .iframe-preview {
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      overflow: hidden;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      justify-content: end;
+      padding: calc(var(--spacing) * 6);
+      gap: calc(var(--spacing) * 1);
+    }
+
+    .preview-start {
+      width: 100%;
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+    }
+
+    .start-button {
+      width: calc(var(--spacing) * 16);
+      height: calc(var(--spacing) * 16);
+      border-radius: 9999px;
+      background-color: --alpha(var(--color-slate-100) / 50%);
+      display: grid;
+      place-items: center;
+      backdrop-filter: blur(var(--blur-sm));
+      cursor: pointer;
+      position: relative;
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.1),
+        0 1px 2px -1px rgb(0 0 0 / 0.1);
+      transition:
+        background-color 300ms var(--ease-cubic),
+        transform 300ms var(--ease-cubic);
+
+      @variant hover {
+        background-color: --alpha(var(--color-slate-200) / 50%);
+      }
+
+      @variant dark {
+        background-color: --alpha(var(--color-zinc-900) / 50%);
+        @variant hover {
+          background-color: --alpha(var(--color-zinc-800) / 50%);
+        }
+      }
+
+      @variant active {
+        transform: scale(93%);
+      }
+    }
+  }
+</style>
diff --git a/src/lib/feature/post/media/PostMedia.svelte b/src/lib/feature/post/media/PostMedia.svelte
index 6319307c..6178314e 100644
--- a/src/lib/feature/post/media/PostMedia.svelte
+++ b/src/lib/feature/post/media/PostMedia.svelte
@@ -10,6 +10,7 @@
     type?: MediaType
     opened?: boolean | undefined
     blur?: boolean
+    [key: string]: any
   }
 
   let {
@@ -18,6 +19,7 @@
     type = 'none',
     opened = undefined,
     blur = post.nsfw && settings.nsfwBlur,
+    ...rest
   }: Props = $props()
 </script>
 
@@ -28,13 +30,15 @@
   - Embed link/card.
 -->
 {#if type == 'image' && view == 'cozy'}
-  <PostImage {post} {blur} />
+  <PostImage {post} {blur} {...rest} />
 {:else if (type == 'iframe' || type == 'video') && view == 'cozy' && post.url}
   <PostIframe
     thumbnail={post.thumbnail_url}
     type={iframeType(post.url)}
     url={post.url}
     {opened}
+    title={post.name}
+    {...rest}
   />
 {:else if type == 'embed' && post.url}
   <PostLink
@@ -43,5 +47,6 @@
     nsfw={post.nsfw}
     embed_title={post.embed_title}
     {view}
+    {...rest}
   />
 {/if}
diff --git a/src/lib/feature/post/media/PostMediaCompact.svelte b/src/lib/feature/post/media/PostMediaCompact.svelte
index 9312edb0..9c155b5e 100644
--- a/src/lib/feature/post/media/PostMediaCompact.svelte
+++ b/src/lib/feature/post/media/PostMediaCompact.svelte
@@ -45,15 +45,10 @@
 <div class={[size, 'relative group/media', clazz]} {style} role="presentation">
   <svelte:element
     this={!settings.expandImages || type != 'image' ? 'a' : 'button'}
-    href={post.url ?? postLink(post)}
+    href={postLink(post)}
     aria-label={type == 'image'
       ? $t('aria.postDecor.openImage', { default: post.name })
-      : type == 'embed'
-        ? $t('aria.postDecor.openLink', {
-            default: post.embed_title ?? post.name,
-          })
-        : $t('aria.postDecor.openPost', { default: post.name })}
-    target={post.url ? '_blank' : undefined}
+      : $t('aria.postDecor.openPost', { default: post.name })}
     onclick={() => {
       if (type == 'image') showImage(bestImageURL(post, false, -1))
     }}
diff --git a/src/lib/ui/generic/Blobs.svelte b/src/lib/ui/generic/Blobs.svelte
index 883d5352..4fca6d6c 100644
--- a/src/lib/ui/generic/Blobs.svelte
+++ b/src/lib/ui/generic/Blobs.svelte
@@ -26,9 +26,9 @@
     const baseHue = (hashString(seed) % 12) * 60
 
     for (let i = 0; i < count; i++) {
-      const r1 = seededRandom(seed, i * 3)
-      const r2 = seededRandom(seed, i * 3 + 1)
-      const r3 = seededRandom(seed, i * 3 + 2)
+      const r1 = seededRandom(seed, i * 5)
+      const r2 = seededRandom(seed, i * 5 + 1)
+      const r3 = seededRandom(seed, i * 5 + 2)
 
       const lightness = 0.45 + r1 * 0.4
 
diff --git a/src/routes/post/[instance]/[id=integer]/+page.svelte b/src/routes/post/[instance]/[id=integer]/+page.svelte
index e71c0854..3bc3f8fe 100644
--- a/src/routes/post/[instance]/[id=integer]/+page.svelte
+++ b/src/routes/post/[instance]/[id=integer]/+page.svelte
@@ -174,6 +174,7 @@
     post={data.data.value.post.post}
     opened
     view="cozy"
+    autoplay={false}
   />
   {#if data.data.value.post.post.body}
     <div class="text-base text-slate-800 dark:text-zinc-300 leading-normal">
-- 
2.51.2