@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/pages/Podcast.vue

@@ -1,46 +1,54 @@
 <template>
   <div>
-    <div class="page-box" v-if="loaded && !error">
-      <h1 v-if="!isOuestFrance">{{ titlePage }}</h1>
-      <Countdown :timeRemaining="timeRemaining" v-if="isCounter" />
+    <div
+      v-if="loaded && !error"
+      class="page-box"
+    >
+      <h1 v-if="!isOuestFrance">
+        {{ titlePage }}
+      </h1>
+      <Countdown
+        v-if="isCounter"
+        :time-remaining="timeRemaining"
+      />
       <div class="d-flex">
         <div class="d-flex flex-column flex-super-grow">
           <RecordingItemButton
-            class="module-box text-center-mobile flex-no-grow"
-            :podcast="podcast"
-            :live="true"
-            :recording="fetchConference"
-            @deleteItem="removeDeleted"
-            @validatePodcast="updatePodcast"
             v-if="
               !!fetchConference &&
                 isLiveReadyToRecord &&
                 !isNotRecorded &&
                 isOctopusAndAnimator
             "
-          ></RecordingItemButton>
-          <EditBox
+            class="module-box text-center-mobile flex-no-grow"
             :podcast="podcast"
+            :live="true"
+            :recording="fetchConference"
+            @deleteItem="removeDeleted"
+            @validatePodcast="updatePodcast"
+          />
+          <EditBox
             v-else-if="editRight && isEditBox"
-            :isReady="isReady"
+            :podcast="podcast"
+            :is-ready="isReady"
             @validatePodcast="updatePodcast"
-          ></EditBox>
+          />
           <div class="module-box">
             <h2
-              class="text-uppercase font-weight-bold title-page-podcast"
               v-if="!isOuestFrance"
+              class="text-uppercase fw-bold title-page-podcast"
             >
-              {{ this.podcast.title }}
+              {{ podcast.title }}
             </h2>
             <router-link
+              v-else
               :to="{
                 name: 'emission',
                 params: { emissionId: podcast.emission.emissionId },
-                query: { productor: this.$store.state.filter.organisationId },
+                query: { productor: $store.state.filter.organisationId },
               }"
-              v-else
             >
-              <h1>{{ this.podcast.emission.name }}</h1>
+              <h1>{{ podcast.emission.name }}</h1>
             </router-link>
             <div class="mb-5 mt-3 d-flex">
               <div class="w-100">
@@ -50,61 +58,52 @@
                       ? 'shadow-element'
                       : '',
                     isLiveReadyToRecord &&
-                    fetchConference &&
-                    'null' !== fetchConference &&
-                    fetchConference.status
+                      fetchConference &&
+                      'null' !== fetchConference &&
+                      fetchConference.status
                       ? fetchConference.status.toLowerCase() + '-shadow'
                       : '',
                   ]"
-                  class="mr-3"
-                  v-bind:podcast="podcast"
-                  :hidePlay="!isLiveReadyToRecord"
-                  :playingPodcast="playingPodcast"
+                  class="me-3"
+                  :podcast="podcast"
+                  :hide-play="!isLiveReadyToRecord"
+                  :playing-podcast="playingPodcast"
+                  :fetch-conference="fetchConference"
+                  :is-animator-live="isOctopusAndAnimator"
                   @playPodcast="playPodcast"
-                  :fetchConference="fetchConference"
-                  :isAnimatorLive="isOctopusAndAnimator"
                 />
-                <h3 v-if="isOuestFrance">{{ this.podcast.title }}</h3>
+                <h3 v-if="isOuestFrance">
+                  {{ podcast.title }}
+                </h3>
                 <div
                   class="date-text-zone"
                   :class="isLiveReady ? 'justify-content-between' : ''"
                 >
                   <div
-                    :class="!isLiveReady ? 'mr-5' : ''"
                     v-if="!isOuestFrance && 0 !== date.length"
+                    :class="!isLiveReady ? 'me-5' : ''"
                   >
                     {{ date }}
                   </div>
-                  <div class="ml-2 mr-2 duration">
-                    <span class="saooti-clock3" v-if="isOuestFrance"></span
-                    >{{ $t('Duration', { duration: duration }) }}
+                  <div class="ms-2 me-2 duration">
+                    <span
+                      v-if="isOuestFrance"
+                      class="saooti-clock3"
+                    />{{ $t('Duration', { duration: duration }) }}
                   </div>
-                  <div class="text-danger" v-if="isLiveReady">
+                  <div
+                    v-if="isLiveReady"
+                    class="text-danger"
+                  >
                     {{ $t('Episode record in live') }}
                   </div>
                 </div>
                 <div
                   class="descriptionText html-wysiwyg-content"
-                  v-html="urlify(this.podcast.description)"
-                ></div>
+                  v-html="urlify(podcast.description)"
+                />
                 <div class="mt-3 mb-3">
-                  <div class="comma" v-if="podcast.animators">
-                    {{ $t('Animated by : ') }}
-                    <router-link
-                      :aria-label="$t('Participant')"
-                      class="link-info"
-                      v-for="animator in podcast.animators"
-                      v-bind:key="animator.participantId"
-                      :to="{
-                        name: 'participant',
-                        params: { participantId: animator.participantId },
-                        query: {
-                          productor: this.$store.state.filter.organisationId,
-                        },
-                      }"
-                      >{{ getName(animator) }}</router-link
-                    >
-                  </div>
+                  <ParticipantDescription :participants="podcast.animators" />
                   <div v-if="!isOuestFrance">
                     {{ $t('Emission') + ' : ' }}
                     <router-link
@@ -113,11 +112,12 @@
                         name: 'emission',
                         params: { emissionId: podcast.emission.emissionId },
                         query: {
-                          productor: this.$store.state.filter.organisationId,
+                          productor: $store.state.filter.organisationId,
                         },
                       }"
-                      >{{ this.podcast.emission.name }}</router-link
                     >
+                      {{ podcast.emission.name }}
+                    </router-link>
                   </div>
                   <div v-if="!isPodcastmaker">
                     {{ $t('Producted by : ') }}
@@ -127,62 +127,64 @@
                         name: 'productor',
                         params: { productorId: podcast.organisation.id },
                         query: {
-                          productor: this.$store.state.filter.organisationId,
-                        },
-                      }"
-                      >{{ this.podcast.organisation.name }}</router-link
-                    >
-                  </div>
-                  <div class="comma" v-if="podcast.guests">
-                    {{ $t('Guests') + ' : ' }}
-                    <router-link
-                      class="link-info"
-                      v-for="guest in podcast.guests"
-                      v-bind:key="guest.participantId"
-                      :to="{
-                        name: 'participant',
-                        params: { participantId: guest.participantId },
-                        query: {
-                          productor: this.$store.state.filter.organisationId,
+                          productor: $store.state.filter.organisationId,
                         },
                       }"
-                      >{{ getName(guest) }}</router-link
                     >
+                      {{ podcast.organisation.name }}
+                    </router-link>
                   </div>
+                  <a
+                    v-if="podcast.article"
+                    class="btn d-flex align-items-center my-2 width-fit-content"
+                    :href="podcast.article"
+                    rel="noopener"
+                    target="_blank"
+                  >
+                    <span class="saooti-newspaper me-1" />
+                    <div>{{ $t('See associated article') }}</div>
+                  </a>
+                  <ParticipantDescription
+                    :participants="podcast.guests"
+                    :is-guest="true"
+                  />
                   <div v-if="editRight && !isPodcastmaker">
                     <div
-                      class="mr-5"
                       v-if="podcast.annotations && podcast.annotations.RSS"
+                      class="me-5"
                     >
                       {{ $t('From RSS') }}
                     </div>
                     <ErrorMessage
-                      :message="$t('Podcast is not visible for listeners')"
                       v-if="!podcast.availability.visibility"
+                      :message="$t('Podcast is not visible for listeners')"
                     />
                     <ErrorMessage
-                      :message="$t('Podcast in ERROR, please contact Saooti')"
                       v-if="'ERROR' === podcast.processingStatus"
+                      :message="$t('Podcast in ERROR, please contact Saooti')"
                     />
                     <ErrorMessage
-                      :message="$t('Podcast not validated')"
                       v-if="podcastNotValid"
+                      :message="$t('Podcast not validated')"
                     />
                   </div>
                   <ShareButtons
-                    :podcast="podcast"
-                    :bigRound="true"
-                    :audioUrl="podcast.audioUrl"
                     v-if="isDownloadButton"
-                  ></ShareButtons>
+                    :podcast="podcast"
+                    :big-round="true"
+                    :audio-url="podcast.audioUrl"
+                  />
                 </div>
               </div>
             </div>
-            <TagList v-if="isTagList" :tagList="podcast.tags" />
+            <TagList
+              v-if="isTagList"
+              :tag-list="podcast.tags"
+            />
           </div>
           <SubscribeButtons
-            :emission="podcast.emission"
             v-if="isShareButtons && countLink >= 1"
+            :emission="podcast.emission"
           />
         </div>
         <div
@@ -190,100 +192,91 @@
           :class="authenticated || notExclusive ? 'flex-grow' : ''"
         >
           <SharePlayer
+            v-if="isSharePlayer && (authenticated || notExclusive)"
             :podcast="podcast"
             :emission="podcast.emission"
             :exclusive="exclusive"
-            :notExclusive="notExclusive"
-            :organisationId="organisationId"
-            :isEducation="isEducation"
-            v-if="isSharePlayer && (authenticated || notExclusive)"
-          ></SharePlayer>
+            :not-exclusive="notExclusive"
+            :organisation-id="organisationId"
+            :is-education="isEducation"
+          />
           <ShareButtons
-            :podcast="podcast"
-            :notExclusive="notExclusive"
             v-if="isShareButtons"
-          ></ShareButtons>
+            :podcast="podcast"
+            :not-exclusive="notExclusive"
+          />
         </div>
       </div>
       <template v-if="!isOuestFrance">
         <CommentSection
-          :podcast="podcast"
           v-if="!isPodcastmaker"
-          :fetchConference="fetchConference"
           ref="commentSection"
+          :podcast="podcast"
+          :fetch-conference="fetchConference"
         />
         <PodcastInlineList
-          :emissionId="this.podcast.emission.emissionId"
-          :href="'/main/pub/emission/' + this.podcast.emission.emissionId"
+          :emission-id="podcast.emission.emissionId"
+          :href="'/main/pub/emission/' + podcast.emission.emissionId"
           :title="$t('More episodes of this emission')"
-          :buttonText="$t('All podcast emission button')"
+          :button-text="$t('All podcast emission button')"
         />
         <PodcastInlineList
           v-for="c in categories"
           :key="c.id"
-          :iabId="c.id"
+          :iab-id="c.id"
           :href="'/main/pub/category/' + c.id"
           :title="$t('More episodes of this category : ', { name: c.name })"
-          :buttonText="$t('All podcast button', { name: c.name })"
+          :button-text="$t('All podcast button', { name: c.name })"
         />
       </template>
     </div>
-    <div class="d-flex justify-content-center" v-if="!loaded">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading content ...') }}</h3>
+    <div
+      v-if="!loaded"
+      class="d-flex justify-content-center"
+    >
+      <div class="spinner-border me-3" />
+      <h3 class="mt-2">
+        {{ $t('Loading content ...') }}
+      </h3>
     </div>
-    <div class="text-center" v-if="error">
+    <div
+      v-if="error"
+      class="text-center"
+    >
       <h3>{{ $t("Podcast doesn't exist") }}</h3>
     </div>
   </div>
 </template>
-<style lang="scss">
-.title-page-podcast {
-  font-size: 0.9rem;
-}
 
-.date-text-zone {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-  @media (max-width: 600px) {
-    display: initial;
-    .duration {
-      margin-left: 0 !important;
-    }
-  }
-}
-.share-container {
-  @media (max-width: 960px) {
-    flex-grow: 1;
-  }
-}
-</style>
 <script lang="ts">
-// @ is an alias to /src
-import RecordingItemButton from '@/components/display/studio/RecordingItemButton.vue';
-import EditBox from '@/components/display/edit/EditBox.vue';
-import SharePlayer from '../display/sharing/SharePlayer.vue';
-import ShareButtons from '../display/sharing/ShareButtons.vue';
 import PodcastInlineList from '../display/podcasts/PodcastInlineList.vue';
 import PodcastImage from '../display/podcasts/PodcastImage.vue';
-import CommentSection from '../display/comments/CommentSection.vue';
-import TagList from '../display/podcasts/TagList.vue';
-import SubscribeButtons from '../display/sharing/SubscribeButtons.vue';
-import Countdown from '../display/live/CountDown.vue';
+import ParticipantDescription from '../display/podcasts/ParticipantDescription.vue';
 const octopusApi = require('@saooti/octopus-api');
 import studioApi from '@/api/studio';
 import { state } from '../../store/paramStore';
-import ErrorMessage from '../misc/ErrorMessage.vue';
 const moment = require('moment');
 const humanizeDuration = require('humanize-duration');
 import { displayMethods } from '../mixins/functions';
+import { Podcast } from '@/store/class/podcast';
+import { Conference } from '@/store/class/conference';
 
-import { defineComponent, ref } from 'vue'
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
+const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
+const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
+const TagList = defineAsyncComponent(() => import('../display/podcasts/TagList.vue'));
+const SubscribeButtons = defineAsyncComponent(() => import('../display/sharing/SubscribeButtons.vue'));
+const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
+const Countdown = defineAsyncComponent(() => import('../display/live/CountDown.vue'));
+const CommentSection = defineAsyncComponent(() => import('../display/comments/CommentSection.vue'));
+const ErrorMessage = defineAsyncComponent(() => import('../misc/ErrorMessage.vue'));
 export default defineComponent({
+  name: "Podcast",
   components: {
     PodcastInlineList,
     PodcastImage,
+    ParticipantDescription,
     ShareButtons,
     SharePlayer,
     EditBox,
@@ -295,92 +288,61 @@ export default defineComponent({
     ErrorMessage,
   },
 
-  mixins: [displayMethods],
-  emits: ['podcastTitle', 'playPodcast', 'initConferenceId'],
+  mixins:[displayMethods],
 
-  async mounted() {
-    await this.getPodcastDetails(this.podcastId);
-    if (!this.isLiveReadyToRecord) return;
-    if (this.isOctopusAndAnimator) {
-      let data = await studioApi.getConference(
-        this.$store,
-        this.podcast.conferenceId
-      );
-      if ('' !== data.data) {
-        this.fetchConference = data.data;
-      } else {
-        this.fetchConference = 'null';
-      }
-    } else {
-      let data = await studioApi.getRealConferenceStatus(
-        this.$store,
-        this.podcast.conferenceId
-      );
-      this.fetchConference = {
-        status: data.data,
-        conferenceId: this.podcast.conferenceId,
-      };
-    }
-    if (
-      'null' !== this.fetchConference &&
-      'PUBLISHING' !== this.fetchConference.status &&
-      'DEBRIEFING' !== this.fetchConference.status
-    ) {
-      this.$emit('initConferenceId', this.podcast.conferenceId);
-    }
+  props: {
+    updateStatus: { default: undefined, type: String},
+    playingPodcast: { default: undefined, type: Object as ()=> Podcast},
+    podcastId: { default: 0, type: Number},
+    isEducation: { default: false, type: Boolean},
   },
 
-  props: ['podcastId', 'playingPodcast', 'updateStatus', 'isEducation'],
+  emits: ['initConferenceId', 'podcastTitle', 'playPodcast'],
 
   data() {
     return {
-      loaded: false,
-      podcast: undefined as any,
-      error: false,
-      exclusive: false,
-      notExclusive: false,
-      fetchConference: undefined as any,
-    };
-  },
-  setup() {
-    const commentSection:any =ref(null);
-    return {
-      commentSection,
+      loaded: false as boolean,
+      podcast: undefined as Podcast|undefined,
+      error: false as boolean,
+      exclusive: false as boolean,
+      notExclusive: false as boolean,
+      fetchConference: undefined as Conference|undefined,
     };
   },
 
   computed: {
-    isPodcastmaker() {
+    isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker;
     },
-    isEditBox() {
+    isEditBox(): boolean {
       return state.podcastPage.EditBox;
     },
-    isShareButtons() {
+    isShareButtons(): boolean {
       return state.podcastPage.ShareButtons;
     },
-    isSharePlayer() {
+    isSharePlayer(): boolean {
       return state.podcastPage.SharePlayer;
     },
-    allCategories() {
-      return state.generalParameters.allCategories;
+    allCategories(): any {
+      return this.$store.state.categories;
     },
-    organisationId() {
+    organisationId(): string {
       return state.generalParameters.organisationId;
     },
-    authenticated():boolean {
+    authenticated(): boolean {
       return state.generalParameters.authenticated;
     },
-    isOuestFrance() {
+    isOuestFrance(): boolean {
       return state.podcastPage.ouestFranceStyle;
     },
-    isTagList() {
+    isTagList(): boolean {
       return state.podcastPage.tagList;
     },
-    isDownloadButton() {
+    isDownloadButton(): boolean {
       return state.podcastPage.downloadButton;
     },
-    emissionMainCategory():any {
+    emissionMainCategory(): number {
+      if(!this.podcast){return 0;}
       if (
         this.podcast.emission.annotations &&
         this.podcast.emission.annotations.mainIabId
@@ -394,47 +356,47 @@ export default defineComponent({
       }
       return 0;
     },
-
-    categories():any {
+    categories(): any {
       if ('undefined' === typeof this.podcast) return '';
       return this.allCategories
-        .filter((item:any) => {
-          return (
+        .filter((item: any) => {
+          return ( this.podcast &&
             this.podcast.emission.iabIds &&
             -1 !== this.podcast.emission.iabIds.indexOf(item.id)
           );
         })
-        .sort((a:any, b:any) => {
+        .sort((a: any, b: any) => {
           if (a.id === this.emissionMainCategory) return -1;
           if (b.id === this.emissionMainCategory) return 1;
           return 0;
         });
     },
-
-    date():string {
-      if (1970 !== moment(this.podcast.pubDate).year())
-        return moment(this.podcast.pubDate).format('D MMMM YYYY [à] HH[h]mm');
+    date(): string {
+      if (this.podcast && 1970 !== moment(this.podcast.pubDate).year()){
+        if('fr' === this.$i18n.locale){
+          return moment(this.podcast.pubDate).format('D MMMM YYYY [à] HH[h]mm');
+        }
+        return moment(this.podcast.pubDate).format('D MMMM YYYY [at] HH[h]mm');
+      }
       return '';
     },
-
-    duration():string {
-      if (this.podcast.duration <= 1) return '';
+    duration(): string {
+      if (!this.podcast || this.podcast.duration <= 1) return '';
       if (this.podcast.duration > 600000) {
         return humanizeDuration(this.podcast.duration, {
-          language: 'fr',
+          language: this.$i18n.locale,
           largest: 1,
           round: true,
         });
       }
       return humanizeDuration(this.podcast.duration, {
-        language: 'fr',
+        language: this.$i18n.locale,
         largest: 2,
         round: true,
       });
     },
-
-    editRight() {
-      if (
+    editRight(): boolean {
+      if ( this.podcast &&
         (this.authenticated &&
           this.organisationId === this.podcast.organisation.id) ||
         state.generalParameters.isAdmin
@@ -442,7 +404,7 @@ export default defineComponent({
         return true;
       return false;
     },
-    isReady() {
+    isReady(): boolean {
       /* if(this.podcast && this.podcast.processingStatus !== "PLANNED" && this.podcast.processingStatus !== "PROCESSING"){
         return true;
       }else{
@@ -450,63 +412,64 @@ export default defineComponent({
       } */
       return true;
     },
-    countLink() {
+    countLink(): number {
       let count = 0;
-      if (this.podcast.emission && this.podcast.emission.annotations) {
+      if (this.podcast && this.podcast.emission && this.podcast.emission.annotations) {
+        if (undefined !== this.podcast.emission.annotations.amazon) count++;
         if (undefined !== this.podcast.emission.annotations.applePodcast)
           count++;
         if (undefined !== this.podcast.emission.annotations.deezer) count++;
         if (undefined !== this.podcast.emission.annotations.spotify) count++;
         if (undefined !== this.podcast.emission.annotations.tunein) count++;
-        if (undefined !== this.podcast.emission.annotations.tootak) count++;
         if (undefined !== this.podcast.emission.annotations.radioline) count++;
+        if (undefined !== this.podcast.emission.annotations.podcastAddict) count++;
+        if (undefined !== this.podcast.emission.annotations.playerFm) count++;
+        if (undefined !== this.podcast.emission.annotations.stitcher) count++;
       }
       return count;
     },
-    isLiveReadyToRecord():boolean {
-      return (
-        this.podcast.conferenceId &&
-        0 !== this.podcast.conferenceId &&
-        'READY_TO_RECORD' === this.podcast.processingStatus
-      );
+    isLiveReadyToRecord(): boolean {
+      return (undefined!==this.podcast && undefined!==this.podcast.conferenceId && 0 !== this.podcast.conferenceId && 'READY_TO_RECORD' === this.podcast.processingStatus);
     },
-    isLiveReady():boolean {
+    isLiveReady(): boolean {
       return (
-        this.podcast.conferenceId &&
+        undefined!==this.podcast &&
+        undefined!==this.podcast.conferenceId &&
         0 !== this.podcast.conferenceId &&
         'READY' === this.podcast.processingStatus
       );
     },
-    isCounter():boolean {
+    isCounter(): boolean {
       return (
         this.isLiveReadyToRecord &&
-        this.fetchConference &&
+        undefined!==this.fetchConference &&
         ('PLANNED' === this.fetchConference.status ||
           'PENDING' === this.fetchConference.status)
       );
     },
-    isNotRecorded():boolean {
+    isNotRecorded(): boolean {
       return (
         this.isLiveReadyToRecord &&
-        this.fetchConference &&
+        undefined!==this.fetchConference &&
         'DEBRIEFING' === this.fetchConference.status
       );
     },
-    isOctopusAndAnimator() {
+    isOctopusAndAnimator(): boolean {
       return (
         !this.isPodcastmaker &&
         this.editRight &&
         state.generalParameters.isRoleLive
       );
     },
-    titlePage():string {
-      if (this.isLiveReadyToRecord) return this.$t('Live episode');
-      return this.$t('Episode');
+    titlePage(): string {
+      if (this.isLiveReadyToRecord) return this.$t('Live episode').toString();
+      return this.$t('Episode').toString();
     },
-    timeRemaining():string {
+    timeRemaining(): string {
+      if(!this.podcast){return "";}
       return moment(this.podcast.pubDate).diff(moment(), 'seconds');
     },
-    podcastNotValid() {
+    podcastNotValid(): boolean {
       if (
         this.podcast &&
         this.podcast.availability &&
@@ -516,14 +479,56 @@ export default defineComponent({
       return false;
     },
   },
-
+  watch: {
+    updateStatus(): void {
+      if (this.fetchConference && null !== this.fetchConference) {
+        this.fetchConference.status = this.updateStatus;
+      }
+    },
+    podcastId(): void {
+      this.loaded = false;
+      this.error = false;
+      this.getPodcastDetails(this.podcastId);
+    },
+  },
+  
+  async mounted() {
+    await this.getPodcastDetails(this.podcastId);
+    if (!this.podcast) return;
+    if (!this.isLiveReadyToRecord) return;
+    if (this.isOctopusAndAnimator && undefined!==this.podcast.conferenceId) {
+      const data: any = await studioApi.getConference(this.$store.state,this.podcast.conferenceId.toString());
+      if ('' !== data.data) {
+        this.fetchConference = data.data;
+      } else {
+        this.fetchConference = {conferenceId:-1, title:''};
+      }
+    } else if(undefined!==this.podcast.conferenceId){
+      const data: any = await octopusApi.getRealConferenceStatus(this.podcast.conferenceId.toString());
+      this.fetchConference = {
+        status: data.data,
+        conferenceId: this.podcast.conferenceId,
+        title:'',
+      };
+    }
+    if (
+      this.fetchConference && 
+      -1 !== this.fetchConference.conferenceId &&
+      'PUBLISHING' !== this.fetchConference.status &&
+      'DEBRIEFING' !== this.fetchConference.status
+    ) {
+      this.$emit('initConferenceId', this.podcast.conferenceId);
+    }
+  },
+  
+  
   methods: {
-    updatePodcast(podcastUpdated: any) {
+    updatePodcast(podcastUpdated: Podcast): void {
       this.podcast = podcastUpdated;
     },
-    async getPodcastDetails(podcastId: any) {
+    async getPodcastDetails(podcastId: number): Promise<void> {
       try {
-        let data = await octopusApi.fetchPodcast(podcastId);
+        const data : Podcast = await octopusApi.fetchPodcast(podcastId);
         this.podcast = data;
         this.$emit('podcastTitle', this.podcast.title);
         if (
@@ -562,36 +567,45 @@ export default defineComponent({
         this.loaded = true;
       }
     },
-    getName(person: { firstName: string; lastName: string; }) {
+    getName(person: any): string {
       const first = person.firstName || '';
       const last = person.lastName || '';
       return (first + ' ' + last).trim();
     },
-    playPodcast(podcast: any) {
+    playPodcast(podcast: Podcast): void {
       this.$emit('playPodcast', podcast);
     },
-    removeDeleted() {
+    removeDeleted(): void {
       if (window.history.length > 1) {
         this.$router.go(-1);
       } else {
         this.$router.push('/');
       }
     },
-    receiveCommentEvent(event: any) {
-      this.commentSection.receiveCommentEvent(event);
-    },
-  },
-  watch: {
-    updateStatus() {
-      if (this.fetchConference && null !== this.fetchConference) {
-        this.fetchConference.status = this.updateStatus;
-      }
-    },
-    podcastId(val) {
-      this.loaded = false;
-      this.error = false;
-      this.getPodcastDetails(val);
+    receiveCommentEvent(event: any): void {
+      (this.$refs.commentSection as any).receiveCommentEvent(event);
     },
   },
-});
+})
 </script>
+
+<style lang="scss">
+.title-page-podcast {
+  font-size: 0.9rem;
+}
+.width-fit-content{
+  width: fit-content;
+}
+
+.date-text-zone {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+  @media (max-width: 600px) {
+    display: initial;
+    .duration {
+      margin-left: 0 !important;
+    }
+  }
+}
+</style>