2016-11-29 04:16:16 +00:00
<!DOCTYPE html5>
< html >
< head >
{% import "header.html" as header %}
2020-04-04 22:13:01 +00:00
< title > {{channel.name}}< / title >
2016-11-29 04:16:16 +00:00
< meta charset = "UTF-8" >
2020-01-07 05:55:01 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2022-03-15 20:53:40 +00:00
< link rel = "stylesheet" href = "/static/css/common.css" / >
< link rel = "stylesheet" href = "/static/css/ycdl.css" / >
2020-05-22 02:43:45 +00:00
< script src = "/static/js/common.js" > < / script >
2020-06-17 21:13:33 +00:00
< script src = "/static/js/api.js" > < / script >
2020-10-02 20:17:08 +00:00
< script src = "/static/js/hotkeys.js" > < / script >
2022-03-15 20:52:29 +00:00
< script src = "/static/js/spinners.js" > < / script >
2016-11-29 04:16:16 +00:00
< style >
2020-09-03 18:54:51 +00:00
.tabbed_container .tab
2016-11-29 04:16:16 +00:00
{
2020-09-05 16:31:37 +00:00
display: grid;
grid-auto-flow: row;
grid-gap: 8px;
2020-09-03 18:54:51 +00:00
padding: 8px;
2020-08-11 01:29:50 +00:00
}
#video_cards
{
2021-11-08 10:01:14 +00:00
display: flex;
flex-direction: column;
row-gap: 8px;
2020-08-11 01:29:50 +00:00
}
2017-05-21 20:58:59 +00:00
.video_card
2016-11-29 04:16:16 +00:00
{
position: relative;
2020-04-04 22:13:01 +00:00
display: grid;
grid-template:
"thumbnail details toolbox" auto
"embed embed embed" auto
/auto 1fr auto;
grid-gap: 4px;
padding: 8px;
2016-11-29 04:16:16 +00:00
border-radius: 4px;
border: 1px solid #000;
}
2017-05-21 20:58:59 +00:00
.video_card:hover
{
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
2016-11-29 04:16:16 +00:00
.video_card_pending
{
background-color: #ffffaa;
}
.video_card_ignored
{
background-color: #ffc886;
}
2017-05-21 20:58:59 +00:00
.video_card_selected
{
background-color: #13f4ff !important;
}
2016-11-29 04:16:16 +00:00
.video_card_downloaded
{
background-color: #aaffaa;
}
2020-04-04 22:13:01 +00:00
.video_thumbnail
{
grid-area: thumbnail;
justify-self: center;
}
2020-09-03 18:54:51 +00:00
.video_title
{
word-break: break-word;
}
2020-04-04 22:13:01 +00:00
.video_details
{
grid-area: details;
align-self: center;
/*
margin-right prevents the empty space of the < a > tag from swallowing
click events meant for the video card.
*/
margin-right: auto;
}
.embed_toolbox
{
grid-area: embed;
/*
disabling pointer events on the toolbox prevents it from swallowing click
events meant for the video card. Then we must re-enable them for child
elements so the embed button is still clickable.
This one uses pointer-events instead of margin because margin makes the
whole embed too small.
*/
pointer-events: none;
}
.embed_toolbox *
{
pointer-events: auto;
}
2016-11-29 04:16:16 +00:00
.action_toolbox
{
2020-04-04 22:13:01 +00:00
grid-area: toolbox;
justify-self: right;
2016-11-29 04:16:16 +00:00
display: inline-flex;
flex-direction: row;
position: relative;
2020-04-04 22:13:01 +00:00
margin-top: auto;
margin-bottom: auto;
2016-11-29 04:16:16 +00:00
}
2020-04-04 22:13:01 +00:00
2016-11-29 04:16:16 +00:00
.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;
}
2020-04-03 15:43:47 +00:00
/*
Thank you SimonSimCity
https://stackoverflow.com/a/35153397
*/
.video_iframe_holder
{
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video_iframe_holder iframe
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
2020-04-04 22:13:01 +00:00
@media screen and (max-width: 600px)
{
.video_card
{
grid-template:
2020-09-03 18:54:51 +00:00
"thumbnail details"
"toolbox toolbox"
"embed embed"
/auto 1fr;
2020-04-04 22:13:01 +00:00
}
}
2016-11-29 04:16:16 +00:00
< / style >
< / head >
< body >
{{header.make_header()}}
< div id = "content_body" >
2017-05-21 20:58:59 +00:00
{% if channel is not none %}
2021-10-26 18:53:49 +00:00
< h1 id = "channel_name" > {{channel.name}}< / h1 >
2020-09-03 18:54:51 +00:00
{% endif %}
2020-09-05 16:31:13 +00:00
{% if channel is not none %}
2020-09-03 18:54:51 +00:00
< div class = "tabbed_container" >
< div class = "tab" data-tab-title = "Videos" >
2020-09-04 21:48:50 +00:00
< div > < button class = "refresh_button button_with_spinner" onclick = "return refresh_channel_form(false);" > Refresh new videos< / button > < / div >
< div > < button class = "refresh_button button_with_spinner" onclick = "return refresh_channel_form(true);" > Refresh everything< / button > < / div >
2020-06-11 06:09:17 +00:00
2020-08-16 05:28:27 +00:00
{% endif %}
2020-04-04 22:13:01 +00:00
2020-09-03 18:54:51 +00:00
< div > View
2020-06-11 06:09:17 +00:00
{% if channel is not none %}
2020-09-06 00:49:04 +00:00
< a class = "merge_params {{" bold " if not state else " " } } " href = "/channel/{{channel.id}}" > All< / a >
2016-11-29 04:16:16 +00:00
{% else %}
2020-09-06 00:49:04 +00:00
< a class = "merge_params {{" bold " if not state else " " } } " href = "/videos" > All< / a >
2016-11-29 04:16:16 +00:00
{% endif %}
2020-09-03 18:54:51 +00:00
2020-03-11 21:30:12 +00:00
{% for statename in all_states %}
{% if channel is not none %}
2020-09-06 00:49:04 +00:00
< a class = "merge_params {{" bold " if state = = statename else " " } } " href = "/channel/{{channel.id}}/{{statename}}" > {{statename.capitalize()}}< / a >
2020-03-11 21:30:12 +00:00
{% else %}
2020-09-06 00:49:04 +00:00
< a class = "merge_params {{" bold " if state = = statename else " " } } " href = "/videos/{{statename}}" > {{statename.capitalize()}}< / a >
2020-03-11 21:30:12 +00:00
{% endif %}
{% endfor %}
2020-09-03 18:54:51 +00:00
< / div >
2020-05-22 00:28:34 +00:00
2020-09-03 18:54:51 +00:00
< div > Sort by
2020-09-06 00:49:04 +00:00
< a class = "merge_params {{" bold " if orderby = = " published " or not orderby else " " } } " href = "?orderby=published" > Date< / a >
< a class = "merge_params {{" bold " if orderby = = " duration " else " " } } " href = "?orderby=duration" > Duration< / a >
< a class = "merge_params {{" bold " if orderby = = " views " else " " } } " href = "?orderby=views" > Views< / a >
< a class = "merge_params {{" bold " if orderby = = " random " else " " } } " href = "?orderby=random" > Random< / a >
2020-08-11 01:29:50 +00:00
< / div >
2017-05-21 20:58:59 +00:00
< div id = "video_cards" >
2020-08-28 23:21:42 +00:00
< center > < input disabled class = "enable_on_pageload" type = "text" id = "search_filter" / > < / center >
2020-11-27 02:24:15 +00:00
< center > < span id = "search_filter_count" > {{videos|length}}< / span > {{state or ""}} items< / center >
2020-08-11 01:29:50 +00:00
2017-05-21 20:58:59 +00:00
{% for video in videos %}
2020-04-04 22:13:01 +00:00
< div id = "video_card_{{video.id}}"
data-ytid="{{video.id}}"
2020-09-04 17:37:49 +00:00
onclick="return onclick_select(event);"
2020-09-04 22:55:48 +00:00
class="video_card video_card_{{video.state}}"
2017-05-21 20:58:59 +00:00
>
2022-04-30 14:19:59 +00:00
< img class = "video_thumbnail" loading = "lazy" src = "https://i3.ytimg.com/vi/{{video.id}}/default.jpg" height = "100px" >
2020-04-04 22:13:01 +00:00
< div class = "video_details" >
2021-03-25 03:29:15 +00:00
< a class = "video_title" href = "https://www.youtube.com/watch?v={{video.id}}" > {{video.published_string}} - {{video.title}}< / a >
2020-04-04 22:13:01 +00:00
< span > ({{video.duration | seconds_to_hms}})< / span >
< span > ({{video.views}})< / span >
2017-05-21 20:58:59 +00:00
{% if channel is none %}
2020-11-21 19:25:46 +00:00
< a href = "/channel/{{video.author_id}}" > ({{video.author.name if video.author else video.author_id}})< / a > < a href = "/channel/{{video.author_id}}/pending" > (p)< / a >
2016-11-29 04:16:16 +00:00
{% endif %}
2020-04-04 22:13:01 +00:00
< / div >
2017-05-21 20:58:59 +00:00
< div class = "action_toolbox" >
< button
2020-09-04 22:55:48 +00:00
{% if video.state == "pending" %}
2017-05-21 20:58:59 +00:00
class="video_action_pending hidden"
{% else %}
class="video_action_pending"
{% endif %}
2020-09-04 17:37:49 +00:00
onclick="return action_button_passthrough(event, api.videos.mark_state, 'pending');"
2017-05-21 20:58:59 +00:00
>Revert to Pending< / button >
2021-04-01 00:24:57 +00:00
{% if video.live_broadcast is none %}
2017-05-21 20:58:59 +00:00
< button
2020-09-04 22:55:48 +00:00
{% if video.state == "pending" %}
2017-05-21 20:58:59 +00:00
class="video_action_download"
{% else %}
class="video_action_download hidden"
{% endif %}
2020-09-04 17:37:49 +00:00
onclick="return action_button_passthrough(event, api.videos.start_download);"
2017-05-21 20:58:59 +00:00
>Download< / button >
2021-04-01 00:24:57 +00:00
{% else %}
< button disabled > Video is {{video.live_broadcast}}< / button >
{% endif %}
2017-05-21 20:58:59 +00:00
< button
2020-09-04 22:55:48 +00:00
{% if video.state == "pending" %}
2017-05-21 20:58:59 +00:00
class="video_action_ignore"
{% else %}
class="video_action_ignore hidden"
{% endif %}
2020-09-04 17:37:49 +00:00
onclick="return action_button_passthrough(event, api.videos.mark_state, 'ignored');"
2017-05-21 20:58:59 +00:00
>Ignore< / button >
< / div >
2020-04-04 22:13:01 +00:00
< div class = "embed_toolbox" >
2020-10-03 02:46:36 +00:00
< button class = "toggle_embed_button" onclick = "return toggle_embed_video(event);" > Embed< / button >
2020-04-04 22:13:01 +00:00
< / div >
2016-11-29 04:16:16 +00:00
< / div >
2017-05-21 20:58:59 +00:00
{% endfor %}
2020-09-03 18:54:51 +00:00
< / div > <!-- video_cards -->
{% if channel is not none %}
2020-09-05 16:31:13 +00:00
< / div > <!-- tab - videos -->
2020-09-03 18:54:51 +00:00
< div class = "tab" data-tab-title = "Settings" >
2021-10-16 04:00:04 +00:00
< div > Channel ID: < code > {{channel.id}}< / code > < / div >
2021-10-26 18:53:49 +00:00
< div >
2022-03-15 20:53:40 +00:00
< input type = "text" id = "set_name_input" placeholder = "Name" size = 32 value = "{{channel.name or ''}}" / >
< button id = "set_name_button" class = "button_with_spinner" onclick = "return set_name_form(event);" > Set name< / button >
2021-10-26 18:53:49 +00:00
< / div >
2021-09-05 08:26:34 +00:00
< div >
2022-03-15 20:53:40 +00:00
{% set checked = 'checked' if channel.autorefresh else '' %}
< label > < input type = "checkbox" id = "set_autorefresh_checkbox" { { checked } } onchange = "return set_autorefresh_form(event);" / > Automatically refresh this channel regularly.< / label >
2021-09-05 08:26:34 +00:00
< span id = "set_autorefresh_spinner" class = "hidden" > Working...< / span >
< / div >
2020-09-03 18:54:51 +00:00
< div >
New videos are:
2020-09-16 17:22:33 +00:00
< select onchange = "return set_automark_form(event);" >
2020-09-03 18:54:51 +00:00
< option value = "pending" { { " selected " if channel . automark = = " pending " else " " } } > pending< / option >
< option value = "downloaded" { { " selected " if channel . automark = = " downloaded " else " " } } > downloaded< / option >
< option value = "ignored" { { " selected " if channel . automark = = " ignored " else " " } } > ignored< / option >
< / select >
< span id = "set_automark_spinner" class = "hidden" > Working...< / span >
2016-11-29 04:16:16 +00:00
< / div >
2017-05-21 20:58:59 +00:00
2020-09-16 17:23:38 +00:00
< div >
< input type = "text" id = "set_queuefile_extension_input" placeholder = "Queuefile extension" value = "{{channel.queuefile_extension or ''}}" / >
2022-03-15 20:53:40 +00:00
< button id = "set_queuefile_extension_button" class = "button_with_spinner" onclick = "return set_queuefile_extension_form(event);" > Set extension< / button >
2020-09-16 17:23:38 +00:00
< / div >
2021-09-02 06:37:43 +00:00
< div >
2021-09-16 01:53:23 +00:00
< input type = "text" id = "set_download_directory_input" placeholder = "Queuefile directory" value = "{{channel.download_directory.absolute_path if channel.download_directory else ''}}" / >
2022-03-15 20:53:40 +00:00
< button id = "set_download_directory_button" class = "button_with_spinner" onclick = "return set_download_directory_form(event);" > Set directory< / button >
{% if request.is_localhost %}
< button id = "show_directory_button" onclick = "return show_download_directory_form(event);" > Open directory< / button >
{% endif %}
2021-09-02 06:37:43 +00:00
< / div >
2021-09-07 21:05:36 +00:00
< div > < a href = "https://www.youtube.com/channel/{{channel.id}}/videos" > Channel page< / a > < / div >
2021-01-30 12:28:21 +00:00
< div > < a href = "https://www.youtube.com/feeds/videos.xml?channel_id={{channel.id}}" > Channel RSS< / a > < / div >
2020-11-16 01:57:23 +00:00
2020-09-03 18:54:51 +00:00
< button class = "red_button button_with_confirm"
data-prompt="Delete channel and all videos?"
2022-03-15 20:53:40 +00:00
data-onclick="return delete_channel_form(event);"
2020-09-03 18:54:51 +00:00
>Delete Channel< / button >
2022-03-15 20:53:40 +00:00
2020-09-03 18:54:51 +00:00
< / div > <!-- tab - settings -->
< / div > <!-- tabbed_container -->
2020-09-05 16:31:13 +00:00
{% endif %}
2016-11-29 04:16:16 +00:00
< / div >
< / body >
< script type = "text/javascript" >
2020-10-03 02:46:36 +00:00
const CHANNEL_ID = "{{channel.id if channel else ""}}";
2020-06-03 19:58:33 +00:00
2020-09-16 17:22:33 +00:00
const STATE = "{{state if state else ""}}";
2019-01-24 05:22:09 +00:00
2020-10-03 02:46:36 +00:00
// FILTER BOX //////////////////////////////////////////////////////////////////////////////////////
2020-08-11 01:30:56 +00:00
2020-08-28 00:11:52 +00:00
var search_filter_wait_for_typing;
2020-10-03 02:46:36 +00:00
2019-01-24 05:22:09 +00:00
var search_filter_hook = function(event)
{
2020-08-28 00:11:52 +00:00
clearTimeout(search_filter_wait_for_typing);
search_filter_wait_for_typing = setTimeout(function()
{
filter_video_cards(search_filter_box.value);
}, 200);
2019-01-24 05:22:09 +00:00
}
function filter_video_cards(search_term)
{
2019-01-25 23:54:31 +00:00
/*
Apply the current download filter (pending, ignored, downloaded) by removing
mismatched cards from the dom.
Apply the search filter textbox by hiding the mismatched cards.
*/
2020-09-03 22:44:58 +00:00
let count = 0;
2022-01-14 01:24:35 +00:00
const video_card_list = document.getElementById("video_cards");
video_card_list.classList.add("hidden");
const search_term_lower = search_term.toLocaleLowerCase();
const state_class = "video_card_" + STATE;
2022-01-17 23:50:33 +00:00
const video_cards = Array.from(video_card_list.getElementsByClassName("video_card"));
2022-01-14 01:24:35 +00:00
video_cards.forEach(function(video_card)
2019-01-24 05:22:09 +00:00
{
2020-09-04 22:55:48 +00:00
if (STATE & & !video_card.classList.contains(state_class))
2019-01-25 23:54:31 +00:00
{
2022-01-17 23:50:33 +00:00
video_card_list.removeChild(video_card);
2022-01-14 01:24:35 +00:00
return;
2019-01-25 23:54:31 +00:00
}
2022-01-14 01:24:35 +00:00
const title_lower = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase();
const matches = (
title_lower.indexOf(search_term_lower) > -1 ||
search_term === video_card.dataset.ytid
);
if (matches)
2019-01-24 05:22:09 +00:00
{
2022-01-14 01:24:35 +00:00
video_card.classList.remove("hidden");
count += 1;
2019-01-24 05:22:09 +00:00
}
else
{
2022-01-14 01:24:35 +00:00
video_card.classList.add("hidden");
2019-01-24 05:22:09 +00:00
}
2020-08-27 23:53:51 +00:00
});
2022-01-14 01:24:35 +00:00
video_card_list.classList.remove("hidden");
2019-01-24 05:22:09 +00:00
document.getElementById("search_filter_count").innerText = count;
}
2017-05-21 20:58:59 +00:00
2020-10-03 02:46:36 +00:00
var search_filter_box = document.getElementById("search_filter");
search_filter_box.addEventListener("keyup", search_filter_hook);
// VIDEO CARD SELECTION ////////////////////////////////////////////////////////////////////////////
var video_card_selections = document.getElementsByClassName("video_card_selected");
var video_card_first_selected = null;
2018-12-18 03:17:53 +00:00
2020-09-29 17:55:04 +00:00
function select_all()
{
video_card_first_selected = null;
2022-03-15 20:53:40 +00:00
for (const video_card of document.querySelectorAll(".video_card:not(.hidden)"))
2020-09-29 17:55:04 +00:00
{
video_card.classList.add("video_card_selected");
}
}
2020-10-03 02:46:36 +00:00
function select_all_hotkey()
{
if (! CHANNEL_ID)
{
select_all();
return;
}
const tabbed_container = document.getElementsByClassName("tabbed_container")[0];
if (tabbed_container.dataset.activeTabId === "Videos")
{
select_all();
}
}
2017-05-21 20:58:59 +00:00
function deselect_all()
2016-11-29 04:16:16 +00:00
{
2020-09-29 17:54:31 +00:00
video_card_first_selected = null;
for (const video_card of Array.from(video_card_selections))
2016-11-29 04:16:16 +00:00
{
2020-10-12 01:43:47 +00:00
if (video_card.classList.contains("hidden"))
{
continue;
}
2020-09-29 17:54:31 +00:00
video_card.classList.remove("video_card_selected");
2016-11-29 04:16:16 +00:00
}
2017-05-21 20:58:59 +00:00
}
2020-10-03 02:46:36 +00:00
function deselect_all_hotkey()
{
if (! CHANNEL_ID)
{
deselect_all();
return;
}
const tabbed_container = document.getElementsByClassName("tabbed_container")[0];
if (tabbed_container.dataset.activeTabId === "Videos")
{
deselect_all();
}
}
function select_one(event)
{
deselect_all();
event.target.classList.add("video_card_selected");
video_card_first_selected = event.target;
}
function select_shift(event)
{
2022-03-15 20:53:40 +00:00
const video_cards = Array.from(document.querySelectorAll(".video_card:not(.hidden)"));
2020-10-03 02:46:36 +00:00
let start_index = video_cards.indexOf(video_card_first_selected);
let end_index = video_cards.indexOf(event.target);
if (end_index < start_index )
{
[start_index, end_index] = [end_index, start_index];
}
for (let index = start_index; index < = end_index; index += 1)
{
video_cards[index].classList.add("video_card_selected");
}
}
function select_ctrl(event)
{
if (event.target.classList.contains("video_card_selected"))
{
event.target.classList.remove("video_card_selected");
}
else
{
video_card_first_selected = event.target;
event.target.classList.add("video_card_selected");
}
}
2017-05-21 20:58:59 +00:00
function onclick_select(event)
{
if (!event.target.classList.contains("video_card"))
{
return;
}
2020-09-29 17:54:31 +00:00
2017-05-21 20:58:59 +00:00
if (video_card_first_selected === null)
{
video_card_first_selected = event.target;
}
if (event.shiftKey === false & & event.ctrlKey === false)
{
2020-10-03 02:46:36 +00:00
select_one(event);
2017-05-21 20:58:59 +00:00
}
else if (event.shiftKey === true)
2016-11-29 04:16:16 +00:00
{
2020-10-03 02:46:36 +00:00
select_shift(event);
2017-05-21 20:58:59 +00:00
}
else if (event.ctrlKey === true)
{
2020-10-03 02:46:36 +00:00
select_ctrl(event);
2017-05-21 20:58:59 +00:00
}
2020-03-11 20:01:55 +00:00
document.getSelection().removeAllRanges();
2017-05-21 20:58:59 +00:00
return false;
}
2020-10-03 02:46:36 +00:00
// VIDEO CARD BUTTONS //////////////////////////////////////////////////////////////////////////////
2017-05-21 20:58:59 +00:00
function action_button_passthrough(event, action_function, action_argument)
{
2020-09-03 22:44:58 +00:00
let elements;
2020-10-03 02:46:36 +00:00
const this_card = event.target.closest(".video_card");
2020-09-29 17:54:31 +00:00
if (this_card.classList.contains("video_card_selected"))
2017-05-21 20:58:59 +00:00
{
2020-09-29 17:54:31 +00:00
// The clicked card is indeed part of the current selected group.
2020-09-29 17:54:58 +00:00
elements = Array.from(video_card_selections);
2016-11-29 04:16:16 +00:00
}
else
{
2020-09-29 17:54:31 +00:00
// The clicked card is actually not one of the selected, so we'll just
// action it by itself.
2017-05-21 20:58:59 +00:00
elements = [this_card];
}
2020-09-29 17:54:58 +00:00
const video_ids = elements.map(element => element.dataset["ytid"]).join(",");
2019-01-24 05:22:09 +00:00
if (action_argument === undefined)
{
action_function(video_ids, receive_action_response);
}
else
{
action_function(video_ids, action_argument, receive_action_response);
2016-11-29 04:16:16 +00:00
}
2020-03-11 21:30:56 +00:00
if (! event.shiftKey)
{
deselect_all();
}
2016-11-29 04:16:16 +00:00
}
2017-05-21 20:58:59 +00:00
function give_action_buttons(video_card_div)
2016-11-29 04:16:16 +00:00
{
2020-10-03 02:46:36 +00:00
const toolbox = video_card_div.getElementsByClassName("action_toolbox")[0]
const buttons = Array.from(toolbox.getElementsByTagName("button"));
const is_pending = video_card_div.classList.contains("video_card_pending");
for (const button of buttons)
2017-05-21 20:58:59 +00:00
{
2020-03-11 21:30:12 +00:00
if (is_pending)
{ button.classList.remove("hidden"); }
else
{ button.classList.add("hidden"); }
2020-10-03 02:46:36 +00:00
}
2020-03-11 21:30:12 +00:00
2020-10-03 02:46:36 +00:00
const button_pending = video_card_div.getElementsByClassName("video_action_pending")[0];
2020-03-11 21:30:12 +00:00
if (is_pending)
{ button_pending.classList.add("hidden"); }
2017-05-21 20:58:59 +00:00
else
2020-03-11 21:30:12 +00:00
{ button_pending.classList.remove("hidden"); }
2016-11-29 04:16:16 +00:00
}
function receive_action_response(response)
{
2020-10-29 23:14:58 +00:00
if (response.meta.status !== 200)
{
alert(JSON.stringify(response));
return;
}
2020-10-03 02:46:36 +00:00
const video_ids = response.data.video_ids;
const state = response.data.state;
const state_class = "video_card_" + state;
2020-09-03 22:44:58 +00:00
for (const video_id of video_ids)
2016-11-29 04:16:16 +00:00
{
2020-10-03 02:46:36 +00:00
const card = document.getElementById("video_card_" + video_id);
2020-03-11 21:30:12 +00:00
{% for statename in all_states %}
card.classList.remove("video_card_{{statename}}");
{% endfor %}
2020-09-03 22:44:58 +00:00
card.classList.add(state_class);
2019-01-24 05:22:09 +00:00
give_action_buttons(card);
2016-11-29 04:16:16 +00:00
}
}
2020-10-03 02:46:36 +00:00
function toggle_embed_video(event)
{
const video_card = event.target.closest(".video_card");
const video_id = video_card.dataset.ytid;
const toggle_button = video_card.getElementsByClassName("toggle_embed_button")[0];
const embed_toolbox = video_card.getElementsByClassName("embed_toolbox")[0];
const embeds = video_card.getElementsByClassName("video_iframe_holder");
if (embeds.length == 0)
{
const html = `
< div class = "video_iframe_holder" >
< iframe width = "711" height = "400" frameborder = "0" allow = "encrypted-media" allowfullscreen
src="https://www.youtube.com/embed/${video_id}">< / iframe >
< / div >
`
const embed = common.html_to_element(html);
embed_toolbox.appendChild(embed);
toggle_button.innerText = "Unembed";
}
else
{
embeds[0].parentElement.removeChild(embeds[0]);
toggle_button.innerText = "Embed";
}
}
// CHANNEL ACTIONS /////////////////////////////////////////////////////////////////////////////////
function delete_channel_form()
{
api.channels.delete_channel(CHANNEL_ID, api.channels.callback_go_to_channels);
}
function refresh_channel_form(force)
{
console.log(`Refreshing channel ${CHANNEL_ID}, force=${force}.`);
api.channels.refresh_channel(CHANNEL_ID, force, refresh_channel_callback)
}
function refresh_channel_callback(response)
{
if (response.meta.status == 200)
{
common.refresh();
}
else
{
alert(JSON.stringify(response));
2021-10-31 19:51:50 +00:00
for (let button of document.getElementsByClassName("refresh_button"))
{
window[button.dataset.spinnerCloser]();
}
2020-10-03 02:46:36 +00:00
}
}
2020-09-16 17:22:33 +00:00
function set_automark_form(event)
2020-05-22 00:28:34 +00:00
{
2020-06-27 03:59:55 +00:00
set_automark_spinner.show();
api.channels.set_automark(CHANNEL_ID, event.target.value, set_automark_callback);
}
2020-10-03 02:46:36 +00:00
2020-06-27 03:59:55 +00:00
function set_automark_callback(response)
{
2021-09-02 06:32:56 +00:00
if (response.meta.status != 200)
2020-10-03 02:46:36 +00:00
{
alert(JSON.stringify(response));
}
2021-09-02 06:32:56 +00:00
set_automark_spinner.hide();
2020-05-22 00:28:34 +00:00
}
2020-09-16 17:23:38 +00:00
2021-09-05 08:26:34 +00:00
function set_autorefresh_form(event)
{
set_autorefresh_spinner.show();
api.channels.set_autorefresh(CHANNEL_ID, event.target.checked, set_autorefresh_callback);
}
function set_autorefresh_callback(response)
{
2021-09-16 01:55:14 +00:00
set_autorefresh_spinner.hide();
2021-09-05 08:26:34 +00:00
if (response.meta.status != 200)
{
alert(JSON.stringify(response));
2021-09-16 01:55:14 +00:00
return;
2021-09-05 08:26:34 +00:00
}
}
2021-09-02 06:37:43 +00:00
function set_download_directory_form(event)
{
const download_directory = set_download_directory_input.value.trim();
api.channels.set_download_directory(CHANNEL_ID, download_directory, set_download_directory_callback);
}
function set_download_directory_callback(response)
{
2021-09-16 01:55:14 +00:00
window[set_download_directory_button.dataset.spinnerCloser]();
if (response.meta.status != 200 || ! response.meta.json_ok)
2021-09-02 06:37:43 +00:00
{
alert(JSON.stringify(response));
2021-09-16 01:55:14 +00:00
return;
}
const download_directory = response.data.download_directory;
if (download_directory === null)
{
set_download_directory_input.value = "";
}
else
{
set_download_directory_input.value = download_directory;
2021-09-02 06:37:43 +00:00
}
}
2021-10-26 18:53:49 +00:00
function set_name_form(event)
{
const name = set_name_input.value.trim();
api.channels.set_name(CHANNEL_ID, name, set_name_callback);
}
function set_name_callback(response)
{
window[set_name_button.dataset.spinnerCloser]();
if (response.meta.status != 200 || ! response.meta.json_ok)
{
alert(JSON.stringify(response));
return;
}
const name = response.data.name;
const h1 = document.getElementById("channel_name");
if (name === null)
{
set_name_input.value = "";
2021-10-26 19:03:40 +00:00
h1.innerText = response.data.id;
document.title = response.data.id;
2021-10-26 18:53:49 +00:00
}
else
{
set_name_input.value = name;
h1.innerText = name;
document.title = name;
}
}
2020-09-16 17:23:38 +00:00
function set_queuefile_extension_form(event)
{
const extension = set_queuefile_extension_input.value.trim();
api.channels.set_queuefile_extension(CHANNEL_ID, extension, set_queuefile_extension_callback);
}
function set_queuefile_extension_callback(response)
{
2021-09-16 01:55:14 +00:00
window[set_queuefile_extension_button.dataset.spinnerCloser]();
if (response.meta.status != 200 || ! response.meta.json_ok)
2020-10-03 02:46:36 +00:00
{
alert(JSON.stringify(response));
2021-09-16 01:55:14 +00:00
return;
2020-10-03 02:46:36 +00:00
}
2021-09-16 01:55:14 +00:00
const extension = response.data.queuefile_extension;
if (extension === null)
{
set_queuefile_extension_input.value = "";
}
else
{
set_queuefile_extension_input.value = extension;
}
2022-03-15 20:53:40 +00:00
}
2021-09-16 01:55:14 +00:00
2022-03-15 20:53:40 +00:00
function show_download_directory_form()
{
function callback(response)
{
if (response.meta.status !== 200)
{
alert(JSON.stringify(response));
return;
}
}
api.channels.show_download_directory(CHANNEL_ID, callback);
2020-10-03 02:46:36 +00:00
}
if (CHANNEL_ID)
{
2021-10-26 18:53:49 +00:00
var set_name_input = document.getElementById("set_name_input");
var set_name_button = document.getElementById("set_name_button");
common.bind_box_to_button(set_name_input, set_name_button);
2020-10-03 02:46:36 +00:00
var set_queuefile_extension_input = document.getElementById("set_queuefile_extension_input");
var set_queuefile_extension_button = document.getElementById("set_queuefile_extension_button");
common.bind_box_to_button(set_queuefile_extension_input, set_queuefile_extension_button);
2021-09-16 01:53:36 +00:00
var set_download_directory_input = document.getElementById("set_download_directory_input");
var set_download_directory_button = document.getElementById("set_download_directory_button");
common.bind_box_to_button(set_download_directory_input, set_download_directory_button);
2020-10-03 02:46:36 +00:00
var set_automark_spinner = document.getElementById("set_automark_spinner");
2022-03-15 20:52:29 +00:00
set_automark_spinner = new spinners.Spinner(set_automark_spinner);
2021-09-05 08:26:34 +00:00
var set_autorefresh_spinner = document.getElementById("set_autorefresh_spinner");
2022-03-15 20:52:29 +00:00
set_autorefresh_spinner = new spinners.Spinner(set_autorefresh_spinner);
2020-09-16 17:23:38 +00:00
}
2020-10-03 02:46:36 +00:00
////////////////////////////////////////////////////////////////////////////////////////////////////
2020-10-02 20:17:08 +00:00
function on_pageload()
{
2020-10-03 02:46:36 +00:00
hotkeys.register_hotkey("ctrl a", select_all_hotkey, "Select all videos.");
hotkeys.register_hotkey("ctrl d", deselect_all_hotkey, "Deselect all videos.");
2020-10-02 20:17:08 +00:00
}
document.addEventListener("DOMContentLoaded", on_pageload);
2016-11-29 04:16:16 +00:00
< / script >
< / html >
