more edl work
This commit is contained in:
parent
66ac62f6da
commit
ca94420168
|
@ -180,6 +180,15 @@
|
||||||
#schedule_grid td {
|
#schedule_grid td {
|
||||||
border: 1px solid lightgray;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
<input type="button" id="media_item_edl_add_insert_button" name="media_item_edl_add_insert_button" value="Add Insert Point"></button>
|
||||||
</div>
|
</div>
|
||||||
<ul id="media_item_edl_list">
|
<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>
|
<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>
|
</ul>
|
||||||
|
@ -462,6 +471,15 @@
|
||||||
thisRow.setAttribute("data-season", row['season']);
|
thisRow.setAttribute("data-season", row['season']);
|
||||||
thisRow.setAttribute("data-episode-number", row['episode_number']);
|
thisRow.setAttribute("data-episode-number", row['episode_number']);
|
||||||
thisRow.setAttribute("data-duration", row['duration_secs']);
|
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");
|
const nodes = document.querySelectorAll(".media_item_list_element");
|
||||||
nodes.forEach((node) => {
|
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="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="season"]').value = media_item_element.getAttribute("data-season");
|
||||||
template_clone.querySelector('input[name="episode_number"]').value = media_item_element.getAttribute("data-episode-number");
|
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);
|
// TODO: fetch related EDLs from API here
|
||||||
template_clone.querySelector('input[name="media_item_edl_outpoint"]').value = formatted_duration;
|
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"));
|
template_clone.firstElementChild.setAttribute("data-duration", media_item_element.getAttribute("data-duration"));
|
||||||
target.innerHTML = "";
|
target.innerHTML = "";
|
||||||
target.appendChild(template_clone);
|
target.appendChild(template_clone);
|
||||||
|
@ -495,18 +516,17 @@
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const api_url = "update.php?id=" + item_id;
|
const api_url = "update.php?id=" + item_id;
|
||||||
const item_data = new FormData(document.getElementById("media_item_form_data"));
|
const item_data = new FormData(document.getElementById("media_item_form_data"));
|
||||||
fetch(api_url, {
|
fetch(api_url, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: item_data
|
body: item_data
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
response.json().then((json) => {
|
response.json().then((json) => {
|
||||||
fetch_media_items();
|
fetch_media_items();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
const edl_insert_button = document.getElementById("media_item_edl_add_insert_button");
|
const edl_insert_button = document.getElementById("media_item_edl_add_insert_button");
|
||||||
edl_insert_button.addEventListener("click", (e) => {
|
edl_insert_button.addEventListener("click", (e) => {
|
||||||
|
@ -534,6 +554,20 @@
|
||||||
btn.addEventListener("click", jumpHandler);
|
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) => {
|
const jumpHandler = (e) => {
|
||||||
|
@ -659,9 +693,7 @@
|
||||||
grid.appendChild(template_clone);
|
grid.appendChild(template_clone);
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: fetch schedule info from api and populate, if it exists for the requested day
|
load_schedule(day_of_schedule);
|
||||||
// TODO: register click handler on schedule cells to open 'add block' dialog
|
|
||||||
// TODO: register click handler on block cells to open 'edit block' dialog
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const previous_day_schedule = (e) => {
|
const previous_day_schedule = (e) => {
|
||||||
|
@ -677,6 +709,45 @@
|
||||||
init_schedules(day);
|
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 = () => {
|
const tag_editor_handlers = () => {
|
||||||
document.querySelector("#save_tag_button").addEventListener("click", (e) => {
|
document.querySelector("#save_tag_button").addEventListener("click", (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
Loading…
Reference in New Issue