<!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; width: 1440px; margin-left: auto; margin-right: auto; max-width: 100%; } .video_card { position: relative; margin: 8px; padding: 10px; 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; } .action_toolbox { float: right; display: inline-flex; flex-direction: row; 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; } </style> </head> <body> {{header.make_header()}} <div id="content_body"> {% if channel is not none %} <span><button class="refresh_button" onclick="refresh_channel('{{channel['id']}}', false, function(){location.reload()})">Refresh new videos</button></span> <span><button class="refresh_button" onclick="refresh_channel('{{channel['id']}}', true, function(){location.reload()})">Refresh everything</button></span> <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> {% else %} <span><a href="/videos">All</a></span> <span><a href="/videos/pending">Pending</a></span> <span><a href="/videos/ignored">Ignored</a></span> <span><a href="/videos/downloaded">Downloaded</a></span> {% endif %} <span>{{videos|length}} items</span> <div id="video_cards"> {% for video in videos %} <div id="video_card_{{video['id']}}" data-ytid="{{video['id']}}" onclick="onclick_select(event)" {% if video['download'] == "downloaded" %} class="video_card video_card_downloaded" {% elif video['download'] == "ignored" %} class="video_card video_card_ignored" {% else %} class="video_card video_card_pending" {% endif %} > <a href="https://www.youtube.com/watch?v={{video['id']}}">{{video['_published_str']}} - {{video['title']}}</a> {% if channel is none %} <a href="/channel/{{video['author_id']}}">(Chan)</a> {% endif %} <div class="action_toolbox"> <button {% if video['download'] == "pending" %} class="video_action_pending hidden" {% else %} class="video_action_pending" {% endif %} onclick="action_button_passthrough(event, mark_video_state, 'pending')" >Revert to Pending</button> <button {% if video['download'] == "pending" %} class="video_action_download" {% else %} class="video_action_download hidden" {% endif %} onclick="action_button_passthrough(event, start_download)" >Download</button> <button {% if video['download'] == "pending" %} class="video_action_ignore" {% else %} class="video_action_ignore hidden" {% endif %} onclick="action_button_passthrough(event, mark_video_state, 'ignored')" >Ignore</button> </div> </div> {% endfor %} </div> </div> </body> <script type="text/javascript"> var video_card_first_selected = null; var video_card_selections = []; var video_cards = Array.from(document.getElementById("video_cards").children); function deselect_all() { var video_card_first_selected = null; for (var index = 0; index < video_card_selections.length; index +=1) { video_card_selections[index].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; } 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 = []; var start_index = video_cards.indexOf(video_card_first_selected); var end_index = video_cards.indexOf(event.target); if (end_index < start_index) { var temp = start_index; start_index = end_index; end_index = temp; } for (var index = start_index; index <= end_index; index += 1) { video_card_selections.push(video_cards[index]); } } else if (event.ctrlKey === true) { var 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 (var index = 0; index < video_cards.length; index += 1) { card = video_cards[index]; if (video_card_selections.indexOf(card) > -1) { card.classList.add("video_card_selected"); } else { card.classList.remove("video_card_selected"); } } return false; } function action_button_passthrough(event, action_function, action_argument) { var elements; var 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]; } for (var index = 0; index < elements.length; index += 1) { card = elements[index]; if (action_argument === undefined) { action_function(card.dataset['ytid'], receive_action_response); } else { action_function(card.dataset['ytid'], action_argument, receive_action_response); } } deselect_all(); } function give_action_buttons(video_card_div) { var button_pending = video_card_div.getElementsByClassName("video_action_pending")[0]; var button_download = video_card_div.getElementsByClassName("video_action_download")[0]; var button_ignore = video_card_div.getElementsByClassName("video_action_ignore")[0]; if (video_card_div.classList.contains("video_card_pending")) { button_download.classList.remove("hidden"); button_ignore.classList.remove("hidden"); button_pending.classList.add("hidden"); } else { button_download.classList.add("hidden"); button_ignore.classList.add("hidden"); button_pending.classList.remove("hidden"); } } function receive_action_response(response) { var video_id = response['video_id']; var state = response['state']; var card = document.getElementById("video_card_" + video_id); if (state == 'pending') { card.classList = ["video_card", "video_card_pending"].join(" "); card.style.backgroundColor = "#ffffaa"; } else if (state == 'ignored') { card.classList = ["video_card", "video_card_ignored"].join(" "); card.style.backgroundColor = "#ffc886"; } else if (state == 'downloaded') { card.classList = ["video_card", "video_card_downloaded"].join(" "); card.style.backgroundColor = "#aaffaa"; } give_action_buttons(card); } 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); } </script> </html>