mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 19:17:48 +00:00
103 lines
2.4 KiB
Vue
103 lines
2.4 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import DyteAPI from 'dashboard/api/integrations/dyte';
|
|
import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
|
|
import { useAlert } from 'dashboard/composables';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { useMessageContext } from '../provider.js';
|
|
import BaseAttachmentBubble from './BaseAttachment.vue';
|
|
|
|
const { content, sender, id } = useMessageContext();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const isLoading = ref(false);
|
|
const dyteAuthToken = ref('');
|
|
|
|
const meetingLink = computed(() => {
|
|
return buildDyteURL(dyteAuthToken.value);
|
|
});
|
|
|
|
const joinTheCall = async () => {
|
|
isLoading.value = true;
|
|
try {
|
|
const { data: { token } = {} } = await DyteAPI.addParticipantToMeeting(
|
|
id.value
|
|
);
|
|
dyteAuthToken.value = token;
|
|
} catch (err) {
|
|
useAlert(t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const leaveTheRoom = () => {
|
|
dyteAuthToken.value = '';
|
|
};
|
|
const action = computed(() => ({
|
|
label: t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN'),
|
|
onClick: joinTheCall,
|
|
}));
|
|
</script>
|
|
|
|
<template>
|
|
<BaseAttachmentBubble
|
|
icon="i-ph-video-camera-fill"
|
|
icon-bg-color="bg-[#2781F6]"
|
|
sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.MEETING"
|
|
:action="action"
|
|
>
|
|
<div v-if="!sender" class="text-sm truncate text-n-slate-12">
|
|
<!-- Added as a fallback, where the sender is not available (Deleted) -->
|
|
<!-- Will show the content, if senderName in BaseAttachment.vue is empty -->
|
|
{{ content }}
|
|
</div>
|
|
<div v-if="dyteAuthToken" class="video-call--container">
|
|
<iframe
|
|
:src="meetingLink"
|
|
allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
|
|
/>
|
|
<button
|
|
class="px-4 py-2 text-sm rounded-lg bg-n-solid-3 mt-3"
|
|
@click="leaveTheRoom"
|
|
>
|
|
{{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}
|
|
</button>
|
|
</div>
|
|
<div v-else>
|
|
{{ '' }}
|
|
</div>
|
|
</BaseAttachmentBubble>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.join-call-button {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.video-call--container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1000;
|
|
padding: 0.25rem;
|
|
@apply bg-n-background;
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
button {
|
|
position: absolute;
|
|
top: 0.25rem;
|
|
right: 10rem;
|
|
}
|
|
}
|
|
</style>
|