apps
/
ytdl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Add collapse block with filtered out formats

This commit is contained in:
Evan Fiordeliso 2024-02-17 12:01:59 -05:00
parent 74ea23add9
commit e59915a8f5
2 changed files with 52 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/views.go
View File

@ -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),
)

37
app/views/download.html
View File

@ -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)}}
{{end}}
</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}}">
<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}}">
<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}}
</div>
</div>
{{end}}