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

86
thrimbletrimmer/edit.html
Unescape Escape View File

@ -20,6 +20,38 @@
</head> </head>
<body> <body>
<div id="errors"></div> <div id="errors"></div>
<div id="page-container">
<details id="editor-help">
<summary>Keyboard Shortcuts</summary>
<ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li>
<li>M: Toggle mute</li>
<li>J: Back 10 seconds</li>
<li>L: Forward 10 seconds</li>
<li>Left arrow: Back 5 seconds</li>
<li>Right arrow: Forward 5 seconds</li>
<li>Shift+J: Back 1 second</li>
<li>Shift+L: Forward 1 second</li>
<li>Comma (,): Back 1 frame</li>
<li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li>
<li>Shift+=: Maximum playback speed</li>
<li>Shift+-: Minimum playback speed</li>
<li>Backspace: Reset playback speed to 1x</li>
<li>
Left bracket ([): Set start point for active range (indicated by arrow) to active video
time
</li>
<li>Right bracket (]): Set end point for active range to active video time</li>
<li>O: Set active range one above current active range</li>
<li>
P: Set active range one below current active range, adding a new range if the current
active range is the last one
</li>
</ul>
</details>
<form id="stream-time-settings"> <form id="stream-time-settings">
<div> <div>
<span class="field-label">Stream</span> <span class="field-label">Stream</span>
@ -45,7 +77,11 @@
<div id="video-controls"> <div id="video-controls">
<div id="video-controls-bar"> <div id="video-controls-bar">
<div> <div>
<img id="video-controls-play-pause" src="images/video-controls/play.png" class="click" /> <img
id="video-controls-play-pause"
src="images/video-controls/play.png"
class="click"
/>
</div> </div>
<div id="video-controls-time"> <div id="video-controls-time">
<span id="video-controls-current-time"></span> <span id="video-controls-current-time"></span>
@ -84,42 +120,6 @@
<div id="waveform-marker"></div> <div id="waveform-marker"></div>
</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>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li>
<li>M: Toggle mute</li>
<li>J: Back 10 seconds</li>
<li>L: Forward 10 seconds</li>
<li>Left arrow: Back 5 seconds</li>
<li>Right arrow: Forward 5 seconds</li>
<li>Shift+J: Back 1 second</li>
<li>Shift+L: Forward 1 second</li>
<li>Comma (,): Back 1 frame</li>
<li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li>
<li>Shift+=: Maximum playback speed</li>
<li>Shift+-: Minimum playback speed</li>
<li>Backspace: Reset playback speed to 1x</li>
<li>
Left bracket ([): Set start point for active range (indicated by arrow) to active video
time
</li>
<li>Right bracket (]): Set end point for active range to active video time</li>
<li>O: Set active range one above current active range</li>
<li>
P: Set active range one below current active range, adding a new range if the current
active range is the last one
</li>
</ul>
</div>
</div>
<div> <div>
<input type="checkbox" id="enable-chapter-markers" /> <input type="checkbox" id="enable-chapter-markers" />
<label for="enable-chapter-markers">Add chapter markers to video description</label> <label for="enable-chapter-markers">Add chapter markers to video description</label>
@ -226,8 +226,12 @@
<div id="download"> <div id="download">
<label for="download-type-select">Download type:</label> <label for="download-type-select">Download type:</label>
<select id="download-type-select"> <select id="download-type-select">
<option value="rough" selected>Rough (fastest, pads start and end by a few seconds)</option> <option value="rough" selected>
<option value="fast">Fast (may have artifacts a few seconds in from start and end)</option> Rough (fastest, pads start and end by a few seconds)
</option>
<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> <option value="mpegts">MPEG-TS (slow, consumes server resources)</option>
</select> </select>
<a id="download-link">Download Video</a> <a id="download-link">Download Video</a>
@ -253,7 +257,8 @@
<div id="data-correction-force-reset-confirm" class="hidden"> <div id="data-correction-force-reset-confirm" class="hidden">
<p>Are you sure you want to reset this event?</p> <p>Are you sure you want to reset this event?</p>
<p> <p>
This will set the row back to Unedited and forget about any video that may already exist. This will set the row back to Unedited and forget about any video that may already
exist.
</p> </p>
<p> <p>
This is intended as a last-ditch effort to clear a malfunctioning cutter, or if a video This is intended as a last-ditch effort to clear a malfunctioning cutter, or if a video
@ -277,5 +282,6 @@
<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>

54
thrimbletrimmer/index.html
Unescape Escape View File

@ -14,6 +14,28 @@
</head> </head>
<body> <body>
<div id="errors"></div> <div id="errors"></div>
<div id="page-container">
<details id="editor-help">
<summary>Keyboard Shortcuts</summary>
<ul>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li>
<li>M: Toggle mute</li>
<li>J: Back 10 seconds</li>
<li>L: Forward 10 seconds</li>
<li>Left arrow: Back 5 seconds</li>
<li>Right arrow: Forward 5 seconds</li>
<li>Shift+J: Back 1 second</li>
<li>Shift+L: Forward 1 second</li>
<li>Comma (,): Back 1 frame</li>
<li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li>
<li>Shift+=: Maximum playback speed</li>
<li>Shift+-: Minimum playback speed</li>
<li>Backspace: Reset playback speed to 1x</li>
</ul>
</details>
<form id="stream-time-settings"> <form id="stream-time-settings">
<div> <div>
<label for="stream-time-setting-stream" class="field-label">Stream</label> <label for="stream-time-setting-stream" class="field-label">Stream</label>
@ -66,7 +88,11 @@
<div id="video-controls"> <div id="video-controls">
<div id="video-controls-bar"> <div id="video-controls-bar">
<div> <div>
<img id="video-controls-play-pause" src="images/video-controls/play.png" class="click" /> <img
id="video-controls-play-pause"
src="images/video-controls/play.png"
class="click"
/>
</div> </div>
<div id="video-controls-time"> <div id="video-controls-time">
<span id="video-controls-current-time"></span> <span id="video-controls-current-time"></span>
@ -99,31 +125,6 @@
<progress id="video-controls-playback-position" value="0" class="click"></progress> <progress id="video-controls-playback-position" value="0" class="click"></progress>
</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>
<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
<li>K or Space: Toggle pause</li>
<li>M: Toggle mute</li>
<li>J: Back 10 seconds</li>
<li>L: Forward 10 seconds</li>
<li>Left arrow: Back 5 seconds</li>
<li>Right arrow: Forward 5 seconds</li>
<li>Shift+J: Back 1 second</li>
<li>Shift+L: Forward 1 second</li>
<li>Comma (,): Back 1 frame</li>
<li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li>
<li>Shift+=: Maximum playback speed</li>
<li>Shift+-: Minimum playback speed</li>
<li>Backspace: Reset playback speed to 1x</li>
</ul>
</div>
</div>
<a href="#" id="download">Download Video</a> <a href="#" id="download">Download Video</a>
<a href="#" id="time-converter-link">Convert Times</a> <a href="#" id="time-converter-link">Convert Times</a>
<form id="time-converter" class="hidden"> <form id="time-converter" class="hidden">
@ -158,5 +159,6 @@
</div> </div>
<button type="submit">Convert Times</button> <button type="submit">Convert Times</button>
</form> </form>
</div>
</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