henine
/
wubloader
mirror of https://github.com/ekimekim/wubloader
1
0
Fork 0
Code Issues Releases Wiki Activity

Run Prettier on all the files

Browse Source
pull/235/head
ElementalAlchemist 3 years ago committed by Mike Lang
parent 42d2db5f50
commit 00ba7d5293
7 changed files with 277 additions and 110 deletions
Show Stats Download Patch File Download Diff File

89
thrimbletrimmer/beta/edit.html
Unescape Escape View File

@ -13,7 +13,10 @@
<script src="scripts/keyboard-shortcuts.js"></script>
<!-- TODO: Change client ID back to main wubloader one -->
<meta name="google-signin-client_id" content="769576855778-phhnmkk2k8h6m1b1sb964ulrq0ulgesm.apps.googleusercontent.com">
<meta
name="google-signin-client_id"
content="769576855778-phhnmkk2k8h6m1b1sb964ulrq0ulgesm.apps.googleusercontent.com"
/>
<script src="https://apis.google.com/js/platform.js?onload=onGLoad" async defer></script>
</head>
<body>
@ -35,7 +38,7 @@
<video id="video" class="video-js" controls preload="auto"></video>
<div id="clip-bar"></div>
<img id="waveform" alt="Waveform for the video">
<img id="waveform" alt="Waveform for the video" />
<div id="editor-help">
<a href="#" id="editor-help-link">Help</a>
@ -52,35 +55,63 @@
<li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li>
<li>Left bracket ([): Set start point for current range (indicated by arrow) to current video time</li>
<li>
Left bracket ([): Set start point for current range (indicated by arrow) to current
video time
</li>
<li>Right bracket (]): Send end point for current range to current video time</li>
<li>O: Switch the current range up one</li>
<li>P: Switch the current range down one, adding a new range if the current range was the last one</li>
<li>
P: Switch the current range down one, adding a new range if the current range was the
last one
</li>
</ul>
<h2>Transition Types</h2>
<p>A visual explanation of the different transition types can be found <a href="https://trac.ffmpeg.org/wiki/Xfade">on the FFMpeg website</a>.</p>
<p>
A visual explanation of the different transition types can be found
<a href="https://trac.ffmpeg.org/wiki/Xfade">on the FFMpeg website</a>.
</p>
</div>
</div>
<div id="range-definitions">
<div class="range-definition-times">
<input type="text" class="range-definition-start">
<img src="images/pencil.png" alt="Set range start point to current video time" class="range-definition-set-start click">
<input type="text" class="range-definition-start" />
<img
src="images/pencil.png"
alt="Set range start point to current video time"
class="range-definition-set-start click"
/>
<div class="range-definition-between-time-gap"></div>
<input type="text" class="range-definition-end">
<img src="images/pencil.png" alt="Set range end point to current video time" class="range-definition-set-end click">
<input type="text" class="range-definition-end" />
<img
src="images/pencil.png"
alt="Set range end point to current video time"
class="range-definition-set-end click"
/>
<div class="range-definition-icon-gap"></div>
<img src="images/arrow.png" alt="Range affected by keyboard shortcuts" title="Range affected by keyboard shortcuts" class="range-definition-current">
</div>
</div>
<img src="images/plus.png" alt="Add range" id="add-range-definition" class="click" tabindex=0>
<img
src="images/arrow.png"
alt="Range affected by keyboard shortcuts"
title="Range affected by keyboard shortcuts"
class="range-definition-current"
/>
</div>
</div>
<img
src="images/plus.png"
alt="Add range"
id="add-range-definition"
class="click"
tabindex="0"
/>
<div id="video-info">
<div>
<label for="video-info-title">Title:</label>
<div id="video-info-title-full">
<span id="video-info-title-prefix"></span>
<input type="text" id="video-info-title">
<input type="text" id="video-info-title" />
</div>
</div>
<div id="video-info-description-entry">
@ -89,7 +120,7 @@
</div>
<div>
<label for="video-info-tags">Tags (comma-separated):</label>
<input type="text" id="video-info-tags">
<input type="text" id="video-info-tags" />
</div>
<div id="video-info-editor-notes-container" class="hidden">
<div id="video-info-editor-notes-header">Editor Notes:</div>
@ -106,7 +137,7 @@
<div id="advanced-submission-options" class="hidden">
<div>
<label for="advanced-submission-option-allow-holes">Allow holes</label>
<input type="checkbox" id="advanced-submission-option-allow-holes">
<input type="checkbox" id="advanced-submission-option-allow-holes" />
</div>
<div>
@ -116,7 +147,7 @@
<div>
<label for="advanced-submission-option-uploader-allow">Uploader allowlist:</label>
<input type="text" id="advanced-submission-option-uploader-allow">
<input type="text" id="advanced-submission-option-uploader-allow" />
</div>
</div>
<div id="submission-response"></div>
@ -141,17 +172,29 @@
<a id="reset-entire-video" href="#">Force Reset Row</a>
</div>
<div id="data-correction-manual-link" class="hidden">
<input type="text" id="data-correction-manual-link-entry">
<label for="data-correction-manual-link-youtube">Is YouTube upload (add to playlists)?</label>
<input type="checkbox" id="data-correction-manual-link-youtube">
<input type="text" id="data-correction-manual-link-entry" />
<label for="data-correction-manual-link-youtube"
>Is YouTube upload (add to playlists)?</label
>
<input type="checkbox" id="data-correction-manual-link-youtube" />
<button id="data-correction-manual-link-submit">Set Link</button>
<div id="data-correction-manual-link-response"></div>
</div>
<div id="data-correction-force-reset-confirm" class="hidden">
<p>Are you sure you want to reset this event?</p>
<p>This will set the row back to Unedited and forget about any video that may already exist.</p>
<p>This is intended as a last-ditch effort to clear a malfunctioning cutter, or if a video needs to be reedited and replaced.</p>
<p><strong>It is your responsibility to deal with any video that may have already been uploaded.</strong></p>
<p>
This will set the row back to Unedited and forget about any video that may already exist.
</p>
<p>
This is intended as a last-ditch effort to clear a malfunctioning cutter, or if a video
needs to be reedited and replaced.
</p>
<p>
<strong
>It is your responsibility to deal with any video that may have already been
uploaded.</strong
>
</p>
<p>
<button id="data-correction-force-reset-yes">Yes, reset it!</button>
<button id="data-correction-force-reset-no">Oh, never mind!</button>

22
thrimbletrimmer/beta/index.html
Unescape Escape View File

@ -29,11 +29,27 @@
</div>
<div>
<div id="stream-time-frame-of-reference">
<input type="radio" name="time-frame-of-reference" id="stream-time-frame-of-reference-utc" value="1" />
<input
type="radio"
name="time-frame-of-reference"
id="stream-time-frame-of-reference-utc"
value="1"
/>
<label for="stream-time-frame-of-reference-utc">UTC</label>
<input type="radio" name="time-frame-of-reference" id="stream-time-frame-of-reference-bus" value="2" />
<input
type="radio"
name="time-frame-of-reference"
id="stream-time-frame-of-reference-bus"
value="2"
/>
<label for="stream-time-frame-of-reference-bus">Bus Time</label>
<input type="radio" name="time-frame-of-reference" id="stream-time-frame-of-reference-ago" value="3" checked />
<input
type="radio"
name="time-frame-of-reference"
id="stream-time-frame-of-reference-ago"
value="3"
checked
/>
<label for="stream-time-frame-of-reference-ago">Time Ago</label>
</div>
</div>

13
thrimbletrimmer/beta/scripts/common.js
Unescape Escape View File

@ -57,9 +57,9 @@ async function loadVideoPlayer(playlistURL) {
controlBar: {
fullscreenToggle: true,
volumePanel: {
inline: false
}
}
inline: false,
},
},
};
const player = videojs("video", defaultOptions);
@ -137,7 +137,12 @@ function generateDownloadURL(startTime, endTime, downloadType, allowHoles, quali
const startURLTime = getWubloaderTimeFromDate(startTime);
const endURLTime = getWubloaderTimeFromDate(endTime);
const queryParts = [`start=${startURLTime}`, `end=${endURLTime}`, `type=${downloadType}`, `allow_holes=${allowHoles}`];
const queryParts = [
`start=${startURLTime}`,
`end=${endURLTime}`,
`type=${downloadType}`,
`allow_holes=${allowHoles}`,
];
const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`;
return downloadURL;

205
thrimbletrimmer/beta/scripts/edit.js
Unescape Escape View File

@ -9,7 +9,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
updateDownloadLink();
const addRangeIcon = document.getElementById("add-range-definition");
addRangeIcon.addEventListener("click", (_event) => { addRangeDefinition(); });
addRangeIcon.addEventListener("click", (_event) => {
addRangeDefinition();
});
addRangeIcon.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
addRangeDefinition();
@ -23,42 +25,70 @@ window.addEventListener("DOMContentLoaded", async (event) => {
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
}
for (const rangeStart of document.getElementsByClassName("range-definition-start")) {
rangeStart.addEventListener("change", (_event) => { rangeDataUpdated(); });
rangeStart.addEventListener("change", (_event) => {
rangeDataUpdated();
});
}
for (const rangeEnd of document.getElementsByClassName("range-definition-end")) {
rangeEnd.addEventListener("change", (_event) => { rangeDataUpdated(); });
rangeEnd.addEventListener("change", (_event) => {
rangeDataUpdated();
});
}
document.getElementById("submit-button").addEventListener("click", (_event) => { submitVideo(); });
document.getElementById("save-button").addEventListener("click", (_event) => { saveVideoDraft(); });
document.getElementById("submit-button").addEventListener("click", (_event) => {
submitVideo();
});
document.getElementById("save-button").addEventListener("click", (_event) => {
saveVideoDraft();
});
document.getElementById("advanced-submission").addEventListener("click", (_event) => {
const advancedOptionsContainer = document.getElementById("advanced-submission-options");
advancedOptionsContainer.classList.toggle("hidden");
});
document.getElementById("advanced-submission-option-allow-holes").addEventListener("change", () => { updateDownloadLink(); });
document.getElementById("download-type-select").addEventListener("change", () => { updateDownloadLink(); });
document
.getElementById("advanced-submission-option-allow-holes")
.addEventListener("change", () => {
updateDownloadLink();
});
document.getElementById("download-type-select").addEventListener("change", () => {
updateDownloadLink();
});
document.getElementById("manual-link-update").addEventListener("click", (_event) => {
const manualLinkDataContainer = document.getElementById("data-correction-manual-link");
manualLinkDataContainer.classList.toggle("hidden");
});
document.getElementById("data-correction-manual-link-submit").addEventListener("click", (_event) => { setManualVideoLink(); });
document
.getElementById("data-correction-manual-link-submit")
.addEventListener("click", (_event) => {
setManualVideoLink();
});
document.getElementById("cancel-video-upload").addEventListener("click", (_event) => { cancelVideoUpload(); });
document.getElementById("cancel-video-upload").addEventListener("click", (_event) => {
cancelVideoUpload();
});
document.getElementById("reset-entire-video").addEventListener("click", (_event) => {
const forceResetConfirmationContainer = document.getElementById("data-correction-force-reset-confirm");
const forceResetConfirmationContainer = document.getElementById(
"data-correction-force-reset-confirm"
);
forceResetConfirmationContainer.classList.remove("hidden");
});
document.getElementById("data-correction-force-reset-yes").addEventListener("click", (_event) => { resetVideoRow(); });
document.getElementById("data-correction-force-reset-yes").addEventListener("click", (_event) => {
resetVideoRow();
});
document.getElementById("data-correction-force-reset-no").addEventListener("click", (_event) => {
const forceResetConfirmationContainer = document.getElementById("data-correction-force-reset-confirm");
const forceResetConfirmationContainer = document.getElementById(
"data-correction-force-reset-confirm"
);
forceResetConfirmationContainer.classList.add("hidden");
});
document.getElementById("google-auth-sign-out").addEventListener("click", (_event) => { googleSignOut(); });
document.getElementById("google-auth-sign-out").addEventListener("click", (_event) => {
googleSignOut();
});
});
async function loadVideoInfo() {
@ -70,7 +100,9 @@ async function loadVideoInfo() {
const videoID = queryParams.get("id");
const dataResponse = await fetch("/thrimshim/" + videoID);
if (!dataResponse.ok) {
addError("Failed to load video data. This probably means that the URL is out of date (video ID changed) or that everything is broken (or that the Wubloader host is down).");
addError(
"Failed to load video data. This probably means that the URL is out of date (video ID changed) or that everything is broken (or that the Wubloader host is down)."
);
return;
}
videoInfo = await dataResponse.json();
@ -84,8 +116,10 @@ async function initializeVideoInfo() {
globalBusStartTime = new Date(videoInfo.bustime_start);
document.getElementById("stream-time-setting-stream").innerText = globalStreamName;
document.getElementById("stream-time-setting-start").innerText = getBusTimeFromTimeString(globalStartTimeString);
document.getElementById("stream-time-setting-end").innerText = getBusTimeFromTimeString(globalEndTimeString);
document.getElementById("stream-time-setting-start").innerText =
getBusTimeFromTimeString(globalStartTimeString);
document.getElementById("stream-time-setting-end").innerText =
getBusTimeFromTimeString(globalEndTimeString);
updateWaveform();
@ -128,7 +162,9 @@ async function initializeVideoInfo() {
modifiedAdvancedOptions = true;
}
const uploadLocationSelection = document.getElementById("advanced-submission-option-upload-location");
const uploadLocationSelection = document.getElementById(
"advanced-submission-option-upload-location"
);
for (locationName of videoInfo.upload_locations) {
const option = document.createElement("option");
option.value = locationName;
@ -144,7 +180,9 @@ async function initializeVideoInfo() {
if (videoInfo.uploader_whitelist) {
modifiedAdvancedOptions = true;
const uploaderAllowlistBox = document.getElementById("advanced-submission-option-uploader-allow");
const uploaderAllowlistBox = document.getElementById(
"advanced-submission-option-uploader-allow"
);
uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(",");
}
@ -160,10 +198,16 @@ async function initializeVideoInfo() {
// For now, there's only one range in the data we receive from thrimshim, so we'll populate that as-is here.
// This will need to be updated when thrimshim supports multiple video ranges.
const rangeDefinitionsContainer = document.getElementById("range-definitions");
const rangeDefinitionStart = rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0];
const rangeDefinitionEnd = rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0];
rangeDefinitionStart.addEventListener("change", (_event) => { rangeDataUpdated(); });
rangeDefinitionEnd.addEventListener("change", (_event) => { rangeDataUpdated(); });
const rangeDefinitionStart =
rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0];
const rangeDefinitionEnd =
rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0];
rangeDefinitionStart.addEventListener("change", (_event) => {
rangeDataUpdated();
});
rangeDefinitionEnd.addEventListener("change", (_event) => {
rangeDataUpdated();
});
if (videoInfo.video_start) {
rangeDefinitionStart.value = videoHumanTimeFromWubloaderTime(videoInfo.video_start);
}
@ -283,7 +327,9 @@ async function sendVideoData(edited, overrideChanges) {
}
let transitionType = rangeContainer.getElementsByClassName("range-definition-transition-type");
let transitionDuration = rangeContainer.getElementsByClassName("range-definition-transition-duration");
let transitionDuration = rangeContainer.getElementsByClassName(
"range-definition-transition-duration"
);
if (transitionType.length > 0 && transitionDuration.length > 0) {
transitionType = transitionType[0].value;
transitionDuration = transitionDuration[0].value;
@ -302,7 +348,7 @@ async function sendVideoData(edited, overrideChanges) {
start: rangeStartSubmit,
end: rangeEndSubmit,
transition: transitionType,
duration: transitionDuration
duration: transitionDuration,
});
}
@ -313,10 +359,14 @@ async function sendVideoData(edited, overrideChanges) {
const videoDescription = document.getElementById("video-info-description").value;
const videoTags = document.getElementById("video-info-tags").value.split(",");
const allowHoles = document.getElementById("advanced-submission-option-allow-holes").checked;
const uploadLocation = document.getElementById("advanced-submission-option-upload-location").value;
const uploaderAllowlistValue = document.getElementById("advanced-submission-option-uploader-allow").value;
const uploaderAllowlist = (uploaderAllowlistValue) ? uploaderAllowlistValue.split(",") : null;
const state = (edited) ? "EDITED" : "UNEDITED";
const uploadLocation = document.getElementById(
"advanced-submission-option-upload-location"
).value;
const uploaderAllowlistValue = document.getElementById(
"advanced-submission-option-uploader-allow"
).value;
const uploaderAllowlist = uploaderAllowlistValue ? uploaderAllowlistValue.split(",") : null;
const state = edited ? "EDITED" : "UNEDITED";
const editData = {
video_start: videoStart,
@ -338,7 +388,7 @@ async function sendVideoData(edited, overrideChanges) {
category: videoInfo.category,
description: videoInfo.description,
notes: videoInfo.notes,
tags: videoInfo.tags
tags: videoInfo.tags,
};
if (googleUser) {
editData.token = googleUser.getAuthResponse().id_token;
@ -351,9 +401,9 @@ async function sendVideoData(edited, overrideChanges) {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify(editData)
body: JSON.stringify(editData),
});
if (submitResponse.ok) {
@ -369,12 +419,16 @@ async function sendVideoData(edited, overrideChanges) {
const serverErrorNode = document.createTextNode(await submitResponse.text());
const submitButton = document.createElement("button");
submitButton.text = "Submit Anyway";
submitButton.addEventListener("click", (_event) => { sendVideoData(edited, true); });
submitButton.addEventListener("click", (_event) => {
sendVideoData(edited, true);
});
submissionResponseElem.innerHTML = "";
submissionResponseElem.appendChild(serverErrorNode);
submissionResponseElem.appendChild(submitButton);
} else {
submissionResponseElem.innerText = `${submitResponse.statusText}: ${await submitResponse.text()}`;
submissionResponseElem.innerText = `${
submitResponse.statusText
}: ${await submitResponse.text()}`;
}
}
}
@ -384,13 +438,23 @@ function updateDownloadLink() {
const firstRangeStartField = document.getElementsByClassName("range-definition-start")[0];
const firstRangeEndField = document.getElementsByClassName("range-definition-end")[0];
const startTime = (firstRangeStartField.value) ? wubloaderTimeFromVideoHumanTime(firstRangeStartField.value) : getStartTime();
const endTime = (firstRangeEndField.value) ? wubloaderTimeFromVideoHumanTime(firstRangeEndField.value) : getEndTime();
const startTime = firstRangeStartField.value
? wubloaderTimeFromVideoHumanTime(firstRangeStartField.value)
: getStartTime();
const endTime = firstRangeEndField.value
? wubloaderTimeFromVideoHumanTime(firstRangeEndField.value)
: getEndTime();
const downloadType = document.getElementById("download-type-select").value;
const allowHoles = document.getElementById("advanced-submission-option-allow-holes").checked;
const downloadURL = generateDownloadURL(startTime, endTime, downloadType, allowHoles, videoInfo.video_quality);
const downloadURL = generateDownloadURL(
startTime,
endTime,
downloadType,
allowHoles,
videoInfo.video_quality
);
document.getElementById("download-link").href = downloadURL;
}
@ -406,7 +470,7 @@ async function setManualVideoLink() {
const request = {
link: link,
upload_location: uploadLocation
upload_location: uploadLocation,
};
if (googleUser) {
request.token = googleUser.getAuthResponse().id_token;
@ -419,9 +483,9 @@ async function setManualVideoLink() {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify(request)
body: JSON.stringify(request),
});
if (response.ok) {
@ -444,14 +508,16 @@ async function cancelVideoUpload() {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify(request)
body: JSON.stringify(request),
});
if (response.ok) {
responseElem.innerText = "Row has been cancelled. Reloading...";
setTimeout(() => { window.location.reload(); }, 1000);
setTimeout(() => {
window.location.reload();
}, 1000);
} else {
responseElem.innerText = `${response.statusText}: ${await response.text()}`;
}
@ -470,14 +536,16 @@ async function resetVideoRow() {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
"Content-Type": "application/json",
},
body: JSON.stringify(request)
body: JSON.stringify(request),
});
if (response.ok) {
responseElem.innerText = "Row has been reset. Reloading...";
setTimeout(() => { window.location.reload(); }, 1000);
setTimeout(() => {
window.location.reload();
}, 1000);
} else {
responseElem.innerText = `${response.statusText}: ${await response.text()}`;
}
@ -532,7 +600,7 @@ const RANGE_TRANSITION_TYPES = [
"wipebl",
"wipebr",
"squeezeh",
"squeezev"
"squeezev",
];
function rangeDefinitionDOM() {
@ -554,7 +622,9 @@ function rangeDefinitionDOM() {
transitionOption.innerText = transitionType;
transitionSelection.appendChild(transitionOption);
}
transitionSelection.addEventListener("change", (_event) => { rangeDataUpdated(); });
transitionSelection.addEventListener("change", (_event) => {
rangeDataUpdated();
});
transitionContainer.appendChild(transitionSelection);
const transitionDurationInput = document.createElement("input");
@ -574,7 +644,7 @@ function rangeDefinitionDOM() {
rangeStart.classList.add("range-definition-start");
const rangeStartSet = document.createElement("img");
rangeStartSet.src = "images/pencil.png";
rangeStartSet.alt = "Set range start point to current video time"
rangeStartSet.alt = "Set range start point to current video time";
rangeStartSet.classList.add("range-definition-set-start");
rangeStartSet.classList.add("click");
const rangeEnd = document.createElement("input");
@ -604,7 +674,8 @@ function rangeDefinitionDOM() {
const rangeParent = rangeContainer.parentNode;
for (let rangeNum = 0; rangeNum < rangeParent.children.length; rangeNum++) {
if (rangeContainer === rangeParent.children[rangeNum]) {
if (rangeNum + 1 <= currentRange) { // currentRange is 1-indexed to index into DOM with querySelector
if (rangeNum + 1 <= currentRange) {
// currentRange is 1-indexed to index into DOM with querySelector
currentRange--;
break;
}
@ -636,9 +707,11 @@ function rangeDefinitionDOM() {
}
function getRangeSetClickHandler(startOrEnd) {
return function(event) {
return function (event) {
const setButton = event.currentTarget;
const setField = setButton.parentElement.getElementsByClassName(`range-definition-${startOrEnd}`)[0];
const setField = setButton.parentElement.getElementsByClassName(
`range-definition-${startOrEnd}`
)[0];
const player = getVideoJS();
const videoPlayerTime = player.currentTime();
@ -668,7 +741,9 @@ function updateCurrentRangeIndicator() {
for (let arrowElem of document.getElementsByClassName("range-definition-current")) {
arrowElem.classList.add("hidden");
}
document.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-current`).classList.remove("hidden");
document
.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-current`)
.classList.remove("hidden");
}
function rangeDataUpdated() {
@ -688,8 +763,8 @@ function rangeDataUpdated() {
continue;
}
const rangeStartPercentage = rangeStart / videoDuration * 100;
const rangeEndPercentage = rangeEnd / videoDuration * 100;
const rangeStartPercentage = (rangeStart / videoDuration) * 100;
const rangeEndPercentage = (rangeEnd / videoDuration) * 100;
const widthPercentage = rangeEndPercentage - rangeStartPercentage;
const marker = document.createElement("div");
@ -701,14 +776,18 @@ function rangeDataUpdated() {
}
function setCurrentRangeStartToVideoTime() {
const rangeStartField = document.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-start`);
const rangeStartField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-start`
);
const player = getVideoJS();
rangeStartField.value = videoHumanTimeFromVideoPlayerTime(player.currentTime());
rangeDataUpdated();
}
function setCurrentRangeEndToVideoTime() {
const rangeEndField = document.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-end`);
const rangeEndField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-end`
);
const player = getVideoJS();
rangeEndField.value = videoHumanTimeFromVideoPlayerTime(player.currentTime());
rangeDataUpdated();
@ -720,7 +799,11 @@ function videoPlayerTimeFromWubloaderTime(wubloaderTime) {
let highestDiscontinuitySegmentBefore = 0;
for (start of videoPlaylist.discontinuityStarts) {
const discontinuityStartSegment = videoPlaylist.segments[start];
if (discontinuityStartSegment.dateTimeObject < wubloaderDateObj && discontinuityStartSegment.dateTimeObject > videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject) {
if (
discontinuityStartSegment.dateTimeObject < wubloaderDateObj &&
discontinuityStartSegment.dateTimeObject >
videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject
) {
highestDiscontinuitySegmentBefore = start;
}
}
@ -729,7 +812,13 @@ function videoPlayerTimeFromWubloaderTime(wubloaderTime) {
for (let segment = 0; segment < highestDiscontinuitySegmentBefore; segment++) {
highestDiscontinuitySegmentStart += videoPlaylist.segments[segment].duration;
}
return highestDiscontinuitySegmentStart + secondsDifference(videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject, wubloaderDateObj);
return (
highestDiscontinuitySegmentStart +
secondsDifference(
videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject,
wubloaderDateObj
)
);
}
function wubloaderTimeFromVideoPlayerTime(videoPlayerTime) {

4
thrimbletrimmer/beta/scripts/keyboard-shortcuts.js
Unescape Escape View File

@ -77,10 +77,10 @@ document.addEventListener("keypress", (event) => {
player.currentTime(player.currentTime() + 5);
break;
case ",":
player.currentTime(player.currentTime() - (1 / VIDEO_FRAMES_PER_SECOND));
player.currentTime(player.currentTime() - 1 / VIDEO_FRAMES_PER_SECOND);
break;
case ".":
player.currentTime(player.currentTime() + (1 / VIDEO_FRAMES_PER_SECOND));
player.currentTime(player.currentTime() + 1 / VIDEO_FRAMES_PER_SECOND);
break;
case "=":
increaseSpeed(player);

24
thrimbletrimmer/beta/scripts/stream.js
Unescape Escape View File

@ -19,7 +19,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
async function loadDefaults() {
const defaultDataResponse = await fetch("/thrimshim/defaults");
if (!defaultDataResponse.ok) {
addError("Failed to load Thrimbletrimmer data. This probably means that everything is broken (or, possibly, just that the Wubloader host is down). Please sound the alarm.");
addError(
"Failed to load Thrimbletrimmer data. This probably means that everything is broken (or, possibly, just that the Wubloader host is down). Please sound the alarm."
);
return;
}
const defaultData = await defaultDataResponse.json();
@ -36,9 +38,13 @@ function getStartTime() {
case 1:
return new Date(globalStartTimeString + "Z");
case 2:
return new Date(globalBusStartTime.getTime() + (1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString)));
return new Date(
globalBusStartTime.getTime() + 1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString)
);
case 3:
return new Date(new Date().getTime() - (1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString)));
return new Date(
new Date().getTime() - 1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString)
);
}
}
@ -51,9 +57,13 @@ function getEndTime() {
case 1:
return new Date(globalEndTimeString + "Z");
case 2:
return new Date(globalBusStartTime.getTime() + (1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString)));
return new Date(
globalBusStartTime.getTime() + 1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString)
);
case 3:
return new Date(new Date().getTime() - (1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString)));
return new Date(
new Date().getTime() - 1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString)
);
}
}
@ -69,7 +79,9 @@ function updateTimeSettings() {
updateDownloadLink();
if (getEndTime() < getStartTime()) {
addError("End time is before the start time. This will prevent video loading and cause other problems.");
addError(
"End time is before the start time. This will prevent video loading and cause other problems."
);
}
}

6
thrimbletrimmer/beta/styles/thrimbletrimmer.css
Unescape Escape View File

@ -1,4 +1,5 @@
a, .click {
a,
.click {
cursor: pointer;
}
@ -118,7 +119,8 @@ a, .click {
gap: 4px;
}
.range-definition-start, .range-definition-end {
.range-definition-start,
.range-definition-end {
width: 100px;
}

Write Preview
Loading…
Cancel
Save