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

package/src/components/AppCompInputTextToFillDropdown.vue

@@ -1,255 +0,0 @@
-<template>
-  <div>
-    <div
-      v-for="singleDropdown in theInputData"
-      :key="singleDropdown.id"
-      class="texteatrou"
-    >
-      <span v-if="!singleDropdown.type" v-html="singleDropdown.content"></span>
-      <label
-        :for="`${inputDataId}_${singleDropdown.id}-champ`"
-        style="display:none;"
-      >
-        {{ $t('text.quiz') }}
-      </label>
-      <b-form-select
-        v-if="singleDropdown.type == 'dropdown'"
-        :id="`${inputDataId}_${singleDropdown.id}-champ`"
-        v-model="quizSelectedValue[singleDropdown.id]"
-        :class="classInput(singleDropdown.id)"
-        :options="singleDropdown.option"
-        :disabled="quizCompleted"
-        :aria-describedby="`${inputDataId}_${singleDropdown.id}-msg-erreur`"
-      ></b-form-select>
-      <span
-        :id="`${inputDataId}_${singleDropdown.id}-msg-erreur`"
-        class="sr-only"
-      >
-        {{ messageAccessibility(singleDropdown.id) }}
-      </span>
-    </div>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-export default {
-  name: 'AppCompInputTextToFillDropdown',
-  mixins: [$extendsQuiz],
-
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    textBase: {
-      type: String,
-      default: ''
-    },
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: Array,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizSelected: {
-      type: Array,
-      default: () => []
-    }, //use to pass the value of the input
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-
-  data() {
-    return {
-      quizSelectedValue: [], //not using quizSelected because quizSelected is a prop
-      theInputData: [] //to create the list of drop down and text mixed togeter
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizSelectedValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to pass the value from AppCompQuiz
-     */
-    quizSelected(newValue) {
-      this.quizSelectedValue = newValue
-    }
-  },
-
-  mounted() {
-    if (this.solution !== null) {
-      this.solution.sort(function(a, b) {
-        return a.question_id - b.question_id
-      })
-    }
-    //to show the defaultAnswer
-    const defaultAnswer = {
-      value: null,
-      disabled: true,
-      text: this.$t('message.first_option_dropdown')
-    }
-    let selectedChoices = []
-    for (let i = 0; i < this.inputData.length; i++) {
-      let singleDropdown = {}
-      if (this.shuffleAnswers) {
-        singleDropdown = this.inputData[i]
-        singleDropdown[
-          Object.keys(this.inputData[i])[0].toString()
-        ] = this.shuffleArray(Object.values(this.inputData[i])[0])
-      } else {
-        singleDropdown = this.inputData[i]
-      }
-      for (
-        let index = 0;
-        index < Object.values(singleDropdown)[0].length;
-        index++
-      ) {
-        const element = Object.values(singleDropdown)[0][index]
-        if (
-          element.text &&
-          element.text == this.$t('message.first_option_dropdown')
-        ) {
-          Object.values(singleDropdown)[0].splice(index, 1)
-        }
-      }
-      Object.values(singleDropdown)[0].unshift(defaultAnswer)
-
-      selectedChoices.push(null)
-    }
-    if (this.quizSelected.length == 0) {
-      this.quizSelectedValue = selectedChoices
-    } else {
-      this.quizSelectedValue = this.quizSelected
-    }
-
-    this.createTextWithInput(this.textBase)
-  },
-
-  methods: {
-    /**
-     * @description create the object to genate the text and inputs
-     * @param {String} str the text with holes to fill
-     */
-    createTextWithInput(str) {
-      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-      let matchAll = str.split(regex)
-      let listInput = []
-      for (let i = 0; i < this.inputData.length; i++) {
-        const element = this.inputData[i]
-        listInput.push({ id: 't' + i, content: matchAll[i] })
-        listInput.push({
-          id: i,
-          type: 'dropdown',
-          option: Object.values(element)[0]
-        })
-      }
-      let lastItem = matchAll.length - 1
-      listInput.push({ id: 't' + lastItem, content: matchAll[lastItem] })
-      this.theInputData = listInput
-    },
-    /**
-     * @description used by the dropdown quiz
-     * @param {Array} answers what the user has answered
-     * @param {Array} solution the correct choices
-     * @returns {Boolean}
-     * @todo Add a catching for error if the 2 question_id dont match
-     */
-    compareSelectedAnswers(answers, solution) {
-      for (let index = 0; index < answers.length; index++) {
-        const elementAnswers = answers[index]
-        const elementSolution = solution[index]
-        if (elementAnswers.question_id == elementSolution.question_id) {
-          if (elementAnswers.reponse_id !== elementSolution.reponse_id) {
-            return false
-          }
-        } else {
-          return //if it return nothing there is a bug since this means the 2 question_id dont match
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description check if a values exists in a array
-     * @param {Array} array
-     * @param value
-     * @returns {Boolean}
-     */
-    containsValue(array, value) {
-      return array.includes(value)
-    },
-
-    /**
-     * @description shuffles an array used to randomized the option order if shuffleAnswers is true
-     * @param {Array} array
-     * @returns {Array}
-     */
-    shuffleArray(array) {
-      let newArray = []
-      let newArray2 = []
-
-      for (let i = 0; i < array.length; i++) {
-        const element = array[i]
-        //todo remove null values
-        newArray.push(element)
-      }
-      while (newArray.length > 0) {
-        let pos = Math.floor(newArray.length * Math.random())
-        newArray2.push(newArray[pos])
-        newArray.splice(pos, 1)
-      }
-      return newArray2
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-select {
-  &.custom-select {
-    background-image: inherit;
-
-    &:focus {
-      border-color: inherit;
-      box-shadow: inherit;
-    }
-  }
-}
-
-/***** style dev  *****/
-.texteatrou {
-  display: inline;
-}
-.texteatrou > select {
-  display: inline;
-  width: auto;
-}
-</style>

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>