From 6ea858a505f3a7bc1d37da26c341c46b0ab19aa9 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 15 May 2021 21:21:32 -0500
Subject: [PATCH] Leave out timestamps container for 0 timestamps

---
 components-eleventy/video/player.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/components-eleventy/video/player.js b/components-eleventy/video/player.js
index 6492630..ebadb86 100644
--- a/components-eleventy/video/player.js
+++ b/components-eleventy/video/player.js
@@ -1,6 +1,9 @@
 import renderPoster from './poster.js'
 
 function renderTimestamps ( video ) {
+
+    if ( video.timestamps.length > 0 ) return ''
+
     const timestampsForRender = video.timestamps.map( timestamp => {
         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
     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">
         ${ timestamp.fullText }
 </button>
     `) ).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 = {} ) {
@@ -66,11 +77,9 @@ export default async function ( video, options = {} ) {
             </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 }
-        </div>
-    </div>
+
+    ${ timestampsHtml }
+
 </lite-youtube>
     `
 }