fcad-core-dragon 2.1.0 → 2.1.2

package/src/components/AppCompAudio.vue

@@ -1,256 +1,261 @@
-<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>
+<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'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  components: { AppCompPlayBarNext },
+  props: {
+    audData: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  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>