@saooti/octopus-sdk 31.0.24 → 31.0.25

package/README.md

@@ -600,3 +600,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.22 Merge 30
  * 31.0.23 Qr Code option noir
  * 31.0.24 Amélioration accessibilité
+ * 31.0.25 Erreur audioUrl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.24",
+  "version": "31.0.25",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/display/categories/CategoryList.vue

@@ -4,12 +4,12 @@
     class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone category-list"
   >
     <div
-      id="category-list-container"
+      ref="categoryListContainer"
       class="category-list-container"
     >
       <button
         v-for="category in categories"
-        :id="'category' + category.id"
+        :ref="'category' + category.id"
         :key="category.id"
         class="category-item text-dark bg-white"
         @click="checkIfFilter(category)"
@@ -144,14 +144,14 @@ export default defineComponent({
       this.$store.commit('filterIab',category);
     },
     resizeWindow(): void {
-      const categoryList = document.getElementById('category-list-container');
+      const categoryList = (this.$refs.categoryListContainer as HTMLElement);
       if(null === categoryList){
         return;
       }
       categoryList.style.justifyContent = 'flex-start';
       this.hidenCategories.length = 0;
       this.categories.forEach((element: Category) => {
-        const el = document.getElementById('category' + element.id);
+        const el = (this.$refs['category' + element.id] as Array<HTMLElement>)[0];
         if (!el) return;
         const parent = el.parentElement;
         if (parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {

package/src/components/display/emission/EmissionItem.vue

@@ -28,12 +28,12 @@
           >{{ emission.name }}
         </div>
         <div
-          :id="'description-emission-container-' + emission.emissionId"
+          ref="descriptionEmissionContainer"
           class="emission-description htms-wysiwyg-content"
         >
           <!-- eslint-disable vue/no-v-html -->
           <div
-            :id="'description-emission-' + emission.emissionId"
+            ref="descriptionEmission"
             v-html="urlify(emission.description|| '')"
           />
         <!-- eslint-enable -->
@@ -108,12 +108,8 @@ export default defineComponent({
     this.hasPodcast();
   },
   mounted() {
-    const emissionDesc = document.getElementById(
-      'description-emission-' + this.emission.emissionId
-    );
-    const emissionDescContainer = document.getElementById(
-      'description-emission-container-' + this.emission.emissionId
-    );
+    const emissionDesc = (this.$refs.descriptionEmission as HTMLElement);
+    const emissionDescContainer = (this.$refs.descriptionEmissionContainer as HTMLElement);
     if (
       null !== emissionDesc && null !== emissionDescContainer && 
       emissionDesc.clientHeight > emissionDescContainer.clientHeight

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -36,12 +36,12 @@
           {{ emission.name }}
         </div>
         <div
-          :id="'description-emission-container-' + emission.emissionId"
+          ref="descriptionEmissionContainer"
           class="emission-description html-wysiwyg-content"
         >
           <!-- eslint-disable vue/no-v-html -->
           <div
-            :id="'description-emission-' + emission.emissionId"
+            ref="descriptionEmission"
             v-html="urlify(emission.description)"
           />
           <!-- eslint-enable -->
@@ -79,12 +79,12 @@
               {{ p.title }}
             </div>
             <div
-              :id="'description-podcast-container-' + p.podcastId"
+              :ref="'descriptionPodcastContainer'+ p.podcastId"
               class="emission-description html-wysiwyg-content"
             >
               <!-- eslint-disable vue/no-v-html -->
               <div
-                :id="'description-podcast-' + p.podcastId"
+                :ref="'descriptionPodcast'+ p.podcastId"
                 v-html="urlify(p.description)"
               />
               <!-- eslint-enable -->
@@ -195,12 +195,8 @@ export default defineComponent({
     this.loadPodcasts();
   },
   mounted() {
-    const emissionDesc = document.getElementById(
-      'description-emission-' + this.emission.emissionId
-    );
-    const emissionDescContainer = document.getElementById(
-      'description-emission-container-' + this.emission.emissionId
-    );
+    const emissionDesc = (this.$refs.descriptionEmission as HTMLElement);
+    const emissionDescContainer = (this.$refs.descriptionEmissionContainer as HTMLElement);
     if (
       null !== emissionDesc && null !== emissionDescContainer &&
       emissionDesc.clientHeight > emissionDescContainer.clientHeight
@@ -221,12 +217,8 @@ export default defineComponent({
       this.podcasts = data.result;
       this.$nextTick(() => {
       for (let index = 0, len = this.podcasts.length; index < len; index++) {
-        const podcastDesc = document.getElementById(
-          'description-podcast-' + this.podcasts[index].podcastId
-        );
-        const podcastDescContainer = document.getElementById(
-          'description-podcast-container-' + this.podcasts[index].podcastId
-        );
+        const podcastDesc = (this.$refs['descriptionPodcast'+this.podcasts[index].podcastId] as Array<HTMLElement>)[0];
+        const podcastDescContainer = (this.$refs['descriptionPodcastContainer'+this.podcasts[index].podcastId] as Array<HTMLElement>)[0];
         if (
           null !== podcastDesc && null !== podcastDescContainer &&
           podcastDesc.clientHeight > podcastDescContainer.clientHeight

package/src/components/display/live/LiveItem.vue

@@ -66,12 +66,12 @@
         {{ live.emission.name }}
       </router-link>
       <div
-        :id="'description-live-container-' + live.podcastId"
+        ref="descriptionLiveContainer"
         class="live-description-container html-wysiwyg-content"
       >
         <!-- eslint-disable vue/no-v-html -->
         <div
-          :id="'description-live-' + live.podcastId"
+          ref="descriptionLive"
           v-html="urlify(description)"
         />
         <!-- eslint-enable -->
@@ -251,12 +251,8 @@ export default defineComponent({
         if(!this.live){
           return;
         }
-        const liveDesc = document.getElementById(
-          'description-live-' + this.live.podcastId
-        );
-        const liveDescContainer = document.getElementById(
-          'description-live-container-' + this.live.podcastId
-        );
+        const liveDesc = (this.$refs.descriptionLive as HTMLElement);
+        const liveDescContainer = (this.$refs.descriptionLiveContainer as HTMLElement);
         if (
           null !== liveDesc && null !== liveDescContainer && 
           liveDesc.clientHeight > liveDescContainer.clientHeight

package/src/components/display/participant/ParticipantItem.vue

@@ -26,12 +26,12 @@
         >{{ name }}
       </div>
       <div
-        :id="'description-participant-container-' + participant.participantId"
+        ref="descriptionParticipantContainer"
         class="participant-description html-wysiwyg-content"
       >
         <!-- eslint-disable vue/no-v-html -->
         <div
-          :id="'description-participant-' + participant.participantId"
+          ref="descriptionParticipant"
           v-html="urlify(participant.description|| '')"
         />
         <!-- eslint-enable -->
@@ -107,12 +107,8 @@ export default defineComponent({
     this.hasPodcast();
   },
   mounted() {
-    const participantDesc = document.getElementById(
-      'description-participant-' + this.participant.participantId
-    );
-    const participantDescContainer = document.getElementById(
-      'description-participant-container-' + this.participant.participantId
-    );
+    const participantDesc = (this.$refs.descriptionParticipant as HTMLElement);
+    const participantDescContainer = (this.$refs.descriptionParticipantContainer as HTMLElement);
     if (
       null !== participantDesc && null !==participantDescContainer && 
       participantDesc.clientHeight > participantDescContainer.clientHeight

package/src/components/display/playlist/PlaylistItem.vue

@@ -36,12 +36,12 @@
           >{{ name }}
         </div>
         <div
-          :id="'description-playlist-container-' + playlist.playlistId"
+          ref="descriptionPlaylistContainer"
           class="emission-description html-wysiwyg-content"
         >
           <!-- eslint-disable vue/no-v-html -->
           <div
-            :id="'description-playlist-' + playlist.playlistId"
+            ref="descriptionPlaylist"
             v-html="urlify(description)"
           />
           <!-- eslint-enable -->
@@ -120,12 +120,8 @@ export default defineComponent({
 
 
   mounted() {
-    const playlistDesc = document.getElementById(
-      'description-playlist-' + this.playlist.playlistId
-    );
-    const playlistDescContainer = document.getElementById(
-      'description-playlist-container-' + this.playlist.playlistId
-    );
+    const playlistDesc = (this.$refs.descriptionPlaylist as HTMLElement);
+    const playlistDescContainer = (this.$refs.descriptionPlaylistContainer as HTMLElement);
     if (
       null !== playlistDesc && null !== playlistDescContainer &&
       playlistDesc.clientHeight > playlistDescContainer.clientHeight

package/src/components/display/podcasts/PodcastItem.vue

@@ -17,7 +17,7 @@
       @showDescription="showDescription"
     />
     <div
-      :id="'description-podcast-container-' + podcast.podcastId"
+      ref="descriptionPodcastContainer"
       class="description-podcast-item html-wysiwyg-content"
       :class="[
         hover && ''!==description ? 'visible' : 'invisible',
@@ -26,7 +26,7 @@
     >
       <!-- eslint-disable vue/no-v-html -->
       <div
-        :id="'description-podcast-' + podcast.podcastId"
+        ref="descriptionPodcast"
         v-html="description"
       />
     <!-- eslint-enable -->
@@ -89,13 +89,9 @@ export default defineComponent({
     },
   },
 
-  created() {
-    const podcastDesc = document.getElementById(
-      'description-podcast-' + this.podcast.podcastId
-    );
-    const podcastDescContainer = document.getElementById(
-      'description-podcast-container-' + this.podcast.podcastId
-    );
+  mounted() {
+    const podcastDesc = (this.$refs.descriptionPodcast as HTMLElement);
+    const podcastDescContainer = (this.$refs.descriptionPodcastContainer as HTMLElement);
     if (
       null !== podcastDesc && null !== podcastDescContainer &&
       podcastDesc.clientHeight > podcastDescContainer.clientHeight

package/src/components/display/rubriques/RubriqueList.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
     <div
-      id="rubrique-list-container"
+      ref="rubriqueListContainer"
+      class="rubrique-list-container"
     >
       <select
         v-model="rubriquage"
@@ -18,7 +19,7 @@
       </select>
       <button
         v-for="rubrique in rubriqueDisplay"
-        :id="'rubrique' + rubrique.rubriqueId"
+        :ref="'rubrique' + rubrique.rubriqueId"
         :key="rubrique.rubriqueId"
         class="rubrique-item bg-white"
         @click="addFilter(rubrique)"
@@ -150,12 +151,12 @@ export default defineComponent({
       this.initRubriques();
     },
     resizeWindow(): void {
-      const rubriqueList = document.getElementById('rubrique-list-container');
+      const rubriqueList = (this.$refs.rubriqueListContainer as HTMLElement);
       if(null === rubriqueList){return}
       rubriqueList.style.justifyContent = 'flex-start';
       this.hidenRubriques.length = 0;
       this.rubriqueDisplay.forEach((element: Rubrique) => {
-        const el = document.getElementById('rubrique' + element.rubriqueId);
+        const el = (this.$refs['rubrique' + element.rubriqueId] as Array<HTMLElement>)[0];
         if (!el) return;
         const parent = el.parentElement;
         if (null !== parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
@@ -180,7 +181,7 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-#rubrique-list-container {
+.rubrique-list-container {
   display: flex;
   justify-content: flex-start;
   align-items: center;

package/src/components/misc/Footer.vue

@@ -2,6 +2,7 @@
   <div class="bg-dark">
     <div
       id="footer"
+      ref="footer"
       class="d-flex-column p-3 secondary-bg border-top"
     >
       <div class="d-flex flex-column flex-grow-1 align-items-end">
@@ -191,7 +192,7 @@ export default defineComponent({
 
   methods: {
     showBlackBorder(hide: boolean): void {
-      const footerElement = document.getElementById('footer');
+      const footerElement = (this.$refs.footer as HTMLElement);
       if(null===footerElement){return}
       if (hide) {
         footerElement.classList.remove('border-round');

package/src/components/mixins/player/playerLogic.ts

@@ -51,7 +51,7 @@ export const playerLogic = defineComponent({
         this.audioUrlToPlay = this.audioUrl;
       }
       if(!this.podcast){return;}
-      const response = await octopusApi.fetchPodcastDownloadUrl("podcast/download/register/"+this.podcast.podcastId+".mp3"+ this.audioUrl);
+      const response = await octopusApi.fetchPodcastDownloadUrl("podcast/download/register/"+ this.audioUrl);
       this.setDownloadId(response.downloadId.toString());
       this.audioUrlToPlay = response.location;
     },