Merge remote-tracking branch 'origin/master'

.env.example

@@ -44,3 +44,16 @@ PUSHER_APP_CLUSTER=mt1
 
 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+OPENTOK_KEY=46678902
+OPENTOK_SECRET=c64dd0c05f7a5955ee60c3c81daa3dfe97e73d3c
+
+STAG_TOKEN=hernya_vash_token
+SOCKET_SERVICE_URL=http://socket-io:3000
+MIX_SOCKET_SERVICE_URL=http://localhost:3000
+
+TWILIO_SID=AC3268825a3a12f00fdb798a37e55f649c
+TWILIO_TOKEN=1c1aa713ee722e1d6dc8a18e82e83308
+TWILIO_NUMBER=+12023359983
+
+MIX_APP_URL="http://app.lobby.localhost"

.gitignore

@@ -1,6 +1,10 @@
 /node_modules
 /public/hot
 /public/storage
+/public/js/chunks
+/public/js/app.js
+/public/css/app.css
+/public/mix-manifest.json
 /storage/*.key
 /vendor
 .env

package.json

@@ -1,21 +1,48 @@
 {
     "private": true,
+    "sideEffects": true,
     "scripts": {
         "dev": "npm run development",
         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
         "watch": "npm run development -- --watch",
         "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
         "prod": "npm run production",
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.9.5",
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^7.0",
-        "laravel-mix": "^5.0.1",
+        "css-loader": "^3.5.3",
+        "eslint": "^6.8.0",
+        "eslint-plugin-vue": "^7.0.0-alpha.1",
+        "glob-all": "^3.2.1",
+        "imagemin-svgo": "^8.0.0",
+        "jquery": "^3.2",
+        "laravel-mix": "^5.0.4",
+        "laravel-mix-bundle-analyzer": "^1.0.5",
+        "laravel-mix-purgecss": "^5.0.0-rc.2",
+        "laravel-mix-vue-svgicon": "^2.0.4",
         "lodash": "^4.17.13",
+        "node-sass": "^4.14",
+        "popper.js": "^1.12",
+        "purgecss-webpack-plugin": "^1.6.0",
+        "purgecss-whitelister": "^2.4.0",
+        "raw-loader": "^4.0.1",
         "resolve-url-loader": "^3.1.0",
-        "sass": "^1.15.2",
-        "sass-loader": "^8.0.0"
+        "sass": "^1.26.3",
+        "sass-loader": "^8.0.2",
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.10"
+    },
+    "dependencies": {
+        "@opentok/client": "^2.17.1",
+        "vue-grid-layout": "^2.3.7",
+        "vue-socket.io": "3.0.3",
+        "vuetify": "^2.2.23",
+        "vuex": "^3.2.0"
     }
 }

resources/js/app.js

@@ -1 +1,49 @@
-require('./bootstrap');
+/* jQuery & Bootstrap Init */
+
+import jQuery from 'jquery'
+
+window.$ = window.jQuery = jQuery;
+
+/* Fix */
+
+import './fix.scss'
+
+let location = window.location;
+let pathname = location.pathname;
+
+window.axios = require('axios')
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
+
+window.OT = require("@opentok/client")
+
+import Vue from 'vue'
+window.Vue = Vue
+Vue.prototype.$eventBus = new Vue()
+
+import Vuetify from 'vuetify'
+Vue.use(Vuetify)
+
+import store from './components/vuex/index'
+
+const files = require.context('./', true, /\.vue$/i, 'lazy').keys()
+
+files.forEach(file => {
+    let component = file.split('/').pop().split('.')[0]
+    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: '#app',
+    store,
+    vuetify: new Vuetify()
+})

resources/js/components/vuex/index.js

@@ -0,0 +1,139 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default () => new Vuex.Store({
+    modules: {
+        //
+    },
+    state: {
+        user: {
+            id: null,
+            UID: null,
+            name: 'Guest',
+            type: 'guest',
+            pin: null,
+            avatarFile: null,
+            is_active_and_visible: true,
+            isAdmin: false
+        },
+        session: {
+            screenSharingAvailable: false,
+            sessionConnected: false,
+            screenSharingActive: false
+        },
+        active_menu_item: {
+            name: 'Lobbies',
+            class: 'mdi mdi-view-dashboard',
+            template: 'lobby-list'
+        },
+        meeting: {
+            id: "",
+            name: "",
+            passwordRequired: false,
+            lobby: null,
+            active_members: 0,
+            scheduledDate: null,
+            startedAt: null
+        },
+        lobbies: [],
+        chat_user_notification: false
+    },
+    mutations: {
+        setUsername: (state, data) => {
+            state.user.name = data
+        },
+        setUsertype: (state, data) => {
+            state.user.type = data
+        },
+        setInitialUser(state, data) {
+            state.user = data
+        },
+        setUser(state, data) {
+            state.user = data
+        },
+        setUserAvatarFile(state, data) {
+            state.user.avatarFile = data
+        },
+        setUserActivityState: (state, data) => {
+            state.user.is_active_and_visible = data
+        },
+        setScreenShareState: (state, data) => {
+            state.session.screenSharingActive = data
+        },
+        setMenuItem: (state, data) => {
+            state.active_menu_item = data
+        },
+        setLobbies(state, data) {
+            state.lobbies = data
+        },
+        addNewLobby(state, data) {
+            state.lobbies.push(data)
+        },
+        setSingleLobby(state, data) {
+            let lobby = state.lobbies.findIndex((cur) => cur.id == data.id)
+
+            if (lobby !== -1) {
+                state.lobbies[lobby].meetings = data.meetings.map(m => {
+                    m.active_members = []
+                    m.associates_online = []
+                    return m
+                });
+            }
+        },
+        setLobbyActivity(state, data) {
+            let lobby = state.lobbies.filter((cur) => cur.id == data.lobbyID)
+            if (lobby.length) {
+                let meeting = lobby[0].meetings.filter((cur) => cur.id == data.meetingID)
+                if (meeting.length) {
+                    meeting[0].active_members = data.active_members
+                    meeting[0].associates_online = data.associates_online
+
+                    if (state.meeting.id && state.meeting.id == meeting[0].id) {
+                        state.meeting.active_members = data.active_members
+                    }
+                }
+            }
+
+        },
+        setNewMeetingInLobby(state, data) {
+            let lobby = state.lobbies.filter((cur) => cur.id == parseInt(data.lobby.id))
+
+            if (lobby.length) {
+                data.finalDate = new Date(data.scheduled_date ? data.scheduled_date : data.created_at)
+                lobby[0].meetings.push(data)
+                lobby[0].meetings.sort((a, b) => {
+                    return a.finalDate - b.finalDate
+                })
+            }
+        },
+        setMeeting(state, data) {
+            state.meeting = data
+        },
+        setScreesharingAvailability(state, data) {
+            state.session.screenSharingAvailable = data
+        },
+        setSessionConnectivityState(state, data) {
+            state.session.sessionConnected = data
+        },
+        setChatUserNotification(state, data) {
+            state.chat_user_notification = data
+        }
+    },
+    actions: {
+        leaveMeeting(store) {
+            let meeting = {
+                id: '',
+                name: '',
+                passwordRequired: false,
+                lobby: null,
+                active_members: 0,
+                scheduledDate: null,
+                startedAt: null
+            }
+
+            store.commit('setMeeting', meeting)
+        }
+    }
+})

resources/sass/app.scss

@@ -1 +1,4 @@
 //
+body {
+    
+}

webpack.mix.js

@@ -1,4 +1,65 @@
-const mix = require('laravel-mix');
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const glob = require('glob-all')
+const PurgecssPlugin = require('purgecss-webpack-plugin')
+const whitelister = require('purgecss-whitelister')
+require('laravel-mix-bundle-analyzer')
+require('laravel-mix-purgecss')
+require('laravel-mix-vue-svgicon')
+
+mix.disableNotifications()
+class Extractor {
+    static extract(content) {
+        return content.match(/[A-Za-z0-9-_:\/]+/g) || []
+    }
+}
+
+mix.webpackConfig({
+    optimization: {
+        providedExports: true,
+        usedExports: true,
+        sideEffects: true
+    },
+    output: {
+        filename: '[name].js',
+        chunkFilename: 'js/chunks/[name].js?id=[chunkhash]'
+    },
+    plugins: [
+        new PurgecssPlugin({
+            paths: glob.sync([
+                path.join(__dirname, 'resources/views/**/*.blade.php'),
+                path.join(__dirname, 'resources/js/**/*.vue'),
+            ]),
+            extractors: [
+                {
+                    extractor: Extractor,
+                    extensions: ['html', 'js', 'php', 'vue'],
+                },
+            ],
+            whitelist: whitelister([
+                './node_modules/vuetify/dist/vuetify.min.css',
+                './node_modules/toastr/build/toastr.css'
+            ]),
+            whitelistPatterns: [
+                /.*q-*/,
+                /.*relative-position*/,
+                /.*expand-*/,
+                /.*vue-grid*/
+            ]
+        })
+    ]
+})
+
+mix.babelConfig({
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                modules: false
+            }
+        ]
+    ]
+})
 
 /*
  |--------------------------------------------------------------------------
@@ -12,4 +73,11 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
-    .sass('resources/sass/app.scss', 'public/css');
+    .sass('resources/sass/app.scss', 'public/css')
+    .options({
+        processCssUrls: false
+    })
+    .svgicon('public/img')
+    .version()
+
+//mix.bundleAnalyzer()