Implementing more details for video links

rest/compton_elements/styles/video-link.css

@@ -1,5 +1,34 @@
-issa-image.video-poster {
-    & img {
-        object-fit: cover;
+@scope(.video-link) {
+    :scope {
+        & issa-image.poster {
+            --w: 100%;
+
+            & img {
+                object-fit: cover;
+            }
+        }
+
+        & .duration {
+            position: absolute;
+            padding: var(--s-s);
+            font-size: var(--fs-s);
+            font-weight: var(--fw-b);
+            background: var(--c-highlight);
+            border-top-left-radius: var(--br-n);
+            border-bottom-right-radius: var(--br-n);
+            color: var(--c-foreground);
+        }
+
+        & h2 {
+            font-size: var(--fs-n);
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 }
+
+
+
+

rest/compton_elements/video_link.go

@@ -3,18 +3,47 @@ package compton_elements
 import (
 	"embed"
 	"github.com/boggydigital/compton"
+	"github.com/boggydigital/compton/consts/direction"
 	"github.com/boggydigital/compton/consts/size"
 	"github.com/boggydigital/kevlar"
 	"github.com/boggydigital/yet/data"
+	"strconv"
+	"time"
 )
 
 //go:embed "styles/*.css"
 var videoLinkStyles embed.FS
 
-func VideoPoster(r compton.Registrar, videoId string, rdx kevlar.ReadableRedux) compton.Element {
+type VideoDisplayOptions struct {
+	Duration    bool
+	PublishDate bool
+	EndedDate   bool
+	Downloaded  bool
+}
+
+func DefaultVideoDisplayOptions() *VideoDisplayOptions {
+	return &VideoDisplayOptions{
+		Duration:    true,
+		PublishDate: true,
+		EndedDate:   false,
+		Downloaded:  false,
+	}
+}
+
+func VideoLink(r compton.Registrar, videoId string, rdx kevlar.ReadableRedux, opt *VideoDisplayOptions) compton.Element {
+
+	if opt == nil {
+		opt = DefaultVideoDisplayOptions()
+	}
 
 	r.RegisterStyles(videoLinkStyles, "styles/video-link.css")
 
+	link := compton.A("/watch?v=" + videoId)
+	link.AddClass("video-link")
+
+	stack := compton.FlexItems(r, direction.Column).RowGap(size.Small)
+	link.Append(stack)
+
 	var dehydratedPoster string
 	var repColor string
 
@@ -27,9 +56,72 @@ func VideoPoster(r compton.Registrar, videoId string, rdx kevlar.ReadableRedux)
 	}
 
 	issaImage := compton.IssaImageDehydrated(r, repColor, dehydratedPoster, "/poster?v="+videoId+"&q=hqdefault")
-	issaImage.AddClass("video-poster")
+	issaImage.AspectRatio(float64(16) / float64(9))
+	issaImage.AddClass("poster")
+
+	stack.Append(issaImage)
+
+	if opt.Duration {
+		if durs, sure := rdx.GetLastVal(data.VideoDurationProperty, videoId); sure && durs != "" {
+			if duri, err := strconv.ParseInt(durs, 10, 64); err == nil {
+				durationDiv := compton.DivText(formatSeconds(duri))
+				durationDiv.AddClass("duration")
+				stack.Append(durationDiv)
+			}
+		}
+	}
+
+	if title, ok := rdx.GetLastVal(data.VideoTitleProperty, videoId); ok {
+		stack.Append(compton.H2Text(title))
+	}
 
-	issaImage.Width(size.ColumnWidth).AspectRatio(float64(16) / float64(9))
+	if opt.PublishDate {
+		var publishedDate string
+		if pds, ok := rdx.GetLastVal(data.VideoPublishDateProperty, videoId); ok && pds != "" {
+			publishedDate = parseAndFormat(pds)
+		} else {
+			if ptts, ok := rdx.GetLastVal(data.VideoPublishTimeTextProperty, videoId); ok && ptts != "" {
+				publishedDate = ptts
+			}
+		}
+
+		if publishedDate != "" {
+			pubFrow := compton.Frow(r).FontSize(size.Small)
+			pubFrow.PropVal("Published", publishedDate)
+			stack.Append(pubFrow)
+		}
+	}
+
+	if opt.Downloaded {
+		downFrow := compton.Frow(r).FontSize(size.Small)
+		if dts, ok := rdx.GetLastVal(data.VideoDownloadCompletedProperty, videoId); ok && dts != "" {
+			downFrow.PropVal("Downloaded", parseAndFormat(dts))
+			stack.Append(downFrow)
+		}
+	}
+
+	return link
+}
+
+func parseAndFormat(ts string) string {
+	if pt, err := time.Parse(time.RFC3339, ts); err == nil {
+		return pt.Local().Format(time.RFC1123)
+	} else {
+		return ts
+	}
+}
+
+func formatSeconds(ts int64) string {
+	if ts == 0 {
+		return "unknown"
+	}
+
+	t := time.Unix(ts, 0).UTC()
+
+	layout := "4:05"
+	if t.Hour() > 0 {
+		layout = "15:04:05"
+	}
 
-	return issaImage
+	return t.Format(layout)
 }

rest/get_compton.go

@@ -27,8 +27,7 @@ func GetCompton(w http.ResponseWriter, r *http.Request) {
 	pageStack.Append(gridItems)
 
 	for _, videoId := range videoIds {
-
-		videoLink := compton_elements.VideoPoster(p, videoId, rdx)
+		videoLink := compton_elements.VideoLink(p, videoId, rdx, nil)
 		gridItems.Append(videoLink)
 
 	}