@saooti/octopus-sdk 33.2.8 → 33.2.9

package/package.json

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

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

@@ -18,17 +18,13 @@
         :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 +37,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/participant/ParticipantItem.vue

@@ -18,15 +18,13 @@
         :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

@@ -19,15 +19,13 @@
         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 +38,6 @@
           />
           <!-- eslint-enable -->
         </div>
-        <div class="flex-grow-1" />
         <router-link
           v-if="!isPodcastmaker && playlist.organisation"
           :to="{
@@ -48,11 +45,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

@@ -36,37 +36,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 +327,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 +342,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>