video btn - initial

resources/js/app.js

@@ -32,16 +32,6 @@ files.forEach(file => {
     Vue.component(component, () => import(`${file}`))
 })
 
-import VueSocketIO from "vue-socket.io"
-import SocketIO from "socket.io-client"
-
-Vue.use(
-    new VueSocketIO({
-        debug: false,
-        connection: SocketIO(process.env.MIX_SOCKET_SERVICE_URL)
-    })
-)
-
 let app = new Vue({
     el: '#meetingsApp',
     store,

resources/js/components/pages/MeetingsAppRoot.vue

@@ -22,15 +22,59 @@
                         </v-expansion-panel-content>
                 </v-expansion-panel>
         </v-expansion-panels>
+        <call-bubble :call="incomingCallDetails"></call-bubble>
     </v-app>
 </template>
 
 <script>
+import VueSocketIO from "vue-socket.io"
+import SocketIO from "socket.io-client"
+
+Vue.use(
+    new VueSocketIO({
+        debug: false,
+        connection: SocketIO(process.env.MIX_SOCKET_SERVICE_URL)
+    })
+)
+
 export default {
     data(){
         return {
-            active_panel: [0,1,2]
+            active_panel: [0,1,2],
+            incomingCallDetails: null
         }
+    },
+    sockets: {
+        incomingCall: function(data) {
+            let self = this
+
+            console.log(this)
+
+            if(!data.time_limit){
+                data.time_limit = 10
+            }
+
+            self.incomingCallDetails = data
+
+            let timer = setInterval(() => {
+                if(self.incomingCallDetails.time_limit > 0){
+                    self.incomingCallDetails.time_limit--
+
+                    if(self.incomingCallDetails.time_limit == 0){
+                        clearInterval(timer)
+                        console.log('TIME IS OUT!')
+                    }
+                }
+            }, 1000)
+        }
+    },
+    methods: {
+        //
+    },
+    mounted(){
+        let user = {}
+
+        this.$socket.emit("userData", { user: this.user })
     }
 }
 </script>

resources/js/components/widgets/CallBubble.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-btn
+        color="pink"
+        class="callBtn"
+        :class="{'showingAll': showCalleeDetails, 'active': call && call.time_limit > 0}"
+        dark
+        absolute
+        bottom
+        right
+        ripple
+        @click="showCalleeDetails = !showCalleeDetails"
+        >
+        <div v-if="call">
+            <div class="d-flex flex-row align-items-center btnHeader">
+                <v-icon>mdi-video</v-icon>
+                <div class="ml-2 incomingCallMsg">Incoming Call {{!showCalleeDetails ? `(${call.time_limit})` : ''}}</div>
+            </div>
+            <div class="fullDetails mt-3">
+                <div class="d-flex flex-row justify-content-between">
+                    <span>Callee:</span>
+                    <span>{{call.user_type}}</span>
+                </div>
+
+                <div class="d-flex flex-row justify-content-between">
+                    <span>Lobby:</span>
+                    <span>{{call.lobby || 'None'}}</span>
+                </div>
+
+                <div class="d-flex flex-row justify-content-between mt-2">
+                    <span>{{call.name || 'Unknown'}}</span>
+                </div>
+
+                <div class="d-flex flex-row justify-content-center mt-5">
+                    <h2>{{call.time_limit}}</h2>
+                </div>
+
+                <div class="d-flex flex-row justify-content-between mt-5 ctrlBtns">
+                    <span @click="handleCall(true)">
+                        Accept
+                    </span>
+                    /
+                    <span @click="handleCall(false)">
+                        Reject
+                    </span>
+                </div>
+            </div>
+        </div>
+    </v-btn>
+</template>
+
+<script>
+export default {
+    props: {
+        call: {
+            type: Object
+        }
+    },
+    data(){
+        return {
+            showCalleeDetails: false,
+        }
+    },
+    watch: {
+        call: {
+            deep: true,
+            handler(newVal){
+                if(newVal.time_limit == 0){
+                    let self = this
+
+                    setTimeout(() => {
+                        self.showCalleeDetails = false
+                    }, 750)
+                }
+            }
+        }
+    },
+    methods: {
+        handleCall(acceptCall) {
+            if(acceptCall){
+                console.log('Call accepted!')
+            } else {
+                console.log('Call Rejected!')
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+    @keyframes Glowing {
+        0% {
+            opacity: 0.3;
+        }
+        30% {
+            opacity: 0.8;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .callBtn {
+        border-radius: 28px;
+        height: 56px !important;
+        width: 56px !important;
+        min-width: 56px !important;
+        overflow-x: hidden;
+        overflow-y: hidden;
+
+        transition: all 0.5s;
+
+        transform: translateX(25vw);
+
+        .btnHeader {
+            animation: 0.7s Glowing infinite alternate ease-out;
+        }
+
+        &.active {
+            transform: translateX(0);
+        }
+
+        .incomingCallMsg {
+            transition: all 0.3s;
+            display: none;
+            opacity: 0;
+        }
+
+        &:hover, &.showingAll {
+            width: 240px !important;
+
+            .incomingCallMsg {
+                display: block;
+                opacity: 1;
+            }
+        }
+
+        /* Full State */
+
+        .fullDetails {
+            .ctrlBtns span {
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        &.showingAll {
+            height: 400px !important;
+        }
+
+        &:not(.showingAll) {
+            .fullDetails {
+                display: none !important;
+            }
+        }
+
+    }
+
+</style>