Merge pull request #48 from compose-us/fix/update-where-are-you-at-ui

Fix where are you at UI
compose-us · Sep 3, 2024 · 0a91fec · 0a91fec
2 parents 5b86e57 + 887bbd6
commit 0a91fec
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/flottform/where-are-you-at/src/app.html b/flottform/where-are-you-at/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" style="min-height: 100%; height: 100%; margin: 0">
+	<body data-sveltekit-preload-data="hover" style="min-height: 100svh; height: 100%; margin: 0">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/flottform/where-are-you-at/src/routes/+layout.svelte b/flottform/where-are-you-at/src/routes/+layout.svelte
@@ -19,7 +19,7 @@
 <footer class="w-full px-4 py-4 bg-gray-200 bg-opacity-50 mt-auto">
 	<ul class="max-w-screen-xl mx-auto flex justify-center gap-8">
 		<li>
-			<a href="{base}/">New Demo</a>
+			<a href="{base}/">Home</a>
 		</li>
 		<li>
 			<a href="{base}/feedback">Feedback</a>

diff --git a/flottform/where-are-you-at/src/routes/+page.svelte b/flottform/where-are-you-at/src/routes/+page.svelte
@@ -23,7 +23,6 @@
 		return `${clientBase}${endpointId}`;
 	};
 
-	let partnerLink: HTMLAnchorElement;
 	let qrCodeImage: HTMLImageElement;
 	let createChannelHandler: () => void;
 	let currentState = writable<
@@ -64,9 +63,27 @@
 			$currentState = 'error';
 		});
 	});
+	const copyLinkToClipboard = (e: Event) => {
+		const copyToClipboardButton = e.target as HTMLButtonElement;
+		const flottformLink = (copyToClipboardButton.nextElementSibling as HTMLDivElement).innerText;
+		navigator.clipboard
+			.writeText(flottformLink)
+			.then(() => {
+				copyToClipboardButton.innerText = '✅';
+				setTimeout(() => {
+					copyToClipboardButton.innerText = '📋';
+				}, 1000);
+			})
+			.catch((error) => {
+				copyToClipboardButton.innerText = `❌ Failed to copy: ${error}`;
+				setTimeout(() => {
+					copyToClipboardButton.innerText = '📋';
+				}, 1000);
+			});
+	};
 </script>
 
-<div class="w-full min-h-svh grid place-items-center">
+<div class="w-full grow grid place-items-center px-4">
 	{#if $currentState === 'new'}
 		<button
 			on:click={createChannelHandler}
@@ -80,12 +97,20 @@
 	{:else if $currentState === 'endpoint-created'}
 		<div>
 			<img bind:this={qrCodeImage} alt={$partnerLinkHref} src={$qrCodeData} class="mx-auto" />
-			<a
-				bind:this={partnerLink}
-				href={$partnerLinkHref}
-				target="_blank"
-				rel="external noopener noreferrer">{$partnerLinkHref}</a
-			>
+			<div class="flex flex-row gap-4 items-center">
+				<button
+					class="rounded-xl border-2 border-gray-300 bg-gray-300 px-2 py-1 text-xs"
+					type="button"
+					title="Copy link to clipboard"
+					aria-label="Copy link to clipboard"
+					on:click={copyLinkToClipboard}>📋</button
+				>
+				<div
+					class="grow content-center inline-block whitespace-break-spaces break-all text-base overflow-auto border-none outline-none resize-none"
+				>
+					{$partnerLinkHref}
+				</div>
+			</div>
 		</div>
 	{:else if $currentState === 'webrtc:waiting-for-ice'}
 		Trying to establish a connection with your friend