136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<script setup>
|
|
import "@core/utils/external_api";
|
|
import { onMounted, onUnmounted, ref } from 'vue';
|
|
import videocall from './../views/videocall/videocall.vue';
|
|
const token = ref(localStorage.getItem('meeting_id'))
|
|
const count = ref(5);
|
|
const isDialogVisible = ref(true);
|
|
const api = ref();
|
|
const microphones = ref([
|
|
{
|
|
title: "Default Microphone",
|
|
id: 1,
|
|
index: 1
|
|
}, {
|
|
title: "Default Microphone 2",
|
|
id: 2,
|
|
index: 2
|
|
}
|
|
])
|
|
|
|
const speakers = ref([
|
|
{
|
|
title: "Default Speaker",
|
|
id: 1,
|
|
index: 1
|
|
}, {
|
|
title: "Default Speaker 2",
|
|
id: 2,
|
|
index: 2
|
|
}
|
|
])
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('mousemove', handleMouseMove)
|
|
const name = "xyz";
|
|
const domain = "8x8.vc";
|
|
const options = {
|
|
roomName: 'vpaas-magic-cookie-769c471e6c614755b51aea9447a554fc/' + localStorage.getItem('meeting_id'),
|
|
// jwt: "{{ $jassToken }}",
|
|
userInfo: {
|
|
displayName: name,
|
|
},
|
|
parentNode: document.querySelector("#jaas-container"),
|
|
};
|
|
// api.value = new JitsiMeetExternalAPI(domain, options);
|
|
// api.value.addEventListener('readyToClose', (event) => {
|
|
// // The call is ready to be closed, perform actions accordingly
|
|
// console.log('Jitsi call ended:', event);
|
|
// });
|
|
// api.value.addEventListener('videoConferenceLeft', (event) => {
|
|
// // The user has left the video conference, perform actions accordingly
|
|
// console.log('patient left the Jitsi call:', event);
|
|
// // router.push('/overview');
|
|
// });
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('mousemove', handleMouseMove)
|
|
// Clean up the API instance when the component is unmounted
|
|
if (api.value) {
|
|
api.value.dispose();
|
|
}
|
|
});
|
|
const x = ref(0)
|
|
const y = ref(0)
|
|
const dragging = ref(false)
|
|
|
|
const rect = ref(null)
|
|
|
|
const style = computed(() => {
|
|
return {
|
|
transform: `translate(${x.value}px, ${y.value}px)`
|
|
}
|
|
})
|
|
|
|
const handleMouseDown = e => {
|
|
rect.value = e.currentTarget.getBoundingClientRect()
|
|
dragging.value = true
|
|
}
|
|
|
|
const handleMouseMove = e => {
|
|
if (!dragging.value) return
|
|
x.value = Math.min(Math.max(0, e.clientX - rect.value.left), window.innerWidth - rect.value.width) - 25
|
|
y.value = Math.min(Math.max(0, e.clientY - rect.value.top), window.innerHeight - rect.value.height) - 25
|
|
}
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<!-- <div class="auth-wrapper d-flex align-center justify-center pa-4"> -->
|
|
<!-- <div id="jaas-container" >
|
|
|
|
</div> -->
|
|
<!-- Show the iframe when countdown reaches 1 -->
|
|
<!-- <iframe v-if="!isDialogVisible" width="100%" height="500px" frameborder="0" allowfullscreen></iframe> -->
|
|
<!-- </div> -->
|
|
<videocall :token="token" :recording="false" height="calc(100vh - 80px)"></videocall>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@use "@core/scss/template/pages/page-auth.scss";
|
|
|
|
#jaas-container {
|
|
height: 550px;
|
|
width: 100%
|
|
}
|
|
|
|
.small-screen {
|
|
background-color: white;
|
|
min-height: 150px;
|
|
max-width: 24%;
|
|
}
|
|
|
|
.livekit-container {
|
|
min-height: 600px;
|
|
height: 100%;
|
|
background-color: black;
|
|
position: relative;
|
|
}
|
|
|
|
.draggable-card {
|
|
cursor: move;
|
|
position: relative;
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
cursor: move;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: #313131;
|
|
border-radius: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|