add delay info in the corner when pressed D button

AlexFreik · Jan 16, 2025 · 849ae41 · 849ae41
1 parent 16790de
commit 849ae41
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 deletions.
diff --git a/yad/index.html b/yad/index.html
@@ -23,6 +23,10 @@
         allowfullscreen></iframe>
     </div>
 
+    <div id="delay-info" class="fixed right-2 top-2 z-50 hidden rounded px-4 py-2 text-sm opacity-30 drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]">
+      ...
+    </div>
+
     <div id="controls" class="mx-auto mt-5 w-fit">
       <span class="mx-1">||</span>
       <strong>Duration:</strong> <span id="duration-stat">...</span>

diff --git a/yad/output.css b/yad/output.css
@@ -4090,6 +4090,10 @@ html:has(.drawer-toggle:checked) {
   right: 0.25rem;
 }
 
+.right-2 {
+  right: 0.5rem;
+}
+
 .right-9 {
   right: 2.25rem;
 }
@@ -4102,10 +4106,18 @@ html:has(.drawer-toggle:checked) {
   top: 50%;
 }
 
+.top-2 {
+  top: 0.5rem;
+}
+
 .z-10 {
   z-index: 10;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -5367,6 +5379,11 @@ html:has(.drawer-toggle:checked) {
   padding-right: 0.75rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -5377,6 +5394,11 @@ html:has(.drawer-toggle:checked) {
   padding-bottom: 0px;
 }
 
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -5526,6 +5548,10 @@ html:has(.drawer-toggle:checked) {
   opacity: 1;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
 .opacity-80 {
   opacity: 0.8;
 }
@@ -5536,6 +5562,11 @@ html:has(.drawer-toggle:checked) {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.drop-shadow-\[0_1\.2px_1\.2px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
+  --tw-drop-shadow: drop-shadow(0 1.2px 1.2px rgba(0,0,0,0.8));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

diff --git a/yad/script.js b/yad/script.js
@@ -152,10 +152,12 @@ function adjustDelay(val) {
 function renderStats(duration, delay) {
     const durationElem = document.getElementById('duration-stat');
     const delayElem = document.getElementById('delay-stat');
+    const delayInfo = document.getElementById('delay-info');
 
     if (duration === null || delay === null) {
         durationElem.innerHTML = '...';
         delayElem.innerHTML = '...';
+        delayInfo.innerHTML = '...';
         return;
     }
     const dur = duration | 0;
@@ -168,6 +170,7 @@ function renderStats(duration, delay) {
     const delayMinutes = (del / 60) | 0;
     const delaySeconds = del % 60;
     delayElem.innerHTML = `${delayMinutes}m:${delaySeconds}s (${del} s)`;
+    delayInfo.innerHTML = `${del}`;
 }
 
 function getNewBroadcastChannel() {
@@ -204,6 +207,16 @@ document.getElementById('videoId').onpaste = (e) => {
     e.target.value = extractYouTubeId(paste);
 };
 
+document.addEventListener('keydown', function (event) {
+    if (event.key === 'd' || event.key === 'D') {
+        const delayDiv = document.getElementById('delay-info');
+        delayDiv.classList.remove('hidden');
+        setTimeout(() => {
+            delayDiv.classList.add('hidden');
+        }, 2000);
+    }
+});
+
 setInterval(() => {
     // First 30min after stream started player.getDuration() will always return 3600
     if (!player.isReady || player.startingDuration === 0) {