diff --git a/docs/configuration.md b/docs/configuration.md index 6fa0660..92c5d8c 100644 --- a/docs/configuration.md +++ b/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`: diff --git a/docs/images/videos-widget-vertical-list-preview.png b/docs/images/videos-widget-vertical-list-preview.png new file mode 100644 index 0000000..e33ce86 Binary files /dev/null and b/docs/images/videos-widget-vertical-list-preview.png differ diff --git a/internal/glance/static/main.css b/internal/glance/static/main.css index a4b7591..5312e64 100644 --- a/internal/glance/static/main.css +++ b/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; } diff --git a/internal/glance/templates/videos-vertical-list.html b/internal/glance/templates/videos-vertical-list.html new file mode 100644 index 0000000..b7ea6b2 --- /dev/null +++ b/internal/glance/templates/videos-vertical-list.html @@ -0,0 +1,20 @@ +{{ template "widget-base.html" . }} + +{{- define "widget-content" }} + +{{- end }} diff --git a/internal/glance/widget-videos.go b/internal/glance/widget-videos.go index 398989f..bd36bee 100644 --- a/internal/glance/widget-videos.go +++ b/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 {