From ca944201682240cd764a29407aebf33b5402c3cc Mon Sep 17 00:00:00 2001 From: Sundog Date: Mon, 16 Sep 2024 15:33:46 -0400 Subject: [PATCH] more edl work --- edl.php | 0 layout.html | 107 +++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 89 insertions(+), 18 deletions(-) mode change 100644 => 100755 edl.php mode change 100644 => 100755 layout.html diff --git a/edl.php b/edl.php old mode 100644 new mode 100755 diff --git a/layout.html b/layout.html old mode 100644 new mode 100755 index c3d5419..537b98e --- a/layout.html +++ b/layout.html @@ -180,6 +180,15 @@ #schedule_grid td { border: 1px solid lightgray; } + + #schedule_grid .program_block { + background-color: rgba(0,255,0,0.5); + border-radius: 10px; + } + + #schedule_grid .program_block .unsaved { + background-color: rgba(255,0,0,0.5); + } @@ -283,7 +292,7 @@ @@ -462,6 +471,15 @@ thisRow.setAttribute("data-season", row['season']); thisRow.setAttribute("data-episode-number", row['episode_number']); thisRow.setAttribute("data-duration", row['duration_secs']); + if (row['edl_definition'] !== undefined) { + const edl = JSON.parse(row['edl_definition']); + thisRow.setAttribute("data-inpoint", edl.inpoint); + thisRow.setAttribute("data-outpoint", edl.outpoint) + } else { + // no EDL yet, use start as inpoint and duration as outpoint + thisRow.setAttribute("data-inpoint", 0); + thisRow.setAttribute("data-outpoint", row['duration_secs']); + } }); const nodes = document.querySelectorAll(".media_item_list_element"); nodes.forEach((node) => { @@ -484,8 +502,11 @@ template_clone.querySelector('input[name="description"]').value = media_item_element.getAttribute("data-description"); template_clone.querySelector('input[name="season"]').value = media_item_element.getAttribute("data-season"); template_clone.querySelector('input[name="episode_number"]').value = media_item_element.getAttribute("data-episode-number"); - const formatted_duration = new Date(media_item_element.getAttribute("data-duration") * 1000).toISOString().substring(11, 19); - template_clone.querySelector('input[name="media_item_edl_outpoint"]').value = formatted_duration; + // TODO: fetch related EDLs from API here + const formatted_inpoint = new Date(media_item_element.getAttribute("data-inpoint") * 1000).toISOString().substring(11, 19); + const formatted_outpoint = new Date(media_item_element.getAttribute("data-outpoint") * 1000).toISOString().substring(11, 19); + template_clone.querySelector('input[name="media_item_edl_inpoint"]').value = formatted_inpoint; + template_clone.querySelector('input[name="media_item_edl_outpoint"]').value = formatted_outpoint; template_clone.firstElementChild.setAttribute("data-duration", media_item_element.getAttribute("data-duration")); target.innerHTML = ""; target.appendChild(template_clone); @@ -495,18 +516,17 @@ e.preventDefault(); const api_url = "update.php?id=" + item_id; const item_data = new FormData(document.getElementById("media_item_form_data")); - fetch(api_url, { - method: "POST", - body: item_data - }) - .then((response) => { - if (response.ok) { - response.json().then((json) => { - fetch_media_items(); - }); - } - }) - + fetch(api_url, { + method: "POST", + body: item_data + }) + .then((response) => { + if (response.ok) { + response.json().then((json) => { + fetch_media_items(); + }); + } + }); }); const edl_insert_button = document.getElementById("media_item_edl_add_insert_button"); edl_insert_button.addEventListener("click", (e) => { @@ -534,6 +554,20 @@ btn.addEventListener("click", jumpHandler); }); }); + const edl_save_button = document.getElementById("media_item_edl_save_button"); + edl_save_button.addEventListener("click", (e) => { + e.preventDefault(); + const api_url = "edl.php"; + const payload = {}; + payload.inpoint = ""; + payload.outpoint = ""; + payload.inserts = []; + const list_parent = document.querySelector("#media_item_edl_list"); + const current_items = list_parent.querySelectorAll("li"); + current_items.forEach((insertPoint) => { + payload.inserts.push(insertPoint.getAttribute("data-timestamp")); + }); + }); } const jumpHandler = (e) => { @@ -659,9 +693,7 @@ grid.appendChild(template_clone); } - // TODO: fetch schedule info from api and populate, if it exists for the requested day - // TODO: register click handler on schedule cells to open 'add block' dialog - // TODO: register click handler on block cells to open 'edit block' dialog + load_schedule(day_of_schedule); } const previous_day_schedule = (e) => { @@ -677,6 +709,45 @@ init_schedules(day); } + const load_schedule = (day) => { + // TODO: fetch schedule data from api + if (!day) { + day = new Date(); + } + const api_url = "schedule.php?date=" + day.toISOString(); + fetch(api_url) + .then((response) => { + if (response.ok) { + response.json().then((json) => { + // TODO: populate schedule grid + + }); + } + }); + } + + const schedule_grid_click_handler = (e) => { + e.preventDefault(); + // TODO: open dialog for add block + } + + const schedule_block_click_handler = (e) => { + e.preventDefault(); + // TODO: open dialog for edit block + + } + + const remove_schedule_block = (e) => { + e.preventDefault(); + // TODO: delete block from schedule grid + + } + + const save_schedule = () => { + // TODO: post schedule data to api endpoint + + } + const tag_editor_handlers = () => { document.querySelector("#save_tag_button").addEventListener("click", (e) => { e.preventDefault();