ytdl-web/web/views/download.html

50 lines
1.9 KiB
HTML

<div class="d-flex flex-column align-items-center">
<h1>Download Video</h1>
<h2 class="fs-4 text-muted text-center">{{.Meta.Title}}</h2>
<p style="font-size: 0.85rem">{{.Url}}</p>
<a href="{{.BasePath}}/" class="btn btn-secondary btn-sm mt-3" style="width: 30rem; max-width: 100%">
Download Another Video
</a>
</div>
{{$root := .}}
{{define "download"}}
<div style="font-size: smaller">{{.Format.Format}}</div>
<div class="flex-grow-1 d-flex gap-3">
<a class="btn btn-primary flex-grow-1" download="{{.Meta.ID}}-{{.Format.Resolution}}.{{.Format.Ext}}" P
href="{{.Format.Url}}">
Download (direct)
</a>
<a class="btn btn-primary flex-grow-1" download="{{.Meta.ID}}-{{.Format.Resolution}}.{{.Format.Ext}}"
href="{{.BasePath}}/download/proxy?url={{queryEscape .Url}}&format={{.Format.FormatID}}">
Download (proxied)
</a>
</div>
{{end}}
{{range $vidIndex, $video := .Videos}}
{{if not (eq $vidIndex 0)}}
<hr class="mt-5" />
{{end}}
<div class="d-flex flex-column flex-lg-row justify-content-center gap-5 mt-5">
<div class="d-flex justify-content-center">
<img src="{{.Meta.Thumbnail}}" alt="{{.Meta.Title}}" style="max-height: 25rem; max-width: 100%; margin: 0 auto;" />
</div>
<div class="downloads flex-lg-grow-1">
{{range $index, $format := $video.Formats}}
<div style="font-size: smaller">{{$format.Format}}</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}}">
Download (proxied)
</a>
</div>
{{end}}
</div>
</div>
{{end}}