2024-09-03 10:37:30 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > NETV MAM< / title >
< style >
body {
background-color: black;
color: white;
height: 100vh;
width: 100vw;
}
header, footer {
display: flex;
width: 100vw;
}
header {
height: 16vh;
justify-content: space-between;
}
main {
width: 100%;
height: 74vh;
border-top: 3px solid white;
border-bottom: 3px solid white;
}
footer {
height: 2vh;
}
#cue_video, #live_video {
width: 100% !important;
height: auto !important;
}
#tabs {
width: 100%;
}
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
display: inline-block;
border: solid;
border-width: 1px 1px 0 1px;
border-color: white;
margin: 0 5px 0 0;
background-color: white;
color: black;
}
#tabs li a {
padding: 0 10px;
color: black;
text-decoration: none;
}
#tab_content {
display: flex;
border-top: 1px solid white;
width: 100%;
}
.active_tab {
padding-bottom: 1px;
background-color: green;
}
#upload_target {
2024-09-10 09:29:59 -04:00
position: fixed;
2024-09-03 10:37:30 -04:00
bottom: 3vh;
left: 0;
width: 25vw;
height: 10vh;
border: 1px solid white;
}
2024-09-03 15:39:18 -04:00
.readyToDrop {
background-color: green;
}
2024-09-03 10:37:30 -04:00
::backdrop {
background-image: linear-gradient(
45deg,
magenta,
rebeccapurple,
dodgerblue,
green
);
opacity: 0.75;
}
#media_library_contents {
width: 25vw;
height: 52vh;
overflow-y: scroll;
}
#media_item_details {
position: absolute;
right: 0;
bottom: 3vh;
width: 70vw;
height: 45vh;
border: 1px solid white;
display: flex;
}
#media_item_preview {
width: 720px;
height: 480px;
}
#media_item_form {
float: right;
}
.media_item_list_element {
width: 24vw;
border: 1px solid white;
}
#media_item_editor_tags {
width: 30vw;
}
.tag {
display: inline-block;
border: 1px solid white;
padding: 2px;
margin: 4px;
}
.tag.enabled {
background-color: green;
}
.tag.disabled {
background-color: red;
}
#media_item_edl_list {
margin: 0;
}
#media_item_edl_list label {
display: inline-block;
width: 5vw;
}
#media_item_edl_list_container {
display: inline-flex;
align-items: flex-start;
}
#media_item_edl_list_add_insert_button {
width: 3vw;
}
2024-09-09 12:09:05 -04:00
#current_day_indicator {
display: inline-block;
width: 300px;
}
2024-09-09 12:53:02 -04:00
#schedule_grid {
border: 2px solid white;
2024-09-10 11:38:20 -04:00
width: 90vw;
2024-09-10 09:29:59 -04:00
max-height: 52vh;
2024-09-10 09:30:49 -04:00
overflow-y: scroll;
2024-09-09 12:53:02 -04:00
}
2024-09-09 13:00:52 -04:00
#schedule_grid td {
border: 1px solid lightgray;
}
2024-09-16 15:33:46 -04:00
#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);
}
2024-09-03 10:37:30 -04:00
< / style >
< / head >
< body >
< header >
< section id = "infobox" >
< h1 > NETV MAM< / h1 >
< p id = "current_date" > < / p >
< p id = "current_time" > < / p >
< / section >
<!-- we don't need these yet
< section id = "cue_deck" >
< video id = "cue_video" controls > < / video >
< p > Preview Deck< / p >
< / section >
< section id = "live_deck" >
< video id = "live_video" controls = "off" > < / video >
< p > Live on NETV< / p >
< / section >
-->
< / header >
< main >
< nav id = "tabs" >
< ul >
< li class = "active_tab" > < a href = "#" id = "library_tab" > Media Library< / a > < / li >
< li > < a href = "#" id = "tags_tab" > Tag Editor< / a > < / li >
< li > < a href = "#" id = "schedules_tab" > Schedules< / a > < / li >
< li > < a href = "#" id = "epg_tab" > EPG< / a > < / li >
< / ul >
< / nav >
< section id = "tab_content" >
< / section >
< / main >
< footer >
< section id = "colophon" >
Copyright © 2024 Mountaintown Technology - Version 0.8.0
< / section >
< / footer >
< template id = "media_library_template" >
< section id = "media_library_browser" >
< h2 > Media Files< / h2 >
< section id = "upload_target" > < p > Drag files here to upload< / p > < / section >
< p > Filter: < input type = "text" id = "media_library_filter" / > < / p >
< section id = "media_library_contents" >
< / section >
< dialog id = "media_details_dialog" >
< form id = "media_details_dialog_form" method = "dialog" / >
< h2 id = "media_details_dialog_header" > Metadata< / h2 >
< p > < label for = "media_details_dialog_id" > ID: < / label > < input name = "id" id = "media_details_dialog_id" type = "text" disabled / > < / p >
< p > < label for = "media_details_dialog_title" > Title: < / label > < input name = "title" id = "media_details_dialog_title" type = "text" / > < / p >
< p > < label for = "media_details_dialog_description" > Description: < / label > < input name = "description" id = "media_details_dialog_description" type = "text" / > < / p >
< p > < label for = "media_details_dialog_season" > Season number: < / label > < input name = "season" id = "media_details_dialog_season" type = "number" / > < / p >
< p > < label for = "media_details_dialog_episode_number" > Episode number: < / label > < input name = "episode_number" id = "media_details_dialog_episode_number" type = "number" / > < / p >
< p > Duration: < span id = "media_details_dialog_duration_secs" > < / span > < / p >
< button id = "media_details_dialog_save_button" value = "save" > Save Metadata< / button > < button id = "media_details_dialog_close_button" value = "close" > Close Without Saving< / button >
< / form >
2024-09-22 11:03:07 -04:00
< / dialog >
2024-09-03 10:37:30 -04:00
< / section >
< section id = "media_library_details" >
< / section >
< / template >
< template id = "media_item_template" >
< div class = "media_item_list_element" >
< img class = "media_item_thumbnail" >
< strong class = "media_item_title" > < / strong >
< p class = "media_item_info" > < / p >
< / template >
< template id = "tag_editor_template" >
< section id = "tag_editor" >
< h2 > Tags< / h2 >
< p > Current tags:< / p >
< p class = "tags_list" > < / p >
< form id = "add_tag_form" action = "tags.php" method = "POST" >
< p > < label for = "new_tag" > New tag: < / label > < input type = "text" name = "new_tag" id = "new_tag_input" / > < / p >
< button id = "save_tag_button" value = "save" > Save Tag< / button >
< / form >
< / section >
< / template >
< template id = "media_item_editor" >
< div class = "media_item_details" >
< video id = "media_item_preview" controls > < / video >
< div id = "media_item_form" >
< form id = "media_item_form_data" >
< p > < label for = "id" > ID: < / label > < input type = "text" name = "id" disabled / > < / p >
< p > < label for = "title" > Title: < / label > < input type = "text" name = "title" / > < / p >
< p > < label for = "description" > Description: < / label > < input type = "text" name = "description" / > < / p >
< p > < label for = "season" > Season number: < / label > < input type = "number" name = "season" / > < / p >
< p > < label for = "episode_number" > Episode number: < / label > < input type = "number" name = "episode_number" / > < / p >
< p > Tags:< / p >
< div id = "media_item_editor_tags" > < / div >
< button id = "media_item_editor_save_button" value = "save" > Save Metadata< / button > < button id = "media_item_editor_cancel_button" value = "cancel" > Cancel< / button >
< / form >
< / div >
< / div >
< div id = "media_item_edl" >
< h2 > EDL< / h2 >
< div id = "media_item_edl_list_container" >
< div id = "media_item_edl_add_insert_container" >
< 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" >
2024-09-16 15:33:46 -04:00
< 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 >
2024-09-03 10:37:30 -04:00
< 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 >
< / div >
< button id = "media_item_edl_save_button" value = "Save EDL" > Save EDL< / button >
< / div >
< / template >
< template id = "media_item_edl_insert_listitem" >
< li class = "media_item_edl_insert" >
< label for = "media_item_edl_insert" > Insert: < / label >
< input type = "text" name = "media_item_edl_insert" / >
< button class = "media_item_edl_remove_insert" > X< / button >
< button class = "media_item_edl_jump_insert" > -> < / button >
< / li >
< / template >
2024-09-03 15:39:18 -04:00
< template id = "schedules_template" >
2024-09-03 16:43:10 -04:00
< section id = "schedule_pane" >
< h2 > Schedules< / h2 >
< section id = "schedules_time_range_section" >
2024-09-09 10:02:10 -04:00
< button id = "previous_day_button" > < < / button >
< span id = "current_day_indicator" > < / span >
< button id = "next_day_button" > > < / button >
2024-09-03 16:43:10 -04:00
< / section >
< table id = "schedule_grid" >
< / table >
2024-09-03 15:39:18 -04:00
< / section >
2024-09-22 11:03:07 -04:00
< dialog id = "new_block_dialog" >
< form id = "new_block_dialog_form" method = "dialog" / >
< h2 id = "new_block_dialog_header" > Adding a New Schedule Block< / h2 >
< p > < label for = "new_block_dialog_id" > ID: < / label > < input name = "id" id = "new_block_dialog_id" type = "text" disabled / > < / p >
< p > < label for = "new_block_dialog_name" > Name: < / label > < input name = "name" id = "new_block_dialog_name" type = "text" / > < / p >
< p > < label for = "new_block_start_time" > Start time: < / label > < input name = "start_time" id = "new_block_start_time" type = "text" / > < / p >
< p > Tag(s) for block:< / p >
< div id = "new_block_program_tags" > < / div >
< p > < label for = "new_block_duration_minutes" > Block duration (in minutes): < / label > < input name = "new_block_duration_minutes" id = "new_block_duration_minutes" type = "number" / > < / p >
< p > < label for = "new_block_enable_commercials" > Play commercials: < / label > < input name = "new_block_enable_commercials" id = "new_block_enable_commercials" type = "checkbox" checked / > < / p >
< p > Tag(s) for commercials:< / p >
< div id = "new_block_commercials_tags" > < / div >
< p > < label for = "new_block_enable_promos" > Play promos: < / label > < input name = "new_block_enable_promos" id = "new_block_enable_promos" type = "checkbox" checked / > < / p >
< p > Tag(s) for promos:< / p >
< div id = "new_block_promos_tags" > < / div >
< p > < label for = "new_block_enable_bumpers" > Play bumpers: < / label > < input name = "new_block_enable_bumpers" id = "new_block_enable_bumpers" type = "checkbox" checked / > < / p >
< p > Tag(s) for bumpers:< / p >
< div id = "new_block_bumpers_tags" > < / div >
< button id = "new_block_dialog_save_button" value = "save" > Save Block< / button > < button id = "new_block_dialog_close_button" value = "close" > Close Without Saving< / button >
< / form >
< / dialog >
2024-09-03 16:26:01 -04:00
< / template >
< template id = "schedule_header_row_template" >
2024-09-09 13:07:41 -04:00
< tr >
2024-09-09 12:46:55 -04:00
< td class = "schedule_row_time_header" > Time< / td >
< td class = "schedule_row_program_header" > Program< / td >
2024-09-09 13:07:41 -04:00
< / tr >
2024-09-03 15:39:18 -04:00
< / template >
2024-09-09 12:46:55 -04:00
< template id = "schedule_row_template" >
< tr class = "schedule_row" >
< td class = "schedule_row_time" > < / td >
< td class = "schedule_row_program" > < / td >
< / tr >
< / template >
2024-09-03 10:37:30 -04:00
< script >
const init_library = () => {
2024-09-03 11:43:42 -04:00
// set up handler for library filtering
const filter_box = document.querySelector("#media_library_filter");
filter_box.addEventListener("keypress", (e) => {
if (e.key === 'Enter') {
fetch_filtered_media_items();
}
});
2024-09-03 10:37:30 -04:00
// set up drag'n'drop file upload handling
const upload_target = document.getElementById("upload_target");
upload_target.addEventListener("dragenter", (event) => {
event.target.classList.add("readyToDrop");
});
upload_target.addEventListener("dragleave", (event) => {
event.target.classList.remove("readyToDrop");
});
upload_target.addEventListener("dragover", (event) => {
event.preventDefault();
event.stopPropagation();
});
upload_target.addEventListener("drop", (event) => {
console.log("Objects dropped on upload target.");
event.preventDefault();
event.target.classList.remove("readyToDrop");
if (event.dataTransfer.items) {
console.log(event.dataTransfer.items.length + " items dropped.");
[...event.dataTransfer.items].forEach((item, i) => {
// If dropped items aren't files, reject them
if (item.kind === "file") {
const file = item.getAsFile();
console.log(`… file[${i}].name = ${file.name}`);
const uploadURL = "upload.php";
let data = new FormData();
data.append('file', file);
fetch(uploadURL, {
method: "POST",
body: data
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
// show dialog to get media metadata for new upload
console.log("Upload response: ");
console.dir(json);
2024-09-22 11:13:01 -04:00
const metadata_dialog = document.getElementById("media_details_dialog");
const metadata_header = document.getElementById("media_details_dialog_header");
metadata_header.innerHTML = "Metadata for " + json.source_path;
const metadata_title = document.getElementById("media_details_dialog_title");
metadata_title.value = json.title === "unknown" ? json.source_path : json.title;
const dur_span = document.getElementById("media_details_dialog_duration_secs");
dur_span.innerHTML = new Date(json.duration_secs * 1000).toISOString().substring(11, 19);
const id_input = document.getElementById("media_details_dialog_id");
id_input.value = json.id;
const metadata_close_button = document.getElementById("media_details_dialog_close_button");
metadata_close_button.addEventListener("click", (event) => {
event.preventDefault();
metadata_dialog.close();
});
const metadata_save_button = document.getElementById("media_details_dialog_save_button");
metadata_save_button.addEventListener("click", (event) => {
event.preventDefault();
const updateURL = "update.php?id=" + json.id;
let data = new FormData(document.getElementById("media_details_dialog_form"));
console.dir(data);
fetch(updateURL, {
method: "POST",
body: data
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
metadata_dialog.close();
fetch_media_items();
});
}
});
});
metadata_dialog.showModal();
2024-09-03 10:37:30 -04:00
});
}
})
.catch(() => {});
}
});
} else {
// Use DataTransfer interface to access the file(s)
[...event.dataTransfer.files].forEach((file, i) => {
console.log(`… file[${i}].name = ${file.name}`);
});
}
});
}
const fetch_media_items = () => {
const api_url = "media.php";
fetch(api_url).then((response) => {
if (response.ok) {
2024-09-03 11:34:40 -04:00
response.json().then(populate_media_library);
2024-09-03 10:37:30 -04:00
}
});
}
2024-09-03 11:34:40 -04:00
const fetch_filtered_media_items = () => {
const filter_term = document.querySelector("#media_library_filter").value;
const api_url = "media.php?filter=" + filter_term;
fetch(api_url).then((response) => {
if (response.ok) {
response.json().then(populate_media_library);
}
});
}
2024-09-03 12:09:42 -04:00
const secs_to_human_duration = (secs) => {
// date and time munging using substring? it's more likely than you think
return new Date(secs * 1000).toISOString().substring(11, 19);
}
2024-09-03 11:34:40 -04:00
const populate_media_library = (rows) => {
const media_library_target = document.querySelector("#media_library_contents");
media_library_target.innerHTML = "";
rows.forEach((row) => {
2024-09-03 12:09:42 -04:00
const duration = secs_to_human_duration(row['duration_secs']);
2024-09-03 11:34:40 -04:00
const template = document.getElementById("media_item_template");
const template_clone = template.content.firstElementChild.cloneNode(true);
template_clone.querySelector(".media_item_title").innerHTML = row['title'];
template_clone.querySelector(".media_item_info").innerHTML = `< p > ${row['description']}< / p > < p > Season ${row['season']} Episode ${row['episode_number']} - (Duration ${duration})< / p > `;
const thisRow = media_library_target.appendChild(template_clone);
thisRow.setAttribute("data-id", row['id']);
thisRow.setAttribute("data-title", row['title']);
thisRow.setAttribute("data-description", row['description']);
thisRow.setAttribute("data-season", row['season']);
thisRow.setAttribute("data-episode-number", row['episode_number']);
thisRow.setAttribute("data-duration", row['duration_secs']);
2024-09-17 10:03:56 -04:00
if (row['edl_id']) thisRow.setAttribute("data-edl-id", row['edl_id']);
if (row['edl_name']) thisRow.setAttribute("data-edl-name", row['edl_name']);
2024-09-17 09:31:20 -04:00
if (row['edl_definition'] !== null) {
2024-09-16 15:33:46 -04:00
const edl = JSON.parse(row['edl_definition']);
thisRow.setAttribute("data-inpoint", edl.inpoint);
2024-09-17 09:41:07 -04:00
thisRow.setAttribute("data-outpoint", edl.outpoint);
2024-09-17 09:42:28 -04:00
thisRow.setAttribute("data-edl-definition", row['edl_definition']);
2024-09-16 15:33:46 -04:00
} else {
// no EDL yet, use start as inpoint and duration as outpoint
thisRow.setAttribute("data-inpoint", 0);
thisRow.setAttribute("data-outpoint", row['duration_secs']);
}
2024-09-03 11:34:40 -04:00
});
const nodes = document.querySelectorAll(".media_item_list_element");
nodes.forEach((node) => {
node.addEventListener("click", (event) => {
// open media item details editing pane
const media_item = event.target.classList.contains(".media_item_list_element") ? event.target : event.target.closest(".media_item_list_element");
edit_media_item(media_item);
});
});
}
2024-09-03 10:37:30 -04:00
const edit_media_item = (media_item_element) => {
const template = document.getElementById("media_item_editor");
const template_clone = template.content.cloneNode(true);
const target = document.querySelector("#media_library_details");
const item_id = media_item_element.getAttribute("data-id");
template_clone.querySelector('#media_item_preview').setAttribute('src', 'play.php?id=' + item_id);
template_clone.querySelector('input[name="id"]').value = item_id;
template_clone.querySelector('input[name="title"]').value = media_item_element.getAttribute("data-title");
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");
2024-09-17 09:41:07 -04:00
2024-09-16 15:33:46 -04:00
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;
2024-09-03 10:37:30 -04:00
template_clone.firstElementChild.setAttribute("data-duration", media_item_element.getAttribute("data-duration"));
2024-09-16 16:24:06 -04:00
template_clone.firstElementChild.setAttribute("data-media-id", media_item_element.getAttribute("data-id"));
2024-09-17 09:41:07 -04:00
2024-09-17 09:52:55 -04:00
target.innerHTML = "";
target.appendChild(template_clone);
fetch_item_tags(item_id);
const save_button = document.getElementById("media_item_editor_save_button");
2024-09-17 09:46:32 -04:00
// populate EDL if it exists
2024-09-17 09:41:07 -04:00
const thisRowEDL = media_item_element.getAttribute("data-edl-definition");
2024-09-17 10:03:56 -04:00
const edl_id = media_item_element.getAttribute("data-edl-id");
const edl_name = media_item_element.getAttribute("data-edl-name");
2024-09-17 11:02:01 -04:00
2024-09-17 09:41:07 -04:00
if (thisRowEDL & & thisRowEDL !== "") {
edl = JSON.parse(thisRowEDL);
2024-09-17 09:46:32 -04:00
edl.inserts.forEach((insert) => {
const current_timecode = insert;
const template = document.getElementById("media_item_edl_insert_listitem");
const template_clone = template.content.cloneNode(true);
const formatted_timestamp = secs_to_human_duration(current_timecode);
template_clone.querySelector('input[name="media_item_edl_insert"]').value = formatted_timestamp;
template_clone.firstElementChild.setAttribute('data-timestamp', current_timecode);
const target = document.querySelector("#media_item_edl_outpoint_listitem");
const parent = document.querySelector("#media_item_edl_list");
2024-09-17 10:08:51 -04:00
parent.insertBefore(template_clone, target);
parent.setAttribute("data-edl-id", edl_id);
parent.setAttribute("data-edl-name", edl_name);
2024-09-17 09:46:32 -04:00
});
sort_inserts();
2024-09-17 10:33:53 -04:00
// set up jump/remove handlers
const remove_buttons = document.querySelectorAll("button.media_item_edl_remove_insert");
remove_buttons.forEach((btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
e.target.parentNode.remove();
});
});
const jump_buttons = document.querySelectorAll("button.media_item_edl_jump_insert");
jump_buttons.forEach((btn) => {
btn.removeEventListener("click", jumpHandler);
btn.addEventListener("click", jumpHandler);
});
2024-09-17 09:41:07 -04:00
}
2024-09-03 10:37:30 -04:00
save_button.addEventListener("click", (e) => {
e.preventDefault();
const api_url = "update.php?id=" + item_id;
const item_data = new FormData(document.getElementById("media_item_form_data"));
2024-09-16 15:33:46 -04:00
fetch(api_url, {
method: "POST",
body: item_data
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
fetch_media_items();
});
}
});
2024-09-03 10:37:30 -04:00
});
2024-09-17 10:08:51 -04:00
2024-09-03 10:37:30 -04:00
const edl_insert_button = document.getElementById("media_item_edl_add_insert_button");
edl_insert_button.addEventListener("click", (e) => {
e.preventDefault();
const current_timecode = document.getElementById("media_item_preview").currentTime;
const template = document.getElementById("media_item_edl_insert_listitem");
const template_clone = template.content.cloneNode(true);
2024-09-03 12:09:42 -04:00
const formatted_timestamp = secs_to_human_duration(current_timecode);
2024-09-03 10:37:30 -04:00
template_clone.querySelector('input[name="media_item_edl_insert"]').value = formatted_timestamp;
template_clone.firstElementChild.setAttribute('data-timestamp', current_timecode);
const target = document.querySelector("#media_item_edl_outpoint_listitem");
const parent = document.querySelector("#media_item_edl_list");
parent.insertBefore(template_clone, target);
sort_inserts();
const remove_buttons = document.querySelectorAll("button.media_item_edl_remove_insert");
remove_buttons.forEach((btn) => {
btn.addEventListener("click", (e) => {
e.preventDefault();
e.target.parentNode.remove();
});
});
const jump_buttons = document.querySelectorAll("button.media_item_edl_jump_insert");
jump_buttons.forEach((btn) => {
btn.removeEventListener("click", jumpHandler);
btn.addEventListener("click", jumpHandler);
});
2024-09-22 11:03:07 -04:00
});
2024-09-17 10:08:51 -04:00
2024-09-16 15:33:46 -04:00
const edl_save_button = document.getElementById("media_item_edl_save_button");
edl_save_button.addEventListener("click", (e) => {
e.preventDefault();
const api_url = "edl.php";
2024-09-16 16:57:23 -04:00
const edl_definition = {};
2024-09-16 15:33:46 -04:00
const payload = {};
2024-09-16 16:04:59 -04:00
const inpoint = document.querySelector("#media_item_edl_inpoint_listitem").getAttribute("data-start");
const outpoint = document.querySelector("#media_item_edl_outpoint_listitem").getAttribute("data-stop");
2024-09-16 16:24:06 -04:00
payload.media_id = document.querySelector("#media_library_details > .media_item_details").getAttribute("data-media-id");
2024-09-16 16:57:23 -04:00
edl_definition.inpoint = inpoint || "0";
edl_definition.outpoint = outpoint || document.querySelector("#media_library_details > .media_item_details").getAttribute("data-duration");
edl_definition.inserts = [];
2024-09-16 15:33:46 -04:00
const list_parent = document.querySelector("#media_item_edl_list");
2024-09-17 10:27:56 -04:00
const edl_id = list_parent.getAttribute("data-edl-id") || null;
const edl_name = list_parent.getAttribute("data-edl-name") || null;
2024-09-16 15:54:49 -04:00
const current_items = list_parent.querySelectorAll("li.media_item_edl_insert");
2024-09-16 15:33:46 -04:00
current_items.forEach((insertPoint) => {
2024-09-16 16:57:23 -04:00
edl_definition.inserts.push(insertPoint.getAttribute("data-timestamp"));
2024-09-16 15:38:22 -04:00
});
2024-09-17 08:50:41 -04:00
payload.edl_definition = JSON.stringify(edl_definition);
2024-09-17 10:27:56 -04:00
payload.edl_name = edl_name || "default"; // TODO: handle this better once we have multiple EDL support
if (edl_id) payload.edl_id = edl_id;
2024-09-17 11:02:01 -04:00
2024-09-16 16:24:06 -04:00
fetch(api_url, {
method: "POST",
2024-09-16 16:32:13 -04:00
body: JSON.stringify(payload)
2024-09-16 16:24:06 -04:00
})
.then((response) => {
if (response.ok) {
response.json().then((payload) => {
// TODO: repopulate based on returned data
2024-09-22 10:10:42 -04:00
fetch_media_items();
2024-09-16 16:24:06 -04:00
});
}
});
2024-09-16 15:33:46 -04:00
});
2024-09-03 10:37:30 -04:00
}
const jumpHandler = (e) => {
e.preventDefault();
const player = document.getElementById("media_item_preview");
if (!player.paused) player.pause();
player.currentTime = e.target.parentNode.getAttribute("data-timestamp");
}
const sort_inserts = () => {
const list_parent = document.querySelector("#media_item_edl_list");
let new_parent = list_parent.cloneNode(false);
const current_items = list_parent.querySelectorAll("li");
let items = [];
current_items.forEach((item) => {
items.push(item);
});
items.sort((a, b) => {
return a.querySelector("input[type='text']").value > b.querySelector("input[type='text']").value
});
items.forEach((item) => {
new_parent.appendChild(item);
});
list_parent.parentNode.replaceChild(new_parent, list_parent);
}
const fetch_tags = async () => {
const api_url = "tags.php";
fetch(api_url).then((response) => {
if (response.ok) {
response.json().then((tags) => {
const container = document.querySelector(".tags_list");
container.innerHTML = "";
for (var i = 0; i < tags.length ; i + + ) {
container.innerHTML += "< span class = 'tag' data-id = " + tags[i]['id'] + " > " + tags[i]['tag'] + "< / span > ";
}
tag_editor_handlers();
});
} else {
console.log('err fetching tags:');
console.dir(response);
}
});
}
const fetch_item_tags = async (media_id) => {
const api_url = "tags.php?media_id=" + media_id;
fetch(api_url).then((response) => {
if (response.ok) {
response.json().then((tags) => {
const container = document.querySelector("#media_item_editor_tags");
container.innerHTML = "";
for (var i = 0; i < tags.length ; i + + ) {
const enabled_class = tags[i]['enabled'] === 'true' ? 'enabled' : 'disabled';
const new_span = `< span class = 'tag ${enabled_class}' data-id = '${tags[i][' id ' ] } ' data-media-id = ${media_id} > ${tags[i]['tag']}< / span > `;
container.innerHTML += new_span;
}
item_tag_editor_handlers();
});
}
});
}
// tab handlers
document.getElementById("library_tab").addEventListener("click", (e) => {
setActiveTab(e);
const tab_content = document.getElementById("tab_content");
tab_content.innerHTML = "";
const template = document.getElementById("media_library_template");
const template_clone = template.content.cloneNode(true);
tab_content.appendChild(template_clone);
// fetch media and populate
fetch_media_items();
// attach event handlers
init_library();
});
document.getElementById("tags_tab").addEventListener("click", (e) => {
setActiveTab(e);
const tab_content = document.getElementById("tab_content");
tab_content.innerHTML = "";
const template = document.getElementById("tag_editor_template");
const template_clone = template.content.cloneNode(true);
tab_content.appendChild(template_clone);
fetch_tags();
});
2024-09-03 15:39:18 -04:00
document.getElementById("schedules_tab").addEventListener("click", (e) => {
setActiveTab(e);
const tab_content = document.querySelector("#tab_content");
tab_content.innerHTML = "";
const template = document.querySelector("#schedules_template");
2024-09-03 16:44:46 -04:00
const template_clone = template.content.cloneNode(true);
2024-09-03 15:39:18 -04:00
tab_content.appendChild(template_clone);
2024-09-03 16:46:40 -04:00
init_schedules();
2024-09-03 15:39:18 -04:00
});
2024-09-09 10:02:10 -04:00
const init_schedules = (day) => {
2024-09-09 11:51:24 -04:00
const day_of_schedule = day ? new Date(Date.parse(day)) : new Date();
2024-09-03 16:26:01 -04:00
2024-09-09 12:46:55 -04:00
// set up header
const current_day_indicator = document.querySelector("#current_day_indicator");
current_day_indicator.innerHTML = `< center > Schedule for < strong > ${day_of_schedule.toDateString()}< / strong > < / center > `;
current_day_indicator.setAttribute("data-day", day_of_schedule.toISOString());
// set up previous/next buttons
document.querySelector('#previous_day_button').addEventListener("click", previous_day_schedule);
document.querySelector('#next_day_button').addEventListener("click", next_day_schedule);
// init grid structure itself
const template = document.querySelector("#schedule_header_row_template");
const template_clone = template.content.cloneNode(true);
const grid = document.querySelector("#schedule_grid");
2024-09-09 15:12:57 -04:00
grid.innerHTML = ``;
2024-09-09 12:46:55 -04:00
grid.appendChild(template_clone);
for (var i = 0; i < 24 * 2 ; i + + ) {
const hour = Math.floor(i / 2);
const minutes = i % 2 === 0 ? 0 : 30;
const template = document.querySelector("#schedule_row_template");
const template_clone = template.content.cloneNode(true);
const grid = document.querySelector("#schedule_grid");
2024-09-09 13:06:06 -04:00
template_clone.firstElementChild.innerHTML = `< td class = "schedule_grid_time_cell" > < strong > ${hour.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}< / strong > < / td > < td class = "schedule_grid_program_cell" > < / td > `;
2024-09-09 12:46:55 -04:00
template_clone.firstElementChild.setAttribute('data-time', hour + ":" + minutes);
grid.appendChild(template_clone);
2024-09-03 16:26:01 -04:00
}
2024-09-10 09:29:59 -04:00
2024-09-16 15:33:46 -04:00
load_schedule(day_of_schedule);
2024-09-03 16:26:01 -04:00
}
2024-09-09 10:02:10 -04:00
const previous_day_schedule = (e) => {
2024-09-03 16:26:01 -04:00
e.preventDefault();
2024-09-09 12:02:53 -04:00
const day = new Date(Date.parse(document.querySelector("#current_day_indicator").getAttribute("data-day")));
2024-09-09 11:48:50 -04:00
day.setDate(day.getDate() - 1);
2024-09-09 10:28:55 -04:00
init_schedules(day);
2024-09-03 16:26:01 -04:00
}
2024-09-09 10:02:10 -04:00
const next_day_schedule = (e) => {
2024-09-03 16:26:01 -04:00
e.preventDefault();
2024-09-09 12:01:02 -04:00
const day = new Date(Date.parse(document.querySelector("#current_day_indicator").getAttribute("data-day")));
2024-09-09 11:48:50 -04:00
day.setDate(day.getDate() + 1);
2024-09-09 10:28:55 -04:00
init_schedules(day);
2024-09-03 15:39:18 -04:00
}
2024-09-16 15:33:46 -04:00
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
2024-09-22 11:18:22 -04:00
// add event handlers
const block_cells = document.querySelectorAll(".schedule_grid_program_cell");
block_cells.forEach((cell) => {
cell.addEventListener("click", schedule_grid_click_handler);
});
2024-09-16 15:33:46 -04:00
});
}
});
}
const schedule_grid_click_handler = (e) => {
e.preventDefault();
// TODO: open dialog for add block
2024-09-22 11:13:01 -04:00
const new_block_dialog = document.getElementById("new_block_dialog");
const new_block_header = document.getElementById("new_block_dialog_header");
const block_start_time = e.target.parentNode.firstElementChild.innerHTML;
new_block_header.innerHTML = "New program block for " + block_start_time;
const new_block_close_button = document.getElementById("new_block_dialog_close_button");
new_block_close_button.addEventListener("click", (event) => {
event.preventDefault();
new_block_dialog.close();
});
const new_block_save_button = document.getElementById("new_block_dialog_save_button");
new_block_save_button.addEventListener("click", (event) => {
event.preventDefault();
const updateURL = "block.php";
let data = new FormData(document.getElementById("new_block_dialog_form"));
console.dir(data);
fetch(updateURL, {
method: "POST",
body: data
})
.then((response) => {
if (response.ok) {
response.json().then((json) => {
new_block_dialog.close();
load_schedule(); // TODO: need to pass day here to keep working on the same schedule!
});
}
});
});
new_block_dialog.showModal();
2024-09-16 15:33:46 -04:00
}
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
}
2024-09-03 10:37:30 -04:00
const tag_editor_handlers = () => {
document.querySelector("#save_tag_button").addEventListener("click", (e) => {
e.preventDefault();
const api_url = "tags.php";
fetch(api_url, {
method: "POST",
body: new FormData(document.getElementById("add_tag_form"))
})
.then((response) => {
if (response.ok) {
response.json().then((row) => {
document.querySelector("#new_tag_input").value = "";
fetch_tags();
});
}
});
});
}
const item_tag_editor_handlers = () => {
const enabled_tags = document.querySelectorAll(".tag.enabled");
const disabled_tags = document.querySelectorAll(".tag.disabled");
enabled_tags.forEach((tag) => {
tag.addEventListener("click", (e) => {
e.preventDefault();
const tag_id = e.target.getAttribute("data-id");
const media_id = e.target.getAttribute("data-media-id");
const api_url = "tags.php?enable=false& media_id=" + media_id + "& tag_id=" + tag_id;
fetch(api_url).then((response) => {
if (response.ok) {
response.json().then((json) => {
if (json.ok) {
fetch_item_tags(media_id);
} else {
console.dir(json);
}
});
}
});
});
});
disabled_tags.forEach((tag) => {
tag.addEventListener("click", (e) => {
e.preventDefault();
const tag_id = e.target.getAttribute("data-id");
const media_id = e.target.getAttribute("data-media-id");
const api_url = "tags.php?enable=true& media_id=" + media_id + "& tag_id=" + tag_id;
fetch(api_url).then((response) => {
if (response.ok) {
response.json().then((json) => {
if (json.ok) {
fetch_item_tags(media_id);
} else {
console.dir(json);
}
});
}
});
});
});
}
document.getElementById("epg_tab").addEventListener("click", (e) => {
setActiveTab(e);
document.querySelector("#tab_content").innerHTML = "< h2 > EPG< / h2 > "
+ "< p > EPG goes here.< / p > ";
});
const setActiveTab = (e) => {
e.preventDefault();
document.querySelector(".active_tab").classList.remove("active_tab");
e.target.classList.add("active_tab");
}
const updateDate = () => {
document.getElementById("current_date").innerHTML = new Date().toDateString();
}
const updateTime = () => {
document.getElementById("current_time").innerHTML = new Date().toTimeString();
}
window.addEventListener("load", () => {
document.getElementById("library_tab").click();
updateDate();
updateTime();
const dateTimer = setInterval(updateDate, 1000 * 60);
const timeTimer = setInterval(updateTime, 1000);
window.addEventListener("dragenter", () => {
});
});
< / script >
< / body >
< / html >
