stagfe/resources/views/pro/meeting.blade.php

@extends('layouts.pro')
@section('content')

    <div id="meetingComponent">

        <h5 class="bg-dark font-weight-bold text-white m-0 py-3 px-4 d-flex">
            <span>Meeting</span>
            <span class="ml-auto" v-if="!started">
                Connecting...
            </span>
            <span class="ml-auto" v-if="started">
                <i class="fa fa-clock mr-1 text-light"></i>
                @{{ timeDisplay() }}
            </span>
        </h5>

        <div class="d-flex align-items-stretch mt-4 justify-content-center flex-nowrap">
            <div class="tp-bar">
                <div v-for="(pro, index) of pros"
                     class="tp-item mb-4"
                     :class="activeParticipant && activeType === 'pro' && activeParticipant.id === pro.id ? 'active' : ''"
                     v-on:click="setActiveView('pro', pro)">
                    <div v-if="pro.status === 'active'">
                        <img :src="pro.image" alt="" class="w-100">
                        <p class="font-weight-bold text-center mt-1 mb-0">@{{ pro.name }}</p>
                        <p class="font-weight-normal text-center">@{{ pro.type }}</p>
                    </div>
                    <div v-if="pro.status === 'connecting'">
                        <img src="/images/person/connecting.jpg" alt="" class="w-100">
                        <p class="font-weight-normal text-center mt-1 d-flex align-items-center justify-content-center">
                            <img src="/images/loading.gif" class="mr-1">
                            Connecting
                        </p>
                    </div>
                </div>
                <div class="tp-item mb-4">
                    <img src="/images/person/guest.png" alt="" class="w-100">
                    <p class="font-weight-bold text-center mt-1">Invite Pro</p>
                </div>
            </div>
            <div class="main-view" style="width: 800px; min-height: 600px;">
                <div class="p-4 w-100 h-100 d-flex align-items-stretch justify-content-stretch flex-column">
                    <img :src="activeParticipant.image" class="d-block mw-100 mh-100 mx-auto">
                    <p class="font-weight-bold text-center text-white mt-2">Feed from @{{ activeParticipant.name }}</p>
                </div>
            </div>
            <div class="tp-bar">
                <div v-for="(guest, index) of guests"
                     class="tp-item mb-4"
                     :class="activeParticipant && activeType === 'guest' && activeParticipant.id === guest.id ? 'active' : ''"
                     v-on:click="setActiveView('guest', guest)">
                    <img :src="guest.image" alt="" class="w-100">
                    <p class="font-weight-bold text-center mt-1 mb-0">@{{ guest.name }}</p>
                </div>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#meetingComponent',
            delimiters: ['@{{', '}}'],
            data: {
                meetingID: '<?= $meetingID ?>',
                socket: null,
                stompClient: null,
                time: 0,
                startTime: 0,
                started: false,
                guest: false,
                activeType: false,
                activeParticipant: false,
                guests: [
                    {
                        id: 1,
                        name: 'You',
                        image: '/images/person/you.jpg',
                        status: 'connecting',
                    },
                ],
                pros: [
                    {
                        id: 1,
                        name: 'Nancy Drew',
                        type: 'Receptionist',
                        image: '/images/person/nancy.jpg',
                        status: 'connecting',
                    }
                ]
            },
            methods: {
                setActiveView: function(_type, _participant) {
                    if(_participant.status === 'active') {
                        this.activeType = _type;
                        this.activeParticipant = _participant;
                    }
                },
                timeDisplay: function() {
                    // this.time = new Date().getTime() - this.startTime;
                    var seconds = this.time / 1000,
                        minutes = parseInt(seconds / 60, 10);
                    seconds = parseInt(seconds % 60, 10);
                    return minutes + " min, " + seconds + " sec";
                },
                connectToFirstPro: function() {
                    console.log('Connecting to first pro ...');
                    this.pros = [];
                    this.addPro();
                    $.post('/api/meeting/request-dial-pro', {
                        meetingUid: this.meetingID,
                    }, function(_data) {
                        console.log('Response to /api/meeting/request-dial-pro');
                        console.log(_data);
                    }, 'json');
                },
                addPro: function() {
                    this.pros.push({
                        id: '0',
                        name: 'Pro',
                        type: 'Receptionist',
                        image: '/images/person/nancy.jpg',
                        status: 'connecting',
                    });
                    return this.pros[this.pros.length - 1];
                },
                onProJoined: function(_pID) {

                    var found = false;

                    // find pro with participant id
                    var pro = this.pros.filter(function(_pro) {
                        return _pro.id === _pID;
                    });

                    // no pro with id, find first one with id = 0
                    if(!pro.length) {
                        pro = this.pros.filter(function(_pro) {
                            return _pro.id === "0";
                        });
                    }

                    // no pro with id = 0, create one
                    if(!pro.length) {
                        pro = this.addPro();
                    }
                    else {
                        pro = pro[0];
                    }

                    pro.id = _pID;
                    pro.status = 'active';

                    // TODO: init pro stream
                },
            },
            mounted: function() {

                this.pros = [];

                // this.playDemo();

                var self = this;

                // connect to WS
                self.socket = new SockJS('http://localhost:8080/ws');
                self.stompClient = Stomp.over(self.socket);
                self.stompClient.connect({}, function (frame) {
                    console.log('Connected: ' + frame);

                    // join self
                    // this is called everytime the pro call page is refreshed
                    self.stompClient.send("/app/pro-join-meeting", {},
                        JSON.stringify({
                            sessionKey: "<?= $sessionKey ?>",
                            meetingUid: "<?= $meetingID ?>",
                        }));

                    /*

                    // set self as active
                    self.guests[0].id = '';
                    self.guests[0].status = 'active';

                    // TODO: init own stream

                    // attempt to connect to first pro if "start"
                    @if(request('start'))
                        self.connectToFirstPro();
                    @endif

                    // subscribe to on pro joined WS event
                    self.stompClient.subscribe("/topic/on-pro-join-meeting", function(message){
                        console.log("on-pro-join-meeting:", message);

                        message = JSON.parse(message.body);
                        console.log(message.meetingParticipantUid);

                        self.onProJoined(message.meetingParticipantUid);

                    });
                    */

                });
            }
        });
    </script>

@endsection