fcad-core-dragon 2.1.0 → 2.1.2

package/src/main.js

@@ -1,476 +1,493 @@
-import AppBase from './components/AppBase.vue'
-import AppBaseButton from './components/AppBaseButton.vue'
-import AppBaseModule from './components/AppBaseModule.vue'
-import AppBasePage from './components/AppBasePage.vue'
-import AppBaseFlipCard from './components/AppBaseFlipCard.vue'
-import AppBasePopover from './components/AppBasePopover.vue'
-import AppCompJauge from './components/AppCompJauge.vue'
-import AppBaseErrorDisplay from './components/AppBaseErrorDisplay.vue'
-//import AppCompBif from './components/AppCompBif.vue'
-import AppCompAudio from './components/AppCompAudio.vue'
-import AppCompBranchButtons from './components/AppCompBranchButtons.vue'
-import AppCompCarousel from './components/AppCompCarousel.vue'
-import AppCompViewDisplay from './components/AppCompViewDisplay.vue'
-import AppCompTableOfContent from './components/AppCompTableOfContent.vue'
-import AppCompMenu from './components/AppCompMenu.vue'
-import AppCompMenuItem from './components/AppCompMenuItem.vue'
-import AppCompPopUpNext from './components/AppCompPopUpNext.vue'
-import AppCompNavigation from './components/AppCompNavigation.vue'
-import AppCompNoteCall from './components/AppCompNoteCall.vue'
-import AppCompNoteCredit from './components/AppCompNoteCredit.vue'
-import AppCompVideoPlayer from './components/AppCompVideoPlayer.vue'
-import AppCompPlayBarNext from './components/AppCompPlayBarNext.vue'
-import AppCompQuizNext from './components/AppCompQuizNext.vue'
-import AppCompQuizRecall from './components/AppCompQuizRecall.vue'
-import AppBaseSkeleton from './components/AppBaseSkeleton.vue'
-
-import GsapPlugin from './plugins/gsap'
-import eventBus from './plugins/bus'
-import helper from './plugins/helper'
-import analytics from './plugins/analytics'
-import mergeLocales from './plugins/i18n'
-import { scormPlugin } from './plugins/scorm'
-import { xapiPlugin } from './plugins/xapi'
-import { $idb } from './plugins/idb'
-import { validatefileContent } from './shared/validators.js'
-import { createPinia } from 'pinia'
-import { useAppStore } from './module/stores/appStore.js'
-import axios from 'axios'
-import AppCompSVGNext from './components/AppCompSVGNext.vue'
-import VueSafeTeleport from 'vue-safe-teleport'
-import { FocusTrap } from 'focus-trap-vue'
-import nvdaFix from './directives/nvdaFix.js'
-
-const pinia = createPinia()
-
-export default {
-  install(app, options) {
-    app.use(pinia)
-    app.use(scormPlugin, '$scorm')
-    app.use(GsapPlugin, '$gsap')
-    app.use(xapiPlugin, '$xapi')
-    app.use(VueSafeTeleport)
-    app.component('FocusTrap', FocusTrap)
-
-    app.config.globalProperties.$bus = eventBus
-    app.use($idb)
-
-    app.component('AppBase', AppBase)
-    app.component('AppBaseButton', AppBaseButton)
-    app.component('AppBaseModule', AppBaseModule)
-    app.component('AppBasePage', AppBasePage)
-    app.component('AppBaseFlipCard', AppBaseFlipCard)
-    app.component('AppBaseErrorDisplay', AppBaseErrorDisplay)
-    app.component('AppCompMenu', AppCompMenu)
-    //app.component('app-comp-bif', AppCompBif)
-    app.component('AppCompAudioPlayer', AppCompAudio)
-    app.component('AppCompBranchButtons', AppCompBranchButtons)
-    app.component('AppCompCarousel', AppCompCarousel)
-    app.component('AppCompMenuItem', AppCompMenuItem)
-    app.component('AppCompJauge', AppCompJauge)
-    app.component('AppCompTableOfContent', AppCompTableOfContent)
-    app.component('AppCompPopUpNext', AppCompPopUpNext)
-    app.component('AppCompNavigation', AppCompNavigation)
-    app.component('AppCompNoteCredit', AppCompNoteCredit)
-    app.component('AppCompNoteCall', AppCompNoteCall)
-    app.component('AppBasePopover', AppBasePopover)
-    app.component('AppCompVideoPlayer', AppCompVideoPlayer)
-    app.component('AppCompPlayBarNext', AppCompPlayBarNext)
-    app.component('AppCompQuizNext', AppCompQuizNext)
-    app.component('AppIconsNext', AppCompSVGNext)
-    app.component('AppCompQuizRecall', AppCompQuizRecall)
-    app.component('AppBaseSkeleton', AppBaseSkeleton)
-    app.component(AppCompViewDisplay)
-
-    if (!options)
-      throw new Error(
-        '💥You did not provide i18n and vuex store. Please install and provide them.'
-      )
-
-    const requiredOptions = ['i18n', 'menuSettings']
-    const errorMissing = {
-      i18n: { a: 'Internationalisation', b: 'vue-I18n' },
-      menuSettings: { a: 'Menu Settings file', b: 'menuSettings' }
-    }
-
-    /*Watch for appBase data received in the store
-     *To set connection Info
-     *To set the connection with indexDB
-     *To fetch data from servers /storage
-     *To set document lang
-     */
-    const appStore = useAppStore()
-
-    const unsubscribeToSetConfig = appStore.$onAction(
-      ({
-        name, // name of the action
-        store, // store instance, same as `someStore`
-        args, // array of parameters passed to the action
-        after // hook after the action returns or resolves
-      }) => {
-        after(async (result) => {
-          if (name !== 'initializeApp') return
-          let { appConfigs } = appStore.$state
-          let { remote = false, specification } = appConfigs
-          const c = await configConnection(appConfigs)
-          store.lrsConfig = c
-          const { $scorm, $xapi, $idb } = app.config.globalProperties
-          if (specification == 'xapi') {
-            const {
-              auth,
-              endpoint,
-              registration = $xapi.ruuid()
-            } = store.lrsConfig
-
-            const config = {
-              auth,
-              endpoint,
-              registration,
-              activity_platform: `SIPI_organizationId`
-            }
-
-            $xapi._configLRS(config) // configure and launch LRS
-          }
-
-          //Configure connection with the Data from appBase
-          //===================================================
-
-          const activity_id = c ? c.activity_id : null
-
-          //Redefine actor with  value from connection informtion
-          if (c && c.actor) appConfigs.actor = c.actor
-
-          appConfigs.remote = c && c.remote ? c.remote : false
-
-          //========================FETCHING EXISTING DATA AND SETTING STORE STATE===========================
-          /*Fetch user existing data from the server
-           and set/update initial state  of the store
-          */
-          const res = await fetchDatasFromServer({
-            $scorm,
-            $xapi,
-            $idb,
-            activity_id,
-            ...appConfigs
-          })
-          //Update the store state
-
-          if (res) {
-            const {
-              routeHistory,
-              userSettings = {},
-              progress,
-              playbarValues = null,
-              lessonPosition = null,
-              completedState = null
-            } = res
-
-            appStore.setUserMetaData(progress)
-            appStore.setRouteHistory(routeHistory)
-            appStore.setApplicationSettings(userSettings)
-
-            if (playbarValues)
-              appStore.$state.mediaPlaybarValues = playbarValues
-
-            if (lessonPosition) appStore.setLessonPosition(lessonPosition)
-            if (completedState) appStore.setCompletionState(completedState)
-          }
-          //Open Connection to IDB and Save the store state to localDB
-          let dbStoreActive = window.location.hostname == 'localhost' && !remote
-
-          if (dbStoreActive) {
-            console.log(`🏬 IDB Store active!`)
-            await $idb.openDB()
-            await $idb.saveState(appStore, appConfigs.idb_id)
-          }
-          //Update Loaging state
-          appStore.userDataLoaded = true
-
-          //Set document lang attribute (wcag request)
-          document.documentElement.setAttribute('lang', appConfigs.lang)
-        })
-      }
-    )
-    app.directive('nvda-fix', nvdaFix)
-    app.provide('unsubscribeToSetConfig', unsubscribeToSetConfig)
-
-    /* Check that required options are provided */
-    requiredOptions.forEach((key) => {
-      // required key is missing in $data that was passed for the page
-      if (!Object.keys(options).includes(key)) {
-        throw new Error(
-          `👉${errorMissing[key].a}👈 is not provided. Please install and provide 👉${errorMissing[key].b}👈.`
-        )
-      }
-
-      if (key === 'menuSettings') {
-        const mapAct = appStore.$state.thisModule.activities
-        if (!mapAct) return
-        const keys4Lesson = ['lessonTitle', 'lessonNumber', ...mapAct.keys()]
-        const keys4ActivityOpt = ['title', 'subTitle']
-        const keys4ActivityMandatory = ['time', 'anchors']
-        const keys4Anchors = ['anchorName', 'pageRef', 'page']
-
-        const errChecked = validatefileContent(
-          'menuSettings',
-          options.menuSettings,
-          {
-            keys4Lesson,
-            keys4ActivityMandatory,
-            keys4ActivityOpt,
-            keys4Anchors
-          }
-        )
-        if (errChecked) {
-          appStore.errMenuSetting = errChecked
-        } else {
-          appStore.errMenuSetting = false
-        }
-      }
-    })
-
-    window.App_DEBUGMODE = false
-
-    /* Local Method to configurate the connection info */
-    const configConnection = async (data) => {
-      let connectionInfo
-
-      switch (true) {
-        case window.location.origin.includes('cegepadistance.ca'): {
-          if (data.specification == 'scorm') {
-            connectionInfo = {
-              remote: true,
-              endpoint: 'scorm'
-            }
-          } else {
-            try {
-              // Accessing User && Activity Info from Url parametters
-              const queryString = window.location.search
-              const urlParams = new URLSearchParams(queryString)
-              let c // Initialize connection object
-              //Get User && Activity info
-              if (urlParams.get('actor') && urlParams.get('activity_id')) {
-                c = {
-                  actor: JSON.parse(urlParams.get('actor')),
-                  activity_id: urlParams.get('activity_id'),
-                  endpoint: urlParams.get('endpoint'),
-                  registration: urlParams.get('registration'),
-                  remote: true
-                }
-              }
-              // Get LRS autorisation info from serveur
-              const request = await axios.get('../../configs-xapi/xapi.json')
-
-              const { basicauth } = request.data
-
-              c.auth = basicauth
-              connectionInfo = c
-            } catch (err) {
-              console.error('DOWNLOAD ERROR: 💥', err)
-            }
-          }
-
-          break
-        }
-        case window.location.origin.includes('localhost'): {
-          if (!data || data.specification == 'scorm') return
-          let {
-            id,
-            crs_id = null,
-            actor = {
-              mbox: 'mailto:totoescargot@email.com',
-              name: 'Toto Escargot',
-              objectType: 'Agent'
-            },
-            endpointConfig = null,
-            remote = null
-          } = data
-
-          const origin = window.location.origin
-          const activity_id = crs_id
-            ? `${origin}/${crs_id}/${id}`
-            : `${origin}/${id}`
-
-          if (remote == null) remote = false
-
-          if (endpointConfig == null)
-            endpointConfig = {
-              endpoint: 'https://learninglocker.cegepadistance.ca/data/xAPI/',
-              auth: 'Basic MmU4ZGQ3NTY1NDRiZWUxNmUxZWYzZDZiOThjNWVjY2YxNjVhZjIyNzpkY2Q5Zjk4OWZlYjU3MmZlZjBhNDkxZDIxNmYyNmQyY2M1YTQ4Nzlh'
-            }
-
-          connectionInfo = {
-            actor,
-            activity_id,
-            remote,
-            ...endpointConfig
-          }
-          break
-        }
-      }
-
-      return connectionInfo
-    }
-    /* Local Method for data fetching */
-    const fetchDatasFromServer = async (config) => {
-      const {
-        $scorm,
-        $xapi,
-        $idb,
-        actor,
-        activity_id,
-        crs_id,
-        idb_id,
-        specification,
-        remote
-      } = config
-
-      let server = remote ? specification : 'local'
-      //falback to idb when scorm and origin is localhost
-      if (specification == 'scorm' && window.location.hostname == 'localhost')
-        server = 'local'
-
-      let data = null
-
-      switch (server) {
-        case 'scorm': {
-          if ($scorm.initialized) {
-            const lessonStatus = $scorm.GetValue('cmi.core.lesson_status', true)
-            if (lessonStatus === 'unknown') {
-              $scorm.setValue('cmi.core.lesson_status', 'incomplete')
-              $scorm.Commit()
-            }
-
-            const suspendData = $scorm.GetValue('cmi.suspend_data')
-            if (suspendData !== '') {
-              try {
-                const parsed = JSON.parse(suspendData.replace(/\\/g, ''))
-                const {
-                  userData: progress,
-                  routeHistory,
-                  userSettings
-                } = parsed
-
-                const lessonPosition = this.$scorm.GetValue(
-                  'cmi.core.lesson_location',
-                  false
-                )
-
-                data = {
-                  progress,
-                  routeHistory,
-                  lessonPosition,
-                  userSettings
-                }
-              } catch (err) {
-                console.error('❌ Failed to parse suspend_data:', err)
-              }
-            }
-          }
-          break
-        }
-
-        case 'xapi': {
-          try {
-            const actorMbox = actor.mbox.replace('mailto:', '')
-            const activityId = activity_id
-            const _url = new URL(activityId)
-            const parentID = `${_url.origin}/${crs_id}` // redefining activity id for statement
-
-            const lessonProgressParam = { email: actorMbox, activityId }
-            const lessonStateParam = {
-              email: actorMbox,
-              activityId,
-              verb: 'completed'
-            }
-            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
-            ]
-
-            const {
-              userData,
-              savedPoint,
-              preferredSettings,
-              playbarValues,
-              lessonStatus
-            } = await $xapi._getBulkData(fetchParams)
-
-            const { routeHistory = [], ...progress } = userData
-
-            const completedState = lessonStatus || {}
-            const lessonPosition = savedPoint || ''
-            const userSettings = preferredSettings || {}
-
-            data = {
-              progress,
-              routeHistory,
-              lessonPosition,
-              completedState,
-              playbarValues,
-              userSettings
-            }
-          } catch (err) {
-            throw new Error(err)
-          }
-          break
-        }
-        default: {
-          try {
-            await $idb.openDB() //open the new instance in indexDB
-            const res = await $idb.getFromDB(idb_id) // get existing Data from db
-
-            if (res && res.$record) data = res.$record
-          } catch (err) {
-            console.error('❌ Failed get Data from IndexDB:', err)
-          }
-        }
-      }
-
-      return data
-    }
-    //=================================END SET LRS INFO ====================================
-    window.setDebugMode = (mode) => {
-      appStore.appDebugMode = mode
-      const msg = mode ? 'DEBUG MODE ON' : 'DEBUG MODE OFF'
-      console.log(`🚩 ${msg}`)
-    }
-
-    appStore.menuSetting = options.menuSettings
-
-    //=================================SETTING PREFERENCES ====================================
-
-    //define the settings option for user preference according to the mode of App
-    let settingsOptions = {
-      autoplay: null
-      // onboarding: null,// Uncomment when ready to add onboarding in settings
-      // subtitles: null,// Uncomment when ready to add subtitle in settings
-    }
-
-    appStore.applicationSettings = settingsOptions
-    //=================================END SETTING PREFERENCES ====================================//
-
-    //mergeLocales
-    mergeLocales(options.i18n.global)
-    app.use(helper, '$helper')
-    app.use(analytics, '$analytics')
-  }
-}
+import AppBase from './components/AppBase.vue'
+import AppBaseButton from './components/AppBaseButton.vue'
+import AppBaseModule from './components/AppBaseModule.vue'
+import AppBasePage from './components/AppBasePage.vue'
+import AppBaseFlipCard from './components/AppBaseFlipCard.vue'
+import AppBasePopover from './components/AppBasePopover.vue'
+import AppCompJauge from './components/AppCompJauge.vue'
+import AppBaseErrorDisplay from './components/AppBaseErrorDisplay.vue'
+//import AppCompBif from './components/AppCompBif.vue'
+import AppCompAudio from './components/AppCompAudio.vue'
+import AppCompBranchButtons from './components/AppCompBranchButtons.vue'
+import AppCompCarousel from './components/AppCompCarousel.vue'
+import AppCompViewDisplay from './components/AppCompViewDisplay.vue'
+import AppCompTableOfContent from './components/AppCompTableOfContent.vue'
+import AppCompMenu from './components/AppCompMenu.vue'
+import AppCompMenuItem from './components/AppCompMenuItem.vue'
+import AppCompPopUpNext from './components/AppCompPopUpNext.vue'
+import AppCompNavigation from './components/AppCompNavigation.vue'
+import AppCompNoteCall from './components/AppCompNoteCall.vue'
+import AppCompNoteCredit from './components/AppCompNoteCredit.vue'
+import AppCompVideoPlayer from './components/AppCompVideoPlayer.vue'
+import AppCompPlayBarNext from './components/AppCompPlayBarNext.vue'
+import AppCompQuizNext from './components/AppCompQuizNext.vue'
+import AppCompQuizRecall from './components/AppCompQuizRecall.vue'
+import AppBaseSkeleton from './components/AppBaseSkeleton.vue'
+
+import GsapPlugin from './plugins/gsap'
+import eventBus from './plugins/bus'
+import helper from './plugins/helper'
+import analytics from './plugins/analytics'
+import mergeLocales from './plugins/i18n'
+import { scormPlugin } from './plugins/scorm'
+import { xapiPlugin } from './plugins/xapi'
+import { $idb } from './plugins/idb'
+import { validatefileContent } from './shared/validators.js'
+import { createPinia } from 'pinia'
+import { useAppStore } from './module/stores/appStore.js'
+import axios from 'axios'
+import AppCompSVGNext from './components/AppCompSVGNext.vue'
+import VueSafeTeleport from 'vue-safe-teleport'
+import { FocusTrap } from 'focus-trap-vue'
+import nvdaFix from './directives/nvdaFix.js'
+import pckg from '../package.json'
+const pinia = createPinia()
+
+export default {
+  install(app, options) {
+    app.use(pinia)
+    app.use(scormPlugin)
+    app.use(GsapPlugin)
+    app.use(xapiPlugin)
+    app.use(VueSafeTeleport)
+    app.component('FocusTrap', FocusTrap)
+
+    app.use(eventBus)
+    app.use($idb)
+
+    app.component('AppBase', AppBase)
+    app.component('AppBaseButton', AppBaseButton)
+    app.component('AppBaseModule', AppBaseModule)
+    app.component('AppBasePage', AppBasePage)
+    app.component('AppBaseFlipCard', AppBaseFlipCard)
+    app.component('AppBaseErrorDisplay', AppBaseErrorDisplay)
+    app.component('AppCompMenu', AppCompMenu)
+    //app.component('app-comp-bif', AppCompBif)
+    app.component('AppCompAudioPlayer', AppCompAudio)
+    app.component('AppCompBranchButtons', AppCompBranchButtons)
+    app.component('AppCompCarousel', AppCompCarousel)
+    app.component('AppCompMenuItem', AppCompMenuItem)
+    app.component('AppCompJauge', AppCompJauge)
+    app.component('AppCompTableOfContent', AppCompTableOfContent)
+    app.component('AppCompPopUpNext', AppCompPopUpNext)
+    app.component('AppCompNavigation', AppCompNavigation)
+    app.component('AppCompNoteCredit', AppCompNoteCredit)
+    app.component('AppCompNoteCall', AppCompNoteCall)
+    app.component('AppBasePopover', AppBasePopover)
+    app.component('AppCompVideoPlayer', AppCompVideoPlayer)
+    app.component('AppCompPlayBarNext', AppCompPlayBarNext)
+    app.component('AppCompQuizNext', AppCompQuizNext)
+    app.component('AppIconsNext', AppCompSVGNext)
+    app.component('AppCompQuizRecall', AppCompQuizRecall)
+    app.component('AppBaseSkeleton', AppBaseSkeleton)
+    app.component(AppCompViewDisplay)
+
+    if (!options)
+      throw new Error(
+        '💥You did not provide i18n and vuex store. Please install and provide them.'
+      )
+
+    const requiredOptions = ['i18n', 'menuSettings']
+    const errorMissing = {
+      i18n: { a: 'Internationalisation', b: 'vue-I18n' },
+      menuSettings: { a: 'Menu Settings file', b: 'menuSettings' }
+    }
+
+    /*Watch for appBase data received in the store
+     *To set connection Info
+     *To set the connection with indexDB
+     *To fetch data from servers /storage
+     *To set document lang
+     */
+    const appStore = useAppStore()
+    const { name, version } = pckg
+
+    appStore.setAppPackageInfo({
+      packageVersion: `v${version}`,
+      packageName: name
+    })
+
+    const unsubscribeToSetConfig = appStore.$onAction(
+      ({
+        name, // name of the action
+        store, // store instance, same as `someStore`
+        args, // array of parameters passed to the action
+        after // hook after the action returns or resolves
+      }) => {
+        after(async (result) => {
+          if (name !== 'initializeApp') return
+          let { appConfigs } = appStore.$state
+          let { remote = false, specification } = appConfigs
+          const c = await configConnection(appConfigs)
+          store.lrsConfig = c
+          const { $scorm, $xapi, $idb } = app.config.globalProperties
+          if (specification == 'xapi') {
+            const {
+              auth,
+              endpoint,
+              registration = $xapi.ruuid()
+            } = store.lrsConfig
+
+            const config = {
+              auth,
+              endpoint,
+              registration,
+              activity_platform: `SIPI_organizationId`
+            }
+
+            $xapi._configLRS(config) // configure and launch LRS
+          }
+
+          //Configure connection with the Data from appBase
+          //===================================================
+
+          const activity_id = c ? c.activity_id : null
+
+          //Redefine actor with  value from connection informtion
+          if (c && c.actor) appConfigs.actor = c.actor
+
+          //========================FETCHING EXISTING DATA AND SETTING STORE STATE===========================
+          /*Fetch user existing data from the server
+           and set/update initial state  of the store
+          */
+          const res = await fetchDatasFromServer({
+            $scorm,
+            $xapi,
+            $idb,
+            activity_id,
+            ...appConfigs
+          })
+          //Update the store state
+
+          if (res) {
+            const {
+              routeHistory,
+              userSettings = {},
+              progress,
+              playbarValues = null,
+              lessonPosition = null,
+              completedState = null
+            } = res
+
+            appStore.setUserMetaData(progress)
+            appStore.setRouteHistory(routeHistory)
+            appStore.setApplicationSettings(userSettings)
+
+            if (playbarValues)
+              appStore.$state.mediaPlaybarValues = playbarValues
+
+            if (lessonPosition) appStore.setLessonPosition(lessonPosition)
+            if (completedState) appStore.setCompletionState(completedState)
+          }
+          //Open Connection to IDB and Save the store state to localDB
+          let dbStoreActive =
+            !window.location.hostname.includes('cegepadistance.ca') && !remote
+
+          if (dbStoreActive) {
+            console.log(`🏬 IDB Store active!`)
+            await $idb.openDB()
+            await $idb.saveState(appStore, appConfigs.idb_id)
+          }
+          //Update Loaging state
+          appStore.userDataLoaded = true
+
+          //Set document lang attribute (wcag request)
+          document.documentElement.setAttribute('lang', appConfigs.lang)
+        })
+      }
+    )
+    app.directive('nvda-fix', nvdaFix)
+    app.provide('unsubscribeToSetConfig', unsubscribeToSetConfig)
+
+    /* Check that required options are provided */
+    requiredOptions.forEach((key) => {
+      // required key is missing in $data that was passed for the page
+      if (!Object.keys(options).includes(key)) {
+        throw new Error(
+          `👉${errorMissing[key].a}👈 is not provided. Please install and provide 👉${errorMissing[key].b}👈.`
+        )
+      }
+
+      if (key === 'menuSettings') {
+        const mapAct = appStore.$state.thisModule.activities
+        if (!mapAct) return
+        const keys4Lesson = ['lessonTitle', 'lessonNumber', ...mapAct.keys()]
+        const keys4ActivityOpt = ['title', 'subTitle']
+        const keys4ActivityMandatory = ['time', 'anchors']
+        const keys4Anchors = ['anchorName', 'pageRef', 'page']
+
+        const errChecked = validatefileContent(
+          'menuSettings',
+          options.menuSettings,
+          {
+            keys4Lesson,
+            keys4ActivityMandatory,
+            keys4ActivityOpt,
+            keys4Anchors
+          }
+        )
+        if (errChecked) {
+          appStore.errMenuSetting = errChecked
+        } else {
+          appStore.errMenuSetting = false
+        }
+      }
+    })
+
+    window.App_DEBUGMODE = false
+
+    /* Local Method to configurate the connection info */
+    const configConnection = async (data) => {
+      let connectionInfo
+
+      switch (true) {
+        case window.location.origin.includes('cegepadistance.ca'): {
+          if (data.specification == 'scorm') {
+            connectionInfo = {
+              remote: true,
+              endpoint: 'scorm'
+            }
+          } else {
+            try {
+              // Accessing User && Activity Info from Url parametters
+              const queryString = window.location.search
+              const urlParams = new URLSearchParams(queryString)
+              let c // Initialize connection object
+              //Get User && Activity info
+              if (urlParams.get('actor') && urlParams.get('activity_id')) {
+                c = {
+                  actor: JSON.parse(urlParams.get('actor')),
+                  activity_id: urlParams.get('activity_id'),
+                  endpoint: urlParams.get('endpoint'),
+                  registration: urlParams.get('registration'),
+                  remote: true
+                }
+              }
+              // Get LRS autorisation info from serveur
+              const request = await axios.get('../../configs-xapi/xapi.json')
+
+              const { basicauth } = request.data
+
+              c.auth = basicauth
+              connectionInfo = c
+            } catch (err) {
+              console.error('DOWNLOAD ERROR: 💥', err)
+            }
+          }
+
+          break
+        }
+        case window.location.origin.includes('localhost'): {
+          if (!data || data.specification == 'scorm') return
+          let {
+            id,
+            crs_id = null,
+            actor = {
+              mbox: 'mailto:totoescargot@email.com',
+              name: 'Toto Escargot',
+              objectType: 'Agent'
+            },
+            endpointConfig = null,
+            remote = null
+          } = data
+
+          const origin = window.location.origin
+          const activity_id = crs_id
+            ? `${origin}/${crs_id}/${id}`
+            : `${origin}/${id}`
+
+          if (remote == null) remote = false
+
+          if (endpointConfig == null)
+            endpointConfig = {
+              endpoint: 'https://learninglocker.cegepadistance.ca/data/xAPI/',
+              auth: 'Basic MmU4ZGQ3NTY1NDRiZWUxNmUxZWYzZDZiOThjNWVjY2YxNjVhZjIyNzpkY2Q5Zjk4OWZlYjU3MmZlZjBhNDkxZDIxNmYyNmQyY2M1YTQ4Nzlh'
+            }
+
+          connectionInfo = {
+            actor,
+            activity_id,
+            remote,
+            ...endpointConfig
+          }
+          break
+        }
+      }
+
+      return connectionInfo
+    }
+    /* Local Method for data fetching */
+    const fetchDatasFromServer = async (config) => {
+      const {
+        $scorm,
+        $xapi,
+        $idb,
+        actor,
+        activity_id,
+        crs_id,
+        idb_id,
+        specification,
+        remote
+      } = config
+
+      let server = remote ? specification : 'local'
+      //falback to idb when scorm and origin is localhost
+      //falback to idb when scorm and origin is localhost
+      if (
+        (specification == 'scorm' && window.location.hostname == 'localhost') ||
+        !window.location.hostname.includes('cegepadistance.ca')
+      )
+        server = 'local'
+
+      let data = null
+
+      switch (server) {
+        case 'scorm': {
+          if ($scorm.initialized) {
+            const lessonStatus = $scorm.GetValue('cmi.core.lesson_status', true)
+            if (lessonStatus === 'unknown') {
+              $scorm.setValue('cmi.core.lesson_status', 'incomplete')
+              $scorm.Commit()
+            }
+
+            const suspendData = $scorm.GetValue('cmi.suspend_data')
+            if (suspendData !== '') {
+              try {
+                const parsed = JSON.parse(suspendData.replace(/\\/g, ''))
+                const {
+                  userData: progress,
+                  routeHistory,
+                  userSettings
+                } = parsed
+
+                const lessonPosition = this.$scorm.GetValue(
+                  'cmi.core.lesson_location',
+                  false
+                )
+
+                data = {
+                  progress,
+                  routeHistory,
+                  lessonPosition,
+                  userSettings
+                }
+              } catch (err) {
+                console.error('❌ Failed to parse suspend_data:', err)
+              }
+            }
+          }
+          break
+        }
+
+        case 'xapi': {
+          try {
+            const actorMbox = actor.mbox.replace('mailto:', '')
+            const activityId = activity_id
+            const _url = new URL(activityId)
+            const parentID = `${_url.origin}/${crs_id}` // redefining activity id for statement
+
+            const lessonProgressParam = { email: actorMbox, activityId }
+            const lessonStateParam = {
+              email: actorMbox,
+              activityId,
+              verb: 'completed'
+            }
+            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
+            ]
+
+            const {
+              userData,
+              savedPoint,
+              preferredSettings,
+              playbarValues,
+              lessonStatus
+            } = await $xapi._getBulkData(fetchParams)
+
+            const { routeHistory = [], ...progress } = userData
+
+            const completedState = lessonStatus || {}
+            const lessonPosition = savedPoint || ''
+            const userSettings = preferredSettings || {}
+
+            data = {
+              progress,
+              routeHistory,
+              lessonPosition,
+              completedState,
+              playbarValues,
+              userSettings
+            }
+          } catch (err) {
+            throw new Error(err)
+          }
+          break
+        }
+        default: {
+          try {
+            await $idb.openDB() //open the new instance in indexDB
+            const res = await $idb.getFromDB(idb_id) // get existing Data from db
+
+            if (res && res.$record) data = res.$record
+          } catch (err) {
+            console.error('❌ Failed get Data from IndexDB:', err)
+          }
+        }
+      }
+
+      return data
+    }
+    //=================================END SET LRS INFO ====================================
+    window.setDebugMode = (mode) => {
+      appStore.appDebugMode = mode
+      const msg = mode ? 'DEBUG MODE ON' : 'DEBUG MODE OFF'
+      console.log(`🚩 ${msg}`)
+    }
+
+    appStore.menuSetting = options.menuSettings
+
+    //=================================SETTING PREFERENCES ====================================
+
+    //define the settings option for user preference according to the mode of App
+    let settingsOptions = {
+      autoplay: null
+      // onboarding: null,// Uncomment when ready to add onboarding in settings
+      // subtitles: null,// Uncomment when ready to add subtitle in settings
+    }
+
+    appStore.applicationSettings = settingsOptions
+    //=================================END SETTING PREFERENCES ====================================//
+
+    //mergeLocales
+    mergeLocales(options.i18n.global)
+    app.use(helper)
+    app.use(analytics)
+
+    //=======================================
+    const { packageName, packageVersion } = appStore.getAppPackageInfo()
+    console.log(
+      `%c 📦${packageName} %c${packageVersion}`,
+      'color: white; background: #35495e; padding: 4px 8px; border-radius: 4px 0 0 4px;',
+      'color: white; background: #41b883; padding: 4px 8px; border-radius: 0 4px 4px 0;'
+    )
+  }
+}