@saooti/octopus-sdk 33.2.8 → 33.2.10

package/package.json

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

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

@@ -12,23 +12,21 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
+        width="260"
+        height="260"
         v-lazy="proxyImageUrl(emission.imageUrl, '260')"
         class="img-box"
         :title="$t('Emission name image', {name:emission.name})"
         :alt="$t('Emission name image', {name:emission.name})"
       >
       <div class="emission-item-text">
-        <div class="d-flex align-items-center">
+        <div class="d-flex align-items-center emission-name">
           <span
             v-if="!activeEmission && !isPodcastmaker && editRight"
             :title="$t('Emission have not podcasts')"
             class="saooti-warning text-danger me-1"
           />
-          <div
-            class="emission-name"
-          >
-            {{ emission.name }}
-          </div>
+          {{ emission.name }}
         </div>
         <div
           ref="descriptionEmissionContainer"
@@ -41,18 +39,16 @@
           />
         <!-- eslint-enable -->
         </div>
-        <div class="flex-grow-1" />
         <router-link
           v-if="!isPodcastmaker"
+          class="emission-producer mt-auto"
           :to="{
             name: 'productor',
             params: { productorId: emission.orga.id },
             query: { productor: filterOrga },
           }"
         >
-          <div class="emission-producer">
-            © {{ emission.orga.name }}
-          </div>
+          © {{ emission.orga.name }}
         </router-link>
       </div>
     </router-link>

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

@@ -20,6 +20,8 @@
         class="img-box rounded-0"
       >
         <img
+          width="260"
+          height="260"
           v-lazy="proxyImageUrl(emission.imageUrl, '260')"
           :title="$t('Emission name image', {name:emission.name})"
           :alt="$t('Emission name image', {name:emission.name})"

package/src/components/display/organisation/OrganisationChooser.vue

@@ -44,6 +44,8 @@
       <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
           <img
+            width="32"
+            height="32"
             v-if="!light"
             v-lazy="proxyImageUrl(option.imageUrl, '32')"
             class="option__image"
@@ -64,6 +66,8 @@
           "
         >
           <img
+            width="32"
+            height="32"
             v-if="!light"
             v-lazy="proxyImageUrl(option.imageUrl, '32')"
             class="option__image"

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

@@ -13,20 +13,20 @@
       :title="$t('Participant')"
     >
       <img
+        width="200"
+        height="200"
         v-lazy="proxyImageUrl(participant.imageUrl, '200')"
         :title="$t('Animator image')"
         :alt="$t('Animator image')"
         class="img-box-circle"
       >
-      <div class="d-flex align-items-center">
+      <div class="d-flex align-items-center participant-name">
         <span
           v-if="!activeParticipant && !isPodcastmaker && editRight"
           :title="$t('Participant have not podcasts')"
           class="saooti-warning text-danger me-1"
         />
-        <div class="participant-name">
-          {{ name }}
-        </div>
+        {{ name }}
       </div>
       <div
         ref="descriptionParticipantContainer"

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

@@ -13,21 +13,21 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
+        width="260"
+        height="260"
         v-lazy="proxyImageUrl(playlist.imageUrl, '260')"
         :title="$t('Playlist name image', {name:name})"
         :alt="$t('Playlist name image', {name:name})"
         class="img-box"
       >
       <div class="emission-item-text">
-        <div class="d-flex align-items-center">
+        <div class="d-flex align-items-center emission-name">
           <span
             v-if="!activePlaylist && !isPodcastmaker"
             :title="$t('Playlist have not podcasts')"
             class="saooti-warning text-danger me-1"
           />
-          <div class="emission-name">
-            {{ name }}
-          </div>
+          {{ name }}
         </div>
         <div
           ref="descriptionPlaylistContainer"
@@ -40,7 +40,6 @@
           />
           <!-- eslint-enable -->
         </div>
-        <div class="flex-grow-1" />
         <router-link
           v-if="!isPodcastmaker && playlist.organisation"
           :to="{
@@ -48,11 +47,9 @@
             params: { productorId: playlist.organisation.id },
             query: { productor: $store.state.filter.organisationId },
           }"
-          class="text-dark"
+          class="emission-producer text-primary mt-auto"
         >
-          <div class="emission-producer text-primary">
-            © {{ playlist.organisation.name }}
-          </div>
+          © {{ playlist.organisation.name }}
         </router-link>
       </div>
     </router-link>

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

@@ -10,10 +10,9 @@
         query: { productor: $store.state.filter.organisationId },
       }"
       :title="$t('Participant')"
+      class="podcast-item-animator text-dark"
     >
-      <div class="podcast-item-animator text-dark">
-        {{ animatorName }}
-      </div>
+      {{ animatorName }}
     </router-link>
   </div>
 </template>
@@ -38,10 +37,6 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app{
   .podcast-item-animator {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-
     font-size: 0.55rem;
     font-weight: 300;
     text-transform: capitalize;

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

@@ -4,6 +4,8 @@
     class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
   >
     <img
+      width="260"
+      height="260"
       v-lazy="proxyImageUrl(podcast.imageUrl,'260')"
       class="img-box"
       :alt="$t('Episode name image', {name:podcast.title})"
@@ -36,37 +38,21 @@
       @click="play"
     >
       <div
-        v-if="!isLiveToBeRecorded"
+        :title="!playingPodcast? $t('Play') : textVisible"
         class="icon-container"
+        :class="{
+          'saooti-play text-primary': !playingPodcast,
+          'special-icon-play-button': !classicPodcastPlay,
+          iconName:!classicPodcastPlay || isLiveToBeRecorded,
+          'bloc-paddle':playingPodcast,
+          'error-icon':isLiveToBeRecorded
+        }"
       >
-        <div
-          v-show="!playingPodcast"
-          :title="$t('Play')"
-          class="saooti-play text-primary"
-        />
-        <div
-          v-if="!classicPodcastPlay"
-          class="special-icon-play-button"
-          :class="iconName"
-        />
-        <div
-          v-show="playingPodcast"
-          class="bloc-paddle"
-        >
+        <template v-if="playingPodcast">
           <span class="paddle1" />
           <span class="paddle2" />
           <span class="paddle3" />
-        </div>
-      </div>
-      <div
-        v-else
-        class="icon-container error-icon"
-      >
-        <div
-          :title="textVisible"
-          class="big-icon-error"
-          :class="iconName"
-        />
+        </template>
       </div>
       <div
         v-if="!classicPodcastPlay"
@@ -343,13 +329,14 @@ export default defineComponent({
     }
 
     .icon-container {
-      background: #00000050;
+      background: #00000050 !important;
       border-radius: 50%;
       height: 3rem;
       width: 3rem;
       display: flex;
       align-items: center;
       justify-content: center;
+      z-index: 2;
       &.error-icon {
         background: #00000050 !important;
         cursor: default !important;
@@ -357,16 +344,11 @@ export default defineComponent({
       &:hover {
         background: #00000030;
       }
-      > .saooti-play {
+      &.saooti-play {
         font-size: 2em;
         position: relative;
         right: -0.2rem;
       }
-      .big-icon-error {
-        font-size: 2em;
-        position: relative;
-      }
-      z-index: 2;
     }
   }
 }

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    id="podcast-item-container"
     class="podcast-item-container"
     :class="[
       podcastShadow ? 'shadow-element' : '',
@@ -10,18 +11,18 @@
   >
     <PodcastImage
       :podcast="podcast"
-      :hide-play="!podcastItemDescription || (podcastItemDescription && (!hover || !description))"
+      :hide-play="!podcastItemDescription || (podcastItemDescription && (!hoverDesc || !description))"
       :display-description="0!==description.length && podcastItemDescription"
       :arrow-direction="arrowDirection"
       @hideDescription="hideDescription"
       @showDescription="showDescription"
     />
     <div
-      v-if="podcastItemDescription"
+      v-if="podcastItemDescription && hoverDesc"
       ref="descriptionPodcastContainer"
       class="description-podcast-item html-wysiwyg-content"
       :class="[
-        hover && ''!==description ? 'visible' : 'invisible',
+        hoverDesc && ''!==description ? 'visible' : 'invisible',
         isDescriptionBig ? 'after-podcast-description' : '',
       ]"
     >
@@ -67,7 +68,8 @@ export default defineComponent({
 
   data() {
     return {
-      hover: false as boolean,
+      firstDisplayDesc : false as boolean,
+      hoverDesc: false as boolean,
       arrowDirection: 'up' as string,
       isDescriptionBig: false as boolean,
     };
@@ -91,24 +93,28 @@ export default defineComponent({
     },
   },
 
-  mounted() {
-    if(!this.podcastItemDescription){return}
-    const podcastDesc = (this.$refs.descriptionPodcast as HTMLElement);
-    const podcastDescContainer = (this.$refs.descriptionPodcastContainer as HTMLElement);
-    if (podcastDesc?.clientHeight > podcastDescContainer?.clientHeight) {
-      this.isDescriptionBig = true;
-    }
-  },
   methods: {
+    initDescription():void{
+      if(this.firstDisplayDesc){return;}
+      const podcastDesc = (this.$refs.descriptionPodcast as HTMLElement);
+      const podcastDescContainer = (this.$refs.descriptionPodcastContainer as HTMLElement);
+      if (podcastDesc?.clientHeight > podcastDescContainer?.clientHeight) {
+        this.isDescriptionBig = true;
+      }
+      this.firstDisplayDesc=true;
+    },
     showDescription(): void {
       if(!this.podcastItemDescription){return}
       this.arrowDirection = 'down';
-      this.hover = true;
+      this.hoverDesc = true;
+      this.$nextTick(() => {
+        this.initDescription();
+      });
     },
     hideDescription(): void {
       if(!this.podcastItemDescription){return}
       this.arrowDirection = 'up';
-      this.hover = false;
+      this.hoverDesc = false;
     },
   },
 })

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

@@ -1,51 +1,47 @@
 <template>
-  <div class="d-contents podcast-item-info">
-    <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-      <div class="me-3 h6">
-        {{ date }}
-      </div>
-      <div
-        v-if="0 !== durationString.length"
-        class="h6"
-      >
-        {{ durationString }}
-      </div>
+  <div class="d-flex justify-content-between flex-wrap text-secondary m-2 mb-3">
+    <div class="me-3 h6">
+      {{ date }}
     </div>
-    <AnimatorsItem
-      v-if="animators && 0!==animators.length"
-      :animator="animators[0]"
-    />
+    <div
+      v-if="0 !== durationString.length"
+      class="h6"
+    >
+      {{ durationString }}
+    </div>
+  </div>
+  <AnimatorsItem
+    v-if="animators && 0!==animators.length"
+    :animator="animators[0]"
+  />
+  <router-link
+    :to="{
+      name: 'podcast',
+      params: { podcastId: podcastId },
+      query: { productor: filterOrga },
+    }"
+    class="text-dark flex-grow-1 title-podcast-item"
+  >
+  {{ title }}
+  </router-link>
+  <PodcastPlayBar
+    :podcast-id="podcastId"
+    :duration="duration"
+    class="mx-2"
+  />
+  <div class="d-flex justify-content-between">
+    <div v-if="isPodcastmaker" class="useless-div-for-podcastmaker" />
     <router-link
+      v-if="!isPodcastmaker"
       :to="{
-        name: 'podcast',
-        params: { podcastId: podcastId },
+        name: 'productor',
+        params: { productorId: podcastOrganisationId },
         query: { productor: filterOrga },
       }"
-      class="text-dark d-flex flex-column flex-grow-1"
+      class="text-dark producer-podcast-item"
     >
-      <div class="title-podcast-item">
-        {{ title }}
-      </div>
+      {{ '© ' + podcastOrganisationName }}
     </router-link>
-    <PodcastPlayBar
-      :podcast-id="podcastId"
-      :duration="duration"
-      class="mx-2"
-    />
-    <div class="d-flex justify-content-between">
-      <div class="useless-div-for-podcastmaker" />
-      <router-link
-        v-if="!isPodcastmaker"
-        :to="{
-          name: 'productor',
-          params: { productorId: podcastOrganisationId },
-          query: { productor: filterOrga },
-        }"
-        class="text-dark producer-podcast-item"
-      >
-        <div>{{ '© ' + podcastOrganisationName }}</div>
-      </router-link>
-    </div>
   </div>
 </template>
 
@@ -130,13 +126,6 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.podcast-item-info {
-  .text-secondary {
-    margin: 0.5rem !important;
-  }
-  .saooti-pin {
-    font-size: 22px;
-  }
   .title-podcast-item {
     font-weight: 700;
     margin: 0.25rem 0.5rem 0.5rem;
@@ -155,7 +144,7 @@ export default defineComponent({
     margin: 0.2rem 0.5rem 0.5rem;
     font-size: 0.55rem;
     color: #666;
+    margin-left: auto;
   }
 }
-}
 </style>

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

@@ -16,6 +16,8 @@
         role="button"
       >
         <img
+          width="20"
+          height="20"
           v-if="isOuestFranceTag(tag)"
           class="ouest-france-logo"
           alt="Ouest France Logo"

package/src/components/misc/Accordion.vue

@@ -14,6 +14,8 @@
         :class="icon"
       />
       <img
+        width="30"
+        height="30"
         v-if="imageUrl"
         class="img-accordion"
         :src="imageUrl"

package/src/components/misc/Footer.vue

@@ -45,6 +45,8 @@
       :title="$t('Octopus is ACPM Podcast accredited')"
     >
       <img
+        width="44"
+        height="44"
         class="acpm_image"
         src="/img/ACPM.webp"
         :title="$t('Octopus is ACPM Podcast accredited')"

package/src/components/misc/player/PlayerCompact.vue

@@ -7,6 +7,8 @@
       :to="podcastShareUrl"
     >
       <img
+        width="48"
+        height="48"
         v-lazy="proxyImageUrl(podcastImage,'48')"
         :alt="$t('Podcast image')"
         class="player-image"

package/src/components/misc/player/PlayerLarge.vue

@@ -12,6 +12,8 @@
       :to="podcastShareUrl"
     >
       <img
+        width="200"
+        height="200"
         v-lazy="proxyImageUrl(podcastImage,'200')"
         :alt="$t('Podcast image')"
         class="img-box"

package/src/components/pages/Emission.vue

@@ -19,6 +19,8 @@
             </h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
+                width="260"
+                height="260"
                 v-lazy="proxyImageUrl(imageUrl, '260')"
                 :alt="$t('Emission name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"

package/src/components/pages/Error403Page.vue

@@ -3,6 +3,8 @@
     <div class="not-auth-content d-flex-column justify-content-between">
       <div class="d-flex flex-column justify-content-around">
         <img
+          width="250"
+          height="auto"
           class="logo-octopus"
           src="/img/logo_octopus_final.svg"
           :alt="$t('Logo of main page')"
@@ -10,6 +12,8 @@
         <h2>{{ $t('You do not have the right to access this page' ) }}</h2>
       </div>
       <img
+        width="600"
+        height="auto"
         class="stop-octopus-img"
         src="/img/403.webp"
         :alt="$t('You do not have the right to access this page')"

package/src/components/pages/Participant.vue

@@ -10,6 +10,8 @@
         class="d-flex flex-column align-items-center mb-3"
       >
         <img
+          width="200"
+          height="200"
           v-lazy="proxyImageUrl(participant.imageUrl, '200')"
           :title="$t('Animator image')"
           :alt="$t('Animator image')"

package/src/components/pages/Playlist.vue

@@ -14,6 +14,8 @@
             <h2>{{ name }}</h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
+                width="260"
+                height="260"
                 v-lazy="proxyImageUrl(imageUrl, '260')"
                 :alt="$t('Playlist name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"