diff --git a/src/components/player/atoms/Title.tsx b/src/components/player/atoms/Title.tsx index 54453c18..662c4286 100644 --- a/src/components/player/atoms/Title.tsx +++ b/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

{title}

; + 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 ( +

+ {title} +

+ ); } diff --git a/src/components/player/internals/BookmarkButton.tsx b/src/components/player/internals/BookmarkButton.tsx index abf3af1d..cb6e30a0 100644 --- a/src/components/player/internals/BookmarkButton.tsx +++ b/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" /> ); } diff --git a/src/pages/parts/player/PlayerPart.tsx b/src/pages/parts/player/PlayerPart.tsx index d5f6cf1d..3902ab83 100644 --- a/src/pages/parts/player/PlayerPart.tsx +++ b/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) { / - + className="!p-0 !pl-2" + />