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

package/src/components/AppCompInputAssociation.vue

@@ -1,332 +0,0 @@
-<template>
-  <div class="input-box">
-    <div style="display:flex">
-      <div
-        v-for="singleAssociationZone in inputData.zone_depots"
-        :key="singleAssociationZone.id"
-        :class="
-          `associationlist-${singleAssociationZone.id} ` +
-            classInput(singleAssociationZone.id)
-        "
-      >
-        <label
-          :for="`${inputDataId}_${singleAssociationZone.id}`"
-          v-html="singleAssociationZone.contenu.alt"
-        ></label>
-        <div
-          :class="
-            quizClickedZone == singleAssociationZone.id
-              ? 'quizZoneActive'
-              : 'quizZone'
-          "
-          @click="activateChoice(singleAssociationZone.id)"
-        >
-          <!--zone is img-->
-          <div
-            v-if="singleAssociationZone.contenu.type == 'img'"
-            class="quizZoneIsImg"
-          >
-            <img
-              :src="singleAssociationZone.contenu.affichage"
-              :alt="singleAssociationZone.contenu.alt"
-            />
-          </div>
-          <!--zone is text-->
-          <div
-            v-if="singleAssociationZone.contenu.type == 'str'"
-            class="quizZoneIsText"
-          >
-            <p v-html="singleAssociationZone.contenu.affichage"></p>
-          </div>
-          <!--selected item-->
-          <!---selected is img--->
-          <div
-            v-if="
-              quizAssociation[singleAssociationZone.id] &&
-                quizAssociation[singleAssociationZone.id] !== '' &&
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.type == 'img'
-            "
-            class="quizZoneWithImg"
-          >
-            <img
-              :src="
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.affichage
-              "
-              :alt="
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.alt
-              "
-            />
-          </div>
-          <!---selected is text--->
-          <div
-            v-if="
-              quizAssociation[singleAssociationZone.id] &&
-                quizAssociation[singleAssociationZone.id] !== '' &&
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.type == 'str'
-            "
-            class="quizZoneWithText"
-          >
-            <p
-              v-html="
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.affichage
-              "
-            ></p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--choices-->
-    <div
-      style="display:flex"
-      :class="quizClickedZone ? 'parentQuizChoicesActive' : 'parentQuizChoices'"
-    >
-      <div
-        v-for="singleAssociationChoice in inputData.choix_deplaceable"
-        :key="singleAssociationChoice.id"
-        :class="`associationlist-${singleAssociationChoice.id}`"
-      >
-        <label
-          :for="`${inputDataId}_${singleAssociationChoice.id}`"
-          v-html="singleAssociationChoice.contenu.alt"
-        ></label>
-        <div
-          class="quizAssociationChoice"
-          @click="assignValueToZone(singleAssociationChoice.id)"
-        >
-          <!---is img--->
-          <div
-            v-if="singleAssociationChoice.contenu.type == 'img'"
-            class="quizChoiceWithImg"
-          >
-            <img
-              :src="singleAssociationChoice.contenu.affichage"
-              :alt="singleAssociationChoice.contenu.alt"
-            />
-          </div>
-          <!---is text--->
-          <div
-            v-if="singleAssociationChoice.contenu.type == 'str'"
-            class="quizChoiceWithText"
-          >
-            <p v-html="singleAssociationChoice.contenu.affichage"></p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-export default {
-  mixins: [$extendsQuiz],
-
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Object,
-      default: () => {}
-    },
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: Object,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizAssociation: {
-      type: Object,
-      default: () => {}
-    }, //use to pass the value of the input
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-
-  data() {
-    return {
-      quizClickedZone: '', //for the id of the last clicked zone to assign the choice
-      quizAssociationValue: [] //not using quizAssociation because quizAssociation is a prop
-    }
-  },
-
-  computed: {
-    /**
-     * @description
-     *
-    quizZoneContent(zoneId) {
-      //check if zone is filled
-      if (zoneId == false) {
-        // check if zone has image
-
-      }
-      return zoneId
-    }*/
-  },
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizAssociationValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to pass the value from AppCompQuiz
-     */
-    quizAssociation(newValue) {
-      this.quizAssociationValue = newValue
-    }
-  },
-
-  mounted() {
-    let associatedChoices = []
-    for (let i = 0; i < this.inputData.length; i++) {
-      let singleAssociation
-      if (this.shuffleAnswers) {
-        singleAssociation = this.inputData[i]
-        //@todo shuffle
-        singleAssociation.option = this.shuffleArray(singleAssociation.option)
-      } else {
-        singleAssociation = this.inputData[i]
-      }
-    }
-    if (this.quizAssociation.length == 0) {
-      this.quizAssociationValue = associatedChoices
-    } else {
-      this.quizAssociationValue = this.quizAssociation
-    }
-  },
-
-  methods: {
-    /**
-     * @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}
-     * @todo redo shuffle
-     */
-    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
-    },
-
-    /**
-     * @description activates choices to assign to that zone
-     * @param {String} zoneId
-     */
-    activateChoice(zoneId) {
-      if (this.quizClickedZone == zoneId) {
-        this.quizClickedZone = ''
-      } else {
-        this.quizClickedZone = zoneId
-      }
-    },
-
-    /**
-     * @description remove current uses of value and assign value to quiz
-     * @param {String} choiceId
-     */
-    assignValueToZone(choiceId) {
-      if (this.quizClickedZone !== '' && choiceId !== '') {
-        //remove current uses of value
-        for (const singleKey in this.quizAssociationValue) {
-          if (
-            Object.hasOwnProperty.call(this.quizAssociationValue, singleKey)
-          ) {
-            const element = this.quizAssociationValue[singleKey]
-            if (element == choiceId) {
-              this.$set(this.quizAssociationValue, singleKey, '')
-            }
-          }
-        }
-        /*
-        let listKeys = Object.keys(this.quizAssociationValue)
-        for (let index = 0; index < listKeys.length; index++) {
-          if (this.quizAssociationValue[listKeys[index]] == choiceId) {
-            this.$set(this.quizAssociationValue, listKeys[index], '')
-          }
-        }*/
-        //assing value
-        this.$set(this.quizAssociationValue, this.quizClickedZone, choiceId)
-        //deactivate choices
-        this.quizClickedZone = ''
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-.quizZone,
-.quizZoneActive {
-  height: 300px;
-  width: 300px;
-  border: solid 1px;
-}
-
-.quizZone {
-  border-color: black;
-}
-.quizZoneActive {
-  border-color: red;
-}
-
-.parentQuizChoicesActive {
-  background: yellow;
-}
-
-.quizAssociationChoice {
-  height: 300px;
-  width: 300px;
-  border: solid black 1px;
-}
-</style>

package/src/components/AppCompMediaPlayer.vue

@@ -1,365 +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="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}`"
-      /> -->
-      <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="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"
-      class="anim-canvas"
-      :class="[animationType]"
-    >
-      <slot ref="animScene" name="drawingCanvas">
-        You have an animation to create
-      </slot>
-    </div>
-    <portal-target 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,
-      randKey: `kid_${Math.floor(Math.random() * 1001)}`,
-      fsHeigh: null,
-      isMedia: false
-    }
-  },
-  computed: {
-    ...mapGetters(['hasMediaElOrTimeline', 'getCurrentBrowser']),
-    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'
-      }
-    }
-  },
-  watch: {
-    media(val, oldVal) {
-      let mElement = this.$refs[this.media.mType]
-      if (oldVal === null && val !== oldVal) {
-        //this.$store.dispatch('updateAppStatus', 'loading')
-        //this.$store.dispatch('updateCurrentMediaElement', mElement)
-        //this.fecthFromServer(this.media.mSources)
-        // for (let m of this.media.mSources) {
-        //   this.checkRessource(m.src)
-        // }
-      }
-
-      /* 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)
-    }
-  },
-
-  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
-        })
-    }
-  }
-}
-</script>
-<style lang="scss">
-$widthVideo: 100%;
-$widthAudioAnimation: 100%;
-
-%animation {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: $widthVideo;
-  height: 100%;
-  z-index: 1;
-  overflow: hidden;
-}
-
-.app-media-player {
-  position: relative;
-  overflow: hidden;
-
-  &.AudioAnimation {
-    width: $widthAudioAnimation;
-    .anim-canvas {
-      @extend %animation;
-    }
-  }
-
-  &.FS,
-  &.animationOnly {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    video {
-      min-width: 100% !important;
-      min-height: 100% !important;
-      position: absolute !important;
-      top: 50% !important;
-      left: 50% !important;
-      transform: translate(-50%, -50%) !important;
-      z-index: 9;
-    }
-
-    .anim-canvas {
-      @extend %animation;
-    }
-  }
-
-  &.FS,
-  &.AudioAnimation {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    .anim-canvas {
-      @extend %animation;
-    }
-  }
-}
-
-video {
-  &:focus-visible {
-    outline-color: transparent;
-  }
-}
-</style>