fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/AppBase.vue

@@ -1,614 +1,1054 @@
-<!--
- @ Description: This is a root component to create the App
- @ What it does: Many things
- @ Must be used.
--->
-<template>
-  <div id="App-base" fluid :class="{ iPad: resizeiPad }">
-    <transition name="bounce" mode="in-out">
-      <div
-        v-if="showBuildInfo && !buildInfoClicked"
-        id="build-info"
-        @click="buildInfoClicked = true"
-      >
-        <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
-        <span>FCAD {{ this.$helper.getFcadVersion() }}</span>
-        <span>{{ this.$helper.getBuildTime() }}</span>
-      </div>
-    </transition>
-
-    <router-view class="box" />
-    <app-icons />
-  </div>
-</template>
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  props: {
-    appConfig: {
-      type: Object,
-      default: () => {
-        return {
-          lang: 'fr' // set language of App: default French
-        }
-      }
-    }
-  },
-
-  data() {
-    return {
-      randKey: null,
-      isLandScape: null,
-      initialDeviceOrentation: null,
-      appIsFullScreen: false,
-      resizeiPad: false,
-      buildInfoClicked: false
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'getCurrentBrowser',
-      'getIsMobile',
-      'getDeviceType',
-      'getModuleInfo',
-      'getUserInteraction',
-      'getConnectionInfo'
-    ]),
-    getwidth() {
-      return window.innerWidth
-    },
-    getheight() {
-      return window.innerHeight
-    },
-    showBuildInfo() {
-      return (
-        process.env.NODE_ENV === 'production' &&
-        window.location.host === 'projets.cegepadistance.ca'
-      )
-    }
-  },
-  watch: {
-    getConnectionInfo: {
-      //in development environment (localhost), don't wait for the axios call
-
-      immediate: process.env.NODE_ENV === 'development',
-      handler() {
-        /**
-         * Attach listener to detect when user navigates to a new page, switches tabs, closes the tab, minimizes or closes the browser, or, on mobile,
-         *  switches from the browser to a different app To save user data to LRS/LMS.
-         * As of 06/2021 MDN Web Doc advise preferring the 'visibilitychange' event over 'unload/beforeunload'
-         * event to send data over a serveur.
-         * Ref:https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
-         * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
-         */
-
-        if (this.getIsMobile) {
-          document.addEventListener(
-            'visibilitychange',
-            () => {
-              if (document.visibilityState === 'hidden') {
-                this.executeCloseEventTriggered()
-              }
-            },
-            false
-          )
-        } else {
-          //attached listener to terminate LMS|LRS communication
-          if (
-            this.getModuleInfo.packageType === 'xapi' &&
-            this.getConnectionInfo &&
-            this.getConnectionInfo.actor &&
-            this.getConnectionInfo.remote
-          ) {
-            window.addEventListener('beforeunload', (e) => {
-              this.executeCloseEventTriggered()
-            })
-          } else
-            window.addEventListener(
-              'beforeunload',
-              this.executeCloseEventTriggered
-            )
-        }
-        // initialize scorm Commuinication with LMS || xAPI LRS
-        if (this.getModuleInfo.packageType === 'scorm') this.$scorm.Initialize()
-        else if (
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote
-        ) {
-          const {
-            auth,
-            endpoint,
-            registration = this.$xapi.ruuid()
-          } = this.getConnectionInfo
-
-          const config = {
-            auth,
-            endpoint,
-            registration,
-            activity_platform: `SIPI_organizationId`
-          }
-
-          this.$xapi._configLRS(config) // configure and launch LRS
-          this.fetchSettingsFromServer()
-        }
-      }
-    }
-  },
-
-  created() {
-    this.setProgress()
-    window.versionFCAD = this.$helper.getFcadVersionString()
-    //check if this is running in a mobile environment and register state in the store
-    const mobileDetect = require('mobile-detect')
-
-    const md = new mobileDetect(window.navigator.userAgent)
-    md.mobile()
-      ? this.$store.dispatch('setMobileState', true)
-      : this.$store.dispatch('setMobileState', false)
-    const currentBrowser = this.getBrowser() //get current browser vendor
-
-    // register the current browser in the store
-    this.$store.dispatch('setCurrentBrowser', currentBrowser)
-
-    // register device type running the App in the store (ios, Android or Deskop)
-    this.$store.dispatch('setDeviceType', this.detectDevice())
-    this.fetchSettingsFromServer()
-  },
-  mounted() {
-    // set the language of the app
-    this.setLocale(this.appConfig.lang)
-    this.$bus.$on('set-comp-status', (name, status) =>
-      this.updateTracker(name, status)
-    )
-
-    this.$bus.$on('set-user-progress', this.setProgress())
-  },
-  beforeDestroy() {
-    this.$bus.$off('set-comp-status')
-  },
-  methods: {
-    /**
-     * @description set the desired language for the app default is french
-     * @param {String} [lang=fr]
-     */
-    setLocale(lang) {
-      if (!lang) lang = 'fr'
-      else {
-        lang = lang.toLowerCase()
-        if (lang === 'français' || lang === 'francais' || lang === 'french')
-          lang = 'fr'
-        else if (lang === 'english' || lang === 'anglais') lang = 'en'
-        else lang = lang.substring(0, 2).toLowerCase()
-        this.$i18n.locale = lang
-      }
-    },
-    getScormState() {
-      return this.$scorm.GetValue('cmi.suspend_data')
-    },
-    getBrowser() {
-      let browser
-      const test = (regexp) => regexp.test(window.navigator.userAgent) //defining the testing fonction
-
-      switch (true) {
-        case test(/edg/i):
-          browser = 'Edge'
-          break
-        case test(/trident/i):
-          browser = 'IE'
-          break
-        case test(/firefox|fxios/i):
-          browser = 'Firefox'
-          break
-        case test(/opr\//i):
-          browser = 'Opera'
-          break
-        case test(/ucbrowser/i):
-          browser = 'UC Browser'
-          break
-        case test(/samsungbrowser/i):
-          browser = 'Samsung Browser'
-          break
-        case test(/chrome|chromium|crios/i):
-          if (navigator.brave && navigator.brave.isBrave()) browser = 'Brave'
-          // as of 2020-11 Brave adds a Class brave in the navigator object
-          else browser = 'Chrome'
-          break
-        case test(/safari/i):
-          browser = 'Safari'
-          break
-        default:
-          browser = 'Other'
-          break
-      }
-      // Return browser initiale
-      return browser
-    },
-
-    detectDevice() {
-      let device = null
-      if (
-        navigator.appVersion.includes('iPad') ||
-        navigator.appVersion.includes('iPhone')
-      )
-        device = 'iOSDevice'
-      else if (navigator.appVersion.includes('Android'))
-        device = 'AndroidDevice'
-      else device = 'Desktop'
-
-      return device
-    },
-
-    fetchSettingsFromServer() {
-      if (this.getModuleInfo.packageType !== 'xapi') return
-      if (!this.getConnectionInfo || !this.getConnectionInfo.remote) return
-
-      const activity_id = this.getModuleInfo.courseID
-        ? this.getConnectionInfo.activity_id.replace(
-            `/${this.getModuleInfo.id}`,
-            ''
-          )
-        : this.getConnectionInfo.activity_id
-
-      //Get existing record for user preferred settings
-      const applicationSettings = this.$xapi._getPreferredSettings(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        activity_id
-      )
-
-      if (applicationSettings.length && applicationSettings[0].userSettings)
-        //save result to store
-        this.$store.dispatch(
-          'setApplicationSettings',
-          applicationSettings[0].userSettings
-        )
-
-      //Get existing record for play bar settings
-      const pbValues = this.$xapi._getPlaybarValues(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        activity_id
-      )
-
-      if (pbValues.length) {
-        //save result to store
-        this.$store.dispatch('setMediaVolume', pbValues[0].volume)
-        this.$store.dispatch('setMediaSubtitles', pbValues[0].subtitlesEnabled)
-      }
-    },
-
-    executeCloseEventTriggered() {
-      if (
-        this.getModuleInfo.packageType === 'scorm' &&
-        this.$scorm.initialized
-      ) {
-        this.$bus.$emit('save-to-scorm') // emit event to save to scorm before closing the app
-        this.$scorm.Finish()
-      }
-      //Xapi context
-      else if (
-        this.getModuleInfo.packageType === 'xapi' &&
-        this.getConnectionInfo &&
-        this.getConnectionInfo.actor &&
-        this.getConnectionInfo.remote
-      ) {
-        // Communicate ending of activity
-        this.$bus.$emit('fire-exit-event', null, true)
-        this.routeChangeCounter = 0 //reset counter after saving
-      }
-    },
-    setProgress() {
-      this.updateTracker('appBase', 'loading')
-      const packageType = this.getModuleInfo.packageType
-
-      switch (packageType) {
-        case 'scorm':
-          // Get saved data from suspend_data or from localStorage to update the store:
-          // LMS is connected
-          if (this.$scorm.initialized) {
-            // chacked if there is a existing record in the LMS
-            if (this.$scorm.GetValue('cmi.suspend_data') !== '') {
-              const scormRecord = this.$scorm
-                .GetValue('cmi.suspend_data')
-                .replace(/\\/g, '')
-              const userProgress = JSON.parse(scormRecord).userData
-              const routeHistory = JSON.parse(scormRecord).routeHistory
-
-              this.$store.dispatch('setUserMetaData', userProgress)
-              this.$store.dispatch('setRouteHistory', routeHistory) // update store recored with existing record
-              this.updateTracker('appBase', 'ready')
-            }
-
-            // No LMS use LocalStorage record
-          } else {
-            this.$idb.openDB().then(() => {
-              this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
-                if (res && res.$record) {
-                  const {
-                    routeHistory,
-                    userSettings,
-                    ...userData
-                  } = res.$record
-                  this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
-                  this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
-                  if (userSettings)
-                    this.$store.dispatch('setApplicationSettings', userSettings) // update store record with existing user settings
-                  this.updateTracker('appBase', 'ready')
-                }
-              })
-            })
-          }
-
-          break
-
-        case 'xapi':
-          {
-            if (
-              this.getConnectionInfo &&
-              this.getConnectionInfo.actor &&
-              this.getConnectionInfo.remote
-            ) {
-              //Try to get the user progress from LRS
-              const userProgress = this.$xapi._getProgress(
-                this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-                this.getConnectionInfo.activity_id
-              )
-              if (userProgress) {
-                const { routeHistory, ...userData } = userProgress
-                // console.log('Progress from Server: ', {
-                //   userData,
-                //   routeHistory
-                // })
-                this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
-                this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing record
-              }
-              this.updateTracker('appBase', 'ready')
-            } else {
-              //Get existing records for user data in local store
-              this.$idb.openDB().then(() => {
-                this.$idb
-                  .getFromDB(this.getModuleInfo.idbID)
-                  .then((res) => {
-                    if (res && res.$record) {
-                      const {
-                        routeHistory,
-                        userSettings,
-                        ...userData
-                      } = res.$record
-
-                      this.$store.dispatch('setUserMetaData', userData) // update store record with existing record
-                      this.$store.dispatch('setRouteHistory', routeHistory) // update store record with existing route info
-
-                      if (userSettings) {
-                        this.$store.dispatch(
-                          'setApplicationSettings',
-                          userSettings
-                        ) // update store record with existing user setting
-                      }
-                    }
-                  })
-                  .then(() => this.updateTracker('appBase', 'ready'))
-              })
-            }
-          }
-
-          break
-      }
-    },
-    updateTracker(name, status) {
-      this.$store.dispatch('updateCompStatusTracker', { name, status })
-    }
-  }
-}
-</script>
-<style lang="scss">
-#App-base {
-  width: 100%;
-  height: 100vh;
-
-  #build-info {
-    opacity: 0.9;
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    color: #fff;
-    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
-    background-color: hotpink;
-    font-family: serif, Impact, Arial;
-    font-size: 11px;
-    padding: 3px;
-    cursor: pointer;
-    z-index: 999;
-    span {
-      text-align: center;
-      display: block;
-    }
-  }
-
-  .module {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-
-    .navbar {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 10;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      align-content: start;
-      width: 67px;
-      height: 100%;
-    }
-
-    .module-wrapper {
-      width: 100%;
-      position: relative;
-
-      #wrapper-content {
-        width: 100%;
-        position: relative;
-        padding-right: 0 !important;
-        padding-left: 0 !important;
-
-        &.active {
-          overflow: hidden;
-        }
-
-        .box {
-          width: 100%;
-          height: 95%;
-
-          .app-page {
-            width: 100%;
-            margin-top: 60px;
-
-            .row {
-              width: 100%;
-              margin-right: 0;
-              margin-left: 0;
-            }
-          }
-        }
-      }
-
-      .app-comp-table-of-content {
-        display: -webkit-flex;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        position: absolute;
-        top: 0px;
-        min-height: 100%;
-        z-index: 1;
-      }
-    }
-
-    .app-nav {
-      .md-controller {
-        display: -webkit-flex;
-        display: flex;
-        flex-direction: row;
-        align-items: baseline;
-        //width: $widthPlayer;
-        width: 50%;
-
-        .ctrl-play {
-          display: -webkit-flex;
-          display: flex;
-          flex-direction: row;
-          align-items: baseline;
-          //width: $widthPlayer;
-          width: 50%;
-
-          #progress-bar {
-            display: block;
-            //width: $widthProgressBar;
-            width: 150px;
-            //height: $heigthProgressBar;
-            height: 10px;
-            position: relative;
-            overflow: hidden;
-
-            #progress {
-              display: block;
-              height: 100%;
-              background-color: red;
-            }
-
-            #progress-shaddow {
-              display: block;
-              height: 100%;
-              position: absolute;
-              top: 0px;
-              left: 0px;
-              z-index: -1;
-            }
-          }
-        }
-
-        .ctrl-subtitle {
-          //width: $widthCtrSubtitle;
-          width: 10%;
-        }
-
-        .ctrl-sound {
-          display: -webkit-flex;
-          display: flex;
-          flex-direction: row;
-          align-items: baseline;
-          justify-content: space-between;
-          //width: $widthCtrlSound;
-          width: 40%;
-        }
-      }
-    }
-  }
-}
-
-.macWarn-overlay {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 99999;
-  width: 100%;
-  height: 100vh;
-  display: none;
-  background-color: rgba(0, 0, 0, 0.92);
-  opacity: 0;
-  &.warningPortait {
-    display: block;
-    opacity: 1;
-  }
-
-  .macWarn-box {
-    width: 50%;
-    position: absolute;
-
-    top: calc(45% - 15% / 2);
-    left: 25%;
-
-    h1 {
-      text-align: center;
-      color: #fff !important;
-    }
-
-    p {
-      text-align: center;
-      font-size: 1.3rem;
-      color: #fff !important;
-    }
-
-    #btn-warning-ok {
-      display: block;
-      margin: 10px auto;
-    }
-  }
-}
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-.fade-enter, .fade-leave-to
-/* .component-fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
-
-.app-icons-svg {
-  width: 30px;
-  height: 30px;
-  fill: #fff;
-  stroke: #fff;
-  cursor: pointer;
-}
-
-.svg-hidden {
-  display: none;
-}
-</style>
+<!--
+ @ Description: This is a root component to create the App
+ @ What it does:
+  - validate the data for the App configuration
+  - Send the xapi statement
+  - Manage the fetching and setting of data from serveur
+  - Example of use: <app-base :app-config="$data"></app-base>
+ @ Must be used.
+-->
+<template>
+  <div id="App-base" fluid :class="{ iPad: resizeiPad }">
+    <template v-if="error.length">
+      <v-row>
+        <v-col>
+          <app-base-error-display
+            :errors-list="error"
+            error-type="appConfig"
+            error-title="Configuration de l'application"
+          />
+        </v-col>
+      </v-row>
+    </template>
+    <template v-else>
+      <transition name="bounce" mode="in-out">
+        <div
+          v-if="showBuildInfo && !buildInfoClicked"
+          id="build-info"
+          @click="buildInfoClicked = true"
+        >
+          <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
+          <span>FCAD {{ $helper.getFcadVersion() }}</span>
+          <span>{{ $helper.getBuildTime() }}</span>
+        </div>
+      </transition>
+
+      <router-view class="box" />
+
+      <app-icons-next :extra-icons="userExtraIcons" />
+    </template>
+
+    <v-overlay
+      id="overlay_loading"
+      :model-value="!appReady"
+      class="align-center justify-center"
+      scrim="white"
+      blur="3px"
+      opacity="0.8"
+    >
+      <div class="text-center grp-spinners">
+        <v-progress-circular
+          :size="50"
+          :width="3"
+          color="#003552"
+          bg-color="#d3effe"
+          indeterminate
+        ></v-progress-circular>
+
+        <span class="sr-only">
+          {{ $t('message.loading_state_msg') }}
+        </span>
+      </div>
+    </v-overlay>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore.js'
+import { timerMixin } from '../mixins/timerMixin'
+import { validateAppContent } from '../shared/validators'
+import AppBaseErrorDisplay from './AppBaseErrorDisplay.vue'
+import mobileDetect from 'mobile-detect'
+export default {
+  components: { AppBaseErrorDisplay },
+  mixins: [timerMixin],
+  props: {
+    appConfig: {
+      type: Object,
+      required: true,
+      validator: (value) => {
+        if (import.meta.env.DEV) return validateAppContent(value).length === 0
+      }
+    }
+  },
+  setup() {
+    const store = useAppStore()
+    return { store }
+  },
+
+  data() {
+    return {
+      randKey: null,
+      isLandScape: null,
+      initialDeviceOrentation: null,
+      appIsFullScreen: false,
+      resizeiPad: false,
+      buildInfoClicked: false,
+      error: []
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getCurrentBrowser',
+      'getIsMobile',
+      'getDeviceType',
+      'getModuleInfo',
+      'getAppStatus',
+      'getUserInteraction',
+      'getConnectionInfo',
+      'getDataFromServer',
+      'getAllActivities',
+      'getMediaPlaybarValues',
+      'getAppConfigs',
+      'getErrorMenu'
+    ]),
+    getwidth() {
+      return window.innerWidth
+    },
+    getheight() {
+      return window.innerHeight
+    },
+
+    showBuildInfo() {
+      return (
+        import.meta.env.PROD &&
+        window.location.host === 'projets.cegepadistance.ca'
+      )
+    },
+    appReady() {
+      let readyState = this.getAppStatus === 'ready' ? true : false
+
+      return readyState
+    },
+    displayLang() {
+      let lang = false
+      const displayList = ['en-US', 'fr-FR', 'es-ES'] // list of xapi verbs language display
+
+      if (this.getModuleInfo.packageType === 'xapi') {
+        lang = displayList.find((l) => l.includes(this.$i18n.locale))
+      }
+      return lang
+    },
+    userExtraIcons() {
+      const icons = this.$helper.getSettingsFromStore('extra_icons')
+        ? this.$helper.getSettingsFromStore('extra_icons')
+        : null
+      return icons
+    }
+  },
+  watch: {
+    getConnectionInfo: {
+      deep: true,
+      //in development environment (localhost), don't wait for the axios call
+      immediate: import.meta.env.DEV,
+      handler() {
+        /**
+         * Attach listener to detect when user navigates to a new page, switches tabs, closes the tab, minimizes or closes the browser, or, on mobile,
+         *  switches from the browser to a different app To save user data to LRS/LMS.
+         * As of 06/2021 MDN Web Doc advise preferring the 'visibilitychange' event over 'unload/beforeunload'
+         * event to send data over a serveur.
+         * Ref:https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
+         * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
+         */
+
+        if (!this.getConnectionInfo) return
+        if (this.getIsMobile) {
+          document.addEventListener(
+            'visibilitychange',
+            () => {
+              if (document.visibilityState === 'hidden') {
+                this.executeCloseEventTriggered()
+              }
+            },
+            false
+          )
+        }
+        // initialize scorm Commuinication with LMS || xAPI LRS
+        if (this.getModuleInfo.packageType === 'scorm') this.$scorm.Initialize()
+        else if (
+          this.getModuleInfo.packageType === 'xapi' &&
+          this.getConnectionInfo &&
+          this.getConnectionInfo.actor &&
+          this.getConnectionInfo.remote
+        ) {
+          const {
+            auth,
+            endpoint,
+            registration = this.$xapi.ruuid()
+          } = this.getConnectionInfo
+
+          const config = {
+            auth,
+            endpoint,
+            registration,
+            activity_platform: `SIPI_organizationId`
+          }
+
+          this.$xapi._configLRS(config) // configure and launch LRS
+
+          setTimeout(() => {
+            this.fetchDataFromServer().then(() => {
+              setTimeout(() => {
+                this.setProgress()
+              }, 200)
+            })
+          }, 200)
+        } else this.setProgress()
+      }
+    }
+  },
+
+  created() {
+    if (import.meta.env.DEV) {
+      this.checkForErrors()
+    }
+    //Declare loading state if no error was detected
+
+    if (!this.error.length) {
+      this.updateTracker('appBase', 'loading')
+      this.setAppConfigs(this.appConfig)
+    }
+
+    window.versionFCAD = this.$helper.getFcadVersionString()
+    //check if this is running in a mobile environment and register state in the store
+    const md = new mobileDetect(window.navigator.userAgent)
+    md.mobile() !== null
+      ? this.setMobileState(true)
+      : this.setMobileState(false)
+    const currentBrowser = this.getBrowser() //get current browser vendor
+
+    // register the current browser in the store
+    this.setCurrentBrowser(currentBrowser)
+
+    // register device type running the App in the store (ios, Android or Deskop)
+    this.setDeviceType(this.detectDevice())
+
+    this.$bus.$on('set-comp-status', this.updateTracker)
+    this.$bus.$on('send-xapi-statement', this.sendXapiStatements)
+    this.$bus.$on('reset-userdata', this.resetUserData)
+    this.$bus.$on('fire-exit-event', this.endLesson)
+    this.$bus.$on('reset-focus-on', this.resetFocus)
+    this.$bus.$on('move-to-target', this.moveTo)
+  },
+  beforeMount() {
+    window.addEventListener(
+      'beforeunload',
+      (e) => {
+        this.executeCloseEventTriggered()
+        // e.preventDefault()
+        // e.returnValue = true
+      },
+      true
+    )
+  },
+
+  mounted() {
+    // set the language of the app
+    this.setLocale(this.getAppConfigs.lang)
+  },
+  beforeUnmount() {
+    this.$bus.$off('set-comp-status', this.updateTracker)
+    this.$bus.$off('reset-userdata', this.resetUserData)
+    this.$bus.$off('fire-exit-event', this.endLesson)
+    this.$bus.$off('reset-focus-on', this.resetFocus)
+    this.$bus.$off('send-xapi-statement', this.sendXapiStatements)
+    this.$bus.$off('move-to-target', this.moveTo)
+
+    if (this.getAppConfigs.remote) this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
+  },
+  methods: {
+    ...mapActions(useAppStore, [
+      'setDeviceType',
+      'updateDataFetchFromServer',
+      'setUserMetaData',
+      'setRouteHistory',
+      'setApplicationSettings',
+      'setMediaPlaybarValues',
+      'updateCompStatusTracker',
+      'setAppConfigs',
+      'setMobileState',
+      'setCurrentBrowser'
+    ]),
+    /**
+     * @description set the desired language for the app default is french
+     * @param {String} [lang=fr]
+     */
+
+    setLocale(lang) {
+      if (!lang) lang = 'fr'
+      else {
+        lang = lang.toLowerCase()
+        if (lang === 'français' || lang === 'francais' || lang === 'french')
+          lang = 'fr'
+        else if (lang === 'english' || lang === 'anglais') lang = 'en'
+        else lang = lang.substring(0, 2).toLowerCase()
+        this.$i18n.locale = lang
+      }
+    },
+
+    getScormState() {
+      return this.$scorm.GetValue('cmi.suspend_data')
+    },
+
+    getBrowser() {
+      let browser
+      const test = (regexp) => regexp.test(window.navigator.userAgent) //defining the testing fonction
+
+      switch (true) {
+        case test(/edg/i):
+          browser = 'Edge'
+          break
+        case test(/trident/i):
+          browser = 'IE'
+          break
+        case test(/firefox|fxios/i):
+          browser = 'Firefox'
+          break
+        case test(/opr\//i):
+          browser = 'Opera'
+          break
+        case test(/ucbrowser/i):
+          browser = 'UC Browser'
+          break
+        case test(/samsungbrowser/i):
+          browser = 'Samsung Browser'
+          break
+        case test(/chrome|chromium|crios/i):
+          if (navigator.brave && navigator.brave.isBrave()) browser = 'Brave'
+          // as of 2020-11 Brave adds a Class brave in the navigator object
+          else browser = 'Chrome'
+          break
+        case test(/safari/i):
+          browser = 'Safari'
+          break
+        default:
+          browser = 'Other'
+          break
+      }
+      // Return browser initiale
+      return browser
+    },
+
+    detectDevice() {
+      let device = null
+      if (
+        navigator.appVersion.includes('iPad') ||
+        navigator.appVersion.includes('iPhone')
+      )
+        device = 'iOSDevice'
+      else if (navigator.appVersion.includes('Android'))
+        device = 'AndroidDevice'
+      else device = 'Desktop'
+
+      return device
+    },
+
+    async fetchDataFromServer() {
+      this.updateTracker('appBase_fetch', 'loading')
+      if (this.getModuleInfo.packageType !== 'xapi') return
+      if (!this.getConnectionInfo || !this.getConnectionInfo.remote) return
+
+      const progress = await this.$xapi._getProgress(
+        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        this.getConnectionInfo.activity_id
+      )
+      const { routeHistory, ...userProgress } = progress
+
+      const completedState = await this.$xapi._getLessonStatus(
+        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        this.getConnectionInfo.activity_id
+      )
+
+      //=======UPCOMING: Uncomment lines bellow when these properties are integrated ========
+      // Get existing record for user preferred settings
+      // const applicationSettings = await this.$xapi._getPreferredSettings(
+      //   this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+      //   this.getConnectionInfo.activity_id
+      // )
+
+      //======= End UPCOMING: Uncomment when this property are integrated ========
+      //Get existing record for play bar settings. Play bar info is from the activity Parent ID and not activity id
+      const _url = new URL(this.getConnectionInfo.activity_id)
+      const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
+      const playbarValues = await this.$xapi._getPlaybarValues(
+        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        parentID
+      )
+      const lessonPosition = await this.$xapi._getLessonPosition(
+        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        this.getConnectionInfo.activity_id
+      )
+
+      //Update the App Store data
+      this.updateDataFetchFromServer({
+        userProgress,
+        routeHistory,
+        lessonPosition,
+        completedState,
+        playbarValues
+      })
+      // console.log('DATA FROM SERVER', {
+      //   userProgress,
+      //   routeHistory,
+      //   lessonPosition,
+      //   completedState,
+      //   playbarValues
+      // })
+
+      this.updateTracker('appBase_fetch', 'ready')
+    },
+
+    executeCloseEventTriggered() {
+      if (
+        this.getModuleInfo.packageType === 'scorm' &&
+        this.$scorm.initialized
+      ) {
+        this.$bus.$emit('save-to-scorm') // emit event to save to scorm before closing the app
+        this.$scorm.Finish()
+      }
+      //Xapi context
+      else if (
+        this.getModuleInfo.packageType === 'xapi' &&
+        this.getConnectionInfo &&
+        this.getConnectionInfo.actor &&
+        this.getConnectionInfo.remote
+      ) {
+        this.endLesson(null, true)
+      }
+    },
+
+    async setProgress() {
+      const packageType = this.getModuleInfo.packageType
+
+      switch (packageType) {
+        case 'scorm':
+          // Get saved data from suspend_data or from localStorage to update the store:
+          // LMS is connected
+          if (this.$scorm.initialized) {
+            // chacked if there is a existing record in the LMS
+            if (this.$scorm.GetValue('cmi.suspend_data') !== '') {
+              const scormRecord = this.$scorm
+                .GetValue('cmi.suspend_data')
+                .replace(/\\/g, '')
+              const userProgress = JSON.parse(scormRecord).userData
+              const routeHistory = JSON.parse(scormRecord).routeHistory
+
+              this.setUserMetaData(userProgress)
+              this.setRouteHistory(routeHistory) // update store recored with existing record
+            }
+
+            // No LMS use LocalStorage record
+          } else {
+            this.$idb.openDB().then(() => {
+              this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
+                if (res && res.$record) {
+                  const { routeHistory, userSettings, ...userData } =
+                    res.$record
+                  this.setUserMetaData(userData) // update store record with existing record
+                  this.setRouteHistory(routeHistory) // update store record with existing route info
+                  if (userSettings) this.setApplicationSettings(userSettings) // update store record with existing user settings
+                }
+              })
+            })
+          }
+
+          break
+
+        case 'xapi':
+          {
+            if (
+              this.getConnectionInfo &&
+              this.getConnectionInfo.actor &&
+              this.getConnectionInfo.remote
+            ) {
+              if (!this.getDataFromServer) return
+              //Try to get the user progress from LRS
+              const { playbarValues, routeHistory, userProgress } =
+                this.getDataFromServer
+
+              this.setUserMetaData(userProgress) // update store record with existing record
+              this.setRouteHistory(routeHistory) // update store record with existing record
+
+              if (playbarValues) this.setMediaPlaybarValues(playbarValues) // update store record with existing record
+              //Should update the playbar values
+            } else {
+              //Get existing records for user data in local store
+              this.$idb.openDB().then(() => {
+                this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
+                  if (res && res.$record) {
+                    const { routeHistory, userSettings, ...userData } =
+                      res.$record
+
+                    this.setUserMetaData(userData) // update store record with existing record
+                    this.setRouteHistory(routeHistory) // update store record with existing route info
+
+                    if (userSettings) {
+                      this.setApplicationSettings(userSettings) // update store record with existing user setting
+                    }
+                  }
+                })
+              })
+            }
+          }
+
+          break
+      }
+      this.updateTracker('appBase', 'ready')
+    },
+    updateTracker(name, status) {
+      this.updateCompStatusTracker({ name, status })
+    },
+    //============================Multiple Satements  Sending at once======================================
+    /**
+     * @description Send a custom statements to the lrs. Receive some custom params and build a statement to send
+     * @param {Array} stmts- array of stamtents objects that will be send to the server
+     * @param {Function} cb
+     */
+    async sendXapiStatements(stmts, cb = null, withFetch = true) {
+      cb = cb || null
+      if (!stmts) return
+      let stmtsArray = []
+
+      stmts.constructor === Object
+        ? stmtsArray.push(stmts)
+        : (stmtsArray = [...stmts])
+
+      const crsParams = this.getModuleInfo
+
+      if (
+        this.getConnectionInfo &&
+        this.getConnectionInfo.actor &&
+        this.getConnectionInfo.remote
+      ) {
+        const stmtsQueue = []
+
+        stmtsArray.forEach((stmtObj) => {
+          const {
+            id,
+            result = null,
+            definition,
+            objectType,
+            type,
+            description,
+            verb,
+            extensions,
+            duration,
+            completion
+          } = stmtObj
+
+          //define the activity id
+          let activityId
+          //=========================== activity ID of Object ==========================================
+          /*
+           * Define the acitivity id of the stmt according to following:
+           * The statement is sent at component/ element level : there is Id and Id is not null (id of the element)
+           * The statement is sent at module level. there is no id
+           *  the Statement must be sent at the course level: There course_id exist and id is the course_id
+           */
+
+          if (id && id !== crsParams.courseID)
+            activityId = `${this.getConnectionInfo.activity_id}/${id}`
+          else if (crsParams.courseID && id === crsParams.courseID)
+            activityId = this.getConnectionInfo.activity_id.replace(
+              `/${crsParams.id}`,
+              ''
+            )
+          else activityId = `${this.getConnectionInfo.activity_id}`
+
+          //define the statement object
+          let stmt = {
+            actor: this.getConnectionInfo.actor,
+            verb: (() => {
+              if (verb && this.$xapi.verbs[verb.trim()])
+                return this.$xapi.verbs[verb.trim()]
+              else {
+                /**
+                 * Determine the verb to use by:
+                 * Checking if the activity is already included in the data fetch from server.
+                 *  If not, fetch directly from the server
+                 * There is a found, verb is 'RESUMED'
+                 * There is no found, verb is 'INITIALIZED'
+                 */
+
+                //Regex to test that id contains list of word
+                const regex =
+                  /(menu|activite_(\d)*|A(\d){2}|conclusion|introduction)$/gm
+
+                switch (true) {
+                  case regex.test(activityId): {
+                    //ID is of activity (menu, conclusion, activite, intro )
+                    const activityStr = activityId.split('/').toReversed()[0]
+
+                    if (!this.getDataFromServer)
+                      return this.$xapi.verbs.initialized
+                    const { userProgress } = this.getDataFromServer
+                    let activity_ref
+                    //Define the activity reference
+                    if (['menu', 'introduction', 'A00'].includes(activityStr))
+                      activity_ref = 'A00'
+                    else if (['conclusion', 'A99'].includes(activityStr))
+                      activity_ref = 'A99'
+                    else if (activityStr.includes('activite_')) {
+                      const aNum = activityStr.split('_')[1]
+                      activity_ref = aNum.length > 1 ? `A${aNum}` : `A0${aNum}`
+                    } else activity_ref = activityStr // should be AXX
+
+                    if (userProgress && userProgress[activity_ref])
+                      return this.$xapi.verbs.resumed
+                    else return this.$xapi.verbs.initialized
+                  }
+                  default: {
+                    //ID his of Lesson or doesn't exist relate (menu, conclusion, activite, intro )
+                    if (
+                      this.$xapi._getAgent(
+                        this.getConnectionInfo.actor.mbox.replace(
+                          'mailto:',
+                          ''
+                        ),
+                        activityId
+                      )
+                    )
+                      return this.$xapi.verbs.resumed
+                    else return this.$xapi.verbs.initialized
+                  }
+                }
+              }
+            })(),
+            object: {
+              id: activityId,
+              definition: {
+                name: {
+                  [this.displayLang]: `${definition}`
+                },
+                description: {
+                  [this.displayLang]: `${description}`,
+                  type: type || 'http://activitystrea.ms/schema/1.0/page'
+                }
+              },
+              objectType: objectType || 'Activity'
+            },
+            context: {
+              contextActivities: {}
+            }
+          }
+          //===================== contextActivity parent =====================//
+          /*
+         Define parent in the contextActivity
+         When:
+          1- when we have the id (parent === module)
+          2- when with have no id but we have a course_id (parent is cours_id)
+          */
+          const activityParent = (() => {
+            if (crsParams.courseID && !id)
+              return {
+                id: this.getConnectionInfo.activity_id.replace(
+                  `/${crsParams.id}`,
+                  ''
+                ),
+                objectType: objectType || 'Activity'
+              }
+            else if (id && id !== crsParams.courseID)
+              return {
+                id: `${this.getConnectionInfo.activity_id}`,
+                objectType: objectType || 'Activity'
+              }
+            else return null
+          })()
+
+          // Add the parent key of the context activity
+          if (activityParent)
+            stmt.context.contextActivities['parent'] = [activityParent]
+
+          //===================== contextActivity grouping =====================//
+
+          //Defining the Grouping of the context activity
+          const activityGrouping = (() => {
+            if (
+              activityParent &&
+              crsParams.courseID &&
+              activityParent.id.includes(crsParams.id)
+            )
+              return {
+                id: this.getConnectionInfo.activity_id.replace(
+                  `/${crsParams.id}`,
+                  ''
+                )
+              }
+            else return null
+          })()
+          //Adding the grouping of the context activity
+          if (activityGrouping)
+            stmt.context.contextActivities['grouping'] = [activityGrouping]
+
+          //add result data to statement
+          if (result) stmt['result'] = result
+
+          // Add duration info to statement when activity is complete
+          if (['completed', 'suspended', 'terminated'].includes(verb)) {
+            if (!stmt.result) stmt.result = {} // check if exist
+
+            let d
+
+            duration
+              ? (d = `PT${duration.split(':')[0]}H${duration.split(':')[1]}M${
+                  duration.split(':')[2]
+                }S`)
+              : (d = `PT${this.activityDuration.split(':')[0]}H${
+                  this.activityDuration.split(':')[1]
+                }M${this.activityDuration.split(':')[2]}S`)
+
+            stmt.result['duration'] = d
+            //Set the completion status of the result
+            if (completion) stmt.result['completion'] = completion
+          }
+
+          // ===================== Extension of the Object definition =====================//
+          if (
+            extensions &&
+            extensions.constructor === Array &&
+            extensions.length > 0
+          ) {
+            //Validate each entry given in the extension Array
+            extensions.forEach((e) => {
+              //entry must be of type Object
+              if (e.constructor !== Object)
+                throw new Error(`'${e}' is not a valid value. Must be Object`)
+
+              //Entry Must have id and content keys
+              const validKey = ['id', 'content']
+              Object.keys(e).forEach((key) => {
+                if (!validKey.includes(key))
+                  throw new Error(`Not valid key '${key}' for entry ${e}`)
+
+                //id must be a String
+                if (key === 'id' && e[key] && e[key].constructor !== String)
+                  throw new Error(`'${key}' must be of type String`)
+              })
+
+              stmt.object.definition['extensions'] = {
+                ...stmt.object.definition['extensions'],
+                [`${this.getConnectionInfo.activity_id}/${e.id}`]: e.content
+              }
+            })
+          }
+
+          //============================================================
+          stmtsQueue.push(stmt)
+        })
+
+        this.$xapi._sendStatements(stmtsQueue, cb, withFetch)
+      }
+    },
+
+    /**
+     * @param {Function} cb
+     * @param {Bool} option - set if must use Fetch API or not.  default = false
+     */
+    endLesson(cb, option = true) {
+      cb = cb || null
+      let text
+      //Defining the text to display for stmt description and definition
+      switch (this.$i18n.locale) {
+        case 'fr':
+          if (this.getModuleInfo.courseID)
+            text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
+          else text = `Le ${this.getModuleInfo.id}`
+          break
+        case 'en':
+          if (this.getModuleInfo.courseID)
+            text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
+          else text = `The ${this.getModuleInfo.id}`
+          break
+      }
+
+      // Retrieve only user data in lessons front its interaction that we want to send to the LRS.
+      // Note: User Settings are sent on a different URI and statement
+      const { isFistTime, userSettings, ...lessonsData } =
+        this.getUserInteraction
+
+      const stmt = {
+        verb: 'suspended',
+        definition: text,
+        description: text,
+        extensions: [
+          {
+            id: 'ending-point',
+            content: this.$route.name
+          },
+          {
+            id: 'user-data',
+            content: {
+              routeHistory: this.getRouteHistory,
+              ...lessonsData
+            }
+          }
+        ],
+        duration: this.lessonDuration
+      }
+
+      const endStmt = { ...stmt }
+      endStmt.verb = 'terminated'
+      //================================STATEMENT FOR THE PLAYBAR ===============================================
+      //Creating custom statement
+      const stmtPlaybar = {
+        id: (() => {
+          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
+          else return null
+        })(),
+        verb: 'played',
+        definition: text,
+        description: text,
+        extensions: [
+          {
+            id: 'playbar-values',
+            content: {
+              ...this.getMediaPlaybarValues()
+            }
+          }
+        ]
+      }
+      //================================STATEMENT FOR THE PLAYBAR ===============================================
+
+      this.sendXapiStatements([stmtPlaybar, stmt, endStmt], null, option) //send xapi statement
+
+      if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
+
+      if (cb) cb()
+    },
+
+    /** @description Method to reset the progression status of user
+     *  the function reset first the user data in the app store then
+     *  reset the idbStore if APP is running locally or prepare a statement with new userData Object to be sent over the LRS
+     *  for the connected userAgent, activity if APP is Running online
+     *  @event 'send-xapi-statement' emit to AppBaseModule.vue that will be executed by sendXapiStatement(s)
+     */
+    async resetUserData() {
+      this.$bus.$emit('set-comp-status', 'appBase', 'loading')
+      this.setUserMetaData({}) // resetting store record with existing for user data
+      this.setRouteHistory([]) // resetting  store record for all last visited pages
+
+      this.$bus.$emit('stop-timer')
+      if (this.getModuleInfo.packageType !== 'xapi') return
+
+      if (!this.getConnectionInfo || this.getConnectionInfo.remote == false)
+        return this.$idb.deleteDataInDB(this.getModuleInfo.idbID) //Must call the idb delete methode to reset indexDB store
+
+      //Send a completion statement for the current activity
+      let aTitle = `${this.$t('text.activity')} ${this.getConnectionInfo.activity_id}`
+
+      //Custom text for description and definition of the stament to be sent
+      let text
+      this.$i18n.locale == 'fr'
+        ? (text = `L'${aTitle} de ${this.getModuleInfo.id}`)
+        : (text = `The ${aTitle} of ${this.getModuleInfo.id}`)
+
+      /*Dispatch a send statement event to method AppBaseModule sendXapiStatement(s)
+       Content values are:
+          User data URI: "host_address/course_ID/Lesson_ID/user-data" ex: "http://localhost:8080/330N01FD6001/m1l1/ // user-data" and
+          User Bookmark URI: "host_address/course_ID/Lesson_ID/ending-point" ex: ""http://localhost:8080/330N01FD6001/m1l1/ending-point": "menu"
+       */
+      const baseStmt = {
+        definition: text,
+        description: text
+      }
+      const exitStmt = {
+        ...baseStmt,
+        verb: 'exited'
+      }
+
+      const endStmt = {
+        ...baseStmt,
+        verb: 'terminated',
+        extensions: [
+          {
+            id: 'ending-point',
+            content: this.$route.name
+          },
+          {
+            id: 'user-data',
+            content: new Object()
+          }
+        ],
+        duration: null,
+        completion: false // Resetting completion state value to
+      }
+
+      this.sendXapiStatements([exitStmt, endStmt])
+
+      this.$bus.$emit('set-comp-status', 'appBase', 'ready')
+
+      // Creating a asynchronous fecth method that would resolve after a 2 second
+      const fetchData = async () => {
+        return new Promise((resolve) => {
+          setTimeout(
+            () =>
+              resolve(
+                this.$xapi._getProgress(
+                  this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+                  this.getConnectionInfo.activity_id
+                )
+              ),
+            2000
+          )
+        })
+      }
+
+      // Make request over user current data after sending statement to assure that the resetting worked
+      const usrData = await fetchData()
+      this.$bus.$emit('reset-complete')
+      console.log('😄 USER STATUS: ', {
+        User: this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+        ActivityID: this.getConnectionInfo.activity_id,
+        Record: usrData
+      })
+    },
+
+    /**
+     * @description- Scroll directly to the target* containt
+     * target content can be any Node defined by the ID
+     * @param {String} target = id of HTMLElement. if target don't existe will scroll to wrapper-content
+     * @param {Obj} opt = scroll behavior to apply default { top: 0, left: 0, behavior: 'auto' }
+     */
+
+    moveTo(target, opt = { top: 0, left: 0, behavior: 'auto' }) {
+      if (target.constructor !== String)
+        throw new Error(
+          '⚠️  Not supported value for @target. Must be of type String'
+        )
+
+      let skipTo = document.querySelector(`#wrapper-content`) //default definition of main element
+
+      if (target) {
+        let targetEl = document.querySelector(`#${target}`) // search for node element specified as main
+
+        if (targetEl) skipTo = targetEl
+      }
+
+      if (skipTo) opt.top = skipTo.offsetTop + opt.top // Set scroll top from target top
+
+      if (skipTo) skipTo.setAttribute('tabIndex', -1) //Allowing accessibility control with keyboard
+      window.scrollTo(opt)
+      if (skipTo) this.resetFocus(skipTo) //focus on the target
+    },
+
+    /**
+     * @description Reset the focus the element
+     * @param {HTMLElement} e - element that will get focus
+     */
+    resetFocus(e) {
+      if (e) e.focus()
+    },
+    /**
+     * @description Mothods to validate that application settings are correctly
+     * Opens error component when configurations are not correct
+     *
+     */
+    checkForErrors() {
+      let errMessage
+
+      if (validateAppContent(this.appConfig, true).length) {
+        return (this.error = validateAppContent(this.appConfig, true))
+      }
+      const { list: activitiesList } = this.getAllActivities()
+      let { no_menu, is_single_activity } = this.appConfig
+
+      let noMenu = no_menu == undefined ? false : no_menu
+
+      let isSingleActivity =
+        is_single_activity == undefined ? false : is_single_activity
+
+      let err
+      if (this.getErrorMenu) err = true
+      else err = false
+
+      let consoleMsg = ''
+      //error if There is more than one activity when is_single_activity
+      switch (true) {
+        case isSingleActivity && activitiesList.size > 1:
+          errMessage = `La configuration choisie ne permet pas d'avoir plus d'une activité dans l'application. \n Vous devez soit désactiver l'option 💲<b>is_single_activity</b> ou retirer TOUTES les autres activités`
+
+          consoleMsg = `Cannot have more than 1 activity with this settings configuration. Either disable 💲is_single_activity or DELETE ALL others activities`
+          this.error.push(errMessage)
+          break
+
+        case isSingleActivity && !noMenu:
+          errMessage = `Le MENU n'est pas disponible avec la configuration choisie.\n Vous devez soit désactiver l'option  💲<b>no_menu</b> ou l'option 💲<b>is_single_activity</b>`
+          consoleMsg = `Cannot have MENU with current settings configuration. Either set 💲no_menu:false or 💲is_single_activity:false`
+          this.error.push(errMessage)
+          break
+
+        case err:
+          errMessage = `Il y une erreur dans votre fichier menu.setting.js. \n ouvrez votre console pour voir l'erreur et corriger la dans menu.setting.js  `
+          consoleMsg = this.getErrorMenu
+          this.error.push(errMessage)
+          break
+      }
+
+      if (errMessage)
+        return console.warn(
+          `%c  WARNING!>>> ${consoleMsg}`,
+          'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+        )
+    }
+  }
+}
+</script>
+<style lang="scss">
+#App-base {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+
+  #overlay_loading {
+    position: fixed !important;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+  }
+
+  #build-info {
+    opacity: 0.9;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    color: #fff;
+    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
+    background-color: hotpink;
+    font-family: serif, Impact, Arial;
+    font-size: 11px;
+    padding: 3px;
+    cursor: pointer;
+    z-index: 999;
+    span {
+      text-align: center;
+      display: block;
+    }
+  }
+
+  .box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+}
+.grp-spinners {
+  span {
+    margin: 0px 2px;
+  }
+  .v-progress-circular {
+    margin: 0.8rem !important;
+  }
+}
+</style>