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

package/src/components/AppBasePopover.vue

@@ -0,0 +1,41 @@
+<!--
+ @ Description: This component is used to create a popover that is accessible via keyboard navigation (tab + space/enter)
+-->
+<template>
+  <v-tooltip
+    ref="tooltip"
+    v-bind="$attrs"
+    v-model="show"
+    transition="false"
+    :open-on-click="true"
+    :persistent="false"
+  >
+    <slot></slot>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'AppBasePopover',
+  data() {
+    return {
+      show: false,
+      alertContainer: null
+    }
+  },
+  watch: {
+    show: {
+      handler(newValue) {
+        if (newValue) {
+          const content = this.$refs.tooltip.contentEl.textContent
+          this.alertContainer.textContent = ''
+          this.alertContainer.textContent = content
+        }
+      }
+    }
+  },
+  mounted() {
+    this.alertContainer = document.getElementById('hiddenAlertContainer')
+  }
+}
+</script>

package/src/components/AppBaseSkeleton.vue

@@ -0,0 +1,66 @@
+<!--
+ @ Description: This component is used to display skeleton screens while content is loading.
+
+-->
+
+<template>
+  <div class="skeleton-wrapper">
+    <div v-if="skeletonText" class="skeleton-text">{{ skeletonText }}</div>
+    <div v-for="line in skeletonLines" :key="line" class="skeleton-line" />
+
+    <div v-show="skeletonType == `quiz-choix`">
+      <v-skeleton-loader
+        type="heading, avatar,paragraph,
+      "
+      ></v-skeleton-loader>
+      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
+      <v-skeleton-loader type="avatar,paragraph"></v-skeleton-loader>
+    </div>
+
+    <div v-show="skeletonType == `quiz-texte`">
+      <v-skeleton-loader
+        type="heading, image,
+      "
+      ></v-skeleton-loader>
+    </div>
+
+    <div v-show="skeletonType == `quiz-recall`">
+      <v-skeleton-loader type="heading, paragraph,image"></v-skeleton-loader>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppBaseSkeleton',
+  props: {
+    skeletonLines: { type: Number, default: 0 }, //number of skeleton lines to display
+    skeletonText: { type: String, default: `` }, //number of skeleton lines to display
+    skeletonType: { type: String, default: `line` }
+  }
+}
+</script>
+
+<style lang="scss">
+.skeleton-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+}
+skeleton-text {
+  font-size: larger;
+}
+.skeleton-line {
+  height: 25px;
+  background: linear-gradient(90deg, #ddd, #eee, #ddd);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.2s infinite linear;
+  border-radius: 4px;
+}
+@keyframes skeleton-loading {
+  to {
+    background-position-x: -200%;
+  }
+}
+</style>

package/src/components/AppCompAudio.vue

@@ -0,0 +1,256 @@
+<template>
+  <section
+    :id="'audio_' + id"
+    ref="$media-container"
+    class="__media-container"
+    aria-label="Audio"
+  >
+    <!--Integration error display-->
+    <app-base-error-display
+      v-if="hasErr.length"
+      :error-group="'component'"
+      :error-title="`ERREUR: COMPOSANT D'AUDIO`"
+      :errors-list="hasErr"
+    />
+
+    <div v-else class="audio-card">
+      <!--Waiting and loading error -- skeleton-->
+      <div
+        v-if="isLoading || hasSourceLoadingError"
+        class="skeleton audio"
+        :class="{ isloading: isLoading, error: hasSourceLoadingError }"
+      >
+        <p v-if="hasSourceLoadingError">
+          Une erreur s'est produite lors du chargement du média, veuillez
+          réessayer
+        </p>
+      </div>
+      <!--Audio content-->
+      <div v-show="!isLoading && !hasSourceLoadingError" class="audio-content">
+        <img
+          v-if="mPoster"
+          class="audio-img"
+          :src="mPoster"
+          aria-hidden="true"
+        />
+        <div class="audio-media">
+          <span>{{ mTitle }}</span>
+          <div class="audio-media-player">
+            <audio
+              :id="id"
+              ref="m-audio"
+              @loadedmetadata="updateMediaDataAudio($event.target)"
+            >
+              <source
+                v-for="(aSource, index) in mSources"
+                :key="index"
+                :src="aSource.src"
+                :type="aSource.type ? `audio/${aSource.type}` : 'audio/mp3'"
+                @error="errorHandling($event)"
+              />
+            </audio>
+            <app-comp-play-bar-next
+              v-if="$audElement"
+              :ref="`plyr_${id}`"
+              :media-to-play="$audElement"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="audio-transcript">
+        <v-expansion-panels class="audio">
+          <v-expansion-panel>
+            <v-expansion-panel-title>
+              {{ $t('text.transcript') }}
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <div v-html="mTranscript"></div>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { validateAudioData } from '../shared/validators'
+import AppCompPlayBarNext from './AppCompPlayBarNext.vue'
+
+export default {
+  components: { AppCompPlayBarNext },
+  props: {
+    audData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      id: this.audData.id,
+      mTitle: this.audData.mTitle,
+      mSources: this.audData.mSources,
+      mTranscript: this.audData.mTranscript,
+      mPoster: this.audData.mPoster,
+      isSet: false,
+      hasSourceLoadingError: false,
+      hasErr: validateAudioData(this.audData)
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, ['getCurrentBrowser', 'getCurrentPage']),
+    $audElement() {
+      if (!this.isSet) return null
+      return {
+        id: this.id,
+        mTranscript: null,
+        mType: 'audio',
+        mSubtitles: null,
+        mElement: this.$refs['m-audio']
+      }
+    },
+    //MediaElement
+    mediaElement() {
+      if (!this.$audElement) return null
+      const { mElement } = this.$audElement
+      let thisElement = null
+
+      if (!mElement) return null
+      thisElement = mElement
+
+      return thisElement
+    },
+    //Loading display
+    isLoading() {
+      if (!this.isSet && !this.hasSourceLoadingError) return true
+      else return false
+    }
+  },
+  mounted() {},
+  beforeUnmount() {},
+
+  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
+    },
+    /**
+     * @description update the information for the mediaElement in the store
+     * @param {htmlElement} e
+     * @fires update-page to AppBaseModule.vue
+     */
+    updateMediaDataAudio(e) {
+      //dispatch loading status of for this component
+      this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', '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', 'AppCompAudioPlayer', 'ready')
+        return this.hasErr.push(errmsg)
+      }
+
+      this.updateCurrentMediaElements(e).then(() => {
+        this.isSet = true
+        this.$bus.$emit('set-comp-status', 'AppCompAudioPlayer', 'ready')
+      })
+    },
+    errorHandling(e) {
+      this.hasSourceLoadingError = true
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.audio-card {
+  position: relative;
+  border-radius: 4px;
+  padding: 24px;
+  min-width: 425px;
+  max-width: 600px;
+  box-shadow: 0px 3px 6px rgb(26 25 25 / 0.16);
+
+  @media screen and (max-width: 1000px) {
+    display: flex;
+    flex-direction: column;
+  }
+  .audio-img {
+    width: 128px;
+    margin-right: 24px;
+  }
+  .audio-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 24px;
+
+    @media screen and (max-width: 1000px) {
+      display: flex;
+      flex-direction: column;
+    }
+    .audio-media {
+      width: 100%;
+      h5 {
+        margin-bottom: 16px;
+      }
+    }
+  }
+  .audio-transcript {
+    padding-top: 24px;
+  }
+  .audio-transcript-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .audio-transcript-button {
+    height: 52px;
+    width: 52px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      max-width: 18px;
+      height: 10.25px;
+    }
+    &.rotate svg {
+      transition: transform 0.5s;
+      transform-origin: center;
+    }
+    &.rotate.click svg {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.skeleton {
+  &.audio {
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+}
+
+.debug {
+  &:focus {
+    border: 5px solid rgba(#fff, 0.05);
+  }
+}
+</style>