fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppCompVideoPlayer.vue

@@ -1,377 +1,377 @@
-<!--
- @ 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="updateMediaDataVideo($event.target)"
-        >
-          <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) 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']),
-    /**
-     * @description search the DOM for medias with duplicated ID declaration in the page
-     * @return return Array of all DOM MediaElement with same id
-     */
-    checkDuplicatedID() {
-      const mediaList = document.querySelectorAll('.__media-container')
-      const duplicate = Array.from(mediaList).filter((media) =>
-        media.id.includes(this.id)
-      )
-      return duplicate
-    },
-    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
-     */
-    updateMediaDataVideo(e) {
-      this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'loading')
-      this.$bus.$emit('update-media-duration')
-
-      if (this.checkDuplicatedID().length > 1) {
-        const errmsg = `Cet élément a le même ID (<b>${this.id}</b>) 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 (${this.id}) in your media elements for your page.`,
-          '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).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%);
-  }
-}
-
-.debug{
-
-  &:focus{
-    border: 5px solid rgba(#fff, 0.05);
-  }
-}
-</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="updateMediaDataVideo($event.target)"
+        >
+          <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) 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']),
+    /**
+     * @description search the DOM for medias with duplicated ID declaration in the page
+     * @return return Array of all DOM MediaElement with same id
+     */
+    checkDuplicatedID() {
+      const mediaList = document.querySelectorAll('.__media-container')
+      const duplicate = Array.from(mediaList).filter((media) =>
+        media.id.includes(this.id)
+      )
+      return duplicate
+    },
+    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
+     */
+    updateMediaDataVideo(e) {
+      this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'loading')
+      this.$bus.$emit('update-media-duration')
+
+      if (this.checkDuplicatedID().length > 1) {
+        const errmsg = `Cet élément a le même ID (<b>${this.id}</b>) 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 (${this.id}) in your media elements for your page.`,
+          '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).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%);
+  }
+}
+
+.debug {
+  &:focus {
+    border: 5px solid rgba(#fff, 0.05);
+  }
+}
+</style>