fcad-core-dragon 2.1.0-beta.1 → 2.1.0-beta.3

package/src/components/AppCompPlayBarNext.vue

@@ -430,6 +430,10 @@ mediaMixins is used for all the methods/data shared between audio and video. In
           </app-base-button>
         </div>
       </div>
+      <div v-if="appDebugMode" class="timer">
+        <!-- <div class="timer"> -->
+        {{ timer.getElapsedTime() }}
+      </div>
     </div>
   </div>
 </template>
@@ -438,21 +442,24 @@ mediaMixins is used for all the methods/data shared between audio and video. In
 import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
 import axios from 'axios'
-
+import { Timer } from '../composables/useTimer'
+import { reactive } from 'vue'
 export default {
   inject: ['userInteraction'],
   props: {
     mediaToPlay: { type: [Object, Boolean], default: false }
   },
-
   emits: ['resize-video'],
-  setup() {
+
+  setup(props) {
     const store = useAppStore()
-    return { store }
+    const id = `plyr_${props.mediaToPlay.id}`
+    const timer = reactive(new Timer(id)) // Making Timer instance reactive to be able to track changes
+
+    return { id, store, timer }
   },
   data() {
     return {
-      id: `plyr_${this.mediaToPlay.id}`,
       //Playback animation
       playClicked: false,
       playBackAnim: true,
@@ -521,7 +528,14 @@ export default {
         progressBar: false,
         volumeSlider: false
       },
-      otherVideoTranscriptShown: false
+      otherVideoTranscriptShown: false,
+      previousTime: 0,
+      viewedThreshold: 0.85,
+      viewedThresholdReached: false,
+      startedTime: 0,
+      playStmtSent: false,
+      mediaRawData: null
+
       //==========================================================
     }
   },
@@ -539,8 +553,12 @@ export default {
       'getMediaPlaybarValues',
       'getPageInteraction',
       'getUserInteraction',
-      'getMediaMuted'
+      'getMediaMuted',
+      'getAppDebugMode'
     ]),
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
     //==========================================================
     //MediaElement
     mediaElement() {
@@ -636,7 +654,7 @@ export default {
 
       return txtA11Y
     },
-    //==========================================================
+
     //Transcript
     hasTranscript() {
       if (!this.mediaToPlay) return
@@ -715,6 +733,18 @@ export default {
       },
       immediate: true
       // deep: true
+    },
+    getCurrentPage: {
+      handler(newValue) {
+        if (!newValue.audiosData && !newValue.videosData) return
+        const { audiosData, videosData } = this.getCurrentPage
+        this.mediaRawData =
+          this.mediaToPlay.mType == 'video'
+            ? videosData.find((el) => el.id == this.mediaToPlay.id)
+            : audiosData.find((el) => el.id == this.mediaToPlay.id)
+      },
+      immediate: true,
+      deep: true
     }
   },
 
@@ -792,7 +822,7 @@ export default {
         //window handlers for playbar progress
         window.addEventListener('mousemove', this.progressWindowMove)
         window.addEventListener('mouseup', this.progressWindowUp)
-        //EndprogressBar
+
         //Update data when media as a timeupdate/ended
         this.mediaElement.addEventListener(
           'timeupdate',
@@ -835,22 +865,32 @@ export default {
     },
     /**
      * @description - play or pause the media
-     * @fires manage-media-players - to the PAge the media in play
+     * when the media starts playing, send a statement to the LRS.
+     * Statement is sent only once per media play
+     * @fires manage-media-players - to the Page the media in play
      */
-    togglePlay() {
+    async togglePlay() {
       //If the progressBar is at the end, restart the media
       if (this.progressBarEnded) {
         this.mediaElement.currentTime = 0
         this.currentTime = 0
       }
-      //MediaElement
+      //Play or Pause the media
       this.isPlaying ? this.mediaElement.pause() : this.mediaElement.play()
+      this.startedTime = this.mediaElement.currentTime
+      // start or pause the timer depending of the state of the media
+      !this.isPlaying ? this.timer.start() : this.timer.pause()
+
+      if (!this.playStmtSent) {
+        this.sendMediaStatement('play', this.startedTime, null)
+        this.playStmtSent = true
+      }
       //Data
       if (!this.isPlaying) {
         //Signal to set this mediaElement as the last playing
         this.$bus.$emit('manage-media-players', this.mediaToPlay)
+        this.previousTime = Math.round(this.mediaElement.currentTime)
       }
-
       this.isPlaying = !this.isPlaying
       this.canReplay = false
     },
@@ -878,6 +918,15 @@ export default {
       if (this.mediaElement && this.isPlaying) {
         this.mediaElement.pause()
         this.isPlaying = false
+
+        const expectedViewTime = Number(
+          this.timer.getElapsedTime() / Math.trunc(this.mediaDuration)
+        ) //relation view time to media duration
+
+        this.timer.stop()
+
+        this.sendMediaStatement('end', this.startedTime, expectedViewTime)
+        this.playStmtSent = false //reset the play statement for next play
       }
       this.$bus.$emit('media-viewed', this.mediaToPlay.id)
       this.canReplay = true
@@ -1123,6 +1172,11 @@ export default {
     updateProgressBarTime(e) {
       //Get currentTime from the event
       this.currentTime = e.target.currentTime
+
+      //Set viewedThresholdReached to true when the threshold is reached
+      if (Math.trunc(this.progressBarPercentage) == this.viewedThreshold * 100)
+        this.viewedThresholdReached = true
+
       //Update strings
       this.setProgressBarA11Y()
       //If replay is true and the progressIndicator is not at the end, set canReplay to false
@@ -1542,7 +1596,6 @@ export default {
       }
 
       if (this.transcriptEnabled && this.transcriptToShow) {
-        //this.$bus.$emit('resize-media', 'sm')
         //Resize video container
         this.$emit('resize-video', 'sm')
         //Open sidebar with the transcript
@@ -1555,7 +1608,6 @@ export default {
 
       // Send close signal for the side bar when transcipt state is not enabled
       if (!this.transcriptEnabled) {
-        //this.$bus.$emit('resize-media', 'lg')
         //Resize video container
         this.$emit('resize-video', 'lg')
         //Open sidebar with the transcript
@@ -1612,7 +1664,8 @@ export default {
     },
 
     /**
-     * @description Show the media controler     */
+     * @description Show the media controler
+     */
     showControls() {
       this.showControlsValue = true
       if (this.hideTimer) clearTimeout(this.hideTimer) //cancel existing timer
@@ -1629,6 +1682,94 @@ export default {
       this.hideTimer = setTimeout(() => {
         this.showControlsValue = false
       }, this.delayUntilHide)
+    },
+
+    /**
+     * @description - Send xAPI statement for media play and end
+     * @param {String} action - play or end
+     * @param {Number} startTime - time in seconds when the media start to be played
+     * @param {Number} endTime - time in seconds when the media stop to be played
+     */
+    async sendMediaStatement(action, startTime = null, endTime = null) {
+      const expectedActions = ['play', 'end']
+      if (!action || !expectedActions.includes(action)) return
+
+      // const { audiosData, videosData } = this.getCurrentPage
+      const media = this.mediaRawData
+      //   this.mediaToPlay.mType == 'video'
+      //     ? videosData.find((el) => el.id == this.mediaToPlay.id)
+      //     : audiosData.find((el) => el.id == this.mediaToPlay.id)
+
+      if (!media || !media.mSources || !media.mSources.length) return
+
+      const { mTitle, mSources } = media
+      const { mType } = this.mediaToPlay
+
+      const URIBase = `media/${mType}/`
+
+      const stmt = {
+        id: (() => `${URIBase}${mSources[0].src.split('/').toReversed()[0]}`)(),
+        verb: null,
+        definition: mTitle || mSources[0].src,
+        description: null,
+        type: `https://w3id.org/xapi/${mType}/activity-type/${mType}`,
+        context: {
+          contextActivities: {
+            category: [{ id: `https://w3id.org/xapi/${mType}` }]
+          },
+          extensions: {
+            'https://w3id.org/xapi/video/extensions/session-id':
+              this.getModuleInfo.id
+          }
+        },
+        result: null
+      }
+
+      switch (action) {
+        case 'play': {
+          stmt.verb = 'played'
+          stmt.description = `${mType} ${stmt.id.replace(URIBase, '')}`
+          stmt.result = {
+            extensions: {
+              'https://w3id.org/xapi/video/extensions/time':
+                Math.round(startTime),
+              'https://w3id.org/xapi/video/extensions/progress': Math.round(
+                (startTime / this.mediaDuration) * 100
+              )
+            }
+          }
+          break
+        }
+
+        case 'end': {
+          stmt.verb = 'completed'
+          stmt.description = `${mType} ${stmt.id.replace(URIBase, '')}`
+          stmt.result = {
+            extensions: {
+              'https://w3id.org/xapi/video/extensions/progress': endTime * 100,
+              'https://w3id.org/xapi/video/extensions/time-from':
+                Math.round(startTime),
+              'https://w3id.org/xapi/video/extensions/time-to': this.currentTime
+            },
+            completion:
+              endTime >= this.viewedThreshold && this.viewedThresholdReached
+          }
+          stmt.duration = this.timer.ISOTimeParser(endTime * this.mediaDuration)
+          break
+        }
+      }
+
+      /* send play/end events to Google Analytics */
+      const analyticsEventName = `fcad_${mType}_${action}`
+      const analyticsEventParams = {
+        title: stmt.definition,
+        url: mSources[0].src
+      }
+      if (action === 'end') {
+        analyticsEventParams.viewed = this.viewedThresholdReached
+      }
+      this.$analytics.sendEvent(analyticsEventName, analyticsEventParams)
+      this.$bus.$emit('send-xapi-statement', stmt)
     }
   }
 }

package/src/components/AppCompPopUpNext.vue

@@ -43,7 +43,7 @@
         centered
         @after-leave="$close(pContent.cb_$close)"
       >
-        <focus-trap v-model:active="dialogue">
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
           <div class="pop-outside">
             <div class="pop-header">
               <app-base-button
@@ -85,7 +85,7 @@
         v-bind="pArgs"
         @after-leave="$close(pContent.cb_$close)"
       >
-        <focus-trap v-model:active="dialogue">
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
           <div class="pop-outside">
             <div class="pop-header">
               <app-base-button
@@ -192,7 +192,7 @@
         v-bind="pArgs"
         @after-leave="$close(pContent.cb_$close)"
       >
-        <focus-trap v-model:active="dialogue">
+        <focus-trap v-model:active="dialogue" :prevent-scroll="true">
           <component :is="{ template: pContent.template }"></component>
         </focus-trap>
       </v-dialog>

package/src/components/AppCompQuizNext.vue

@@ -58,7 +58,7 @@
         </div>
       </template>
     </v-col>
-    <v-col cols="12" aria-live="polite">
+    <v-col cols="12" class="ctn-retro" aria-live="polite">
       <transition name="fade" mode="in-out">
         <div
           v-if="showRetro"

package/src/components/AppCompQuizRecall.vue

@@ -19,7 +19,7 @@
         v-if="quizRecall.title"
         class="quizRecall-title"
       >
-        {{ quizRecall.title }} -
+        {{ quizRecall.title }}
       </component>
       <!--Quiz answer conditionning-->
       <app-base-error-display
@@ -60,7 +60,6 @@
 //Recall mixins has the necessary datas and functions to give back quizRecall statu
 import { mapState } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
-import { nextTick } from 'vue'
 
 export default {
   name: 'AppCompQuizRecall',
@@ -198,7 +197,7 @@ export default {
     },
     //Get datas from quizRecallData and userData and add them to quizRecall object
     async getQuizRecallAnswer(userData) {
-      await nextTick() //wait for the DOM to update
+      await this.$nextTick() //wait for the DOM to update
       const { quizId, hypertext_done, hypertext_undone, title, titletag } =
         this.quizRecallData
 

package/src/components/AppCompTableOfContent.vue

@@ -9,7 +9,7 @@
 
 <template>
   <div v-if="error" id="sidebar-submenu" :class="{ isOpen: isOpened }">
-    <focus-trap :active="isOpened">
+    <focus-trap :active="isOpened" :prevent-scroll="true">
       <div ref="target">
         <!-- <div class="submenu-header"> -->
         <app-base-button

package/src/components/tests__/useTimer.spec.js

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Timer } from '../../composables/useTimer'
+
+// vitest vi utility ref: https://vitest.dev/api/vi.html
+// vi fakeTimers ref: https://vitest.dev/api/vi.html#vi-usefaketimers
+
+describe('Timer class', () => {
+  let timer
+
+  beforeEach(() => {
+    Timer.timers.clear() // Clear existing timers before each test
+    timer = new Timer()
+    vi.useFakeTimers() // Enable fake timers before each test
+  })
+
+  afterEach(() => {
+    timer.destroy() // destroy created timer after each test
+    vi.useRealTimers() // Restore real timers after each test
+  })
+
+  it('should create a Timer instance with a unique ID', () => {
+    const timer2 = new Timer() //create a second instance
+    expect(timer2.getTimerID()).not.toBe(timer.getTimerID())
+    expect(Timer.timers.size).toBe(2) // Two timers should be registered
+  })
+
+  it('should return a timer instance by it ID', () => {
+    const timer2 = new Timer('timer22') //create a second instance with custom ID
+    expect(timer.getTimer('timer22')).toBeInstanceOf(Timer)
+  })
+
+  it('should throw error when a timer instance doesn`t exist', () => {
+    const id = 'noExistingTimer'
+    expect(() => timer.getTimer(id)).toThrowError(
+      `Timer with ID ${id} does not exist.`
+    )
+  })
+
+  it('should initialize timer at 0 seconds', () => {
+    expect(timer.getTime()).toBe(0)
+  })
+
+  it('should start the timer and increment time every second', () => {
+    timer.start()
+    expect(timer.getTimerState()).toBe('started')
+
+    vi.advanceTimersByTime(5000) // Fast-forward 3 seconds
+    expect(timer.getTime()).toBe(5) // Should be approximately 5 seconds
+  })
+
+  it('should display time in correct format when converting to ISOformats', () => {
+    timer.start()
+    expect(timer.getTimerState()).toBe('started')
+
+    vi.advanceTimersByTime(65000) // Fast-forward 3 seconds
+
+    const fullISOFormat = '1970-01-01T00:01:05.000Z'
+    const isoTimeStr = '00:01:05'
+
+    expect(timer.getTime()).toBe(65) // Should be approximately 1 min 5 seconds (00:01:05)
+    expect(timer.formatToISOString(timer.getTime())).toBe(fullISOFormat)
+    expect(timer.ISOTimeParser(timer.getTime())).toBe(isoTimeStr)
+  })
+
+  it('should pause the timer', () => {
+    timer.start()
+    vi.advanceTimersByTime(2000)
+    timer.pause()
+    const current = timer.getTime()
+
+    // Advance time but timer should stay paused
+    vi.advanceTimersByTime(3000)
+    expect(timer.getTime()).toBe(current) // about 2 seconds
+    expect(timer.ISOTimeParser(timer.getTime())).toBe('00:00:02')
+  })
+
+  it('should reset the timer to 0 when timer stops', () => {
+    timer.start()
+    vi.advanceTimersByTime(4000)
+    timer.stop()
+    expect(timer.getTime()).toBe(0)
+    expect(timer.getTimerState()).toBe('stopped')
+  })
+
+  it('should destroy timer', () => {
+    const id = timer.getTimerID()
+    timer.destroy()
+    expect(Timer.timers.get(id)).toBeUndefined()
+    expect(Timer.timers.size).toBe(0)
+  })
+})

package/src/composables/useIdleDetector.js

@@ -0,0 +1,56 @@
+export class IdleDetector {
+  constructor() {
+    this.idleCounter = 0
+    this.idleTimeoutID = null
+    this.detectorState = 'stopped' // can be 'pause' or 'stop'
+    this.idleTimer = null
+  }
+
+  /**
+   * @description Start the idle timer -
+   * creates an interval to track idle time and a timeout to trigger actions
+   * after a specified period of inactivity.
+   * @param {Function} action - a callback function to execute when the idle timeout is reached.
+   * @param {Number} timeout - the duration in milliseconds before the action is triggered.
+   */
+  startIdleTimer(action = null, timeout = 0) {
+    this.idleTimer = setInterval(() => {
+      this.idleCounter += 1
+    }, 1000)
+    this.detectorState = 'started'
+
+    if (!action || typeof action !== 'function') return
+
+    this.idleTimeoutID = setTimeout(() => action(), timeout)
+  }
+
+  /**
+   * @description Reset the idle timer -
+   * clears the current idle timer and timeout,
+   */
+  stopIdleTimer() {
+    this.idleCounter = 0
+    clearInterval(this.idleTimer)
+    clearTimeout(this.idleTimeoutID)
+    this.detectorState = 'stopped'
+  }
+
+  /**
+   * @description Get the current state of the timer
+   *
+   * @returns {String} - timer state, can be 'started' or 'stopped'
+   */
+  getDectorState() {
+    return this.detectorState
+  }
+
+  /**
+   * @description Get the elapsed time for the idle timer.
+   *               This is the time the idle detector has been running since it was started.
+   *
+   * @returns {Number} - the time count in seconds
+   */
+  getElapsedTime() {
+    return this.idleCounter
+  }
+}

package/src/composables/useQuiz.js

@@ -1,4 +1,4 @@
-//This composable sould Extend the functionality of a the quiz
+//This composable should Extend the functionality of a the quiz
 
 import i18n from '@/i18n' //Must import directly the local from project app because vue-18in does not work in legacy mode with composable
 

package/src/composables/useTimer.js

@@ -0,0 +1,175 @@
+export class Timer {
+  static timers = new Map() // Store all timers by ID
+
+  constructor(timerID) {
+    this.timerID = timerID || this.createTimerID() //timerID of the timer
+    this.timeCounter = 0 //time counter
+    this.elapsedCounter = 0 //elapsed time counter how lofg the timer is running
+    this.interval = null //interval for the timer
+    this.timerState = 'stopped' //state of the timer, can be 'started' or 'stopped'
+     Timer.timers.set(this.timerID, this) // Store the timer in the static map
+  }
+
+  /**
+   * @description Start the timer
+   */
+  start() {
+    if (this.getTimerState() == 'stopped') {
+      this.interval = setInterval(() => {
+        this.timeCounter += 1
+        this.elapsedCounter += 1
+      }, 1000)
+      this.timerState = 'started'
+
+    }
+  }
+
+  /** @description Pause the timer */
+  pause() {
+    if (this.getTimerState() == 'started') {
+      clearInterval(this.interval)
+      this.timerState = 'stopped'
+    }
+  }
+
+  /** @description Stop the timer and reset the timer to zero */
+  stop() {
+    if (this.getTimerState() == 'started') {
+      clearInterval(this.interval)
+      this.timeCounter = 0
+      this.elapsedCounter = 0
+      this.timerState = 'stopped'
+
+    }
+  }
+
+  /** @description Destroy the timer instance */
+   destroy() {
+    this.pause()
+    Timer.timers.delete(this.timerID)
+  }
+
+  /** @description Get the timer ID */
+  getTimerID() {
+    return this.timerID
+  }
+
+/**
+ *
+ * @description retrive a timer instance by its ID
+ * If no ID is provided, it returns the current timer instance.
+ * @param {String} id - the ID of the timer to retrieve
+ * If no ID is provided, it returns the current timer instance.
+ *
+ * @throws {Error} - if the timer with the specified ID does not exist
+ *
+ * @returns {Timer} - the timer instance
+ */
+  getTimer(id=null) {
+    if (!id) {
+      console.warn('No timer ID provided. Returning the current timer.')
+      return this
+    }
+    if (!Timer.timers.has(id)) throw new Error(`Timer with ID ${id} does not exist.`)
+    return Timer.timers.get(id)
+  }
+
+  /**
+   * @description Get the current time counter in seconds
+   *
+   * @returns {Number} - the time counter in seconds
+   */
+  getTime() {
+    return this.timeCounter
+  }
+  /**
+   * @description Get the current state of the timer
+   *
+   * @returns {String} - timer state, can be 'started' or 'stopped'
+   */
+  getTimerState() {
+    return this.timerState
+  }
+  /**
+   * @description Get the elapsed time for the timer
+   *               This is the time the timer has been running since it was started.
+   *               It is not reset when the timer is paused.
+   *
+   * @returns {Number} - the time count in seconds
+   */
+  getElapsedTime() {
+    return this.elapsedCounter
+  }
+
+
+  /**
+   * @description Get all existing timers
+   *
+   * @returns {Map} - a map of all timer instances with their IDs as keys
+   */
+
+  static getAllTimers() {
+      return Timer.timers
+  }
+
+  /**
+   * @description - This method generates a unique timer ID
+   *
+   * @returns {String} - a unique timer ID
+   */
+  createTimerID() {
+    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+    let str = ''
+    const n = 2
+    for (let i = 0; i < n; i++) {
+      str = `${str}${alphabet[Math.floor(Math.random() * alphabet.length)]}`
+    }
+
+    const id = `Tm$${str}${Math.floor(Math.random() * 1000)}`
+
+    return id
+  }
+
+
+  /**
+   * @description Format seconds to ISO 8601 format
+   * Example of ISO 8601 time format of 24 chars: "1970-01-04T14:50:00.000Z"
+   * @param {Number} seconds - time in seconds
+   *
+   * @returns {String} - ISO 8601 formatted time string // YYYY-MM-DDTHH:mm:ss.sssZ
+   */
+  formatToISOString(seconds) {
+    let d = new Date(null) //create a default date ref
+    d.setSeconds(seconds) //set the time with passed numbers of seconds
+
+    let ISOTime = d.toISOString()
+
+    return ISOTime
+  }
+
+  /**
+   * @description gives time period in the format of HH:mm:ss
+   * @param {Number} seconds - time in seconds
+   *
+   * @returns {String} - time period in the format of HH:mm:ss
+   */
+  ISOTimeParser(seconds) {
+    let ISOTimePeriod = this.formatToISOString(seconds).substring(8, 19) // only the time portion of it
+    ISOTimePeriod = ISOTimePeriod.split('T')
+    const DDToHrs = (parseInt(ISOTimePeriod[0]) - 1) * 24 // convert xxT to hrs
+    const periodOfTime = ISOTimePeriod[1] ? ISOTimePeriod[1].split(':') : null
+
+    if (!periodOfTime) return '00:00:00'
+
+    let timeString = ''
+    let HH = (DDToHrs + parseInt(periodOfTime[0])).toString()
+    let mm = periodOfTime[1]
+    let ss = periodOfTime[2]
+
+    if (HH.length === 1) HH = `0${HH}`
+
+    timeString = `${HH}:${mm}:${ss}`
+
+    return timeString
+  }
+}