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

package/src/components/AppCompMediaPlayer.vue

@@ -1,397 +0,0 @@
-<!--
- @ Description: This component is used to display media element (video/audio and Gsap timelined animation )
- @ What it does: The component create the HTMLMediaElement tag( video/audio) 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="mData"
-    id="contain-media-player"
-    class="app-media-player"
-    :class="[{ FS: fullScreen }, animationType, CCBrowser]"
-    :style="{ height: [fsHeigh] }"
-  >
-    <!------------------video section --------------------------->
-    <video
-      v-if="media && media.mType === 'video'"
-      id="video"
-      ref="video"
-      tabindex="0"
-      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}`"
-      />
-      <track
-        v-if="media.mSubtitle"
-        :src="media.mSubtitle.src"
-        :srclang="media.mSubtitle.srclang"
-        :label="media.mSubtitle.label"
-      />
-    </video>
-    <!------------------ audio section --------------------------->
-    <video
-      v-if="media && media.mType === 'audio'"
-      ref="audio"
-      tabindex="0"
-      class="v-media m-audio"
-      :poster="media.mPoster"
-      @loadedmetadata="updateMediaData($event)"
-    >
-      <source
-        v-for="(aMedia, index) in media.mSources"
-        :key="index"
-        :src="`${aMedia.src}`"
-        :type="`${media.mType}/${aMedia.type}`"
-      />
-      <track
-        v-if="media.mSubtitle"
-        :src="media.mSubtitle.src"
-        :srclang="media.mSubtitle.srcLang"
-        :label="media.mSubtitle.label"
-      />
-    </video>
-    <!------------------animation section --------------------------->
-    <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>
-    <!-- <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>
-
-<script>
-import { mapGetters } from 'vuex'
-
-export default {
-  props: {
-    mData: {
-      type: Object,
-      required: true
-    },
-    fullScreen: {
-      type: Boolean,
-      default: true
-    },
-    custom: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      media: null,
-      timeline: null,
-      subtitleMenuButtons: [],
-      subtitlesMenu: null,
-      fsHeigh: null,
-      isMedia: false
-      //currentMediaElement: null
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'hasMediaElOrTimeline',
-      'getCurrentBrowser',
-      'getCurrentPage'
-    ]),
-
-    setTimeout() {
-      return window.setTimeout
-    },
-
-    hasAnimation() {
-      if (
-        this.mData &&
-        (this.mData.animation || this.mData.type === 'pg_animation')
-      ) {
-        return true
-      } else return false
-    },
-    animationType() {
-      let type = null
-      if (this.mData) {
-        if (this.mData.type === 'pg_animation') {
-          type = 'animationOnly'
-        }
-        if (this.mData.type === 'pg_media') {
-          if (this.mData.mediaData.mType === 'audio') {
-            type = 'audioAnimation'
-          } else if (this.mData.mediaData.mType === 'video') {
-            type = 'videoAnimation'
-          }
-        }
-      }
-      return type
-    },
-    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
-    }
-  },
-  watch: {
-    media() {
-      let mElement = this.$refs[this.media.mType]
-      /* Handeling media subtitles
-       * if there is any subtitle, create the subtitle menu
-       */
-      if (mElement && mElement.textTracks) {
-        this.subtitlesMenu = []
-        for (let i = 0; i < mElement.textTracks.length; i++) {
-          this.subtitlesMenu.push({
-            id: `subtitle-${mElement.textTracks[i].language}`,
-            lang: mElement.textTracks[i].language,
-            label: mElement.textTracks[i].label
-          })
-        }
-      }
-    },
-
-    mData: {
-      immediate: true,
-      handler() {
-        if (this.mData && this.mData.type == 'pg_media') {
-          this.media = {
-            mType: this.mData.mediaData.mType,
-            mSources: [...this.mData.mediaData.mSources],
-            mPoster: this.mData.mediaData.mPoster || '',
-            mSubtitle: this.mData.mediaData.mSubtitle || null,
-            mTranscript: this.mData.mediaData.mTranscript || null
-          }
-        }
-        // Its an animation
-        else if (this.mData && this.mData.type == 'pg_animation') {
-          this.media = this.mData.animation
-        }
-      }
-    }
-  },
-  mounted() {
-    if (this.fullScreen) {
-      this.fsHeigh = ` ${window.innerHeight - 55}px`
-    } else {
-      this.fsHeigh = `100%`
-    }
-
-    this.$bus.$emit('videoFullScreen', this.fullScreen)
-    if (this.media) {
-      window.addEventListener('resize', this.caclWindowHeight)
-    }
-    this.currentMediaElement
-  },
-
-  beforeDestroy() {
-    this.$bus.$emit('videoFullScreen', false)
-    window.removeEventListener('resize', this.caclWindowHeight)
-  },
-  methods: {
-    hideSutitle() {
-      return
-    },
-    showSubtitle() {
-      return
-    },
-
-    /**
-     * @description select available= subtitle for title for a media
-     * @param {htmlElement} e
-     */
-    selectSubtitle(e) {
-      let mElement = document.querySelector(
-        `.app-media-player> ${this.media.mType}`
-      )
-      let subtitlesOption = this.$el.querySelectorAll('.subtitles-menu> a')
-
-      //set all the subitle options as inactive
-      for (let i = 0; i < subtitlesOption.length; i++) {
-        subtitlesOption[i].setAttribute('data-state', 'inactive')
-        subtitlesOption[i].className = 'sub_inactive'
-      }
-
-      for (let i = 0; i < mElement.textTracks.length; i++) {
-        // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
-        if (mElement.textTracks[i].language == e.target.lang) {
-          mElement.textTracks[i].mode = 'showing'
-          e.target.setAttribute('data-state', 'active')
-          e.target.className = 'sub_active'
-        } else {
-          mElement.textTracks[i].mode = 'hidden'
-          e.target.setAttribute('data-state', 'active')
-          e.target.className = 'sub_active'
-        }
-      }
-    },
-
-    /**
-     * @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.$store
-        .dispatch('updateCurrentMediaElement', e.target)
-        .then(() => {
-          this.$bus.$emit('update-page')
-          if (this.mData.timeline) {
-            //Set the length (total duration) of the timeline to the duration of the media
-            //Note: using totalDuration() or duration() will not work to define the duration to the length of the media.
-            this.mData.timeline.set({}, {}, e.target.duration)
-          }
-        })
-        .then(() =>
-          this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
-        )
-    },
-    caclWindowHeight() {
-      document.getElementById(
-        'contain-media-player'
-      ).style.height = `${window.innerHeight - 55}px`
-    },
-    // TODO: Checking that the media ressource exist/is available
-    // true: create set the ressource src
-    // false: disable play button, show on screen message media not available to user
-    //
-    async checkRessource(url) {
-      this.axios
-        .get(url, { responseType: 'blob' })
-        .then((res) => {
-          res
-        })
-        .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: 50%;
-
-%animation {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: $widthVideo;
-  height: 100%;
-  z-index: 1;
-  overflow: hidden;
-}
-</style>

package/src/plugins/timeManager.js

@@ -1,77 +0,0 @@
-export default function timeManager(Vue) {
-  Vue.prototype.$timeManager = new Vue({
-    data() {
-      return {
-        lessonTimeCounter: 0,
-        //activityTimeCounter: 0,
-        lessonDuration: 0,
-        activityDuration: 0,
-        activityInterval: null,
-        lessonInterval: null,
-        fullInterval: null
-      }
-    },
-    methods: {
-      /* Start the timer */
-      startTimer(op) {
-        if (op && !['activity', 'lesson'].includes(op))
-          throw new Error('this is not a valid option for the timer')
-
-        switch (op) {
-          case 'activity':
-            this.activityInterval = setInterval(() => {
-              this.activityDuration += 1
-            }, 1000)
-
-            break
-
-          case 'lesson':
-            this.lessonInterval = setInterval(() => {
-              this.lessonTimeCounter += 1
-            }, 1000)
-            break
-
-          default:
-            this.fullInterval = setInterval(() => {
-              this.activityDuration += 1
-              this.lessonDuration += 1
-            }, 1000)
-        }
-      },
-      /* Stop the timer and reset  thimer to zero */
-      stopTimer(op) {
-        if (op && !['activity', 'lesson'].includes(op))
-          throw new Error('this is not a valid parameter')
-
-        if (op === 'activity' && this.activityDuration > 0) {
-          clearInterval(this.activityInterval)
-          this.activityDuration = 0
-        } else if (op === 'lesson' && this.lessonDuration > 0) {
-          clearInterval(this.lessonInterval)
-          this.lessonDuration = 0
-        } else {
-          clearInterval(this.fullInterval)
-          this.activityDuration = 0
-          this.lessonDuration = 0
-        }
-      },
-      /* Pause the timer but does not reset to zero*/
-      pauseTimer(op) {
-        if (op && !['activity', 'lesson'].includes(op))
-          throw new Error('this is not a valid parameter')
-
-        if (op === 'activity' && this.activityDuration > 0) {
-          window.clearInterval(this.activityDuration)
-        } else if (op === 'lesson') {
-          window.clearInterval(this.lessonDuration)
-        } else {
-          clearInterval(this.fullInterval)
-        }
-      },
-      formatTime(seconds) {
-        let t = new Date(null)
-        t.setSeconds(seconds)
-      }
-    }
-  })
-}