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

package/src/components/AppCompVideoPlayer.vue

@@ -4,21 +4,21 @@
  Once the HTMLMediaElement tag is created, the component save the HTMLMediaElement to store and
  make it available to all other component that will need id
 -->
-
 <template>
-  <div
+  <section
     v-if="vidData"
-    id="app-video-player"
-    class="v-media __media-container"
+    :id="'video_' + id"
+    ref="$media-container"
+    class="v-media __media-container app-video-player"
     :class="[{ FS: fullScreen }, CCBrowser]"
-    tabindex="0"
+    aria-label="Video"
   >
-    <b-row v-show="hasErr.length" class="warning-error">
+    <b-row v-if="hasErr.length" class="warning-error">
       <b-col class="box-error">
         <div class="yellow-box">
           <h2>
             <b-icon icon="exclamation-triangle" />
-            Erreure: COMPOSANT VIDEO
+            Erreur: COMPOSANT VIDEO
           </h2>
         </div>
         <div class="box">
@@ -28,22 +28,31 @@
             <br />
           </p>
           <ul>
-            <li v-for="(err, index) in hasErr" :key="`error_type_${index}`">
-              {{ err }}
-            </li>
+            <li
+              v-for="(err, index) in hasErr"
+              :key="`error_type_${index}`"
+              v-html="err"
+            />
           </ul>
         </div>
       </b-col>
     </b-row>
     <!------------------video section --------------------------->
-    <template v-show="!hasErr.length">
-      <div class="vid-wrapper" @click="handlePlayBack">
-        <div class="playback-animation">
-          <svg class="app-icons-svg">
-            <use v-show="!isPlaying" href="#play-icon" />
-            <use v-show="isPlaying" href="#pause-icon" />
-          </svg>
+
+    <template v-else>
+      <div class="vid-wrapper">
+        <!--Vid-skeleton-->
+        <div
+          v-if="isLoading || hasSourceLoadingError"
+          class="skeleton"
+          :class="{ isloading: isLoading, error: hasSourceLoadingError }"
+        >
+          <p v-if="hasSourceLoadingError">
+            Une erreur s'est produite lors du chargement de la vidéo, veuillez
+            réessayer
+          </p>
         </div>
+        <!--End vid-sleleton-->
         <video
           :id="id"
           ref="m-video"
@@ -55,6 +64,7 @@
             :key="index"
             :src="`${aSource.src}`"
             :type="`video/${aSource.type}`"
+            @error="errorHandling($event)"
           />
           <track
             v-for="(subtitle, index) in vidSubtitles"
@@ -65,9 +75,14 @@
           />
         </video>
       </div>
-      <app-comp-play-bar v-if="$vidElement" :media-to-play="$vidElement" />
+      <app-comp-play-bar
+        v-if="$vidElement && !isLoading && !hasSourceLoadingError"
+        :ref="`plyr_${id}`"
+        :media-to-play="$vidElement"
+        @resize-video="resizeVideo"
+      />
     </template>
-  </div>
+  </section>
 </template>
 
 <script>
@@ -91,24 +106,33 @@ export default {
 
   data() {
     return {
-      id: null,
+      id: this.vidData.id,
       vidSources: [],
       vidSubtitles: [],
       vidPoster: null,
       vidTranscript: null,
+      hasSourceLoadingError: false,
       hasErr: validateVideoData(this.vidData),
       isSet: false,
-      isPlaying: false,
-      playClicked: false
+      playClicked: false,
+      vidFocus: false,
+      vidElm: null,
+      vidElmFocus: false,
+      mediaContainer: null
     }
   },
   computed: {
-    ...mapGetters(['getCurrentBrowser']),
+    ...mapGetters(['getCurrentBrowser', 'getCurrentPage']),
+    //Return true if the video is loading (to show the loading display)
+    isLoading() {
+      if (!this.isSet && !this.hasSourceLoadingError) return true
+      else return false
+    },
 
     setTimeout() {
       return window.setTimeout
     },
-
+    //Return current browser
     CCBrowser() {
       let browser = this.getCurrentBrowser
 
@@ -118,35 +142,18 @@ export default {
         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
-    },
+    //Return the videoElement (used in the playbar)
     $vidElement() {
       if (!this.isSet) return null
-      const { mTranscript, mSubtitles } = this.vidData
+      const { id, mTranscript, mSubtitles } = this.vidData
+      const mElement = this.$refs['m-video']
       return {
+        id,
         mTranscript,
         mType: 'video',
         mSubtitles,
-        mElement: this.$refs['m-video']
+        mElement,
+        mMediaContainer: this.$refs['$media-container']
       }
     }
   },
@@ -155,25 +162,23 @@ export default {
     this.initVideo()
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$bus.$off('hide-playback', this.hideAnimation)
     this.$bus.$off('resize-media', this.resizeVideo)
   },
 
   methods: {
+    errorHandling(e) {
+      this.hasSourceLoadingError = true
+    },
     initVideo() {
-      const { mSources, mPoster, mSubtitles, mTranscript } = this.vidData
-
+      const { mSources, mPoster, mSubtitles, mTranscript, id } = this.vidData
+      if (id) this.id = id
       if (mSources) this.vidSources = mSources
       if (mPoster) this.vidPoster = mPoster
       if (mSubtitles) this.vidSubtitles = mSubtitles
       if (mTranscript) this.vidTranscript = mTranscript
 
-      setTimeout(() => {
-        this.isSet = true
-        this.isPlaying = !this.$vidElement.mElement.paused
-        this.vidPaused = this.$vidElement.mElement.paused
-      }, 200)
       this.$bus.$on('resize-media', this.resizeVideo)
       this.$bus.$on('hide-playback', this.hideAnimation)
     },
@@ -187,15 +192,28 @@ export default {
       //dispatch loading status of for this component
       this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'loading')
       this.$bus.$emit('update-media-duration')
+      //Should Check that the the media Element is unique im Media Liste
+      const { mElements } = this.getCurrentPage
+
+      const hasEntry = mElements.findIndex((media) => media.id === e.target.id)
 
-      this.$store
-        .dispatch('updateCurrentMediaElement', e.target)
-        .then(() => {
-          this.$bus.$emit('update-page')
-        })
-        .then(() =>
-          this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+      if (hasEntry !== -1) {
+        // Should report Error to Console and Component template about this media
+        const errmsg = `Cet élément a le même ID q'un autre media. Vous ne devez pas avoir de médias avec le même ID dans une page.`
+
+        console.warn(
+          `%c WARNING!>>> You cannot use the same ID in your media elements`,
+          'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
         )
+
+        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+        return this.hasErr.push(errmsg)
+      }
+
+      this.$store.dispatch('updateCurrentMediaElements', e.target).then(() => {
+        this.isSet = true
+        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+      })
     },
     /**
      *@description - small animation over the playback button
@@ -203,7 +221,7 @@ export default {
      *@emits play-media -  To AppComPLayBar
      */
     runPlaybackAnimation() {
-      this.isPlaying = !this.$vidElement.mElement.paused
+      //this.isPlaying = !this.$vidElement.mElement.paused
 
       let animation = this.$gsap.fromTo(
         '.playback-animation',
@@ -223,16 +241,16 @@ export default {
      * @emits play-media to AppComplayBar
      *
      */
-    handlePlayBack() {
+    /*handlePlayBack(evtType) {
       this.runPlaybackAnimation()
-      this.$bus.$emit('play-media', 'k')
-    },
+      this.$bus.$emit('play-media', 'KeyK')
+    },*/
     /**
      * @description hide the animation when the media is played with click on playbar play button
      * this ensures that animation does not run every time user controls the media via the playbar controls
      */
-    hideAnimation() {
-      if (this.playClicked) return
+    hideAnimation(type = null) {
+      if (this.playClicked && !type) return
       this.runPlaybackAnimation()
       this.playClicked = true
     },
@@ -269,13 +287,23 @@ export default {
      * @description -set the size of the video element when transcript is open or closed
      */
 
-    resizeVideo(size) {
-      let defaultSize = 98
+    resizeVideo(size, container) {
+      let defaultSize = 100
       if (size == 'sm') defaultSize = 68
-      const videoElement = document.querySelector('.__media-container')
+      //const videoElement = document.querySelector('.__media-container')
+      const videoElement = this.$vidElement.mMediaContainer
       setTimeout(() => {
         videoElement.style.width = `${defaultSize}%`
       }, 100)
+    },
+
+    spaceKeyPreventDefault(evt) {
+      let { code } = evt
+      if (code == 'Space') {
+        //console.log('\x1b[43mspace i')
+        evt.preventDefault()
+        this.handlePlayBack('spacebar')
+      }
     }
   }
 }
@@ -283,54 +311,70 @@ export default {
 <style lang="scss">
 $widthVideo: 100%;
 
-.__media-container,
-.vid-wrapper {
+.app-video-player {
   display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.__media-container {
-  width: 98%;
-  user-select: none;
-  overflow: hidden;
-  max-width: 900px;
-  border-radius: 5px;
-  background: #000;
-
+  flex-direction: row;
+  flex-wrap: wrap;
   position: relative;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
+  align-items: center;
 
-  video,
   .vid-wrapper {
-    width: $widthVideo;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    .playback-button {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      flex-flow: column wrap;
+      justify-content: center;
+      align-items: center;
+      background-color: transparent;
+    }
+
+    video {
+      width: 100%;
+      height: auto;
+      display: block;
+      user-select: none;
+    }
   }
+}
 
-  .playback-animation {
-    cursor: pointer;
-    position: absolute;
+//Skeleton animation style
+.skeleton {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 3;
+  &.isloading {
+    animation: skeleton-loading 1s linear infinite alternate;
+  }
+  &.error {
     display: flex;
-    align-items: center;
     justify-content: center;
-
-    -webkit-box-shadow: 7px 5px 7px 0px rgba(0, 0, 0, 0.24);
-    box-shadow: 7px 5px 7px 0px rgba(0, 0, 0, 0.24);
-    background-color: #007bff;
-    width: 75px;
-    height: 75px;
-    border-radius: 50%;
-
-    .app-icons-svg {
-      width: 40px;
-      height: 40px;
-    }
+    align-items: center;
+    //colors
+    background-color: hsl(200, 20%, 80%);
+  }
+  &.audio {
+    height: 277px;
+    max-width: 600px;
   }
 }
-.__media-container.fullscreen {
-  max-width: 100%;
-  width: 100%;
-  height: 100vh;
-  border-radius: 0px;
+
+@keyframes skeleton-loading {
+  //colors
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
 }
 </style>

package/src/components/BaseModule.vue

@@ -5,18 +5,17 @@
 -->
 <template>
   <div v-if="mData" class="module-wrapper">
-    <div
+    <!-- <div
       class="overlay-close-widget"
       :class="{ blockOverlay: over }"
       @click="overlayClose()"
-    ></div>
+    ></div> -->
     <slot name="mTitle" />
     <slot>Module</slot>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 export default {
   props: {
     mData: {
@@ -27,30 +26,35 @@ export default {
 
   data() {
     return {
-      data: null,
-      over: false
+      data: null
+      // over: false
       // back: null
     }
   },
 
-  computed: {
-    ...mapGetters(['getModuleInfo', 'getConnectionInfo'])
-  },
-  watch: {
-    getConnectionInfo: {
-      immediate: true,
-      handler() {
-        if (!this.getConnectionInfo) return
-        // this.$bus.$emit('set-user-progress')
-      }
-    }
+  mounted() {
+    // this.$bus.$on('toggle-widget', () => {
+    //   this.over = true
+    // })
+    // this.$bus.$on('close-widget', () => {
+    //   this.over = false
+    // })
   },
   created() {},
-  methods: {}
+  methods: {
+    // overlayClose() {
+    //   this.$bus.$emit('close-widget')
+    // }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.module-wrapper {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+}
 .overlay-close-widget {
   position: absolute;
   top: 0;