fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.1

package/src/components/AppCompMediaPlayer.vue

@@ -19,18 +19,12 @@
       id="video"
       ref="video"
       tabindex="0"
-      class="m-video"
+      class="v-media m-video"
       :poster="media.mPoster"
       @loadedmetadata="updateMediaData($event)"
       @load="() => {}"
       @error="() => {}"
     >
-      <!-- <source
-        v-for="(aMedia, index) in media.mSources"
-        :key="index"
-        :src="`${aMedia.src}`"
-        :type="`${media.mType}/${aMedia.type}`"
-      /> -->
       <source
         v-for="(aMedia, index) in media.mSources"
         :key="index"
@@ -49,7 +43,7 @@
       v-if="media && media.mType === 'audio'"
       ref="audio"
       tabindex="0"
-      class="m-audio"
+      class="v-media m-audio"
       :poster="media.mPoster"
       @loadedmetadata="updateMediaData($event)"
     >
@@ -70,14 +64,24 @@
     <div
       v-if="media && hasAnimation"
       id="anim-box"
+      ref="anim-box"
       class="anim-canvas"
       :class="[animationType]"
+      role="figure"
+      aria-roledescription="Animation"
     >
+      <p class="sr-only">{{ mediaA11Y.srTxt }}</p>
+      <a class="skip-link" href="" @click.prevent="skipTo('playbar-play')">
+        {{ mediaA11Y.skipToTxt }}
+      </a>
       <slot ref="animScene" name="drawingCanvas">
         You have an animation to create
       </slot>
     </div>
-    <portal-target name="playbar-portal"></portal-target>
+    <!-- <div v-if="mData"> -->
+    <app-comp-play-bar :media-to-play="mData" />
+    <!-- </div> -->
+    <!-- <portal-target :key="$route.fullPath" name="playbar-portal"></portal-target> -->
   </div>
 </template>
 
@@ -106,13 +110,18 @@ export default {
       timeline: null,
       subtitleMenuButtons: [],
       subtitlesMenu: null,
-      randKey: `kid_${Math.floor(Math.random() * 1001)}`,
       fsHeigh: null,
       isMedia: false
+      //currentMediaElement: null
     }
   },
   computed: {
-    ...mapGetters(['hasMediaElOrTimeline', 'getCurrentBrowser']),
+    ...mapGetters([
+      'hasMediaElOrTimeline',
+      'getCurrentBrowser',
+      'getCurrentPage'
+    ]),
+
     setTimeout() {
       return window.setTimeout
     },
@@ -149,20 +158,32 @@ export default {
       } else {
         return 'chrome'
       }
+    },
+
+    mediaA11Y() {
+      let m = {
+        srTxt: '',
+        skipToTxt: ''
+      }
+
+      this.$i18n.locale === 'fr'
+        ? (m = {
+            srTxt:
+              "Le contenu d'apprentissage sera seulement disponible à la fin de la narration. Appuyez le bouton jouer, pour lancer l'animation.",
+            skipToTxt: 'Passer au controleur de media'
+          })
+        : (m = {
+            srTxt:
+              'The learning content will be available only at the end of the narration. Press the play button to start the animation',
+            skipToTxt: 'Skip to play-bar'
+          })
+
+      return m
     }
   },
   watch: {
-    media(val, oldVal) {
+    media() {
       let mElement = this.$refs[this.media.mType]
-      if (oldVal === null && val !== oldVal) {
-        //this.$store.dispatch('updateAppStatus', 'loading')
-        //this.$store.dispatch('updateCurrentMediaElement', mElement)
-        //this.fecthFromServer(this.media.mSources)
-        // for (let m of this.media.mSources) {
-        //   this.checkRessource(m.src)
-        // }
-      }
-
       /* Handeling media subtitles
        * if there is any subtitle, create the subtitle menu
        */
@@ -208,6 +229,7 @@ export default {
     if (this.media) {
       window.addEventListener('resize', this.caclWindowHeight)
     }
+    this.currentMediaElement
   },
 
   beforeDestroy() {
@@ -293,13 +315,75 @@ export default {
         .catch((err) => {
           err
         })
+    },
+    /**
+     * @description- Skip directly to the specify containt/region*
+     * main content is Node with defined ID
+     * @param {String} targetID- Css selector for the target element
+     */
+
+    skipTo(targetID) {
+      let skipTo = document.querySelector(`#wrapper-content`) //default definition of main element
+
+      if (targetID) {
+        let targetEl = document.querySelector(`#${targetID}`) // search for node element specified as main
+
+        if (targetEl) skipTo = targetEl
+      }
+      let targetTop = skipTo.offsetTop
+
+      let scrollOpt = {
+        top: targetTop - 100,
+        left: 0,
+        behavior: 'auto' //auto
+      }
+
+      //Allowing accessibility control with keyboard
+      skipTo.setAttribute('tabIndex', -1)
+      window.scrollTo(scrollOpt)
+      skipTo.focus()
+    },
+
+    async setMediaElement() {
+      const { type } = await this.getCurrentPage
+      if (!['pg_media, pg_animation'].includes(type)) return null
+
+      let mediaObject = {}
+      switch (type) {
+        case 'pg_media': {
+          const {
+            animation,
+            type,
+            mediaData: { mSources, mType, mSubtitle, mPoster, mTranscript },
+            timeline,
+            mElement
+          } = this.getCurrentPage
+
+          mediaObject = {
+            animation,
+            type,
+            mediaData: { mSources, mType, mSubtitle, mPoster, mTranscript },
+            timeline,
+            mElement
+          }
+
+          break
+        }
+        case 'pg_animation': {
+          const { animation, type, timeline } = this.getCurrentPage
+          mediaObject = { animation, type, timeline }
+          break
+        }
+      }
+
+      return mediaObject
     }
   }
 }
 </script>
 <style lang="scss">
 $widthVideo: 100%;
-$widthAudioAnimation: 100%;
+$widthAudioAnimation: 50%;
 
 %animation {
   position: absolute;
@@ -310,56 +394,4 @@ $widthAudioAnimation: 100%;
   z-index: 1;
   overflow: hidden;
 }
-
-.app-media-player {
-  position: relative;
-  overflow: hidden;
-
-  &.AudioAnimation {
-    width: $widthAudioAnimation;
-    .anim-canvas {
-      @extend %animation;
-    }
-  }
-
-  &.FS,
-  &.animationOnly {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    video {
-      min-width: 100% !important;
-      min-height: 100% !important;
-      position: absolute !important;
-      top: 50% !important;
-      left: 50% !important;
-      transform: translate(-50%, -50%) !important;
-      z-index: 9;
-    }
-
-    .anim-canvas {
-      @extend %animation;
-    }
-  }
-
-  &.FS,
-  &.AudioAnimation {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    .anim-canvas {
-      @extend %animation;
-    }
-  }
-}
-
-video {
-  &:focus-visible {
-    outline-color: transparent;
-  }
-}
 </style>

package/src/components/AppCompMenu.vue

@@ -1,30 +1,32 @@
 <!--
  @ Description: This component is used to create the menu and the ard that will bring you back where you were before the menu.
- @ What it does: Look in the store what was the last page you saw before you came to the menu and create the the link for the card. It display AppCompMenuItem and AppCompTableOfContent
+ @ What it does: Look in the store what was the last page you saw before you came to the menu and create the the link for the card. It display's AppCompMenuItem
 -->
 <template>
   <div class="menu-container">
-    <b-row>
-      <b-col md="4" class="wrapper-lasRoute">
-        <b-link
-          id="btn_last_route"
-          class="nav_last_route"
-          :to="{ name: GoToLastRoute() }"
-          :title="handelLabel"
-        >
-          <div class="box-menu">
-            <slot name="inside-last-route" />
-
-            <div class="vsl-tmp">
-              <p>
-                {{ handelLabel }}
-              </p>
-            </div>
-          </div>
-        </b-link>
+    <b-row align-v="center" align-h="center">
+      <b-col md="10" class="wrapper-lasRoute">
+        <div class="box-menu">
+          <h1>{{ getLessonid }}</h1>
+          <h2 v-html="getLessonTitle"></h2>
+          <p class="lesson-progess">{{ lessonProg() }}</p>
+          <b-link
+            id="btn_last_route"
+            class="nav_last_route"
+            :title="handelLabel"
+            :to="{ name: GoToLastRoute() }"
+          >
+            {{ handelLabel }}
+          </b-link>
+        </div>
       </b-col>
+      <b-col
+        md="10"
+        class="wrapper-MenuItem"
+        title="table of content for this lesson"
+      >
+        <h3>{{ $t('text.activity_title') }}</h3>
 
-      <b-col md="8" class="wrapper-MenuItem">
         <app-comp-menu-item></app-comp-menu-item>
       </b-col>
     </b-row>
@@ -36,15 +38,23 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'AppCompMenu',
+  data() {
+    return {
+      totalAttempts: 0
+    }
+  },
   computed: {
     ...mapGetters([
       'getRouteHistory',
       'getAllActivitiesState',
+      'getAllCompleted',
+      'getModuleInfo',
+      'getMenuSettings',
       'getAllCompleted'
     ]),
     handelLabel() {
       let label = ''
-      const { allActivitiesState, allCompleted } = this.progressWithoutMenu()
+      const { allActivitiesState, allCompleted } = this.progressWithMenu()
 
       let activity = Object.values(allActivitiesState)
       let completeActivity = Object.values(allCompleted)
@@ -59,6 +69,21 @@ export default {
         }
       }
       return label
+    },
+    getLessonid() {
+      // ATTENDRE UX*UI poure voir si on garde le concept ou pas
+      let lessonLabel = this.$t('text.lesson')
+      let lessonId = 99
+      return `${lessonLabel} ${lessonId}`
+    },
+    getLessonTitle() {
+      let lessonT
+      if (this.getMenuSettings.lessonTitle) {
+        lessonT = this.getMenuSettings.lessonTitle
+      } else {
+        lessonT = 'Entrer un titre à votre dans menu setting svp.'
+      }
+      return `${lessonT}`
     }
   },
   created() {},
@@ -69,14 +94,14 @@ export default {
       let path
 
       //Get all activity state (menu not included)
-      const { allActivitiesState } = this.progressWithoutMenu()
+      const { allActivitiesState } = this.progressWithMenu()
       let state = Object.values(allActivitiesState)
 
       if (this.getRouteHistory.length) {
         if (this.getRouteHistory.length == 1) {
           lastRoute = this.getRouteHistory[0]
         } else {
-          lastRoute = this.getRouteHistory[this.getRouteHistory.length - 2]
+          lastRoute = this.getRouteHistory[this.getRouteHistory.length - 1]
         }
       }
 
@@ -90,6 +115,7 @@ export default {
       if (lastRoute) path = this.createdRoute(lastRoute)
       return path
     },
+
     noProgress(obj) {
       //validator to see if anything was seen before
       for (let i = 0; i < obj.length; i++) {
@@ -104,54 +130,27 @@ export default {
       let page
       let path
 
-      if (
-        (newRoute.activity_ref && newRoute.activity_ref.charAt(1) == '0') ||
-        (newRoute.activity_ref && newRoute.activity_ref.charAt(1) == 0)
-      ) {
-        activity = newRoute.activity_ref.substr(2)
+      const typesToCatch = ['menu', 'introduction', 'conclusion']
+      //Define activity
+      if (typesToCatch.includes(newRoute.type)) {
+        activity = newRoute.type
       } else {
-        activity = newRoute.activity_ref.substr(1)
+        activity =
+          newRoute.activity_ref.charAt(1) == '0'
+            ? `activite_${newRoute.activity_ref.substring(2)}`
+            : `activite_${newRoute.activity_ref.substring(1)}`
       }
-      if (newRoute.activity_ref && newRoute.activity_ref !== 'A00') {
-        // create link for page when you are in the intro
-        if (newRoute.id.charAt(1) == '0' || newRoute.id.charAt(1) == 0) {
-          page = newRoute.id.substr(2)
-        } else {
-          page = newRoute.id.substr(1)
-        }
-        // create link for any ativity
-        if (page == '1' || page == 1) {
-          path = `activite_${activity}`
-        } else {
-          path = `activite_${activity}.page_${page}`
-        }
-      } else {
-        // create link for page when you are not in the intro
-        let str = newRoute.id.substr(newRoute.id.indexOf('-') + 1)
 
-        if (str.charAt(1) == '0' || str.charAt(1) == 0) {
-          page = str.substr(2)
-        } else {
-          page = str.substr(1)
-        }
+      //Define page
+      const idToIgnore = ['P01', 'pg_menu']
+      page = idToIgnore.includes(newRoute.id) ? ' ' : newRoute.id.substring(2)
+
+      //Define path
+      path = page !== ' ' ? `${activity}.page_${page}` : activity
 
-        // CREATE LINK if it was the intro
-        if (page == '1' || page == 1) {
-          path = `introduction`
-        } else if (page == '0' || page == 0) {
-          path = `menu`
-        } else {
-          path = `introduction.page_${page}`
-        }
-      }
       return path
     },
-    progressWithoutMenu() {
-      //get the page which is defined as the menu
-      const toIgnore = this.$helper
-        .getRoutesFromVueRouter('A00')
-        .all_routes.find((el) => el.name === 'menu').meta.id
-
+    progressWithMenu() {
       /*
        * Note:
        * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
@@ -172,31 +171,38 @@ export default {
         ) {
           let completedIntro = allCompleted[activity]
 
-          //remove the "menu page from the completed in intro
-          completedIntro = completedIntro.filter(
-            (el) => Object.keys(el)[0] !== toIgnore
-          )
-
           if (!completedIntro.length) completedIntro = []
 
           allCompleted[activity] = completedIntro
-
-          // Remove menu page from the activity state tracking
-          let introState = allActivitiesState[activity].progressions
-          if (introState.length) {
-            introState = introState.filter(
-              (el) => Object.keys(el)[0] !== toIgnore
-            )
-
-            allActivitiesState[activity].progressions = introState
-            allActivitiesState[activity].size -= 1
-          }
         }
       }
+
       return {
         allActivitiesState,
         allCompleted
       }
+    },
+    lessonProg() {
+      let lstActivity = Object.keys(this.getAllActivitiesState)
+      let progress = null
+      let info = this.progressWithMenu()
+      let page = null
+      let pageCmplt = null
+
+      lstActivity.forEach((element) => {
+        //Get the total of all the page
+        page += info.allActivitiesState[element].size
+
+        if (info.allCompleted[element]) {
+          // GEt all page complete
+          pageCmplt += Object.values(info.allCompleted[element]).length
+        }
+      })
+
+      // Create pourcentage complete
+      progress = Math.round((pageCmplt * 100) / page)
+
+      return `${progress}%`
     }
   }
 }