1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
import { useState, useEffect } from "react";
import { PanelSectionRow, ButtonItem } from "@decky/ui";
import { FaClipboard, FaCheck } from "react-icons/fa";
import { toaster } from "@decky/api";
interface SmartClipboardButtonProps {
command?: string;
buttonText?: string;
}
export function SmartClipboardButton({
command = "~/fgmod/fgmod %command%",
buttonText = "Copy Launch Command"
}: SmartClipboardButtonProps) {
const [isLoading, setIsLoading] = useState(false);
const [showSuccess, setShowSuccess] = useState(false);
// Reset success state after 3 seconds
useEffect(() => {
if (showSuccess) {
const timer = setTimeout(() => {
setShowSuccess(false);
}, 3000);
return () => clearTimeout(timer);
}
return undefined;
}, [showSuccess]);
const copyToClipboard = async () => {
if (isLoading || showSuccess) return;
setIsLoading(true);
try {
const text = command;
// Use the proven input simulation method
const tempInput = document.createElement('input');
tempInput.value = text;
tempInput.style.position = 'absolute';
tempInput.style.left = '-9999px';
document.body.appendChild(tempInput);
// Focus and select the text
tempInput.focus();
tempInput.select();
// Try copying using execCommand first (most reliable in gaming mode)
let copySuccess = false;
try {
if (document.execCommand('copy')) {
copySuccess = true;
}
} catch (e) {
// If execCommand fails, try navigator.clipboard as fallback
try {
await navigator.clipboard.writeText(text);
copySuccess = true;
} catch (clipboardError) {
console.error('Both copy methods failed:', e, clipboardError);
}
}
// Clean up
document.body.removeChild(tempInput);
if (copySuccess) {
// Show success feedback in the button instead of toast
setShowSuccess(true);
// Verify the copy worked by reading back
try {
const readBack = await navigator.clipboard.readText();
if (readBack !== text) {
// Copy worked but verification failed - still show success
console.log('Copy verification failed but copy likely worked');
}
} catch (e) {
// Verification failed but copy likely worked
console.log('Copy verification unavailable but copy likely worked');
}
} else {
toaster.toast({
title: "Copy Failed",
body: "Unable to copy to clipboard"
});
}
} catch (error) {
toaster.toast({
title: "Copy Failed",
body: `Error: ${String(error)}`
});
} finally {
setIsLoading(false);
}
};
return (
<PanelSectionRow>
<ButtonItem
layout="below"
onClick={copyToClipboard}
disabled={isLoading || showSuccess}
>
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
{showSuccess ? (
<FaCheck style={{
color: "#4CAF50" // Green color for success
}} />
) : isLoading ? (
<FaClipboard style={{
animation: "pulse 1s ease-in-out infinite",
opacity: 0.7
}} />
) : (
<FaClipboard />
)}
<div style={{
color: showSuccess ? "#4CAF50" : "inherit",
fontWeight: showSuccess ? "bold" : "normal"
}}>
{showSuccess ? "Copied to clipboard" : isLoading ? "Copying..." : buttonText}
</div>
</div>
</ButtonItem>
<style>{`
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
`}</style>
</PanelSectionRow>
);
}
|
