mirror of https://github.com/akhilrex/podgrab.git
301 lines
8.9 KiB
HTML
301 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Add Podcast - PodGrab</title>
|
|
{{template "commoncss" .}}
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
{{template "navbar" .}}
|
|
<br />
|
|
<div id="app" v-cloak>
|
|
<div class="row">
|
|
<h4>Add using the direct link to rss feed</h4>
|
|
<form action="/" method="post" @submit="addPodcastManual">
|
|
<div class="nine columns">
|
|
<input
|
|
type="url"
|
|
v-model="url"
|
|
name="url"
|
|
id="url"
|
|
placeholder="Enter Podcast RSS feed to add"
|
|
class="u-full-width"
|
|
/>
|
|
</div>
|
|
<div class="three columns">
|
|
<input
|
|
type="submit"
|
|
value="Add Podcast"
|
|
class="u-full-width button"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<hr />
|
|
<div class="row">
|
|
<div>
|
|
<h4>Import OPML file</h4>
|
|
<i
|
|
><small
|
|
>Most of the major podcast manager apps (eg. Podcast Addict)
|
|
have the option to export add your podcast subscriptions in the
|
|
opml format. You can migrate all your podcast in one go by
|
|
exporting that OPML file and importing it here.</small
|
|
></i
|
|
>
|
|
</div>
|
|
<br />
|
|
|
|
<form
|
|
enctype="multipart/form-data"
|
|
action="/"
|
|
@submit="uploadOpml"
|
|
ref="uploadForm"
|
|
>
|
|
<div class="nine columns">
|
|
<input
|
|
type="file"
|
|
@change="selectFile"
|
|
ref="file"
|
|
accept="text/xml,.opml"
|
|
/>
|
|
</div>
|
|
|
|
<div class="three columns">
|
|
<input
|
|
type="submit"
|
|
value="Upload"
|
|
class="u-full-width button"
|
|
/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<hr />
|
|
<div class="row" id="searchContainer">
|
|
<h4>Search for your favorite podcast</h4>
|
|
<i
|
|
><small
|
|
>Experimental: Uses iTunes API to show search results.</small
|
|
></i
|
|
>
|
|
<br />
|
|
<form action="/search" method="post" @submit="search">
|
|
<div class="seven columns">
|
|
<input
|
|
type="search"
|
|
name="search"
|
|
id="search"
|
|
placeholder="Search for your podcast"
|
|
v-model="query"
|
|
class="u-full-width"
|
|
/>
|
|
</div>
|
|
<div class="three columns">
|
|
<select
|
|
type="submit"
|
|
class="u-full-width button"
|
|
v-model="searchSource"
|
|
name="searchSource"
|
|
>
|
|
{{range $key, $value := .searchOptions}}
|
|
<option value="{{$key}}">{{$value}}</option>
|
|
{{end}}
|
|
</select>
|
|
|
|
</div>
|
|
<div class="two columns">
|
|
<input
|
|
type="submit"
|
|
value="Search"
|
|
class="u-full-width button"
|
|
/>
|
|
</div>
|
|
</form>
|
|
<br />
|
|
<progress v-show="searching" class="u-full-width"></progress>
|
|
<div class="results">
|
|
<div v-for="item in results" :key="item.url" class="row">
|
|
|
|
<div class="columns two">
|
|
<img
|
|
class="u-full-width"
|
|
:src="item.image"
|
|
:alt="item.title"
|
|
/>
|
|
</div>
|
|
<div class="columns nine">
|
|
<h5 style="margin-bottom: 0px;">${item.title}</h5>
|
|
<small v-if="item.categories && item.categories.length">
|
|
|
|
Categories: ${item.categories.join(', ')}
|
|
</small>
|
|
<p v-if="item.description">${ item.description }</p>
|
|
</div>
|
|
<div class="columns one">
|
|
<button
|
|
v-if="!item.already_saved"
|
|
v-on:click="addPodcast(item)"
|
|
class="button button"
|
|
>
|
|
+ Add
|
|
</button>
|
|
<button
|
|
v-if="item.already_saved"
|
|
class="button"
|
|
disabled="disabled"
|
|
>
|
|
Already Added
|
|
</button>
|
|
</div>
|
|
|
|
<hr />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{template "scripts"}}
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
delimiters: ["${", "}"],
|
|
el: "#app",
|
|
data: {
|
|
results: [],
|
|
query: "",
|
|
searchSource:"itunes",
|
|
searching: false,
|
|
url: "",
|
|
selectedFiles: undefined,
|
|
},
|
|
mounted(){
|
|
if(localStorage && localStorage.searchSource){
|
|
this.searchSource=localStorage.searchSource;
|
|
}
|
|
},
|
|
watch:{
|
|
searchSource(newSource,oldSource){
|
|
if(newSource===oldSource){
|
|
return;
|
|
}
|
|
if(localStorage){
|
|
localStorage.searchSource=newSource
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
selectFile: function () {
|
|
this.selectedFiles = this.$refs.file.files;
|
|
},
|
|
uploadOpml: function (e) {
|
|
e.preventDefault();
|
|
var currentFile = this.selectedFiles.item(0);
|
|
if (!currentFile) {
|
|
return;
|
|
}
|
|
var self = this;
|
|
self.searching = true;
|
|
var formData = new FormData();
|
|
|
|
formData.append("file", currentFile);
|
|
axios
|
|
.post("/opml", formData, {
|
|
headers: {
|
|
"Content-Type": "multipart/form-data",
|
|
},
|
|
})
|
|
.then(function (response) {
|
|
Vue.toasted.show("File uploaded successfully.", {
|
|
theme: "bubble",
|
|
type: "success",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
item.already_saved = true;
|
|
})
|
|
.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 () {
|
|
self.searching = false;
|
|
|
|
self.$refs.uploadForm.reset();
|
|
});
|
|
},
|
|
search: function (e) {
|
|
e.preventDefault();
|
|
if (!this.query) {
|
|
return;
|
|
}
|
|
var self = this;
|
|
self.searching = true;
|
|
axios
|
|
.get(encodeURI("/search?q=" + this.query+"&searchSource="+this.searchSource))
|
|
.then(function (response) {
|
|
self.results = response.data;
|
|
})
|
|
.catch(function (error) {})
|
|
.then(function () {
|
|
self.searching = false;
|
|
});
|
|
},
|
|
addPodcastManual: function (e) {
|
|
e.preventDefault();
|
|
if (!this.url) {
|
|
return;
|
|
}
|
|
this.addPodcast({ url: this.url });
|
|
},
|
|
addPodcast: function (item) {
|
|
// console.log(item);
|
|
var self = this;
|
|
self.searching = true;
|
|
axios
|
|
.post("/podcasts", {
|
|
url: item.url,
|
|
})
|
|
.then(function (response) {
|
|
Vue.toasted.show("Podcast added successfully.", {
|
|
theme: "bubble",
|
|
type: "success",
|
|
position: "top-right",
|
|
duration: 5000,
|
|
});
|
|
item.already_saved = true;
|
|
})
|
|
.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 () {
|
|
self.searching = false;
|
|
self.url = "";
|
|
});
|
|
return false;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|