purityselect/resources/js/App.vue

<script setup>
import { hexToRgb } from "@layouts/utils";
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useDisplay, useTheme } from "vuetify";
import { useStore } from "vuex";
import videocall from "./views/videocall/new-videocall.vue";
const store = useStore();
const router = useRouter();
const route = useRoute();
const { global } = useTheme();
const { mdAndDown } = useDisplay();
const currentUser = ref(localStorage.getItem("user_role"));
const token = ref(localStorage.getItem("agent_meeting_id"));
const call_type = ref(localStorage.getItem("call_type"));
// Draggable functionality
const draggable = ref(null);
const handleBeforeUnload = (event) => {
    if (store.getters.getCallStarted) {
        event.preventDefault();
        event.stopPropagation();
        event.returnValue = "Are you sure you want to reload?";
    }
};

const handleUnload = (event) => {
    if (store.getters.getCallStarted) {
        const confirmation = window.confirm("Are you sure you want to reload?");
        if (!confirmation) {
            return;
        } else {
            store.dispatch("updateFloatingWindow", true);
        }
    }
};

window.addEventListener("beforeunload", handleBeforeUnload);
window.addEventListener("unload", handleUnload);

onBeforeUnmount(() => {
    window.removeEventListener("beforeunload", handleBeforeUnload);
    window.removeEventListener("unload", handleUnload);
});
const onDragStart = (event) => {
    const element = draggable.value;
    let shiftX = event.clientX - element.getBoundingClientRect().left;
    let shiftY = event.clientY - element.getBoundingClientRect().top;

    const moveAt = (pageX, pageY) => {
        element.style.left = pageX - shiftX + "px";
        element.style.top = pageY - shiftY + "px";
    };

    const onMouseMove = (moveEvent) => {
        moveAt(moveEvent.pageX, moveEvent.pageY);
    };

    document.addEventListener("mousemove", onMouseMove);

    element.onmouseup = () => {
        document.removeEventListener("mousemove", onMouseMove);
        element.onmouseup = null;
    };
};

const onDragStartHandler = (event) => {
    onDragStart(event);
};

onMounted(() => {
    console.log(
        ">>Dragable<<",
        store.getters.getCallStarted,
        store.getters.getFloatingWindow,
        currentUser
    );
    if (draggable.value) {
        draggable.value.addEventListener("mousedown", onDragStartHandler);
        draggable.value.ondragstart = () => false;
    }
});
const floatingWindowVisible = computed(() => {
    // Add your conditions here
    return store.getters.getFloatingWindow;
});
const closeFloatingVideo = () => {
    store.dispatch("updateFloatingWindow", false);
    const callContainer = document.querySelector(".draggable-off");

    router.push("/provider/telehealth");
};
</script>

<template>
    <VSnackbar
        v-model="store.getters.getSuccessMsg"
        :timeout="5000"
        location="top end"
        variant="flat"
        color="success"
    >
        <VIcon class="ri-success-line success-icon" />
        {{ store.getters.getShowMsg }}
    </VSnackbar>
    <VSnackbar
        v-model="store.getters.getErrorMsg"
        :timeout="5000"
        location="top end"
        variant="flat"
        color="error"
    >
        <VIcon class="ri-success-line success-icon" />
        {{ store.getters.getShowMsg }}
    </VSnackbar>
    <VApp
        :style="`--v-global-theme-primary: ${hexToRgb(
            global.current.value.colors.primary
        )}`"
    >
        <!-- Draggable Div -->
        <!-- <div ref="draggable" class="draggable" v-if="currentUser == 'agent'"
      :style="{ display: floatingWindowVisible ? 'block' : 'none' }"> -->
        <div
            ref="draggable"
            :class="[
                {
                    draggable: store.getters.getFloatingWindow,
                    'draggable-off': !store.getters.getFloatingWindow,
                    'nav-custom': mdAndDown,
                },
            ]"
            v-if="store.getters.getCallStarted"
        >
            <v-btn
                v-if="store.getters.getFloatingWindow"
                rounded="xl"
                size="small"
                class="close-btn"
                color="white"
                icon="mdi-arrow-expand"
                @click="closeFloatingVideo"
            ></v-btn>

            <videocall
                :token="store.getters.getCallToken"
                :recording="false"
                :call_type="store.getters.getCallType"
            >
            </videocall>
        </div>
        <RouterView />
    </VApp>
</template>
<style>
.v-application {
    background-color: #f1f3f7 !important;
}

@media only screen and (max-width: 1024px) {
    .draggable {
        width: 50% !important;
        top: 20px !important;
        bottom: unset !important;
    }

    .draggable-off {
        width: 100% !important;
        left: 0px !important;
    }
}

.draggable {
    width: 15%;
    height: auto;
    background-color: #292929;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: grab;
    position: absolute;
    bottom: 20px;
    z-index: 9999;
    right: 20px;
}

.draggable:active {
    cursor: grabbing;
}

.close-btn {
    position: absolute !important;
    top: 5px;
    right: 10px;
    background: #000000a8;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 999;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 25px;
}

.close-btn:hover {
    color: red;
}

.draggable-off {
    width: calc(100vw - 260px);
    height: auto;
    /* background-color: #292929; */
    /* color: white; */
    display: block;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0px;
    z-index: 0;
    left: 260px;
}

.nav-custom {
    width: 100vw;
    /* left: 0; */
}
</style>