|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>VST Video Editor</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="styles/thrimbletrimmer.css" />
|
|
|
|
|
|
|
|
|
|
<script src="scripts/hls.min.js"></script>
|
|
|
|
|
<script src="scripts/luxon.min.js"></script>
|
|
|
|
|
<script src="scripts/common-worker.js"></script>
|
|
|
|
|
<script src="scripts/common.js"></script>
|
|
|
|
|
<script src="scripts/edit.js"></script>
|
|
|
|
|
<script src="scripts/keyboard-shortcuts.js"></script>
|
|
|
|
|
|
|
|
|
|
<meta
|
|
|
|
|
name="google-signin-client_id"
|
|
|
|
|
content="345276493482-r84m2giavk10glnmqna0lbq8e1hdaus0.apps.googleusercontent.com"
|
|
|
|
|
/>
|
|
|
|
|
<script src="https://apis.google.com/js/platform.js?onload=onGLoad" async defer></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<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+=: 2x or 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">
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<input type="checkbox" id="enable-chapter-markers" />
|
|
|
|
|
<label for="enable-chapter-markers">Add chapter markers to video description</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div id="range-definitions">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="range-definition-times">
|
|
|
|
|
<input type="text" class="range-definition-start" />
|
|
|
|
|
<img
|
|
|
|
|
src="images/pencil.png"
|
|
|
|
|
alt="Set range start point to the current video time"
|
|
|
|
|
title="Set range start point to the current video time"
|
|
|
|
|
class="range-definition-set-start click"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
src="images/play_to.png"
|
|
|
|
|
alt="Play from start point"
|
|
|
|
|
title="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 the current video time"
|
|
|
|
|
title="Set range end point to the current video time"
|
|
|
|
|
class="range-definition-set-end click"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
src="images/play_to.png"
|
|
|
|
|
alt="Play from end point"
|
|
|
|
|
title="Play from range 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>
|
|
|
|
|
<div class="range-definition-chapter-marker-start-field">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="range-definition-chapter-marker-start"
|
|
|
|
|
id="range-definition-chapter-marker-first-start"
|
|
|
|
|
disabled
|
|
|
|
|
/>
|
|
|
|
|
<div class="range-definition-chapter-marker-edit-gap"></div>
|
|
|
|
|
<img
|
|
|
|
|
src="images/play_to.png"
|
|
|
|
|
alt="Play from chapter start time"
|
|
|
|
|
title="Play from chapter start time"
|
|
|
|
|
class="range-definition-chapter-marker-play-start click"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
class="range-definition-chapter-marker-description"
|
|
|
|
|
id="range-definition-chapter-marker-first-description"
|
|
|
|
|
placeholder="Description"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
|
|
|
|
<img
|
|
|
|
|
src="images/plus.png"
|
|
|
|
|
alt="Add range"
|
|
|
|
|
id="add-range-definition"
|
|
|
|
|
class="click"
|
|
|
|
|
tabindex="0"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="video-info">
|
|
|
|
|
<div id="video-info-editor-notes-container" class="hidden">
|
|
|
|
|
<div id="video-info-editor-notes-header">Notes to Editor:</div>
|
|
|
|
|
<div id="video-info-editor-notes"></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>Abbreviated title:</label>
|
|
|
|
|
<div id="video-info-title-abbreviated"></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" />
|
|
|
|
|
<label for="video-info-thumbnail-mode">Thumbnail:</label>
|
|
|
|
|
<div id="video-info-thumbnail">
|
|
|
|
|
<div>
|
|
|
|
|
<select id="video-info-thumbnail-mode">
|
|
|
|
|
<option value="NONE">No custom thumbnail</option>
|
|
|
|
|
<option value="BARE">Use video frame</option>
|
|
|
|
|
<option value="TEMPLATE" selected>Use video frame in image template</option>
|
|
|
|
|
<option value="CUSTOM">Use a custom thumbnail image</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-info-thumbnail-mode-options" id="video-info-thumbnail-template-options">
|
|
|
|
|
<select id="video-info-thumbnail-template"></select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-info-thumbnail-mode-options" id="video-info-thumbnail-time-options">
|
|
|
|
|
<input type="text" id="video-info-thumbnail-time" />
|
|
|
|
|
<img
|
|
|
|
|
src="images/pencil.png"
|
|
|
|
|
alt="Set video thumbnail frame to current video time"
|
|
|
|
|
class="click"
|
|
|
|
|
id="video-info-thumbnail-time-set"
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
src="images/play_to.png"
|
|
|
|
|
alt="Set video time to video thumbnail frame"
|
|
|
|
|
class="click"
|
|
|
|
|
id="video-info-thumbnail-time-play"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="hidden video-info-thumbnail-mode-options"
|
|
|
|
|
id="video-info-thumbnail-custom-options"
|
|
|
|
|
>
|
|
|
|
|
<input type="file" id="video-info-thumbnail-custom" accept="image/png" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-info-thumbnail-mode-options" id="video-info-thumbnail-template-preview">
|
|
|
|
|
<button id="video-info-thumbnail-template-preview-generate">
|
|
|
|
|
Generate Thumbnail Preview
|
|
|
|
|
</button>
|
|
|
|
|
<div>
|
|
|
|
|
<img
|
|
|
|
|
id="video-info-thumbnail-template-preview-image"
|
|
|
|
|
class="hidden"
|
|
|
|
|
alt="Thumbnail preview image"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="submission">
|
|
|
|
|
<div id="submission-toolbar">
|
|
|
|
|
<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 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" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<label for="advanced-submission-option-unlisted">Make unlisted</label>
|
|
|
|
|
<input type="checkbox" id="advanced-submission-option-unlisted" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<label for="advanced-submission-option-upload-location">Upload location:</label>
|
|
|
|
|
<select id="advanced-submission-option-upload-location"></select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<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 id="download">
|
|
|
|
|
<label for="download-type-select">Download type:</label>
|
|
|
|
|
<select id="download-type-select">
|
|
|
|
|
<option value="smart" selected>Smart (experimental but preferred option)</option>
|
|
|
|
|
<option value="rough">Rough (raw content, pads start and end by a few seconds)</option>
|
|
|
|
|
<option value="fast">Fast (deprecated, use if smart is broken)</option>
|
|
|
|
|
<option value="mpegts">MPEG-TS (slow, consumes server resources)</option>
|
|
|
|
|
</select>
|
|
|
|
|
<a id="download-link">Download Video</a>
|
|
|
|
|
<a href="#" id="download-frame">Download Current Frame as Image</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="data-correction">
|
|
|
|
|
<div id="data-correction-toolbar">
|
|
|
|
|
<a id="manual-link-update" class="click">Manual Link Update</a>
|
|
|
|
|
|
|
|
|
|
|
<a id="cancel-video-upload" class="click">Cancel Upload</a>
|
|
|
|
|
|
|
|
|
|
|
<a id="reset-entire-video" class="click">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" />
|
|
|
|
|
<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>
|
|
|
|
|
<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 id="google-authentication">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="chat-replay"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
