@saooti/octopus-sdk 41.0.18 → 41.0.20

package/src/components/display/filter/AdvancedSearch.vue

@@ -1,84 +1,113 @@
 <template>
-  <div id="advanced-search" class="d-flex flex-column justify-content-center align-items-center">
-    <button
-      class="d-flex justify-content-center align-items-center mb-3 text-secondary btn-transparent"
-      @click="clickShowFilters"
-    >
-      <div>{{ t("Advanced filters") }}</div>
-      <ChevronDownIcon :class="{ 'arrow-transform': showFilters }" />
-    </button>
-    <Transition name="advanced-search">
-    <div
-      v-if="firstLoaded"
-      v-show="showFilters"
-      class="advanced-search-container"
-    >
-      <fieldset class="d-flex flex-column flex-grow-3">
-        <legend class="text-primary mb-2">
-          {{ t("Filter") }}
-        </legend>
-        <MonetizableFilter
-          v-if="!isPodcastmaker && !generalStore.platformEducation"
-          :is-emission="isEmission"
-          :monetisable="monetisable"
-          @update:monetisable="updateMonetisable"
-        />
-        <CategorySearchFilter :iab-id="iabId" @update:iab-id="updateIab" />
-        <RubriqueFilter
-          :rubrique-filter="rubriqueFilter"
-          @update:rubrique-filter="updateRubriquageFilter"
-        />
-        <DateFilter
-          :is-emission="isEmission"
-          :from-date="fromDate"
-          :to-date="toDate"
-          @update-dates="updateDates($event)"
-        />
-        <div
-          v-if="organisation && organisationRight && !isPodcastmaker"
-          class="d-flex flex-column mt-3"
+    <div id="advanced-search" class="d-flex flex-column justify-content-center align-items-center">
+        <!-- Button to open the advanced filters -->
+        <button
+            class="d-flex justify-content-center align-items-center mb-3 text-secondary btn-transparent"
+            @click="clickShowFilters"
         >
-          <ClassicCheckbox
-            :text-init="includeHidden"
-            class="flex-shrink-0"
-            id-checkbox="search-future-checkbox"
-            :label="textNotVisible"
-            :is-disabled="isSelectValidity && 'true'!==validity"
-            @update:text-init="updateIncludeHidden"
-          />
-        </div>
-        <ClassicSelect
-          v-if="isSelectValidity"
-          :text-init="validity"
-          id-select="valid-episodes-select"
-          :label="t('Episodes to validate')+' :'"
-          :display-label="true"
-          class-label="flex-shrink-0 me-1"
-          class="d-flex align-items-center mt-3 mb-0"
-          :options="[
-            { title: t('Display only episodes to validate'), value: 'false' },
-            { title: t('Display episodes to validate'), value: '' },
-            { title: t('Do not display episodes to validate'), value: 'true' },
-          ]"
-          @update:text-init="updateValidity"
-        />
-        <ClassicCheckbox
-          v-if="!isEmission"
-          :text-init="onlyVideo"
-          class="flex-shrink-0 mt-3"
-          id-checkbox="only-video-checkbox"
-          :label="t('Show only episodes with video')"
-          @update:text-init="updateOnlyVideo"
-        />
-      </fieldset>
-      <SearchOrder
-        :is-emission="isEmission"
-        :sort="sort"
-        @update:sort="updateSort"
-      />
+            <div>{{ t("Advanced filters") }}</div>
+            <ChevronDownIcon :class="{ 'arrow-transform': showFilters }" />
+        </button>
+
+        <!-- Filters -->
+        <Transition name="advanced-search">
+            <div
+                v-if="firstLoaded"
+                v-show="showFilters"
+                class="advanced-search-container"
+            >
+                <fieldset class="d-flex flex-column flex-grow-3">
+                    <legend class="text-primary mb-2">
+                        {{ t("Filter") }}
+                    </legend>
+                    <MonetizableFilter
+                        v-if="!isPodcastmaker && !generalStore.platformEducation"
+                        :is-emission="isEmission"
+                        :monetisable="monetisable"
+                        @update:monetisable="updateMonetisable"
+                    />
+                    <CategorySearchFilter :iab-id="iabId" @update:iab-id="updateIab" />
+                    <RubriqueFilter
+                        :rubrique-filter="rubriqueFilter"
+                        @update:rubrique-filter="updateRubriquageFilter"
+                    />
+
+                    <!-- Date -->
+                    <DateFilter
+                        :is-emission="isEmission"
+                        :from-date="fromDate"
+                        :to-date="toDate"
+                        @update-dates="updateDates($event)"
+                    />
+
+                    <!-- Rights holders/beneficiaries -->
+                    <div v-if="beneficiariesEnabled" class="mt-3 d-flex">
+                        <ClassicCheckbox
+                            :text-init="beneficiaries !== null && beneficiaries !== undefined"
+                            class="flex-shrink-0"
+                            id-checkbox="search-beneficiaries-checkbox"
+                            :label="t('Filters - Beneficiaries')"
+                            @update:text-init="updateBeneficiariesCheckbox"
+                        />
+
+                        <ClassicTagInput
+                            v-if="beneficiaries !== null && beneficiaries !== undefined"
+                            class="ms-4 flex-grow-1"
+                            :tags="beneficiaries"
+                            @update:tags="updateBeneficiaries"
+                        />
+                    </div>
+
+                    <div
+                        v-if="organisation && organisationRight && !isPodcastmaker"
+                        class="d-flex flex-column mt-3"
+                    >
+                        <ClassicCheckbox
+                            :text-init="includeHidden"
+                            class="flex-shrink-0"
+                            id-checkbox="search-future-checkbox"
+                            :label="textNotVisible"
+                            :is-disabled="isSelectValidity && 'true'!==validity"
+                            @update:text-init="updateIncludeHidden"
+                        />
+                    </div>
+
+                    <ClassicSelect
+                        v-if="isSelectValidity"
+                        :text-init="validity"
+                        id-select="valid-episodes-select"
+                        :label="t('Episodes to validate')+' :'"
+                        :display-label="true"
+                        class-label="flex-shrink-0 me-1"
+                        class="d-flex align-items-center mt-3 mb-0"
+                        :options="[
+                            { title: t('Display only episodes to validate'), value: 'false' },
+                            { title: t('Display episodes to validate'), value: '' },
+                            { title: t('Do not display episodes to validate'), value: 'true' },
+                        ]"
+                        @update:text-init="updateValidity"
+                    />
+
+                    <!-- Only with video -->
+                    <ClassicCheckbox
+                        v-if="!isEmission"
+                        :text-init="onlyVideo"
+                        class="flex-shrink-0 mt-3"
+                        id-checkbox="only-video-checkbox"
+                        :label="t('Show only episodes with video')"
+                        @update:text-init="updateOnlyVideo"
+                    />
+                </fieldset>
+
+                <!-- Sort -->
+                <SearchOrder
+                    :is-emission="isEmission"
+                    :sort="sort"
+                    @update:sort="updateSort"
+                />
+            </div>
+        </Transition>
     </div>
-  </Transition>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -92,53 +121,60 @@ import { defineAsyncComponent, ref, computed, watch } from "vue";
 import { useGeneralStore } from "../../../stores/GeneralStore";
 import { useI18n } from "vue-i18n";
 const MonetizableFilter = defineAsyncComponent(
-  () => import("./MonetizableFilter.vue"),
+    () => import("./MonetizableFilter.vue"),
 );
 const CategorySearchFilter = defineAsyncComponent(
-  () => import("./CategorySearchFilter.vue"),
+    () => import("./CategorySearchFilter.vue"),
 );
 const RubriqueFilter = defineAsyncComponent(
-  () => import("./RubriqueFilter.vue"),
+    () => import("./RubriqueFilter.vue"),
 );
 const ClassicSelect = defineAsyncComponent(
-  () => import("../../form/ClassicSelect.vue"),
+    () => import("../../form/ClassicSelect.vue"),
+);
+const ClassicTagInput = defineAsyncComponent(
+    () => import("../../form/ClassicTagInput.vue"),
 );
 const ClassicCheckbox = defineAsyncComponent(
-  () => import("../../form/ClassicCheckbox.vue"),
+    () => import("../../form/ClassicCheckbox.vue"),
 );
 const DateFilter = defineAsyncComponent(() => import("./DateFilter.vue"));
 const SearchOrder = defineAsyncComponent(() => import("./SearchOrder.vue"));
+import { ROUTE_PARAMS } from '../../composable/route/types';
 
 //Props 
 const props = defineProps({
-  organisationId: { default: undefined, type: String },
-  isEmission: { default: false, type: Boolean },
-  includeHidden: { default: false, type: Boolean },
-  sort: { default: "DATE", type: String },
-  onlyVideo: { default: false, type: Boolean },
-  monetisable: { default: "UNDEFINED", type: String },
-  iabId: { default: undefined, type: Number },
-  searchPattern: { default: "", type: String },
-  fromDate: { default: undefined, type: String },
-  toDate: { default: undefined, type: String },
-  validity: { default: 'true', type: String },
-  rubriqueFilter: {
-    default: () => [],
-    type: Array as () => Array<RubriquageFilter>,
-  },
+    organisationId: { default: undefined, type: String },
+    isEmission: { default: false, type: Boolean },
+    includeHidden: { default: false, type: Boolean },
+    sort: { default: "DATE", type: String },
+    onlyVideo: { default: false, type: Boolean },
+    monetisable: { default: "UNDEFINED", type: String },
+    iabId: { default: undefined, type: Number },
+    searchPattern: { default: "", type: String },
+    fromDate: { default: undefined, type: String },
+    toDate: { default: undefined, type: String },
+    validity: { default: 'true', type: String },
+    /** The filter on beneficiaries */
+    beneficiaries: { default: null, type: Array as () => Array<string> },
+    rubriqueFilter: {
+        default: () => [],
+        type: Array as () => Array<RubriquageFilter>,
+    },
 })
 
 //Emits
 const emit = defineEmits([
-  "update:toDate",
-  "update:fromDate",
-  "update:monetisable",
-  "update:iabId",
-  "update:sort",
-  "update:includeHidden",
-  "update:validity",
-  "update:rubriqueFilter",
-  "update:onlyVideo",
+    "update:toDate",
+    "update:fromDate",
+    "update:monetisable",
+    "update:iabId",
+    "update:sort",
+    "update:includeHidden",
+    "update:validity",
+    "update:rubriqueFilter",
+    "update:onlyVideo",
+    "update:beneficiaries"
 ]);
 
 //Data 
@@ -160,96 +196,127 @@ const organisationRight = computed(() => isEditRights(props.organisationId));
 const organisation = computed(() => props.organisationId ?? filterStore.filterOrgaId);
 const textNotVisible = computed(() => props.isEmission ? t("Consider podcasts no visible"): t("See podcasts no visible"));
 const isSelectValidity = computed(() => {
-  return (
-    undefined !== organisation.value &&
-    organisationRight.value &&
-    authStore.isRoleContribution &&
-    !isPodcastmaker &&
-    !props.isEmission &&
-    props.includeHidden
-  );
+    return (
+        undefined !== organisation.value &&
+        organisationRight.value &&
+        authStore.isRoleContribution &&
+        !isPodcastmaker &&
+        !props.isEmission &&
+        props.includeHidden
+    );
+});
+/** The beneficiaries filter is only displayed if beneficiaries are enabled */
+const beneficiariesEnabled = computed(() => {
+    return authStore.authOrganisation.attributes['beneficiaries.enabled'] === 'true';
 });
-
 
 //Watch
 watch(organisation, async () => {
-  const hidden = undefined !== organisation.value && organisationRight.value && !props.isEmission;
-  if (hidden !== props.includeHidden) {
-    updateIncludeHidden(hidden);
-  }
+    const hidden = undefined !== organisation.value && organisationRight.value && !props.isEmission;
+    if (hidden !== props.includeHidden) {
+        updateIncludeHidden(hidden);
+    }
 });
+
 watch(()=>props.searchPattern, (value: string) => {
-  const search = value.trim();
-  let valSort = "SCORE"
-  if(search.length <= 3){
-    valSort = props.isEmission? "LAST_PODCAST_DESC" : "DATE";
-  }
-  updateRouteParamAdvanced({
-    q: search.length ? search : undefined,
-    s: valSort,
-  });
+    const search = value.trim();
+    let valSort = "SCORE"
+    if(search.length <= 3){
+        valSort = props.isEmission? "LAST_PODCAST_DESC" : "DATE";
+    }
+    updateRouteParamAdvanced({
+        q: search.length ? search : undefined,
+        s: valSort,
+    });
 });
 
 //Methods
 function updateMonetisable(value: string): void {
-  emit("update:monetisable", value);
-  updateRouteParamAdvanced({ m: "UNDEFINED" !== value ? value : undefined });
+    emit("update:monetisable", value);
+    updateRouteParamAdvanced({ m: "UNDEFINED" !== value ? value : undefined });
 }
+
 function updateIab(value: number | undefined) {
-  emit("update:iabId", 0 !== value ? value : undefined);
-  let filterIab = {};
-  if (filterStore.filterIab && filterStore.filterIab.id !== value) {
-    filterIab = { iabId: undefined };
-  }
-  updateRouteParamAdvanced({
-    ...{ i: value ? value.toString() : undefined },
-    ...filterIab,
-  });
+    emit("update:iabId", 0 !== value ? value : undefined);
+    let filterIab = {};
+    if (filterStore.filterIab && filterStore.filterIab.id !== value) {
+        filterIab = { iabId: undefined };
+    }
+    updateRouteParamAdvanced({
+        ...{ i: value ? value.toString() : undefined },
+        ...filterIab,
+    });
 }
+
 function updateSort(value: string) {
-  emit("update:sort", value);
-  updateRouteParamAdvanced({ s: value });
+    emit("update:sort", value);
+    updateRouteParamAdvanced({ s: value });
 }
+
 function updateIncludeHidden(value: boolean) {
-  emit("update:includeHidden", value);
-  updateRouteParamAdvanced({ h: value.toString() });
+    emit("update:includeHidden", value);
+    updateRouteParamAdvanced({ h: value.toString() });
 }
+
 function updateValidity(value: boolean) {
-  emit("update:validity", value);
-  updateRouteParamAdvanced({ vl: value.toString() });
+    emit("update:validity", value);
+    updateRouteParamAdvanced({ vl: value.toString() });
 }
+
 function updateOnlyVideo(value: boolean) {
-  emit("update:onlyVideo", value);
-  updateRouteParamAdvanced({ v: value ? "true" : undefined });
+    emit("update:onlyVideo", value);
+    updateRouteParamAdvanced({ v: value ? "true" : undefined });
 }
+
 function updateDates(value: {
-  from: string | undefined;
-  to: string | undefined;
+    from: string | undefined;
+    to: string | undefined;
 }): void {
-  emit("update:fromDate", value.from);
-  emit("update:toDate", value.to);
-  updateRouteParamAdvanced({ from: value.from, to: value.to });
+    emit("update:fromDate", value.from);
+    emit("update:toDate", value.to);
+    updateRouteParamAdvanced({ from: value.from, to: value.to });
 }
+
 function updateRubriquageFilter(value: Array<RubriquageFilter>) {
-  emit("update:rubriqueFilter", value);
-  let filterRubriques = {};
-  const valueString = stringifyRubriquesFilter(value);
-  if (
-    filterStore.filterRubrique.length &&
-    stringifyRubriquesFilter(filterStore.filterRubrique) !== valueString
-  ) {
-    filterRubriques = { rubriquesId: undefined };
-  }
-  updateRouteParamAdvanced({
-    ...{ r: valueString.length ? valueString : undefined },
-    ...filterRubriques,
-  });
+    emit("update:rubriqueFilter", value);
+    let filterRubriques = {};
+    const valueString = stringifyRubriquesFilter(value);
+    if (
+        filterStore.filterRubrique.length &&
+        stringifyRubriquesFilter(filterStore.filterRubrique) !== valueString
+    ) {
+        filterRubriques = { rubriquesId: undefined };
+    }
+    updateRouteParamAdvanced({
+        ...{ r: valueString.length ? valueString : undefined },
+        ...filterRubriques,
+    });
 }
+
+/** Update the beneficiaries filter */
+function updateBeneficiaries(value: string[]|undefined): void {
+    emit('update:beneficiaries', value);
+    if (value === undefined) {
+        updateRouteParamAdvanced({ [ROUTE_PARAMS.Beneficiaries]: undefined });
+    } else {
+        updateRouteParamAdvanced({ [ROUTE_PARAMS.Beneficiaries]: value });
+    }
+}
+
+/** Update the value of the beneficiaries checkbox */
+function updateBeneficiariesCheckbox(value: boolean): void {
+    if (value === true) {
+        emit('update:beneficiaries', []);
+    } else {
+        updateBeneficiaries(undefined);
+    }
+}
+
 function clickShowFilters(): void {
-  if (!firstLoaded.value) {
-    firstLoaded.value = true;
-  }
-  showFilters.value = !showFilters.value;
+    if (!firstLoaded.value) {
+        firstLoaded.value = true;
+    }
+    showFilters.value = !showFilters.value;
 }
 </script>
 

package/src/components/display/list/SwiperList.vue

@@ -5,9 +5,11 @@
         :key="manualReload"
         :slides-per-view="numberItem"
         :space-between="0"
-        :loop="true"
+        :loop="loop"
         :slides-offset-before="offsetSwiper"
         :slides-offset-after="offsetSwiper"
+        :allow-slide-next="loop"
+        :allow-slide-prev="loop"
         :navigation="true"
         :modules="modules"
         @slides-updated="slidesUpdated"
@@ -44,7 +46,6 @@ const props = defineProps({
  
 //Data 
 const manualReload = ref(0);
-const modules = ref([Navigation]);
 const numberItem = ref(5);
 const offsetSwiper = ref(40);
 const widthSwiperUsable = ref(0);
@@ -71,6 +72,18 @@ const sizeItem = computed(() => {
 });
 const itemRecalculizedSize = computed(() => widthSwiperUsable.value / numberItem.value);
 
+/** Indicates that the swiper should loop */
+const loop = computed((): boolean => {
+  return (props.listObject.length > numberItem.value);
+});
+
+const modules = computed(() => {
+  if (loop.value === true) {
+    return [Navigation];
+  } else {
+    return [];
+  }
+});
 
 //Watch
 watch(windowWidth, () => onWindowResize());

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

@@ -47,7 +47,6 @@
             <PodcastItem
               v-if="0 !== p.podcastId"
               :podcast="p"
-              :in-list="true"
             />
 
             <template #preview>

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

@@ -47,7 +47,7 @@
       :podcast="podcast"
       :hide-play="hidePlay"
       :fetch-conference="fetchConference"
-      :in-list="inList"
+      :show-processing="isAuthenticated"
     />
     <button
       v-if="displayDescription && isMobile"
@@ -69,6 +69,7 @@ import { Conference } from "@/stores/class/conference/conference";
 import {useImageProxy} from "../../composable/useImageProxy";
 import { computed, onBeforeMount, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { useAuthStore } from "../../../stores/AuthStore";
 
 //Props 
 const props = defineProps({
@@ -77,9 +78,7 @@ const props = defineProps({
   displayDescription: { default: false, type: Boolean },
   arrowDirection: { default: "up", type: String },
   isAnimatorLive: { default: false, type: Boolean },
-  fetchConference: { default: undefined, type: Object as () => Conference },
-  /** Indicates that the podcast is displayed in a list */
-  inList: { default: false, type: Boolean }
+  fetchConference: { default: undefined, type: Object as () => Conference }
 })
 
 //Emits
@@ -92,6 +91,7 @@ const isMobile = ref(false);
 //Composables
 const { t } = useI18n();
 const { useProxyImageUrl } = useImageProxy();
+const { isAuthenticated } = useAuthStore();
 
 //Computed
 const mainRubrique = computed(() => {

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

@@ -10,7 +10,6 @@
       :display-description="0 !== description.length"
       :arrow-direction="arrowDirection"
       :fetch-conference="fetchConference"
-      :in-list="inList"
       @hide-description="hideDescription"
       @show-description="showDescription"
     />
@@ -50,9 +49,7 @@ import { Conference } from "@/stores/class/conference/conference";
 //Props 
 const props = defineProps({
   podcast: { default: () => ({}), type: Object as () => Podcast },
-  fetchConference: { default: undefined, type: Object as () => Conference },
-  /** Indicates that the podcast is displayed in a list */
-  inList: { default: false, type: Boolean }
+  fetchConference: { default: undefined, type: Object as () => Conference }
 });
 
 //Data 

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

@@ -35,7 +35,6 @@
           <PodcastItem
             v-if="0 !== p.podcastId"
             :podcast="p"
-            in-list
           />
           <template #preview>
             <router-link
@@ -95,6 +94,8 @@ const props = defineProps({
   withVideo: { default: undefined, type: Boolean },
   includeTag:{ default: () => [], type: Array as () => Array<string> },
   forceUpdateParameters: { default: false, type: Boolean },
+  /** The beneficiaries to filter on */
+  beneficiaries: { default: null, type: Array as () => Array<string> }
 })
 
 //Emits
@@ -128,7 +129,7 @@ const changed = computed(() => {
   return `${organisation.value}|${props.emissionId}|${props.sortCriteria}|${sort.value}
     ${props.iabId}|${props.participantId}|${props.query}|${props.monetisable}|${props.popularSort}|
     ${props.rubriqueId}|${props.rubriquageId}|${props.before}|${props.after}|${props.includeHidden}|${props.noRubriquageId}|${props.validity}|
-    ${props.withVideo}|${props.includeTag}`;
+    ${props.withVideo}|${props.includeTag}|${props.beneficiaries}`;
 });
 const organisation = computed(() => {
   if (props.organisationId) {
@@ -201,6 +202,7 @@ async function fetchContent(reset: boolean): Promise<void> {
     includeStatus: ["READY", "PROCESSING"],
     withVideo: props.withVideo,
     includeTag: props.includeTag.length ? props.includeTag : undefined,
+    beneficiary: props.beneficiaries ?? undefined
   };
   try {
     const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({

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

@@ -25,6 +25,7 @@
             : '',
         ]"
         class="me-3"
+        show-processing
         :hide-play="isLiveReadyToRecord"
         :podcast="podcast"
         :playing-podcast="playingPodcast"
@@ -129,8 +130,8 @@
       </div>
     </div>
     <TagList
-      v-if="undefined !== podcast.tags && 0 !== podcast.tags.length"
-      :tag-list="podcast.tags"
+      v-if="undefined !== tags && 0 !== tags.length"
+      :tag-list="tags"
       :orga-id="podcast.organisation.id"
       :podcast-annotations="podcast.annotations"
     />
@@ -260,13 +261,30 @@ const podcastNotValid = computed(() => {
     false === props.podcast?.valid
   );
 });
-const photoCredit = computed(() => (props.podcast?.annotations?.photoCredit as string) ?? "");
-const audioCredit = computed(() => (props.podcast?.annotations?.audioCredit as string) ?? "");
-const authorCredit = computed(() => (props.podcast?.annotations?.authorCredit as string) ?? "");
+const photoCredit = computed(() => formatCredits(props.podcast?.annotations?.photoCredit as string|undefined));
+const audioCredit = computed(() => formatCredits(props.podcast?.annotations?.audioCredit as string|undefined));
+const authorCredit = computed(() => formatCredits(props.podcast?.annotations?.authorCredit as string|undefined));
 const isEditBox = computed(() => !((state.generalParameters.podcastmaker as boolean) ?? false));
-
+/** The tags to display */
+const tags = computed(() => {
+  const tags = [];
+  if(props.podcast.tags) {
+    tags.push(...props.podcast.tags);
+  }
+  // Also display tags defined on emission
+  if(props.podcast.emission.tags) {
+    tags.push(...props.podcast.emission.tags);
+  }
+  return tags;
+});
 
 //Methods
+function formatCredits(credits: string|undefined): string {
+  if (credits === undefined) {
+    return '';
+  }
+  return credits.split(',').map(s => s.trim()).join(', ');
+}
 function urlify(text:string|undefined){
   return displayHelper.urlify(text);
 }