@saooti/octopus-sdk 36.0.2 → 36.0.3

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="editRight || activePlaylist"
-    class="emission-item-container shadow-element"
+    class="emission-item-container"
   >
     <router-link
       :to="{
@@ -12,14 +12,6 @@
       :title="$t('Playlist')"
       class="d-flex flex-grow-1 text-dark"
     >
-      <img
-        v-lazy="proxyImageUrl(playlist.imageUrl, '260')"
-        width="260"
-        height="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 emission-name">
           <span
@@ -47,11 +39,19 @@
             params: { productorId: playlist.organisation.id },
             query: { productor: filterOrgaId },
           }"
-          class="emission-producer text-primary mt-auto"
+          class="text-primary mt-auto"
         >
           © {{ playlist.organisation.name }}
         </router-link>
       </div>
+      <img
+        v-lazy="proxyImageUrl(playlist.imageUrl, '330')"
+        width="330"
+        height="330"
+        :title="$t('Playlist name image', {name:name})"
+        :alt="$t('Playlist name image', {name:name})"
+        class="img-box"
+      >
     </router-link>
   </div>
 </template>

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

@@ -10,7 +10,7 @@
         query: { productor: filterOrgaId },
       }"
       :title="$t('Participant')"
-      class="podcast-item-animator text-dark"
+      class="podcast-item-animator text-truncate"
     >
       {{ animatorName }}
     </router-link>
@@ -43,7 +43,6 @@ export default defineComponent({
     font-size: 0.55rem;
     font-weight: 300;
     text-transform: capitalize;
-    margin: 00.25rem 0.5rem 0;
   }
 }
 </style>

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

@@ -4,39 +4,11 @@
     class="comma"
   >
     {{ title }}
-    <span
-      :id="idPopover"
-      role="button"
-      tabindex="0"
-      class="saooti-help m-0"
-      :title="title"
-    />
     <span class="mx-1">:</span>
-    <Popover
-      :title="$t('Animated by')"
-      :target="idPopover"
-    >
-      <div 
-        v-for="participant in participants"
-        :key="'desc-'+participant.participantId"
-        class="d-flex flex-column align-items-center"
-      >
-        <strong><em>{{ getName(participant) }}</em></strong>
-        <!-- eslint-disable vue/no-v-html -->
-        <div
-          v-if="participant.description"
-          class="participant-desc html-wysiwyg-content"
-          v-html="participant.description"
-        />
-        <!-- eslint-enable -->
-        <hr>
-      </div>
-    </Popover>
     <router-link
       v-for="participant in participants"
       :key="participant.participantId"
       :title="$t('Participant')"
-      class="fw-bold"
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
@@ -51,7 +23,6 @@
 </template>
 
 <script lang="ts">
-import Popover from '../../misc/Popover.vue';
 import { Participant } from '@/stores/class/general/participant';
 import { useFilterStore } from '@/stores/FilterStore';
 import { mapState } from 'pinia';
@@ -60,7 +31,6 @@ export default defineComponent({
   name: 'ParticipantDescription',
 
   components:{
-    Popover
   },
 
   props: {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="py-3">
-    <h2>{{ titleFilter }}</h2>
+    <h2 class="big-h2 mb-2">{{ titleFilter }}</h2>
     <div class="d-flex align-items-center flex-wrap mb-2">
       <div
         class="d-flex align-items-center flex-grow-1 me-3"

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

@@ -4,9 +4,9 @@
     class="img-box mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start"
   >
     <img
-      v-lazy="proxyImageUrl(podcast.imageUrl,'260')"
-      width="260"
-      height="260"
+      v-lazy="proxyImageUrl(podcast.imageUrl,'330')"
+      width="330"
+      height="330"
       class="img-box"
       :alt="$t('Episode name image', {name:podcast.title})"
     >
@@ -44,7 +44,7 @@
         <div
           v-if="!playingPodcast"
           :title="$t('Play')"
-          class="saooti-play text-primary"
+          class="saooti-play"
         />
         <div
           v-if="!classicPodcastPlay"
@@ -59,6 +59,7 @@
           <span class="paddle2" />
           <span class="paddle3" />
         </div>
+        <div class="ms-2">{{durationString}}</div>
       </div>
       <div
         v-else
@@ -88,6 +89,7 @@
 </template>
 
 <script lang="ts">
+import DurationHelper from '../../../helper/duration';
 import { state } from '../../../stores/ParamSdkStore';
 import { Podcast } from '@/stores/class/general/podcast';
 import { Conference } from '@/stores/class/conference/conference';
@@ -233,6 +235,9 @@ export default defineComponent({
     clickPlayGoPage():boolean{
       return (state.podcastPage.clickPlayGoPage as boolean);
     },
+    durationString(): string {
+      return DurationHelper.formatDuration(Math.round(this.podcast.duration/1000));
+    },
   },
   watch: {
     arrowDirection(): void {
@@ -286,6 +291,7 @@ export default defineComponent({
 
 
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
   .live-image-status {
     text-align: center;
@@ -316,8 +322,7 @@ export default defineComponent({
   .podcast-image-play-button{
     position: absolute;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
     top: 0;
     left: 0;
     right: 0;
@@ -332,10 +337,11 @@ export default defineComponent({
     }
 
     .icon-container {
-      background: #00000050 !important;
-      border-radius: 50%;
-      height: 3rem;
-      width: 3rem;
+      background: $primaryColorLessTransparent !important;
+      border-radius: 2rem;
+      color: white;
+      padding: 0.5rem;
+      margin: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -348,12 +354,12 @@ export default defineComponent({
         background: #00000030;
       }
       .saooti-play {
-        font-size: 2em;
+        font-size: 1.2rem;
         position: relative;
-        right: -0.2rem;
+        color: white;
       }
       .big-icon-error {
-        font-size: 2em;
+        font-size: 1rem;
         position: relative;
       }
     }

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

@@ -254,7 +254,7 @@ export default defineComponent({
     },
     preloadImage(url: string): void {
       const img = new Image();
-      img.src = this.proxyImageUrl(url,'260');
+      img.src = this.proxyImageUrl(url,'330');
     },
   },
 })

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

@@ -1,21 +1,14 @@
 <template>
   <div
-    class="d-flex flex-column p-3"
+    class="podcast-inline-container"
   >
     <div 
       class="d-flex align-items-center"
       :class="podcastId?'mb-4':'mb-2'"
     >
-      <h2 class="mb-0">
+      <h2 class="mb-0 big-h2">
         {{ title }}
       </h2>
-      <router-link
-        v-if="isButtonNextTitle"
-        class="btn admin-button m-1 fw-bold saooti-right"
-        :title="buttonText"
-        :to="refTo"
-        @click="handleSeeMoreButton"
-      />
     </div>
     <div
       v-if="!podcastId"
@@ -57,7 +50,7 @@
     </div>
     <slot name="list-inline" />
     <router-link
-      v-if="!isButtonNextTitle && buttonText"
+      v-if="buttonText"
       class="btn btn-primary align-self-center width-fit-content m-4"
       :to="refTo"
       @click="handleSeeMoreButton"
@@ -96,7 +89,6 @@ export default defineComponent({
     iabId: { default: undefined, type: Number},
     rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
     noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
-    isButtonNextTitle: {default: false, type:Boolean},
     podcastId: { default: undefined, type: Number},
   },
   emits:['sortChrono','sortPopular', 'displayPrevious', 'displayNext'],
@@ -175,4 +167,14 @@ export default defineComponent({
     },
   },
 })
-</script>
+</script>
+<style lang="scss">
+.octopus-app .podcast-inline-container {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  @media (max-width: 450px) {
+    padding: 1rem 0;
+  }
+}
+</style>

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

@@ -2,7 +2,6 @@
   <div
     class="podcast-item-container"
     :class="[
-      podcastShadow ? 'shadow-element' : '',
       podcastBorderBottom ? 'border-bottom' : '',
     ]"
     :data-pubdate="displayDate"
@@ -78,9 +77,6 @@ export default defineComponent({
   },
 
   computed: {
-    podcastShadow(): boolean {
-      return (state.podcastsPage.podcastShadow as boolean);
-    },
     podcastBorderBottom(): boolean {
       return (state.podcastsPage.podcastBorderBottom as boolean);
     },
@@ -123,30 +119,32 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
 .podcast-item-container {
-  border-radius: 0.8rem;
+  border-radius: $octopus-borderradius;
   list-style: none;
   position: relative;
-  width: 13rem;
-  height: 22rem;
+  width: $octopus-item-size;
+  height: 23.5rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   text-align: left;
   background: #fff;
   flex-shrink: 0;
+  border: 2px solid #eee;
  
   .description-podcast-item {
     padding: 1rem;
     color: #333;
     background-color: rgba(255, 255, 255, 0.92);
-    height: 13rem;
+    height: $octopus-item-size;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 0.9em;
     position: absolute;
-    width: 13rem;
+    width: $octopus-item-size;
     word-break: break-word;
     &.after-podcast-description:after {
       content: '...';
@@ -164,6 +162,14 @@ export default defineComponent({
   @media (max-width: 960px) {
     margin: 0.5rem !important;
   }
+  @media (max-width: 450px) {
+    width: $octopus-mobile-item-size;
+    height: 18.8rem;
+    .description-podcast-item{
+      height: $octopus-mobile-item-size;
+      width: $octopus-mobile-item-size;
+    }
+  }
 }
 }
 </style>

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

@@ -1,19 +1,7 @@
 <template>
-  <div class="d-flex justify-content-between flex-wrap text-secondary m-2 mb-3">
-    <div class="me-3 h6">
-      {{ date }}
-    </div>
-    <div
-      v-if="0 !== durationString.length"
-      class="h6"
-    >
-      {{ durationString }}
-    </div>
+  <div class="text-secondary h6 ms-2">
+    {{ date }}
   </div>
-  <AnimatorsItem
-    v-if="animators && 0!==animators.length"
-    :animator="animators[0]"
-  />
   <router-link
     :to="{
       name: 'podcast',
@@ -29,11 +17,17 @@
     :duration="duration"
     class="mx-2"
   />
-  <div class="d-flex justify-content-between">
+  
+  <div class="mx-2 d-flex align-items-center justify-content-between mt-2">
     <div
       v-if="isPodcastmaker"
       class="useless-div-for-podcastmaker"
     />
+    <AnimatorsItem
+      v-if="animators && 0!==animators.length"
+      class="w-0 flex-grow-1"
+      :animator="animators[0]"
+    />
     <router-link
       v-if="!isPodcastmaker"
       :to="{
@@ -43,7 +37,7 @@
       }"
       class="text-dark producer-podcast-item"
     >
-      {{ '© ' + podcastOrganisationName }}
+      {{ '© ' + orgaNameDisplay }}
     </router-link>
   </div>
 </template>
@@ -53,8 +47,6 @@ import AnimatorsItem from './AnimatorsItem.vue';
 import { state } from '../../../stores/ParamSdkStore';
 import { orgaComputed } from '../../mixins/orgaComputed';
 import dayjs from 'dayjs';
-// @ts-ignore
-import humanizeDuration from 'humanize-duration';
 import PodcastPlayBar from './PodcastPlayBar.vue';
 import { defineComponent } from 'vue'
 import { Participant } from '@/stores/class/general/participant';
@@ -89,40 +81,12 @@ export default defineComponent({
       return (true===this.authenticated && this.myOrganisationId === this.podcastOrganisationId) ||
         true===state.generalParameters.isAdmin
     },
-    durationString(): string {
-      if (this.duration <= 1) return '';
-      if (this.duration > 600000) {
-        return humanizeDuration(this.duration, {
-          language: 'short',
-          largest: 1,
-          round: true,
-          languages: {
-            short: {
-              y: () => 'years',
-              mo: () => 'months',
-              w: () => 'weeks',
-              d: () => 'days',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-          },
-        });
+    orgaNameDisplay():string{
+      if(this.podcastOrganisationName.length > 30){
+        return this.podcastOrganisationName.substring(0, 30) + '...';
       }
-      return humanizeDuration(this.duration, {
-        language: 'short',
-        largest: 2,
-        round: true,
-        languages: {
-          short: {
-            m: () => 'min',
-            s: () => 'sec',
-            ms: () => 'ms',
-          },
-        },
-      });
-    },
+      return this.podcastOrganisationName;
+    }
   },
 })
 </script>
@@ -130,12 +94,12 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app{
   .title-podcast-item {
-    font-weight: 700;
+    font-weight: 400;
     margin: 0.25rem 0.5rem 0.5rem;
     overflow: hidden;
     display: -webkit-box;
     flex-grow: 1;
-    font-size: 0.7rem;
+    font-size: 0.9rem;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     min-height: 3rem;
@@ -144,10 +108,9 @@ export default defineComponent({
   }
 
   .producer-podcast-item {
-    margin: 0.2rem 0.5rem 0.5rem;
     font-size: 0.55rem;
     color: #666;
-    margin-left: auto;
+    flex-shrink: 0;
   }
 }
 </style>

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

@@ -1,17 +1,9 @@
 <template>
   <div class="module-box">
-    <div
-      class="text-uppercase h4"
-    >
-      {{ podcast.title }}
-    </div>
-    <div class="mb-5 mt-3 d-flex">
+    <div class="mb-2 d-flex">
       <div class="w-100">
         <PodcastImage
           :class="[
-            !isLiveReadyToRecord
-              ? 'shadow-element'
-              : '',
             isLiveReadyToRecord &&
               fetchConference &&
               'null' !== fetchConference &&
@@ -28,8 +20,7 @@
           @playPodcast="playPodcast"
         />
         <div
-          class="d-flex flex-wrap mb-3"
-          :class="isLiveReady ? 'justify-content-between' : ''"
+          class="d-flex justify-content-between flex-wrap mb-2"
         >
           <div
             v-if="0 !== date.length"
@@ -38,7 +29,7 @@
             {{ date }}
           </div>
           <div>
-            {{ $t('Duration', { duration: duration }) }}
+            {{ duration}}
           </div>
           <div
             v-if="isLiveReady"
@@ -47,6 +38,11 @@
             {{ $t('Episode record in live') }}
           </div>
         </div>
+        <div
+          class="text-uppercase h2 mb-3"
+        >
+          {{ podcast.title }}
+        </div>
         <!-- eslint-disable vue/no-v-html -->
         <div
           class="descriptionText html-wysiwyg-content"
@@ -54,11 +50,10 @@
         />
         <!-- eslint-enable -->
         <div class="my-3">
-          <ParticipantDescription :participants="podcast.animators" />
-          <div>
+          <ParticipantDescription class="mb-1" :participants="podcast.animators" />
+          <div class="mb-1">
             {{ $t('Emission') + ' : ' }}
             <router-link
-              class="fw-bold"
               :to="{
                 name: 'emission',
                 params: { emissionId: podcast.emission.emissionId },
@@ -70,10 +65,9 @@
               {{ podcast.emission.name }}
             </router-link>
           </div>
-          <div v-if="!isPodcastmaker">
+          <div class="mb-1" v-if="!isPodcastmaker">
             {{ $t('Producted by : ') }}
             <router-link
-              class="fw-bold"
               :to="{
                 name: 'productor',
                 params: { productorId: podcast.organisation.id },
@@ -85,15 +79,15 @@
               {{ podcast.organisation.name }}
             </router-link>
           </div>
-          <div v-if="''!==photoCredit">
+          <div class="mb-1" v-if="''!==photoCredit">
             {{ $t('Photo credits') + " : "+ photoCredit }}
           </div>
-          <div v-if="''!==audioCredit">
+          <div class="mb-1" v-if="''!==audioCredit">
             {{ $t('Audio credits') + " : "+ audioCredit }}
           </div>
           <a
             v-if="podcast.article"
-            class="btn d-flex align-items-center my-2 width-fit-content"
+            class="btn d-flex align-items-center my-2 width-fit-content mb-1"
             :href="podcast.article"
             rel="noopener"
             target="_blank"
@@ -102,6 +96,7 @@
             <div>{{ $t('See associated article') }}</div>
           </a>
           <ParticipantDescription
+            class="mb-1"
             :participants="podcast.guests"
             :is-guest="true"
           />
@@ -111,7 +106,7 @@
           <div v-if="editRight && !isPodcastmaker">
             <div
               v-if="podcast.annotations && 'RSS'===podcast.annotations.SOURCE_KIND"
-              class="me-5"
+              class="me-5 text-secondary"
             >
               {{ $t('From RSS') }}
             </div>
@@ -123,6 +118,24 @@
         </div>
       </div>
     </div>
+    <RecordingItemButton
+      v-if="
+        !!fetchConference &&
+          isLiveReadyToRecord &&
+          !isNotRecorded &&
+          isOctopusAndAnimator
+      "
+      :podcast="podcast"
+      :live="true"
+      :recording="fetchConference"
+      @deleteItem="removeDeleted"
+      @validatePodcast="$emit('updatePodcast', $event)"
+    />
+    <EditBox
+      v-else-if="editRight && isEditBox"
+      :podcast="podcast"
+      @validatePodcast="$emit('updatePodcast', $event)"
+    />
     <TagList
       :tag-list="podcast.tags"
     />
@@ -145,6 +158,8 @@ import { Conference } from '@/stores/class/conference/conference';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ErrorMessage = defineAsyncComponent(() => import('../../misc/ErrorMessage.vue'));
+const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
+const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
 export default defineComponent({
   name: "PodcastModuleBox",
   components: {
@@ -152,7 +167,9 @@ export default defineComponent({
     ParticipantDescription,
     TagList,
     ErrorMessage,
-    PodcastPlayBar
+    PodcastPlayBar,
+    EditBox, 
+    RecordingItemButton
   },
 
   mixins:[displayMethods, orgaComputed],
@@ -163,7 +180,7 @@ export default defineComponent({
     fetchConference: { default: undefined, type: Object as ()=> Conference},
   },
 
-  emits: ['playPodcast'],
+  emits: ['playPodcast', 'updatePodcast'],
 
   computed: {
     errorMessage(): string{
@@ -180,7 +197,7 @@ export default defineComponent({
     },
     date(): string {
       if (this.podcast && 1970 !== dayjs(this.podcast.pubDate).year()){
-        return dayjs(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
+        return dayjs(this.podcast.pubDate).format('D MMMM YYYY');
       }
       return '';
     },
@@ -235,12 +252,22 @@ export default defineComponent({
     },
     audioCredit():string{
       return (this.podcast?.annotations?.audioCredit as string) ?? '';
-    }
+    },
+    isEditBox(): boolean{
+      return (state.podcastPage.EditBox as boolean)?? false;
+    },
   },
   methods: {
     playPodcast(podcast: Podcast): void {
       this.$emit('playPodcast', podcast);
     },
+    removeDeleted(): void {
+      if (window.history.length > 1) {
+        this.$router.go(-1);
+      } else {
+        this.$router.push('/');
+      }
+    },
   },
 })
 </script>