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

package/src/components/AppCompVideoPlayer.vue

@@ -1,336 +1,368 @@
-<!--
- @ Description: This component is used to display video element video
- @ What it does: The component create the HTMLMediaElement video tag from data provided by user.
- 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
-    v-if="vidData"
-    id="app-video-player"
-    class="v-media __media-container"
-    :class="[{ FS: fullScreen }, CCBrowser]"
-    tabindex="0"
-  >
-    <b-row v-show="hasErr.length" class="warning-error">
-      <b-col class="box-error">
-        <div class="yellow-box">
-          <h2>
-            <b-icon icon="exclamation-triangle" />
-            Erreure: COMPOSANT VIDEO
-          </h2>
-        </div>
-        <div class="box">
-          <p>
-            Vous avez une/des erreur(s) pour la création de votre composant.
-            Veuillez corriger les erreurs ci-dessous:
-            <br />
-          </p>
-          <ul>
-            <li v-for="(err, index) in hasErr" :key="`error_type_${index}`">
-              {{ err }}
-            </li>
-          </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>
-        </div>
-        <video
-          :id="id"
-          ref="m-video"
-          :poster="vidPoster"
-          @loadedmetadata="updateMediaData($event)"
-        >
-          <source
-            v-for="(aSource, index) in vidSources"
-            :key="index"
-            :src="`${aSource.src}`"
-            :type="`video/${aSource.type}`"
-          />
-          <track
-            v-for="(subtitle, index) in vidSubtitles"
-            :key="`subtitle_${index + 1}`"
-            :src="subtitle.src"
-            :srclang="subtitle.srclang"
-            :label="subtitle.label"
-          />
-        </video>
-      </div>
-      <app-comp-play-bar v-if="$vidElement" :media-to-play="$vidElement" />
-    </template>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { validateVideoData } from '../shared/validators'
-
-export default {
-  props: {
-    vidData: {
-      type: Object,
-      required: true,
-      validator: (value) => {
-        return validateVideoData(value).length === 0
-      }
-    },
-    fullScreen: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      id: null,
-      vidSources: [],
-      vidSubtitles: [],
-      vidPoster: null,
-      vidTranscript: null,
-      hasErr: validateVideoData(this.vidData),
-      isSet: false,
-      isPlaying: false,
-      playClicked: false
-    }
-  },
-  computed: {
-    ...mapGetters(['getCurrentBrowser']),
-
-    setTimeout() {
-      return window.setTimeout
-    },
-
-    CCBrowser() {
-      let browser = this.getCurrentBrowser
-
-      if (browser === 'Safari') {
-        return 'safari'
-      } 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
-    },
-    $vidElement() {
-      if (!this.isSet) return null
-      const { mTranscript, mSubtitles } = this.vidData
-      return {
-        mTranscript,
-        mType: 'video',
-        mSubtitles,
-        mElement: this.$refs['m-video']
-      }
-    }
-  },
-
-  mounted() {
-    this.initVideo()
-  },
-
-  beforeDestroy() {
-    this.$bus.$off('hide-playback', this.hideAnimation)
-    this.$bus.$off('resize-media', this.resizeVideo)
-  },
-
-  methods: {
-    initVideo() {
-      const { mSources, mPoster, mSubtitles, mTranscript } = this.vidData
-
-      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)
-    },
-
-    /**
-     * @description update the information for the mediaElement in the store
-     * @param {htmlElement} e
-     * @fires update-page to AppBaseModule.vue
-     */
-    updateMediaData(e) {
-      //dispatch loading status of for this component
-      this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'loading')
-      this.$bus.$emit('update-media-duration')
-
-      this.$store
-        .dispatch('updateCurrentMediaElement', e.target)
-        .then(() => {
-          this.$bus.$emit('update-page')
-        })
-        .then(() =>
-          this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
-        )
-    },
-    /**
-     *@description - small animation over the playback button
-     * Play a little animation on the svg and then send a play event
-     *@emits play-media -  To AppComPLayBar
-     */
-    runPlaybackAnimation() {
-      this.isPlaying = !this.$vidElement.mElement.paused
-
-      let animation = this.$gsap.fromTo(
-        '.playback-animation',
-        { opacity: 1, scale: 0.8 },
-        {
-          opacity: 0,
-          scale: 1.3,
-          duration: 0.8,
-          ease: 'power2.out'
-        }
-      )
-      animation.play()
-    },
-
-    /**
-     * @description initiate play back of media when click on the video Element with animation
-     * @emits play-media to AppComplayBar
-     *
-     */
-    handlePlayBack() {
-      this.runPlaybackAnimation()
-      this.$bus.$emit('play-media', 'k')
-    },
-    /**
-     * @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
-      this.runPlaybackAnimation()
-      this.playClicked = true
-    },
-
-    /**
-     * @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()
-    },
-
-    /**
-     * @description -set the size of the video element when transcript is open or closed
-     */
-
-    resizeVideo(size) {
-      let defaultSize = 98
-      if (size == 'sm') defaultSize = 68
-      const videoElement = document.querySelector('.__media-container')
-      setTimeout(() => {
-        videoElement.style.width = `${defaultSize}%`
-      }, 100)
-    }
-  }
-}
-</script>
-<style lang="scss">
-$widthVideo: 100%;
-
-.__media-container,
-.vid-wrapper {
-  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;
-
-  position: relative;
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-
-  video,
-  .vid-wrapper {
-    width: $widthVideo;
-  }
-
-  .playback-animation {
-    cursor: pointer;
-    position: absolute;
-    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;
-    }
-  }
-}
-.__media-container.fullscreen {
-  max-width: 100%;
-  width: 100%;
-  height: 100vh;
-  border-radius: 0px;
-}
-</style>
+<!--
+ @ Description: This component is used to display video element video
+ @ What it does: The component create the HTMLMediaElement video tag from data provided by user.
+ 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>
+  <section
+    v-if="vidData"
+    :id="'video_' + id"
+    ref="$media-container"
+    class="v-media __media-container app-video-player"
+    :class="[{ FS: fullScreen }, CCBrowser]"
+    aria-label="Video"
+  >
+    <app-base-error-display
+      v-if="hasErr.length"
+      :error-group="'component'"
+      :error-title="'ERREUR: COMPOSANT DE VIDEO'"
+      :errors-list="hasErr"
+    />
+
+    <!------------------video section --------------------------->
+
+    <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"
+          :poster="vidPoster"
+          @loadedmetadata="updateMediaData($event)"
+        >
+          <source
+            v-for="(aSource, index) in vidSources"
+            :key="index"
+            :src="`${aSource.src}`"
+            :type="`video/${aSource.type}`"
+            @error="errorHandling($event)"
+          />
+          <track
+            v-for="(subtitle, index) in vidSubtitles"
+            :key="`subtitle_${index + 1}`"
+            :src="subtitle.src"
+            :srclang="subtitle.srclang"
+            :label="subtitle.label"
+          />
+        </video>
+      </div>
+      <app-comp-play-bar-next
+        v-if="$vidElement && !isLoading && !hasSourceLoadingError"
+        :ref="`plyr_${id}`"
+        :media-to-play="$vidElement"
+        @resize-video="resizeVideo"
+      />
+    </template>
+  </section>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { validateVideoData } from '../shared/validators'
+import AppCompPlayBarNext from './AppCompPlayBarNext.vue'
+
+export default {
+  components: { AppCompPlayBarNext },
+  props: {
+    vidData: {
+      type: Object,
+      required: true,
+      validator: (value) => {
+        return validateVideoData(value).length === 0
+      }
+    },
+    fullScreen: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      id: this.vidData.id,
+      vidSources: [],
+      vidSubtitles: [],
+      vidPoster: null,
+      vidTranscript: null,
+      hasSourceLoadingError: false,
+      hasErr: validateVideoData(this.vidData),
+      isSet: false,
+      playClicked: false,
+      vidFocus: false,
+      vidElm: null,
+      vidElmFocus: false,
+      mediaContainer: null
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, ['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
+
+      if (browser === 'Safari') {
+        return 'safari'
+      } else {
+        return 'chrome'
+      }
+    },
+    //Return the videoElement (used in the playbar)
+    $vidElement() {
+      if (!this.isSet) return null
+      const { id, mTranscript, mSubtitles } = this.vidData
+      const mElement = this.$refs['m-video']
+      return {
+        id,
+        mTranscript,
+        mType: 'video',
+        mSubtitles,
+        mElement,
+        mMediaContainer: this.$refs['$media-container']
+      }
+    }
+  },
+
+  mounted() {
+    this.initVideo()
+  },
+
+  beforeUnmount() {
+    this.$bus.$off('hide-playback', this.hideAnimation)
+    this.$bus.$off('resize-media', this.resizeVideo)
+  },
+
+  methods: {
+    ...mapActions(useAppStore, ['updateCurrentMediaElements']),
+    errorHandling(e) {
+      this.hasSourceLoadingError = true
+    },
+    initVideo() {
+      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
+
+      this.$bus.$on('resize-media', this.resizeVideo)
+      this.$bus.$on('hide-playback', this.hideAnimation)
+    },
+
+    /**
+     * @description update the information for the mediaElement in the store
+     * @param {htmlElement} e
+     * @fires update-page to AppBaseModule.vue
+     */
+    updateMediaData(e) {
+      //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.findLastIndex(
+        (media) => media.id === e.target.id
+      )
+
+      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.updateCurrentMediaElements(e.target).then(() => {
+        this.isSet = true
+        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+      })
+    },
+    /**
+     *@description - small animation over the playback button
+     * Play a little animation on the svg and then send a play event
+     *@emits play-media -  To AppComPLayBar
+     */
+    runPlaybackAnimation() {
+      //this.isPlaying = !this.$vidElement.mElement.paused
+      // let animation = this.$gsap.fromTo(
+      //   '.playback-animation',
+      //   { opacity: 1, scale: 0.8 },
+      //   {
+      //     opacity: 0,
+      //     scale: 1.3,
+      //     duration: 0.8,
+      //     ease: 'power2.out'
+      //   }
+      // )
+      // animation.play()
+    },
+
+    /**
+     * @description initiate play back of media when click on the video Element with animation
+     * @emits play-media to AppComplayBar
+     *
+     */
+    /*handlePlayBack(evtType) {
+      this.runPlaybackAnimation()
+      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(type = null) {
+      if (this.playClicked && !type) return
+      this.runPlaybackAnimation()
+      this.playClicked = true
+    },
+
+    /**
+     * @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()
+    },
+
+    /**
+     * @description -set the size of the video element when transcript is open or closed
+     */
+
+    resizeVideo(size, container) {
+      let defaultSize = 100
+      if (size == 'sm') defaultSize = 68
+      //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') {
+        evt.preventDefault()
+        this.handlePlayBack('spacebar')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+$widthVideo: 100%;
+
+.app-video-player {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+
+  .vid-wrapper {
+    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;
+    }
+  }
+}
+
+//Skeleton animation style
+.skeleton {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 3;
+  &.isloading {
+    animation: skeleton-loading 1s linear infinite alternate;
+  }
+  &.error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    //colors
+    background-color: hsl(200, 20%, 80%);
+  }
+  &.audio {
+    height: 277px;
+    max-width: 600px;
+  }
+}
+
+@keyframes skeleton-loading {
+  //colors
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+</style>