Add vertical-list style for videos widget

docs/configuration.md

@@ -583,6 +583,7 @@ Preview:
 | channels | array | yes | |
 | limit | integer | no | 25 |
 | style | string | no | horizontal-cards |
+| collapse-after | integer | no | 7 |
 | collapse-after-rows | integer | no | 4 |
 | include-shorts | boolean | no | false |
 | video-url-template | string | no | https://www.youtube.com/watch?v={VIDEO-ID} |
@@ -607,11 +608,18 @@ Then scroll down and click on "Share channel", then "Copy channel ID":
 ##### `limit`
 The maximum number of videos to show.
 
+##### `collapse-after`
+Specify the number of videos to show when using the `vertical-list` style before the "SHOW MORE" button appears.
+
 ##### `collapse-after-rows`
 Specify the number of rows to show when using the `grid-cards` style before the "SHOW MORE" button appears.
 
 ##### `style`
-Used to change the appearance of the widget. Possible values are `horizontal-cards` and `grid-cards`.
+Used to change the appearance of the widget. Possible values are `horizontal-cards`, `vertical-list` and `grid-cards`.
+
+Preview of `vertical-list`:
+
+![](images/videos-widget-vertical-list-preview.png)
 
 Preview of `grid-cards`:
 

internal/glance/static/main.css

@@ -936,6 +936,13 @@ details[open] .summary::after {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
+.video-horizontal-list-thumbnail {
+    height: 4rem;
+    aspect-ratio: 16 / 8.9;
+    object-fit: cover;
+    border-radius: var(--border-radius);
+}
+
 .search-icon {
     width: 2.3rem;
 }

internal/glance/templates/videos-vertical-list.html

@@ -0,0 +1,20 @@
+{{ template "widget-base.html" . }}
+
+{{- define "widget-content" }}
+<ul class="list list-gap-14 collapsible-container" data-collapse-after="{{ .CollapseAfter }}">
+    {{- range .Videos }}
+    <li class="flex thumbnail-parent gap-10 items-center">
+        <img class="video-horizontal-list-thumbnail thumbnail" loading="lazy" src="{{ .ThumbnailUrl }}" alt="">
+        <div class="min-width-0">
+            <a class="block text-truncate color-primary-if-not-visited" href="{{ .Url }}">{{ .Title }}</a>
+            <ul class="list-horizontal-text flex-nowrap">
+                <li class="shrink-0" {{ dynamicRelativeTimeAttrs .TimePosted }}></li>
+                <li class="min-width-0">
+                    <a class="block text-truncate" href="{{ .AuthorUrl }}" target="_blank" rel="noreferrer">{{ .Author }}</a>
+                </li>
+            </ul>
+        </div>
+    </li>
+    {{- end }}
+</ul>
+{{- end }}

internal/glance/widget-videos.go

@@ -15,8 +15,9 @@ import (
 const videosWidgetPlaylistPrefix = "playlist:"
 
 var (
-	videosWidgetTemplate     = mustParseTemplate("videos.html", "widget-base.html", "video-card-contents.html")
-	videosWidgetGridTemplate = mustParseTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html")
+	videosWidgetTemplate             = mustParseTemplate("videos.html", "widget-base.html", "video-card-contents.html")
+	videosWidgetGridTemplate         = mustParseTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html")
+	videosWidgetVerticalListTemplate = mustParseTemplate("videos-vertical-list.html", "widget-base.html")
 )
 
 type videosWidget struct {
@@ -24,6 +25,7 @@ type videosWidget struct {
 	Videos            videoList `yaml:"-"`
 	VideoUrlTemplate  string    `yaml:"video-url-template"`
 	Style             string    `yaml:"style"`
+	CollapseAfter     int       `yaml:"collapse-after"`
 	CollapseAfterRows int       `yaml:"collapse-after-rows"`
 	Channels          []string  `yaml:"channels"`
 	Limit             int       `yaml:"limit"`
@@ -41,6 +43,10 @@ func (widget *videosWidget) initialize() error {
 		widget.CollapseAfterRows = 4
 	}
 
+	if widget.CollapseAfter == 0 || widget.CollapseAfter < -1 {
+		widget.CollapseAfter = 7
+	}
+
 	return nil
 }
 
@@ -59,11 +65,18 @@ func (widget *videosWidget) update(ctx context.Context) {
 }
 
 func (widget *videosWidget) Render() template.HTML {
-	if widget.Style == "grid-cards" {
-		return widget.renderTemplate(widget, videosWidgetGridTemplate)
+	var template *template.Template
+
+	switch widget.Style {
+	case "grid-cards":
+		template = videosWidgetGridTemplate
+	case "vertical-list":
+		template = videosWidgetVerticalListTemplate
+	default:
+		template = videosWidgetTemplate
 	}
 
-	return widget.renderTemplate(widget, videosWidgetTemplate)
+	return widget.renderTemplate(widget, template)
 }
 
 type youtubeFeedResponseXml struct {