more edl work

This commit is contained in:
Sundog Jones 2024-09-16 15:33:46 -04:00
parent 66ac62f6da
commit ca94420168
2 changed files with 89 additions and 18 deletions

0
edl.php Normal file → Executable file
View File

107
layout.html Normal file → Executable file
View File

@ -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);
}
</style>
</head>
<body>
@ -283,7 +292,7 @@
<input type="button" id="media_item_edl_add_insert_button" name="media_item_edl_add_insert_button" value="Add Insert Point"></button>
</div>
<ul id="media_item_edl_list">
<li id="media_item_edl_inpoint_listitem"><label for="media_item_edl_inpoint">In: </label><input type="text" name="media_item_edl_inpoint" value="00:00:00" /></li>
<li id="media_item_edl_inpoint_listitem"><label for="media_item_edl_inpoint">In: </label><input type="text" name="media_item_edl_inpoint" value="" /></li>
<li id="media_item_edl_outpoint_listitem"><label for="media_item_edl_outpoint">Out: </label><input type="text" name="media_item_edl_outpoint" value="" /></li>
</ul>
@ -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();