copy and improve player title / info

src/components/player/atoms/Title.tsx

@@ -1,6 +1,55 @@
+import { useEffect, useState } from "react";
+
 import { usePlayerStore } from "@/stores/player/store";
+import { formatSeconds } from "@/utils/formatSeconds";
 
 export function Title() {
   const title = usePlayerStore((s) => s.meta?.title);
-  return <p>{title}</p>;
+  const { time } = usePlayerStore((s) => s.progress);
+  const [isShifting, setIsShifting] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Shift") {
+        setIsShifting(true);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === "Shift") {
+        setIsShifting(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
+  const handleTitleClick = () => {
+    const baseLink = window.location.href;
+    const timeStamp = formatSeconds(time, time >= 3600);
+
+    if (isShifting) {
+      navigator.clipboard
+        .writeText(`${baseLink}?t=${timeStamp}`)
+        .then(() => {});
+    } else {
+      navigator.clipboard.writeText(baseLink).then(() => {});
+    }
+  };
+
+  return (
+    <p
+      onClick={handleTitleClick}
+      className="cursor-copy transform transition-transform duration-200 hover:scale-105"
+      title={isShifting ? "Copy with current time" : "Copy link"}
+    >
+      {title}
+    </p>
+  );
 }

src/components/player/internals/BookmarkButton.tsx

@@ -24,7 +24,7 @@ export function BookmarkButton() {
       onClick={() => toggleBookmark()}
       icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
       iconSizeClass="text-base"
-      className="p-3"
+      className="p-2"
     />
   );
 }

src/pages/parts/player/PlayerPart.tsx

@@ -10,6 +10,7 @@ import { Widescreen } from "@/components/player/atoms/Widescreen";
 import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
 import { useSkipTime } from "@/components/player/hooks/useSkipTime";
+import { VideoPlayerButton } from "@/components/player/internals/Button";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
@@ -98,10 +99,10 @@ export function PlayerPart(props: PlayerPartProps) {
             <span className="text mx-3 text-type-secondary">/</span>
             <Player.Title />
 
-            <button
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
+            <VideoPlayerButton
+              icon={Icons.CIRCLE_QUESTION}
+              iconSizeClass="text-base"
+              onClick={() => {
                 if (!media) return;
                 const id = media
                   .replace("tmdb-tv-", "")
@@ -114,12 +115,8 @@ export function PlayerPart(props: PlayerPartProps) {
                 }
                 window.open(url, "_blank");
               }}
-            >
-              <Icon
-                className="text-xs font-semibold text-type-secondary"
-                icon={Icons.CIRCLE_QUESTION}
-              />
-            </button>
+              className="!p-0 !pl-2"
+            />
 
             <Player.BookmarkButton />
           </div>