From 61460b52758297daf1d315ae7960d4ec9713b3af Mon Sep 17 00:00:00 2001
From: Mango0x45 <thomasvoss@live.com>
Date: Tue, 30 Mar 2021 13:03:03 +0200
Subject: Grab CSS from stackedit and remove all the bloat. Also start work on
dark theme.
---
index.html | 56 ++++++++++++++++++++++-----------
main.js | 33 +++++++++++++++-----
style.css | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 167 insertions(+), 24 deletions(-)
create mode 100644 style.css
diff --git a/index.html b/index.html
index 5a9063e..00fec9c 100644
--- a/index.html
+++ b/index.html
@@ -7,44 +7,66 @@
<meta name="description" content="A speedrun retime tool">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Frame Timer</title>
- <link rel="stylesheet" href="https://stackedit.io/style.css">
+ <link rel="stylesheet" href="style.css" type="text/css" media="screen">
+ <!--
+ <link rel="stylesheet" href="dark.css" type="text/css" media="screen">
+ -->
<script src="main.js"></script>
</head>
<body class="stackedit">
<div class="stackedit__html">
- <h1 id="youtube-interval-timer">Speedrun Retimer without Ads</h1>
+ <!--
+ TODO: Finish dark theme!
+
+ <label class="switch">
+ <input type="checkbox" id="color_preference" onclick="change_preferance()">
+ <span class="slider round" id="slider"></span>
+ </label>
+ -->
+ <h1>Speedrun Retimer without Ads</h1>
+ <a href="https://github.com/Mango0x45/no-ad-retimer">
+ Source code (GitHub)
+ </a>
<h3 id="video-framerate">Video Framerate</h3>
- <p>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.</p>
+ <p>
+ 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.
+ </p>
<p>
<label for="framerate">Framerate: </label>
- <input type="text" id="framerate" size="3" value="30" onchange='check_fps(event)'>
+ <input type="text" id="framerate" size="3" value="30"
+ onchange='check_fps(event)'>
</p>
- <h3 id="video-endpoints">Video Endpoints</h3>
+ <h3>Video Endpoints</h3>
<p>
- Find the starting point (you can use the <code>,</code> and
- <code>.</code> 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.
+ Find the starting point (you can use the <code>,</code>
+ and <code>.</code> 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.
</p>
<p>
<label for="startobj">Starting frame: </label>
- <input type="text" id="startobj" style='width:100%' onchange='parse_time(event)'>
+ <input type="text" id="startobj" style='width:100%'
+ onchange='parse_time(event)'>
</p>
<p>
<label for="endobj">Ending frame: </label>
- <input type="text" id="endobj" style='width:100%' onchange='parse_time(event)'>
+ <input type="text" id="endobj" style='width:100%'
+ onchange='parse_time(event)'>
</p>
<h3 id="video-time">Video Time</h3>
<input type="text" id="time" readonly size="20">
<p>
- <textarea id="mod_message" cols="40" rows="5" disabled></textarea>
+ <textarea id="mod_message" cols="40" rows="3" readonly
+ disabled>
+ </textarea>
</p>
- <button id="mod_message_button" onclick="copy_mod_message()" disabled>Copy Mod Message to
- Clipboard</button>
+ <button id="mod_message_button" onclick="copy_mod_message()"
+ disabled>Copy Mod Message to Clipboard</button>
</div>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/main.js b/main.js
index da3d68f..ff338a8 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-/* Compute the total duration of the run */
+/* Compute the total duration of the run. */
function compute()
{
const fps = parseInt(document.getElementById("framerate").value);
@@ -11,7 +11,7 @@ function compute()
const frames = (et - st) * fps;
const s = Math.round(frames / fps * 1000) / 1000;
- /* Show the time and mod message in the DOM */
+ /* Show the time and mod message in the DOM. */
const sf = Math.trunc(st * fps);
const ef = Math.trunc(et * fps);
const t = time_format(s);
@@ -24,7 +24,7 @@ function compute()
document.getElementById("mod_message_button").disabled = false;
}
-/* Convert seconds to human readable time */
+/* Convert seconds to human readable time. */
function time_format(t)
{
const h = ~~(t / 3600);
@@ -40,7 +40,7 @@ function time_format(t)
return ret;
}
-/* Allow user to copy mod message to clipboard */
+/* Allow user to copy mod message to clipboard. */
function copy_mod_message()
{
const text_area = document.getElementById("mod_message");
@@ -49,8 +49,10 @@ function copy_mod_message()
document.execCommand("copy");
}
-/* If framerate is invalid, show an error message and disable start and end
- * frame fields */
+/*
+ * If framerate is invalid, show an error message and disable start and end
+ * frame fields.
+ */
function check_fps(event)
{
fps = event.target.value;
@@ -68,9 +70,10 @@ function check_fps(event)
}
}
-/* Get current frame from input field (either start time or end time) */
+/* Get current frame from input field (either start time or end time). */
function parse_time(event)
{
+ let inptext_frame;
try {
inptext_frame = (JSON.parse(event.target.value)).cmt;
} catch {
@@ -90,3 +93,19 @@ function parse_time(event)
&& document.getElementById("endobj").value)
compute();
}
+
+/* Change the users preferred theme. */
+function change_preferance()
+{
+ const color_switch = document.getElementById("color_preference");
+
+ if (color_switch.checked) {
+ document.body.classList.add("dark");
+ document.body.classList.remove("light");
+ localStorage.setItem("preference", "dark");
+ } else {
+ document.body.classList.add("light");
+ document.body.classList.remove("dark");
+ localStorage.setItem("preference", "light");
+ }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8a9abb9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,102 @@
+/*
+ * This is a stripped down version of the style.css found over at
+ * https://stackedit.io
+ */
+
+body {
+ margin: 0;
+}
+
+html {
+ line-height: 1.15;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+}
+
+body, html {
+ color: rgba(0, 0, 0, 0.75);
+ font-size: 16px;
+ font-family: Lato, Helvetica Neue, Helvetica, sans-serif;
+ font-variant-ligatures: common-ligatures;
+ line-height: 1.67;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+h1:after {
+ content: "";
+ display: block;
+ position: relative;
+ top: 0.33em;
+ border-bottom: 1px solid hsla(0, 0%, 50%, 0.33);
+}
+
+h1, h3 {
+ margin: 1.8em 0;
+ line-height: 1.33;
+}
+
+p {
+ margin: 1.2em 0;
+}
+
+a {
+ background-color: transparent;
+ color: #0c93e4;
+ text-decoration: underline;
+ text-decoration-skip: ink;
+ -webkit-text-decoration-skip: objects;
+}
+
+a:focus, a:hover {
+ text-decoration: none;
+}
+
+code {
+ background-color: rgba(0, 0, 0, 0.05);
+ border-radius: 3px;
+ padding: 2px 4px;
+ font-family: Roboto Mono, Lucida Sans Typewriter, Lucida Console,
+ monaco, Courrier, monospace;
+ font-size: 0.85em;
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+code * {
+ font-size: inherit;
+}
+
+button {
+ overflow: visible;
+ text-transform: none;
+}
+
+input {
+ overflow: visible;
+}
+
+textarea {
+ overflow: auto;
+}
+
+button, input, textarea {
+ font-family: sans-serif;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+}
+
+.stackedit__html {
+ margin-bottom: 20px;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 30px;
+ padding-right: 30px;
+ max-width: 70%;
+}
--
cgit v1.2.3