fcad-core-dragon 2.1.0-beta.2 → 2.1.0-beta.4

package/CHANGELOG

@@ -1,3 +1,26 @@
+2.1.0-beta.4(26 septembre 2025)
+	ajout du plugin ScrollTrigger à l’objet $gsap
+
+2.1.0-beta.3(24 septembre 2025)
+	RUPTURE DE COMPATIBILITÉ : Ajout de Google Analytics (analytics_id dans app.vue) nouvelle dépendance : npm install vue-gtag@2.0.1
+
+	Tracking Analytics des événements play/end pour les lecteurs audio/vidéo
+
+	RUPTURE DE COMPATIBILITÉ : Nouvelle structure de données utilisées pour les lecteurs audio/vidéo
+
+	Correction du bogue de scroll au changement de page
+
+	Optimisation de la mise à jour de la valeur de currentPage dans le Store
+
+	Nouvelle fonctionnalité : Il est maintenant possible de redéfinir certains libellés spécifiques du FCAD (FIAG)
+
+	Tracking learninglocker pour les lecteurs audio/vidéo
+
+	Refactoring de la fonctionnalité "idle detector" et du calcul du temps passé sur une activité
+
+	Ajout d’informations supplémentaires affichées quand on active le debug mode
+
+
 2.1.0-beta.1(27 août 2025)
 	RUPTURE DE COMPATIBILITÉ : (structure de données des rétroactions). Seules les propriétés "title" et "hypertext" sont acceptées (anciennement "title", "hypertext_1" et "hypertext_2")
 

package/documentation/composants/app-comp-audio.md

@@ -15,9 +15,41 @@ S'affiche dans un  en cadré avec un titre (obligatoire), une image (pas obligat
 `<app-comp-audio-player :aud-data="audioData2"/>` 
 
 
-## Paramètre 
-
-Aucun paramètre n'est nécessaire pour ce composant.
+## Structure de données
+Voici la structure à utiliser pour les données d'un contenu audio
+> [!IMPORTANT]
+> audiosData doit être un tableau (array)
+```js
+import aud1 from '@/assets/medias/exemple_audio.mp3'
+import posterAud1 from '@/assets/img/audio_poster.png'
+
+export default {
+  data() {
+    return {
+      id: 'P01',
+      activityRef: 'A03',
+      title: 'Lecteurs médias',
+      type: 'pg_normal',
+      audiosData: [
+        {
+          id: 'aud1',
+          mTitle: 'Et si... Annie Ernaux nous parlait',
+          mSources: [
+            {
+              type: 'mp3',
+              src: aud1
+            }
+          ],
+          mPoster: posterAud1,
+          mAlt: "Portrait de l'autrice Annie Ernaux",
+          mTranscript:
+            '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>'
+        }
+      ]
+    }
+  }
+}
+```
 
 ### Props
 

package/documentation/composants/app-comp-video-player.md

@@ -20,9 +20,48 @@ Les transcripts ouvrent dans une fenêtre latérale. Une seule fenêtre peux êt
 
 `<app-comp-video-player :vid-data="videoData" />`
 
-## Paramètre 
-
-Il n'y a pas de paramètre pour ce composant. 
+## Structure de données
+
+Voici la structure à utiliser pour les données d'une vidéo
+> [!IMPORTANT]
+> videosData doit être un tableau (array)
+
+```js
+import videoExemple from '@/assets/medias/exemple_video.mp4'
+import posterDandurand from '@/assets/img/video_poster.jpg'
+import vttVid1FR from '@/assets/medias/exemple_soustitres.vtt'
+
+export default {
+  data() {
+    return {
+      id: 'P01',
+      activityRef: 'A03',
+      title: 'Lecteurs médias',
+      type: 'pg_normal',
+      videosData: [
+        {
+          id: 'vid1',
+          mSources: [
+            {
+              type: 'mp4',
+              src: videoExemple
+            }
+          ],
+          mSubtitles: [
+            {
+              label: 'Français',
+              src: vttVid1FR,
+              srclang: 'fr'
+            }
+          ],
+          mPoster: posterDandurand,
+          mTranscript: 'exemple_transcript.html' // The file MUST be in the public folder of the project
+        }
+      ]
+    }
+  }
+}
+```
 
 ### Props
 

package/package.json

@@ -1,59 +1,58 @@
 {
   "name": "fcad-core-dragon",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.0-beta.4",
   "private": false,
   "type": "module",
   "main": "./src/main.js",
-  "config": {
-    "projname": ""
-  },
   "scripts": {
-    "watch": "nodemon -e js,vue,html,json -x yalc publish --push",
-    "lintfix": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
-    "lintreport": "eslint src --ext .js,.vue --ignore-path .gitignore",
-    "vue": "vue",
+    "build": "vite build",
     "dev": "vite",
+    "docs:build": "vitepress build documentation",
+    "docs:dev": "vitepress dev documentation",
+    "docs:preview": "vitepress preview documentation",
     "format": "prettier --write src/",
-    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
-    "build": "vite build",
+    "lintfix": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "lintreport": "eslint src --ext .js,.vue --ignore-path .gitignore",
     "preview": "vite preview",
+    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
     "test:unit": "vitest",
-    "docs:dev": "vitepress dev documentation",
-    "docs:build": "vitepress build documentation",
-    "docs:preview": "vitepress preview documentation"
+    "vue": "vue",
+    "watch": "nodemon -e js,vue,html,json -x yalc publish --push"
+  },
+  "config": {
+    "projname": ""
   },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
   "dependencies": {
     "axios": "^1.6.8",
     "gsap": "^3.12.5",
     "idb": "^8.0.0",
     "mobile-detect": "^1.4.5",
-    "pinia": "^2.1.7",
+    "pinia": "^3.0.3",
     "tiny-emitter": "^2.1.0",
     "vue-safe-teleport": "^0.1.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/test-utils": "^2.4.0-alpha.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.31.0",
+    "eslint-plugin-cypress": "^5.1.0",
+    "eslint-plugin-vue": "~10.3.0",
     "jsdom": "^25.0.1",
     "nodemon": "^3.1.0",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
+    "prettier": "3.6.2",
+    "sass-embedded": "^1.91.0",
+    "vite-plugin-vue-devtools": "^8.0.2",
     "vitepress": "^1.6.3",
-    "vitest": "^2.1.5",
-    "vue": "^3.5.12",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
     "vue-router": "^4.4.5"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
   "engines": {
     "node": ">0.11.9"
   }

package/src/components/AppBase.vue

@@ -36,7 +36,12 @@
       </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>
 
@@ -61,18 +66,19 @@
 <script>
 import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore.js'
-import { timerMixin } from '../mixins/timerMixin'
+import { Timer } from '../composables/useTimer.js'
+import { IdleDetector } from '../composables/useIdleDetector.js'
 import { validateAppContent } from '../shared/validators'
-import { computed } from 'vue'
+import { version as fcadVersion } from '../../package.json'
+import { computed, h, reactive } from 'vue'
 import mobileDetect from 'mobile-detect'
+
 export default {
-  mixins: [timerMixin],
   provide() {
     return {
-      elapsedIdleTime: computed(() => this.elapsedIdleTime),
-      timerCurrentState: computed(() => this.timerCurrentState),
-      lessonDuration: computed(() => this.lessonDuration),
-      activityDuration: computed(() => this.activityDuration)
+      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: {
@@ -86,7 +92,9 @@ export default {
   },
   setup() {
     const store = useAppStore()
-    return { store }
+    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() {
@@ -99,7 +107,10 @@ export default {
       buildInfoClicked: false,
       error: [],
       initialLoading: true,
-      f5KeyPressed: false
+      f5KeyPressed: false,
+      lessonDuration: 0,
+      idleTimeout: 5 * 60000, //5 mins: this is the time of inactivity before considering the user is idle
+      starterTimeout: null
     }
   },
   computed: {
@@ -117,8 +128,16 @@ export default {
       'getErrorMenu',
       'getRouteHistory',
       'getBookmarkEnabled',
+      'getAppDebugMode',
       'getApplicationSettings'
     ]),
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
+    activityDuration() {
+      return this.appTimer.getTime() // return the time duration in seconds
+    },
+
     getwidth() {
       return window.innerWidth
     },
@@ -134,12 +153,9 @@ export default {
     },
     appReady() {
       let readyState = this.getAppStatus === 'ready' ? true : false
-      if (readyState) {
-        this.setInitialLoadingDone()
-      }
-
       return readyState
     },
+
     displayLang() {
       let lang = false
       const displayList = ['en-US', 'fr-FR', 'es-ES'] // list of xapi verbs language display
@@ -162,6 +178,20 @@ export default {
     }
   },
   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() {
         !this.store.$state.userDataLoaded
@@ -169,6 +199,13 @@ export default {
           : this.updateTracker('appBase', 'ready')
       },
       immediate: true
+    },
+    appReady: {
+      handler(newValue) {
+        if (newValue) {
+          this.setInitialLoadingDone()
+        }
+      }
     }
   },
 
@@ -203,24 +240,19 @@ export default {
     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('keydown', this.handleF5KeyPressed)
     window.addEventListener(
       'beforeunload',
       (e) => {
+        this.executeCloseEventTriggered()
         // e.preventDefault()
         // e.returnValue = true
-
-        //prevent app to send/Save data when F5 is pressed to reload app
-        if (this.f5KeyPressed) return
-
-        this.executeCloseEventTriggered()
-
-        //debugger
       },
       true
     )
@@ -230,6 +262,7 @@ export default {
     // 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)
@@ -241,7 +274,9 @@ export default {
     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
   },
@@ -258,30 +293,82 @@ export default {
       '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.timerCurrentState == 'started') this.stopTimer('activity')
-      this.startTimer('activity')
+      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.startIdleTimer() //start the iddle dectection
+        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
-      }, 1000)
+      }, 800)
     },
-    /*
-     * stop the idle timer and remove hidle-dector listeners
+    /**
+     * @description unset the idle detector
+     *  stop the idle timer and remove DOM event to stop listening the idle timer
      */
     unsetIdleDetector() {
-      this.stopIdleTimer()
+      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
@@ -580,21 +667,31 @@ export default {
               ? (d = `PT${duration.split(':')[0]}H${duration.split(':')[1]}M${
                   duration.split(':')[2]
                 }S`)
-              : (d = `PT${this.activityDuration.split(':')[0]}H${
-                  this.activityDuration.split(':')[1]
-                }M${this.activityDuration.split(':')[2]}S`)
+              : (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
           }
 
-          // ===================== Extension of the Object definition =====================//
           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
@@ -622,7 +719,6 @@ export default {
           //============================================================
           stmtsQueue.push(stmt)
         })
-
         this.$xapi._sendStatements(stmtsQueue, cb, withFetch)
       }
     },
@@ -681,7 +777,7 @@ export default {
             }
           }
         ],
-        duration: this.lessonDuration
+        duration: this.appTimer.ISOTimeParser(this.lessonDuration)
       }
 
       const endStmt = { ...stmt }
@@ -732,7 +828,8 @@ export default {
         option
       ) //send xapi statement
 
-      if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
+      if (this.appTimer.getTimerState() === 'started')
+        setTimeout(() => this.stopAppTimer(), 0) //clear the timer
 
       if (cb) cb()
     },
@@ -750,7 +847,7 @@ export default {
       this.setRouteHistory([]) // resetting  store record for all last visited pages
 
       // this.$bus.$emit('stop-timer')
-      this.stopTimer()
+      this.stopAppTimer()
       if (this.getModuleInfo.packageType !== 'xapi') return
 
       if (!this.getConnectionInfo || this.getConnectionInfo.remote == false)
@@ -929,7 +1026,7 @@ export default {
       if (e) e.focus()
     },
     /**
-     * @description Mothods to validate that application settings are correctly
+     * @description Method to validate that application settings are correctly
      * Opens error component when configurations are not correct
      *
      */
@@ -981,9 +1078,24 @@ export default {
           '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()
     }
   }
 }
@@ -1039,4 +1151,20 @@ export default {
     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>

package/src/components/AppBaseButton.test.js

@@ -11,7 +11,6 @@ describe('AppBaseButton Tests', () => {
     })
     expect(wrapper.find('button').exists()).toBeTruthy()
   })
-
   it('should fire click event', async () => {
     const wrapper = mount(AppBaseButton, {
       props: defaultProps