administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-05 10:45:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Refactor copying of text to clipboard with Clipboard API and fallback to document.execCommand('copy') in CameraMap.jsx file

Browse Source
This commit is contained in:
Sergey Krashevich 2023-06-26 10:17:18 +03:00
parent 9e531b0b5b
commit 25396fbd8a
No known key found for this signature in database
GPG Key ID: 625171324E7D3856
1 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/src/routes/CameraMap.jsx
View File

@ -1,3 +1,4 @@
/* eslint-disable no-console */
import { h } from 'preact'; import { h } from 'preact';
import Card from '../components/Card.jsx'; import Card from '../components/Card.jsx';
import Button from '../components/Button.jsx'; import Button from '../components/Button.jsx';
@ -95,11 +96,36 @@ export default function CameraMasks({ camera }) {
[motionMaskPoints, setMotionMaskPoints] [motionMaskPoints, setMotionMaskPoints]
); );
const handleCopyMotionMasks = useCallback(async () => { const handleCopyMotionMasks = useCallback(() => {
await window.navigator.clipboard.writeText(` motion: const textToCopy = ` motion:
mask: mask:
${motionMaskPoints.map((mask) => ` - ${polylinePointsToPolyline(mask)}`).join('\n')}`); ${motionMaskPoints.map((mask) => ` - ${polylinePointsToPolyline(mask)}`).join('\n')}`;
if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
// Use Clipboard API if available
window.navigator.clipboard.writeText(textToCopy).catch((err) => {
console.error('Failed to copy text: ', err);
});
} else {
// Fallback to document.execCommand('copy')
const textarea = document.createElement('textarea');
textarea.value = textToCopy;
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (!successful) {
throw new Error('Failed to copy text');
}
} catch (err) {
console.error('Failed to copy text: ', err);
}
document.body.removeChild(textarea);
}
}, [motionMaskPoints]); }, [motionMaskPoints]);
// Zone methods // Zone methods
const handleEditZone = useCallback( const handleEditZone = useCallback(
@ -127,14 +153,36 @@ ${motionMaskPoints.map((mask) => ` - ${polylinePointsToPolyline(mask)}`).jo
); );
const handleCopyZones = useCallback(async () => { const handleCopyZones = useCallback(async () => {
await window.navigator.clipboard.writeText(` zones: const textToCopy = ` zones:
${Object.keys(zonePoints) ${Object.keys(zonePoints)
.map( .map(
(zoneName) => ` ${zoneName}: (zoneName) => ` ${zoneName}:
coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}` coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`).join('\n')}`;
)
.join('\n')}`); if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
}, [zonePoints]); // Use Clipboard API if available
window.navigator.clipboard.writeText(textToCopy).catch((err) => {
console.error('Failed to copy text: ', err);
});
} else {
// Fallback to document.execCommand('copy')
const textarea = document.createElement('textarea');
textarea.value = textToCopy;
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (!successful) {
throw new Error('Failed to copy text');
}
} catch (err) {
console.error('Failed to copy text: ', err);
}
document.body.removeChild(textarea);
}
}, [objectMaskPoints]);
// Object methods // Object methods
const handleEditObjectMask = useCallback( const handleEditObjectMask = useCallback(