fcad-core-dragon 2.0.1 → 2.0.2-beta.2

package/src/main.js

@@ -20,8 +20,9 @@ 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 AppCompQuiz from './components/AppCompQuiz.vue'
 import AppCompQuizRecall from './components/AppCompQuizRecall.vue'
+import AppBaseSkeleton from './components/AppBaseSkeleton.vue'
 
 import GsapPlugin from './plugins/gsap'
 import eventBus from './plugins/bus'
@@ -37,6 +38,7 @@ 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()
 
@@ -73,9 +75,10 @@ export default {
     app.component('AppBasePopover', AppBasePopover)
     app.component('AppCompVideoPlayer', AppCompVideoPlayer)
     app.component('AppCompPlayBarNext', AppCompPlayBarNext)
-    app.component('AppCompQuizNext', AppCompQuizNext)
+    app.component('AppCompQuiz', AppCompQuiz)
     app.component('AppIconsNext', AppCompSVGNext)
     app.component('AppCompQuizRecall', AppCompQuizRecall)
+    app.component('AppBaseSkeleton', AppBaseSkeleton)
     app.component(AppCompViewDisplay)
 
     if (!options)
@@ -87,12 +90,12 @@ export default {
     const errorMissing = {
       i18n: { a: 'Internationalisation', b: 'vue-I18n' },
       menuSettings: { a: 'Menu Settings file', b: 'menuSettings' }
-      /// nom de composante avec l'error avec la string comme en haut
     }
 
     /*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()
@@ -104,32 +107,90 @@ export default {
         args, // array of parameters passed to the action
         after // hook after the action returns or resolves
       }) => {
-        after((result) => {
-          if (name !== 'setAppConfigs') return
+        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
-          configConnection(appConfigs).then((c) => {
-            //Save LRS CONFIGURATION TO STORE
-            appStore.lrsConfig = c
-            // Subscribe to changes in the state to save progress in localStorage when application is not in remote mode
-            const remote = c ? c.remote : false
-
-            if (!remote)
-              app.config.globalProperties.$idb
-                .openDB()
-                .then(() =>
-                  app.config.globalProperties.$idb.saveState(
-                    appStore,
-                    appConfigs.idb_id
-                  )
-                )
+          //===================================================
+
+          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 */
@@ -172,22 +233,23 @@ export default {
     /* 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') {
-            return (connectionInfo = {
+            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')) {
-                connectionInfo = {
+                c = {
                   actor: JSON.parse(urlParams.get('actor')),
                   activity_id: urlParams.get('activity_id'),
                   endpoint: urlParams.get('endpoint'),
@@ -200,9 +262,8 @@ export default {
 
               const { basicauth } = request.data
 
-              connectionInfo.auth = basicauth
-
-              return connectionInfo
+              c.auth = basicauth
+              connectionInfo = c
             } catch (err) {
               console.error('DOWNLOAD ERROR: 💥', err)
             }
@@ -243,12 +304,148 @@ export default {
             remote,
             ...endpointConfig
           }
-
-          return connectionInfo
+          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

package/src/mixins/$mediaMixins.js

@@ -66,7 +66,7 @@ const $extendsMedia = {
       'hasMediaElOrTimeline',
       'getCurrentMediaDuration',
       'getCurrentBrowser',
-      'getDataFromServer',
+
       'getAutoplayEnabled',
       'getMediaVolume',
       'getModuleInfo',
@@ -129,16 +129,6 @@ const $extendsMedia = {
       // return this.getMediaVolume
       return this.getMediaPlaybarValues('volume')
     },
-
-    // mediaVolume() {
-    //   let vol = 0.5
-    //   if (!this.getDataFromServer) return vol
-
-    //   const {pbValues} =   this.getDataFromServer
-    //   if(pbValues && pbValues.volume) vol = parseFloat(pbValues.volume)
-    //     console.log("My Vol...", vol)
-    //   return vol
-    // },
     //media from store
     mediaMuted() {
       return this.getMediaMuted

package/src/module/stores/appStore.js

@@ -50,9 +50,10 @@ export const useAppStore = defineStore('$appStore', {
       compStatusTracker: [],
       dataFromServer: null,
       errMenuSetting: null,
-      endPopUp: false
-      //_allFiles: [],
-      //allModuleRoutes: null
+      endPopUp: false,
+      userDataLoaded: false,
+      lessonPosition: [],
+      completedState: {}
     }
   },
   //=======================GETTERS
@@ -80,6 +81,9 @@ export const useAppStore = defineStore('$appStore', {
       return state.mediaMuted
     },
 
+    getUserDataStatus: (state) => {
+      return state.userDataLoaded
+    },
     /**
      * @description: Check if automatic video playback is enabled in application settings
      */
@@ -363,6 +367,7 @@ export const useAppStore = defineStore('$appStore', {
       return (activity = null, id = null) => {
         if (!activity || !id) return null
         const allInteraction = this.getUserInteraction
+
         if (!allInteraction[activity] || !allInteraction[activity][id])
           return {}
 
@@ -381,7 +386,7 @@ export const useAppStore = defineStore('$appStore', {
         let allStates
         let temp = []
 
-        if (state.userMetaData[aKey]) {
+        if (state.userMetaData && state.userMetaData[aKey]) {
           const activity = Object.entries(state.userMetaData[aKey])
 
           // get all the completed acitivities
@@ -612,6 +617,13 @@ export const useAppStore = defineStore('$appStore', {
 
     getEndPopUp: (state) => {
       return state.endPopUp
+    },
+
+    getLessonPosition(state) {
+      return state.lessonPosition
+    },
+    getCompletionState(state) {
+      return state.completedState
     }
   },
   //=======================ACTIONS
@@ -647,6 +659,12 @@ export const useAppStore = defineStore('$appStore', {
     setApplicationSettings(settings) {
       this.applicationSettings = settings
     },
+    setLessonPosition(newData) {
+      this.lessonPosition = newData
+    },
+    setCompletionState(newData) {
+      this.completedState = newData
+    },
 
     setMediaVolume(volume) {
       this.mediaVolume = volume
@@ -672,7 +690,7 @@ export const useAppStore = defineStore('$appStore', {
     },
 
     /* set/update the Application configuration*/
-    async setAppConfigs(data) {
+    async initializeApp(data) {
       this.appConfigs = data
       const {
         id,
@@ -904,12 +922,12 @@ export const useAppStore = defineStore('$appStore', {
       this.sideBIsOpen = data
     },
 
-    async updateDataFetchFromServer(data) {
-      if (!data || data.constructor !== Object) return
-      Object.keys(data).forEach((k) => {
-        this.dataFromServer = { ...this.dataFromServer, [k]: data[k] }
-      })
-    },
+    // async updateDataFetchFromServer(data) {
+    //   if (!data || data.constructor !== Object) return
+    //   Object.keys(data).forEach((k) => {
+    //     this.dataFromServer = { ...this.dataFromServer, [k]: data[k] }
+    //   })
+    // },
 
     updatePreviousActivity(data) {
       this.prevActivity = data