fcad-core-dragon 2.1.1 → 2.2.0-beta.1

package/src/components/AppBasePage.vue

@@ -1,866 +1,862 @@
-<!--
- @  Description: a prototype to test refactoring of pageMixin paradigm and fonctionality
- @ What it does: The component received a data and validate the type of page that will be created
-                  The component update the store information for the  type of page created and also the timeline
-@Note: Page not created with this component will not have the data automatically traked by the application
--->
-<template>
-  <div :id="pageData.id" :key="pageData.id" class="app-page" role="main">
-    <div v-if="appDebugMode" class="debug-pageInfo" :class="{ open: push }">
-      <button class="w-btn" @click="push = !push">&lt;</button>
-      <div class="ctn">
-        Activity info: Route : {{ $route.path }}
-        <br />
-
-        Activity id : {{ getDebugModeInfo.id }}
-        <br />
-        Nombre de page : {{ getDebugModeInfo.size }}
-        <br />
-        Page complete :
-        <ul>
-          <li v-for="(value, key) in getDebugModeInfo.progression" :key="key">
-            {{ value }}
-          </li>
-        </ul>
-      </div>
-    </div>
-    <slot v-if="!errorPage.length" name="content">Page</slot>
-    <app-base-error-display
-      v-else
-      :error-group="'component'"
-      :error-title="'ERREUR: CRÉATION DE LA PAGE'"
-      :errors-list="errorPage"
-      :error-text="`Vous avez une/des erreur(s) dans la création de votre PAGE. Veuillez
-            corriger les erreurs ci-dessous:`"
-    />
-    <span
-      id="page_info"
-      ref="page_info"
-      class="sr-only"
-      aria-hidden="true"
-    ></span>
-    <div id="hiddenAlertContainer" role="alert" class="sr-only"></div>
-  </div>
-</template>
-
-<script>
-import { computed } from 'vue'
-import { useAppStore } from '../module/stores/appStore'
-import { mapState, mapActions } from 'pinia'
-
-export default {
-  provide() {
-    return { userInteraction: computed(() => this.userInteraction) }
-  },
-  props: {
-    pageData: {
-      type: Object,
-      required: true,
-
-      validator(value) {
-        let isValid = true
-        if (import.meta.env.DEV) {
-          const requiredPageKeys = ['id', 'activityRef', 'type']
-          let requiredTypeValues = [
-            'pg_normal',
-            'pg_menu',
-            'pg_animation',
-            'pg_media',
-            'pg_branch'
-          ]
-
-          requiredPageKeys.forEach((key) => {
-            if (!Object.keys(value).includes(key)) {
-              console.warn(
-                `%c  WARNING!>>> PAGE: PAGE: Missing ${key} for the page in $data `,
-                'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-              )
-              isValid = false
-            } else if (
-              key === 'type' &&
-              !requiredTypeValues.includes(value[key])
-            ) {
-              let errString = `Invalid value assigment for type of the page in $data.`
-
-              console.warn(
-                `%c  WARNING!>>> PAGE: ${errString}`,
-                'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-              )
-              isValid = false
-            }
-          })
-        }
-        return isValid
-      }
-    }
-  },
-  setup(props) {
-    const store = useAppStore()
-    const { activityRef, id: pageID, type: pageType } = props.pageData
-
-    //Getting initial existing userIntaction from store
-    const { userInteraction: previousInteraction = {} } =
-      store.getPageInteraction(activityRef, pageID)
-
-    return { store, previousInteraction, pageID, pageType }
-  },
-
-  data() {
-    return {
-      getHash: null,
-      //========PageMisins values ===================
-      userInteraction: this.previousInteraction,
-      state: null,
-      anchorEnable: true,
-      anchorInfo: null,
-      drModeActive: null,
-      error: null,
-      id: this.pageID,
-      type: this.pageType,
-      push: false
-
-      //======== End PageMisins values ===================
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getDataNoteCredit',
-      'getAllActivities',
-      'getApplicationSettings',
-      'getAppDebugMode'
-    ]),
-
-    appDebugMode() {
-      return this.getAppDebugMode
-    },
-    getRouteHistory() {
-      return this.store.getRouteHistory
-    },
-    getAllActivitiesState() {
-      return this.store.getAllActivitiesState
-    },
-
-    getAllCompleted() {
-      return this.store.getAllCompleted
-    },
-    getErrorChoiceDetect() {
-      return this.store.getErrorChoiceDetect
-    },
-    getUserInteraction() {
-      return this.store.getUserInteraction
-    },
-    getPageInteraction() {
-      return this.store.getPageInteraction
-    },
-
-    getCurrentPage() {
-      return this.store.getCurrentPage
-    },
-
-    getCurrentBranching() {
-      return this.store.getCurrentBranching
-    },
-    updateCurrentBranching() {
-      return this.store.updateCurrentBranching
-    },
-    getModuleInfo() {
-      return this.store.getModuleInfo
-    },
-
-    getAllActivities() {
-      return this.store.getAllActivities()
-    },
-    getConnectionInfo() {
-      return this.store.getConnectionInfo
-    },
-
-    getAnchorsForActivity() {
-      return this.store.getAnchorsForActivity()
-    },
-    getBifChoice() {
-      return this.store.getBifChoice
-    },
-
-    isBranchingPage() {
-      return this.$route.meta.type === 'branching' && this.type !== 'pg_branch'
-    },
-
-    //================================================
-    settingsOptions() {
-      return this.settingsOptionsELPlus
-    },
-
-    settingsSelected() {
-      const setting = this.getApplicationSettings
-      return setting
-    },
-
-    errorPage() {
-      let err = false
-      if (import.meta.env.DEV) {
-        const requiredPageKeys = ['id', 'activityRef', 'type']
-        const errorList = []
-        let count = 0
-        let requiredTypeValues = [
-          'pg_normal',
-          'pg_menu',
-          'pg_animation',
-          'pg_media',
-          'pg_branch'
-        ]
-
-        requiredPageKeys.forEach((key) => {
-          // required key is missing in $data that was passed for the page
-          if (!Object.keys(this.pageData).includes(key)) {
-            errorList.push(`Missing page ${key} in $data`)
-          }
-          // Validator value for type
-          else if (
-            key === 'type' &&
-            !requiredTypeValues.includes(this.pageData[key])
-          ) {
-            errorList.push(`Invalid value assigment for page type in $data`)
-          } else if (count < 1) {
-            let errString = null
-            const requiredValues = ['video', 'audio']
-            switch (this.type) {
-              // validation for animation page type content
-
-              case 'pg_animation':
-                if (!this.pageData.animation)
-                  errString = `Missing >>information in $data<< for animation type page`
-                if (this.pageData.animation && !this.pageData.animation.refName)
-                  errString = `Missing >>refName<< for your animation `
-                if (errString) {
-                  errorList.push(errString)
-                  console.warn(
-                    `%c  WARNING!>>> PAGE: ${errString}`,
-                    'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                  )
-                }
-                break
-              // valdation for media page type content
-              case 'pg_media':
-                if (
-                  !this.pageData.mediaData ||
-                  Object.keys(this.pageData.mediaData).length < 1
-                ) {
-                  errString = `Missing >>media information<< for media type page`
-                  errorList.push(errString)
-                  console.warn(
-                    `%c  WARNING!>>> PAGE: ${errString}`,
-                    'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                  )
-                } else {
-                  // validation for mediaData content. Must have mType && mSource
-                  const { mType, mSources, mSubtitle, mTranscript, mPoster } =
-                    this.pageData.mediaData
-                  if (!mType || !mSources) {
-                    errString = `Missing key(s) in mediaData declaration for media`
-                    errorList.push(errString)
-                    console.warn(
-                      `%c  WARNING!>>> PAGE: ${errString}`,
-                      'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                    )
-                  }
-                  // Validation for mType content. Must be video/audio
-                  else if (!requiredValues.includes(mType)) {
-                    errString = `Invalid declariation for media type must be audio or video`
-                    errorList.push(errString)
-                    console.warn(
-                      `%c  WARNING!>>> PAGE: ${errString}`,
-                      'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                    )
-                  }
-                  // Validation for mSource content. Must have at least 1 media source definition
-                  else if (mSources && mSources.length < 1) {
-                    errString = `Missing>>information for media source(s)<< for media type page`
-                    errorList.push(errString)
-                    console.warn(
-                      `%c  WARNING!>>> PAGE: ${errString}`,
-                      'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                    )
-                  }
-                  //Start validating that the files exsist
-                  if (!errString) {
-                    // start validating that the file for subtitle exist in medias folder
-                    if (mSubtitle && mSubtitle.src) return
-
-                    //validate that mPoster file is present in media file when set
-                    if (mPoster) {
-                      if (mPoster.constructor === String) return
-                      else {
-                        let errStringInconsole =
-                          '\n 💥 Invalid type declaration for mPoster.\n  🚩 Must be of type {String}'
-
-                        errString = `l'Attribut 👉 mPoster 👈  pour le media doit être de type {String}`
-
-                        errorList.push(errString)
-                        console.warn(
-                          `%c  WARNING!>>> PAGE: ${errStringInconsole}`,
-                          'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                        )
-                      }
-                      if (errString) break
-                    }
-
-                    //validate that transcript file is present in media file when set
-                    if (mTranscript) {
-                      if (mTranscript.constructor === String) return
-                      else {
-                        let errStringInconsole =
-                          '\n 💥 Invalid type declaration for mTtranscript.\n  🚩 Must be of type {String}'
-
-                        errString = `l'Attribut 👉 mTranscript 👈  pour le media doit être de type {String}`
-
-                        errorList.push(errString)
-                        console.warn(
-                          `%c  WARNING!>>> PAGE: ${errStringInconsole}`,
-                          'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                        )
-                      }
-                      if (errString) break
-                    }
-                  }
-                }
-                break
-            }
-            count++
-          }
-        })
-        if (errorList.length > 0) err = errorList
-      }
-      return err
-    },
-
-    pgNumber() {
-      if (!this.pageData.id) return
-      let n = parseInt(this.pageData.id.replace('P', ''))
-      return n
-    },
-
-    A11yPageInfo() {
-      if (!this.$route || !this.$route.path) return ''
-
-      let A11YTxt = ''
-      const path = this.$route.path
-      let reg = /[/|-]/g
-
-      A11YTxt = path.replaceAll(reg, ' ') // replace all '/' and '-' by space
-
-      if (A11YTxt.includes('activite'))
-        A11YTxt = A11YTxt.replace('activite', this.$t('text.activity'))
-
-      return A11YTxt.toLowerCase()
-    },
-
-    getDebugModeInfo() {
-      const allActivitiesState = JSON.parse(
-        JSON.stringify(this.getAllActivitiesState)
-      )
-      let size = allActivitiesState[this.pageData.activityRef]
-        ? allActivitiesState[this.pageData.activityRef].size
-        : 0
-
-      let Pprogress = allActivitiesState[this.pageData.activityRef].progressions
-
-      let info = {
-        id: this.pageData.activityRef,
-        size: size,
-        progression: Pprogress
-      }
-
-      return info
-    }
-  },
-  watch: {
-    userInteraction: {
-      async handler(newValue) {
-        /**
-         * Observe changes in the number of poperties to dispatch updates in the userdata in the Store
-         */
-
-        if (newValue && Object.entries(this.userInteraction).length) {
-          await this.store.updateUserMetaData({
-            activityRef: this.pageData.activityRef,
-            id: this.pageData.id,
-            userInteraction: { ...this.userInteraction }
-          })
-        }
-      },
-      immediate: true,
-      deep: true
-    },
-    'store.userDataLoaded': {
-      async handler() {
-        if (!this.store.userDataLoaded) return
-        this.userInteraction = await this.setInitialInteraction()
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  created() {
-    /*
-     * Create a custome object for this page that will be added in the collection
-     * will greate an id for the page
-     * will create a data for the page. Data key can hold media info such as timeline of animation, url, media type
-     * will update the store information for the currentPage
-     * wil update the store information for the currentTimeline (GSap animation)
-     */
-
-    if (this.pageData && this.errorPage === false) {
-      // Handeling presence of animation in the page
-      if (this.pageData.animation) {
-        // update the store with the information of currentTimeline
-      }
-
-      if (this.type == 'pg_branch') {
-        // Update the store with the current page information when branching page is created
-        // Note: Branching doesn't trigger router navigation so is done directly here
-        this.store.updateCurrentPage({
-          activity_Id: this.pageData.activityRef,
-          page_Id: this.pageData.id
-        })
-        this.$bus.$on('branch-page-viewed', this.completePageBranching)
-      }
-    }
-
-    if (this.isBranchingPage) this.updateCurrentBranching(this.$data)
-    this.$bus.$on('media-viewed', this.setMediaViewed)
-    this.$bus.$on('manage-media-players', this.managePlayingMedia)
-    this.$bus.$on('video-transcript-toggle', this.onVideoTranscriptToggle)
-    this.$bus.$on('save-quiz-answers', this.saveQuizAnswers)
-  },
-  mounted() {
-    //Fix for firefox not updating aria-labelledby (was stuck saying Activite 1, page 1 on every pages)
-    this.$refs['page_info'].innerHTML = this.A11yPageInfo
-
-    // scrolling to top of only when is normal page
-    if (this.pageData && this.type === 'pg_normal')
-      this.$bus.$emit('move-to-target', 'page_info_section')
-
-    // set the state of the page when page is mounted : started or completed
-    if (this.userInteraction && this.userInteraction.state)
-      this.state = this.userInteraction.state
-    else if (
-      this.type === 'pg_menu' &&
-      this.userInteraction.state !== 'completed'
-    ) {
-      this.state = 'completed' // set menu page state to completed
-    } else this.state = 'started' // set the default state to started
-
-    this.userInteraction['state'] = this.state // add the state to the userInteraction
-    // handle completion status of the page.
-    if (
-      document.documentElement.scrollHeight <=
-        document.documentElement.clientHeight + 20 &&
-      this.type !== 'pg_branch'
-    ) {
-      this.completePage()
-    }
-
-    if (this.type === 'pg_branch') {
-      this.updateCurrentBranchPage(this.$data)
-    }
-
-    if (this.type == 'pg_branch') return //do not proceed to add listener when branch page
-
-    window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
-  },
-  unmounted() {
-    //cleaning up all the event listener
-    this.$bus.$off('branch-page-viewed', this.completePageBranching)
-    this.$bus.$off('media-viewed', this.setMediaViewed)
-    this.$bus.$off('manage-media-players', this.managePlayingMedia)
-    this.$bus.$off('video-transcript-toggle', this.onVideoTranscriptToggle)
-    if (!this.isBranchingPage && this.type !== 'pg_branch')
-      this.updateCurrentBranching(null) //unset current branching when leaving a branching page
-    if (this.type == 'pg_branch') this.updateCurrentBranchPage(null) //unset current branch page when leaving a branch page
-    this.$bus.$off('save-quiz-answers', this.saveQuizAnswers)
-    window.removeEventListener('scroll', this.onFirstScroll, { once: true }) //in case user did not scroll
-    window.removeEventListener('scroll', this.handleScroll)
-  },
-  methods: {
-    ...mapActions(useAppStore, ['updateCurrentBranchPage']),
-    //==============================================================
-    onFirstScroll() {
-      window.addEventListener('scroll', this.handleScroll)
-    },
-    /**
-     * @description to handle the complete state for the gauge
-     */
-
-    handleScroll(event) {
-      event
-      /*
-       * DocumentElement properties does not alway work properly on all Browser.
-       * To Ensure reliable value of its properties on all.
-       * Browser we will calculate the Document Height by taking the maximum of
-       * body and documentElement height poperties.
-       * ref:https://javascript.info/size-and-scroll-window
-       */
-
-      let scrollHeight = null
-      let clientHeight = null
-      let scrollTop = null
-      scrollHeight = Math.max(
-        document.body.scrollHeight,
-        document.documentElement.scrollHeight,
-        document.body.offsetHeight,
-        document.documentElement.offsetHeight,
-        document.body.clientHeight,
-        document.documentElement.clientHeight
-      )
-      clientHeight = document.documentElement.clientHeight
-      scrollTop = window.scrollY
-
-      // //Set scroll limit reached at 150px above the document height.
-      let scrollLimit = scrollHeight - 150
-      let fullyScrolled = Math.round(clientHeight + scrollTop)
-
-      //consider page completed when scolled value has reached or passed set limit
-      if (fullyScrolled >= scrollLimit && this.state !== 'completed') {
-        this.completePage()
-      }
-    },
-    /**
-     * @description set the state of the page to complete
-     * @fires send-xapi-statement to AppBaseModule.vue
-     */
-    completePage() {
-      if (
-        ['pg_menu', 'pg_branch'].includes(this.type) ||
-        this.state == 'completed' ||
-        this.isBranchingPage
-      )
-        return
-
-      this.state = 'completed'
-      this.userInteraction.state = this.state
-    },
-
-    /**
-     * @description set the state of the branching page to complete
-     * @fires send-xapi-statement to AppBaseModule.vue
-     */
-    completePageBranching() {
-      //Get the current branching from the  store
-      const currentBranching = this.getCurrentBranching
-      if (!currentBranching || currentBranching.id !== this.$route.meta.id)
-        return
-      if (currentBranching.state === 'completed') return
-
-      const children = this.$route.meta.children
-      let count = 0
-      children.forEach((c) => {
-        let progress = this.getProgress(c._ref)
-
-        if (progress.state == 'completed') count += 1
-      })
-
-      if (count !== children.length) return
-
-      currentBranching.state = 'completed' //set the state of the page to completed
-      currentBranching.userInteraction.state = currentBranching.state // update the useInteraction state
-    },
-    /**
-     * @description Get the user progress for the current page
-     * @param {string} id (Otpional) - the id of the targeted page
-     * @return {Oject} - the existing user data for the current page
-     */
-    getProgress(id) {
-      id = id || this.pageData.id
-
-      const record = this.getPageInteraction(this.pageData.activityRef, id)
-
-      if (Object.entries(record).length) {
-        const { userInteraction } = record
-        return userInteraction
-      }
-      return {}
-    },
-
-    anchorProgress() {
-      const anchors = document.querySelectorAll('.anchor') // look for anchor
-      const options = {
-        root: null,
-        threshold: 0
-      }
-
-      let anchorsComplete
-      let indexStrt
-      let anchorString
-      let indexEnd
-      let anchorComplete
-
-      let target = document.querySelector('#App-base')
-      // get anchor already seen
-      anchorsComplete = this.getAnchorComplete()
-
-      const observer = new IntersectionObserver((entries) => {
-        // everytime the page passes a anchor
-        observer.observe(target)
-
-        entries.forEach((entry) => {
-          // when it's visable in the page
-
-          if (entry.isIntersecting) {
-            // get the target
-
-            this.anchorInfo = entry.target.classList
-            indexStrt = this.anchorInfo.value.indexOf('anchor-')
-            // work the string to get juste the anchor tag
-            // must be the same as the class
-            if (indexStrt == -1) {
-              return
-            }
-
-            anchorString = this.anchorInfo.value.substring(indexStrt)
-
-            indexEnd = anchorString.indexOf(' ')
-            if (indexEnd != -1) {
-              anchorComplete = anchorString.slice(0, indexEnd)
-            } else {
-              anchorComplete = anchorString
-            }
-
-            //get all the anchors of the current activity
-            const anchors_list = this.getAnchorsForActivity(
-              this.pageData.activityRef
-            )
-
-            //search for the current ancor
-            const anc = anchors_list.find((a) => a.anchorTag === anchorComplete)
-            //dispatch the  current anchor to the store
-            if (anc) {
-              // update the store value for current section
-              // this.updateCurrentSection(anc)
-              // Ask bread scrumb to update its information
-
-              this.$bus.$emit('anchor-seen', anchorComplete)
-            } else {
-              if (import.meta.env.DEV)
-                console.warn(
-                  `%c WARNING!>>> Anchor handeling: 👉${anchorComplete}👈 doesn't exist. Please provide a valid anchor.`,
-                  'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
-                )
-
-              return
-            }
-
-            // if you didn't aldreay seen anchors
-            if (anchorsComplete != undefined) {
-              // look if you already saw this anchor
-              if (anc && !anchorsComplete.includes(anchorComplete)) {
-                // push it in the array them in the store
-                anchorsComplete.push(anchorComplete)
-                this.$set(this.userInteraction, 'anchors', anchorsComplete)
-              }
-            } else {
-              // if you never saw any anchor
-              // push it in the array them in the store
-              anchorsComplete = []
-              if (anc) anchorsComplete.push(anchorComplete)
-              this.$set(this.userInteraction, 'anchors', anchorsComplete)
-            }
-          }
-        })
-      }, options)
-
-      // observer call llok for each anchor in page
-      anchors.forEach((anchor) => {
-        observer.observe(anchor)
-      })
-    },
-    getAnchorComplete() {
-      const records = this.getPageInteraction(
-        this.pageData.activityRef,
-        this.pageData.id
-      )
-
-      // Verify if the element existe
-      if (
-        records &&
-        records.userInteraction &&
-        records.userInteraction.anchors
-      ) {
-        // if you already saw anchors return them
-
-        return records.userInteraction.anchors
-      }
-    },
-    showChoiceBif(data) {
-      // check if you made a choice
-      if (
-        typeof this.getBifChoice === 'undefined' ||
-        Object.keys(this.getBifChoice).length === 0
-      ) {
-        return data['A']
-      } else {
-        if (this.getBifChoice.choix) {
-          // get the choise from store
-          if (data.hasOwnProperty(this.getBifChoice.choix)) {
-            let choice = data[this.getBifChoice.choix]
-            //return choice
-            return choice
-          }
-        }
-      }
-    },
-    openPopup(data) {
-      this.$bus.$emit('open-popup', data)
-    },
-    /**
-     * @description Send to the bd that the media have been view by the user- Add the id of the media to the
-     * userInteraction of the page
-     */
-    setMediaViewed(mediaID) {
-      // Should get the userData to check if current mediaElement has entry
-      let { mediasViewed } = this.userInteraction
-
-      // Should create entry for medias viewed in userInteraction if none
-      if (!mediasViewed) {
-        mediasViewed = []
-
-        this.userInteraction.mediasViewed = mediasViewed
-      }
-
-      //Should add ID in media viewed list if viewed for the 1st time
-      if (mediasViewed.includes(mediaID)) return
-
-      mediasViewed.push(mediaID)
-
-      this.userInteraction.mediasViewed = mediasViewed //Update the userInteraction data of the page
-    }, //
-
-    /**
-     * @description - Method to manage the playing state of media element in the page.
-     *                Only one media should play at a time. When receives signal of new media playing
-     *                get the reference of the previous media in play from the store and
-     *                put it in stop state. Also closes the transcript sidebar if it is open.
-     * @param {HTMLElement} media - the actual media that is playing
-     */
-    managePlayingMedia(media) {
-      if (!media) return
-      //Should get all the media of the page from store
-      const { mElements } = this.getCurrentPage
-      if (!mElements || !mElements.length) return
-
-      // // Should stop any media playing
-      mElements.forEach((m) => {
-        if (m.id == media.id) return
-
-        const attrKeys = Object.keys(m) //
-        const playbarInstance = m[attrKeys[3]]
-        const HTMLmediaElement = m[attrKeys[1]]
-
-        //Close the transcript sidebar if it is open
-        if (playbarInstance.transcriptEnabled) {
-          playbarInstance.toggleViewTranscript()
-        }
-        //Check if the media is playing to stop it. Playing state is given by the instance of the target play-bar
-        if (playbarInstance.isPlaying) {
-          HTMLmediaElement.pause() // target the HTMLmediaElement to control it state
-          playbarInstance.isPlaying = false //change this isPlaying value of the instance
-
-          playbarInstance.timer.pause() // pause the timer of the instance
-        }
-      })
-    },
-    /**
-     * @description - Method to manage the state of the transcript and fullscreen buttons.
-     *                Disables those buttons on other media playbar when a transcript sidebar is open.
-     *
-     * @param {HTMLElement} media - the actual media that is playing
-     * @param {Boolean} transcriptShown - current status of the transcript sidebar
-     */
-    onVideoTranscriptToggle(media, transcriptShown) {
-      if (!media) return
-      //Should get all the media of the page from store
-      const { mElements } = this.getCurrentPage
-      if (!mElements || !mElements.length) return
-      mElements.forEach((m) => {
-        if (m.id == media.id) return
-        const attrKeys = Object.keys(m)
-        const playbarInstance = m[attrKeys[3]]
-        playbarInstance.otherVideoTranscriptShown = transcriptShown
-      })
-    },
-    setInitialInteraction() {
-      const { activityRef, id: pageID } = this.pageData
-      const { userInteraction: previousInteraction = {} } =
-        this.getPageInteraction(activityRef, pageID)
-
-      return previousInteraction
-    },
-    saveQuizAnswers(el, quiz) {
-      if (!this.userInteraction.quizAnswers)
-        return (this.userInteraction.quizAnswers = { ...quiz })
-      const quizID = Object.keys(quiz)[0]
-
-      if (!this.userInteraction.quizAnswers[quizID])
-        return (this.userInteraction.quizAnswers = {
-          ...this.userInteraction.quizAnswers,
-          ...quiz
-        })
-      const quizValue = Object.values(quiz)[0]
-      this.userInteraction.quizAnswers[quizID] = quizValue
-      // const {}
-    }
-  }
-}
-</script>
-<style lang="scss">
-.img-popUp {
-  position: relative;
-
-  .box-trigger {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-
-    .btn {
-      position: absolute;
-    }
-  }
-}
-
-.debug-pageInfo {
-  position: fixed;
-  right: -250px;
-  bottom: 20px;
-
-  color: #333;
-  background-color: rgba(#eaabb6b3, 0.9);
-
-  display: flex;
-  flex-direction: row;
-
-  &.open {
-    right: 0;
-  }
-
-  .w-btn {
-    padding: 10px;
-    height: 100%;
-    cursor: pointer;
-    background: rgba(#fff, 0.05);
-
-    &:hover {
-      background: rgba(#fff, 0.1);
-    }
-  }
-
-  .ctn {
-    padding: 24px;
-    width: 250px;
-
-    ul {
-      margin-left: 15px;
-    }
-  }
-}
-</style>
+<!--
+ @  Description: a prototype to test refactoring of pageMixin paradigm and fonctionality
+ @ What it does: The component received a data and validate the type of page that will be created
+                  The component update the store information for the  type of page created and also the timeline
+@Note: Page not created with this component will not have the data automatically traked by the application
+-->
+<template>
+  <div :id="pageData.id" :key="pageData.id" class="app-page" role="main">
+    <div v-if="appDebugMode" class="debug-pageInfo" :class="{ open: push }">
+      <button class="w-btn" @click="push = !push">&lt;</button>
+      <div class="ctn">
+        Activity info: Route : {{ $route.path }}
+        <br />
+        Activity id : {{ getDebugModeInfo.id }}
+        <br />
+        Nombre de page : {{ getDebugModeInfo.size }}
+        <br />
+        Page complete :
+        <ul>
+          <li v-for="(value, key) in getDebugModeInfo.progression" :key="key">
+            {{ value }}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <slot v-if="!errorPage.length" name="content">Page</slot>
+    <app-base-error-display
+      v-else
+      :error-group="'component'"
+      :error-title="'ERREUR: CRÉATION DE LA PAGE'"
+      :errors-list="errorPage"
+      :error-text="`Vous avez une/des erreur(s) dans la création de votre PAGE. Veuillez
+            corriger les erreurs ci-dessous:`"
+    />
+    <span
+      id="page_info"
+      ref="page_info"
+      class="sr-only"
+      aria-hidden="true"
+    ></span>
+    <div id="hiddenAlertContainer" role="alert" class="sr-only"></div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useAppStore } from '../module/stores/appStore'
+import { mapState, mapActions } from 'pinia'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  provide() {
+    return { userInteraction: computed(() => this.userInteraction) }
+  },
+  props: {
+    pageData: {
+      type: Object,
+      required: true,
+
+      validator(value) {
+        let isValid = true
+        if (import.meta.env.DEV) {
+          const requiredPageKeys = ['id', 'activityRef', 'type']
+          let requiredTypeValues = [
+            'pg_normal',
+            'pg_menu',
+            'pg_animation',
+            'pg_media',
+            'pg_branch'
+          ]
+
+          requiredPageKeys.forEach((key) => {
+            if (!Object.keys(value).includes(key)) {
+              console.warn(
+                `%c  WARNING!>>> PAGE: PAGE: Missing ${key} for the page in $data `,
+                'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+              )
+              isValid = false
+            } else if (
+              key === 'type' &&
+              !requiredTypeValues.includes(value[key])
+            ) {
+              let errString = `Invalid value assigment for type of the page in $data.`
+
+              console.warn(
+                `%c  WARNING!>>> PAGE: ${errString}`,
+                'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+              )
+              isValid = false
+            }
+          })
+        }
+        return isValid
+      }
+    }
+  },
+  setup(props) {
+    //console.log('dans setup')
+    const store = useAppStore()
+    const { activityRef, id: pageID, type: pageType } = props.pageData
+    const { t } = useI18n()
+    //Getting initial existing userIntaction from store
+    const { userInteraction: previousInteraction = {} } =
+      store.getPageInteraction(activityRef, pageID)
+
+    return { store, previousInteraction, pageID, pageType, t }
+  },
+
+  data() {
+    return {
+      getHash: null,
+      //========PageMisins values ===================
+      userInteraction: this.previousInteraction,
+      state: null,
+      anchorEnable: true,
+      anchorInfo: null,
+      drModeActive: null,
+      error: null,
+      id: this.pageID,
+      type: this.pageType,
+      push: false
+
+      //======== End PageMisins values ===================
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getDataNoteCredit',
+      'getAllActivities',
+      'getApplicationSettings',
+      'getAppDebugMode'
+    ]),
+
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
+    getRouteHistory() {
+      return this.store.getRouteHistory
+    },
+    getAllActivitiesState() {
+      return this.store.getAllActivitiesState
+    },
+
+    getAllCompleted() {
+      return this.store.getAllCompleted
+    },
+    getErrorChoiceDetect() {
+      return this.store.getErrorChoiceDetect
+    },
+    getUserInteraction() {
+      return this.store.getUserInteraction
+    },
+    getPageInteraction() {
+      return this.store.getPageInteraction
+    },
+
+    getCurrentPage() {
+      return this.store.getCurrentPage
+    },
+
+    getCurrentBranching() {
+      return this.store.getCurrentBranching
+    },
+    updateCurrentBranching() {
+      return this.store.updateCurrentBranching
+    },
+    getModuleInfo() {
+      return this.store.getModuleInfo
+    },
+    getAllActivities() {
+      return this.store.getAllActivities()
+    },
+    getConnectionInfo() {
+      return this.store.getConnectionInfo
+    },
+    getAnchorsForActivity() {
+      return this.store.getAnchorsForActivity()
+    },
+    getBifChoice() {
+      return this.store.getBifChoice
+    },
+    isBranchingPage() {
+      return this.$route.meta.type === 'branching' && this.type !== 'pg_branch'
+    },
+    //================================================
+    settingsOptions() {
+      return this.settingsOptionsELPlus
+    },
+    settingsSelected() {
+      const setting = this.getApplicationSettings
+      return setting
+    },
+    errorPage() {
+      let err = false
+      if (import.meta.env.DEV) {
+        const requiredPageKeys = ['id', 'activityRef', 'type']
+        const errorList = []
+        let count = 0
+        let requiredTypeValues = [
+          'pg_normal',
+          'pg_menu',
+          'pg_animation',
+          'pg_media',
+          'pg_branch'
+        ]
+
+        requiredPageKeys.forEach((key) => {
+          // required key is missing in $data that was passed for the page
+          if (!Object.keys(this.pageData).includes(key)) {
+            errorList.push(`Missing page ${key} in $data`)
+          }
+          // Validator value for type
+          else if (
+            key === 'type' &&
+            !requiredTypeValues.includes(this.pageData[key])
+          ) {
+            errorList.push(`Invalid value assigment for page type in $data`)
+          } else if (count < 1) {
+            let errString = null
+            const requiredValues = ['video', 'audio']
+            switch (this.type) {
+              // validation for animation page type content
+
+              case 'pg_animation':
+                if (!this.pageData.animation)
+                  errString = `Missing >>information in $data<< for animation type page`
+                if (this.pageData.animation && !this.pageData.animation.refName)
+                  errString = `Missing >>refName<< for your animation `
+                if (errString) {
+                  errorList.push(errString)
+                  console.warn(
+                    `%c  WARNING!>>> PAGE: ${errString}`,
+                    'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                  )
+                }
+                break
+              // valdation for media page type content
+              case 'pg_media':
+                if (
+                  !this.pageData.mediaData ||
+                  Object.keys(this.pageData.mediaData).length < 1
+                ) {
+                  errString = `Missing >>media information<< for media type page`
+                  errorList.push(errString)
+                  console.warn(
+                    `%c  WARNING!>>> PAGE: ${errString}`,
+                    'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                  )
+                } else {
+                  // validation for mediaData content. Must have mType && mSource
+                  const { mType, mSources, mSubtitle, mTranscript, mPoster } =
+                    this.pageData.mediaData
+                  if (!mType || !mSources) {
+                    errString = `Missing key(s) in mediaData declaration for media`
+                    errorList.push(errString)
+                    console.warn(
+                      `%c  WARNING!>>> PAGE: ${errString}`,
+                      'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                    )
+                  }
+                  // Validation for mType content. Must be video/audio
+                  else if (!requiredValues.includes(mType)) {
+                    errString = `Invalid declariation for media type must be audio or video`
+                    errorList.push(errString)
+                    console.warn(
+                      `%c  WARNING!>>> PAGE: ${errString}`,
+                      'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                    )
+                  }
+                  // Validation for mSource content. Must have at least 1 media source definition
+                  else if (mSources && mSources.length < 1) {
+                    errString = `Missing>>information for media source(s)<< for media type page`
+                    errorList.push(errString)
+                    console.warn(
+                      `%c  WARNING!>>> PAGE: ${errString}`,
+                      'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                    )
+                  }
+                  //Start validating that the files exsist
+                  if (!errString) {
+                    // start validating that the file for subtitle exist in medias folder
+                    if (mSubtitle && mSubtitle.src) return
+
+                    //validate that mPoster file is present in media file when set
+                    if (mPoster) {
+                      if (mPoster.constructor === String) return
+                      else {
+                        let errStringInconsole =
+                          '\n 💥 Invalid type declaration for mPoster.\n  🚩 Must be of type {String}'
+
+                        errString = `l'Attribut 👉 mPoster 👈  pour le media doit être de type {String}`
+
+                        errorList.push(errString)
+                        console.warn(
+                          `%c  WARNING!>>> PAGE: ${errStringInconsole}`,
+                          'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                        )
+                      }
+                      if (errString) break
+                    }
+
+                    //validate that transcript file is present in media file when set
+                    if (mTranscript) {
+                      if (mTranscript.constructor === String) return
+                      else {
+                        let errStringInconsole =
+                          '\n 💥 Invalid type declaration for mTtranscript.\n  🚩 Must be of type {String}'
+
+                        errString = `l'Attribut 👉 mTranscript 👈  pour le media doit être de type {String}`
+
+                        errorList.push(errString)
+                        console.warn(
+                          `%c  WARNING!>>> PAGE: ${errStringInconsole}`,
+                          'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                        )
+                      }
+                      if (errString) break
+                    }
+                  }
+                }
+                break
+            }
+            count++
+          }
+        })
+        if (errorList.length > 0) err = errorList
+      }
+      return err
+    },
+
+    pgNumber() {
+      if (!this.pageData.id) return
+      let n = parseInt(this.pageData.id.replace('P', ''))
+      return n
+    },
+
+    A11yPageInfo() {
+      if (!this.$route || !this.$route.path) return ''
+
+      let A11YTxt = ''
+      const path = this.$route.path
+      let reg = /[/|-]/g
+
+      A11YTxt = path.replaceAll(reg, ' ') // replace all '/' and '-' by space
+
+      if (A11YTxt.includes('activite'))
+        A11YTxt = A11YTxt.replace('activite', this.$t('text.activity'))
+
+      return A11YTxt.toLowerCase()
+    },
+
+    getDebugModeInfo() {
+      const allActivitiesState = JSON.parse(
+        JSON.stringify(this.getAllActivitiesState)
+      )
+      let size = allActivitiesState[this.pageData.activityRef]
+        ? allActivitiesState[this.pageData.activityRef].size
+        : 0
+
+      let Pprogress = allActivitiesState[this.pageData.activityRef].progressions
+
+      let info = {
+        id: this.pageData.activityRef,
+        size: size,
+        progression: Pprogress
+      }
+
+      return info
+    }
+  },
+  watch: {
+    userInteraction: {
+      async handler(newValue) {
+        /**
+         * Observe changes in the number of poperties to dispatch updates in the userdata in the Store
+         */
+        // console.log('ici')
+        //console.log(this.userInteraction)
+        if (newValue && Object.entries(this.userInteraction).length) {
+          await this.store.updateUserMetaData({
+            activityRef: this.pageData.activityRef,
+            id: this.pageData.id,
+            userInteraction: { ...this.userInteraction }
+          })
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    'store.userDataLoaded': {
+      async handler() {
+        if (!this.store.userDataLoaded) return
+        this.userInteraction = await this.setInitialInteraction()
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    /*
+     * Create a custome object for this page that will be added in the collection
+     * will greate an id for the page
+     * will create a data for the page. Data key can hold media info such as timeline of animation, url, media type
+     * will update the store information for the currentPage
+     * wil update the store information for the currentTimeline (GSap animation)
+     */
+
+    if (this.pageData && this.errorPage === false) {
+      // Handeling presence of animation in the page
+      if (this.pageData.animation) {
+        // update the store with the information of currentTimeline
+      }
+
+      if (this.type == 'pg_branch') {
+        // Update the store with the current page information when branching page is created
+        // Note: Branching doesn't trigger router navigation so is done directly here
+        this.store.updateCurrentPage({
+          activity_Id: this.pageData.activityRef,
+          page_Id: this.pageData.id
+        })
+        this.$bus.$on('branch-page-viewed', this.completePageBranching)
+      }
+    }
+
+    if (this.isBranchingPage) this.updateCurrentBranching(this.$data)
+    this.$bus.$on('media-viewed', this.setMediaViewed)
+    this.$bus.$on('manage-media-players', this.managePlayingMedia)
+    this.$bus.$on('video-transcript-toggle', this.onVideoTranscriptToggle)
+    this.$bus.$on('save-quiz-answers', this.saveQuizAnswers)
+  },
+  mounted() {
+    //Fix for firefox not updating aria-labelledby (was stuck saying Activite 1, page 1 on every pages)
+    this.$refs['page_info'].innerHTML = this.A11yPageInfo
+
+    // scrolling to top of only when is normal page
+    if (this.pageData && this.type === 'pg_normal')
+      this.$bus.$emit('move-to-target', 'page_info_section')
+
+    // set the state of the page when page is mounted : started or completed
+    if (this.userInteraction && this.userInteraction.state)
+      this.state = this.userInteraction.state
+    else if (
+      this.type === 'pg_menu' &&
+      this.userInteraction.state !== 'completed'
+    ) {
+      this.state = 'completed' // set menu page state to completed
+    } else this.state = 'started' // set the default state to started
+
+    this.userInteraction['state'] = this.state // add the state to the userInteraction
+    // handle completion status of the page.
+    if (
+      document.documentElement.scrollHeight <=
+        document.documentElement.clientHeight + 20 &&
+      this.type !== 'pg_branch'
+    ) {
+      this.completePage()
+    }
+
+    if (this.type === 'pg_branch') {
+      this.updateCurrentBranchPage(this.$data)
+    }
+
+    if (this.type == 'pg_branch') return //do not proceed to add listener when branch page
+
+    window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
+  },
+  unmounted() {
+    //cleaning up all the event listener
+    this.$bus.$off('branch-page-viewed', this.completePageBranching)
+    this.$bus.$off('media-viewed', this.setMediaViewed)
+    this.$bus.$off('manage-media-players', this.managePlayingMedia)
+    this.$bus.$off('video-transcript-toggle', this.onVideoTranscriptToggle)
+    if (!this.isBranchingPage && this.type !== 'pg_branch')
+      this.updateCurrentBranching(null) //unset current branching when leaving a branching page
+    if (this.type == 'pg_branch') this.updateCurrentBranchPage(null) //unset current branch page when leaving a branch page
+    this.$bus.$off('save-quiz-answers', this.saveQuizAnswers)
+    window.removeEventListener('scroll', this.onFirstScroll, { once: true }) //in case user did not scroll
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    ...mapActions(useAppStore, ['updateCurrentBranchPage']),
+    //==============================================================
+    onFirstScroll() {
+      window.addEventListener('scroll', this.handleScroll)
+    },
+    /**
+     * @description to handle the complete state for the gauge
+     */
+
+    handleScroll(event) {
+      event
+      /*
+       * DocumentElement properties does not alway work properly on all Browser.
+       * To Ensure reliable value of its properties on all.
+       * Browser we will calculate the Document Height by taking the maximum of
+       * body and documentElement height poperties.
+       * ref:https://javascript.info/size-and-scroll-window
+       */
+
+      let scrollHeight = null
+      let clientHeight = null
+      let scrollTop = null
+      scrollHeight = Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.offsetHeight,
+        document.body.clientHeight,
+        document.documentElement.clientHeight
+      )
+      clientHeight = document.documentElement.clientHeight
+      scrollTop = window.scrollY
+
+      // //Set scroll limit reached at 150px above the document height.
+      let scrollLimit = scrollHeight - 150
+      let fullyScrolled = Math.round(clientHeight + scrollTop)
+
+      //consider page completed when scolled value has reached or passed set limit
+      if (fullyScrolled >= scrollLimit && this.state !== 'completed') {
+        this.completePage()
+      }
+    },
+    /**
+     * @description set the state of the page to complete
+     * @fires send-xapi-statement to AppBaseModule.vue
+     */
+    completePage() {
+      if (
+        ['pg_menu', 'pg_branch'].includes(this.type) ||
+        this.state == 'completed' ||
+        this.isBranchingPage
+      )
+        return
+
+      this.state = 'completed'
+      this.userInteraction.state = this.state
+    },
+
+    /**
+     * @description set the state of the branching page to complete
+     * @fires send-xapi-statement to AppBaseModule.vue
+     */
+    completePageBranching() {
+      //Get the current branching from the  store
+      const currentBranching = this.getCurrentBranching
+      if (!currentBranching || currentBranching.id !== this.$route.meta.id)
+        return
+      if (currentBranching.state === 'completed') return
+
+      const children = this.$route.meta.children
+      let count = 0
+      children.forEach((c) => {
+        let progress = this.getProgress(c._ref)
+
+        if (progress.state == 'completed') count += 1
+      })
+
+      if (count !== children.length) return
+
+      currentBranching.state = 'completed' //set the state of the page to completed
+      currentBranching.userInteraction.state = currentBranching.state // update the useInteraction state
+    },
+    /**
+     * @description Get the user progress for the current page
+     * @param {string} id (Otpional) - the id of the targeted page
+     * @return {Oject} - the existing user data for the current page
+     */
+    getProgress(id) {
+      id = id || this.pageData.id
+
+      const record = this.getPageInteraction(this.pageData.activityRef, id)
+
+      if (Object.entries(record).length) {
+        const { userInteraction } = record
+        return userInteraction
+      }
+      return {}
+    },
+
+    anchorProgress() {
+      const anchors = document.querySelectorAll('.anchor') // look for anchor
+      const options = {
+        root: null,
+        threshold: 0
+      }
+
+      let anchorsComplete
+      let indexStrt
+      let anchorString
+      let indexEnd
+      let anchorComplete
+
+      let target = document.querySelector('#App-base')
+      // get anchor already seen
+      anchorsComplete = this.getAnchorComplete()
+
+      const observer = new IntersectionObserver((entries) => {
+        // everytime the page passes a anchor
+        observer.observe(target)
+
+        entries.forEach((entry) => {
+          // when it's visable in the page
+
+          if (entry.isIntersecting) {
+            // get the target
+
+            this.anchorInfo = entry.target.classList
+            indexStrt = this.anchorInfo.value.indexOf('anchor-')
+            // work the string to get juste the anchor tag
+            // must be the same as the class
+            if (indexStrt == -1) {
+              return
+            }
+
+            anchorString = this.anchorInfo.value.substring(indexStrt)
+
+            indexEnd = anchorString.indexOf(' ')
+            if (indexEnd != -1) {
+              anchorComplete = anchorString.slice(0, indexEnd)
+            } else {
+              anchorComplete = anchorString
+            }
+
+            //get all the anchors of the current activity
+            const anchors_list = this.getAnchorsForActivity(
+              this.pageData.activityRef
+            )
+
+            //search for the current ancor
+            const anc = anchors_list.find((a) => a.anchorTag === anchorComplete)
+            //dispatch the  current anchor to the store
+            if (anc) {
+              // update the store value for current section
+              // this.updateCurrentSection(anc)
+              // Ask bread scrumb to update its information
+
+              this.$bus.$emit('anchor-seen', anchorComplete)
+            } else {
+              if (import.meta.env.DEV)
+                console.warn(
+                  `%c WARNING!>>> Anchor handeling: 👉${anchorComplete}👈 doesn't exist. Please provide a valid anchor.`,
+                  'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
+                )
+
+              return
+            }
+
+            // if you didn't aldreay seen anchors
+            if (anchorsComplete != undefined) {
+              // look if you already saw this anchor
+              if (anc && !anchorsComplete.includes(anchorComplete)) {
+                // push it in the array them in the store
+                anchorsComplete.push(anchorComplete)
+                this.$set(this.userInteraction, 'anchors', anchorsComplete)
+              }
+            } else {
+              // if you never saw any anchor
+              // push it in the array them in the store
+              anchorsComplete = []
+              if (anc) anchorsComplete.push(anchorComplete)
+              this.$set(this.userInteraction, 'anchors', anchorsComplete)
+            }
+          }
+        })
+      }, options)
+
+      // observer call llok for each anchor in page
+      anchors.forEach((anchor) => {
+        observer.observe(anchor)
+      })
+    },
+    getAnchorComplete() {
+      const records = this.getPageInteraction(
+        this.pageData.activityRef,
+        this.pageData.id
+      )
+
+      // Verify if the element existe
+      if (
+        records &&
+        records.userInteraction &&
+        records.userInteraction.anchors
+      ) {
+        // if you already saw anchors return them
+
+        return records.userInteraction.anchors
+      }
+    },
+    showChoiceBif(data) {
+      // check if you made a choice
+      if (
+        typeof this.getBifChoice === 'undefined' ||
+        Object.keys(this.getBifChoice).length === 0
+      ) {
+        return data['A']
+      } else {
+        if (this.getBifChoice.choix) {
+          // get the choise from store
+          if (data.hasOwnProperty(this.getBifChoice.choix)) {
+            let choice = data[this.getBifChoice.choix]
+            //return choice
+            return choice
+          }
+        }
+      }
+    },
+    openPopup(data) {
+      this.$bus.$emit('open-popup', data)
+    },
+    /**
+     * @description Send to the bd that the media have been view by the user- Add the id of the media to the
+     * userInteraction of the page
+     */
+    setMediaViewed(mediaID) {
+      // Should get the userData to check if current mediaElement has entry
+      let { mediasViewed } = this.userInteraction
+
+      // Should create entry for medias viewed in userInteraction if none
+      if (!mediasViewed) {
+        mediasViewed = []
+
+        this.userInteraction.mediasViewed = mediasViewed
+      }
+
+      //Should add ID in media viewed list if viewed for the 1st time
+      if (mediasViewed.includes(mediaID)) return
+
+      mediasViewed.push(mediaID)
+
+      this.userInteraction.mediasViewed = mediasViewed //Update the userInteraction data of the page
+    }, //
+
+    /**
+     * @description - Method to manage the playing state of media element in the page.
+     *                Only one media should play at a time. When receives signal of new media playing
+     *                get the reference of the previous media in play from the store and
+     *                put it in stop state. Also closes the transcript sidebar if it is open.
+     * @param {HTMLElement} media - the actual media that is playing
+     */
+    managePlayingMedia(media) {
+      if (!media) return
+      //Should get all the media of the page from store
+      const { mElements } = this.getCurrentPage
+      if (!mElements || !mElements.length) return
+
+      // // Should stop any media playing
+      mElements.forEach((m) => {
+        if (m.id == media.id) return
+
+        const attrKeys = Object.keys(m) //
+        const playbarInstance = m[attrKeys[3]]
+        const HTMLmediaElement = m[attrKeys[1]]
+
+        //Close the transcript sidebar if it is open
+        if (playbarInstance.transcriptEnabled) {
+          playbarInstance.toggleViewTranscript()
+        }
+        //Check if the media is playing to stop it. Playing state is given by the instance of the target play-bar
+        if (playbarInstance.isPlaying) {
+          HTMLmediaElement.pause() // target the HTMLmediaElement to control it state
+          playbarInstance.isPlaying = false //change this isPlaying value of the instance
+
+          playbarInstance.timer.pause() // pause the timer of the instance
+        }
+      })
+    },
+    /**
+     * @description - Method to manage the state of the transcript and fullscreen buttons.
+     *                Disables those buttons on other media playbar when a transcript sidebar is open.
+     *
+     * @param {HTMLElement} media - the actual media that is playing
+     * @param {Boolean} transcriptShown - current status of the transcript sidebar
+     */
+    onVideoTranscriptToggle(media, transcriptShown) {
+      if (!media) return
+      //Should get all the media of the page from store
+      const { mElements } = this.getCurrentPage
+      if (!mElements || !mElements.length) return
+      mElements.forEach((m) => {
+        if (m.id == media.id) return
+        const attrKeys = Object.keys(m)
+        const playbarInstance = m[attrKeys[3]]
+        playbarInstance.otherVideoTranscriptShown = transcriptShown
+      })
+    },
+    setInitialInteraction() {
+      const { activityRef, id: pageID } = this.pageData
+      const { userInteraction: previousInteraction = {} } =
+        this.getPageInteraction(activityRef, pageID)
+
+      return previousInteraction
+    },
+    saveQuizAnswers(el, quiz) {
+      if (!this.userInteraction.quizAnswers)
+        return (this.userInteraction.quizAnswers = { ...quiz })
+      const quizID = Object.keys(quiz)[0]
+
+      if (!this.userInteraction.quizAnswers[quizID])
+        return (this.userInteraction.quizAnswers = {
+          ...this.userInteraction.quizAnswers,
+          ...quiz
+        })
+      const quizValue = Object.values(quiz)[0]
+      this.userInteraction.quizAnswers[quizID] = quizValue
+      // const {}
+    }
+  }
+}
+</script>
+<style lang="scss">
+.img-popUp {
+  position: relative;
+
+  .box-trigger {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    .btn {
+      position: absolute;
+    }
+  }
+}
+
+.debug-pageInfo {
+  position: fixed;
+  right: -250px;
+  bottom: 20px;
+
+  color: #333;
+  background-color: rgba(#eaabb6b3, 0.9);
+
+  display: flex;
+  flex-direction: row;
+
+  &.open {
+    right: 0;
+  }
+
+  .w-btn {
+    padding: 10px;
+    height: 100%;
+    cursor: pointer;
+    background: rgba(#fff, 0.05);
+
+    &:hover {
+      background: rgba(#fff, 0.1);
+    }
+  }
+
+  .ctn {
+    padding: 24px;
+    width: 250px;
+
+    ul {
+      margin-left: 15px;
+    }
+  }
+}
+</style>