<!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+=: 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> <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="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> <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>