Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Leave out timestamps container for 0 timestamps

Browse source
This commit is contained in:
Sam Carlton 2021-05-15 21:21:32 -05:00
parent 374ff84e21
commit 6ea858a505
1 changed files with 15 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components-eleventy/video/player.js
View file

@ -1,6 +1,9 @@
import renderPoster from './poster.js' import renderPoster from './poster.js'
function renderTimestamps ( video ) { function renderTimestamps ( video ) {
if ( video.timestamps.length > 0 ) return ''
const timestampsForRender = video.timestamps.map( timestamp => { const timestampsForRender = video.timestamps.map( timestamp => {
const [ minutes, seconds ] = timestamp.time.split(':') const [ minutes, seconds ] = timestamp.time.split(':')
@ -10,13 +13,21 @@ function renderTimestamps ( video ) {
} }
}) })
return timestampsForRender.map( timestamp => (/* html */` const timestampButtonsHtml = timestampsForRender.map( timestamp => (/* html */`
<button <button
time="${timestamp.time}" time="${timestamp.time}"
class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner"> class="inline-block text-xs rounded-lg py-1 px-2 border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner">
${ timestamp.fullText } ${ timestamp.fullText }
</button> </button>
`) ).join('') `) ).join('')
return /* html */`
<div class="player-timestamps w-full max-w-4xl">
<div class="player-timestamps-wrapper overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2">
${ timestampButtonsHtml }
</div>
</div>
`
} }
export default async function ( video, options = {} ) { export default async function ( video, options = {} ) {
@ -66,11 +77,9 @@ export default async function ( video, options = {} ) {
</div> </div>
</div> </div>
</div> </div>
<div class="player-timestamps w-full max-w-4xl">
<div class="player-timestamps-wrapper overflow-x-auto overflow-y-visible whitespace-no-wrap py-2 space-x-2"> ${ timestampsHtml }
${ timestampsHtml }
</div>
</div>
</lite-youtube> </lite-youtube>
` `
} }