fix(player): fix time input box

auioc · Aug 26, 2024 · 0a56c32 · 0a56c32
1 parent 3bb695a
commit 0a56c32
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 45 deletions.
diff --git a/src/core/data.ts b/src/core/data.ts
@@ -227,11 +227,9 @@ const progressBar = new EDC('input', 'progress')
             const value = E.valueAsNumber;
             const popup = P.elements.progressPopup;
             popup.textContent = formatTime(P.video.duration * value);
-            popup.style.left = `calc(${value * 100}% + (${
-                8 - value * 100 * 0.15
-            }px))`;
-            popup.style.transform =
-                'translateX(' + -popup.offsetWidth / 2 + 'px)';
+            // prettier-ignore
+            popup.style.left = `calc(${value * 100}% + (${8 - value * 100 * 0.15}px))`;
+            popup.style.transform = `translateX(${-popup.offsetWidth / 2}px)`;
             opacityVisible(popup);
         },
     })
@@ -251,11 +249,15 @@ const timeInput = new EDC('input', 'timeInput')
     .class('time-input hide')
     .attrs({ type: 'time', step: '1' })
     .selfEvents({
-        change: (P, E) => {
-            if (E.validity.valid) {
-                P.seek(timeToSeconds(E.value));
-            } else {
-                E.value = formatTime(P.video.currentTime, true);
+        mouseleave: (P) =>
+            toggleDisplayBi(P.elements.timeCurrent, P.elements.timeInput),
+        keydown: (P, E, event) => {
+            if (event.key === 'Enter') {
+                if (E.validity.valid) {
+                    P.seek(timeToSeconds(E.value));
+                } else {
+                    E.value = P.currentTime(true);
+                }
             }
         },
     })
@@ -264,24 +266,26 @@ const timeInput = new EDC('input', 'timeInput')
             E.value = P.currentTime(true);
             E.max = formatTime(V.duration, true);
         },
-        timeupdate: (P, E, V) => {
-            E.value = P.currentTime(true);
+        timeupdate: (P, E) => {
+            if (E !== document.activeElement) {
+                E.value = P.currentTime(true);
+            }
         },
     });
 
 const timeCurrent = new EDC('span', 'timeCurrent') //
     .html('--:--')
+    .selfEvents({
+        click: (P) =>
+            toggleDisplay(P.elements.timeInput, P.elements.timeCurrent),
+    })
     .videoEvents({
         canplay: (P, E, V) => (E.textContent = P.currentTime()),
         timeupdate: (P, E, V) => (E.textContent = P.currentTime()),
     });
 
 const timeTotal = new EDC('span')
-    .html('--:--')
-    .selfEvents({
-        click: (P) =>
-            toggleDisplay(P.elements.timeInput, P.elements.timeCurrent),
-    })
+    .html('--:--') //
     .videoEvents({
         canplay: (_, E, V) => (E.textContent = formatTime(V.duration)),
     });
@@ -578,13 +582,7 @@ export const playerMetadata = {
                             .children(progressBar, progressPopup),
                         new EDC('div') //
                             .class('time-label')
-                            .selfEvents({
-                                mouseleave: (P) =>
-                                    toggleDisplayBi(
-                                        P.elements.timeCurrent,
-                                        P.elements.timeInput
-                                    ),
-                            })
+
                             .children(
                                 timeInput,
                                 timeCurrent,

diff --git a/src/core/player.ts b/src/core/player.ts
@@ -198,9 +198,8 @@ export default class Player {
     seek(time: number) {
         const fixedTime = clamp(time, 0, this.video.duration);
         this.toast(
-            `Seek: ${formatTime(fixedTime, this.data.overHour)} / ${formatTime(
-                this.video.duration
-            )}`
+            `Seek: ${formatTime(fixedTime, this.data.overHour)} / ` +
+                formatTime(this.video.duration)
         );
         this.video.currentTime = fixedTime;
     }

diff --git a/src/style/player.css b/src/style/player.css
@@ -72,21 +72,6 @@ input[type='number']::-webkit-outer-spin-button {
     opacity: 1;
 }
 
-input::-webkit-datetime-edit {
-    display: contents;
-}
-
-input::-webkit-calendar-picker-indicator {
-    display: none;
-}
-
-input::-webkit-datetime-edit-fields-wrapper,
-input::-webkit-datetime-edit-hour-field,
-input::-webkit-datetime-edit-minute-field,
-input::-webkit-datetime-edit-second-field {
-    padding: 0;
-}
-
 li::marker {
     display: none;
 }
@@ -173,7 +158,7 @@ video {
 .progress-wrapper > .progress-popup {
     position: absolute;
     padding: 2px 4px;
-    top: -40px;
+    top: -32px;
 }
 
 .controls > .time-label {
@@ -182,11 +167,24 @@ video {
 
 .time-label > .time-input {
     font-family: auto;
-    font-size: medium;
-    height: 1em;
+    font-size: inherit;
     padding: 0;
     cursor: text;
     border: none;
+    background-color: var(--bg-color);
+}
+
+input.time-input::-webkit-datetime-edit {
+    display: contents;
+}
+input.time-input::-webkit-calendar-picker-indicator {
+    display: none;
+}
+input.time-input::-webkit-datetime-edit-fields-wrapper,
+input.time-input::-webkit-datetime-edit-hour-field,
+input.time-input::-webkit-datetime-edit-minute-field,
+input.time-input::-webkit-datetime-edit-second-field {
+    padding: 0;
 }
 
 .controls > .playback-rate {