voussoir/ycdl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reorganize a bunch of functions and other indulgences.

Browse source
This commit is contained in:
voussoir 2020-10-02 19:46:36 -07:00
parent ed3942b943
commit 14ab3f3b06
2 changed files with 169 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontends/ycdl_flask/static/js/api.js
View file

@ -65,7 +65,7 @@ function callback_go_to_channels(response)
} }
else else
{ {
console.log(response); alert(JSON.stringify(response));
} }
} }

272
frontends/ycdl_flask/templates/channel.html
View file

@ -245,8 +245,7 @@ https://stackoverflow.com/a/35153397
>Ignore</button> >Ignore</button>
</div> </div>
<div class="embed_toolbox"> <div class="embed_toolbox">
<button class="show_embed_button" onclick="return toggle_embed_video('{{video.id}}');">Embed</button> <button class="toggle_embed_button" onclick="return toggle_embed_video(event);">Embed</button>
<button class="hide_embed_button hidden" onclick="return toggle_embed_video('{{video.id}}');">Unembed</button>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
@ -284,38 +283,14 @@ https://stackoverflow.com/a/35153397
<script type="text/javascript"> <script type="text/javascript">
{% if channel is not none %} const CHANNEL_ID = "{{channel.id if channel else ""}}";
const CHANNEL_ID = "{{channel.id}}";
{% endif %}
const STATE = "{{state if state else ""}}"; const STATE = "{{state if state else ""}}";
var video_card_first_selected = null;
var video_card_selections = document.getElementsByClassName("video_card_selected");
function delete_channel_form() // FILTER BOX //////////////////////////////////////////////////////////////////////////////////////
{
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));
}
}
var search_filter_box = document.getElementById("search_filter");
var search_filter_wait_for_typing; var search_filter_wait_for_typing;
var search_filter_hook = function(event) var search_filter_hook = function(event)
{ {
clearTimeout(search_filter_wait_for_typing); clearTimeout(search_filter_wait_for_typing);
@ -324,7 +299,6 @@ var search_filter_hook = function(event)
filter_video_cards(search_filter_box.value); filter_video_cards(search_filter_box.value);
}, 200); }, 200);
} }
search_filter_box.addEventListener("keyup", search_filter_hook);
function filter_video_cards(search_term) function filter_video_cards(search_term)
{ {
@ -359,33 +333,13 @@ function filter_video_cards(search_term)
document.getElementById("search_filter_count").innerText = count; document.getElementById("search_filter_count").innerText = count;
} }
function toggle_embed_video(video_id) var search_filter_box = document.getElementById("search_filter");
{ search_filter_box.addEventListener("keyup", search_filter_hook);
let video_card = document.getElementById("video_card_" + video_id);
let show_button = video_card.getElementsByClassName("show_embed_button")[0]; // VIDEO CARD SELECTION ////////////////////////////////////////////////////////////////////////////
let hide_button = video_card.getElementsByClassName("hide_embed_button")[0];
let embed_toolbox = video_card.getElementsByClassName("embed_toolbox")[0]; var video_card_selections = document.getElementsByClassName("video_card_selected");
let embeds = video_card.getElementsByClassName("video_iframe_holder"); var video_card_first_selected = null;
if (embeds.length == 0)
{
let 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>
`
let embed = common.html_to_element(html);
embed_toolbox.appendChild(embed);
show_button.classList.add("hidden");
hide_button.classList.remove("hidden");
}
else
{
embeds[0].parentElement.removeChild(embeds[0]);
show_button.classList.remove("hidden");
hide_button.classList.add("hidden");
}
}
function select_all() function select_all()
{ {
@ -396,6 +350,20 @@ function select_all()
} }
} }
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();
}
}
function deselect_all() function deselect_all()
{ {
video_card_first_selected = null; video_card_first_selected = null;
@ -405,6 +373,58 @@ function deselect_all()
} }
} }
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)
{
let video_cards = Array.from(document.getElementsByClassName("video_card"));
video_cards = video_cards.filter(card => ! card.classList.contains("hidden"))
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");
}
}
function onclick_select(event) function onclick_select(event)
{ {
if (!event.target.classList.contains("video_card")) if (!event.target.classList.contains("video_card"))
@ -417,43 +437,17 @@ function onclick_select(event)
video_card_first_selected = event.target; video_card_first_selected = event.target;
} }
let video_cards = Array.from(document.getElementsByClassName("video_card"));
if (event.shiftKey === false && event.ctrlKey === false) if (event.shiftKey === false && event.ctrlKey === false)
{ {
deselect_all(); select_one(event);
event.target.classList.add("video_card_selected");
video_card_first_selected = event.target;
} }
else if (event.shiftKey === true) else if (event.shiftKey === true)
{ {
let start_index = video_cards.indexOf(video_card_first_selected); select_shift(event);
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)
{
if (video_cards[index].classList.contains("hidden"))
{
continue;
}
video_cards[index].classList.add("video_card_selected");
}
} }
else if (event.ctrlKey === true) else if (event.ctrlKey === true)
{ {
if (event.target.classList.contains("video_card_selected")) select_ctrl(event);
{
event.target.classList.remove("video_card_selected");
}
else
{
video_card_first_selected = event.target;
event.target.classList.add("video_card_selected");
}
} }
document.getSelection().removeAllRanges(); document.getSelection().removeAllRanges();
@ -461,10 +455,12 @@ function onclick_select(event)
return false; return false;
} }
// VIDEO CARD BUTTONS //////////////////////////////////////////////////////////////////////////////
function action_button_passthrough(event, action_function, action_argument) function action_button_passthrough(event, action_function, action_argument)
{ {
let elements; let elements;
let this_card = event.target.closest(".video_card"); const this_card = event.target.closest(".video_card");
if (this_card.classList.contains("video_card_selected")) if (this_card.classList.contains("video_card_selected"))
{ {
// The clicked card is indeed part of the current selected group. // The clicked card is indeed part of the current selected group.
@ -495,18 +491,18 @@ function action_button_passthrough(event, action_function, action_argument)
function give_action_buttons(video_card_div) function give_action_buttons(video_card_div)
{ {
let toolbox = video_card_div.getElementsByClassName("action_toolbox")[0] const toolbox = video_card_div.getElementsByClassName("action_toolbox")[0]
let buttons = Array.from(toolbox.getElementsByTagName("button")); const buttons = Array.from(toolbox.getElementsByTagName("button"));
let is_pending = video_card_div.classList.contains("video_card_pending"); const is_pending = video_card_div.classList.contains("video_card_pending");
buttons.forEach(function(button) for (const button of buttons)
{ {
if (is_pending) if (is_pending)
{ button.classList.remove("hidden"); } { button.classList.remove("hidden"); }
else else
{ button.classList.add("hidden"); } { button.classList.add("hidden"); }
}); }
let button_pending = video_card_div.getElementsByClassName("video_action_pending")[0]; const button_pending = video_card_div.getElementsByClassName("video_action_pending")[0];
if (is_pending) if (is_pending)
{ button_pending.classList.add("hidden"); } { button_pending.classList.add("hidden"); }
else else
@ -515,12 +511,12 @@ function give_action_buttons(video_card_div)
function receive_action_response(response) function receive_action_response(response)
{ {
let video_ids = response.data.video_ids; const video_ids = response.data.video_ids;
let state = response.data.state; const state = response.data.state;
let state_class = "video_card_" + state; const state_class = "video_card_" + state;
for (const video_id of video_ids) for (const video_id of video_ids)
{ {
let card = document.getElementById("video_card_" + video_id); const card = document.getElementById("video_card_" + video_id);
{% for statename in all_states %} {% for statename in all_states %}
card.classList.remove("video_card_{{statename}}"); card.classList.remove("video_card_{{statename}}");
{% endfor %} {% endfor %}
@ -529,24 +525,75 @@ function receive_action_response(response)
} }
} }
var set_automark_spinner = document.getElementById("set_automark_spinner"); function toggle_embed_video(event)
set_automark_spinner = new spinner.Spinner(set_automark_spinner); {
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));
}
}
function set_automark_form(event) function set_automark_form(event)
{ {
set_automark_spinner.show(); set_automark_spinner.show();
api.channels.set_automark(CHANNEL_ID, event.target.value, set_automark_callback); api.channels.set_automark(CHANNEL_ID, event.target.value, set_automark_callback);
} }
function set_automark_callback(response) function set_automark_callback(response)
{ {
if (response.meta.status == 200) if (response.meta.status == 200)
{ {
set_automark_spinner.hide(); set_automark_spinner.hide();
} }
else
{
alert(JSON.stringify(response));
}
} }
set_queuefile_extension_input = document.getElementById("set_queuefile_extension_input");
set_queuefile_extension_button = document.getElementById("set_queuefile_extension_button");
common.bind_box_to_button(set_queuefile_extension_input, set_queuefile_extension_button);
function set_queuefile_extension_form(event) function set_queuefile_extension_form(event)
{ {
const extension = set_queuefile_extension_input.value.trim(); const extension = set_queuefile_extension_input.value.trim();
@ -559,11 +606,28 @@ function set_queuefile_extension_callback(response)
{ {
window[set_queuefile_extension_button.dataset.spinnerCloser](); window[set_queuefile_extension_button.dataset.spinnerCloser]();
} }
else
{
alert(JSON.stringify(response));
} }
}
if (CHANNEL_ID)
{
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);
var set_automark_spinner = document.getElementById("set_automark_spinner");
set_automark_spinner = new spinner.Spinner(set_automark_spinner);
}
////////////////////////////////////////////////////////////////////////////////////////////////////
function on_pageload() function on_pageload()
{ {
hotkeys.register_hotkey("ctrl a", select_all, "Select all videos."); hotkeys.register_hotkey("ctrl a", select_all_hotkey, "Select all videos.");
hotkeys.register_hotkey("ctrl d", deselect_all, "Deselect all videos."); hotkeys.register_hotkey("ctrl d", deselect_all_hotkey, "Deselect all videos.");
} }
document.addEventListener("DOMContentLoaded", on_pageload); document.addEventListener("DOMContentLoaded", on_pageload);
</script> </script>