123 lines
3.2 KiB
Plaintext
123 lines
3.2 KiB
Plaintext
package views
|
|
|
|
import (
|
|
"fmt"
|
|
"go.fifitido.net/ytdl-web/pkg/ytdl/metadata"
|
|
)
|
|
|
|
type DownloadsViewModel struct {
|
|
Url string
|
|
Meta *metadata.Metadata
|
|
}
|
|
|
|
templ videoFormatView(vm *DownloadsViewModel, vidIndex int, format metadata.Format, label string) {
|
|
{{ filename := fmt.Sprintf("%s-%s.%s", vm.Meta.ID, format.Resolution, format.Ext) }}
|
|
<div style="font-size: smaller">{ label }</div>
|
|
<div class="flex-grow-1 d-flex gap-3">
|
|
<style>
|
|
.dl-direct:after {
|
|
content: 'Download (direct)';
|
|
}
|
|
</style>
|
|
<a
|
|
class="btn btn-primary flex-grow-1 dl-direct"
|
|
download={ filename }
|
|
href={ templ.SafeURL(format.Url) }
|
|
aria-label="Direct Download"
|
|
>
|
|
// Workaround for browsers that use the content of the link as the filename
|
|
<span class="d-none">{ filename }</span>
|
|
</a>
|
|
<a
|
|
class="btn btn-primary flex-grow-1"
|
|
download={ filename }
|
|
href={ pathTo(ctx, fmt.Sprintf("download/proxy?url=%s&format=%s&index=%d", vm.Url, format.FormatID, vidIndex)) }
|
|
aria-label="Proxied Download"
|
|
>
|
|
Download (proxied)
|
|
</a>
|
|
</div>
|
|
}
|
|
|
|
templ videoView(vm *DownloadsViewModel, index int, video *VideoViewModel) {
|
|
if index != 0 {
|
|
<hr class="mt-5"/>
|
|
}
|
|
<div class="d-flex flex-column flex-lg-row justify-content-center gap-5 mt-5">
|
|
{{
|
|
thumbnail := video.Meta.Thumbnail
|
|
thumbnailAlt := video.Meta.ID
|
|
if video.Meta.Title != nil {
|
|
thumbnailAlt = *video.Meta.Title
|
|
}
|
|
}}
|
|
if thumbnail != nil {
|
|
<div class="d-flex justify-content-center">
|
|
<img src={ *thumbnail } alt={ thumbnailAlt } style="max-height: 25rem; max-width: 100%; margin: 0 auto"/>
|
|
</div>
|
|
}
|
|
<div class={ downloads(), "flex-lg-grow-1" }>
|
|
for _, format := range video.Formats {
|
|
@videoFormatView(vm, index, format, format.Format)
|
|
}
|
|
</div>
|
|
</div>
|
|
if len(video.OtherFormats) > 0 {
|
|
{{ collapseId := fmt.Sprintf("collapse-%s-%d", vm.Meta.ID, index) }}
|
|
<div class="d-grid my-3">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target={ "#" + collapseId }
|
|
aria-expanded="false"
|
|
aria-controls={ collapseId }
|
|
>
|
|
See More Formats
|
|
</button>
|
|
</div>
|
|
<div id={ collapseId } class={ fullWidth(), "collapse" }>
|
|
<div class={ downloads(), "d-flex d-md-grid flex-column" }>
|
|
for _, format := range video.OtherFormats {
|
|
{{ label := fmt.Sprintf("ext: %s, resolution: %s, filesize: %d, note: %s", format.Ext, format.Resolution, format.Filesize, format.FormatNote) }}
|
|
@videoFormatView(vm, index, format, label)
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
css downloads() {
|
|
display: grid;
|
|
grid-template-columns: minmax(auto, max-content) auto;
|
|
gap: 1.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
css fullWidth() {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
templ Downloads(vm *DownloadsViewModel) {
|
|
{{ videos := GetVideosFromMetadata(vm.Meta) }}
|
|
@Layout() {
|
|
<div class="d-flex flex-column align-items-center">
|
|
<h1>Download Video</h1>
|
|
<h2 class="fs-4 text-muted text-center">{ *vm.Meta.Title }</h2>
|
|
<p style="font-size: 0.85rem">{ vm.Url }</p>
|
|
<a
|
|
href={ pathTo(ctx) }
|
|
hx-get={ pathTo(ctx) }
|
|
hx-trigger="click"
|
|
class="btn btn-secondary btn-sm mt-3"
|
|
style="width: 30rem; max-width: 100%"
|
|
>
|
|
Download Another Video
|
|
</a>
|
|
</div>
|
|
for index, video := range videos {
|
|
@videoView(vm, index, video)
|
|
}
|
|
}
|
|
}
|