Use YouTube thumbnails as pre-video background and add per-format redirect toggles.

Replace local BG_IMAGE with dynamic YouTube poster URLs, generate og:image from FHD thumbnail, and allow redirect-or-stay behavior per FHD/vertical format.

Co-authored-by: Cursor <cursoragent@cursor.com>

.env.example

@@ -17,8 +17,7 @@ TWITTER_DESCRIPTION="Lokalne modele LLM, własny serwer AI (Proxmox, TrueNAS, Ub
 SITE_OG_IMAGE_ALT="Slavic Pulse"
 THEME_COLOR=#000000
 
-# --- Obrazy i ikony (ścieżki względem roota strony) ---
-BG_IMAGE=/assets/imgs/www-bg-slavic-pulse-com-001.jpg
+# --- Ikony (ścieżki względem roota strony) ---
 FAVICON_48=/assets/imgs/favico/48x48.png
 FAVICON_180=/assets/imgs/favico/180x180.png
 FAVICON_512=/assets/imgs/favico/512x512.png
@@ -30,5 +29,10 @@ POST_VIDEO_REDIRECT_URL_FHD=https://www.youtube.com/watch?v=kujXXtoHUbc
 # Short vertical 9:16 (portrait / wąski viewport)
 VIDEO_ID_VERTICAL=YOUR_VERTICAL_SHORT_ID
 POST_VIDEO_REDIRECT_URL_VERTICAL=https://www.youtube.com/shorts/YOUR_VERTICAL_SHORT_ID
-# true = przekierowanie po filmie (URL zależy od formatu); false = zostaje obraz tła
+# Zachowanie po zakończeniu intro (domyślnie dla obu formatów):
+# true  = przekieruj na POST_VIDEO_REDIRECT_URL_* (YouTube / inny link)
+# false = zostaw miniaturkę YouTube jako tło strony (bez przekierowania)
 POST_VIDEO_REDIRECT_ENABLED=true
+# Opcjonalnie osobno dla każdego formatu (puste = użyj POST_VIDEO_REDIRECT_ENABLED):
+# POST_VIDEO_REDIRECT_ENABLED_FHD=true
+# POST_VIDEO_REDIRECT_ENABLED_VERTICAL=false

docker-compose-example/.env.example

@@ -14,8 +14,7 @@ TWITTER_DESCRIPTION="Lokalne modele LLM, własny serwer AI (Proxmox, TrueNAS, Ub
 SITE_OG_IMAGE_ALT="Slavic Pulse"
 THEME_COLOR=#000000
 
-# --- Obrazy i ikony (ścieżki względem roota strony) ---
-BG_IMAGE=/assets/imgs/www-bg-slavic-pulse-com-001.jpg
+# --- Ikony (ścieżki względem roota strony) ---
 FAVICON_48=/assets/imgs/favico/48x48.png
 FAVICON_180=/assets/imgs/favico/180x180.png
 FAVICON_512=/assets/imgs/favico/512x512.png
@@ -26,3 +25,5 @@ POST_VIDEO_REDIRECT_URL_FHD=https://www.youtube.com/watch?v=kujXXtoHUbc
 VIDEO_ID_VERTICAL=YOUR_VERTICAL_SHORT_ID
 POST_VIDEO_REDIRECT_URL_VERTICAL=https://www.youtube.com/shorts/YOUR_VERTICAL_SHORT_ID
 POST_VIDEO_REDIRECT_ENABLED=true
+# POST_VIDEO_REDIRECT_ENABLED_FHD=true
+# POST_VIDEO_REDIRECT_ENABLED_VERTICAL=false

generate-from-env.sh

@@ -23,7 +23,6 @@ TWITTER_DESCRIPTION="${TWITTER_DESCRIPTION:-$SITE_DESCRIPTION}"
 SITE_OG_IMAGE_ALT="${SITE_OG_IMAGE_ALT:-Slavic Pulse}"
 THEME_COLOR="${THEME_COLOR:-#000000}"
 
-BG_IMAGE="${BG_IMAGE:-/assets/imgs/www-bg-slavic-pulse-com-001.jpg}"
 FAVICON_48="${FAVICON_48:-/assets/imgs/favico/48x48.png}"
 FAVICON_180="${FAVICON_180:-/assets/imgs/favico/180x180.png}"
 FAVICON_512="${FAVICON_512:-/assets/imgs/favico/512x512.png}"
@@ -33,29 +32,34 @@ VIDEO_ID_VERTICAL="${VIDEO_ID_VERTICAL:-}"
 POST_VIDEO_REDIRECT_URL_FHD="${POST_VIDEO_REDIRECT_URL_FHD:-${POST_VIDEO_REDIRECT_URL:-https://www.youtube.com/watch?v=kujXXtoHUbc}}"
 POST_VIDEO_REDIRECT_URL_VERTICAL="${POST_VIDEO_REDIRECT_URL_VERTICAL:-}"
 POST_VIDEO_REDIRECT_ENABLED="${POST_VIDEO_REDIRECT_ENABLED:-true}"
+POST_VIDEO_REDIRECT_ENABLED_FHD="${POST_VIDEO_REDIRECT_ENABLED_FHD:-$POST_VIDEO_REDIRECT_ENABLED}"
+POST_VIDEO_REDIRECT_ENABLED_VERTICAL="${POST_VIDEO_REDIRECT_ENABLED_VERTICAL:-$POST_VIDEO_REDIRECT_ENABLED}"
 
-OG_IMAGE_URL="${SITE_BASE_URL}${BG_IMAGE}"
+OG_IMAGE_URL="https://img.youtube.com/vi/${VIDEO_ID_FHD}/maxresdefault.jpg"
 
 escape_js() {
   printf '%s' "$1" | sed "s/'/\\\\'/g"
 }
 
+parse_bool_js() {
+  case "$(printf '%s' "$1" | tr '[:upper:]' '[:lower:]')" in
+    true|1|yes|on) printf 'true' ;;
+    *) printf 'false' ;;
+  esac
+}
+
 VIDEO_ID_FHD_JS="$(escape_js "$VIDEO_ID_FHD")"
 VIDEO_ID_VERTICAL_JS="$(escape_js "$VIDEO_ID_VERTICAL")"
 POST_VIDEO_REDIRECT_URL_FHD_JS="$(escape_js "$POST_VIDEO_REDIRECT_URL_FHD")"
 POST_VIDEO_REDIRECT_URL_VERTICAL_JS="$(escape_js "$POST_VIDEO_REDIRECT_URL_VERTICAL")"
-BG_IMAGE_JS="$(escape_js "$BG_IMAGE")"
-
-case "$(printf '%s' "$POST_VIDEO_REDIRECT_ENABLED" | tr '[:upper:]' '[:lower:]')" in
-  true|1|yes|on) POST_VIDEO_REDIRECT_ENABLED_JS=true ;;
-  *) POST_VIDEO_REDIRECT_ENABLED_JS=false ;;
-esac
+POST_VIDEO_REDIRECT_ENABLED_FHD_JS="$(parse_bool_js "$POST_VIDEO_REDIRECT_ENABLED_FHD")"
+POST_VIDEO_REDIRECT_ENABLED_VERTICAL_JS="$(parse_bool_js "$POST_VIDEO_REDIRECT_ENABLED_VERTICAL")"
 
 export SITE_TITLE SITE_SHORT_NAME SITE_BASE_URL SITE_DESCRIPTION TWITTER_DESCRIPTION SITE_OG_IMAGE_ALT
-export THEME_COLOR BG_IMAGE FAVICON_48 FAVICON_180 FAVICON_512 OG_IMAGE_URL
-export VIDEO_ID_FHD_JS VIDEO_ID_VERTICAL_JS POST_VIDEO_REDIRECT_URL_FHD_JS POST_VIDEO_REDIRECT_URL_VERTICAL_JS BG_IMAGE_JS POST_VIDEO_REDIRECT_ENABLED_JS
+export THEME_COLOR FAVICON_48 FAVICON_180 FAVICON_512 OG_IMAGE_URL
+export VIDEO_ID_FHD_JS VIDEO_ID_VERTICAL_JS POST_VIDEO_REDIRECT_URL_FHD_JS POST_VIDEO_REDIRECT_URL_VERTICAL_JS POST_VIDEO_REDIRECT_ENABLED_FHD_JS POST_VIDEO_REDIRECT_ENABLED_VERTICAL_JS
 
-TEMPLATE_VARS='${SITE_TITLE} ${SITE_SHORT_NAME} ${SITE_BASE_URL} ${SITE_DESCRIPTION} ${TWITTER_DESCRIPTION} ${SITE_OG_IMAGE_ALT} ${THEME_COLOR} ${BG_IMAGE} ${FAVICON_48} ${FAVICON_180} ${FAVICON_512} ${OG_IMAGE_URL} ${VIDEO_ID_FHD_JS} ${VIDEO_ID_VERTICAL_JS} ${POST_VIDEO_REDIRECT_URL_FHD_JS} ${POST_VIDEO_REDIRECT_URL_VERTICAL_JS} ${BG_IMAGE_JS} ${POST_VIDEO_REDIRECT_ENABLED_JS}'
+TEMPLATE_VARS='${SITE_TITLE} ${SITE_SHORT_NAME} ${SITE_BASE_URL} ${SITE_DESCRIPTION} ${TWITTER_DESCRIPTION} ${SITE_OG_IMAGE_ALT} ${THEME_COLOR} ${FAVICON_48} ${FAVICON_180} ${FAVICON_512} ${OG_IMAGE_URL} ${VIDEO_ID_FHD_JS} ${VIDEO_ID_VERTICAL_JS} ${POST_VIDEO_REDIRECT_URL_FHD_JS} ${POST_VIDEO_REDIRECT_URL_VERTICAL_JS} ${POST_VIDEO_REDIRECT_ENABLED_FHD_JS} ${POST_VIDEO_REDIRECT_ENABLED_VERTICAL_JS}'
 
 mkdir -p "$OUTPUT_DIR"
 

index.html.template

@@ -24,7 +24,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="${FAVICON_180}">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="theme-color" content="${THEME_COLOR}">
-    <link rel="preload" as="image" href="${BG_IMAGE}">
+    <link rel="preconnect" href="https://img.youtube.com">
     <link rel="preconnect" href="https://www.youtube.com">
     <link rel="preconnect" href="https://www.google.com">
     <style>
@@ -145,7 +145,7 @@
     <div id="stage-root">
         <div id="stage">
             <div id="stage-image" class="stage-layer">
-                <img src="${BG_IMAGE}" alt="${SITE_OG_IMAGE_ALT}">
+                <img id="stage-bg" src="" alt="${SITE_OG_IMAGE_ALT}">
             </div>
             <div id="stage-video" class="stage-layer">
                 <div id="player"></div>
@@ -158,16 +158,16 @@
             fhd: {
                 id: '${VIDEO_ID_FHD_JS}',
                 ratio: 16 / 9,
-                redirectUrl: '${POST_VIDEO_REDIRECT_URL_FHD_JS}'
+                redirectUrl: '${POST_VIDEO_REDIRECT_URL_FHD_JS}',
+                redirectEnabled: ${POST_VIDEO_REDIRECT_ENABLED_FHD_JS}
             },
             vertical: {
                 id: '${VIDEO_ID_VERTICAL_JS}',
                 ratio: 9 / 16,
-                redirectUrl: '${POST_VIDEO_REDIRECT_URL_VERTICAL_JS}'
+                redirectUrl: '${POST_VIDEO_REDIRECT_URL_VERTICAL_JS}',
+                redirectEnabled: ${POST_VIDEO_REDIRECT_ENABLED_VERTICAL_JS}
             }
         };
-        const POST_VIDEO_REDIRECT_ENABLED = ${POST_VIDEO_REDIRECT_ENABLED_JS};
-        const BG_IMAGE = '${BG_IMAGE_JS}';
         let player;
         let activeFormat;
         let activeConfig;
@@ -176,6 +176,23 @@
         const stageVideo = document.getElementById('stage-video');
         const stage = document.getElementById('stage');
 
+        function youtubeThumbnailUrl(videoId, quality) {
+            return 'https://img.youtube.com/vi/' + videoId + '/' + (quality || 'maxresdefault') + '.jpg';
+        }
+
+        function updateStageBackground() {
+            const img = document.getElementById('stage-bg');
+            if (!img || !activeConfig || !activeConfig.id) return;
+            delete img.dataset.fallback;
+            img.onerror = function () {
+                if (!img.dataset.fallback) {
+                    img.dataset.fallback = '1';
+                    img.src = youtubeThumbnailUrl(activeConfig.id, 'hqdefault');
+                }
+            };
+            img.src = youtubeThumbnailUrl(activeConfig.id);
+        }
+
         function getVideoFormat() {
             const w = stage.clientWidth || window.innerWidth;
             const h = stage.clientHeight || window.innerHeight;
@@ -217,9 +234,16 @@
             iframe.style.margin = '0';
         }
 
+        activeFormat = getVideoFormat();
+        activeConfig = resolveConfig(activeFormat);
+        updateStageBackground();
+
+        const stageBg = document.getElementById('stage-bg');
         const bgPreload = new Image();
         bgPreload.onload = () => loader.classList.add('hidden');
-        bgPreload.src = BG_IMAGE;
+        if (stageBg && stageBg.src) {
+            bgPreload.src = stageBg.src;
+        }
 
         const tag = document.createElement('script');
         tag.src = 'https://www.youtube.com/iframe_api';
@@ -232,9 +256,7 @@
         }
 
         function onYouTubeIframeAPIReady() {
-            activeFormat = getVideoFormat();
-            activeConfig = resolveConfig(activeFormat);
-            if (!activeConfig.id) return;
+            if (!activeConfig || !activeConfig.id) return;
 
             player = new YT.Player('player', {
                 height: '100%',
@@ -271,7 +293,7 @@
         function onPlayerStateChange(event) {
             if (event.data === YT.PlayerState.ENDED) {
                 stageVideo.classList.remove('active');
-                if (POST_VIDEO_REDIRECT_ENABLED && activeConfig.redirectUrl) {
+                if (activeConfig.redirectEnabled && activeConfig.redirectUrl) {
                     window.location.href = activeConfig.redirectUrl;
                 }
             }
@@ -279,10 +301,11 @@
 
         function handleResize() {
             const newFormat = getVideoFormat();
-            if (player && newFormat !== activeFormat) {
+            if (newFormat !== activeFormat) {
                 activeFormat = newFormat;
                 activeConfig = resolveConfig(activeFormat);
-                if (activeConfig.id) {
+                updateStageBackground();
+                if (player && activeConfig.id) {
                     player.loadVideoById(activeConfig.id);
                 }
             }