From cd6f74bd66411ac151998fc328e0ae60bfeb4ec3 Mon Sep 17 00:00:00 2001 From: acodebeard Date: Sun, 31 May 2026 12:30:29 -0700 Subject: [PATCH 1/4] add thumbnail-first video support --- .github/workflows/ci.yml | 3 + AGENTS.md | 1 + app/includes/conditions.php | 31 ++- app/includes/lightbox.php | 24 ++- app/includes/media.php | 136 ++++++++++++ app/pages/gallery.php | 4 +- app/pages/image.php | 84 +++----- assets/css/gallery.css | 18 +- assets/css/gallery.min.css | 2 +- assets/css/main.css | 74 ++++++- assets/css/main.min.css | 2 +- assets/js/apod.js | 195 ++++++++++-------- assets/js/apod.min.js | 2 +- assets/js/video.js | 29 +++ assets/js/video.min.js | 1 + .../plans/2026-05-31-apod-video-support.md | 59 ++++++ index.php | 7 +- scripts/check-assets.sh | 14 +- scripts/check-file-modes.sh | 2 +- scripts/check-video-support.php | 87 ++++++++ 20 files changed, 616 insertions(+), 159 deletions(-) create mode 100644 app/includes/media.php create mode 100644 assets/js/video.js create mode 100644 assets/js/video.min.js create mode 100644 docs/superpowers/plans/2026-05-31-apod-video-support.md create mode 100755 scripts/check-video-support.php diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 89302c5..747743c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -32,3 +32,6 @@ jobs: - name: Verify public JavaScript assets parse run: scripts/check-assets.sh + + - name: Verify video media rendering + run: php scripts/check-video-support.php diff --git a/AGENTS.md b/AGENTS.md index 5941fe8..8194171 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -53,6 +53,7 @@ scripts/php-lint.sh scripts/check-source-only.sh scripts/check-file-modes.sh scripts/check-assets.sh +php scripts/check-video-support.php ``` For browser smoke tests, check: diff --git a/app/includes/conditions.php b/app/includes/conditions.php index 0325fec..e9fabde 100644 --- a/app/includes/conditions.php +++ b/app/includes/conditions.php @@ -18,6 +18,8 @@ $safePageUrl = htmlspecialchars("{$baseUrl}{$_SERVER['REQUEST_URI']}", ENT_QUOTES, 'UTF-8'); $safeTitle = htmlspecialchars($entry['title'] ?? '', ENT_QUOTES, 'UTF-8'); $safeDesc = htmlspecialchars($entry['explanation'] ?? '', ENT_QUOTES, 'UTF-8'); +$mediaType = apod_media_type($entry ?? []); +$safeVideoUrl = $mediaType === 'video' ? apod_h(apod_video_embed_url($entry ?? [])) : ''; $dt = $date; //$safeFullUrl = htmlspecialchars($fullUrl, ENT_QUOTES, 'UTF-8'); @@ -30,7 +32,27 @@ switch ($page) { case 'image': - $jsonLd = << + { + "@context":"https://schema.org", + "@type":"VideoObject", + "name":"{$t}", + "description":"{$d}", + "thumbnailUrl":["{$u}"], + "embedUrl":"{$safeVideoUrl}", + "url":"{$p}", + "uploadDate":"{$dt}", + "datePublished":"{$dt}", + "dateModified":"{$dt}", + "author":{"@type":"Organization","name":"NASA"}, + "license":"https://apod.nasa.gov/apod/lib/ApodCopyright.php" + } + + JSONLD; + } else { + $jsonLd = << { "@context":"https://schema.org", @@ -46,6 +68,7 @@ } JSONLD; + } $metaTags = << @@ -76,7 +99,11 @@ HTML; echo $metaTags; - echo ''; + if ($mediaType === 'video') { + echo ''; + } else { + echo ''; + } break; case 'home': diff --git a/app/includes/lightbox.php b/app/includes/lightbox.php index 62b9d6a..6eb4257 100644 --- a/app/includes/lightbox.php +++ b/app/includes/lightbox.php @@ -1,26 +1,27 @@ src—here I’m defaulting to the 640px version -$imgSrc = htmlspecialchars($entry['url_main'][640] ?? $entry['url_thumb']); +$imgSrc = apod_h($entry['url_main'][640] ?? ($entry['url_thumb'] ?? '')); ?>
@@ -28,6 +29,7 @@ href="#!" class="lightbox-trigger" data-full="" + data-alt="" aria-label="View full-size image of "> @@ -60,7 +62,7 @@ class="lightbox-trigger" <?= htmlspecialchars($title ?: 'Astronomy Picture of the Day') ?> @@ -130,4 +132,4 @@ function onKeyDown(e) { backdrop.addEventListener('click', closeLightbox); })(); }) - \ No newline at end of file + diff --git a/app/includes/media.php b/app/includes/media.php new file mode 100644 index 0000000..6efff1a --- /dev/null +++ b/app/includes/media.php @@ -0,0 +1,136 @@ + + + Load video player + +HTML; + + $frame = << + +
+HTML; + + $fallback = << +

+ JavaScript is disabled. Open the video for {$safeTitle}. +

+ +HTML; + } + + return << +
+ {$safeTitle} video poster +{$button} +
+ +{$frame} +{$fallback} + +HTML; +} diff --git a/app/pages/gallery.php b/app/pages/gallery.php index 9eecd1e..b622309 100644 --- a/app/pages/gallery.php +++ b/app/pages/gallery.php @@ -1,10 +1,10 @@
diff --git a/app/pages/image.php b/app/pages/image.php index 8d3cb8f..e331bf2 100644 --- a/app/pages/image.php +++ b/app/pages/image.php @@ -1,41 +1,25 @@ $item) { - if (slugify($item['title']) === $slug) { + if (($item['slug'] ?? '') === $slug) { + $entry = $item; $currentIndex = $i; break; } } -if ($currentIndex === null || $entry === null) { - echo "

Image not found.

"; +if ($currentIndex === null || empty($entry)) { + echo '

Image not found.

'; return; } -// 1) Gather dates and find the current index as before -$allDates = array_column($apodData, 'date'); -$currentIndex = array_search($entry['date'], $allDates, true); +$title = (string)($entry['title'] ?? 'Untitled'); +$date = (string)($entry['date'] ?? ''); +$credit = $entry['credit'] ?? $entry['copyright'] ?? 'NASA / APOD'; +$explanation = nl2br(apod_h((string)($entry['explanation'] ?? ''))); $total = count($apodData); // ‣ PREVIOUS (wraps around to index 0 after the last) @@ -43,14 +27,14 @@ $prevItem = $apodData[$prevIndex]; // guard against missing title $prevTitle = $prevItem['title'] ?? 'Untitled'; -$prevSlug = slugify($prevTitle); +$prevSlug = $prevItem['slug'] ?? slugify((string)$prevTitle); // ‣ NEXT (only if we’re not already at 0) if ($currentIndex > 0) { $nextIndex = $currentIndex - 1; $nextItem = $apodData[$nextIndex]; $nextTitle = $nextItem['title'] ?? 'Untitled'; - $nextSlug = slugify($nextTitle); + $nextSlug = $nextItem['slug'] ?? slugify((string)$nextTitle); } else { // first image → no real “next” link $nextSlug = null; @@ -58,22 +42,10 @@ } -// Construct standardized local paths -$basename = "apod-{$date}-full"; -$mainImagePath = "/apod/images/main/980/{$basename}.webp"; // fallback preview for -$thumbPath = "/apod/images/thumbs/{$basename}.webp"; // only used on gallery -$escapedTitle = htmlspecialchars($title); - -$imageUrl = $entry['url_full'] ?? $entry['hdurl'] ?? $entry['url'] ?? ''; -$imageFilename = basename(parse_url($imageUrl, PHP_URL_PATH)); // handles ?foo=bar - -$imageExtension = pathinfo($imageFilename, PATHINFO_EXTENSION); -$imageExtension = strtolower($imageExtension); -if (empty($imageExtension)) { - $imageExtension = 'jpg'; // sensible fallback -} - -$escapedFull = htmlspecialchars($entry['url_full'] ?? "/apod/images/full/{$basename}.{$imageExtension}", ENT_QUOTES, 'UTF-8'); +$escapedTitle = apod_h($title); +$mediaType = apod_media_type($entry); +$fullUrl = $mediaType === 'video' ? apod_video_embed_url($entry) : (string)($entry['url_full'] ?? ''); +$escapedFull = apod_h($fullUrl); // Helper: slugify function in PHP to match JS logic function slugify($text) @@ -94,7 +66,7 @@ function slugify($text)
- +
@@ -129,22 +101,32 @@ function slugify($text) -
+