mirror of https://github.com/ekimekim/wubloader
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
6.9 KiB
HTML
169 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>VST Video Editor</title>
|
|
|
|
<link rel="stylesheet" href="styles/thrimbletrimmer.css" />
|
|
<link rel="stylesheet" href="videojs/video-js.min.css" />
|
|
|
|
<script src="videojs/video.min.js"></script>
|
|
<script src="scripts/common.js"></script>
|
|
<script src="scripts/edit.js"></script>
|
|
<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">
|
|
<script src="https://apis.google.com/js/platform.js?onload=onGLoad" async defer></script>
|
|
</head>
|
|
<body>
|
|
<div id="errors"></div>
|
|
<div id="stream-time-settings">
|
|
<div>
|
|
<span class="field-label">Stream</span>
|
|
<span id="stream-time-setting-stream"></span>
|
|
</div>
|
|
<div>
|
|
<span class="field-label">Start Time</span>
|
|
<span id="stream-time-setting-start"></span>
|
|
</div>
|
|
<div>
|
|
<span class="field-label">End Time</span>
|
|
<span id="stream-time-setting-end"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<video id="video" class="video-js" controls preload="auto"></video>
|
|
<div id="clip-bar"></div>
|
|
<img id="waveform" alt="Waveform for the video">
|
|
|
|
<div id="editor-help">
|
|
<a href="#" id="editor-help-link">Help</a>
|
|
<div id="editor-help-box" class="hidden">
|
|
<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>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>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>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>
|
|
</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>
|
|
</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">
|
|
<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">
|
|
<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>
|
|
|
|
<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">
|
|
</div>
|
|
</div>
|
|
<div id="video-info-description-entry">
|
|
<label for="video-info-description">Description:</label>
|
|
<textarea id="video-info-description"></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="video-info-tags">Tags (comma-separated):</label>
|
|
<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>
|
|
<div id="video-info-editor-notes"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="submission">
|
|
<div id="submission-toolbar">
|
|
<button id="submit-button">Submit</button>
|
|
<button id="save-button">Save Draft</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-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="rough" selected>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>
|
|
</select>
|
|
<a id="download-link">Download Video</a>
|
|
</div>
|
|
|
|
<div id="data-correction">
|
|
<div id="data-correction-toolbar">
|
|
<a id="manual-link-update" href="#">Manual Link Update</a>
|
|
|
|
|
<a id="cancel-video-upload" href="#">Cancel Upload</a>
|
|
|
|
|
<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">
|
|
<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">
|
|
<!-- TODO: Test with authentication on and ensure failed video submissions for authentication show the correct error message -->
|
|
<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>
|
|
</body>
|
|
</html> |