mirror of https://github.com/akhilrex/podgrab.git
391 lines
11 KiB
HTML
391 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>{{.title}} - PodGrab</title>
|
|
{{template "commoncss" .}}
|
|
<style>
|
|
img {
|
|
display: none;
|
|
}
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
.podcastItem .button {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.IsPlayed-true {
|
|
color: #555555;
|
|
}
|
|
|
|
/* Larger than tablet */
|
|
@media (min-width: 750px) {
|
|
img {
|
|
display: block;
|
|
}
|
|
}
|
|
.button-enqueue{
|
|
display: none;
|
|
}
|
|
body.playerExists .button-enqueue{
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
{{template "navbar" .}}
|
|
|
|
<br />{{$setting := .setting}} {{range .podcastItems}}
|
|
|
|
<div class="podcasts row IsPlayed-{{ .IsPlayed }} podcastItem">
|
|
<div class="columns two">
|
|
<img
|
|
onerror="onImageError(this)"
|
|
class="u-full-width"
|
|
src="/podcastitems/{{.ID}}/image"
|
|
alt="{{ .Title }}"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div class="columns ten">
|
|
<div class="row">
|
|
<div class="columns eight">
|
|
<h4>
|
|
{{if .IsPlayed }}<i
|
|
title="Played"
|
|
style="color: green"
|
|
class="fas fa-check-circle"
|
|
></i>
|
|
{{end}} {{.Title}} {{if .Podcast.Title }} // {{ .Podcast.Title}}
|
|
{{end}}
|
|
</h4>
|
|
</div>
|
|
<div class="columns three">
|
|
<small title="{{ formatDate .PubDate }}"
|
|
>{{ naturalDate .PubDate }}</small
|
|
>
|
|
</div>
|
|
<div class="columns one">
|
|
<small> {{ formatDuration .Duration}}</small>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="useMore">{{ .Summary }}</p>
|
|
|
|
{{if .IsPlayed }}
|
|
<a
|
|
class="button button"
|
|
title="Mark as not listened"
|
|
onclick="changePlayedStatus('{{.ID}}',{{ not .IsPlayed }})"
|
|
><i class="fas fa-envelope"></i
|
|
></a>
|
|
{{ else }}
|
|
<a
|
|
class="button button"
|
|
title="Mark as listened"
|
|
onclick="changePlayedStatus('{{.ID}}',{{ not .IsPlayed }})"
|
|
><i class="fas fa-envelope-open"></i
|
|
></a>
|
|
{{ end }}
|
|
|
|
{{if isDateNull .BookmarkDate }}
|
|
<a
|
|
class="button button"
|
|
title="Bookmark Episode"
|
|
onclick="changeBookmarkStatus('{{.ID}}',true)"
|
|
><i class="far fa-bookmark"></i
|
|
></a>
|
|
{{ else }}
|
|
<a
|
|
class="button button"
|
|
title="Remove Bookmark"
|
|
onclick="changeBookmarkStatus('{{.ID}}',false)"
|
|
><i class="fas fa-bookmark"></i
|
|
></a>
|
|
|
|
{{ end }}
|
|
|
|
{{if .DownloadPath}}
|
|
<a
|
|
class="button"
|
|
href="/podcastitems/{{.ID}}/file"
|
|
download
|
|
title="Download episode file"
|
|
><i class="fas fa-download"></i
|
|
></a>
|
|
<a
|
|
class="button button"
|
|
onclick="deleteFile('{{.ID}}')"
|
|
title="Delete Podcast Episode File"
|
|
><i class="fas fa-trash"></i
|
|
></a>
|
|
|
|
|
|
{{else}} {{if not $setting.AutoDownload}}
|
|
<a
|
|
class="button button"
|
|
onclick="downloadToDisk('{{.ID}}')"
|
|
title="Download to server"
|
|
download
|
|
><i class="fas fa-cloud-download-alt"></i
|
|
></a>
|
|
{{else}} {{if eq .DownloadStatus 3}}
|
|
<a
|
|
class="button button"
|
|
onclick="downloadToDisk('{{.ID}}')"
|
|
title="Download to server"
|
|
download
|
|
><i class="fas fa-cloud-download-alt"></i
|
|
></a>
|
|
{{end}} {{end}} {{end }}
|
|
<a
|
|
class="button button"
|
|
onclick="openPlayer(['{{.ID}}'])"
|
|
title="Play Episode"
|
|
><i class="fas fa-play"></i
|
|
></a>
|
|
<a
|
|
class="button button-enqueue"
|
|
onclick="enqueueEpisode(['{{.ID}}'])"
|
|
title="Add Episode to existing player playlist"
|
|
><i class="fas fa-plus"></i
|
|
></a>
|
|
</div>
|
|
<div class="columns one"></div>
|
|
</div>
|
|
<hr />
|
|
{{else}}
|
|
<div class="welcome">
|
|
<p>
|
|
<a href="/add">Click here</a> to add
|
|
a new podcast to start downloading.
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="row">
|
|
<div class="columns twelve" style="text-align: center">
|
|
{{if .previousPage }}
|
|
<a
|
|
href="?page=1"
|
|
class="button"
|
|
>First</a
|
|
>
|
|
{{end}}
|
|
{{if .previousPage }}
|
|
<a
|
|
href="?page={{.previousPage}}"
|
|
class="button"
|
|
>Previous</a
|
|
>
|
|
{{end}}
|
|
|
|
<select name="page" id="pageDdl">
|
|
{{ $page:=.page }}
|
|
{{range $y := intRange 1 .totalPages}}
|
|
<option {{if eq $page $y }} selected="selected" {{end}}}>{{$y}}</option>
|
|
{{end}}
|
|
</select>
|
|
|
|
{{if .nextPage }}
|
|
<a
|
|
href="?page={{.nextPage}}"
|
|
class="button"
|
|
>Next</a
|
|
>
|
|
{{end}}
|
|
{{if gt .totalPages .page }}
|
|
|
|
<a
|
|
href="?page={{.totalPages}}"
|
|
class="button"
|
|
>Last</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",
|
|
type: "info",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
var row = document.getElementById("podcast-" + id);
|
|
row.remove();
|
|
})
|
|
.catch(function (error) {
|
|
if (error.response && error.response.data && error.response.data.message) {
|
|
Vue.toasted.show(error.response.data.message, {
|
|
theme: "bubble",
|
|
type: "error",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
}
|
|
})
|
|
.then(function () {});
|
|
return false;
|
|
}
|
|
function deleteFile(id) {
|
|
axios
|
|
.get("/podcastitems/" + id + "/delete")
|
|
.then(function (response) {
|
|
Vue.toasted.show("Podcast file deleted.", {
|
|
theme: "bubble",
|
|
type: "success",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
var row = document.getElementById("podcast-" + id);
|
|
row.remove();
|
|
})
|
|
.catch(function (error) {
|
|
if (error.response && error.response.data && error.response.data.message) {
|
|
Vue.toasted.show(error.response.data.message, {
|
|
theme: "bubble",
|
|
type: "error",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
}
|
|
})
|
|
.then(function () {});
|
|
return false;
|
|
}
|
|
function changePlayedStatus(id, status) {
|
|
var endpoint = status ? "markPlayed" : "markUnplayed";
|
|
axios
|
|
.get("/podcastitems/" + id + "/" + endpoint, {
|
|
isPlayed: status,
|
|
})
|
|
.then(function (response) {
|
|
Vue.toasted.show("Podcast played status updated.", {
|
|
theme: "bubble",
|
|
type: "info",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
var row = document.getElementById("podcast-" + id);
|
|
row.remove();
|
|
})
|
|
.catch(function (error) {
|
|
if (error.response && error.response.data && error.response.data.message) {
|
|
|
|
Vue.toasted.show(error.response.data.message, {
|
|
theme: "bubble",
|
|
type: "error",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
}
|
|
})
|
|
.then(function () {});
|
|
return false;
|
|
}
|
|
function changeBookmarkStatus(id, status) {
|
|
var endpoint = status ? "bookmark" : "unbookmark";
|
|
axios
|
|
.get("/podcastitems/" + id + "/" + endpoint, {
|
|
isPlayed: status,
|
|
})
|
|
.then(function (response) {
|
|
msg= status?"Bookmark Added": "Bookmark removed";
|
|
Vue.toasted.show(msg, {
|
|
theme: "bubble",
|
|
type: "info",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
var row = document.getElementById("podcast-" + id);
|
|
row.remove();
|
|
})
|
|
.catch(function (error) {
|
|
if (error.response && error.response.data && error.response.data.message) {
|
|
Vue.toasted.show(error.response.data.message, {
|
|
theme: "bubble",
|
|
type: "error",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
}
|
|
})
|
|
.then(function () {});
|
|
return false;
|
|
}
|
|
document.getElementById('pageDdl').addEventListener('change', function() {
|
|
currentPage= {{.page}};
|
|
if(parseInt(this.value)===currentPage){
|
|
return;
|
|
}
|
|
var queryParams = new URLSearchParams(window.location.search);
|
|
|
|
// Set new or modify existing parameter value.
|
|
queryParams.set("page", this.value);
|
|
|
|
window.top.location= window.top.location.origin+window.top.location.pathname+"?"+queryParams.toString();
|
|
});
|
|
</script>
|
|
<script>
|
|
|
|
const socket= getWebsocketConnection(function(event){
|
|
const message= getWebsocketMessage("Register","Home")
|
|
socket.send(message);
|
|
},function(x){
|
|
const msg= JSON.parse(x.data)
|
|
if(msg.messageType=="NoPlayer"){
|
|
document.body.classList.remove("playerExists")
|
|
}
|
|
if(msg.messageType=="PlayerExists"){
|
|
document.body.classList.add("playerExists")
|
|
}
|
|
});
|
|
function enqueueEpisode(id){
|
|
if(!socket){
|
|
return
|
|
}
|
|
socket.send(getWebsocketMessage("Enqueue",`{"itemIds":${JSON.stringify(id)}}`))
|
|
}
|
|
function enquePodcast(id){
|
|
if(!socket){
|
|
return
|
|
}
|
|
socket.send(getWebsocketMessage("Enqueue",`{"podcastId":"${id}"}`))
|
|
}
|
|
function playPodcast(id){
|
|
openPlayer("",id)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|