Diff script

VideoFrame.js

import { VideoFrameEvents } from '@/utils/constants/events';
import { Customer } from '@/utils/constants/classes';
import LoadingBox from '@/components/commons/LoadingBox';
import ErrorCard from '@/components/commons/ErrorCard';


const VIDEO_FRAME_WRAPPER = 'video-frame-wrapper';
const VIDESK_COMPONENT = 'videsk-webrtc';
const VIDESK_TOKEN = process.env.VIDESK_TOKEN;
const VIDESK_SEGMENT= 'Videoatención Oficina';

export default {
    props: {
        height: {
            required: true,
            type: Number
        },
        width: {
            required: true,
            type: Number
        },
        minimized: {
            required: true,
            type: Boolean
        },
        customer: {
            required: true,
            type: Customer
        }
    },
    components: {
        'loading-box': LoadingBox,
        'error-card': ErrorCard
    },
    data() {
        return {
            sessionTimer: null,
            phoneSDK: null,
            videoSDK: null,
            fileShareSDK: null,
            status: null,
            queuePosition: 0,
            errorMsg: 'Estamos teniendo problemas de conexión en este minuto, por favor solicita ayuda a nuestra asistente en sala',
        }
    },
    watch: {
        width: (value) => {
            console.log('has changed width', value);
            const wrapper = document.getElementById(VIDEO_FRAME_WRAPPER);
            if (wrapper) wrapper.style.width = `${value}px`;
        },
        height: (value) => {
            console.log('has changed height', value);
            const wrapper = document.getElementById(VIDEO_FRAME_WRAPPER);
            wrapper.style.height = `${value}px`;
        }
    },
    methods: {
        beginTimer() {
            const self = this;
            this.sessionTimer = setInterval(() => {
                console.debug('Enviando Ping a servidor')
                self.$signalr.invoke('Ping', Date.now().valueOf());
            }, 3000);
        },
        endSession() {
            if (this.sessionTimer) {
                console.log('clear interval')
                clearInterval(this.sessionTimer);
            }
            this.phoneSDK.hangup();
        },
        async checkDevices(attempts = 0) {
            return new Promise(async (resolve, reject) => {
              if (attempts > 2) return reject();
              const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
                .catch(e => e);
              if (stream instanceof MediaStream) return resolve(stream);
              return this.checkDevices(attempts + 1);
            });
        },
        async beginSession() {
            this.setWindowSize(this.width, this.height);

            this.beginTimer();
            this.status = 'STARTING'
            const isAvailable = await this.checkDevices();
            if (!isAvailable) {
                this.status = 'ERROR';
                return this.$emit('onVideoError', 'No se encontró dispositivos de audio y video');
            }
            this.phoneSDK = new VideskPhone(VIDESK_TOKEN, this.phoneEvents());
            this.phoneSDK.addExtension({ name: 'fileshare', extension: FileShare });
            const segments = await this.phoneSDK.getSegments();
            const videoCallSegment = segments.find(segment => segment.name === VIDESK_SEGMENT);

            if (!videoCallSegment) {
                console.log('no segment');
                this.status = 'ERROR';
                this.$emit('onVideoError', `No se encontró el segmento ${VIDESK_SEGMENT}`);
            } else {
                const { id } = videoCallSegment;
                const requiredForm = await this.checkBaseForm(id)
                if (!requiredForm) this.phoneSDK.connect(id);
            }
        },
        async checkBaseForm(segment) {
            const response = await this.phoneSDK.getForm(segment, 'base');
            if (!response) return;
            await this.renderForm(segment, response, 'pre-call', '#pre-form');
            return true;
        },
        async renderForm(segment, data = {}, type = 'pre-call', element = '') {
            const form = new FormSDK({ target: document.querySelector(`${element} > [data-id='form']`) });
            const { rut, email, fullName, phone} = this.customer
            form.render(data.form);
            form.set('email', email);
            form.set('nombre', fullName);
            form.set('rut', rut);
            form.set('telefono', phone);
            
            const captcha = new CaptchaSDK(data.provider, Object.assign(data, { node: `${element}-captcha-button` }));
            captcha.on('token', async (token) => {
                this.sendForm({ values: form.data, token, type, segment });
                captcha.remove();
            });
            console.log('captcha', captcha);

            form.on('submit', (event) => {
                console.log('event submit', event);
                console.log('captcha', captcha);
                event.valid && captcha.exec();
            });

            form.on('ready', () => {
                console.log('is ready');
                console.log(form.submit());
            });
        },
        async sendForm(data = {}) {
            console.log('entro en sendForm', data);
            const response = await this.phoneSDK.sendForm(data);
            if (response instanceof Error) return console.error(response); // Ingest to error logger
            if (data.type === 'pre-call');
            return this.phoneSDK.connect(data.segment, { form: response.submission });
        },
        async maximize() {
            this.$emit('onMaximize');
        },
        printFile(file) {
            console.log('printFile', file);
            this.$emit('onVideoFile', file);
        },
        videoEvents() {
            return {
                'denied-permissions': () => {
                    console.log('los permisos fueron denegados');
                    this.$emit('onDeniedPermissions');
                }
            }
        },
        phoneEvents() {
            return {
                'queued': (event) => {
                    console.log('queued', event);
                    const { position, avgWait, segment } = event;
                    this.status = 'QUEUED';
                    this.queuePosition = position;
                    this.$emit('onVideoQueue', { position });
                },
                'queue-updated': (event) => {
                    console.log('queued-updated', event);
                    const { position } = event;
                    this.queuePosition = position;
                    this.$emit('onVideoQueue', {position});
                },
                'no-agents': () => {
                    this.status = 'NO-AGENTS';
                    this.$emit('onNoAgents');
                },
                'customer-leave': () => this.$emit('onCustomerLeave'),
                'dismissed': () => this.$emit('onDismissed'),
                'out-queue': () => console.log('out-queue'),
                'connected-call': () => console.log('connected-call'),
                'answered': async (event) => {
                    console.log('onAnswered', event);
                    const { callId, agent, segment, accessToken } = event;
                    this.$emit('onAnswered', callId);
                    if (this.videoSDK) this.videoSDK.destroy();
                    const element = document.querySelector(VIDESK_COMPONENT);
                    const parent = document.querySelector(`#${VIDEO_FRAME_WRAPPER}`);
                    this.videoSDK = new WebRTC(element, parent);
                    await this.videoSDK.create(accessToken);
                    this.status = 'CONNECTED';
                    this.$emit('onVideoStart');
                },
                'customer-hangup': () => this.$emit('onEnded'),
                'ended': () => {
                    console.log('ended');
                    this.videoSDK.destroy();
                    this.$emit('onSessionEnd', {});
                },
                'transferred-segment': () => this.$emit('onTransferredSegment'),
                'transferred-agent': (event) => {
                    const { call, accessToken } = event;
                    console.log('transferred-agent', event);
                    // const element = document.querySelector(VIDESK_COMPONENT);
                    // const parent = document.querySelector(`#${VIDEO_FRAME_WRAPPER}`);
                    // this.videoSDK.destroy();
                    // this.videoSDK = new WebRTC(
                    //     element,
                    //     parent);
                    // this.videoSDK.addEventListener('hangup', () => {
                    //     console.log('llamada cortada')
                    //     this.phoneSDK.hangup()
                    //     this.$emit('onEnded')
                    // });
                    // this.videoSDK.create(accessToken);
                },
                'connection-error': () => console.log('connection-error'),
                'network-issues': () => console.log('network-issues'),
                'http-block': () => console.log('http-block'),
                'token-error': () => console.log('token-error'),
                'transport-disconnect': () => console.log('transport-disconnect'),
                'connection-error': (err) => console.log('connectionError', err),
                'fileshare-ready': () => {
                    this.fileShareSDK = this.phoneSDK.extensionGetModule('fileshare');
                    console.log('fileshare-ready')
                },
                'fileshare-completed': (event) => {
                    const { queueIndex, status } = event;
                    console.log('fileshare-completed', event)
                    if ( status === 'received') {
                        const fileshare = this.phoneSDK.extensionGetModule('fileshare');
                        const file = fileshare.find(queueIndex);
                        this.$emit('onVideoFile', file)
                    }
                },
            }
        },
        setWindowSize(width, height) {
            const wrapper = document.getElementById(VIDEO_FRAME_WRAPPER);
            if (wrapper) {
                wrapper.style.width = `${width}px`;
                wrapper.style.height = `${height}px`;
            }
        }
    },
    created() {

        this.$root
            .$on(VideoFrameEvents.BeginAttention,
                (_event) => {
                    this.beginSession();
                });
        this.$root
            .$on(VideoFrameEvents.EndAttention,
                (_event) => {
                    this.endSession();
                });
    },
    beforeDestroy() {
        this.$root
            .$off(VideoFrameEvents.BeginAttention);
        this.$root
            .$off(VideoFrameEvents.EndAttention);
    }
}