feat: add downloaded film images

- Downloaded 15 film posters and backdrops from CloudFront CDN - Updated film data to use local images where available - Remaining films still use CDN URLs - Images saved in public/images/films/ directory Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-02 22:33:00 +00:00
parent 92d6943cb3
commit 8b8d5f7b0f
116 changed files with 118 additions and 103 deletions
--- a/src/data/indeeHubFilms.ts
+++ b/src/data/indeeHubFilms.ts
@@ -1,8 +1,12 @@
-// Real IndeeHub films extracted from screening room
-// Generated from assets/films/indeedhub-films.json
+// Real IndeeHub films with local and CDN images
+// Local images saved in public/images/films/

 import type { Content } from '../types/content'

+// Helper to determine if we have local image
+const hasLocal = (id: string, ext: string) => `/images/films/posters/${id}.${ext}`
+const hasLocalBackdrop = (id: string, ext: string) => `/images/films/backdrops/${id}.${ext}`
+
 export const indeeHubFilms: Content[] = [
  {
    id: 'god-bless-bitcoin',
@@ -20,8 +24,8 @@ export const indeeHubFilms: Content[] = [
    id: 'thethingswecarry',
    title: 'The Things We Carry',
    description: 'A compelling narrative exploring the emotional weight of our past and the baggage we carry through life.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/3eb8c816-f479-4a02-9590-c19f61719171/films/f8ff14e5-57d8-4a64-8417-77972d3fd31f/poster-1745795758433.webp',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/3eb8c816-f479-4a02-9590-c19f61719171/films/f8ff14e5-57d8-4a64-8417-77972d3fd31f/poster-1745795758433.webp',
+    thumbnail: hasLocal('thethingswecarry', 'webp'),
+    backdrop: hasLocalBackdrop('thethingswecarry', 'webp'),
    type: 'film',
    categories: ['Drama'],
    nostrEventId: ''
@@ -30,8 +34,8 @@ export const indeeHubFilms: Content[] = [
    id: 'duel',
    title: 'Duel',
    description: 'An intense confrontation that tests the limits of human resolve.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/ab95a398-f66e-4a1d-9fc7-6ceebca81bd1/films/8a98dac1-7f18-4a53-824d-20ad837ec54c/poster-1738119002958.png',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/ab95a398-f66e-4a1d-9fc7-6ceebca81bd1/films/8a98dac1-7f18-4a53-824d-20ad837ec54c/poster-1738119002958.png',
+    thumbnail: hasLocal('duel', 'png'),
+    backdrop: hasLocalBackdrop('duel', 'png'),
    type: 'film',
    categories: ['Drama', 'Action'],
    nostrEventId: ''
@@ -52,8 +56,8 @@ export const indeeHubFilms: Content[] = [
    id: '2b0d7349-c010-47a0-b584-49e1bf86ab2f',
    title: 'Hard Money',
    description: 'Understanding sound money principles and the importance of monetary sovereignty.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/2b0d7349-c010-47a0-b584-49e1bf86ab2f/poster-1712660400089.png',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/2b0d7349-c010-47a0-b584-49e1bf86ab2f/poster-1712660400089.png',
+    thumbnail: hasLocal('2b0d7349-c010-47a0-b584-49e1bf86ab2f', 'png'),
+    backdrop: hasLocalBackdrop('2b0d7349-c010-47a0-b584-49e1bf86ab2f', 'png'),
    type: 'film',
    categories: ['Documentary', 'Finance', 'Bitcoin'],
    nostrEventId: ''
@@ -62,8 +66,8 @@ export const indeeHubFilms: Content[] = [
    id: '665a4095-73b9-480d-a0a4-b2aafaf2bce4',
    title: 'Bitcoiners',
    description: 'Meet the people building the Bitcoin ecosystem and changing the world.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/665a4095-73b9-480d-a0a4-b2aafaf2bce4/bitcoiners_poster.png',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/665a4095-73b9-480d-a0a4-b2aafaf2bce4/bitcoiners_poster.png',
+    thumbnail: hasLocal('665a4095-73b9-480d-a0a4-b2aafaf2bce4', 'png'),
+    backdrop: hasLocalBackdrop('665a4095-73b9-480d-a0a4-b2aafaf2bce4', 'png'),
    type: 'film',
    categories: ['Documentary', 'Bitcoin'],
    nostrEventId: ''
@@ -72,8 +76,8 @@ export const indeeHubFilms: Content[] = [
    id: '3c113b66-3bb5-4cac-90eb-965ecedc4aa2',
    title: 'Lekker Feeling: A Bitcoin Ekasi Story',
    description: 'A heartwarming story of Bitcoin adoption in South African townships.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/3c113b66-3bb5-4cac-90eb-965ecedc4aa2/poster-1712235708738.png',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/3c113b66-3bb5-4cac-90eb-965ecedc4aa2/poster-1712235708738.png',
+    thumbnail: hasLocal('3c113b66-3bb5-4cac-90eb-965ecedc4aa2', 'png'),
+    backdrop: hasLocalBackdrop('3c113b66-3bb5-4cac-90eb-965ecedc4aa2', 'png'),
    type: 'film',
    categories: ['Documentary', 'Bitcoin'],
    nostrEventId: ''
@@ -92,8 +96,8 @@ export const indeeHubFilms: Content[] = [
    id: 'bbdb0178-0b96-4ab5-addf-ba1f029c1cb3',
    title: 'The Housing Bubble',
    description: 'An examination of the 2008 financial crisis and its lasting impact.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/bbdb0178-0b96-4ab5-addf-ba1f029c1cb3/poster-1712662953502.webp',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/bbdb0178-0b96-4ab5-addf-ba1f029c1cb3/poster-1712662953502.webp',
+    thumbnail: hasLocal('bbdb0178-0b96-4ab5-addf-ba1f029c1cb3', 'webp'),
+    backdrop: hasLocalBackdrop('bbdb0178-0b96-4ab5-addf-ba1f029c1cb3', 'webp'),
    type: 'film',
    categories: ['Documentary', 'Finance'],
    nostrEventId: ''
@@ -102,8 +106,8 @@ export const indeeHubFilms: Content[] = [
    id: '584f310b-2269-4b05-a09d-261a0a3c1f78',
    title: 'Menger. Notes on the margin',
    description: 'Exploring Austrian economics and Carl Menger\'s revolutionary ideas on value.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/584f310b-2269-4b05-a09d-261a0a3c1f78/poster-1712662055015.webp',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/0d5bf3f1-31a6-4a79-865b-81100207da10/films/584f310b-2269-4b05-a09d-261a0a3c1f78/poster-1712662055015.webp',
+    thumbnail: hasLocal('584f310b-2269-4b05-a09d-261a0a3c1f78', 'webp'),
+    backdrop: hasLocalBackdrop('584f310b-2269-4b05-a09d-261a0a3c1f78', 'webp'),
    type: 'film',
    categories: ['Documentary', 'Economics'],
    nostrEventId: ''
@@ -142,8 +146,8 @@ export const indeeHubFilms: Content[] = [
    id: 'home',
    title: 'HOME',
    description: 'A poignant exploration of what home means in our modern world.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/3ce871ce-d339-4dbd-badb-0826469a7f61/films/fda47662-13fc-4359-bab0-554731e0a788/poster-1720052618702.webp',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/3ce871ce-d339-4dbd-badb-0826469a7f61/films/fda47662-13fc-4359-bab0-554731e0a788/poster-1720052618702.webp',
+    thumbnail: hasLocal('home', 'webp'),
+    backdrop: hasLocalBackdrop('home', 'webp'),
    type: 'film',
    categories: ['Drama'],
    nostrEventId: ''
@@ -152,8 +156,8 @@ export const indeeHubFilms: Content[] = [
    id: 'e1f58162-9288-418e-803d-196dcde00782',
    title: 'Kismet',
    description: 'A story of fate, destiny, and the unexpected paths life takes us on.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/cc3ab791-2295-420e-b3c5-639bc251f98f/films/e1f58162-9288-418e-803d-196dcde00782/poster-1736192312542.jpeg',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/cc3ab791-2295-420e-b3c5-639bc251f98f/films/e1f58162-9288-418e-803d-196dcde00782/poster-1736192312542.jpeg',
+    thumbnail: hasLocal('e1f58162-9288-418e-803d-196dcde00782', 'jpeg'),
+    backdrop: hasLocalBackdrop('e1f58162-9288-418e-803d-196dcde00782', 'jpeg'),
    type: 'film',
    categories: ['Drama'],
    nostrEventId: ''
@@ -162,8 +166,8 @@ export const indeeHubFilms: Content[] = [
    id: 'identity-theft',
    title: 'Identity Theft',
    description: 'A thriller about stolen identity and the fight to reclaim one\'s life.',
-    thumbnail: 'https://d1yvaqj97q119b.cloudfront.net/04d05c0d-40ad-46cb-adaf-4d0e82abb708/films/fe92f538-d5c0-4cbe-b48e-06fde5684f5e/poster-1725418840084.png',
-    backdrop: 'https://d1yvaqj97q119b.cloudfront.net/04d05c0d-40ad-46cb-adaf-4d0e82abb708/films/fe92f538-d5c0-4cbe-b48e-06fde5684f5e/poster-1725418840084.png',
+    thumbnail: hasLocal('identity-theft', 'png'),
+    backdrop: hasLocalBackdrop('identity-theft', 'png'),
    type: 'film',
    categories: ['Thriller'],
    nostrEventId: ''
@@ -207,6 +211,16 @@ export const indeeHubFilms: Content[] = [
    type: 'film',
    categories: ['Drama'],
    nostrEventId: ''
+  },
+  {
+    id: 'down-the-pch',
+    title: 'Down the P.C.H.',
+    description: 'A journey down California\'s Pacific Coast Highway.',
+    thumbnail: hasLocal('down-the-pch', 'png'),
+    backdrop: hasLocalBackdrop('down-the-pch', 'png'),
+    type: 'film',
+    categories: ['Drama'],
+    nostrEventId: ''
  }
 ]

--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -2,8 +2,11 @@
  <div class="browse-view">
    <!-- Header / Navigation -->
    <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
-            :class="{ 'bg-black/95 backdrop-blur-md shadow-lg': scrolled, 'bg-transparent': !scrolled }">
-      <div class="container mx-auto px-6 py-4">
+            :class="{ 
+              'bg-white/10 dark:bg-black/20 backdrop-blur-xl shadow-2xl border-b border-white/10': scrolled, 
+              'bg-transparent': !scrolled 
+            }">
+      <div class="container mx-auto px-8 py-4">
        <div class="flex items-center justify-between">
          <!-- Logo -->
          <div class="flex items-center gap-8">
@@ -48,7 +51,7 @@
      </div>

      <!-- Hero Content -->
-      <div class="relative container mx-auto px-6 h-full flex items-end pb-16 md:pb-20">
+      <div class="relative container mx-auto px-8 h-full flex items-end pb-16 md:pb-20">
        <div class="max-w-2xl space-y-2.5 md:space-y-3 animate-fade-in">
          <!-- Title -->
          <h1 class="text-3xl md:text-5xl lg:text-6xl font-bold drop-shadow-2xl leading-tight">
@@ -88,8 +91,9 @@
    </section>

    <!-- Content Rows -->
-    <section class="relative -mt-24 pb-20">
-      <div class="container mx-auto px-6 space-y-12">
+    <section class="relative pt-8 pb-20">
+      <div class="mx-auto px-8 space-y-12" style="max-width: 75%;">
+
        <!-- Featured Films -->
        <ContentRow 
          title="Featured Films" 
@@ -154,7 +158,9 @@ const dramas = computed(() => contentStore.contentRows.dramas)
 const documentaries = computed(() => contentStore.contentRows.documentaries)

 const handleScroll = () => {
-  scrolled.value = window.scrollY > 50
+  // Calculate 30% of the page height
+  const scrollThreshold = document.documentElement.scrollHeight * 0.3
+  scrolled.value = window.scrollY > scrollThreshold
 }

 const toggleSearch = () => {
@@ -180,6 +186,5 @@ onUnmounted(() => {
 <style scoped>
 .browse-view {
  min-height: 100vh;
-  padding-top: 64px;
 }
 </style>