Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 06:31:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add "has copied" text

Browse Source
This commit is contained in:
Jip Fr 2023-11-22 14:03:57 +01:00
parent 73c3b13309
commit 5ae17a6c9a
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/parts/player/PlaybackErrorPart.tsx
View File

@ -1,4 +1,4 @@
import { useState } from "react"; import { useRef, useState } from "react";
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
import { Icon, Icons } from "@/components/Icon"; import { Icon, Icons } from "@/components/Icon";
@ -11,10 +11,22 @@ import { usePlayerStore } from "@/stores/player/store";
export function PlaybackErrorPart() { export function PlaybackErrorPart() {
const playbackError = usePlayerStore((s) => s.interface.error); const playbackError = usePlayerStore((s) => s.interface.error);
const [showErrorCard, setShowErrorCard] = useState(true); const [showErrorCard, setShowErrorCard] = useState(true);
const [hasCopied, setHasCopied] = useState(false);
const hasCopiedUnsetDebounce = useRef<ReturnType<typeof setTimeout> | null>(
null
);
function copyError() { function copyError() {
if (!playbackError || !navigator.clipboard) return; if (!playbackError || !navigator.clipboard) return;
navigator.clipboard.writeText(playbackError.message); navigator.clipboard.writeText(playbackError.message);
setHasCopied(true);
// Debounce unsetting the "has copied" label
if (hasCopiedUnsetDebounce.current)
clearTimeout(hasCopiedUnsetDebounce.current);
hasCopiedUnsetDebounce.current = setTimeout(() => setHasCopied(false), 2e3);
console.log(hasCopiedUnsetDebounce);
} }
return ( return (
@ -50,8 +62,17 @@ export function PlaybackErrorPart() {
padding="p-2 md:px-4" padding="p-2 md:px-4"
onClick={() => copyError()} onClick={() => copyError()}
> >
<Icon icon={Icons.COPY} className="text-2xl mr-3" /> {hasCopied ? (
Copy <>
<Icon icon={Icons.CHECKMARK} className="text-xs mr-3" />
Copied
</>
) : (
<>
<Icon icon={Icons.COPY} className="text-2xl mr-3" />
Copy
</>
)}
</Button> </Button>
<Button <Button
theme="secondary" theme="secondary"