mvp (seems to work)

AlexFreik · Dec 2, 2023 · 524bf58 · 524bf58
1 parent f67d6df
commit 524bf58
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 18 deletions.
diff --git a/yad/index.html b/yad/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>YAD: YouTube Auto Delay</title>
-        <script src="./script.js"></script>
+        <script src="./script.js" defer></script>
         <link rel="stylesheet" href="./styles.css" />
         <link rel="icon" type="image/png" href="./isha-logo.png" />
     </head>
@@ -36,7 +36,7 @@ <h1>YAD: YouTube Auto Delay</h1>
                 id="player"
                 width="560"
                 height="315"
-                src="https://www.youtube-nocookie.com/embed/jfKfPfyJRdk?autoplay=1&enablejsapi=1&iv_load_policy=3&start=900"
+                src="https://www.youtube-nocookie.com/embed/jfKfPfyJRdk?autoplay=1&enablejsapi=1&iv_load_policy=3"
                 title="YouTube video player"
                 frameborder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

diff --git a/yad/script.js b/yad/script.js
@@ -1,23 +1,31 @@
-var player;
+DELAY_PARAM_NAME = 'delay';
+VIDEO_ID_PARAM_NAME = 'videoId';
+DELAY_MARGIN = 60;
+
+function getParameterByName(name) {
+    var urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get(name);
+}
+
+function setInputsFromUrlParams() {
+    videoIdParam = getParameterByName(VIDEO_ID_PARAM_NAME) || 'jfKfPfyJRdk';
+    document.getElementById('videoId').value = videoIdParam;
+
+    delayParam = getParameterByName(DELAY_PARAM_NAME) || '900';
+    document.getElementById('delay').value = delayParam;
+}
 
-function configurePlayer() {
-    var videoId = document.getElementById('videoId').value;
-    var delay = document.getElementById('delay').value;
-    player.loadVideoById({ videoId: videoId });
+async function configurePlayer() {
+    videoId = document.getElementById('videoId').value;
+    delay = document.getElementById('delay').value;
+    await player.loadVideoById({ videoId: videoId });
 
     // Update the URL without triggering a full page reload
     var stateObj = { videoId: videoId, delay: delay };
     var newUrl =
         window.location.href.split('?')[0] +
         `?videoId=${videoId}&delay=${delay}`;
     history.pushState(stateObj, '', newUrl);
-
-    console.log(
-        'Configuring player with Video ID:',
-        videoId,
-        'and Delay:',
-        delay,
-    );
 }
 
 function loadPlayerAPI() {
@@ -37,15 +45,60 @@ function onYouTubeIframeAPIReady() {
 }
 
 function onPlayerReady(event) {
+    configurePlayer();
     event.target.playVideo();
 }
 
-var done = false;
+function getSystemCurrentTime() {
+    return Math.floor(new Date().getTime() / 1000);
+}
+
+function isVideoCurrentTimeGood() {
+    var currentTime = Math.floor(player.getCurrentTime());
+    var perfectTime = calculateVideoDelayedTime();
+    if (perfectTime === 0) {
+        console.error('Invalid perfect time:', perfectTime);
+    }
+    return (currentTime - perfectTime) < DELAY_MARGIN && (currentTime - perfectTime) > -DELAY_MARGIN;
+}
+
 function onPlayerStateChange(event) {
-    if (event.data == YT.PlayerState.PLAYING && !done) {
-        setTimeout(() => player.stopVideo(), 6000);
-        done = true;
+    if (event.data == YT.PlayerState.PLAYING) {
+        isPlayerReady = true;
+        systemTimeWhenStarted = getSystemCurrentTime();
+        // for live streams player.getDuration() gives a much bigger time than actual duration
+        durationWhenStarted = player.getDuration() - 3600;  
+
+        console.log(calculateVideoDelayedTime(), player.getCurrentTime(), !isVideoCurrentTimeGood());
+    }
+}
+
+function calculateVideoDelayedTime() {
+    if (!(durationWhenStarted > 0) || !(systemTimeWhenStarted > 0)) {
+        console.error('Invalid duration:', durationWhenStarted, 'or time:', systemTimeWhenStarted);
+        return 0;
     }
+    return (getSystemCurrentTime() - systemTimeWhenStarted) + (durationWhenStarted - delay);
 }
 
+var player;
+// 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 intervalId = -1;
+var videoId = getParameterByName(VIDEO_ID_PARAM_NAME);
+var delay = getParameterByName(DELAY_PARAM_NAME);
+var isPlayerReady = false;
+setInputsFromUrlParams();
+
 loadPlayerAPI();
+
+intervalId = setInterval(() => {
+    if (isPlayerReady && !isVideoCurrentTimeGood()) {
+        var perfectTime = calculateVideoDelayedTime();
+        console.log('Seeking to:', perfectTime);
+        player.seekTo(perfectTime);
+        isPlayerReady = false;
+    }
+}, 1000);