Add Video Rows

components-eleventy/video/card.js

@@ -9,10 +9,11 @@ function pill ( text ) {
     `
 }
 
-export default function ( video, {
+export default function ( video, options = {} ) {
-    width = '325px',
+    const {
-    classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
+        width = '325px',
-} ) {
+        classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
+    } = options
 
     // Setup inline lazysizes
     this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )

components-eleventy/video/row.js

@@ -0,0 +1,80 @@
+
+import VideoCard from './card.js'
+import SubmitCard from './submit-card.js'
+
+function getCardType ( video ) {
+    const isSubmitCard = video.endpoint.includes('https://docs.google.com/forms')
+
+    if ( isSubmitCard ) return SubmitCard
+
+    return VideoCard
+}
+
+export default function ( videos, options = {} ) {
+
+    const {
+        cardWidth = '325',
+        classes = ''
+    } = options
+
+    // Math.random should be unique because of its seeding algorithm.
+    // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+    // after the decimal.
+    const uid = Math.random().toString(36).substr(2, 9)
+    const rowId = `row-${ uid }`
+
+    // Setup inline lazysizes
+    this.usingComponent( 'helpers/scroll.js' )
+
+    // console.log('video', video)
+
+    const cardsHtml = videos.map( video => {
+        const Card = getCardType( video )
+
+        // console.log('Card', this.boundComponent(Card)( video ) )
+
+        return this.boundComponent(Card)( video )
+    } ).join('')
+
+    // console.log( 'cardsHtml', cardsHtml )
+
+    return /* html */`
+
+<div class="video-row relative w-full ${ classes }">
+
+    <div
+        id="${ rowId }"
+        class="video-row-contents flex overflow-x-auto whitespace-no-wrap py-2 space-x-6"
+        style="scroll-snap-type:x mandatory;"
+    >
+
+        ${ cardsHtml }
+
+    </div>
+    <button
+        class="absolute left-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 -translate-x-1/2 bg-darker rounded-full"
+        style="top:50%;"
+        distance="${ cardWidth * -1 }"
+        scroll-target="#${ rowId }"
+        onclick="scrollHorizontalCarousel( event )"
+    >
+        <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" style="transform: scaleX(-1);">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+        </svg>
+    </button>
+    <button
+        class="absolute right-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 translate-x-1/2 bg-darker rounded-full"
+        style="top:50%;"
+        distance="${ cardWidth }"
+        scroll-target="#${ rowId }"
+        onclick="scrollHorizontalCarousel( event )"
+    >
+        <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+        </svg>
+    </button>
+
+</div>
+
+    `
+}

components-eleventy/video/submit-card.js

@@ -0,0 +1,81 @@
+
+export default function ( video, {
+    width = '325px',
+    classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
+} ) {
+
+    // Setup inline lazysizes
+    // this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )
+
+    // console.log('video', video)
+
+    return /* html */`
+<div class="video-card ${ classes }" style="max-width: ${ width }; flex-basis: ${ width }; scroll-snap-align: start;">
+    <a href="${ video.endpoint }">
+        <div class="video-card-container relative overflow-hidden bg-white">
+            <div class="video-card-image ratio-wrapper">
+                <div class="relative overflow-hidden w-full pb-16/9"></div>
+            </div>
+            <div class="video-card-overlay absolute inset-0 flex justify-between items-start bg-gradient-to-tr from-black to-transparent p-4" style="--gradient-from-color:rgba(0, 0, 0, 1); --gradient-to-color:rgba(0, 0, 0, 0.7);">
+                <div class="plus-circle w-8 h-8 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
+                    <svg viewBox="0 0 24 24" style="width: 18px; height: 18px;">
+                        <path fill="currentColor" d="M11 11v-11h1v11h11v1h-11v11h-1v-11h-11v-1h11z"></path>
+                    </svg>
+                </div>
+            </div>
+            <div class="video-card-content absolute inset-0 flex items-end py-4 px-6">
+                <div class="w-full text-sm text-left whitespace-normal">Submit Video</div>
+            </div>
+        </div>
+    </a>
+</div>
+
+<div class="video-card ${ classes }" style="max-width: ${ width }; flex-basis: ${ width }; scroll-snap-align: start;">
+    <a
+        href="${video.endpoint}"
+        class=""
+    >
+        <div class="video-card-container relative overflow-hidden bg-black">
+            <div class="video-card-image ratio-wrapper">
+                <div class="relative overflow-hidden w-full pb-16/9">
+                    <picture>
+                        <source
+                            sizes="${video.thumbnail.sizes}"
+                            data-srcset="${video.thumbnail.srcset}"
+                            type="image/jpg"
+                        >
+                        <img
+                            data-src="${video.thumbnail.src}"
+                            alt="${video.name}"
+                            class="lazyload absolute h-full w-full object-cover"
+                        >
+                    </picture>
+                </div>
+            </div>
+            <div
+                style="--gradient-from-color: rgba(0, 0, 0, 1); --gradient-to-color: rgba(0, 0, 0, 0.7)"
+                class="video-card-overlay absolute inset-0 flex justify-between items-start bg-gradient-to-tr from-black to-transparent p-4"
+            >
+                <div class="play-circle w-8 h-8 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
+                    <svg
+                        viewBox="0 0 18 18"
+                        style="width:18px;height:18px;margin-left:3px"
+                    >
+                        <path
+                            fill="currentColor"
+                            d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"
+                        />
+                    </svg>
+                </div>
+
+            </div>
+
+            <!-- Video Text Content -->
+            <div class="video-card-content absolute inset-0 flex items-end py-4 px-6">
+                <div class="w-full text-sm text-left whitespace-normal">${ video.name }</div>
+            </div>
+        </div>
+    </a>
+</div>
+`
+}

helpers/scroll.js

@@ -0,0 +1,13 @@
+
+
+function scrollHorizontalCarousel ( event ) {
+    event.stopPropagation()
+
+    // console.log('event.target', event.currentTarget)
+    // console.log('distance', event.currentTarget.getAttribute('distance'))
+
+    const distance = Number(event.currentTarget.getAttribute('distance'))
+    const scrollTarget = document.querySelector(event.currentTarget.getAttribute('scroll-target'))
+
+    scrollTarget.scrollBy({ left: distance, behavior: 'smooth' })
+}

pages-eleventy/tv.11ty.js

@@ -2,7 +2,7 @@ import dotenv from 'dotenv'
 
 import config from '../nuxt.config'
 
-import VideoCard from '../components-eleventy/video/card.js'
+import VideoRow from '../components-eleventy/video/row.js'
 
 // Setup dotenv
 dotenv.config()
@@ -51,7 +51,7 @@ class TV {
         }
     }
 
-    render({ name, video }) {
+    render({ video }) {
 
         // console.log('video.payload', Object.keys(video.payload))
 
@@ -80,23 +80,9 @@ class TV {
 
                     <div class="related-videos w-full">
                         <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">Related Videos</h2>
-                        <div class="video-row relative w-full">
-                            <div class="video-row-contents flex overflow-x-auto whitespace-no-wrap py-2 space-x-6" style="scroll-snap-type:x mandatory;">
 
-                                ${ video.payload.relatedVideos.map( this.boundComponent(VideoCard) ).join('') }
+                        ${ this.boundComponent(VideoRow)( video.payload.relatedVideos ) }
 
-                            </div>
-                            <button class="absolute left-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 -translate-x-1/2 bg-darker rounded-full" style="top:50%;">
-                                <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" style="transform: scaleX(-1);">
-                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-                                </svg>
-                            </button>
-                            <button class="absolute right-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 translate-x-1/2 bg-darker rounded-full" style="top:50%;">
-                                <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400">
-                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
-                                </svg>
-                            </button>
-                        </div>
                     </div>
 
                 </div>