more edl work
This commit is contained in:
parent
66ac62f6da
commit
ca94420168
107
layout.html
Normal file → Executable file
107
layout.html
Normal file → Executable 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();
|
||||
|
Loading…
Reference in New Issue
Block a user