From 07d34139ca94bbd281de235a65d0c12a346ed6ec Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 21 Jul 2020 22:50:22 -0500 Subject: Added mod messages that can be copied to clipboard. Organized code. Added contributors to readme. Added validity check for FPS field. --- README.md | 9 ++++++++- index.html | 56 ++++++++++++++++++++++++++++++++++++++--------------- main.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 104 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 5267572..2c8aed4 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,9 @@ # yt-frame-timer -A JavaScript-based program to determine the time between start and end points of a YouTube video down to the frame. Based on [https://github.com/Slush0Puppy/retime](https://github.com/Slush0Puppy/retime) by Slush Puppy (big thanks to them for their work). Formatting done by [StackEdit](https://stackedit.io/). \ No newline at end of file +A JavaScript-based program to determine the time between start and end points of a YouTube video down to the frame. The tool was originally created to help moderators retime speedruns on [speedrun.com](https://www.speedrun.com). Based on [Slush Puppy's Retime Tool (SPRT)](https://github.com/Slush0Puppy/retime) by Slush Puppy (big thanks to them for their work). + +## Contributors +* [SlushPuppy](https://www.speedrun.com/user/SlushPuppy) - Created [Slush Puppy's Retime Tool (SPRT)](https://github.com/Slush0Puppy/retime) in Python +* [dadinfinitum](https://www.speedrun.com/user/dadinfinitum) - Rewrote SPRT into web-hosted JavaScript / yt-frame-retimer lead +* [Oxknifer](https://www.speedrun.com/user/Oxknifer) - Original idea / beta tester on SPRT / yt-frame-retimer contributor + +Interested in contributing? Message @dadinfinitum or @Oxknifer diff --git a/index.html b/index.html index 932267e..978e6ee 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,53 @@ + + 1.1.0 YouTube Frame Timer - + -

YouTube Interval Timer

About

Takes start and stop points of a YouTube video, down to the frame, and gives the time between them in the format 1h 23m 45s 678ms. Source code is available.

Video Framerate

Right click the YouTube video and select “Stats for nerds.” The third line is “Current / Optimal Res” - find the two numbers after the @ and enter them for framerate.

Framerate:

Video Endpoints

Find the starting point (you can use the , and . keys to find the exact frame). Right click the video and select “Copy debug info” and paste it for starting frame. Repeat for ending frame.

Starting frame:

Ending frame:

Video Time

YouTube Interval Timer

About

Takes start and stop points of a YouTube video, down to the frame, and gives the time between them in the format + 1h 23m 45s 678ms. Source code is available. +

Video Framerate

Right click the YouTube video and select “Stats for nerds.” The third line is “Current / Optimal Res” - find the + two numbers after the @ and enter them for framerate.

+ Framerate: + +

Video Endpoints

+ Find the starting point (you can use the , and . keys to find the exact frame). Right + click the video and select “Copy debug info” and paste it for starting frame. Repeat for ending frame. +

+ Starting frame: + +

+ Ending frame: + +

Video Time

+ +

+ +
+ +

- + \ No newline at end of file diff --git a/main.js b/main.js index 1deac10..f84be0b 100644 --- a/main.js +++ b/main.js @@ -1,16 +1,21 @@ function compute() { - let startObj = JSON.parse(document.getElementById('startobj').value); - let endObj = JSON.parse(document.getElementById('endobj').value); - let framerate = document.getElementById('framerate').value; - if (startObj == undefined || endObj == undefined || framerate == undefined) return; + + // Initiate basic time variables let hours = 0; let minutes = 0; let seconds = 0; let milliseconds = 0; - let frameRate = parseInt(framerate); - let frameFromObj = (time, fps) => Math.floor(time * fps) / fps; //round to the nearest frame - let startFrame = frameFromObj(startObj.lct, frameRate); - let endFrame = frameFromObj(endObj.lct, frameRate); + + // Get framerate, start frame, and end frame from corresponding elements + // Double check they all have a value + let frameRate = parseInt(document.getElementById('framerate').value); + let startFrame = document.getElementById('startobj').value; + let endFrame = document.getElementById('endobj').value; + if (typeof (startFrame) === 'undefined' || endFrame === 'undefined' || framerate === 'undefined') { + return + }; + + // Calculate framerate let frames = (endFrame - startFrame) * frameRate; if (frames >= frameRate) { seconds = Math.floor(frames / frameRate); @@ -39,6 +44,46 @@ function compute() { milliseconds = '0' + milliseconds; } } - let print = hours.toString() + 'h ' + minutes.toString() + 'm ' + seconds.toString() + 's ' + milliseconds.toString() + 'ms'; - document.getElementById('time').value = print; + + // Show the time and mod message in the DOM + let finalTime = hours.toString() + 'h ' + minutes.toString() + 'm ' + seconds.toString() + 's ' + milliseconds.toString() + 'ms'; + let modMessage = `Mod Message: Time starts at ${parseFloat(startFrame).toFixed(3)} and ends at ${parseFloat(endFrame).toFixed(3)} at ${frameRate} fps to get a final time of ${finalTime}.`; + let credits = `Retimed using [yt-frame-timer](https://mattbraddock.com/yt-frame-timer)`; + document.getElementById('time').value = finalTime; + document.getElementById('postModMessage').innerHTML = "The mod message has been copied to clipboard! Please paste the it into the comment of the run you are verifying."; + document.getElementById('modMessage').innerHTML = modMessage + ' ' + credits; + + // Copy mod message to clipboard + navigator.clipboard.writeText(modMessage) + .then(() => { alert(`Copied to clipboard!`) }) + .catch((error) => { alert(`Copy failed! ${error}`) }) +} + +const validateFPS = (event) => { + // If framerate is invalid, show an error message and disable start and end frame fields + if (event.target.value === '' || parseInt(event.target.value) <= 0 || isNaN(parseInt(event.target.value))) { + document.getElementById('framerate').setCustomValidity('Please enter a valid framerate.'); + document.getElementById('framerate').reportValidity(); + document.getElementById('startobj').disabled = true; + document.getElementById('endobj').disabled = true; + document.getElementById('computeButton').disabled = true; + } else { + document.getElementById('startobj').disabled = false; + document.getElementById('endobj').disabled = false; + document.getElementById('computeButton').disabled = false; + } +} + +const parseForTime = (event) => { + // Get current frame from input field (either start time or end time) + let frameFromInputText = (JSON.parse(event.target.value)).lct; + if (typeof frameFromInputText !== 'undefined') { + // Get the framerate + let frameRate = parseInt(document.getElementById('framerate').value); + // Calculate the frame + let frameFromObj = (time, fps) => Math.floor(time * fps) / fps; //round to the nearest frame + let finalFrame = frameFromObj(frameFromInputText, frameRate); + // Update the DOM + document.getElementById(event.target.id).value = `${finalFrame}`; + } } \ No newline at end of file -- cgit v1.2.3