fcad-core-dragon 2.1.0 → 2.1.2

package/src/components/AppBase.vue

@@ -1,1169 +1,1171 @@
-<!--
- @ 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"
-          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>
-      <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" />
-
-        <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 { 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,
-      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 {
-      randKey: null,
-      isLandScape: null,
-      initialDeviceOrentation: null,
-      appIsFullScreen: false,
-      resizeiPad: 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: {
-    ...mapState(useAppStore, [
-      'getCurrentBrowser',
-      'getIsMobile',
-      'getDeviceType',
-      'getModuleInfo',
-      'getAppStatus',
-      'getUserInteraction',
-      '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 (
-        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: {
-    initialLoading: {
-      deep: true,
-      handler(newVal) {
-        if (newVal !== false) {
-          return
-        }
-        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() {
-    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 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)
-    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)
-  },
-  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)
-    window.addEventListener('keydown', this.handleF5KeyPressed)
-    window.addEventListener('beforeunload', this.handleBeforeUnload)
-  },
-  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 {
-        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
-        //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
-
-      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
-    },
-
-    executeCloseEventTriggered() {
-      if (
-        this.getModuleInfo.packageType === 'scorm' &&
-        this.$scorm.initialized
-      ) {
-        this.$bus.$emit('save-to-scorm', 'disconnect') // emit event to save to scorm before closing the app
-      }
-      //Xapi context
-      else if (
-        this.getModuleInfo.packageType === 'xapi' &&
-        this.getConnectionInfo &&
-        this.getConnectionInfo.actor &&
-        this.getConnectionInfo.remote
-      ) {
-        this.endLesson(null, true)
-      }
-    },
-
-    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
-
-      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.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;'
-        )
-    },
-    /**
-     * @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()
-    }
-  }
-}
-</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);
-  }
-}
-
-.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>
+<!--
+ @ 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"
+          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>
+      <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" />
+
+        <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 { 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'
+import { useI18n } from 'vue-i18n'
+
+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,
+      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.
+    const { t } = useI18n()
+    return { store, appTimer, idleDetector, t }
+  },
+
+  data() {
+    return {
+      randKey: null,
+      isLandScape: null,
+      initialDeviceOrentation: null,
+      appIsFullScreen: false,
+      resizeiPad: 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: {
+    ...mapState(useAppStore, [
+      'getCurrentBrowser',
+      'getIsMobile',
+      'getDeviceType',
+      'getModuleInfo',
+      'getAppStatus',
+      'getUserInteraction',
+      '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 (
+        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: {
+    initialLoading: {
+      deep: true,
+      handler(newVal) {
+        if (newVal !== false) {
+          return
+        }
+        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() {
+    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 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)
+    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)
+  },
+  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)
+    window.addEventListener('keydown', this.handleF5KeyPressed)
+    window.addEventListener('beforeunload', this.handleBeforeUnload)
+  },
+  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 {
+        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
+        //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
+
+      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
+    },
+
+    executeCloseEventTriggered() {
+      if (
+        this.getModuleInfo.packageType === 'scorm' &&
+        this.$scorm.initialized
+      ) {
+        this.$bus.$emit('save-to-scorm', 'disconnect') // emit event to save to scorm before closing the app
+      }
+      //Xapi context
+      else if (
+        this.getModuleInfo.packageType === 'xapi' &&
+        this.getConnectionInfo &&
+        this.getConnectionInfo.actor &&
+        this.getConnectionInfo.remote
+      ) {
+        this.endLesson(null, true)
+      }
+    },
+
+    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
+
+      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.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;'
+        )
+    },
+    /**
+     * @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()
+    }
+  }
+}
+</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);
+  }
+}
+
+.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>