mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-15 06:35:20 -07:00
Add Video Rows
This commit is contained in:
Sam Carlton
parent
2342c01b7e
commit
3553923530
5 changed files with 182 additions and 21 deletions
|
|
@ -9,10 +9,11 @@ function pill ( text ) {
|
|||
`
|
||||
}
|
||||
|
||||
export default function ( video, {
|
||||
width = '325px',
|
||||
classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
|
||||
} ) {
|
||||
export default function ( video, options = {} ) {
|
||||
const {
|
||||
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' )
|
||||
|
|
|
|||
80
components-eleventy/video/row.js
Normal file
80
components-eleventy/video/row.js
Normal file
|
|
@ -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>
|
||||
|
||||
`
|
||||
}
|
||||
81
components-eleventy/video/submit-card.js
Normal file
81
components-eleventy/video/submit-card.js
Normal file
|
|
@ -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>
|
||||
`
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue