Bug description
The "Copy Link" button in src/components/VideoEditor.tsx uses btoa() to base64-encode the current recipe. btoa() only accepts Latin-1 characters (code points 0-255). When a user adds a text overlay containing any character outside that range — Chinese, Japanese, Arabic, Hindi, emoji, or even common accented characters like ü, é, ñ — btoa() throws an uncaught DOMException. The button silently does nothing: no link is copied, no error is shown, the UI does not update.
Root cause
src/components/VideoEditor.tsx, handleCopyLink (lines ~252-261):
const handleCopyLink = () => {
if (typeof window === "undefined") return;
const encoded = btoa(JSON.stringify(recipe)); // throws if recipe has Unicode
const url = new URL(window.location.href);
url.searchParams.set("settings", encoded);
history.replaceState(null, "", url.toString());
navigator.clipboard.writeText(url.toString()).then(() => {
setShareCopied(true);
setTimeout(() => setShareCopied(false), 2000);
});
// No catch — DOMException is unhandled
};JSON.stringify(recipe) includes the full recipe object, which contains recipe.textOverlays[].text — user-typed text. Any multi-byte character causes btoa() to throw:
DOMException: Failed to execute 'btoa' on 'Window':
The string to be encoded contains characters outside of the Latin1 range.
Since there is no try/catch, navigator.clipboard.writeText is never reached, setShareCopied(true) is never called, and the button gives no feedback.
Steps to reproduce
- Upload any video
- Open the "Text Overlay" section and type any non-ASCII text (e.g.
你好, مرحبا, こんにちは, ñoño, 🎬)
- Click "Copy Link" in the sidebar
- Nothing happens — no feedback, no link copied, no error
Expected behavior
The link should be generated and copied regardless of what characters are in the text overlay. The button should show "Copied!" feedback as it does with ASCII-only text.
Actual behavior
btoa() throws silently. The button does nothing. No error is visible to the user.
Suggested fix
Encode the JSON using encodeURIComponent before btoa to safely handle the full Unicode range:
// Encode (in handleCopyLink)
const encoded = btoa(unescape(encodeURIComponent(JSON.stringify(recipe))));
And update decodeRecipe to decode symmetrically:
// Decode (in decodeRecipe)
const decoded = JSON.parse(decodeURIComponent(escape(atob(encoded))));
Alternatively, use the TextEncoder API with a base64url approach, which is the modern standard.
The fix should also add a try/catch around the clipboard write for browsers that block clipboard access outside user gestures.
Browser and OS info
- Reproducible in all browsers (Chrome, Firefox, Safari)
- Only triggers when text overlays contain characters with code points > 255
Video format (if relevant)
- Not video-specific; any video reproduces this once a non-ASCII text overlay is added
Bug description
The "Copy Link" button in
src/components/VideoEditor.tsxusesbtoa()to base64-encode the current recipe.btoa()only accepts Latin-1 characters (code points 0-255). When a user adds a text overlay containing any character outside that range — Chinese, Japanese, Arabic, Hindi, emoji, or even common accented characters likeü,é,ñ—btoa()throws an uncaughtDOMException. The button silently does nothing: no link is copied, no error is shown, the UI does not update.Root cause
src/components/VideoEditor.tsx,handleCopyLink(lines ~252-261):JSON.stringify(recipe)includes the full recipe object, which containsrecipe.textOverlays[].text— user-typed text. Any multi-byte character causesbtoa()to throw:Since there is no
try/catch,navigator.clipboard.writeTextis never reached,setShareCopied(true)is never called, and the button gives no feedback.Steps to reproduce
你好,مرحبا,こんにちは,ñoño,🎬)Expected behavior
The link should be generated and copied regardless of what characters are in the text overlay. The button should show "Copied!" feedback as it does with ASCII-only text.
Actual behavior
btoa()throws silently. The button does nothing. No error is visible to the user.Suggested fix
Encode the JSON using
encodeURIComponentbeforebtoato safely handle the full Unicode range:And update
decodeRecipeto decode symmetrically:Alternatively, use the
TextEncoderAPI with a base64url approach, which is the modern standard.The fix should also add a
try/catcharound the clipboard write for browsers that block clipboard access outside user gestures.Browser and OS info
Video format (if relevant)