From 81136c663a308dca3a9083295f2952aa342bcded Mon Sep 17 00:00:00 2001
From: AlexFreik <alexfreik5@gmail.com>
Date: Sat, 2 Dec 2023 18:27:13 +0530
Subject: [PATCH] upd

---
 yad/index.html |  9 +++++++++
 yad/script.js  | 34 +++++++++++++++++++++++++---------
 yad/styles.css | 20 +++++++++++++++++++-
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/yad/index.html b/yad/index.html
index 11c0a49..3292c4e 100644
--- a/yad/index.html
+++ b/yad/index.html
@@ -13,6 +13,15 @@
             <h1>YAD: YouTube Auto Delay</h1>
         </header>
 
+        <div id="explanation">
+            <p>
+                This website allows you to configure the delay for a YouTube
+                Live Stream. The YouTube player will always keep the delay
+                fixed. If the current delay differs by more than 60 seconds from
+                the configured delay, it will automatically be reset back.
+            </p>
+        </div>
+
         <section>
             <label for="videoId">Video ID:</label>
             <input
diff --git a/yad/script.js b/yad/script.js
index 1026109..f8f43ad 100644
--- a/yad/script.js
+++ b/yad/script.js
@@ -59,7 +59,10 @@ function isVideoCurrentTimeGood() {
     if (perfectTime === 0) {
         console.error('Invalid perfect time:', perfectTime);
     }
-    return (currentTime - perfectTime) < DELAY_MARGIN && (currentTime - perfectTime) > -DELAY_MARGIN;
+    return (
+        currentTime - perfectTime < DELAY_MARGIN &&
+        currentTime - perfectTime > -DELAY_MARGIN
+    );
 }
 
 function onPlayerStateChange(event) {
@@ -67,25 +70,38 @@ function onPlayerStateChange(event) {
         isPlayerReady = true;
         systemTimeWhenStarted = getSystemCurrentTime();
         // for live streams player.getDuration() gives a much bigger time than actual duration
-        durationWhenStarted = player.getDuration() - 3600;  
+        durationWhenStarted = player.getDuration() - 3600;
 
-        console.log(calculateVideoDelayedTime(), player.getCurrentTime(), !isVideoCurrentTimeGood());
+        console.log(
+            calculateVideoDelayedTime(),
+            player.getCurrentTime(),
+            !isVideoCurrentTimeGood(),
+        );
     }
 }
 
 function calculateVideoDelayedTime() {
     if (!(durationWhenStarted > 0) || !(systemTimeWhenStarted > 0)) {
-        console.error('Invalid duration:', durationWhenStarted, 'or time:', systemTimeWhenStarted);
+        console.error(
+            'Invalid duration:',
+            durationWhenStarted,
+            'or time:',
+            systemTimeWhenStarted,
+        );
         return 0;
     }
-    return (getSystemCurrentTime() - systemTimeWhenStarted) + (durationWhenStarted - delay);
+    return (
+        getSystemCurrentTime() -
+        systemTimeWhenStarted +
+        (durationWhenStarted - delay)
+    );
 }
 
 var player;
-// duration of video when it started playing in seconds 
+// duration of video when it started playing in seconds
 // (it doesn't get auto updated for live streams)
-var durationWhenStarted;  
-var systemTimeWhenStarted;  // current time when video started in seconds
+var durationWhenStarted;
+var systemTimeWhenStarted; // current time when video started in seconds
 var intervalId = -1;
 var videoId = getParameterByName(VIDEO_ID_PARAM_NAME);
 var delay = getParameterByName(DELAY_PARAM_NAME);
@@ -101,4 +117,4 @@ intervalId = setInterval(() => {
         player.seekTo(perfectTime);
         isPlayerReady = false;
     }
-}, 1000);
\ No newline at end of file
+}, 1000);
diff --git a/yad/styles.css b/yad/styles.css
index 1d4168c..74999ab 100644
--- a/yad/styles.css
+++ b/yad/styles.css
@@ -58,11 +58,29 @@ button:hover {
     background-color: #555;
 }
 
+#explanation {
+    max-width: 750px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+#explanation h2 {
+    color: #333;
+}
+
+#explanation p {
+    color: #666;
+    line-height: 1.5;
+}
+
 .iframe-container {
     margin: 50px auto;
     position: relative;
     overflow: hidden;
-    width: 80%;
+    width: 100%;
     padding-bottom: 56.25%; /* 16:9 aspect ratio */
 }