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

package/src/components/AppCompNavigation.vue

@@ -531,8 +531,8 @@ export default {
           const endPopup = {
             type: 'popup-endActivity',
             value: {
-              template: `<p>${this.$t('popup.text_what_to_do')}</p>`,
-              title: ''
+              template: ``,
+              title: `${this.$t('popup.text_what_to_do')}`
             }
           }
 

package/src/components/AppCompPlayBarNext.vue

@@ -432,7 +432,8 @@ mediaMixins is used for all the methods/data shared between audio and video. In
       </div>
       <div v-if="appDebugMode" class="timer">
         <!-- <div class="timer"> -->
-        {{ timer.getElapsedTime() }}
+        <p></p>
+        <p>Timer : {{ timer.getElapsedTime() }}</p>
       </div>
     </div>
   </div>
@@ -712,6 +713,12 @@ export default {
     }
   },
   watch: {
+    viewedThresholdReached: {
+      handler() {
+        //send a "viewed" event for this media
+        this.trackEvent('end')
+      }
+    },
     getUserInteraction: {
       handler() {
         const activityID = this.$route.meta.activity_ref
@@ -791,6 +798,96 @@ export default {
       'setMediaMuted',
       'setMediaPlaybarValues'
     ]),
+    trackEvent(action) {
+      const expectedActions = ['play', 'viewed']
+      if (!action || !expectedActions.includes(action)) return
+      const media = this.mediaRawData
+      if (!media || !media.mSources || !media.mSources.length) return
+      const { mTitle, mSources } = media
+      const { mType } = this.mediaToPlay
+      const URIBase = `media/${mType}/`
+
+      //send statement
+      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(
+                this.startedTime
+              ),
+              'https://w3id.org/xapi/video/extensions/progress': Math.round(
+                (this.startedTime / this.mediaDuration) * 100
+              )
+            }
+          }
+          break
+        }
+        case 'viewed': {
+          const expectedViewTime = Number(
+            this.timer.getElapsedTime() / Math.trunc(this.mediaDuration)
+          )
+          stmt.verb = 'completed'
+          stmt.description = `${mType} ${stmt.id.replace(URIBase, '')}`
+          stmt.result = {
+            extensions: {
+              'https://w3id.org/xapi/video/extensions/progress':
+                expectedViewTime * 100,
+              'https://w3id.org/xapi/video/extensions/time-from': Math.round(
+                this.startedTime
+              ),
+              'https://w3id.org/xapi/video/extensions/time-to': this.currentTime
+            },
+            completion:
+              expectedViewTime >= this.viewedThreshold &&
+              this.viewedThresholdReached
+          }
+          stmt.duration = this.timer.ISOTimeParser(
+            expectedViewTime * this.mediaDuration
+          )
+          break
+        }
+      }
+      this.$bus.$emit('send-xapi-statement', stmt)
+      //send Analytics Event
+      const analyticsEventName = `fcad_${mType}_${action}`
+      this.trackWithGA(analyticsEventName)
+    },
+    trackWithGA(eventName) {
+      if (
+        !eventName ||
+        !this.mediaRawData ||
+        !this.mediaRawData.mSources ||
+        !this.mediaRawData.mSources.length
+      )
+        return
+      const { mTitle, mSources } = this.mediaRawData
+
+      const eventParams = {
+        title: mTitle || mSources[0].src,
+        url: mSources[0].src
+      }
+
+      this.$analytics.sendEvent(eventName, eventParams)
+    },
 
     //======================================================================
     /**
@@ -882,7 +979,8 @@ export default {
       !this.isPlaying ? this.timer.start() : this.timer.pause()
 
       if (!this.playStmtSent) {
-        this.sendMediaStatement('play', this.startedTime, null)
+        //this.sendMediaStatement("play", this.startedTime, null);
+        this.trackEvent('play')
         this.playStmtSent = true
       }
       //Data
@@ -918,14 +1016,10 @@ 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.sendMediaStatement("end", this.startedTime, expectedViewTime);
+        this.trackEvent('viewed')
         this.playStmtSent = false //reset the play statement for next play
       }
       this.$bus.$emit('media-viewed', this.mediaToPlay.id)
@@ -1174,7 +1268,10 @@ export default {
       this.currentTime = e.target.currentTime
 
       //Set viewedThresholdReached to true when the threshold is reached
-      if (Math.trunc(this.progressBarPercentage) == this.viewedThreshold * 100)
+      if (
+        this.timer.getElapsedTime() / Math.trunc(this.mediaDuration) >=
+        this.viewedThreshold
+      )
         this.viewedThresholdReached = true
 
       //Update strings
@@ -1529,6 +1626,7 @@ export default {
      */
     toggleFullScreen() {
       const fullscreenElement = this.mediaContainer
+      console.log(fullscreenElement)
 
       if (document.fullscreenElement) {
         // exitFullscreen is only available on the Document object.
@@ -1682,7 +1780,7 @@ export default {
       this.hideTimer = setTimeout(() => {
         this.showControlsValue = false
       }, this.delayUntilHide)
-    },
+    }
 
     /**
      * @description - Send xAPI statement for media play and end
@@ -1690,87 +1788,6 @@ export default {
      * @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)
-    }
   }
 }
 </script>
@@ -1781,19 +1798,21 @@ export default {
   width: 100%;
   justify-content: center;
   display: flex;
+  margin-bottom: 78px;
 }
 
 .playback-button {
   position: absolute;
-  top: 0;
+  bottom: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 94%;
   display: flex;
   flex-flow: column wrap;
   justify-content: center;
   align-items: center;
   background-color: transparent;
+
   .playback-wrapper {
     height: 64px;
     width: 64px;
@@ -1817,9 +1836,10 @@ export default {
   display: flex;
   flex-direction: column;
   position: absolute;
-  bottom: 0;
+  bottom: -78px;
   opacity: 0;
   z-index: 2;
+
   &.show-controls {
     opacity: 1;
     transition: opacity 0.35s ease-in-out;
@@ -2158,6 +2178,7 @@ export default {
       min-width: 50px;
       margin: 0 auto;
     }
+
     .progress-area {
       justify-content: center;
     }
@@ -2235,6 +2256,14 @@ export default {
   }
 }
 
+.FS {
+  &:fullscreen {
+    .pb-wrapper {
+      bottom: -45px;
+    }
+  }
+}
+
 @keyframes handlePlayBack {
   0% {
     opacity: 0;

package/src/components/AppCompPopUpNext.vue

@@ -61,7 +61,7 @@
             <div class="pop-containt">
               <div class="pop-box">
                 <div id="popHeader">
-                  <h4 id="dialogTitle" class="p-title" v-html="pTitle"></h4>
+                  <div id="dialogTitle" class="p-title" v-html="pTitle"></div>
                 </div>
                 <div class="box-content-popUp"></div>
                 <div
@@ -103,7 +103,7 @@
             <div class="pop-containt">
               <div class="pop-box">
                 <div id="popHeader">
-                  <h4 id="dialogTitle" class="p-title" v-html="pTitle"></h4>
+                  <p id="dialogTitle" class="p-title" v-html="pTitle"></p>
                 </div>
                 <div class="box-content-popUp">
                   <template v-if="contentLength > 0">

package/src/components/AppCompQuizNext.vue

@@ -22,7 +22,11 @@
     >
       <!--Show skeleton while quiz data is not ready-->
       <template v-if="!isReady">
-        <app-base-skeleton :skeleton-text="''" :skeleton-lines="5" />
+        <app-base-skeleton
+          :skeleton-text="''"
+          :skeleton-type="skeletonType(quizData.type_question)"
+        />
+        {{ quizData.type_question }}
       </template>
       <!--Show  when quiz data is ready-->
       <template v-else>
@@ -185,7 +189,6 @@ export default {
 
       return quiz
     },
-
     retroAriaLabel() {
       let label = ''
       switch (this.retroType) {
@@ -489,6 +492,13 @@ export default {
       if (el.id !== this.quizData.id) return
 
       this.showRetro = value
+    },
+    skeletonType(type) {
+      if (type == 'reponse_ouverte') {
+        return `quiz-texte`
+      } else {
+        return `quiz-choix`
+      }
     }
   }
 }

package/src/components/AppCompQuizRecall.vue

@@ -10,7 +10,7 @@
     <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
     <!--Show skeleton while app data is not ready-->
     <template v-if="!isReady">
-      <app-base-skeleton :skeleton-lines="2" />
+      <app-base-skeleton :skeleton-text="''" :skeleton-type="`quiz-recall`" />
     </template>
     <!--Show app data when ready-->
     <template v-else>
@@ -140,10 +140,17 @@ export default {
       for (let property in searchObject) {
         //Should only check for not null poperties
         if (!searchObject[property]) continue
+
         // Should only check for Object or Array property
         if (
-          searchObject[property].constructor !== Array &&
-          searchObject[property].constructor !== Object
+          searchObject[property].constructor !== Object &&
+          searchObject[property].constructor !== Array
+        )
+          continue
+
+        if (
+          searchObject[property].constructor == Array &&
+          searchObject[property][0].constructor !== Object
         )
           continue
 
@@ -152,7 +159,6 @@ export default {
           searchObject[property].constructor === Object
             ? [searchObject[property]]
             : searchObject[property]
-
         //Only Search for quiz:
         //Search Array is a list of quiz if one of its element has at least the property 'type_question'
         return searchArray[0]['type_question']