<!DOCTYPE html5> <html> <head> {% import "header.html" as header %} <title>{{channel.name}}</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="/static/css/common.css"> <link rel="stylesheet" href="/static/css/ycdl.css"> <script src="/static/js/common.js"></script> <script src="/static/js/api.js"></script> <script src="/static/js/spinner.js"></script> <style> .tabbed_container .tab { display: grid; grid-auto-flow: row; grid-gap: 8px; padding: 8px; } #video_cards { } .video_card { position: relative; display: grid; grid-template: "thumbnail details toolbox" auto "embed embed embed" auto /auto 1fr auto; grid-gap: 4px; margin: 8px 0; padding: 8px; border-radius: 4px; border: 1px solid #000; } .video_card:hover { box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25); } .video_card_pending { background-color: #ffffaa; } .video_card_ignored { background-color: #ffc886; } .video_card_selected { background-color: #13f4ff !important; } .video_card_downloaded { background-color: #aaffaa; } .video_thumbnail { grid-area: thumbnail; justify-self: center; } .video_title { word-break: break-word; } .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; } .action_toolbox { grid-area: toolbox; justify-self: right; display: inline-flex; flex-direction: row; position: relative; margin-top: auto; margin-bottom: auto; } .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; } /* 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; } @media screen and (max-width: 600px) { .video_card { grid-template: "thumbnail details" "toolbox toolbox" "embed embed" /auto 1fr; } } </style> </head> <body> {{header.make_header()}} <div id="content_body"> {% if channel is not none %} <h2>{{channel.name}}</h2> {% endif %} {% if channel is not none %} <div class="tabbed_container"> <div class="tab" data-tab-title="Videos"> <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> {% endif %} <div>View {% if channel is not none %} <a class="merge_params" href="/channel/{{channel.id}}">All</a> {% else %} <a class="merge_params" href="/videos">All</a> {% endif %} {% for statename in all_states %} {% if channel is not none %} <a class="merge_params" href="/channel/{{channel.id}}/{{statename}}">{{statename.capitalize()}}</a> {% else %} <a class="merge_params" href="/videos/{{statename}}">{{statename.capitalize()}}</a> {% endif %} {% endfor %} </div> <div>Sort by <a class="merge_params" href="?orderby=published">Date</a> <a class="merge_params" href="?orderby=duration">Duration</a> <a class="merge_params" href="?orderby=views">Views</a> <a class="merge_params" href="?orderby=random">Random</a> </div> <div id="video_cards"> <center><input disabled class="enable_on_pageload" type="text" id="search_filter"/></center> <center><span id="search_filter_count">{{videos|length}}</span> items</center> {% for video in videos %} <div id="video_card_{{video.id}}" data-ytid="{{video.id}}" onclick="return onclick_select(event);" class="video_card video_card_{{video.state}}" > <img class="video_thumbnail" loading="lazy" src="http://i3.ytimg.com/vi/{{video.id}}/default.jpg" height="100px"> <div class="video_details"> <a class="video_title" href="https://www.youtube.com/watch?v={{video.id}}">{{video._published_str}} - {{video.title}}</a> <span>({{video.duration | seconds_to_hms}})</span> <span>({{video.views}})</span> {% if channel is none %} <a href="/channel/{{video.author_id}}">({{video.author.name if video.author else video.author_id}})</a> {% endif %} </div> <div class="action_toolbox"> <button {% if video.state == "pending" %} class="video_action_pending hidden" {% else %} class="video_action_pending" {% endif %} onclick="return action_button_passthrough(event, api.videos.mark_state, 'pending');" >Revert to Pending</button> <button {% if video.state == "pending" %} class="video_action_download" {% else %} class="video_action_download hidden" {% endif %} onclick="return action_button_passthrough(event, api.videos.start_download);" >Download</button> <button {% if video.state == "pending" %} class="video_action_ignore" {% else %} class="video_action_ignore hidden" {% endif %} onclick="return action_button_passthrough(event, api.videos.mark_state, 'ignored');" >Ignore</button> </div> <div class="embed_toolbox"> <button class="show_embed_button" onclick="return toggle_embed_video('{{video.id}}');">Embed</button> <button class="hide_embed_button hidden" onclick="return toggle_embed_video('{{video.id}}');">Unembed</button> </div> </div> {% endfor %} </div> <!-- video_cards --> {% if channel is not none %} </div> <!-- tab-videos --> <div class="tab" data-tab-title="Settings"> <div> New videos are: <select onchange="set_automark_hook(event);"> <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> </div> <button class="red_button button_with_confirm" data-prompt="Delete channel and all videos?" data-onclick="return delete_channel_form();" >Delete Channel</button> </div> <!-- tab-settings --> </div> <!-- tabbed_container --> {% endif %} </div> </body> <script type="text/javascript"> {% if channel is not none %} var CHANNEL_ID = "{{channel.id}}"; {% endif %} var STATE = "{{state if state else ""}}"; var video_card_first_selected = null; var video_card_selections = []; 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)); } } var search_filter_box = document.getElementById("search_filter"); var search_filter_wait_for_typing; var search_filter_hook = function(event) { clearTimeout(search_filter_wait_for_typing); search_filter_wait_for_typing = setTimeout(function() { filter_video_cards(search_filter_box.value); }, 200); } search_filter_box.addEventListener("keyup", search_filter_hook); function filter_video_cards(search_term) { /* 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. */ let count = 0; video_cards = document.getElementById("video_cards"); video_cards.classList.add("hidden"); search_term = search_term.toLocaleLowerCase(); let state_class = "video_card_" + STATE; Array.from(video_cards.getElementsByClassName("video_card")).forEach(function(video_card) { let title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase(); if (STATE && !video_card.classList.contains(state_class)) { video_cards.removeChild(video_card); } else if (search_term !== "" && title.indexOf(search_term) == -1) { video_card.classList.add("hidden"); } else { video_card.classList.remove("hidden"); count += 1; } }); video_cards.classList.remove("hidden"); document.getElementById("search_filter_count").innerText = count; } function toggle_embed_video(video_id) { let video_card = document.getElementById("video_card_" + video_id); let show_button = video_card.getElementsByClassName("show_embed_button")[0]; let hide_button = video_card.getElementsByClassName("hide_embed_button")[0]; let embed_toolbox = video_card.getElementsByClassName("embed_toolbox")[0]; let embeds = video_card.getElementsByClassName("video_iframe_holder"); if (embeds.length == 0) { let html = `<div class="video_iframe_holder"><iframe width="711" height="400" src="https://www.youtube.com/embed/${video_id}" frameborder="0" allow="encrypted-media" allowfullscreen></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 deselect_all() { let video_card_first_selected = null; for (const video_card_selection of video_card_selections) { video_card_selection.classList.remove("video_card_selected"); } video_card_selections = []; } function onclick_select(event) { if (!event.target.classList.contains("video_card")) { return; } if (video_card_first_selected === null) { video_card_first_selected = event.target; } let video_cards = Array.from(document.getElementById("video_cards").children); if (event.shiftKey === false && event.ctrlKey === false) { video_card_selections = []; video_card_selections.push(event.target); video_card_first_selected = event.target; } else if (event.shiftKey === true) { video_card_selections = []; let start_index = video_cards.indexOf(video_card_first_selected); let end_index = video_cards.indexOf(event.target); if (end_index < start_index) { let temp = start_index; start_index = end_index; end_index = temp; } for (let index = start_index; index <= end_index; index += 1) { if (video_cards[index].classList.contains("hidden")) { continue; } video_card_selections.push(video_cards[index]); } } else if (event.ctrlKey === true) { let existing_index = video_card_selections.indexOf(event.target) if (existing_index == -1) { video_card_first_selected = event.target; video_card_selections.push(event.target); } else { video_card_selections.splice(existing_index, 1); } } for (const video_card of video_cards) { if (video_card_selections.indexOf(video_card) > -1) { video_card.classList.add("video_card_selected"); } else { video_card.classList.remove("video_card_selected"); } } document.getSelection().removeAllRanges(); return false; } function action_button_passthrough(event, action_function, action_argument) { let elements; let this_card = event.target.parentElement.parentElement; if (video_card_selections.length > 0 && video_card_selections.indexOf(this_card) > -1) { elements = video_card_selections; } else { // Button -> button toolbox -> video card elements = [this_card]; } let video_ids = []; for (const element of elements) { video_ids.push(element.dataset["ytid"]); } video_ids = video_ids.join(","); if (action_argument === undefined) { action_function(video_ids, receive_action_response); } else { action_function(video_ids, action_argument, receive_action_response); } if (! event.shiftKey) { deselect_all(); } } function give_action_buttons(video_card_div) { let toolbox = video_card_div.getElementsByClassName("action_toolbox")[0] let buttons = Array.from(toolbox.getElementsByTagName("button")); let is_pending = video_card_div.classList.contains("video_card_pending"); buttons.forEach(function(button) { if (is_pending) { button.classList.remove("hidden"); } else { button.classList.add("hidden"); } }); let button_pending = video_card_div.getElementsByClassName("video_action_pending")[0]; if (is_pending) { button_pending.classList.add("hidden"); } else { button_pending.classList.remove("hidden"); } } function receive_action_response(response) { let video_ids = response.data.video_ids; let state = response.data.state; let state_class = "video_card_" + state; for (const video_id of video_ids) { let card = document.getElementById("video_card_" + video_id); {% for statename in all_states %} card.classList.remove("video_card_{{statename}}"); {% endfor %} card.classList.add(state_class); give_action_buttons(card); } } var set_automark_spinner = document.getElementById("set_automark_spinner"); set_automark_spinner = new spinner.Spinner(set_automark_spinner); function set_automark_hook(event) { set_automark_spinner.show(); api.channels.set_automark(CHANNEL_ID, event.target.value, set_automark_callback); } function set_automark_callback(response) { if (response.meta.status == 200) { set_automark_spinner.hide(); } } </script> </html>