mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-14 18:14:54 +00:00
11a7414dc0
# Pull Request Template ## Description Dyte V1 API's are soon going to be deprecated, hence making sure we update Chatwoot before that happens Fixes #10704 ## Type of change Please delete options that are not relevant. - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? 1. Open a new or existing conversation from the inbox 2. Press the video call icon on the message composer 3. Verify that the message dialog shows up with the join video call button 4. Verify that clicking on join call does join the call ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] My changes generate no new warnings - [ ] New and existing unit tests pass locally with my changes (Unable to run this locally) --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<script>
|
|
import IntegrationAPIClient from 'widget/api/integration';
|
|
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
|
import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
|
|
import { getContrastingTextColor } from '@chatwoot/utils';
|
|
import { mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
components: {
|
|
FluentIcon,
|
|
},
|
|
props: {
|
|
messageId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
|
|
},
|
|
computed: {
|
|
...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
|
|
textColor() {
|
|
return getContrastingTextColor(this.widgetColor);
|
|
},
|
|
meetingLink() {
|
|
return buildDyteURL(this.dyteAuthToken);
|
|
},
|
|
},
|
|
methods: {
|
|
async joinTheCall() {
|
|
this.isLoading = true;
|
|
try {
|
|
const response = await IntegrationAPIClient.addParticipantToDyteMeeting(
|
|
this.messageId
|
|
);
|
|
const { data: { token } = {} } = response;
|
|
this.dyteAuthToken = token;
|
|
} catch (error) {
|
|
// Ignore Error for now
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
leaveTheRoom() {
|
|
this.dyteAuthToken = '';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<button
|
|
class="button join-call-button"
|
|
color-scheme="secondary"
|
|
:is-loading="isLoading"
|
|
:style="{
|
|
background: widgetColor,
|
|
borderColor: widgetColor,
|
|
color: textColor,
|
|
}"
|
|
@click="joinTheCall"
|
|
>
|
|
<FluentIcon icon="video-add" class="mr-2" />
|
|
{{ $t('INTEGRATIONS.DYTE.CLICK_HERE_TO_JOIN') }}
|
|
</button>
|
|
<div v-if="dyteAuthToken" class="video-call--container">
|
|
<iframe
|
|
:src="meetingLink"
|
|
allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
|
|
/>
|
|
<button
|
|
class="button small join-call-button leave-room-button"
|
|
@click="leaveTheRoom"
|
|
>
|
|
{{ $t('INTEGRATIONS.DYTE.LEAVE_THE_ROOM') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'widget/assets/scss/variables.scss';
|
|
|
|
.video-call--container {
|
|
position: fixed;
|
|
top: 72px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
z-index: 100;
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: calc(100% - 72px);
|
|
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.join-call-button {
|
|
margin: $space-small 0;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.leave-room-button {
|
|
position: absolute;
|
|
top: 0;
|
|
right: $space-small;
|
|
}
|
|
</style>
|