From 84b8a67cea28455e53b3d734204f4845c6f8b1f2 Mon Sep 17 00:00:00 2001
From: Isra <byzkk@protonmail.com>
Date: Tue, 11 Apr 2023 16:16:06 -0500
Subject: [PATCH] Time format

---
 src/video/components/actions/TimeAction.tsx   | 48 +++++++++++++++++--
 src/video/state/init.ts                       |  1 +
 src/video/state/logic/controls.ts             |  5 ++
 src/video/state/logic/interface.ts            |  6 +++
 .../state/providers/castingStateProvider.ts   |  4 ++
 src/video/state/providers/providerTypes.ts    |  1 +
 .../state/providers/videoStateProvider.ts     |  4 ++
 src/video/state/types.ts                      |  1 +
 8 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/video/components/actions/TimeAction.tsx b/src/video/components/actions/TimeAction.tsx
index 493f6d26..1020d093 100644
--- a/src/video/components/actions/TimeAction.tsx
+++ b/src/video/components/actions/TimeAction.tsx
@@ -1,6 +1,7 @@
 import { useVideoPlayerDescriptor } from "@/video/state/hooks";
 import { useMediaPlaying } from "@/video/state/logic/mediaplaying";
 import { useProgress } from "@/video/state/logic/progress";
+import { useInterface } from "@/video/state/logic/interface";
 
 function durationExceedsHour(secs: number): boolean {
   return secs > 60 * 60;
@@ -37,6 +38,7 @@ export function TimeAction(props: Props) {
   const descriptor = useVideoPlayerDescriptor();
   const videoTime = useProgress(descriptor);
   const mediaPlaying = useMediaPlaying(descriptor);
+  const { timeFormat, setTimeFormat } = useInterface(descriptor);
 
   const hasHours = durationExceedsHour(videoTime.duration);
   const time = formatSeconds(
@@ -45,11 +47,47 @@ export function TimeAction(props: Props) {
   );
   const duration = formatSeconds(videoTime.duration, hasHours);
 
+  const timeLeft = formatSeconds(
+    (videoTime.duration - videoTime.time) / mediaPlaying.playbackSpeed
+  );
+
+  const timeFinished = new Date(
+    new Date().getTime() +
+      (videoTime.duration * 1000) / mediaPlaying.playbackSpeed
+  ).toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  });
+
   return (
-    <div className={props.className}>
-      <p className="select-none text-white">
-        {time} {props.noDuration ? "" : `/ ${duration}`}
-      </p>
-    </div>
+    <button
+      type="button"
+      className={[
+        "group pointer-events-auto translate-x-[-16px] text-white transition-transform duration-100 active:scale-110",
+      ].join(" ")}
+      onClick={() => {
+        setTimeFormat(timeFormat === 0 ? 1 : 0);
+      }}
+    >
+      <div
+        className={[
+          "flex items-center justify-center rounded-full bg-denim-600 bg-opacity-0 p-2 transition-colors duration-100 group-hover:bg-opacity-50 group-active:bg-denim-500 group-active:bg-opacity-100 sm:px-4",
+        ].join(" ")}
+      >
+        <div className={props.className}>
+          <p className="select-none text-white">
+            {/* {time} {props.noDuration ? "" : `/ ${duration}`} */}
+            {timeFormat === 0
+              ? `${time} ${props.noDuration ? "" : `/ ${duration}`}`
+              : `${timeLeft} left${
+                  videoTime.time === videoTime.duration
+                    ? ""
+                    : ` - finish at ${timeFinished}`
+                } `}
+          </p>
+        </div>
+      </div>
+    </button>
   );
 }
diff --git a/src/video/state/init.ts b/src/video/state/init.ts
index bd4037fe..6c60ad54 100644
--- a/src/video/state/init.ts
+++ b/src/video/state/init.ts
@@ -32,6 +32,7 @@ function initPlayer(): VideoPlayerState {
       isFocused: false,
       leftControlHovering: false,
       popoutBounds: null,
+      timeFormat: 0,
     },
 
     mediaPlaying: {
diff --git a/src/video/state/logic/controls.ts b/src/video/state/logic/controls.ts
index e6d33369..535bd146 100644
--- a/src/video/state/logic/controls.ts
+++ b/src/video/state/logic/controls.ts
@@ -15,6 +15,7 @@ export type ControlMethods = {
   setDraggingTime(num: number): void;
   togglePictureInPicture(): void;
   setPlaybackSpeed(num: number): void;
+  setTimeFormat(num: 0 | 1): void;
 };
 
 export function useControls(
@@ -110,5 +111,9 @@ export function useControls(
       state.stateProvider?.setPlaybackSpeed(num);
       updateInterface(descriptor, state);
     },
+    setTimeFormat(format) {
+      state.interface.timeFormat = format;
+      updateInterface(descriptor, state);
+    },
   };
 }
diff --git a/src/video/state/logic/interface.ts b/src/video/state/logic/interface.ts
index 2f22823f..8e761e4e 100644
--- a/src/video/state/logic/interface.ts
+++ b/src/video/state/logic/interface.ts
@@ -9,6 +9,8 @@ export type VideoInterfaceEvent = {
   isFocused: boolean;
   isFullscreen: boolean;
   popoutBounds: null | DOMRect;
+  timeFormat: 0 | 1 | 2;
+  setTimeFormat(timeFormat: 0 | 1 | 2): void;
 };
 
 function getInterfaceFromState(state: VideoPlayerState): VideoInterfaceEvent {
@@ -18,6 +20,10 @@ function getInterfaceFromState(state: VideoPlayerState): VideoInterfaceEvent {
     isFocused: state.interface.isFocused,
     isFullscreen: state.interface.isFullscreen,
     popoutBounds: state.interface.popoutBounds,
+    timeFormat: state.interface.timeFormat,
+    setTimeFormat(timeFormat: 0 | 1 | 2) {
+      state.stateProvider?.setTimeFormat(timeFormat);
+    },
   };
 }
 
diff --git a/src/video/state/providers/castingStateProvider.ts b/src/video/state/providers/castingStateProvider.ts
index faf34dc5..e668cebc 100644
--- a/src/video/state/providers/castingStateProvider.ts
+++ b/src/video/state/providers/castingStateProvider.ts
@@ -173,6 +173,10 @@ export function createCastingStateProvider(
         updateSource(descriptor, state);
       }
     },
+    setTimeFormat(format) {
+      state.interface.timeFormat = format;
+      updateInterface(descriptor, state);
+    },
     providerStart() {
       this.setVolume(getStoredVolume());
 
diff --git a/src/video/state/providers/providerTypes.ts b/src/video/state/providers/providerTypes.ts
index ad09e812..6b3d7391 100644
--- a/src/video/state/providers/providerTypes.ts
+++ b/src/video/state/providers/providerTypes.ts
@@ -23,6 +23,7 @@ export type VideoPlayerStateController = {
   getId(): string;
   togglePictureInPicture(): void;
   setPlaybackSpeed(num: number): void;
+  setTimeFormat(format: 0 | 1 | 2): void;
 };
 
 export type VideoPlayerStateProvider = VideoPlayerStateController & {
diff --git a/src/video/state/providers/videoStateProvider.ts b/src/video/state/providers/videoStateProvider.ts
index e527419b..e8aa9aa3 100644
--- a/src/video/state/providers/videoStateProvider.ts
+++ b/src/video/state/providers/videoStateProvider.ts
@@ -133,6 +133,10 @@ export function createVideoStateProvider(
       // update localstorage
       setStoredVolume(volume);
     },
+    setTimeFormat(num) {
+      state.interface.timeFormat = num;
+      updateInterface(descriptor, state);
+    },
     setSource(source) {
       if (!source) {
         resetStateForSource(descriptor, state);
diff --git a/src/video/state/types.ts b/src/video/state/types.ts
index 1ba9ef7a..3a482332 100644
--- a/src/video/state/types.ts
+++ b/src/video/state/types.ts
@@ -30,6 +30,7 @@ export type VideoPlayerState = {
     isFocused: boolean; // is the video player the users focus? (shortcuts only works when its focused)
     leftControlHovering: boolean; // is the cursor hovered over the left side of player controls
     popoutBounds: null | DOMRect; // bounding box of current popout
+    timeFormat: 0 | 1 | 2; // Time format of the video player
   };
 
   // state related to the playing state of the media