145 lines
4 KiB
HTML
145 lines
4 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
{% import "header.html" as header %}
|
|
<title>{{channel['name']}}</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="/static/common.css">
|
|
<script src="/static/common.js"></script>
|
|
|
|
<style>
|
|
#content_body
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.video_card_downloaded,
|
|
.video_card_ignored,
|
|
.video_card_pending
|
|
{
|
|
position: relative;
|
|
margin: 8px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid #000;
|
|
}
|
|
.video_card_pending
|
|
{
|
|
background-color: #ffffaa;
|
|
}
|
|
.video_card_ignored
|
|
{
|
|
background-color: #ffc886;
|
|
}
|
|
.video_card_downloaded
|
|
{
|
|
background-color: #aaffaa;
|
|
}
|
|
|
|
.action_toolbox
|
|
{
|
|
float: right;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
.video_action_dropdown
|
|
{
|
|
z-index: 1;
|
|
background-color: #fff;
|
|
padding: 4px;
|
|
border: 1px solid #000;
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
display: none;
|
|
flex-direction: column;
|
|
}
|
|
.refresh_button
|
|
{
|
|
width: 10%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
{{header.make_header()}}
|
|
<div id="content_body">
|
|
<button class="refresh_button" onclick="refresh_channel('{{channel['id']}}', false, null_callback)">Refresh new videos</button>
|
|
<button class="refresh_button" onclick="refresh_channel('{{channel['id']}}', true, null_callback)">Refresh everything</button>
|
|
<span><a href="/channel/{{channel['id']}}">All</a></span>
|
|
<span><a href="/channel/{{channel['id']}}/pending">Pending</a></span>
|
|
<span><a href="/channel/{{channel['id']}}/ignored">Ignored</a></span>
|
|
<span><a href="/channel/{{channel['id']}}/downloaded">Downloaded</a></span>
|
|
{% for video in videos %}
|
|
|
|
{% if video['download'] == "downloaded" %}
|
|
<div class="video_card_downloaded">
|
|
{% elif video['download'] == "ignored" %}
|
|
<div class="video_card_ignored">
|
|
{% else %}
|
|
<div class="video_card_pending">
|
|
{% endif %}
|
|
<a href="https://www.youtube.com/watch?v={{video['id']}}">{{video['title']}}</a>
|
|
<div class="action_toolbox">
|
|
<button class="video_action_dropdown_toggle" onclick="toggle_dropdown(this.nextElementSibling)">Actions</button>
|
|
<div class="video_action_dropdown">
|
|
{% if video['download'] == "downloaded" %}
|
|
<button class="video_action_ignore" onclick="mark_video_state('{{video['id']}}', 'pending', null_callback); toggle_dropdown(this.parentElement);">Revert to Pending</button>
|
|
{% elif video['download'] == "ignored" %}
|
|
<button class="video_action_ignore" onclick="mark_video_state('{{video['id']}}', 'pending', null_callback); toggle_dropdown(this.parentElement);">Revert to Pending</button>
|
|
{% else %}
|
|
<button class="video_action_download" onclick="start_download('{{video['id']}}', null_callback); toggle_dropdown(this.parentElement);">Download</button>
|
|
<button class="video_action_ignore" onclick="mark_video_state('{{video['id']}}', 'ignored', null_callback); toggle_dropdown(this.parentElement);">Ignore</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<script type="text/javascript">
|
|
function refresh_channel(channel_id, force, callback)
|
|
{
|
|
var url = "/refresh_channel";
|
|
data = new FormData();
|
|
data.append("channel_id", channel_id);
|
|
data.append("force", force)
|
|
return post(url, data, callback);
|
|
}
|
|
|
|
function mark_video_state(video_id, state, callback)
|
|
{
|
|
var url = "/mark_video_state";
|
|
data = new FormData();
|
|
data.append("video_id", video_id);
|
|
data.append("state", state);
|
|
return post(url, data, callback);
|
|
}
|
|
function start_download(video_id, callback)
|
|
{
|
|
var url = "/start_download";
|
|
data = new FormData();
|
|
data.append("video_id", video_id);
|
|
return post(url, data, callback);
|
|
}
|
|
|
|
|
|
function toggle_dropdown(dropdown)
|
|
{
|
|
if (dropdown.style.display != "inline-flex")
|
|
{
|
|
dropdown.style.display = "inline-flex";
|
|
}
|
|
else
|
|
{
|
|
dropdown.style.display = "none";
|
|
}
|
|
|
|
}
|
|
</script>
|