Files
ytdlp-site/templates/video.html

115 lines
4.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.original.Title}}</title>
<link rel="stylesheet" href="/static/style/common.css">
<link rel="stylesheet" href="/static/style/video.css">
<link rel="stylesheet" href="/static/style/media-card.css">
{{template "header-css" .}}
{{template "footer-css" .}}
</head>
<body>
{{template "header" .}}
<h1>{{.original.Title}}</h1>
{{ if .original.Video }}
<div class="media-grid">
{{range .videos}}
<div class="media-card">
<h3>{{.Source}} {{.Width}} x {{.Height}} @ {{.FPS}}</h3>
<div class="video-container">
<video controls playsinline preload="none">
<source src="/temp/{{.Token}}" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="media-buttons">
<a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}},
{{.StreamRate}})</a>
{{if ne .Source "original"}}
<form action="/delete_video/{{.ID}}" method="post">
<button class="delete-button" type="submit">Delete</button>
</form>
{{end}}
</div>
</div>
{{end}}
<div class="media-card new-transcode">
<h3>New Video Transcode</h3>
<form action="/transcode_to_video/{{.original.ID}}" method="post">
<input type="hidden" name="original_id" value="{{.original.ID}}">
<div class="selects">
<select name="height" id="height-select">
<option value="144">144p</option>
<option value="240">240p</option>
<option value="360">360p</option>
<option value="480">480p</option>
<option value="540">540p</option>
<option value="720">720p</option>
<option value="1080">1080p</option>
<option value="2160">2160p</option>
</select>
<select name="fps" id="fps-select">
<option value="24">24 fps</option>
<option value="25">25 fps</option>
<option value="29.97">29.97 fps</option>
<option value="30">30 fps</option>
<option value="59.94">59.94 fps</option>
<option value="60">60 fps</option>
</select>
</div>
<button class="transcode-button" type="submit">Transcode</button>
</form>
</div>
</div>
{{end}}
<div class="media-grid">
{{range .audios}}
<div class="media-card">
<h3>{{.Kbps}}</h3>
<div class="audio-container">
<audio controls playsinline preload="none">
<source src="/temp/{{.Token}}">
Your browser does not support the audio tag.
</audio>
</div>
<div class="media-buttons">
<a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}},
{{.StreamRate}})</a>
{{if ne .Source "original"}}
<form action="/delete_audio/{{.ID}}" method="post">
<button class="delete-button" type="submit">Delete</button>
</form>
{{end}}
</div>
</div>
{{end}}
<div class="media-card new-transcode">
<h3>New Audio Transcode</h3>
<form action="/transcode_to_audio/{{.original.ID}}" method="post">
<input type="hidden" name="original_id" value="{{.original.ID}}">
<select name="kbps" id="kbps-select">
<option value="64">64 kbps</option>
<option value="96">96 kbps</option>
<option value="128">128 kbps</option>
<option value="160">160 kbps</option>
<option value="192">192 kbps</option>
</select>
<button class="transcode-button" type="submit">Transcode</button>
</form>
</div>
</div>
<input type="hidden" id="video-id" value="{{.original.ID}}">
<input type="hidden" id="video-timestamp" value="{{.original.Timestamp}}">
<script src="/static/script/save-media-progress.js"></script>
{{template "footer" .}}
</body>
</html>