majomi/intro-skipper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

options: don't use type time (#305)

Browse Source
This commit is contained in:
Kilian von Pflugk 2024-10-06 12:13:30 +02:00 committed by GitHub
parent 486c9accf3
commit 960ce1ff82
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 120 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
ConfusedPolarBear.Plugin.IntroSkipper/Configuration/configPage.html
View File

@ -593,38 +593,60 @@
<div id="timestampEditor" style="display:none"> <div id="timestampEditor" style="display:none">
<h3 style="margin:0">Introduction timestamp editor</h3> <h3 style="margin:0">Introduction timestamp editor</h3>
<p style="margin:0">All times are displayed in the format (HH:MM:SS)</p>
<br /> <br />
<table class="detailTable"> <h4 style="margin:0" id="editLeftEpisodeTitle"></h4>
<tr> <br />
<th scope="col" class="detailTableHeaderCell">Episode</th> <div class="inlineForm">
<th scope="col" class="detailTableHeaderCell">Section</th> <div class="inputContainer">
<th scope="col" class="detailTableHeaderCell">Start Time</th> <label class="inputLabel inputLabelUnfocused" for="introStart">Intro Start</label>
<th scope="col" class="detailTableHeaderCell">End Time</th> <input type="text" id="editLeftIntroEpisodeStartDisplay" class="emby-input custom-time-input" readonly>
</tr> <input type="number" id="editLeftIntroEpisodeStartEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
<tr> </div>
<td rowspan="2" id="editLeftEpisodeTitle"></td> <div class="inputContainer">
<td>Intro</td> <label class="inputLabel inputLabelUnfocused" for="introEnd">Intro End</label>
<td><input type="time" step="1" id="editLeftIntroEpisodeStart"></td> <input type="text" id="editLeftIntroEpisodeEndDisplay" class="emby-input custom-time-input" readonly>
<td><input type="time" step="1" id="editLeftIntroEpisodeEnd"></td> <input type="number" id="editLeftIntroEpisodeEndEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
</tr> </div>
<tr> </div>
<td>Credits</td> <div class="inlineForm">
<td><input type="time" step="1" id="editLeftCreditEpisodeStart"></td> <div class="inputContainer">
<td><input type="time" step="1" id="editLeftCreditEpisodeEnd"></td> <label class="inputLabel inputLabelUnfocused" for="creditsStart">Credits Start</label>
</tr> <input type="text" id="editLeftCreditEpisodeStartDisplay" class="emby-input custom-time-input" readonly>
<tr> <input type="number" id="editLeftCreditEpisodeStartEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
<td rowspan="2" id="editRightEpisodeTitle"></td> </div>
<td>Intro</td> <div class="inputContainer">
<td><input type="time" step="1" id="editRightIntroEpisodeStart"></td> <label class="inputLabel inputLabelUnfocused" for="creditsEnd">Credits End</label>
<td><input type="time" step="1" id="editRightIntroEpisodeEnd"></td> <input type="text" id="editLeftCreditEpisodeEndDisplay" class="emby-input custom-time-input" readonly>
</tr> <input type="number" id="editLeftCreditEpisodeEndEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
<tr> </div>
<td>Credits</td> </div>
<td><input type="time" step="1" id="editRightCreditEpisodeStart"></td> <br />
<td><input type="time" step="1" id="editRightCreditEpisodeEnd"></td> <h4 style="margin:0" id="editRightEpisodeTitle"></h4>
</tr> <br />
</table> <div class="inlineForm">
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="introStart">Intro Start</label>
<input type="text" id="editRightIntroEpisodeStartDisplay" class="emby-input custom-time-input" readonly>
<input type="number" id="editRightIntroEpisodeStartEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="introEnd">Intro End</label>
<input type="text" id="editRightIntroEpisodeEndDisplay" class="emby-input custom-time-input" readonly>
<input type="number" id="editRightIntroEpisodeEndEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
</div>
</div>
<div class="inlineForm">
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="creditsStart">Credits Start</label>
<input type="text" id="editRightCreditEpisodeStartDisplay" class="emby-input custom-time-input" readonly>
<input type="number" id="editRightCreditEpisodeStartEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="creditsEnd">Credits End</label>
<input type="text" id="editRightCreditEpisodeEndDisplay" class="emby-input custom-time-input" readonly>
<input type="number" id="editRightCreditEpisodeEndEdit" class="emby-input custom-time-input" style="display: none;" step="any" min="0">
</div>
</div>
<br /> <br />
<button is="emby-select" id="btnUpdateTimestamps" class="raised button-submit block emby-button" type="button"> <button is="emby-select" id="btnUpdateTimestamps" class="raised button-submit block emby-button" type="button">
Update timestamps Update timestamps
@ -1149,6 +1171,45 @@
updateTimestampEditor(); updateTimestampEditor();
} }
function setupTimeInputs() {
const timestampEditor = document.getElementById('timestampEditor');
timestampEditor.querySelectorAll('.inputContainer').forEach(container => {
const displayInput = container.querySelector('[id$="Display"]');
const editInput = container.querySelector('[id$="Edit"]');
displayInput.addEventListener('pointerdown', e => {
e.preventDefault();
switchToEdit(displayInput, editInput);
});
editInput.addEventListener('blur', () =>
switchToDisplay(displayInput, editInput)
);
displayInput.value = formatTime(parseFloat(editInput.value) || 0);
});
}
function switchToEdit(displayInput, editInput) {
displayInput.style.display = 'none';
editInput.style.display = '';
editInput.focus();
}
function switchToDisplay(displayInput, editInput) {
editInput.style.display = 'none';
displayInput.style.display = '';
displayInput.value = formatTime(parseFloat(editInput.value) || 0);
}
function formatTime(totalSeconds) {
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = Math.floor(totalSeconds % 60);
let result = [];
if (hours > 0) result.push(hours + ' hour' + (hours !== 1 ? 's' : ''));
if (minutes > 0) result.push(minutes + ' minute' + (minutes !== 1 ? 's' : ''));
if (seconds > 0 || result.length === 0) result.push(seconds + ' second' + (seconds !== 1 ? 's' : ''));
return result.join(' ');
}
// updates the timestamp editor // updates the timestamp editor
async function updateTimestampEditor() { async function updateTimestampEditor() {
// Get the title and ID of the left and right episodes // Get the title and ID of the left and right episodes
@ -1161,16 +1222,25 @@
// Update the editor for the first and second episodes // Update the editor for the first and second episodes
timestampEditor.style.display = "unset"; timestampEditor.style.display = "unset";
document.querySelector("#editLeftEpisodeTitle").textContent = leftEpisode.text; document.querySelector("#editLeftEpisodeTitle").textContent = leftEpisode.text;
document.querySelector("#editLeftIntroEpisodeStart").value = setTime(Math.round(leftEpisodeJson.Introduction.Start)); document.querySelector("#editLeftIntroEpisodeStartEdit").value = leftEpisodeJson.Introduction.Start;
document.querySelector("#editLeftIntroEpisodeEnd").value = setTime(Math.round(leftEpisodeJson.Introduction.End)); document.querySelector("#editLeftIntroEpisodeEndEdit").value = leftEpisodeJson.Introduction.End;
document.querySelector("#editLeftCreditEpisodeStart").value = setTime(Math.round(leftEpisodeJson.Credits.Start)); document.querySelector("#editLeftCreditEpisodeStartEdit").value = leftEpisodeJson.Credits.Start;
document.querySelector("#editLeftCreditEpisodeEnd").value = setTime(Math.round(leftEpisodeJson.Credits.End)); document.querySelector("#editLeftCreditEpisodeEndEdit").value = leftEpisodeJson.Credits.End;
document.querySelector("#editRightEpisodeTitle").textContent = rightEpisode.text; document.querySelector("#editRightEpisodeTitle").textContent = rightEpisode.text;
document.querySelector("#editRightIntroEpisodeStart").value = setTime(Math.round(rightEpisodeJson.Introduction.Start)); document.querySelector("#editRightIntroEpisodeStartEdit").value = rightEpisodeJson.Introduction.Start;
document.querySelector("#editRightIntroEpisodeEnd").value = setTime(Math.round(rightEpisodeJson.Introduction.End)); document.querySelector("#editRightIntroEpisodeEndEdit").value = rightEpisodeJson.Introduction.End;
document.querySelector("#editRightCreditEpisodeStart").value = setTime(Math.round(rightEpisodeJson.Credits.Start)); document.querySelector("#editRightCreditEpisodeStartEdit").value = rightEpisodeJson.Credits.Start;
document.querySelector("#editRightCreditEpisodeEnd").value = setTime(Math.round(rightEpisodeJson.Credits.End)); document.querySelector("#editRightCreditEpisodeEndEdit").value = rightEpisodeJson.Credits.End;
// Update display inputs
const inputs = document.querySelectorAll('#timestampEditor input[type="number"]');
inputs.forEach(input => {
const displayInput = document.getElementById(input.id.replace('Edit', 'Display'));
displayInput.value = formatTime(parseFloat(input.value) || 0);
});
setupTimeInputs();
} }
// adds an item to a dropdown // adds an item to a dropdown
@ -1441,29 +1511,32 @@
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });
btnUpdateTimestamps.addEventListener("click", () => { btnUpdateTimestamps.addEventListener("click", () => {
const getEditValue = (id) => parseFloat(document.getElementById(id).value) || 0;
const lhsId = selectEpisode1.options[selectEpisode1.selectedIndex].value; const lhsId = selectEpisode1.options[selectEpisode1.selectedIndex].value;
const newLhs = { const newLhs = {
Introduction: { Introduction: {
Start: getTimeInSeconds(document.getElementById('editLeftIntroEpisodeStart').value), Start: getEditValue('editLeftIntroEpisodeStartEdit'),
End: getTimeInSeconds(document.getElementById('editLeftIntroEpisodeEnd').value) End: getEditValue('editLeftIntroEpisodeEndEdit')
}, },
Credits: { Credits: {
Start: getTimeInSeconds(document.getElementById('editLeftCreditEpisodeStart').value), Start: getEditValue('editLeftCreditEpisodeStartEdit'),
End: getTimeInSeconds(document.getElementById('editLeftCreditEpisodeEnd').value) End: getEditValue('editLeftCreditEpisodeEndEdit')
} }
}; };
const rhsId = selectEpisode2.options[selectEpisode2.selectedIndex].value; const rhsId = selectEpisode2.options[selectEpisode2.selectedIndex].value;
const newRhs = { const newRhs = {
Introduction: { Introduction: {
Start: getTimeInSeconds(document.getElementById('editRightIntroEpisodeStart').value), Start: getEditValue('editRightIntroEpisodeStartEdit'),
End: getTimeInSeconds(document.getElementById('editRightIntroEpisodeEnd').value) End: getEditValue('editRightIntroEpisodeEndEdit')
}, },
Credits: { Credits: {
Start: getTimeInSeconds(document.getElementById('editRightCreditEpisodeStart').value), Start: getEditValue('editRightCreditEpisodeStartEdit'),
End: getTimeInSeconds(document.getElementById('editRightCreditEpisodeEnd').value) End: getEditValue('editRightCreditEpisodeEndEdit')
} }
}; };
fetchWithAuth("Episode/" + lhsId + "/Timestamps", "POST", JSON.stringify(newLhs)); fetchWithAuth("Episode/" + lhsId + "/Timestamps", "POST", JSON.stringify(newLhs));
fetchWithAuth("Episode/" + rhsId + "/Timestamps", "POST", JSON.stringify(newRhs)); fetchWithAuth("Episode/" + rhsId + "/Timestamps", "POST", JSON.stringify(newRhs));