From 1f49a74dd5721719aaceca2c46e0ff147f916a9c Mon Sep 17 00:00:00 2001
From: Om Gate <om@videodb.io>
Date: Mon, 13 Oct 2025 23:51:00 +0530
Subject: [PATCH 1/2] feat: copy share url btn

---
 src/components/message-handlers/ChatVideo.vue | 70 +++++++++++++++++--
 1 file changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/components/message-handlers/ChatVideo.vue b/src/components/message-handlers/ChatVideo.vue
index 152a690..2044398 100644
--- a/src/components/message-handlers/ChatVideo.vue
+++ b/src/components/message-handlers/ChatVideo.vue
@@ -18,6 +18,8 @@
               ? 'vdb-c-fixed vdb-c-inset-0 vdb-c-z-50 vdb-c-flex vdb-c-h-full vdb-c-w-full vdb-c-flex-col vdb-c-items-center vdb-c-justify-center vdb-c-overflow-y-hidden vdb-c-bg-black-64'
               : 'vdb-c-full xl:vdb-c-1/2 vdb-c-overflow-hidden vdb-c-rounded-20 sm:vdb-c-w-3/4 lg:vdb-c-w-3/5 xl:vdb-c-w-1/2'
           "
+          @mouseenter="handleMouseEnter"
+          @mouseleave="handleMouseLeave"
         >
           <VideoDBPlayer
             :class="isFullScreen ? 'vdb-c-h-screen vdb-c-w-screen' : ''"
@@ -27,12 +29,31 @@
             @fullScreenChange="handleFullScreenChange"
           >
             <template #overlay>
-              <BigCenterButton
-                class="vdb-c-absolute vdb-c-left-1/2 vdb-c-top-1/2 vdb-c-h-32 vdb-c-w-32 md:vdb-c-h-48 md:vdb-c-w-48"
-              />
+              <div v-if="isHovered">
+                <BigCenterButton
+                  class="vdb-c-absolute vdb-c-left-1/2 vdb-c-top-1/2 vdb-c-h-32 vdb-c-w-32 md:vdb-c-h-48 md:vdb-c-w-48"
+                />
+                <!-- Share Button -->
+                <button
+                  @click="copyShareUrl"
+                  class="vdb-c-hover:bg-gray-50 vdb-c-absolute vdb-c-right-16 vdb-c-top-16 vdb-c-flex vdb-c-items-center vdb-c-gap-8 vdb-c-rounded-lg vdb-c-bg-white vdb-c-px-10 vdb-c-py-6 vdb-c-text-sm vdb-c-font-medium vdb-c-text-black hover:vdb-c-shadow-lg vdb-c-transition-all vdb-c-duration-200"
+                >
+                  <ExternalLink class="vdb-c-h-16 vdb-c-w-16" />
+                  Share
+                </button>
+                <!-- Success Message -->
+                <transition name="fade">
+                  <div
+                    v-if="showSuccessMessage"
+                    class="vdb-c-absolute vdb-c-right-16 vdb-c-top-16 vdb-c-rounded-lg vdb-c-bg-green-500 vdb-c-px-10 vdb-c-py-6 vdb-c-text-sm vdb-c-font-medium vdb-c-text-white vdb-c-shadow-lg"
+                  >
+                    Share URL copied!
+                  </div>
+                </transition>
+              </div>
             </template>
             <template #controls>
-              <div class="vdb-p-pt-0 vdb-c-p-20">
+              <div v-if="isHovered" class="vdb-p-pt-0 vdb-c-p-20">
                 <div class="sm:vdb-p-mx-8 vdb-c-mb-8 md:vdb-c-mb-12">
                   <ProgressBar :stream-url="content.video.stream_url" />
                 </div>
@@ -84,6 +105,7 @@ import {
 } from "@videodb/player-vue";
 import "@videodb/player-vue/dist/style.css";
 import LoadingMessage from "./elements/LoadingMessage.vue";
+import ExternalLink from "../icons/ExternalLink.vue";
 
 const props = defineProps({
   content: {
@@ -97,6 +119,8 @@ const props = defineProps({
 });
 
 const isFullScreen = ref(false);
+const showSuccessMessage = ref(false);
+const isHovered = ref(false);
 
 const handleFullScreenChange = () => {
   isFullScreen.value = !isFullScreen.value;
@@ -106,6 +130,44 @@ const handleFullScreenChange = () => {
     document.exitFullscreen();
   }
 };
+
+const copyShareUrl = async () => {
+  try {
+    const shareUrl = `https://console.videodb.io/player?url=${props.content.video.stream_url}`;
+    await navigator.clipboard.writeText(shareUrl);
+
+    // Show success message
+    showSuccessMessage.value = true;
+
+    // Hide success message after 2 seconds
+    setTimeout(() => {
+      showSuccessMessage.value = false;
+    }, 2000);
+  } catch (err) {
+    console.error("Failed to copy share URL:", err);
+    // Fallback for older browsers
+    const textArea = document.createElement("textarea");
+    textArea.value = `https://console.videodb.io/player?url=${props.content.video.stream_url}`;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+
+    // Show success message even for fallback
+    showSuccessMessage.value = true;
+    setTimeout(() => {
+      showSuccessMessage.value = false;
+    }, 2000);
+  }
+};
+
+const handleMouseEnter = () => {
+  isHovered.value = true;
+};
+
+const handleMouseLeave = () => {
+  isHovered.value = false;
+};
 </script>
 
 <style lang="scss">

From 43c015ba7b9805d96df4807531b7ce34801ff49c Mon Sep 17 00:00:00 2001
From: Om Gate <om@videodb.io>
Date: Tue, 14 Oct 2025 11:15:20 +0530
Subject: [PATCH 2/2] feat: remove manual hiding

---
 src/components/message-handlers/ChatVideo.vue | 52 +++++++------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/components/message-handlers/ChatVideo.vue b/src/components/message-handlers/ChatVideo.vue
index 2044398..def9bf0 100644
--- a/src/components/message-handlers/ChatVideo.vue
+++ b/src/components/message-handlers/ChatVideo.vue
@@ -18,8 +18,6 @@
               ? 'vdb-c-fixed vdb-c-inset-0 vdb-c-z-50 vdb-c-flex vdb-c-h-full vdb-c-w-full vdb-c-flex-col vdb-c-items-center vdb-c-justify-center vdb-c-overflow-y-hidden vdb-c-bg-black-64'
               : 'vdb-c-full xl:vdb-c-1/2 vdb-c-overflow-hidden vdb-c-rounded-20 sm:vdb-c-w-3/4 lg:vdb-c-w-3/5 xl:vdb-c-w-1/2'
           "
-          @mouseenter="handleMouseEnter"
-          @mouseleave="handleMouseLeave"
         >
           <VideoDBPlayer
             :class="isFullScreen ? 'vdb-c-h-screen vdb-c-w-screen' : ''"
@@ -29,31 +27,29 @@
             @fullScreenChange="handleFullScreenChange"
           >
             <template #overlay>
-              <div v-if="isHovered">
-                <BigCenterButton
-                  class="vdb-c-absolute vdb-c-left-1/2 vdb-c-top-1/2 vdb-c-h-32 vdb-c-w-32 md:vdb-c-h-48 md:vdb-c-w-48"
-                />
-                <!-- Share Button -->
-                <button
-                  @click="copyShareUrl"
-                  class="vdb-c-hover:bg-gray-50 vdb-c-absolute vdb-c-right-16 vdb-c-top-16 vdb-c-flex vdb-c-items-center vdb-c-gap-8 vdb-c-rounded-lg vdb-c-bg-white vdb-c-px-10 vdb-c-py-6 vdb-c-text-sm vdb-c-font-medium vdb-c-text-black hover:vdb-c-shadow-lg vdb-c-transition-all vdb-c-duration-200"
+              <BigCenterButton
+                class="vdb-c-absolute vdb-c-left-1/2 vdb-c-top-1/2 vdb-c-h-32 vdb-c-w-32 md:vdb-c-h-48 md:vdb-c-w-48"
+              />
+              <!-- Share Button -->
+              <button
+                @click="copyShareUrl"
+                class="vdb-c-hover:bg-gray-50 vdb-c-absolute vdb-c-right-16 vdb-c-top-16 vdb-c-flex vdb-c-items-center vdb-c-gap-8 vdb-c-rounded-lg vdb-c-bg-white vdb-c-px-10 vdb-c-py-6 vdb-c-text-sm vdb-c-font-medium vdb-c-text-black hover:vdb-c-shadow-lg vdb-c-transition-all vdb-c-duration-200"
+              >
+                <ExternalLink class="vdb-c-h-16 vdb-c-w-16" />
+                Share
+              </button>
+              <!-- Success Message -->
+              <transition name="fade">
+                <div
+                  v-if="showSuccessMessage"
+                  class="vdb-c-absolute vdb-c-right-16 vdb-c-top-16 vdb-c-rounded-lg vdb-c-bg-green-500 vdb-c-px-10 vdb-c-py-6 vdb-c-text-sm vdb-c-font-medium vdb-c-text-white vdb-c-shadow-lg"
                 >
-                  <ExternalLink class="vdb-c-h-16 vdb-c-w-16" />
-                  Share
-                </button>
-                <!-- Success Message -->
-                <transition name="fade">
-                  <div
-                    v-if="showSuccessMessage"
-                    class="vdb-c-absolute vdb-c-right-16 vdb-c-top-16 vdb-c-rounded-lg vdb-c-bg-green-500 vdb-c-px-10 vdb-c-py-6 vdb-c-text-sm vdb-c-font-medium vdb-c-text-white vdb-c-shadow-lg"
-                  >
-                    Share URL copied!
-                  </div>
-                </transition>
-              </div>
+                  Share URL copied!
+                </div>
+              </transition>
             </template>
             <template #controls>
-              <div v-if="isHovered" class="vdb-p-pt-0 vdb-c-p-20">
+              <div class="vdb-p-pt-0 vdb-c-p-20">
                 <div class="sm:vdb-p-mx-8 vdb-c-mb-8 md:vdb-c-mb-12">
                   <ProgressBar :stream-url="content.video.stream_url" />
                 </div>
@@ -120,7 +116,6 @@ const props = defineProps({
 
 const isFullScreen = ref(false);
 const showSuccessMessage = ref(false);
-const isHovered = ref(false);
 
 const handleFullScreenChange = () => {
   isFullScreen.value = !isFullScreen.value;
@@ -161,13 +156,6 @@ const copyShareUrl = async () => {
   }
 };
 
-const handleMouseEnter = () => {
-  isHovered.value = true;
-};
-
-const handleMouseLeave = () => {
-  isHovered.value = false;
-};
 </script>
 
 <style lang="scss">