From b3eb0de4d911fbd809e358db33d9d6936d4c29dc Mon Sep 17 00:00:00 2001
From: a-wing <1@233.email>
Date: Thu, 21 Dec 2023 21:37:17 +0800
Subject: [PATCH] feat(webapp): add copy-to-clipboard #4

---
 package-lock.json              | 14 ++++++++++++++
 package.json                   |  1 +
 webapp/components/layout.tsx   | 22 ++++++++++++++++++----
 webapp/components/svg/done.tsx |  7 +++++++
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 webapp/components/svg/done.tsx

diff --git a/package-lock.json b/package-lock.json
index 33e212c..110b544 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@types/lodash.uniq": "^4.5.7",
+        "copy-to-clipboard": "^3.3.3",
         "jotai": "^2.4.3",
         "jotai-devtools": "^0.7.0",
         "jotai-location": "^0.5.2",
@@ -2007,6 +2008,14 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3537,6 +3546,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
diff --git a/package.json b/package.json
index c1fded4..905e59f 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@types/lodash.uniq": "^4.5.7",
+    "copy-to-clipboard": "^3.3.3",
     "jotai": "^2.4.3",
     "jotai-devtools": "^0.7.0",
     "jotai-location": "^0.5.2",
diff --git a/webapp/components/layout.tsx b/webapp/components/layout.tsx
index d8d2c7b..e15ddc6 100644
--- a/webapp/components/layout.tsx
+++ b/webapp/components/layout.tsx
@@ -5,8 +5,12 @@ import WhipPlayer from './player/whip-player'
 import WhepPlayer from './player/whep-player'
 import DeviceBar from './device'
 import { UserStatus, localStreamIdAtom } from '../store/atom'
+import copy from 'copy-to-clipboard'
+import SvgDone from './svg/done'
 
 export default function Layout(props: { meetingId: string }) {
+  const [copyStatus, setCopyStatus] = useState(false)
+
   const [localStreamId] = useAtom(localStreamIdAtom)
   const [remoteUserStatus, setRemoteUserStatus] = useState<{ [_: string]: UserStatus }>({})
 
@@ -48,10 +52,7 @@ export default function Layout(props: { meetingId: string }) {
 
   return (
     <div className='flex flex-col justify-between' style={{ height: '100vh' }}>
-
-      <center className='text-white'>
-        <label>meeting Id: </label><code>{props.meetingId}</code>
-      </center>
+      <div></div>
 
       {!speaker
         ? <div className='flex flex-row flex-wrap justify-evenly'>
@@ -64,7 +65,20 @@ export default function Layout(props: { meetingId: string }) {
       <center>
         <Member />
         <div className='flex justify-evenly bg-gray-800/80'>
+          <section className='m-sm p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500'>
+            <button className='rounded-md' onClick={() => copy(location.href) && setCopyStatus(true)}>
+              <code className='mx-xs'>{props.meetingId}</code>
+            </button>
+            {copyStatus
+              ? <center className='m-1.5 bg-indigo-200 rounded-md'>
+                <SvgDone />
+              </center>
+              : null
+            }
+          </section>
+
           <DeviceBar />
+          <div></div>
         </div>
       </center>
 
diff --git a/webapp/components/svg/done.tsx b/webapp/components/svg/done.tsx
new file mode 100644
index 0000000..f748784
--- /dev/null
+++ b/webapp/components/svg/done.tsx
@@ -0,0 +1,7 @@
+export default function SvgDone() {
+  return (
+    <svg height="24" viewBox="0 -960 960 960" width="24">
+      <path d="m381-240 424-424-57-56-368 367-169-170-57 57 227 226Zm0 113L42-466l169-170 170 170 366-367 172 168-538 538Z" />
+    </svg>
+  )
+}