fcad-core-dragon 2.0.0-beta.5 → 2.0.0-beta.6

package/src/components/AppCompSVGNext.vue

@@ -232,7 +232,6 @@ const defaultIconsList = [
     paths: [
       {
         d: 'M428.3,170.42c-9.35-21.99-22.82-41.99-39.68-58.91c-16.94-16.85-36.94-30.32-58.94-39.66	c-22.86-9.8-47.51-14.77-72.38-14.62c-24.88-0.17-49.53,4.79-72.4,14.59c-21.99,9.35-41.99,22.82-58.91,39.68	c-16.85,16.94-30.32,36.94-39.66,58.94c-9.8,22.86-14.78,47.51-14.62,72.38c-0.18,24.88,4.79,49.53,14.59,72.4	c9.35,21.99,22.82,41.99,39.68,58.91c16.94,16.85,36.94,30.32,58.94,39.66c22.86,9.8,47.51,14.77,72.38,14.62	c24.88,0.18,49.53-4.79,72.4-14.59c21.99-9.35,41.99-22.82,58.91-39.68c16.85-16.94,30.32-36.94,39.66-58.94	c9.8-22.86,14.78-47.51,14.62-72.38C443.07,217.94,438.1,193.29,428.3,170.42z M271.95,326.3c0.1,3.91-1.43,7.69-4.21,10.44	c-2.75,2.79-6.53,4.31-10.44,4.21c-3.91,0.1-7.69-1.43-10.44-4.21c-2.78-2.75-4.31-6.53-4.21-10.44v-83.03	c-0.1-3.91,1.43-7.69,4.21-10.44c2.75-2.78,6.53-4.31,10.44-4.21c3.91-0.1,7.69,1.43,10.44,4.21c2.78,2.75,4.31,6.53,4.21,10.44	V326.3z M268.54,190.64c-2.96,3-7.03,4.64-11.24,4.54v0.01c-4.21,0.1-8.28-1.54-11.24-4.55c-3-2.96-4.64-7.03-4.54-11.24	c-0.1-4.21,1.54-8.28,4.54-11.24c2.96-3,7.03-4.64,11.24-4.54c4.21-0.1,8.28,1.54,11.24,4.54c3,2.96,4.64,7.03,4.54,11.24	C273.18,183.61,271.54,187.68,268.54,190.64z'
-        //d: 'M428.3,170.42c-9.35-21.99-22.82-41.99-39.68-58.91c-16.94-16.85-36.94-30.32-58.94-39.66	c-22.86-9.8-47.51-14.77-72.38-14.62c-24.88-0.17-49.53,4.79-72.4,14.59c-21.99,9.35-41.99,22.82-58.91,39.68	c-16.85,16.94-30.32,36.94-39.66,58.94c-9.8,22.86-14.78,47.51-14.62,72.38c-0.18,24.88,4.79,49.53,14.59,72.4	c9.35,21.99,22.82,41.99,39.68,58.91c16.94,16.85,36.94,30.32,58.94,39.66c22.86,9.8,47.51,14.77,72.38,14.62	c24.88,0.18,49.53-4.79,72.4-14.59c21.99-9.35,41.99-22.82,58.91-39.68c16.85-16.94,30.32-36.94,39.66-58.94	c9.8-22.86,14.78-47.51,14.62-72.38C443.07,217.94,438.1,193.29,428.3,170.42z M271.95,326.3c0.1,3.91-1.43,7.69-4.21,10.44	c-2.75,2.79-6.53,4.31-10.44,4.21c-3.91,0.1-7.69-1.43-10.44-4.21c-2.78-2.75-4.31-6.53-4.21-10.44v-83.03	c-0.1-3.91,1.43-7.69,4.21-10.44c2.75-2.78,6.53-4.31,10.44-4.21c3.91-0.1,7.69,1.43,10.44,4.21c2.78,2.75,4.31,6.53,4.21,10.44	V326.3z M268.54,190.64c-2.96,3-7.03,4.64-11.24,4.54v0.01c-4.21,0.1-8.28-1.54-11.24-4.55c-3-2.96-4.64-7.03-4.54-11.24	c-0.1-4.21,1.54-8.28,4.54-11.24c2.96-3,7.03-4.64,11.24-4.54c4.21-0.1,8.28,1.54,11.24,4.54c3,2.96,4.64,7.03,4.54,11.24	C273.18,183.61,271.54,187.68,268.54,190.64z'
       }
     ]
   },
@@ -248,11 +247,11 @@ const defaultIconsList = [
   },
   {
     id: 'link-icon',
-    viewBox: '0 0 39 36',
+    viewBox: '0 0 13.7 6.5',
     paths: [
       {
         id: 'ico_link',
-        d: 'M11.2,25.5c-2,0-4-0.8-5.4-2.2c-1.5-1.4-2.3-3.4-2.2-5.4c0-2,0.8-4,2.2-5.4	c1.4-1.5,3.4-2.3,5.4-2.2h5.1c0.3,0,0.7,0.1,0.9,0.4c0.2,0.2,0.4,0.6,0.4,0.9c0,0.3-0.1,0.7-0.4,0.9c-0.2,0.2-0.6,0.4-0.9,0.4h-5.1	c-1.4,0-2.7,0.5-3.6,1.5c-1,0.9-1.5,2.3-1.5,3.6c0,1.4,0.5,2.7,1.5,3.6c0.9,1,2.3,1.5,3.6,1.5h5.1c0.3,0,0.7,0.1,0.9,0.4	c0.2,0.2,0.4,0.6,0.4,0.9c0,0.3-0.1,0.7-0.4,0.9c-0.2,0.2-0.6,0.4-0.9,0.4L11.2,25.5z M14.5,19.1c-0.3,0-0.7-0.1-0.9-0.4	c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.3,0.1-0.7,0.4-0.9c0.2-0.2,0.6-0.4,0.9-0.4h10.1c0.3,0,0.7,0.1,0.9,0.4c0.2,0.2,0.4,0.6,0.4,0.9	c0,0.3-0.1,0.7-0.4,0.9c-0.2,0.2-0.6,0.4-0.9,0.4H14.5z M22.8,25.5c-0.3,0-0.7-0.1-0.9-0.4c-0.2-0.2-0.4-0.6-0.4-0.9	c0-0.3,0.1-0.7,0.4-0.9c0.2-0.2,0.6-0.4,0.9-0.4h5.1c1.4,0,2.7-0.5,3.6-1.5c1-0.9,1.5-2.3,1.5-3.6c0-1.4-0.5-2.7-1.5-3.6	c-0.9-1-2.3-1.5-3.6-1.5h-5.1c-0.3,0-0.7-0.1-0.9-0.4c-0.2-0.2-0.4-0.6-0.4-0.9c0-0.3,0.1-0.7,0.4-0.9c0.2-0.2,0.6-0.4,0.9-0.4h5.1	c2,0,4,0.8,5.4,2.2c1.5,1.4,2.3,3.4,2.2,5.4c0,2-0.8,4-2.2,5.4c-1.4,1.5-3.4,2.3-5.4,2.2L22.8,25.5z'
+        d: 'M3.3 6.5c-.9 0-1.7-.3-2.3-1-.6-.6-1-1.4-1-2.3S.3 1.6 1 1c.6-.6 1.4-1 2.3-1h2.2c.2 0 .3 0 .4.2.1.1.2.2.2.4s0 .3-.2.4c-.1.1-.2.2-.4.2H3.3q-.9 0-1.5.6t-.6 1.5c0 .9.2 1.1.6 1.5q.6.6 1.5.6h2.2c.2 0 .3 0 .4.2.1.1.2.2.2.4s0 .3-.2.4c-.1.1-.2.2-.4.2H3.3Zm1.4-2.7c-.2 0-.3 0-.4-.2-.1-.1-.2-.2-.2-.4s0-.3.2-.4c.1-.1.2-.2.4-.2H9c.2 0 .3 0 .4.2.1.1.2.2.2.4s0 .3-.2.4c-.1.1-.2.2-.4.2zm3.5 2.7c-.2 0-.3 0-.4-.2-.1-.1-.2-.2-.2-.4s0-.3.2-.4c.1-.1.2-.2.4-.2h2.2q.9 0 1.5-.6t.6-1.5c0-.9-.2-1.1-.6-1.5q-.6-.6-1.5-.6H8.2c-.2 0-.3 0-.4-.2-.1-.1-.2-.2-.2-.4s0-.3.2-.4c.1-.1.2-.2.4-.2h2.2c.9 0 1.7.3 2.3 1 .6.6 1 1.4 1 2.3s-.3 1.7-1 2.3c-.6.6-1.4 1-2.3 1z'
       }
     ]
   },

package/src/components/AppCompSettingsMenu.vue

@@ -1,172 +1,172 @@
-<template>
-  <b-sidebar
-    id="sidebar-settings"
-    title="Settings"
-    right
-    shadow
-    backdrop
-    no-header
-    @hidden="onClose"
-  >
-    <div class="pl-3 pr-3">
-      <b-form-group :label="$t('user_settings.title')">
-        <b-form-checkbox
-          v-for="(setting, index) in Object.entries(settingsSelected)"
-          :key="index"
-          v-model="settingsSelected[setting[0]]"
-          :aria-describedby="ariaDescribedby"
-          :name="`parameter-${setting[0]}`"
-          :text-field="$t(`user_settings.${setting[0]}`)"
-          switch
-          stacked
-          size="lg"
-          @change="onSettingsChange"
-        >
-          <span>{{ $t(`user_settings.${setting[0]}`) }}</span>
-        </b-form-checkbox>
-      </b-form-group>
-      <app-base-button
-        v-b-toggle.sidebar-settings
-        class="float-right btn-primary"
-        :title="$t('user_settings.close')"
-      >
-        {{ $t('user_settings.close') }}
-      </app-base-button>
-    </div>
-  </b-sidebar>
-</template>
-
-<script>
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import AppBaseButton from './AppBaseButton.vue'
-
-export default {
-  components: { AppBaseButton },
-  props: {},
-  data() {
-    return {
-      settingsSelected: {},
-      settingsNeedUpdate: false
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getApplicationSettings',
-      'getModuleInfo',
-      'getUserInteraction',
-      'getConnectionInfo',
-      'onboardingEnabled'
-    ]),
-    settingsOptions() {
-      return this.settingsOptionsELPlus
-    }
-  },
-  watch: {
-    getApplicationSettings: {
-      immediate: true,
-      deep: true,
-      handler() {
-        this.getAppSettingsInStore()
-      }
-    }
-  },
-  created() {
-    setTimeout(() => this.getAppSettingsInStore(), 1700)
-
-    this.$bus.$on('save-settings', (settings) => {
-      this.saveSettings(settings)
-    })
-  },
-  methods: {
-    ...mapActions(useAppStore, [
-      'setApplicationSettings',
-      'updateUserMetaData'
-    ]),
-    getAppSettingsInStore() {
-      this.settingsSelected = { ...this.getApplicationSettings }
-    },
-
-    //Save user settings to the store
-    onSettingsChange() {
-      this.settingsNeedUpdate = true
-      this.saveSettingsToStore(this.settingsSelected)
-    },
-    saveSettingsToStore(settings) {
-      this.setApplicationSettings(settings)
-    },
-    /**
-     * @description Save the user preferred settings to vue store and LRS or local store:
-     * LRS: Send a XAPI Statement to the LRS
-     * IndexedDB: Set a new Key for preferred settings in the userInteraction in store
-     * Update current value of settings
-     * @param {Object} appSettings - group of application settings {autoplay, subtitles, onboarding}
-     *
-     */
-    saveSettings(appSettings) {
-      this.saveSettingsToStore(appSettings) //save to store
-
-      if (
-        this.getModuleInfo.packageType === 'xapi' &&
-        this.getConnectionInfo &&
-        this.getConnectionInfo.remote
-      ) {
-        let text
-        //Defining the text to display for stmt description and definition
-        switch (this.$i18n.locale) {
-          case 'fr':
-            if (this.getModuleInfo.courseID)
-              text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
-            else text = `Le ${this.getModuleInfo.id}`
-            break
-          case 'en':
-            if (this.getModuleInfo.courseID)
-              text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
-            else text = `The ${this.getModuleInfo.id}`
-            break
-        }
-        //Creating custom statement
-        const stmt = {
-          id: (() => {
-            return this.getModuleInfo.courseID
-              ? this.getModuleInfo.courseID
-              : null
-          })(),
-          verb: 'preferred',
-          definition: text,
-          description: text,
-          extensions: [
-            {
-              id: 'application-settings',
-              content: {
-                userSettings: { ...appSettings }
-              }
-            }
-          ]
-        }
-
-        setTimeout(() => {
-          this.$bus.$emit('send-xapi-statement', stmt) //send xapi statement
-        }, 1000)
-      } else {
-        this.$set(this.getUserInteraction, 'userSettings', appSettings) // adding the usersettings to user Interaction to save to save to the local DB
-        this.updateUserMetaData(this.getUserInteraction) //force update of the userInteraction to ensure saving of settings in local DB
-      }
-
-      //update sidebar data
-      this.getAppSettingsInStore()
-    },
-
-    /**
-     * @description -Action to perform when the sidebar closed- will require saving when changing occurred
-     */
-    onClose() {
-      if (this.settingsNeedUpdate) {
-        this.saveSettingsToStore(this.settingsSelected)
-        this.saveSettings(this.getApplicationSettings)
-        this.settingsNeedUpdate = false
-      }
-    }
-  }
-}
-</script>
+<template>
+  <b-sidebar
+    id="sidebar-settings"
+    title="Settings"
+    right
+    shadow
+    backdrop
+    no-header
+    @hidden="onClose"
+  >
+    <div class="pl-3 pr-3">
+      <b-form-group :label="$t('user_settings.title')">
+        <b-form-checkbox
+          v-for="(setting, index) in Object.entries(settingsSelected)"
+          :key="index"
+          v-model="settingsSelected[setting[0]]"
+          :aria-describedby="ariaDescribedby"
+          :name="`parameter-${setting[0]}`"
+          :text-field="$t(`user_settings.${setting[0]}`)"
+          switch
+          stacked
+          size="lg"
+          @change="onSettingsChange"
+        >
+          <span>{{ $t(`user_settings.${setting[0]}`) }}</span>
+        </b-form-checkbox>
+      </b-form-group>
+      <app-base-button
+        v-b-toggle.sidebar-settings
+        class="float-right btn-primary"
+        :title="$t('user_settings.close')"
+      >
+        {{ $t('user_settings.close') }}
+      </app-base-button>
+    </div>
+  </b-sidebar>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import AppBaseButton from './AppBaseButton.vue'
+
+export default {
+  components: { AppBaseButton },
+  props: {},
+  data() {
+    return {
+      settingsSelected: {},
+      settingsNeedUpdate: false
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getApplicationSettings',
+      'getModuleInfo',
+      'getUserInteraction',
+      'getConnectionInfo',
+      'onboardingEnabled'
+    ]),
+    settingsOptions() {
+      return this.settingsOptionsELPlus
+    }
+  },
+  watch: {
+    getApplicationSettings: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.getAppSettingsInStore()
+      }
+    }
+  },
+  created() {
+    setTimeout(() => this.getAppSettingsInStore(), 1700)
+
+    this.$bus.$on('save-settings', (settings) => {
+      this.saveSettings(settings)
+    })
+  },
+  methods: {
+    ...mapActions(useAppStore, [
+      'setApplicationSettings',
+      'updateUserMetaData'
+    ]),
+    getAppSettingsInStore() {
+      this.settingsSelected = { ...this.getApplicationSettings }
+    },
+
+    //Save user settings to the store
+    onSettingsChange() {
+      this.settingsNeedUpdate = true
+      this.saveSettingsToStore(this.settingsSelected)
+    },
+    saveSettingsToStore(settings) {
+      this.setApplicationSettings(settings)
+    },
+    /**
+     * @description Save the user preferred settings to vue store and LRS or local store:
+     * LRS: Send a XAPI Statement to the LRS
+     * IndexedDB: Set a new Key for preferred settings in the userInteraction in store
+     * Update current value of settings
+     * @param {Object} appSettings - group of application settings {autoplay, subtitles, onboarding}
+     *
+     */
+    saveSettings(appSettings) {
+      this.saveSettingsToStore(appSettings) //save to store
+
+      if (
+        this.getModuleInfo.packageType === 'xapi' &&
+        this.getConnectionInfo &&
+        this.getConnectionInfo.remote
+      ) {
+        let text
+        //Defining the text to display for stmt description and definition
+        switch (this.$i18n.locale) {
+          case 'fr':
+            if (this.getModuleInfo.courseID)
+              text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
+            else text = `Le ${this.getModuleInfo.id}`
+            break
+          case 'en':
+            if (this.getModuleInfo.courseID)
+              text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
+            else text = `The ${this.getModuleInfo.id}`
+            break
+        }
+        //Creating custom statement
+        const stmt = {
+          id: (() => {
+            return this.getModuleInfo.courseID
+              ? this.getModuleInfo.courseID
+              : null
+          })(),
+          verb: 'preferred',
+          definition: text,
+          description: text,
+          extensions: [
+            {
+              id: 'application-settings',
+              content: {
+                userSettings: { ...appSettings }
+              }
+            }
+          ]
+        }
+
+        setTimeout(() => {
+          this.$bus.$emit('send-xapi-statement', stmt) //send xapi statement
+        }, 1000)
+      } else {
+        this.$set(this.getUserInteraction, 'userSettings', appSettings) // adding the usersettings to user Interaction to save to save to the local DB
+        this.updateUserMetaData(this.getUserInteraction) //force update of the userInteraction to ensure saving of settings in local DB
+      }
+
+      //update sidebar data
+      this.getAppSettingsInStore()
+    },
+
+    /**
+     * @description -Action to perform when the sidebar closed- will require saving when changing occurred
+     */
+    onClose() {
+      if (this.settingsNeedUpdate) {
+        this.saveSettingsToStore(this.settingsSelected)
+        this.saveSettings(this.getApplicationSettings)
+        this.settingsNeedUpdate = false
+      }
+    }
+  }
+}
+</script>

package/src/components/AppCompVideoPlayer.vue

@@ -40,7 +40,7 @@
           :id="id"
           ref="m-video"
           :poster="vidPoster"
-          @loadedmetadata="updateMediaData($event)"
+          @loadedmetadata="updateMediaDataVideo($event.target)"
         >
           <source
             v-for="(aSource, index) in vidSources"
@@ -155,6 +155,17 @@ export default {
 
   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
+    },
     errorHandling(e) {
       this.hasSourceLoadingError = true
     },
@@ -175,24 +186,15 @@ export default {
      * @param {htmlElement} e
      * @fires update-page to AppBaseModule.vue
      */
-    updateMediaData(e) {
-      //dispatch loading status of for this component
-
+    updateMediaDataVideo(e) {
       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.`
+      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 in your media elements`,
+          `%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;'
         )
 
@@ -200,7 +202,7 @@ export default {
         return this.hasErr.push(errmsg)
       }
 
-      this.updateCurrentMediaElements(e.target).then(() => {
+      this.updateCurrentMediaElements(e).then(() => {
         this.isSet = true
         this.$bus.$emit('set-comp-status', 'AppCompMediaPlayer', 'ready')
       })