mirror of
https://github.com/mxpv/podsync.git
synced 2024-05-11 05:55:04 +00:00
Port Podsync web UI
This commit is contained in:
Maksym Pavlenko
5
.gitignore
vendored
5
.gitignore
vendored
@ -28,4 +28,7 @@ glide.lock
|
||||
|
||||
Gopkg.lock
|
||||
|
||||
.idea/
|
||||
.idea/
|
||||
|
||||
node_modules/
|
||||
package-lock.json
|
||||
@ -13,7 +13,7 @@ a {
|
||||
}
|
||||
|
||||
.background-image {
|
||||
background-image: url('/img/pc_bg.png');
|
||||
background-image: url('/assets/img/pc_bg.png');
|
||||
-ms-background-repeat: repeat-x;
|
||||
background-repeat: repeat-x;
|
||||
-ms-background-position: center bottom;
|
||||
@ -32,7 +32,7 @@ a {
|
||||
/* Footer */
|
||||
|
||||
.footer {
|
||||
background-image: url('/img/pc_footer.png');
|
||||
background-image: url('/assets/img/pc_footer.png');
|
||||
-ms-background-repeat: space;
|
||||
background-repeat: space;
|
||||
-ms-background-position: center bottom;
|
||||
@ -46,7 +46,7 @@ a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-user-select: text;
|
||||
z-index: 1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.twitter-link {
|
||||
@ -180,7 +180,7 @@ a {
|
||||
.man {
|
||||
width: 210px;
|
||||
height: 333px;
|
||||
background-image: url('/img/man.png');
|
||||
background-image: url('/assets/img/man.png');
|
||||
-ms-background-repeat: no-repeat;
|
||||
background-repeat: no-repeat;
|
||||
-ms-background-position: center bottom;
|
||||
@ -267,11 +267,11 @@ a {
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
.background-image {
|
||||
background-image: url('/img/mobile_bg.png')
|
||||
background-image: url('/assets/img/mobile_bg.png')
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-image: url('/img/mobile_footer.png');
|
||||
background-image: url('/assets/img/mobile_footer.png');
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
// Write your Javascript code.
|
||||
|
||||
$(function () {
|
||||
$(function () {
|
||||
function err(msg) {
|
||||
alert(msg);
|
||||
}
|
||||
@ -12,7 +10,7 @@ $(function () {
|
||||
|
||||
$.ajax({
|
||||
dataType: 'text',
|
||||
url: '/feed/create',
|
||||
url: '/api/create',
|
||||
method: 'POST',
|
||||
data: JSON.stringify(data),
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
@ -22,24 +20,18 @@ $(function () {
|
||||
done(feedLink);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
if (xhr.status === 400) {
|
||||
// Bad request
|
||||
var text = '';
|
||||
var text = '';
|
||||
|
||||
try {
|
||||
var json = JSON.parse(xhr.responseText);
|
||||
$.each(json, function (key, value) {
|
||||
text += value + '\r\n';
|
||||
});
|
||||
} catch (e) {
|
||||
text = xhr.responseText;
|
||||
}
|
||||
|
||||
err(text);
|
||||
} else {
|
||||
// Generic error
|
||||
err('Server sad \'' + error + '\': ' + xhr.responseText);
|
||||
try {
|
||||
var json = JSON.parse(xhr.responseText);
|
||||
if (json['error']) {
|
||||
text = json['error'];
|
||||
}
|
||||
} catch (e) {
|
||||
text = xhr.responseText;
|
||||
}
|
||||
|
||||
err(text);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -104,15 +96,14 @@ $(function () {
|
||||
$('#best-quality, #worst-quality').toggleClass('selected-option');
|
||||
}
|
||||
|
||||
function getQuality() {
|
||||
function getFormat() {
|
||||
var isAudio = $('#audio-format').hasClass('selected-option');
|
||||
var isWorst = $('#worst-quality').hasClass('selected-option');
|
||||
return isAudio ? 'audio' : 'video'
|
||||
}
|
||||
|
||||
if (isAudio) {
|
||||
return isWorst ? 'AudioLow' : 'AudioHigh';
|
||||
} else {
|
||||
return isWorst ? 'VideoLow' : 'VideoHigh';
|
||||
}
|
||||
function getQuality() {
|
||||
var isWorst = $('#worst-quality').hasClass('selected-option');
|
||||
return isWorst ? 'low' : 'high';
|
||||
}
|
||||
|
||||
function pageSwitch(evt) {
|
||||
@ -195,7 +186,7 @@ $(function () {
|
||||
|
||||
$('#get-link').click(function(e) {
|
||||
var url = $('#url-input').val();
|
||||
createFeed({ url: url, quality: getQuality(), pageSize: getPageCount() }, displayLink);
|
||||
createFeed({ url: url, format: getFormat(), quality: getQuality(), page_size: getPageCount() }, displayLink);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
@ -32,16 +32,19 @@ func MakeHandlers(feed feed) http.Handler {
|
||||
r.LoadHTMLGlob(path.Join(rootDir, "templates/*.html"))
|
||||
|
||||
r.GET("/", func(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "index.html", gin.H{"title": "Index page"})
|
||||
c.HTML(http.StatusOK, "index.html", gin.H{
|
||||
"identity": &struct{}{},
|
||||
"enableFeatures": true,
|
||||
})
|
||||
})
|
||||
|
||||
// REST API
|
||||
|
||||
r.GET("/ping", func(c *gin.Context) {
|
||||
r.GET("/api/ping", func(c *gin.Context) {
|
||||
c.String(http.StatusOK, "ok")
|
||||
})
|
||||
|
||||
r.POST("/create", func(c *gin.Context) {
|
||||
r.POST("/api/create", func(c *gin.Context) {
|
||||
req := &api.CreateFeedRequest{}
|
||||
|
||||
if err := c.BindJSON(req); err != nil {
|
||||
@ -58,7 +61,7 @@ func MakeHandlers(feed feed) http.Handler {
|
||||
c.JSON(http.StatusOK, gin.H{"id": hashId})
|
||||
})
|
||||
|
||||
r.GET("/feed/:hashId", func(c *gin.Context) {
|
||||
r.GET("/api/feed/:hashId", func(c *gin.Context) {
|
||||
hashId := c.Param("hashId")
|
||||
if hashId == "" || len(hashId) > 12 {
|
||||
c.JSON(badRequest(errors.New("invalid feed id")))
|
||||
@ -74,7 +77,7 @@ func MakeHandlers(feed feed) http.Handler {
|
||||
c.Data(http.StatusOK, "application/rss+xml", podcast.Bytes())
|
||||
})
|
||||
|
||||
r.GET("/metadata/:hashId", func(c *gin.Context) {
|
||||
r.GET("/api/metadata/:hashId", func(c *gin.Context) {
|
||||
hashId := c.Param("hashId")
|
||||
if hashId == "" || len(hashId) > 12 {
|
||||
c.JSON(badRequest(errors.New("invalid feed id")))
|
||||
|
||||
@ -1,5 +1,143 @@
|
||||
<html>
|
||||
<h1>
|
||||
{{ .title }}
|
||||
</h1>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Podsync - Turn YouTube channels into podcast feeds</title>
|
||||
<meta property="og:title" content="Podsync - turn YouTube channels into podcast feeds" />
|
||||
<meta property="og:description" content="Simple and free service that lets you listen to any YouTube or Vimeo channels, playlists or user videos in podcast format" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
<meta property="og:image" content="/assets/img/og_image.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Simple and free service that lets you listen to any YouTube or Vimeo channels, playlists or user videos in podcast format"/>
|
||||
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="assets/css/site.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="background-image">
|
||||
<div class="title">
|
||||
<h1>Podsync</h1>
|
||||
|
||||
<h2>
|
||||
Simple and free service that lets you listen to any YouTube or
|
||||
Vimeo channels, playlists or user videos in podcast format.
|
||||
</h2>
|
||||
|
||||
<div class="login-block">
|
||||
{{if not .identity }}
|
||||
<p>
|
||||
Yo, <i class="fa fa-user-circle" aria-hidden="true"></i> @User.GetName() ( <a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i>logout</a>)
|
||||
</p>
|
||||
{{else}}
|
||||
<h5>
|
||||
<a href="/login">
|
||||
Login with Patreon to unlock features
|
||||
<i class="fa fa-question-circle master-tooltip" aria-hidden="true" title="We have added advanced features for those who supported development. Login with your Patreon account to unlock them.">
|
||||
</i>
|
||||
</a>
|
||||
</h5>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="main-border shadow">
|
||||
<div class="input-border">
|
||||
<input id="url-input" type="url" placeholder="paste your link here" spellcheck="false" autofocus />
|
||||
<div class="arrow-button">
|
||||
<a href="#" id="get-link">
|
||||
<i class="fa fa-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<p>
|
||||
{{if .enableFeatures }}
|
||||
<i class="fa fa-wrench" aria-hidden="true"></i>
|
||||
{{else}}
|
||||
<i class="fa fa-question-circle master-tooltip"
|
||||
aria-hidden="true"
|
||||
title="This features are available for patrons only. You may support us and unlock this features"></i>
|
||||
{{end}}
|
||||
|
||||
<span class="{{if not .enableFeatures }}locked{{end}}">
|
||||
<span id="control-panel">
|
||||
Selected format <a class="selected-option" id="video-format">video</a> <a id="audio-format">audio</a>,
|
||||
quality <a class="selected-option" id="best-quality">best</a> <a id="worst-quality">worst</a>,
|
||||
</span>
|
||||
|
||||
<span id="page-controls">
|
||||
episode count <a class="selected-option">50</a> <a>100</a> <a>150</a>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="man"></div>
|
||||
|
||||
<div>
|
||||
<a href="https://www.patreon.com/podsync" target="_blank">
|
||||
<img class="patreon shadow" width="400" src="assets/img/become_patreon.png" alt="Become my patron on Patreon" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="modal" id="modal" style="display: none">
|
||||
<input type="url" id="output-input" readonly />
|
||||
<div class="modal-links">
|
||||
<span>
|
||||
<a id="modal-copy" href="#">
|
||||
<i class="fa fa-clone" aria-hidden="true"></i>
|
||||
Copy
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<a id="modal-open" href="#" target="_blank">
|
||||
<i class="fa fa-external-link" aria-hidden="true"></i>
|
||||
Open
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<a id="close-modal" href="#">
|
||||
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
|
||||
Close
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="twitter-link">
|
||||
<a href="https://twitter.com/pod_sync"><i class="fa fa-twitter" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
||||
<script src="assets/js/site.js"></script>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-64237526-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function (w,i,d,g,e,t,s) {w[d] = w[d]||[];t= i.createElement(g);
|
||||
t.async=1;t.src=e;s=i.getElementsByTagName(g)[0];s.parentNode.insertBefore(t, s);
|
||||
})(window, document, '_gscq','script','//widgets.getsitecontrol.com/23626/script.js');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
Reference in New Issue
Block a user