add link sharing capabilities

package-lock.json

@@ -48,6 +48,7 @@
         "qs": "^6.11.2",
         "react": "18.2.0",
         "react-circular-progressbar": "^2.1.0",
+        "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "18.2.0",
         "react-icons": "^4.12.0",
         "react-smooth-scroll-hook": "^1.3.4",
@@ -72,6 +73,7 @@
       "devDependencies": {
         "@types/proper-lockfile": "^4.1.2",
         "@types/qs": "^6.9.7",
+        "@types/react-copy-to-clipboard": "^5.0.7",
         "@types/react-virtualized": "^9.21.22",
         "@types/sbd": "^1.0.3",
         "daisyui": "^3.7.4"
@@ -1768,6 +1770,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-copy-to-clipboard": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz",
+      "integrity": "sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.2.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
@@ -2825,6 +2836,14 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.65.tgz",
       "integrity": "sha512-5E9WgTy95B7i90oISjui9U5Zu7iExUPfU4ygtv4yXEy6zJFE3oQYHCnh5H1jZRPkjphJt2Ml3oQW6M0qtK534A=="
     },
+    "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/create-require": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
@@ -5552,6 +5571,18 @@
         "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || 16 || 17 || 18"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -6486,6 +6517,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/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",

package.json

@@ -49,6 +49,7 @@
     "qs": "^6.11.2",
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.12.0",
     "react-smooth-scroll-hook": "^1.3.4",
@@ -73,6 +74,7 @@
   "devDependencies": {
     "@types/proper-lockfile": "^4.1.2",
     "@types/qs": "^6.9.7",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-virtualized": "^9.21.22",
     "@types/sbd": "^1.0.3",
     "daisyui": "^3.7.4"

src/app/views/public-video-view/index.tsx

@@ -1,7 +1,10 @@
 "use client"
 
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { RiCheckboxCircleFill } from "react-icons/ri"
+import { PiShareFatLight } from "react-icons/pi"
+import CopyToClipboard from "react-copy-to-clipboard"
+import { LuCopyCheck } from "react-icons/lu"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
@@ -14,6 +17,8 @@ export function PublicVideoView() {
 
   const videoId = `${video?.id || ""}`
 
+  const [copied, setCopied] = useState<boolean>(false)
+
   // we inject the current videoId in the URL, if it's not already present
   // this is a hack for Hugging Face iframes
   useEffect(() => {
@@ -32,6 +37,13 @@ export function PublicVideoView() {
     }
   }, [videoId])
 
+  useEffect(() => {
+    if (copied) {
+      setTimeout(() => {
+        setCopied(false)
+      }, 2000)
+    }
+  }, [copied])
   if (!video) { return null }
 
   return (
@@ -60,42 +72,95 @@ export function PublicVideoView() {
         {/** VIDEO TOOLBAR - HORIZONTAL */}
         <div className={cn(
           `flex flex-row`,
-          `items-center`
+          `items-center`,
+          `justify-between`,
+          `mb-4`
         )}>
-          {/** CHANNEL LOGO - VERTICAL */}
+          {/** LEFT PART FO THE TOOLBARR */}
           <div className={cn(
-            `flex flex-col`,
-            `mr-3`
+            `flex flex-row`,
+            `items-center`
           )}>
-            <div className="flex w-10 rounded-full overflow-hidden">
-              <img
-                src="huggingface-avatar.jpeg"
-              />
+            {/** CHANNEL LOGO - VERTICAL */}
+            <div className={cn(
+              `flex flex-col`,
+              `mr-3`
+            )}>
+              <div className="flex w-10 rounded-full overflow-hidden">
+                <img
+                  src="huggingface-avatar.jpeg"
+                />
+              </div>
             </div>
-          </div>
 
-          {/** CHANNEL INFO - VERTICAL */}
-          <div className={cn(
-            `flex flex-col`
-            )}>
+            {/** CHANNEL INFO - VERTICAL */}
             <div className={cn(
-              `flex flex-row items-center`,
-              `text-zinc-100 text-base font-medium space-x-1`,
+              `flex flex-col`
               )}>
-              <div>{video.channel.label}</div>
-              <div className="text-sm text-neutral-400"><RiCheckboxCircleFill className="" /></div>
+              <div className={cn(
+                `flex flex-row items-center`,
+                `text-zinc-100 text-base font-medium space-x-1`,
+                )}>
+                <div>{video.channel.label}</div>
+                <div className="text-sm text-neutral-400"><RiCheckboxCircleFill className="" /></div>
+              </div>
+              <div className={cn(
+                `flex flex-row items-center`,
+                `text-neutral-400 text-xs font-normal space-x-1`,
+                )}>
+                <div>0 followers</div>
+                <div></div>
+              </div>
             </div>
+          </div>
+
+          {/** RIGHT PART FO THE TOOLBAR */}
+          <div className={cn(
+            `flex flex-row`,
+            `items-center`,
+            `space-x-2`
+          )}>
+            {/* SHARE */}
             <div className={cn(
-              `flex flex-row items-center`,
-              `text-neutral-400 text-xs font-normal space-x-1`,
-              )}>
-              <div>0 followers</div>
-              <div></div>
+              `flex flex-row`,
+              `items-center`
+            )}>
+              <CopyToClipboard
+                text={`https://huggingface.co/spaces/jbilcke-hf/ai-tube?v=${video.id}`}
+                onCopy={() => setCopied(true)}>
+                <div className={cn(
+                  `flex flex-row space-x-2 pl-3 pr-4 h-9`,
+                  `items-center justify-center text-center`,
+                  `rounded-2xl`,
+                  `cursor-pointer`,
+                  `bg-neutral-700/50 hover:bg-neutral-700/90 text-zinc-100`
+                )}>
+                  <div className="flex items-center justify-center pt-0.5">
+                    {
+                      copied ? <LuCopyCheck className="w-4 h-4" />
+                      : <PiShareFatLight className="w-5 h-5" />
+                    }
+                  </div>
+                  <div className="text-sm font-medium">
+                    {
+                      copied ? "Link copied!" : "Share video"
+                    }</div>
+                </div>
+              </CopyToClipboard>
             </div>
           </div>
 
         </div>
 
+        {/** VIDEO DESCRIPTION - VERTICAL */}
+        <div className={cn(
+          `flex flex-col p-3`,
+          `rounded-xl`,
+          `bg-neutral-700/50`,
+          `text-sm`
+        )}>
+          <p>{video.description}</p>
+        </div>
       </div>
       <div className={cn(
         `sm:w-56 md:w-96`,