You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
podgrab/client/episodes.html

130 lines
3.0 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha512-EZLkOqwILORob+p0BXZc+Vm3RgJBOe1Iq/0fiI7r/wJgzOFZMlsqTa29UEl6v6U6gsV4uIpsNZoV32YZqrCRCQ==" crossorigin="anonymous" />
<title>PodGrab</title>
{{template "commoncss"}}
<style>
img{
display: none
}
h1,h2,h3,h4,h5{
margin-bottom: 1rem;
}
h4{
font-size: 2rem;
}
h5{
font-size: 1.5rem;
}
p{
margin-bottom: 0.5rem;
}
hr{
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Larger than tablet */
@media (min-width: 750px) {
img{
display: block
}
}
</style>
</head>
<body>
<div class="container">
<section class="header">
<h1>{{ .title }} ({{ .totalCount }})</h1>
</section>
{{template "navbar"}}
<br>{{$setting := .setting}}
{{range .podcastItems}}
<div class="podcasts row">
<div class="columns two">
<img class="u-full-width" src="{{ .Image }}" alt="{{ .Title }}">
</div>
<div class="columns ten">
<div class="row">
<div class="columns nine">
<h4>{{.Title}} // {{ .Podcast.Title}}</h4>
</div>
<div class="columns two">
<small>{{ formatDate .PubDate }}</small>
</div>
<div class="columns one">
<small> {{ formatDuration .Duration}}</small>
</div>
</div>
<p>{{ .Summary }}</p>
{{if .DownloadPath}}
<a class="button button-primary" href="{{ .DownloadPath }}" download>Download</a>
{{else}}
{{if not $setting.AutoDownload}}
<a class="button button-primary" onclick="downloadToDisk('{{.ID}}')" download>Download to Disk</a>
{{end}}
{{end }}
</div>
<div class="columns one">
</div>
</div>
<hr>
{{end}}
<div class="row"><div class="columns twelve" style="text-align: center;">
{{if .previousPage }}
<a href="?page={{.previousPage}}" class="button button-primary">Previous Page</a>
{{end}}
{{if .nextPage }}
<a href="?page={{.nextPage}}" class="button button-primary">Next Page</a>
{{end}}
</div></div>
</div>
{{template "scripts"}}
<script>
function downloadToDisk(id){
axios.get("/podcastitems/"+id+"/download")
.then(function(response){
Vue.toasted.show('Podcast download enqueued.' ,{
theme: "bubble",
position: "top-right",
duration : 5000
});
var row = document.getElementById('podcast-'+id);
row.remove();
})
.catch(function(error){
if(error.response){
Vue.toasted.show(error.response.data?.message, {
theme: "bubble",
position: "top-right",
duration : 5000
})
}
}).
then(function(){
})
return false;
}
</script>
</body>
</html>