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

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/AppCompAudio.vue

@@ -0,0 +1,234 @@
+<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" :alt="mAlt" />
+        <div class="audio-media">
+          <h5>{{ mTitle }}</h5>
+          <div class="audio-media-player">
+            <audio
+              :id="id"
+              ref="m-audio"
+              @loadedmetadata="updateMediaData($event)"
+            >
+              <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,
+      mAlt: this.audData.mAlt ? this.audData.mAlt : ' ',
+      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 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.$bus.$emit('update-media-duration')
+
+      //Should Check that the the media Element is unique im Media Liste
+      const { mElements } = this.getCurrentPage
+
+      const hasEntry = mElements.findLastIndex(
+        (media) => media.id === e.target.id
+      )
+
+      if (hasEntry !== -1) {
+        // Should report Error to Console and Component template about this media
+        const errmsg = `Cet élément a le même ID 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 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.target).then(() => {
+        this.isSet = true
+        this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
+      })
+    },
+    errorHandling(e) {
+      this.hasSourceLoadingError = true
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.audio-card {
+  // --primary100: #deeff8;
+  // --primary700: #005c8d;
+  position: relative;
+  border-radius: 4px;
+  padding: 24px;
+  max-width: 600px;
+  box-shadow: 0px 3px 6px rgb(26 25 25 / 0.16);
+  .audio-img {
+    width: 128px;
+    margin-right: 24px;
+  }
+  .audio-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 24px;
+    .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;
+  }
+}
+</style>