Add collapse block with filtered out formats

app/views.go

@@ -3,6 +3,7 @@ package app
 import (
 	"embed"
 	"encoding/json"
+	"fmt"
 	"html/template"
 	"net/url"
 
@@ -39,6 +40,25 @@ var Views = html.New(
 				"Format":   format,
 			}
 		}).
+		WithFunction("sprintf", func(format string, args ...any) string {
+			return fmt.Sprintf(format, args...)
+		}).
+		WithFunction("filesize", func(size *int) string {
+			if size == nil {
+				return "unknown"
+			}
+			const unit = 1000
+			if *size < unit {
+				return fmt.Sprintf("%d B", *size)
+			}
+			div, exp := int64(unit), 0
+			for n := *size / unit; n >= unit; n /= unit {
+				div *= unit
+				exp++
+			}
+			return fmt.Sprintf("%.1f %cB",
+				float64(*size)/float64(div), "kMGTPE"[exp])
+		}).
 		WithFunctions(reformism.FuncsHTML),
 )
 

app/views/download.html

@@ -19,18 +19,39 @@
   </div>
   <div class="downloads flex-lg-grow-1">
     {{range $index, $format := $video.Formats}}
-    <div style="font-size: smaller">{{$format.Format}}</div>
+    {{template "format" (map "root" $root "format" $format "label" $format.Format "vidIndex" $vidIndex)}}
-    <div class="flex-grow-1 d-flex gap-3">
+    {{end}}
-      <a class="btn btn-primary flex-grow-1" download="{{$root.Meta.ID}}-{{$format.Resolution}}.{{$format.Ext}}" P
-        href="{{$format.Url}}">
-        Download (direct)
-      </a>
-      <a class="btn btn-primary flex-grow-1" download="{{$root.Meta.ID}}-{{$format.Resolution}}.{{$format.Ext}}"
-        href="{{$root.BasePath}}/download/proxy?url={{queryEscape $root.Url}}&format={{$format.FormatID}}&index={{$vidIndex}}">
-        Download (proxied)
-      </a>
   </div>
+</div>
+{{if gt (len $video.OtherFormats) 0}}
+<div class="d-grid my-3">
+  <button class="btn btn-secondary" data-bs-toggle="collapse"
+    data-bs-target="#{{$root.Meta.ID}}-{{$vidIndex}}-collapse">
+    See More Formats
+  </button>
+</div>
+<div id="{{$root.Meta.ID}}-{{$vidIndex}}-collapse" class="collapse">
+  <div class="downloads d-flex d-md-grid flex-column">
+    {{range $index, $format := $video.OtherFormats}}
+    {{$label := sprintf "ext: %s, resolution: %s, filesize: %s, note: %s" $format.Ext $format.Resolution
+    (filesize $format.Filesize) $format.FormatNote}}
+    {{template "format" (map "root" $root "format" $format "label" $label "vidIndex" $vidIndex)}}
     {{end}}
   </div>
 </div>
 {{end}}
+{{end}}
+
+{{define "format"}}
+<div style="font-size: smaller">{{.label}}</div>
+<div class="flex-grow-1 d-flex gap-3">
+  <a class="btn btn-primary flex-grow-1" download="{{.root.Meta.ID}}-{{.format.Resolution}}.{{.format.Ext}}" P
+    href="{{.format.Url}}">
+    Download (direct)
+  </a>
+  <a class="btn btn-primary flex-grow-1" download="{{.root.Meta.ID}}-{{.format.Resolution}}.{{.format.Ext}}"
+    href="{{.root.BasePath}}/download/proxy?url={{queryEscape .root.Url}}&format={{.format.FormatID}}&index={{.vidIndex}}">
+    Download (proxied)
+  </a>
+</div>
+{{end}}