@saooti/octopus-sdk 41.0.17 → 41.0.19

package/src/components/form/ClassicTagInput.vue

@@ -0,0 +1,155 @@
+<template>
+    <div
+        class="d-flex flex-wrap border align-items-center rounded px-2"
+    >
+        <div
+            v-for="(tag, index) in tags"
+            :key="tag"
+            class="vs__selected p-0 my-0 mx-1"
+            :class="getClass(tag)"
+        >
+            <!--<button
+                v-if="index !== tagToEdit"-->
+            <button
+                :id="'display-input-tag-' + index"
+                class="btn-transparent d-flex align-items"
+                @click="startEditTag(index, tag)"
+            >
+                <!--<img
+                    v-if="isOuestFranceTag(tag)"
+                    width="20"
+                    height="20"
+                    class="ouest-france-logo"
+                    title="Ouest France Logo"
+                    aria-hidden="true"
+                    alt=""
+                    src="/img/ouest_france_logo.svg"
+                >-->
+                <span>{{ tag }}</span>
+            </button>
+            <!--<input
+                v-else
+                :id="'form-input-tag-' + index"
+                v-model="tagToEditTempValue"
+                :title="$t('Edit')"
+                @blur="finishEditTag(index)"
+                @keydown.enter="finishEditTag(index)"
+            >-->
+
+            <button class="btn-transparent" @click="removeTag(index)">
+                <CloseIcon />
+            </button>
+        </div>
+        <input
+            v-if="editing"
+            :id="'form-input-tag'"
+            v-model="tagToEditTempValue"
+            :title="$t('Edit')"
+            @blur="finishEditTag"
+            @keydown.enter="finishEditTag"
+        >
+        <button
+            class="btn btn-add-tag m-1"
+            :title="$t('Add a tag')"
+            @click="createNewTag"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import CloseIcon from "vue-material-design-icons/Close.vue";
+
+const { tags, tagClass } = defineProps<{
+    /** Currently selected tags */
+    tags: string[];
+    /** The class to apply to the tags */
+    tagClass?: string|string[]|((tag: string) => string|string[]);
+}>();
+
+const emit = defineEmits<{
+    /** Update tags */
+    (e: 'update:tags', tags: string[]): void
+}>();
+
+//const tagToEdit: Ref<number | undefined> = ref(undefined);
+const editing = ref(false);
+const tagToEditTempValue = ref("");
+
+function getClass(tag: string): string|string[]|undefined {
+    if (typeof tagClass === 'function') {
+        return tagClass(tag);
+    } else {
+        return tagClass;
+    }
+}
+
+function removeTag(index: number): void {
+    const newTags = [...tags];
+    newTags.splice(index, 1);
+    console.log(index, newTags);
+    emit('update:tags', newTags);
+}
+
+function startEditTag(index: number, tag: string): void {
+    //tagToEditTempValue.value = tags[index];
+    //tagToEdit.value = index;
+    // editing.value = true;
+    /*nextTick(() => {
+        document.getElementById("form-input-tag-" + index)?.focus();
+    });*/
+}
+
+function finishEditTag(/*index: number*/): void {
+    /*if (index !== tagToEdit.value) {
+        return;
+    }
+    tagToEdit.value = undefined;
+
+    if (tagToEditTempValue.value.length) {
+        const newTags = [...tags];
+        newTags.splice(
+            index,
+            1,
+            ...tagToEditTempValue.value.split(","),
+        );
+        emit('update:tags', newTags);
+    } else {
+        const newTags = [...tags];
+        newTags.splice(index, 1);
+        emit('update:tags', newTags);
+    }*/
+
+    if (tagToEditTempValue.value === '') {
+        return;
+    }
+
+    const newTags = [...tags, tagToEditTempValue.value];
+    tagToEditTempValue.value = '';
+    editing.value = false;
+    emit('update:tags', newTags);
+}
+
+function createNewTag(): void {
+    /*const newTags = [...tags, ''];
+    emit('update:tags', newTags);
+    startEditTag(tags.length - 1, '');*/
+    editing.value = true;
+}
+
+</script>
+
+<style scoped lang="scss">
+.btn-add-tag {
+    padding: 4px;
+    line-height: 1;
+
+    &::after {
+        content: "+";
+        color: var(--octopus-primary);
+        font-size: 14px;
+        font-weight: bold;
+    }
+}
+</style>

package/src/components/misc/ClassicAlert.vue

@@ -20,7 +20,7 @@
         />
 
         <!-- Main content -->
-        <span class="ms-2">
+        <span class="ms-2 content">
             <strong v-if="title">
                 {{ title }}
                 <br>
@@ -62,6 +62,8 @@ const iconComponent = computed(() => {
         return Alert;
     } else if (type === 'error') {
         return CloseCircle;
+    } else {
+        return null;
     }
 });
 </script>
@@ -76,6 +78,12 @@ const iconComponent = computed(() => {
         align-items: start !important;
     }
 
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-self: center;
+    }
+
     $types: (
         'success': hsl(from var(--octopus-primary) h s 45),
         'info': var(--octopus-primary),

package/src/components/misc/ClassicHelpButton.vue

@@ -17,6 +17,7 @@
         <ClassicPopover
             :target="computedId"
             popover-class="help-popover"
+            :relative-class="relative ? 'page-element' : ''"
         >
             <div class="content">
                 <slot />
@@ -33,6 +34,8 @@ import ClassicPopover from './ClassicPopover.vue';
 
 const { colored, small } = defineProps<{
     colored?: boolean;
+    /** Make the popover relative (userful when in page-element) */
+    relative?: boolean;
     /** Make the icon smaller if true *(default: false)* */
     small?: boolean;
 }>();

package/src/components/misc/ClassicImageBanner.vue

@@ -0,0 +1,33 @@
+<!-- A simple component to display a blur & a banner on an image -->
+<template>
+    <div class="blur-with-banner">
+        <div class="banner">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.blur-with-banner {
+  position: absolute;
+  inset: 0;
+  background-color:var(--octopus-background-transparent);
+  // Allow pointer events to go through (allow click on image beneath blur)
+  pointer-events: none;
+
+  .banner {
+    text-align: center;
+    width: 100%;
+    font-size: 0.6rem;
+    padding: 0.2rem 0;
+    color: white;
+    background: black;
+    text-transform: uppercase;
+    position: absolute;
+    top: 0;
+  }
+}
+</style>

package/src/components/misc/ErrorMessage.vue

@@ -3,11 +3,12 @@
     <div class="d-flex align-items-center bg-warning p-2 rounded my-1">
       <AlertIcon :title="t('Warning')" class="me-1 text-danger" :size="16" />
       <div class="text-danger">
-        {{ message }}
+        <slot>{{ message }}</slot>
       </div>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import AlertIcon from "vue-material-design-icons/Alert.vue";
 import { useI18n } from "vue-i18n";
@@ -19,4 +20,5 @@ defineProps({
 
 //Composables
 const { t } = useI18n();
-</script>
+</script>
+

package/src/components/pages/EmissionPage.vue

@@ -25,7 +25,8 @@
               alt=""
               :title="t('Emission name image', { name: name })"
               class="img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start me-3"
-            />
+            >
+
             <div class="d-flex align-items-center justify-content-between">
               <h2>{{ name }}</h2>
               <ShareAnonymous v-if="!editRight" class="d-flex justify-content-end flex-grow-1" :emission="emission" :organisation-id="emission.orga.id"/>
@@ -36,6 +37,17 @@
               v-html="urlify(description)"
             />
             <!-- eslint-enable -->
+
+            <ErrorMessage v-if="emission.visible === false">
+              <div class="d-flex" style="align-items: center">
+                <div>{{ t('Emission - Not available for listeners') }}</div>
+
+                <ClassicHelpButton relative small>
+                  {{ t('Emission - Not available explanation') }}
+                </ClassicHelpButton>
+              </div>
+            </ErrorMessage>
+
             <div v-if="lastPodcast" class="d-flex align-items-center mt-3">
               <PodcastPlayButton
                 :podcast="lastPodcast"
@@ -45,6 +57,15 @@
                 {{ t("Listen to the latest episode") }}
               </div>
             </div>
+
+            <!-- Tag list -->
+            <TagList
+              v-if="undefined !== emission.tags && 0 !== emission.tags.length"
+              :tag-list="emission.tags"
+              :orga-id="authOrgaId"
+              :emission-annotations="emission.annotations"
+            />
+
             <SubscribeButtons
               v-if="isPodcastmaker"
               class="mt-4"
@@ -116,6 +137,10 @@ import { Podcast } from "@/stores/class/general/podcast";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { useSimplePageParam } from "../composable/route/useSimplePageParam";
+
+import ErrorMessage from "../misc/ErrorMessage.vue";
+import ClassicHelpButton from "../misc/ClassicHelpButton.vue";
+
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
 const PodcastFilterList = defineAsyncComponent(
   () => import("../display/podcasts/PodcastFilterList.vue"),
@@ -144,6 +169,7 @@ const PodcastPlayButton = defineAsyncComponent(
 const PodcastmakerHeader = defineAsyncComponent(
   () => import("../display/podcastmaker/PodcastmakerHeader.vue"),
 );
+const TagList = defineAsyncComponent(() => import("../display/podcasts/TagList.vue"));
 
 
 //Props 
@@ -212,6 +238,11 @@ async function getEmissionDetails(): Promise<void> {
   loaded.value = false;
   error.value = false;
   try {
+    const reponse = await classicApi.fetchData<Emission>({
+      api: 0,
+      path: "emission/" + props.emissionId,
+    });
+    console.log(reponse);
     emission.value = await classicApi.fetchData<Emission>({
       api: 0,
       path: "emission/" + props.emissionId,

package/src/components/pages/EmissionsPage.vue

@@ -1,40 +1,42 @@
 <template>
-  <section v-if="isInit" class="page-box">
-    <slot name="new-emission" />
-    <ProductorSearch
-      v-model:organisation-id="organisationId"
-      v-model:search-pattern="searchPattern"
-      type="emission"
-    />
-    <AdvancedSearch
-      v-model:monetisable="monetisable"
-      v-model:iab-id="iabId"
-      v-model:sort="sort"
-      v-model:include-hidden="includeHidden"
-      v-model:from-date="fromDate"
-      v-model:to-date="toDate"
-      v-model:rubrique-filter="rubriqueFilter"
-      :search-pattern="searchPattern"
-      :is-emission="true"
-      :organisation-id="organisationId"
-    />
-    <EmissionList
-      :show-count="true"
-      :first="paginateFirst"
-      :size="ps"
-      :query="searchMinSize"
-      :organisation-id="organisationId"
-      :monetisable="monetisable"
-      :before="toDate"
-      :after="fromDate"
-      :sort="sort"
-      :include-hidden="includeHidden"
-      :iab-id="iabId"
-      :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
-      :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
-      :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
-    />
-  </section>
+    <section v-if="isInit" class="page-box">
+        <slot name="new-emission" />
+        <ProductorSearch
+            v-model:organisation-id="organisationId"
+            v-model:search-pattern="searchPattern"
+            type="emission"
+        />
+        <AdvancedSearch
+            v-model:monetisable="monetisable"
+            v-model:iab-id="iabId"
+            v-model:sort="sort"
+            v-model:include-hidden="includeHidden"
+            v-model:from-date="fromDate"
+            v-model:to-date="toDate"
+            v-model:rubrique-filter="rubriqueFilter"
+            v-model:beneficiaries="beneficiaries"
+            :search-pattern="searchPattern"
+            :is-emission="true"
+            :organisation-id="organisationId"
+        />
+        <EmissionList
+            :show-count="true"
+            :first="paginateFirst"
+            :size="ps"
+            :query="searchMinSize"
+            :organisation-id="organisationId"
+            :monetisable="monetisable"
+            :before="toDate"
+            :after="fromDate"
+            :sort="sort"
+            :include-hidden="includeHidden"
+            :iab-id="iabId"
+            :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
+            :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
+            :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
+            :beneficiaries="beneficiaries"
+        />
+    </section>
 </template>
 
 <script setup lang="ts">
@@ -43,38 +45,41 @@ import AdvancedSearch from "../display/filter/AdvancedSearch.vue";
 import {useAdvancedParamInit} from "../composable/route/useAdvancedParamInit";
 import { defineAsyncComponent } from "vue";
 const ProductorSearch = defineAsyncComponent(
-  () => import("../display/filter/ProductorSearch.vue"),
+    () => import("../display/filter/ProductorSearch.vue"),
 );
 
 //Props
 const props = defineProps({
-  pr: { default: 0, type: Number },
-  ps: { default: 30, type: Number },
-  routeQuery: { default: "", type: String },
-  routeMonetisable: { default: "UNDEFINED", type: String },
-  routeIab: { default: undefined, type: Number },
-  routeSort: { default: "LAST_PODCAST_DESC", type: String },
-  routeIncludeHidden: { default: "", type: String },
-  routeFrom: { default: undefined, type: String },
-  routeTo: { default: undefined, type: String },
-  routeOrga: { default: undefined, type: String },
-  routeRubriques: { default: "", type: String },
+    pr: { default: 0, type: Number },
+    ps: { default: 30, type: Number },
+    routeQuery: { default: "", type: String },
+    routeMonetisable: { default: "UNDEFINED", type: String },
+    routeIab: { default: undefined, type: Number },
+    routeSort: { default: "LAST_PODCAST_DESC", type: String },
+    routeIncludeHidden: { default: "", type: String },
+    routeFrom: { default: undefined, type: String },
+    routeTo: { default: undefined, type: String },
+    routeOrga: { default: undefined, type: String },
+    routeRubriques: { default: "", type: String },
+    /** The filter on beneficiaries defined on the route props */
+    routeBeneficiaries: { default: null, type: Array as () => Array<string> }
 });
 
 //Composables
 const {
-  organisationId,
-  searchPattern,
-  monetisable,
-  iabId,
-  sort,
-  includeHidden,
-  fromDate,
-  toDate,
-  rubriqueFilter,
-  searchMinSize,
-  paginateFirst,
-  rubriquesFilterArrayIds,
-  isInit
+    organisationId,
+    searchPattern,
+    monetisable,
+    iabId,
+    sort,
+    includeHidden,
+    fromDate,
+    toDate,
+    rubriqueFilter,
+    searchMinSize,
+    paginateFirst,
+    rubriquesFilterArrayIds,
+    isInit,
+    beneficiaries
 } = useAdvancedParamInit(props, true);
 </script>

package/src/components/pages/PodcastsPage.vue

@@ -1,42 +1,44 @@
 <template>
-  <section v-if="isInit" class="page-box">
-    <ProductorSearch
-      v-model:organisation-id="organisationId"
-      v-model:search-pattern="searchPattern"
-    />
-    <AdvancedSearch
-      v-model:only-video="onlyVideo"
-      v-model:monetisable="monetisable"
-      v-model:iab-id="iabId"
-      v-model:sort="sort"
-      v-model:include-hidden="includeHidden"
-      v-model:from-date="fromDate"
-      v-model:to-date="toDate"
-      v-model:validity="validity"
-      v-model:rubrique-filter="rubriqueFilter"
-      :search-pattern="searchPattern"
-      :is-emission="false"
-      :organisation-id="organisationId"
-    />
-    <PodcastList
-      :show-count="true"
-      :first="paginateFirst"
-      :size="ps"
-      :organisation-id="orgaArray"
-      :query="searchMinSize"
-      :monetisable="monetisable"
-      :before="toDate"
-      :after="fromDate"
-      :sort-criteria="sort"
-      :include-hidden="includeHidden"
-      :iab-id="iabId"
-      :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
-      :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
-      :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
-      :with-video="withVideo"
-      :validity="validity"
-    />
-  </section>
+    <section v-if="isInit" class="page-box">
+        <ProductorSearch
+            v-model:organisation-id="organisationId"
+            v-model:search-pattern="searchPattern"
+        />
+        <AdvancedSearch
+            v-model:only-video="onlyVideo"
+            v-model:monetisable="monetisable"
+            v-model:iab-id="iabId"
+            v-model:sort="sort"
+            v-model:include-hidden="includeHidden"
+            v-model:from-date="fromDate"
+            v-model:to-date="toDate"
+            v-model:validity="validity"
+            v-model:rubrique-filter="rubriqueFilter"
+            v-model:beneficiaries="beneficiaries"
+            :search-pattern="searchPattern"
+            :is-emission="false"
+            :organisation-id="organisationId"
+        />
+        <PodcastList
+            :show-count="true"
+            :first="paginateFirst"
+            :size="ps"
+            :organisation-id="orgaArray"
+            :query="searchMinSize"
+            :monetisable="monetisable"
+            :before="toDate"
+            :after="fromDate"
+            :sort-criteria="sort"
+            :include-hidden="includeHidden"
+            :iab-id="iabId"
+            :rubrique-id="rubriquesFilterArrayIds.rubriqueId"
+            :rubriquage-id="rubriquesFilterArrayIds.rubriquageId"
+            :no-rubriquage-id="rubriquesFilterArrayIds.noRubriquageId"
+            :beneficiaries="beneficiaries"
+            :with-video="withVideo"
+            :validity="validity"
+        />
+    </section>
 </template>
 
 <script setup lang="ts">
@@ -48,19 +50,21 @@ import { computed, ref, watch } from "vue";
 
 //Props 
 const props = defineProps({
-  pr: { default: 0, type: Number },
-  ps: { default: 30, type: Number },
-  routeQuery: { default: "", type: String },
-  routeMonetisable: { default: "UNDEFINED", type: String },
-  routeIab: { default: undefined, type: Number },
-  routeSort: { default: "DATE", type: String },
-  routeIncludeHidden: { default: "", type: String },
-  routeFrom: { default: undefined, type: String },
-  routeTo: { default: undefined, type: String },
-  routeValidity: { default: "", type: String },
-  routeOnlyVideo: { default: "", type: String },
-  routeOrga: { default: undefined, type: String },
-  routeRubriques: { default: "", type: String },
+    pr: { default: 0, type: Number },
+    ps: { default: 30, type: Number },
+    routeQuery: { default: "", type: String },
+    routeMonetisable: { default: "UNDEFINED", type: String },
+    routeIab: { default: undefined, type: Number },
+    routeSort: { default: "DATE", type: String },
+    routeIncludeHidden: { default: "", type: String },
+    routeFrom: { default: undefined, type: String },
+    routeTo: { default: undefined, type: String },
+    routeValidity: { default: "", type: String },
+    routeOnlyVideo: { default: "", type: String },
+    routeOrga: { default: undefined, type: String },
+    routeRubriques: { default: "", type: String },
+    /** The filter on beneficiaries defined on the route props */
+    routeBeneficiaries: { default: null, type: Array as () => Array<string> }
 });
 
 
@@ -70,20 +74,21 @@ const onlyVideo = ref(false);
 
 //Composables
 const {
-  organisationId,
-  searchPattern,
-  monetisable,
-  iabId,
-  sort,
-  includeHidden,
-  fromDate,
-  toDate,
-  rubriqueFilter,
-  searchMinSize,
-  paginateFirst,
-  validity,
-  rubriquesFilterArrayIds,
-  isInit
+    organisationId,
+    searchPattern,
+    monetisable,
+    iabId,
+    sort,
+    includeHidden,
+    fromDate,
+    toDate,
+    rubriqueFilter,
+    searchMinSize,
+    paginateFirst,
+    validity,
+    rubriquesFilterArrayIds,
+    isInit,
+    beneficiaries
 } = useAdvancedParamInit(props, false);
 
 //Computed
@@ -93,7 +98,7 @@ const withVideo = computed(() => false === onlyVideo.value ? undefined : true);
 
 //Watch
 watch(() => props.routeOnlyVideo, () =>{
-  onlyVideo.value = "true" === props.routeOnlyVideo;
+    onlyVideo.value = "true" === props.routeOnlyVideo;
 }, {immediate: true});
 
 </script>

package/src/locale/de.ts

@@ -415,4 +415,7 @@ export default {
   "Copied!":"Kopiert!",
   "Color of the QR Code": "Farbe des QR-Codes",
   "Silent stream":"Stiller Fluss",
+  "Emission - Not available for listeners": "Sendung für Hörer nicht sichtbar",
+  "Emission - Not available explanation": "Diese Sendung ist für Hörer nicht sichtbar, da sie so konfiguriert wurde, dass ihre Episoden nicht veröffentlicht werden. Diese Konfiguration ist in den erweiterten Einstellungen der Show verfügbar.",
+  "Filters - Beneficiaries": "Nach Referenzen der Rechteinhaber",
 }

package/src/locale/en.ts

@@ -418,4 +418,7 @@ export default {
   "Copied!":"Copied!",
   "Color of the QR Code": "Color of the QR Code",
   "Silent stream":"Silent stream",
+  "Emission - Not available for listeners": "Broadcast not visible to listeners",
+  "Emission - Not available explanation": "This show is not visible to listeners because it has been configured so that its episodes are not published. This configuration is available in the advanced settings of the show.",
+  "Filters - Beneficiaries": "By rights holder references",
 };

package/src/locale/es.ts

@@ -416,4 +416,7 @@ export default {
   "Copied!":"¡Copiado!",
   "Color of the QR Code": "Color del código QR",
   "Silent stream":"Flujo silencioso",
+  "Emission - Not available for listeners": "Transmisión no visible para los oyentes",
+  "Emission - Not available explanation": "Este programa no es visible para los oyentes porque ha sido configurado para que sus episodios no se publiquen. Esta configuración está disponible en la configuración avanzada del programa.",
+  "Filters - Beneficiaries": "Por referencias de titulares de derechos",
 }