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

package/src/components/AppBase.vue

@@ -1,40 +1,101 @@
 <!--
  @ Description: This is a root component to create the App
- @ What it does: Many things
+ @ 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 }">
-    <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>
+    <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"
+          aria-hidden="true"
+          @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" />
+      <div v-if="appDebugMode" class="timer">
+        <!-- <div class="timer"> -->
+        <div>Act: {{ appTimer.ISOTimeParser(activityDuration) }}</div>
+        <span>&nbsp;|&nbsp;</span>
+        <div>Les: {{ appTimer.ISOTimeParser(lessonDuration) }}</div>
       </div>
-    </transition>
+      <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.9"
+      :persistent="true"
+    >
+      <div class="text-center grp-spinners">
+        <v-icon id="icon_loading" icon="mdi-dots-circle" size="x-large" />
 
-    <router-view class="box" />
-    <app-icons />
+        <span class="sr-only">
+          {{ $t('message.loading_state_msg') }}
+        </span>
+      </div>
+    </v-overlay>
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore.js'
+import { Timer } from '../composables/useTimer.js'
+import { IdleDetector } from '../composables/useIdleDetector.js'
+import { validateAppContent } from '../shared/validators'
+import { version as fcadVersion } from '../../package.json'
+import { computed, reactive } from 'vue'
+import mobileDetect from 'mobile-detect'
 
 export default {
+  provide() {
+    return {
+      lessonDuration: computed(() => this.lessonDuration), //exposing the lesson Duration variable to all components
+      elapsedIdleTime: computed(() => this.idleDetector.getElapsedTime()), //exposing idle detector elapse time to all components
+      appTimer: this.appTimer //exposing the app timer instance to all components
+    }
+  },
   props: {
     appConfig: {
       type: Object,
-      default: () => {
-        return {
-          lang: 'fr' // set language of App: default French
-        }
+      required: true,
+      validator: (value) => {
+        if (import.meta.env.DEV) return validateAppContent(value).length === 0
       }
     }
   },
+  setup() {
+    const store = useAppStore()
+    const appTimer = reactive(new Timer('ativityTimer')) // Making Timer instance reactive to be able to track changes
+    const idleDetector = reactive(new IdleDetector()) // Making detector instance reactive.
+    return { store, appTimer, idleDetector }
+  },
 
   data() {
     return {
@@ -43,137 +104,279 @@ export default {
       initialDeviceOrentation: null,
       appIsFullScreen: false,
       resizeiPad: false,
-      buildInfoClicked: false
+      buildInfoClicked: false,
+      error: [],
+      initialLoading: true,
+      f5KeyPressed: false,
+      lessonDuration: 0,
+      idleTimeout: 5 * 60000, //5 mins: this is the time of inactivity before considering the user is idle
+      starterTimeout: null
     }
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useAppStore, [
       'getCurrentBrowser',
       'getIsMobile',
       'getDeviceType',
       'getModuleInfo',
+      'getAppStatus',
       'getUserInteraction',
-      'getConnectionInfo'
+      'getConnectionInfo',
+      'getAllActivities',
+      'getMediaPlaybarValues',
+      'getAppConfigs',
+      'getErrorMenu',
+      'getRouteHistory',
+      'getBookmarkEnabled',
+      'getAppDebugMode',
+      'getApplicationSettings'
     ]),
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
+    activityDuration() {
+      return this.appTimer.getTime() // return the time duration in seconds
+    },
+
     getwidth() {
       return window.innerWidth
     },
     getheight() {
       return window.innerHeight
     },
+
     showBuildInfo() {
       return (
-        process.env.NODE_ENV === 'production' &&
+        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
+    } /**
+     * @description Set default value for bookmark
+     */,
+    bookmarkActive() {
+      return this.getBookmarkEnabled
     }
   },
   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
-            )
+    initialLoading: {
+      deep: true,
+      handler(newVal) {
+        if (newVal !== false) {
+          return
         }
-        // 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()
+        const eventParams = {
+          fcad_version: fcadVersion,
+          course_id: this.getAppConfigs.crs_id,
+          lesson_id: this.getAppConfigs.id
+        }
+        this.$analytics.sendEvent('user_meta', eventParams)
+      }
+    },
+    'store.$state.userDataLoaded': {
+      handler(newValue) {
+        if (!newValue) return this.updateTracker('appBase', 'loading')
+        this.updateTracker('appBase', 'ready')
+      },
+      immediate: true
+    },
+    appReady: {
+      handler(newValue) {
+        if (newValue) {
+          this.setInitialLoadingDone()
         }
       }
     }
   },
 
   created() {
-    this.setProgress()
+    if (import.meta.env.DEV) {
+      this.checkForErrors()
+    }
+    //Declare loading state if no error was detected
+
+    if (!this.error.length) {
+      // this.updateTracker('appBase', 'loading')
+      this.initializeApp(this.appConfig)
+    }
+
     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)
+    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.$store.dispatch('setCurrentBrowser', currentBrowser)
+    this.setCurrentBrowser(currentBrowser)
 
     // register device type running the App in the store (ios, Android or Deskop)
-    this.$store.dispatch('setDeviceType', this.detectDevice())
-    this.fetchSettingsFromServer()
+    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)
+    this.$analytics.init(this.getAppConfigs.analytics_id, this.$router)
+    this.$bus.$on('start-timer', this.startAppTimer)
+    this.$bus.$on('stop-app-timer', this.stopAppTimer)
+    this.$bus.$on('start-idle-detector', this.setIdleDetector)
+    this.$bus.$on('stop-idle-detector', this.unsetIdleDetector)
   },
-  mounted() {
-    // set the language of the app
-    this.setLocale(this.appConfig.lang)
-    this.$bus.$on('set-comp-status', (name, status) =>
-      this.updateTracker(name, status)
+  beforeMount() {
+    window.addEventListener(
+      'beforeunload',
+      (e) => {
+        this.executeCloseEventTriggered()
+        // e.preventDefault()
+        // e.returnValue = true
+      },
+      true
     )
+  },
 
-    this.$bus.$on('set-user-progress', this.setProgress())
+  mounted() {
+    // set the language of the app
+    this.setLocale(this.getAppConfigs.lang)
+    window.addEventListener('keydown', this.handleF5KeyPressed)
+    window.addEventListener('beforeunload', this.handleBeforeUnload)
   },
-  beforeDestroy() {
-    this.$bus.$off('set-comp-status')
+  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)
+    this.$bus.$off('start-idle-detector', this.setIdleDetector)
+    this.$bus.$off('stop-idle-detector', this.unsetIdleDetector)
+    this.$bus.$off('start-timer', this.startAppTimer)
+    this.$bus.$off('stop-app-timer', this.stopAppTimer)
+    window.removeEventListener('keydown', this.handleF5KeyPressed)
+    window.removeEventListener('beforeunload', this.handleBeforeUnload)
+    if (this.getAppConfigs.remote && this.unsubscribeToSetConfig)
+      this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
   methods: {
+    ...mapActions(useAppStore, [
+      'setDeviceType',
+      'updateDataFetchFromServer',
+      'setUserMetaData',
+      'setRouteHistory',
+      'setApplicationSettings',
+      'setMediaPlaybarValues',
+      'updateCompStatusTracker',
+      'initializeApp',
+      'setMobileState',
+      'setCurrentBrowser'
+    ]),
+    /**
+     * @description start the app timer instance
+     * Check if the timer is already started, if yes it add the activity duration
+     * to the lesson duration and restart the timer
+     */
+
+    startAppTimer() {
+      if (this.$route.name === 'module') return // don't start timer when in menu
+      if (this.appTimer.getTimerState() == 'started') {
+        this.lessonDuration += this.activityDuration //
+        this.appTimer.stop() // Start the activity timer
+      }
+
+      //Delay actually one second before starting timers
+      this.starterTimeout = setTimeout(() => {
+        this.appTimer.start() // Start the activity timer
+        this.setIdleDetector() //start the idle time detector
+      }, 500)
+    },
+
+    /**
+     * @description stop the app timer instance
+     * The function add the activity duration to the lesson duration and stop the timer
+     */
+    stopAppTimer() {
+      this.lessonDuration += this.activityDuration
+      this.appTimer.stop() // stop timer
+      clearTimeout(this.starterTimeout)
+    },
+
+    /**
+     * @description set the idle detector to start detecting idle time
+     * Attach DOM event listeners to reset the idle timer
+     * The idle detector will start after 1 second after the app is loaded
+     * The idle detector will pause the app timer when idle time is reached
+     */
+
+    setIdleDetector() {
+      setTimeout(() => {
+        this.idleDetector.startIdleTimer(
+          () => this.appTimer.pause(),
+          this.idleTimeout
+        )
+        document.addEventListener('mousedown', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('mousemove', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('keypress', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('touchmove', this.resetIdleTimer, false) //set eventlisteners
+      }, 800)
+    },
+    /**
+     * @description unset the idle detector
+     *  stop the idle timer and remove DOM event to stop listening the idle timer
+     */
+    unsetIdleDetector() {
+      this.idleDetector.stopIdleTimer()
+      document.removeEventListener('mousedown', this.resetIdleTimer, false)
+      document.removeEventListener('mousemove', this.resetIdleTimer, false)
+      document.removeEventListener('keypress', this.resetIdleTimer, false)
+      document.removeEventListener('touchmove', this.resetIdleTimer, false)
+    },
+    /**
+     * @description reset the idle timer
+     * The function stop the idle timer and restart it
+     * start also the app timer if it was paused
+     *
+     */
+    resetIdleTimer() {
+      if (this.$route.name == 'menu' || this.$route.name == 'module') return // don't reset idle timer when in menu
+      this.idleDetector.stopIdleTimer()
+
+      if (this.appTimer.getTimerState() == 'stopped') this.appTimer.start()
+      this.idleDetector.startIdleTimer(
+        () => this.appTimer.pause(),
+        this.idleTimeout
+      )
+    },
+
+    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 {
@@ -183,11 +386,15 @@ export default {
         else if (lang === 'english' || lang === 'anglais') lang = 'en'
         else lang = lang.substring(0, 2).toLowerCase()
         this.$i18n.locale = lang
+        //Set vuetify locale
+        this.$vuetify.locale.current = lang
       }
     },
+
     getScormState() {
       return this.$scorm.GetValue('cmi.suspend_data')
     },
+
     getBrowser() {
       let browser
       const test = (regexp) => regexp.test(window.navigator.userAgent) //defining the testing fonction
@@ -241,50 +448,12 @@ export default {
       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()
+        this.$bus.$emit('save-to-scorm', 'disconnect') // emit event to save to scorm before closing the app
       }
       //Xapi context
       else if (
@@ -293,111 +462,639 @@ export default {
         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
+        this.endLesson(null, true)
       }
     },
-    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')
+    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.getUserInteraction[activityId])
+                      return this.$xapi.verbs.initialized
+
+                    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 (
+                      this.getUserInteraction &&
+                      this.getUserInteraction[activity_ref]
+                    )
+                      return this.$xapi.verbs.resumed
+                    else return this.$xapi.verbs.initialized
+                  }
+                  default: {
+                    //ID 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.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[0]
+                }H${
+                  this.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[1]
+                }M${
+                  this.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[2]
+                }S`)
+
+            stmt.result['duration'] = d
+            //Set the completion status of the result
+            if (completion) stmt.result['completion'] = completion
+          }
+
+          if (
+            extensions &&
+            extensions.constructor === Array &&
+            extensions.length > 0
+          ) {
+            // ===================== Extension of the Object definition =====================//
+            //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'],
+                [`${activityId}/${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
 
-        case 'xapi':
+      const stmt = {
+        verb: 'suspended',
+        definition: text,
+        description: text,
+        extensions: [
           {
-            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'))
-              })
+            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.appTimer.ISOTimeParser(this.lessonDuration)
+      }
+
+      const endStmt = { ...stmt }
+      endStmt.verb = 'terminated'
+      //================================STATEMENT FOR THE PLAYBAR ===============================================
+      //Creating custom statement
+      const stmtPlaybar = {
+        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 null
+          return this.getModuleInfo.courseID
+        })(),
+        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.appTimer.getTimerState() === 'started')
+        setTimeout(() => this.stopAppTimer(), 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')
+      this.stopAppTimer()
+      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')
+      const actorMbox = this.getConnectionInfo.actor.mbox.replace('mailto:', '')
+      const activityId = this.getConnectionInfo.activity_id
+      // 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(activityId)
+          const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
+
+          const lessonProgressParam = { email: actorMbox, activityId }
+          const lessonStateParam = {
+            email: actorMbox,
+            activityId,
+            verb: 'suspended'
+          }
+          const lessonPosionParam = {
+            email: actorMbox,
+            activityId
+          }
+          const playbarParam = {
+            email: actorMbox,
+            activityId,
+            verb: 'played'
+          }
+          const preferencesParam = {
+            email: actorMbox,
+            activityId: parentID,
+            verb: 'preferred'
+          }
+
+          const fetchParams = [
+            lessonProgressParam,
+            lessonStateParam,
+            lessonPosionParam,
+            playbarParam,
+            preferencesParam
+          ]
+
+          // Using Promise.all to make parallel requests
+          const {
+            userData,
+            savedPoint,
+            preferredSettings,
+            playbarValues,
+            lessonStatus
+          } = await this.$xapi._getBulkData(fetchParams)
+
+          return {
+            userData,
+            savedPoint,
+            preferredSettings,
+            playbarValues,
+            lessonStatus
+          }
+        }
+        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: ', {
+        userID: actorMbox,
+        activityId,
+        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 Method 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;'
+        )
     },
-    updateTracker(name, status) {
-      this.$store.dispatch('updateCompStatusTracker', { name, status })
+    /**
+     * @description Handle the keydown event to detect if F5 key was pressed
+     * The function set the f5KeyPressed to true if F5 key was pressed
+     * @param {Event} e - keydown event
+     */
+    handleF5KeyPressed(e) {
+      this.f5KeyPressed = e.code == 'F5'
+    },
+
+    /**
+     * @description Handle the beforeunload event to save data when the user close the app or reload the app
+     * The function check if the F5 key was pressed to avoid sending data when the user reload the app
+     */
+    handleBeforeUnload() {
+      //prevent app to send/Save data when F5 is pressed to reload app
+      if (this.f5KeyPressed) return
+
+      this.executeCloseEventTriggered()
     }
   }
 }
@@ -405,7 +1102,17 @@ export default {
 <style lang="scss">
 #App-base {
   width: 100%;
-  height: 100vh;
+  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;
@@ -426,189 +1133,37 @@ export default {
     }
   }
 
-  .module {
+  .box {
     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;
-    }
+.grp-spinners {
+  transform: scale(1.5);
+  #icon_loading {
+    animation: spin 1.3s cubic-bezier(0.57, 0.87, 0.77, 0.87) infinite;
   }
 }
-.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;
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-.svg-hidden {
-  display: none;
+.timer {
+  position: sticky; /* Sticks inside the parent container */
+  bottom: 90%; /* Sticks to the top edge of the parent */
+  left: 100%; /* Sticks to the left edge of the parent */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 1em;
+  width: fit-content;
+  color: #333;
+  opacity: 0.9;
+  background-color: #eaabb6b3; /* Optional: ensures readability when content scrolls */
+  padding: 5px 12px; /* Some breathing space */
+  z-index: 1000; /* Keeps it above other elements */
 }
 </style>