@saooti/octopus-sdk 31.0.26 → 31.0.29

package/src/components/pages/Podcast.vue

@@ -2,7 +2,7 @@
   <div class="page-box">
     <template v-if="loaded && !error">
       <div class="page-podcast-title">
-        <h1 v-if="!isOuestFrance">
+        <h1>
           {{ titlePage }}
         </h1>
         <Countdown
@@ -27,9 +27,8 @@
             @validatePodcast="updatePodcast"
           />
           <EditBox
-            v-else-if="editRight && isEditBox"
+            v-else-if="editRight && pageParameters.isEditBox"
             :podcast="podcast"
-            :is-ready="true"
             @validatePodcast="updatePodcast"
           />
           <PodcastModuleBox
@@ -38,53 +37,50 @@
             :fetch-conference="fetchConference"
           />
           <SubscribeButtons
-            v-if="isShareButtons && countLink >= 1"
+            v-if="pageParameters.isShareButtons && countLink >= 1"
             :emission="podcast.emission"
           />
         </div>
         <div
           class="d-flex flex-column flex-grow-mobile"
-          :class="authenticated || notExclusive ? 'flex-grow-1' : ''"
         >
           <SharePlayer
-            v-if="isSharePlayer && (authenticated || notExclusive)"
+            v-if="pageParameters.isSharePlayer && (authenticated || notExclusive)"
             :podcast="podcast"
             :emission="podcast.emission"
             :exclusive="exclusive"
             :not-exclusive="notExclusive"
-            :organisation-id="organisationId"
+            :organisation-id="myOrganisationId"
             :is-education="isEducation"
           />
           <ShareButtons
-            v-if="isShareButtons"
+            v-if="pageParameters.isShareButtons"
             :podcast="podcast"
             :not-exclusive="notExclusive"
           />
         </div>
       </div>
-      <template v-if="!isOuestFrance">
-        <CommentSection
-          v-if="!isPodcastmaker"
-          ref="commentSection"
-          :podcast="podcast"
-          :fetch-conference="fetchConference"
-        />
-        <PodcastInlineList
-          class="mt-4"
-          :emission-id="podcast.emission.emissionId"
-          :href="'/main/pub/emission/' + podcast.emission.emissionId"
-          :title="$t('More episodes of this emission')"
-          :button-text="$t('All podcast emission button')"
-        />
-        <PodcastInlineList
-          v-for="c in categories"
-          :key="c.id"
-          :iab-id="c.id"
-          :href="'/main/pub/category/' + c.id"
-          :title="$t('More episodes of this category : ', { name: c.name })"
-          :button-text="$t('All podcast button', { name: c.name })"
-        />
-      </template>
+      <CommentSection
+        v-if="!isPodcastmaker"
+        ref="commentSection"
+        :podcast="podcast"
+        :fetch-conference="fetchConference"
+      />
+      <PodcastInlineList
+        class="mt-4"
+        :emission-id="podcast.emission.emissionId"
+        :href="'/main/pub/emission/' + podcast.emission.emissionId"
+        :title="$t('More episodes of this emission')"
+        :button-text="$t('All podcast emission button')"
+      />
+      <PodcastInlineList
+        v-for="c in categories"
+        :key="c.id"
+        :iab-id="c.id"
+        :href="'/main/pub/category/' + c.id"
+        :title="$t('More episodes of this category : ', { name: c.name })"
+        :button-text="$t('All podcast button', { name: c.name })"
+      />
     </template>
     <ClassicLoading
       :loading-text="!loaded?$t('Loading content ...'):undefined"
@@ -94,6 +90,7 @@
 </template>
 
 <script lang="ts">
+import { orgaComputed } from '../mixins/orgaComputed';
 import PodcastInlineList from '../display/podcasts/PodcastInlineList.vue';
 import PodcastModuleBox from '../display/podcasts/PodcastModuleBox.vue';
 import ClassicLoading from '../form/ClassicLoading.vue';
@@ -131,7 +128,7 @@ export default defineComponent({
     ClassicLoading
   },
 
-  mixins: [handle403],
+  mixins: [handle403, orgaComputed],
 
   props: {
     updateStatus: { default: undefined, type: String},
@@ -157,26 +154,12 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    isEditBox(): boolean {
-      return (state.podcastPage.EditBox as boolean);
-    },
-    isShareButtons(): boolean {
-      return (state.podcastPage.ShareButtons as boolean);
-    },
-    isSharePlayer(): boolean {
-      return (state.podcastPage.SharePlayer as boolean);
-    },
-    allCategories(): Array<Category> {
-      return this.$store.state.categories;
-    },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
-    isOuestFrance(): boolean {
-      return (state.podcastPage.ouestFranceStyle as boolean);
+    pageParameters(){
+      return {
+        isEditBox : (state.podcastPage.EditBox as boolean),
+        isShareButtons: (state.podcastPage.ShareButtons as boolean),
+        isSharePlayer: (state.podcastPage.SharePlayer as boolean),
+      };
     },
     emissionMainCategory(): number {
       if(!this.podcast){return 0;}
@@ -195,7 +178,7 @@ export default defineComponent({
     },
     categories(): Array<Category> {
       if ('undefined' === typeof this.podcast) return [];
-      return this.allCategories
+      return this.$store.state.categories
         .filter((item: Category) => {
           return ( this.podcast &&
             this.podcast.emission.iabIds &&
@@ -211,7 +194,7 @@ export default defineComponent({
     editRight(): boolean {
       if ( this.podcast &&
         (this.authenticated &&
-          this.organisationId === this.podcast.organisation.id) ||
+          this.myOrganisationId === this.podcast.organisation.id) ||
         state.generalParameters.isAdmin
       ){
         return true;
@@ -223,8 +206,7 @@ export default defineComponent({
       if (this.podcast && this.podcast.emission && this.podcast.emission.annotations) {
         if (undefined !== this.podcast.emission.annotations.amazon) count++;
         if (undefined !== this.podcast.emission.annotations.googlePodcasts) count++;
-        if (undefined !== this.podcast.emission.annotations.applePodcast)
-          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++;
@@ -269,9 +251,6 @@ export default defineComponent({
       if(!this.podcast){return "";}
       return moment(this.podcast.pubDate).diff(moment(), 'seconds').toString();
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
   },
   watch: {
     updateStatus(): void {
@@ -279,44 +258,38 @@ export default defineComponent({
         this.fetchConference.status = this.updateStatus;
       }
     },
-    podcastId(): void {
-      this.loaded = false;
-      this.error = false;
-      this.getPodcastDetails(this.podcastId);
+    podcastId: {
+      immediate: true,
+      async handler() {
+        await this.getPodcastDetails();
+        this.initConference();
+      },
     },
   },
   
-  async mounted() {
-    await this.getPodcastDetails(this.podcastId);
-    if (!this.podcast) return;
-    if (!this.isLiveReadyToRecord) return;
-    if (this.isOctopusAndAnimator && undefined!==this.podcast.conferenceId) {
-      const data = await studioApi.getConference(this.$store.state,this.podcast.conferenceId.toString());
-      if (data) {
-        this.fetchConference = data;
-      } else {
-        this.fetchConference = {conferenceId:-1, title:''};
-      }
-    } else if(undefined!==this.podcast.conferenceId){
-      const data = await octopusApi.getRealConferenceStatus(this.podcast.conferenceId.toString());
-      this.fetchConference = {
-        status: 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: {
+    async initConference(){
+      if (!this.podcast || !this.isLiveReadyToRecord) return;
+      if (this.isOctopusAndAnimator && undefined!==this.podcast.conferenceId) {
+        const data = await studioApi.getConference(this.$store.state,this.podcast.conferenceId.toString());
+        this.fetchConference = data ? data : {conferenceId:-1, title:''};
+      } else if(undefined!==this.podcast.conferenceId){
+        const data = await octopusApi.getRealConferenceStatus(this.podcast.conferenceId.toString());
+        this.fetchConference = {
+          status: 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);
+      }
+    },
     updatePodcast(podcastUpdated: Podcast): void {
       this.podcast = podcastUpdated;
     },
@@ -324,36 +297,42 @@ export default defineComponent({
       this.error = true;
       this.loaded = true;
     },
-    async getPodcastDetails(podcastId: number): Promise<void> {
+    handleAnnotations(){
+      if(!this.podcast){return;}
+      if (
+        this.podcast.emission.annotations &&
+        this.podcast.emission.annotations.exclusive
+      ) {
+        this.exclusive =
+          'true' === this.podcast.emission.annotations.exclusive
+            ? true
+            : false;
+        this.exclusive =
+          this.exclusive &&
+          this.myOrganisationId !== this.podcast.organisation.id;
+      }
+      if (
+        this.podcast.emission.annotations &&
+        this.podcast.emission.annotations.notExclusive
+      ) {
+        this.notExclusive =
+          'true' === this.podcast.emission.annotations.notExclusive
+            ? true
+            : false;
+      }
+    },
+    async getPodcastDetails(): Promise<void> {
+      this.loaded = false;
+      this.error = false;
       try {
-        const data : Podcast = await octopusApi.fetchPodcast(podcastId.toString());
+        const data : Podcast = await octopusApi.fetchPodcast(this.podcastId.toString());
         if("PUBLIC"!==data.organisation.privacy && this.filterOrga!==data.organisation.id){
           this.initError();
           return;
         }
         this.podcast = data;
         this.$emit('podcastTitle', this.podcast.title);
-        if (
-          this.podcast.emission.annotations &&
-          this.podcast.emission.annotations.exclusive
-        ) {
-          this.exclusive =
-            'true' === this.podcast.emission.annotations.exclusive
-              ? true
-              : false;
-          this.exclusive =
-            this.exclusive &&
-            this.organisationId !== this.podcast.organisation.id;
-        }
-        if (
-          this.podcast.emission.annotations &&
-          this.podcast.emission.annotations.notExclusive
-        ) {
-          this.notExclusive =
-            'true' === this.podcast.emission.annotations.notExclusive
-              ? true
-              : false;
-        }
+        this.handleAnnotations();
         if (
           (!this.podcast.availability.visibility ||
             ('READY_TO_RECORD' !== this.podcast.processingStatus &&

package/src/components/pages/Podcasts.vue

@@ -3,19 +3,14 @@
     <div
       class="d-flex"
       :class="
-        isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
+        pageParameters.isEmissionChooser ? 'justify-content-between' : 'justify-content-center'
       "
     >
       <h1 class="flex-shrink-0">
-        <template v-if="undefined === titlePage">
-          {{ $t('All podcasts') }}
-        </template>
-        <template v-else>
-          {{ titlePage }}
-        </template>
+        {{ titleDisplay }}
       </h1>
       <EmissionChooser
-        v-if="isEmissionChooser"
+        v-if="pageParameters.isEmissionChooser"
         :defaultanswer="$t('No emission filter')"
         width="auto"
         class="ms-3"
@@ -23,7 +18,7 @@
       />
     </div>
     <ProductorSearch
-      v-if="isProductorSearch"
+      v-if="pageParameters.isProductorSearch"
       :organisation-id="organisationId"
       :search-pattern="searchPattern"
       @updateOrganisationId="updateOrganisationId"
@@ -33,18 +28,18 @@
       :is-education="isEducation"
       :is-emission="false"
       :reset-rubriquage="resetRubriquage"
-      :is-search-bar="isProductorSearch"
+      :is-search-bar="pageParameters.isProductorSearch"
       :sort-criteria="sortCriteria"
-      :includeHidden="includeHidden"
+      :include-hidden="includeHidden"
       :organisation-id="organisationId"
-      @updateCategory="updateCategory"
+      @updateCategory="iabId=$event"
       @updateRubriquageFilter="updateRubriquageFilter"
-      @updateMonetization="updateMonetization"
-      @updateFromDate="updateFromDate"
-      @updateToDate="updateToDate"
-      @updateSortCriteria="updateSortCriteria"
-      @includeHidden="updateHidden"
-      @notValid="updateNotValid"
+      @updateMonetization="monetization = $event"
+      @updateFromDate="fromDate = $event"
+      @updateToDate="toDate = $event"
+      @updateSortCriteria="sortCriteria=$event"
+      @includeHidden="includeHidden = $event"
+      @notValid="notValid = $event"
     />
     <PodcastList
       :show-count="true"
@@ -68,32 +63,30 @@
 </template>
 
 <script lang="ts">
+import { orgaComputed } from '../mixins/orgaComputed';
 import PodcastList from '../display/podcasts/PodcastList.vue';
 import { state } from '../../store/paramStore';
 import ProductorSearch from '../display/filter/ProductorSearch.vue';
 import AdvancedSearch from '../display/filter/AdvancedSearch.vue';
 import { Emission } from '@/store/class/general/emission';
-import { Category } from '@/store/class/general/category';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 const EmissionChooser = defineAsyncComponent(() => import('../display/emission/EmissionChooser.vue'));
 export default defineComponent({
   name:"Podcasts",
-
   components: {
     PodcastList,
     ProductorSearch,
     EmissionChooser,
     AdvancedSearch,
   },
-
+  mixins:[orgaComputed],
   props: {
     productor: { default: undefined, type: String},
     isEducation: { default: false, type: Boolean},
     searchInit: { default: "", type: String}
   },
-
   data() {
     return {
       first: 0 as number,
@@ -116,17 +109,11 @@ export default defineComponent({
   },
 
   computed: {
-    rubriqueFilter(): Array<RubriquageFilter>{
-      return this.$store.state.filter.rubriqueFilter;
-    },
-    categoryFilter(): Category|undefined{
-      return this.$store.state.filter.iab;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
-    myOrganisationId(): string|undefined {
-      return state.generalParameters.organisationId;
+    titleDisplay(): string{
+      if(undefined === state.podcastsPage.titlePage){
+        return this.$t('All podcasts');
+      }
+      return state.podcastsPage.titlePage;
     },
     organisationRight(): boolean {
       if (
@@ -136,62 +123,30 @@ export default defineComponent({
         return true;
       return false;
     },
-    filterOrga(): string|undefined {
-      return this.$store.state.filter.organisationId;
-    },
     organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
       if (this.filterOrga) return this.filterOrga;
       return undefined;
     },
-    isProductorSearch(): boolean {
-      return (state.podcastsPage.ProductorSearch as boolean);
-    },
-    titlePage(): string|undefined {
-      return state.podcastsPage.titlePage;
-    },
-    isEmissionChooser(): boolean {
-      return (state.podcastsPage.emissionChooser as boolean);
-    },
+    pageParameters(){
+      return {
+        isProductorSearch: state.podcastsPage.ProductorSearch,
+        isEmissionChooser: state.podcastsPage.emissionChooser
+      }
+    }
   },
 
   created() {
-    if(this.searchInit){
-      this.searchPattern = this.searchInit;
-    }
-    if (this.productor) {
-      this.organisationId = this.productor;
-    } else if (this.$store.state.filter.organisationId) {
-      this.organisationId = this.$store.state.filter.organisationId;
-    }
-    if (this.organisation && this.organisationRight) {
-      this.includeHidden = true;
-    }
-    if(this.categoryFilter){
-      this.iabId = this.categoryFilter.id;
-    }
-    if(this.rubriqueFilter.length){
-      this.updateRubriquageFilter(this.rubriqueFilter);
+    this.searchPattern = this.searchInit ? this.searchInit : '';
+    this.organisationId = this.productor ? this.productor : this.filterOrga;
+    this.includeHidden = this.organisation && this.organisationRight ? true : false;
+    this.iabId = this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined;
+    if(this.$store.state.filter.rubriqueFilter.length){
+      this.updateRubriquageFilter(this.$store.state.filter.rubriqueFilter);
     }
   },
   
-  
   methods: {
-    updateCategory(value: number|undefined){
-      this.iabId = value;
-    },
-    updateSortCriteria(value: string): void {
-      this.sortCriteria = value;
-    },
-    updateHidden(value: boolean): void {
-      this.includeHidden = value;
-    },
-    updateToDate(value: string): void {
-      this.toDate = value;
-    },
-    updateFromDate(value: string): void {
-      this.fromDate = value;
-    },
     updateRubriquageFilter(value: Array<RubriquageFilter>){
       const length = value.length;
       const allRubriquageId: Array<number>= [];
@@ -218,25 +173,11 @@ export default defineComponent({
       this.organisationId = value;
     },
     updateSearchPattern(value: string): void {
-      if ('' !== value) {
-        this.sortCriteria = 'SCORE';
-      } else {
-        this.sortCriteria = 'DATE';
-      }
+      this.sortCriteria = '' !== value ? 'SCORE' : 'DATE';
       this.searchPattern = value;
     },
-    updateMonetization(value: string): void {
-      this.monetization = value;
-    },
-    updateNotValid(value: boolean): void {
-      this.notValid = value;
-    },
     emissionSelected(emission: Emission): void {
-      if (emission && emission.emissionId) {
-        this.emissionId = emission.emissionId;
-      } else {
-        this.emissionId = undefined;
-      }
+      this.emissionId = emission && emission.emissionId ? emission.emissionId : undefined;
     },
   },
 })

package/src/components/pages/Rubrique.vue

@@ -15,37 +15,26 @@ import PodcastList from '../display/podcasts/PodcastList.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name:"Rubrique",
-
   components: {
     PodcastList,
   },
-
   props: {
     firstRoute: { default: 0, type: Number},
     sizeRoute: { default: 12, type: Number},
     rubriqueId: { default: undefined, type:  [ Number ]},
   },
-
   data() {
     return {
       title: '' as string,
     };
   },
-
   watch: {
-    rubriqueId(): void {
-      this.extractTitle();
-    },
-  },
-
-  mounted() {
-    this.extractTitle();
-  },
-
-  methods: {
-    async extractTitle(): Promise<void> {
-      const data = await octopusApi.fetchRubric(this.rubriqueId);
-      this.title = data.name;
+    rubriqueId: {
+      immediate: true,
+      async handler() {
+        const data = await octopusApi.fetchRubric(this.rubriqueId);
+        this.title = data.name;
+      },
     },
   },
 })

package/src/components/pages/Search.vue

@@ -1,16 +1,6 @@
 <template>
   <div class="page-box">
-    <h1>
-      <template v-if="!hideBar">
-        {{ $t('Podcast search') }}
-      </template>
-      <template v-else-if="!noResult">
-        {{ $t('Search results', { query: rawQuery }) }}
-      </template>
-      <template v-else>
-        {{ $t('Search - no results', { query: rawQuery }) }}
-      </template>
-    </h1>
+    <h1>{{ titlePage }}</h1>
     <ClassicSearch
       v-if="!hideBar"
       v-model:textInit="rawQuery"
@@ -23,7 +13,7 @@
       :query="query"
       :first="0"
       :size="20"
-      @emptyList="onListEmpty"
+      @emptyList="noResult = true"
     />
   </div>
 </template>
@@ -35,24 +25,29 @@ import PodcastList from '../display/podcasts/PodcastList.vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: "Search",
-
   components: {
     PodcastList,
     ClassicSearch
   },
-
   props: {
     queryRoute: { default: '', type: String },
   },
-  
   data() {
     return {
       rawQuery: '' as string,
       noResult: false as boolean,
     };
   },
-
   computed: {
+    titlePage():string{
+      if(!this.hideBar){
+        return this.$t('Podcast search');
+      }
+      if(!this.noResult){
+        return this.$t('Search results', { query: this.rawQuery })
+      }
+      return this.$t('Search - no results', { query: this.rawQuery });
+    },
     query(): string {
       if (this.rawQuery && this.rawQuery.length >= 3) return this.rawQuery;
       return '';
@@ -61,32 +56,17 @@ export default defineComponent({
       return (state.searchPage.hideBar as boolean);
     },
   },
-
   watch: {
     rawQuery(): void{
       if (this.hideBar) {
         this.noResult = false;
       }
     },
-    query(): void{
-      this.rawQuery = this.query;
-    },
-    queryRoute(): void{
-      this.rawQuery = this.queryRoute;
-    }
-  },
-
-  mounted() {
-    if (this.queryRoute) {
-      this.rawQuery = this.queryRoute;
-    }
-  },
-  
-  methods: {
-    onListEmpty(): void {
-      if (this.hideBar) {
-        this.noResult = true;
-      }
+    queryRoute: {
+      immediate: true,
+      handler() {
+       this.rawQuery = this.queryRoute;
+      },
     },
   },
 })