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

Use more native HTML options for editor keyboard shortcuts help

Browse Source
pull/298/head
ElementalAlchemist 2 years ago committed by Mike Lang
parent ffae321d04
commit 1cb819a4c5
4 changed files with 351 additions and 371 deletions
Show Stats Download Patch File Download Diff File

420
thrimbletrimmer/edit.html
Unescape Escape View File

@ -20,75 +20,9 @@
</head> </head>
<body> <body>
<div id="errors"></div> <div id="errors"></div>
<form id="stream-time-settings"> <div id="page-container">
<div> <details id="editor-help">
<span class="field-label">Stream</span> <summary>Keyboard Shortcuts</summary>
<span id="stream-time-setting-stream"></span>
</div>
<div>
<label for="stream-time-setting-start" class="field-label">Start Time</label>
<input type="text" id="stream-time-setting-start" />
<button id="stream-time-setting-start-pad" type="button">Pad 1 minute</button>
</div>
<div>
<label for="stream-time-setting-end" class="field-label">End Time</label>
<input type="text" id="stream-time-setting-end" />
<button id="stream-time-setting-end-pad" type="button">Pad 1 minute</button>
</div>
<div>
<button type="submit" id="stream-time-settings-submit">Update Time Range</button>
</div>
</form>
<video id="video" preload="auto"></video>
<div id="video-controls">
<div id="video-controls-bar">
<div>
<img id="video-controls-play-pause" src="images/video-controls/play.png" class="click" />
</div>
<div id="video-controls-time">
<span id="video-controls-current-time"></span>
/
<span id="video-controls-duration"></span>
</div>
<div id="video-controls-spacer"></div>
<div id="video-controls-volume">
<img
id="video-controls-volume-mute"
src="images/video-controls/volume.png"
class="click"
/>
<progress id="video-controls-volume-level" value="0.5" class="click"></progress>
</div>
<div>
<select id="video-controls-playback-speed"></select>
</div>
<div>
<select id="video-controls-quality"></select>
</div>
<div>
<img
id="video-controls-fullscreen"
src="images/video-controls/fullscreen.png"
class="click"
/>
</div>
</div>
<progress id="video-controls-playback-position" value="0" class="click"></progress>
</div>
<div id="clip-bar"></div>
<div id="waveform-container">
<img id="waveform" alt="Waveform for the video" />
<div id="waveform-marker"></div>
</div>
<div id="editor-help">
<a href="#" id="editor-help-link">Help</a>
<div id="editor-help-box" class="hidden">
<a id="editor-help-box-close">[X]</a>
<h2>Keyboard Shortcuts</h2>
<ul> <ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li> <li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li> <li>K or Space: Toggle pause</li>
@ -117,165 +51,237 @@
active range is the last one active range is the last one
</li> </li>
</ul> </ul>
</div> </details>
</div> <form id="stream-time-settings">
<div>
<span class="field-label">Stream</span>
<span id="stream-time-setting-stream"></span>
</div>
<div>
<label for="stream-time-setting-start" class="field-label">Start Time</label>
<input type="text" id="stream-time-setting-start" />
<button id="stream-time-setting-start-pad" type="button">Pad 1 minute</button>
</div>
<div>
<label for="stream-time-setting-end" class="field-label">End Time</label>
<input type="text" id="stream-time-setting-end" />
<button id="stream-time-setting-end-pad" type="button">Pad 1 minute</button>
</div>
<div>
<button type="submit" id="stream-time-settings-submit">Update Time Range</button>
</div>
</form>
<div> <video id="video" preload="auto"></video>
<input type="checkbox" id="enable-chapter-markers" />
<label for="enable-chapter-markers">Add chapter markers to video description</label> <div id="video-controls">
</div> <div id="video-controls-bar">
<div id="range-definitions"> <div>
<div> <img
<div class="range-definition-times"> id="video-controls-play-pause"
<input type="text" class="range-definition-start" /> src="images/video-controls/play.png"
<img class="click"
src="images/pencil.png" />
alt="Set range start point to current video time" </div>
class="range-definition-set-start click" <div id="video-controls-time">
/> <span id="video-controls-current-time"></span>
<img /
src="images/play_to.png" <span id="video-controls-duration"></span>
alt="Play from start point" </div>
class="range-definition-play-start click" <div id="video-controls-spacer"></div>
/> <div id="video-controls-volume">
<div class="range-definition-between-time-gap"></div> <img
<input type="text" class="range-definition-end" /> id="video-controls-volume-mute"
<img src="images/video-controls/volume.png"
src="images/pencil.png" class="click"
alt="Set range end point to current video time" />
class="range-definition-set-end click" <progress id="video-controls-volume-level" value="0.5" class="click"></progress>
/> </div>
<img <div>
src="images/play_to.png" <select id="video-controls-playback-speed"></select>
alt="Play from end point" </div>
class="range-definition-play-end click" <div>
/> <select id="video-controls-quality"></select>
<div class="range-definition-icon-gap"></div> </div>
<img <div>
src="images/arrow.png" <img
alt="Range affected by keyboard shortcuts" id="video-controls-fullscreen"
title="Range affected by keyboard shortcuts" src="images/video-controls/fullscreen.png"
class="range-definition-current" class="click"
/> />
</div>
</div> </div>
<div class="range-definition-chapter-markers hidden"></div> <progress id="video-controls-playback-position" value="0" class="click"></progress>
<img
src="images/plus.png"
alt="Add chapter marker"
title="Add chapter marker"
class="add-range-definition-chapter-marker click hidden"
tabindex="0"
/>
</div> </div>
</div>
<img
src="images/plus.png"
alt="Add range"
id="add-range-definition"
class="click"
tabindex="0"
/>
<div id="video-info"> <div id="clip-bar"></div>
<div id="video-info-editor-notes-container" class="hidden"> <div id="waveform-container">
<div id="video-info-editor-notes-header">Notes to Editor:</div> <img id="waveform" alt="Waveform for the video" />
<div id="video-info-editor-notes"></div> <div id="waveform-marker"></div>
</div> </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" />
</div>
<label for="video-info-description">Description:</label>
<textarea id="video-info-description"></textarea>
<label for="video-info-tags">Tags (comma-separated):</label>
<input type="text" id="video-info-tags" />
</div>
<div id="submission"> <div>
<div id="submission-toolbar"> <input type="checkbox" id="enable-chapter-markers" />
<button id="submit-button">Submit</button> <label for="enable-chapter-markers">Add chapter markers to video description</label>
<button id="save-button">Save Draft</button>
<button id="submit-changes-button" class="hidden">Submit Changes</button>
<a id="advanced-submission" href="#">Advanced Submission Options</a>
</div> </div>
<div id="advanced-submission-options" class="hidden"> <div id="range-definitions">
<div> <div>
<label for="advanced-submission-option-allow-holes">Allow holes</label> <div class="range-definition-times">
<input type="checkbox" id="advanced-submission-option-allow-holes" /> <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"
/>
<img
src="images/play_to.png"
alt="Play from start point"
class="range-definition-play-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"
/>
<img
src="images/play_to.png"
alt="Play from end point"
class="range-definition-play-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 class="range-definition-chapter-markers hidden"></div>
<img
src="images/plus.png"
alt="Add chapter marker"
title="Add chapter marker"
class="add-range-definition-chapter-marker click hidden"
tabindex="0"
/>
</div> </div>
</div>
<img
src="images/plus.png"
alt="Add range"
id="add-range-definition"
class="click"
tabindex="0"
/>
<div> <div id="video-info">
<label for="advanced-submission-option-unlisted">Make unlisted</label> <div id="video-info-editor-notes-container" class="hidden">
<input type="checkbox" id="advanced-submission-option-unlisted" /> <div id="video-info-editor-notes-header">Notes to Editor:</div>
<div id="video-info-editor-notes"></div>
</div> </div>
<label for="video-info-title">Title:</label>
<div> <div id="video-info-title-full">
<label for="advanced-submission-option-upload-location">Upload location:</label> <span id="video-info-title-prefix"></span>
<select id="advanced-submission-option-upload-location"></select> <input type="text" id="video-info-title" />
</div> </div>
<label for="video-info-description">Description:</label>
<textarea id="video-info-description"></textarea>
<label for="video-info-tags">Tags (comma-separated):</label>
<input type="text" id="video-info-tags" />
</div>
<div> <div id="submission">
<label for="advanced-submission-option-uploader-allow">Uploader allowlist:</label> <div id="submission-toolbar">
<input type="text" id="advanced-submission-option-uploader-allow" /> <button id="submit-button">Submit</button>
<button id="save-button">Save Draft</button>
<button id="submit-changes-button" class="hidden">Submit Changes</button>
<a id="advanced-submission" href="#">Advanced Submission Options</a>
</div> </div>
</div> <div id="advanced-submission-options" class="hidden">
<div id="submission-response"></div> <div>
</div> <label for="advanced-submission-option-allow-holes">Allow holes</label>
<input type="checkbox" id="advanced-submission-option-allow-holes" />
</div>
<div id="download"> <div>
<label for="download-type-select">Download type:</label> <label for="advanced-submission-option-unlisted">Make unlisted</label>
<select id="download-type-select"> <input type="checkbox" id="advanced-submission-option-unlisted" />
<option value="rough" selected>Rough (fastest, pads start and end by a few seconds)</option> </div>
<option value="fast">Fast (may have artifacts a few seconds in from start and end)</option>
<option value="mpegts">MPEG-TS (slow, consumes server resources)</option>
</select>
<a id="download-link">Download Video</a>
</div>
<div id="data-correction"> <div>
<div id="data-correction-toolbar"> <label for="advanced-submission-option-upload-location">Upload location:</label>
<a id="manual-link-update" href="#">Manual Link Update</a> <select id="advanced-submission-option-upload-location"></select>
| </div>
<a id="cancel-video-upload" href="#">Cancel Upload</a>
| <div>
<a id="reset-entire-video" href="#">Force Reset Row</a> <label for="advanced-submission-option-uploader-allow">Uploader allowlist:</label>
<input type="text" id="advanced-submission-option-uploader-allow" />
</div>
</div>
<div id="submission-response"></div>
</div> </div>
<div id="data-correction-manual-link" class="hidden">
<input type="text" id="data-correction-manual-link-entry" /> <div id="download">
<label for="data-correction-manual-link-youtube" <label for="download-type-select">Download type:</label>
>Is YouTube upload (add to playlists)?</label <select id="download-type-select">
> <option value="rough" selected>
<input type="checkbox" id="data-correction-manual-link-youtube" /> Rough (fastest, pads start and end by a few seconds)
<button id="data-correction-manual-link-submit">Set Link</button> </option>
<div id="data-correction-manual-link-response"></div> <option value="fast">
Fast (may have artifacts a few seconds in from start and end)
</option>
<option value="mpegts">MPEG-TS (slow, consumes server resources)</option>
</select>
<a id="download-link">Download Video</a>
</div> </div>
<div id="data-correction-force-reset-confirm" class="hidden">
<p>Are you sure you want to reset this event?</p> <div id="data-correction">
<p> <div id="data-correction-toolbar">
This will set the row back to Unedited and forget about any video that may already exist. <a id="manual-link-update" href="#">Manual Link Update</a>
</p> |
<p> <a id="cancel-video-upload" href="#">Cancel Upload</a>
This is intended as a last-ditch effort to clear a malfunctioning cutter, or if a video |
needs to be reedited and replaced. <a id="reset-entire-video" href="#">Force Reset Row</a>
</p> </div>
<p> <div id="data-correction-manual-link" class="hidden">
<strong <input type="text" id="data-correction-manual-link-entry" />
>It is your responsibility to deal with any video that may have already been <label for="data-correction-manual-link-youtube"
uploaded.</strong >Is YouTube upload (add to playlists)?</label
> >
</p> <input type="checkbox" id="data-correction-manual-link-youtube" />
<p> <button id="data-correction-manual-link-submit">Set Link</button>
<button id="data-correction-force-reset-yes">Yes, reset it!</button> <div id="data-correction-manual-link-response"></div>
<button id="data-correction-force-reset-no">Oh, never mind!</button> </div>
</p> <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>
<button id="data-correction-force-reset-yes">Yes, reset it!</button>
<button id="data-correction-force-reset-no">Oh, never mind!</button>
</p>
</div>
<div id="data-correction-cancel-response"></div>
</div> </div>
<div id="data-correction-cancel-response"></div>
</div>
<div id="google-authentication"> <div id="google-authentication">
<div id="google-auth-sign-in" class="g-signin2" data-onsuccess="googleOnSignIn"></div> <div id="google-auth-sign-in" class="g-signin2" data-onsuccess="googleOnSignIn"></div>
<a href="#" id="google-auth-sign-out" class="hidden">Sign Out of Google Account</a> <a href="#" id="google-auth-sign-out" class="hidden">Sign Out of Google Account</a>
</div>
</div> </div>
</body> </body>
</html> </html>

250
thrimbletrimmer/index.html
Unescape Escape View File

@ -14,96 +14,9 @@
</head> </head>
<body> <body>
<div id="errors"></div> <div id="errors"></div>
<form id="stream-time-settings"> <div id="page-container">
<div> <details id="editor-help">
<label for="stream-time-setting-stream" class="field-label">Stream</label> <summary>Keyboard Shortcuts</summary>
<input type="text" id="stream-time-setting-stream" />
</div>
<div>
<label for="stream-time-setting-start" class="field-label">Start Time</label>
<input type="text" id="stream-time-setting-start" value="0:10:00" />
</div>
<div>
<label for="stream-time-setting-end" class="field-label">End Time</label>
<input type="text" id="stream-time-setting-end" />
</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"
/>
<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"
/>
<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
/>
<label for="stream-time-frame-of-reference-ago">Time Ago</label>
</div>
</div>
<div>
<button id="stream-time-settings-submit" type="submit">Load Playlist</button>
</div>
<div>
<a href="" id="stream-time-link">Link to this time range</a>
</div>
</form>
<video id="video" preload="auto"></video>
<div id="video-controls">
<div id="video-controls-bar">
<div>
<img id="video-controls-play-pause" src="images/video-controls/play.png" class="click" />
</div>
<div id="video-controls-time">
<span id="video-controls-current-time"></span>
/
<span id="video-controls-duration"></span>
</div>
<div id="video-controls-spacer"></div>
<div id="video-controls-volume">
<img
id="video-controls-volume-mute"
src="images/video-controls/volume.png"
class="click"
/>
<progress id="video-controls-volume-level" value="0.5" class="click"></progress>
</div>
<div>
<select id="video-controls-playback-speed"></select>
</div>
<div>
<select id="video-controls-quality"></select>
</div>
<div>
<img
id="video-controls-fullscreen"
src="images/video-controls/fullscreen.png"
class="click"
/>
</div>
</div>
<progress id="video-controls-playback-position" value="0" class="click"></progress>
</div>
<div id="editor-help">
<a href="#" id="editor-help-link">Help</a>
<div id="editor-help-box" class="hidden">
<a id="editor-help-box-close">[X]</a>
<h2>Keyboard Shortcuts</h2>
<ul> <ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li> <li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li> <li>K or Space: Toggle pause</li>
@ -122,41 +35,130 @@
<li>Shift+-: Minimum playback speed</li> <li>Shift+-: Minimum playback speed</li>
<li>Backspace: Reset playback speed to 1x</li> <li>Backspace: Reset playback speed to 1x</li>
</ul> </ul>
</details>
<form id="stream-time-settings">
<div>
<label for="stream-time-setting-stream" class="field-label">Stream</label>
<input type="text" id="stream-time-setting-stream" />
</div>
<div>
<label for="stream-time-setting-start" class="field-label">Start Time</label>
<input type="text" id="stream-time-setting-start" value="0:10:00" />
</div>
<div>
<label for="stream-time-setting-end" class="field-label">End Time</label>
<input type="text" id="stream-time-setting-end" />
</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"
/>
<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"
/>
<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
/>
<label for="stream-time-frame-of-reference-ago">Time Ago</label>
</div>
</div>
<div>
<button id="stream-time-settings-submit" type="submit">Load Playlist</button>
</div>
<div>
<a href="" id="stream-time-link">Link to this time range</a>
</div>
</form>
<video id="video" preload="auto"></video>
<div id="video-controls">
<div id="video-controls-bar">
<div>
<img
id="video-controls-play-pause"
src="images/video-controls/play.png"
class="click"
/>
</div>
<div id="video-controls-time">
<span id="video-controls-current-time"></span>
/
<span id="video-controls-duration"></span>
</div>
<div id="video-controls-spacer"></div>
<div id="video-controls-volume">
<img
id="video-controls-volume-mute"
src="images/video-controls/volume.png"
class="click"
/>
<progress id="video-controls-volume-level" value="0.5" class="click"></progress>
</div>
<div>
<select id="video-controls-playback-speed"></select>
</div>
<div>
<select id="video-controls-quality"></select>
</div>
<div>
<img
id="video-controls-fullscreen"
src="images/video-controls/fullscreen.png"
class="click"
/>
</div>
</div>
<progress id="video-controls-playback-position" value="0" class="click"></progress>
</div> </div>
<a href="#" id="download">Download Video</a>
<a href="#" id="time-converter-link">Convert Times</a>
<form id="time-converter" class="hidden">
<h2>Time Converter</h2>
<div id="time-converter-time-container">
<input class="time-converter-time" type="text" placeholder="Time to convert" />
</div>
<img
src="images/plus.png"
id="time-converter-add-time"
tooltip="Add time conversion field"
class="click"
tabindex="0"
/>
<div>
From:
<input name="time-converter-from" id="time-converter-from-utc" type="radio" value="1" />
<label for="time-converter-from-utc">UTC</label>
<input name="time-converter-from" id="time-converter-from-bus" type="radio" value="2" />
<label for="time-converter-from-bus">Bus Time</label>
<input name="time-converter-from" id="time-converter-from-ago" type="radio" value="3" />
<label for="time-converter-from-ago">Time Ago</label>
</div>
<div>
To:
<input name="time-converter-to" id="time-converter-to-utc" type="radio" value="1" />
<label for="time-converter-to-utc">UTC</label>
<input name="time-converter-to" id="time-converter-to-bus" type="radio" value="2" />
<label for="time-converter-to-bus">Bus Time</label>
<input name="time-converter-to" id="time-converter-to-ago" type="radio" value="3" />
<label for="time-converter-to-ago">Time Ago</label>
</div>
<button type="submit">Convert Times</button>
</form>
</div> </div>
<a href="#" id="download">Download Video</a>
<a href="#" id="time-converter-link">Convert Times</a>
<form id="time-converter" class="hidden">
<h2>Time Converter</h2>
<div id="time-converter-time-container">
<input class="time-converter-time" type="text" placeholder="Time to convert" />
</div>
<img
src="images/plus.png"
id="time-converter-add-time"
tooltip="Add time conversion field"
class="click"
tabindex="0"
/>
<div>
From:
<input name="time-converter-from" id="time-converter-from-utc" type="radio" value="1" />
<label for="time-converter-from-utc">UTC</label>
<input name="time-converter-from" id="time-converter-from-bus" type="radio" value="2" />
<label for="time-converter-from-bus">Bus Time</label>
<input name="time-converter-from" id="time-converter-from-ago" type="radio" value="3" />
<label for="time-converter-from-ago">Time Ago</label>
</div>
<div>
To:
<input name="time-converter-to" id="time-converter-to-utc" type="radio" value="1" />
<label for="time-converter-to-utc">UTC</label>
<input name="time-converter-to" id="time-converter-to-bus" type="radio" value="2" />
<label for="time-converter-to-bus">Bus Time</label>
<input name="time-converter-to" id="time-converter-to-ago" type="radio" value="3" />
<label for="time-converter-to-ago">Time Ago</label>
</div>
<button type="submit">Convert Times</button>
</form>
</body> </body>
</html> </html>

20
thrimbletrimmer/scripts/common.js
Unescape Escape View File

@ -23,26 +23,6 @@ function commonPageSetup() {
"Your browser doesn't support MediaSource extensions. Video playback and editing won't work." "Your browser doesn't support MediaSource extensions. Video playback and editing won't work."
); );
} }
const helpLink = document.getElementById("editor-help-link");
helpLink.addEventListener("click", toggleHelpDisplay);
const closeHelp = document.getElementById("editor-help-box-close");
closeHelp.addEventListener("click", (_event) => {
const helpBox = document.getElementById("editor-help-box");
helpBox.classList.add("hidden");
});
}
function toggleHelpDisplay() {
const helpBox = document.getElementById("editor-help-box");
if (helpBox.classList.contains("hidden")) {
const helpLink = document.getElementById("editor-help-link");
helpBox.style.top = `${helpLink.offsetTop + helpLink.offsetHeight}px`;
helpBox.classList.remove("hidden");
} else {
helpBox.classList.add("hidden");
}
} }
function addError(errorText) { function addError(errorText) {

32
thrimbletrimmer/styles/thrimbletrimmer.css
Unescape Escape View File

@ -64,6 +64,18 @@ a,
float: right; float: right;
} }
#page-container {
position: relative;
}
#editor-help {
position: absolute;
top: 0;
right: 0;
background: #222;
padding: 5px;
}
#stream-time-settings { #stream-time-settings {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
@ -212,26 +224,6 @@ a,
top: 0; top: 0;
} }
#editor-help-link {
float: right;
}
#editor-help-box {
position: absolute;
right: 0;
border: 1px solid #000;
padding: 2px;
background: #222;
}
#editor-help-box h2 {
margin: 3px 0;
}
#editor-help-box-close {
float: right;
}
#range-definitions { #range-definitions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

Write Preview
Loading…
Cancel
Save