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

package/src/components/AppBase.vue

@@ -1,1054 +1,1150 @@
-<!--
- @ 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>
+<!--
+ @ 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>template {{ $helper.getTemplateVersion() }}</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 && initialLoading"
+      class="align-center justify-center"
+      scrim="white"
+      opacity="0.8"
+    >
+      <div class="text-center grp-spinners">
+        <v-icon id="icon_loading" icon="mdi-dots-circle" size="x-large" />
+
+        <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 mobileDetect from 'mobile-detect'
+export default {
+  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: [],
+      initialLoading: true
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getCurrentBrowser',
+      'getIsMobile',
+      'getDeviceType',
+      'getModuleInfo',
+      'getAppStatus',
+      'getUserInteraction',
+      'getConnectionInfo',
+      'getDataFromServer',
+      'getAllActivities',
+      'getMediaPlaybarValues',
+      'getAppConfigs',
+      'getErrorMenu',
+      'getRouteHistory',
+      'getBookmarkEnabled'
+    ]),
+    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
+      if (readyState) {
+        this.setInitialLoadingDone()
+      }
+
+      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
+    } /**
+     * @description Set default value for bookmark
+     */,
+    bookmarkActive() {
+      return this.getBookmarkEnabled
+    }
+  },
+  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() {
+    this.bookmarkActive
+    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'
+    ]),
+    setInitialLoadingDone() {
+      this.initialLoading = false
+    },
+    /**
+     * @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
+      )
+
+      const lessonPosition = await this.$xapi._getLessonPosition(
+        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
+      )
+
+      //=======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:', ''),
+        parentID
+      )
+      //Update the App Store data
+      this.updateDataFetchFromServer({
+        userProgress,
+        routeHistory,
+        lessonPosition,
+        completedState,
+        playbarValues,
+        applicationSettings
+      }).then(() => {
+        // console.log('DATA FROM SERVER', {
+        //   userProgress,
+        //   routeHistory,
+        //   lessonPosition,
+        //   completedState,
+        //   playbarValues,
+        //   applicationSettings
+        // })// for testing
+
+        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
+              //Should Redirect to the last Route in History
+              // const lastRoute = routeHistory.toReversed()[0]
+              // this.$router.push({ name: lastRoute.parent._namedRoute })
+            }
+
+            // 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, progress } = res.$record
+                  this.setUserMetaData(...progress) // 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,
+                lessonPosition,
+                applicationSettings
+              } = 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
+
+              if (applicationSettings)
+                this.setApplicationSettings(applicationSettings) // set the user preferred settings
+
+              //Handel bookmark navigation
+              if (this.bookmarkActive && lessonPosition)
+                this.$router.push({ name: lessonPosition }) //Should Redirect to bookmark
+            } 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, progress } = res.$record
+                    this.setUserMetaData(progress) // 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 == 'menu'
+                ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                    ._namedRoute
+                : this.$route.name)()
+          },
+          {
+            id: 'user-data',
+            content: {
+              routeHistory: (() => {
+                const history = this.getRouteHistory.toReversed() //get the route history from the last
+
+                history[0] = this.$route.meta // change the last recored route to the current route
+
+                return history.toReversed()
+              })(),
+              ...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 SETTINGS ===============================================
+
+      //Creating custom statement
+      const stmtUserSettings = {
+        id: (() => {
+          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
+          else return null
+        })(),
+        verb: 'preferred',
+        definition: text,
+        description: text,
+        extensions: [
+          {
+            id: 'application-settings',
+            content: {
+              ...this.getApplicationSettings
+            }
+            // content: {
+            //   bookmark: false
+            // } //for testing
+          }
+        ]
+      }
+      //================================END STATEMENT ===============================================
+
+      this.sendXapiStatements(
+        [stmtPlaybar, stmtUserSettings, 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.setApplicationSettings({}) // resetting store record for settings
+      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": "introduction"
+       */
+      const baseStmt = {
+        definition: text,
+        description: text
+      }
+      const exitStmt = {
+        ...baseStmt,
+        verb: 'exited'
+      }
+
+      const endStmt = {
+        ...baseStmt,
+        verb: 'terminated',
+        extensions: [
+          {
+            id: 'ending-point',
+            content: (() =>
+              this.$route.name == 'menu'
+                ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                    ._namedRoute
+                : this.$route.name)()
+          },
+          {
+            id: 'user-data',
+            content: new Object()
+          }
+        ],
+        duration: null,
+        completion: false // Resetting completion state value to
+      }
+      //================================STATEMENT FOR THE SETTINGS ===============================================
+
+      //Creating custom statement
+      const stmtUserSettings = {
+        ...baseStmt,
+        id: (() => {
+          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
+          else return null
+        })(),
+
+        verb: 'preferred',
+        extensions: [
+          {
+            id: 'application-settings',
+            content: new Object()
+          }
+        ]
+      }
+      //================================END STATEMENT ===============================================
+
+      this.sendXapiStatements([stmtUserSettings, 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 () => {
+        //funtion that will make a multiple request on the server
+        const requests = async () => {
+          const _url = new URL(this.getConnectionInfo.activity_id)
+          const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
+
+          const progress = await this.$xapi._getProgress(
+            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+            this.getConnectionInfo.activity_id
+          )
+          const lessonPosition = await this.$xapi._getLessonPosition(
+            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+            this.getConnectionInfo.activity_id
+          )
+          const applicationSettings = await this.$xapi._getPreferredSettings(
+            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
+            parentID
+          )
+          return { progress, lessonPosition, applicationSettings }
+        }
+        return new Promise((resolve) => {
+          setTimeout(() => resolve(requests()), 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.warn('😄 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 {
+  transform: scale(1.5);
+  #icon_loading {
+    animation: spin 1.3s cubic-bezier(0.57, 0.87, 0.77, 0.87) infinite;
+  }
+}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>