Widget: show full-quality video preview frames with play overlay

scripts/fetch-telegram.mjs

@@ -46,8 +46,13 @@ for (let page = 0; page < MAX_PAGES; page++) {
     const text = textNode.html()?.trim() || "";
     const datetime = $el.find("time").first().attr("datetime") || "";
     const photoStyle = $el.find(".tgme_widget_message_photo_wrap").first().attr("style") || "";
-    const photo = photoStyle.match(/url\('([^']+)'\)/)?.[1]?.split("?")[0] || "";
+    let photo = photoStyle.match(/url\('([^']+)'\)/)?.[1]?.split("?")[0] || "";
     const video = $el.find(".tgme_widget_message_video_wrap, .tgme_widget_message_video_player").length > 0;
+    // video posts carry a full-size preview frame in .tgme_widget_message_video_thumb
+    if (video && !photo) {
+      const thumbStyle = $el.find(".tgme_widget_message_video_thumb").first().attr("style") || "";
+      photo = thumbStyle.match(/url\('([^']+)'\)/)?.[1] || "";
+    }
     const link = $el.find(".tgme_widget_message_date").first().attr("href") || `https://t.me/${CHANNEL}/${postId}`;
     if (text || photo || video) {
       posts.push({ id: Number(postId), text, datetime, photo, video, link });

src/components/Header.astro

@@ -23,7 +23,7 @@ const isActive = (href: string) =>
 >
   <div class="mx-auto flex h-20 max-w-[1400px] items-center justify-between gap-4 px-5 sm:px-8">
     <a href="/" class="flex shrink-0 items-center gap-3" aria-label={site.name}>
-      <Logo class="h-12 w-auto" />
+      <Logo class="h-20 w-auto" />
       <span class="hidden text-2xl font-medium tracking-tight sm:block" style="font-family: var(--font-display)">Scientia</span>
     </a>
 

src/components/TelegramWidget.astro

@@ -25,15 +25,21 @@ const fmt = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "long", ho
       <div class="tg-body space-y-2.5 p-3 pb-5">
         {telegramNews.map((post, i) => (
           <div class:list={["tg-bubble relative ml-3 block rounded-xl bg-white px-3 py-2.5 shadow-[0_1px_1px_rgba(16,35,47,0.14)]", i >= 8 && "hidden"]}>
-            {post.photo && (
+            {post.photo && !post.video && (
               <img src={post.photo} alt="" class="mb-2 w-full rounded-lg" loading="lazy" />
             )}
             {post.video && (
-              <span class="mb-2 flex aspect-video w-full items-center justify-center gap-2 rounded-lg bg-night-950/90 text-sm font-medium text-white">
-                <svg class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                  <path d="M8 5.14v14l11-7-11-7z" />
-                </svg>
-                Видео
+              <span class="relative mb-2 block overflow-hidden rounded-lg">
+                {post.photo && (
+                  <img src={post.photo} alt="" class="w-full" loading="lazy" />
+                )}
+                <span class="absolute inset-0 flex items-center justify-center bg-night-950/25">
+                  <span class="flex h-12 w-12 items-center justify-center rounded-full bg-night-950/75 text-white">
+                    <svg class="h-6 w-6 translate-x-px" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                      <path d="M8 5.14v14l11-7-11-7z" />
+                    </svg>
+                  </span>
+                </span>
               </span>
             )}
             {post.text && (