Skip to content

Feat/share video link #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Feat/share video link #106

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f49a74
feat: copy share url btn
omgate234 Oct 13, 2025
43c015b
feat: remove manual hiding
omgate234 Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions src/components/message-handlers/ChatVideo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,23 @@
<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>
</template>
<template #controls>
<div class="vdb-p-pt-0 vdb-c-p-20">
Expand Down Expand Up @@ -84,6 +101,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: {
Expand All @@ -97,6 +115,7 @@ const props = defineProps({
});

const isFullScreen = ref(false);
const showSuccessMessage = ref(false);

const handleFullScreenChange = () => {
isFullScreen.value = !isFullScreen.value;
Expand All @@ -106,6 +125,37 @@ 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);
}
};

</script>

<style lang="scss">
Expand Down