@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/podcastmaker/PodcastmakerHeader.vue

@@ -7,31 +7,30 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { computed } from "vue";
 import {useImageProxy} from "../../composable/useImageProxy";
-import { defineComponent } from "vue";
-export default defineComponent({
 
-  props: {
-    pageTitle: { default: undefined, type: String },
-    imgUrl: { default: undefined, type: String },
-  },
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    return { useProxyImageUrl }
-  },
-  computed: {
-    backgroundDisplay(): string {
-      if (!this.imgUrl) {
-        return "";
-      }
-      return `background-image: url('${this.useProxyImageUrl(
-        this.imgUrl,
-        "250",
-      )}');`;
-    },
-  },
+//Props 
+const props = defineProps({
+  pageTitle: { default: undefined, type: String },
+  imgUrl: { default: undefined, type: String },
+})
+
+//Composables
+const { useProxyImageUrl } = useImageProxy();
+
+//Computed
+const backgroundDisplay = computed(() => {
+  if (!props.imgUrl) {
+    return "";
+  }
+  return `background-image: url('${useProxyImageUrl(
+    props.imgUrl,
+    "250",
+  )}');`;
 });
+
 </script>
 <style lang="scss">
 .octopus-app {

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

@@ -8,7 +8,7 @@
         name: 'participant',
         params: { participantId: animator.participantId },
       }"
-      :title="$t('Participant name page', { name: animatorName })"
+      :title="t('Participant name page', { name: animatorName })"
       class="podcast-item-animator text-truncate"
     >
       {{ animatorName }}
@@ -16,23 +16,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { Participant } from "@/stores/class/general/participant";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "AnimatorsItem",
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+//Props 
+const props = defineProps({
+  animator: { default: undefined, type: Object as () => Participant },
+})
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const animatorName = computed(() => `${props.animator?.firstName ?? ""} ${ props.animator?.lastName ?? ""}`.trim());
 
-  props: {
-    animator: { default: undefined, type: Object as () => Participant },
-  },
-  computed: {
-    animatorName(): string {
-      return `${this.animator?.firstName ?? ""} ${
-        this.animator?.lastName ?? ""
-      }`.trim();
-    },
-  },
-});
 </script>
 
 <style lang="scss">

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

@@ -2,7 +2,7 @@
   <div v-if="podcast" class="d-flex align-items-center mt-1">
     <button
       class="btn btn-round-light ms-2"
-      :title="$t('Download')"
+      :title="t('Download')"
       @click="downloadPodcast"
     >
       <DownloadIcon />
@@ -10,38 +10,30 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DownloadIcon from "vue-material-design-icons/Download.vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import downloadHelper from "../../../helper/downloadHelper";
-import { defineComponent } from "vue";
 import classicApi from "../../../api/classicApi";
-export default defineComponent({
-  name: "DownloadPodcastButton",
-  components: {
-    DownloadIcon,
-  },
+import { useI18n } from "vue-i18n";
 
-  props: {
-    podcast: { default: undefined, type: Object as () => Podcast },
-  },
-  computed: {
-    videoId(): string | undefined {
-      return this.podcast?.video?.videoId;
-    },
-  },
+//Props 
+const props = defineProps({
+  podcast: { default: undefined, type: Object as () => Podcast },
+})
 
-  methods: {
-    async downloadPodcast() {
-      const data = await classicApi.fetchData<{
-        location: string;
-        downloadId: string;
-      }>({
-        api: 0,
-        path:"podcast/download/register/"+ this.podcast?.podcastId+".mp3?origin=saooti_play_download",
-      });
-      downloadHelper.onDownload("/download/url?param="+encodeURIComponent(data.location), this.podcast?.title + ".mp3");
-    },
-  },
-});
+//Composables
+const { t } = useI18n();
+
+//Methods
+async function downloadPodcast() {
+  const data = await classicApi.fetchData<{
+    location: string;
+    downloadId: string;
+  }>({
+    api: 0,
+    path:"podcast/download/register/"+ props.podcast?.podcastId+".mp3?origin=saooti_play_download",
+  });
+  downloadHelper.onDownload("/download/url?param="+encodeURIComponent(data.location), props.podcast?.title + ".mp3");
+}
 </script>

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

@@ -5,7 +5,7 @@
     <router-link
       v-for="participant in participants"
       :key="participant.participantId"
-      :title="$t('Participant name page', { name: getName(participant) })"
+      :title="t('Participant name page', { name: getName(participant) })"
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
@@ -16,33 +16,31 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { Participant } from "@/stores/class/general/participant";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ParticipantDescription",
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
-  components: {},
-
-  props: {
-    participants: {
-      default: () => [],
-      type: Array as () => Array<Participant>,
-    },
-    isGuest: { default: false, type: Boolean },
+//Props 
+const props = defineProps({
+  participants: {
+    default: () => [],
+    type: Array as () => Array<Participant>,
   },
+  isGuest: { default: false, type: Boolean },
+})
 
-  computed: {
-    title(): string {
-      return this.isGuest ? this.$t("Guests") : this.$t("Animated by");
-    },
-  },
-  methods: {
-    getName(person: Participant): string {
-      return `${person.firstName ?? ""} ${person.lastName ?? ""}`.trim();
-    },
-  },
-});
+//Composables
+const { t } = useI18n();
+
+//Computed
+const title = computed(() => props.isGuest ? t("Guests") : t("Animated by"));
+
+
+//Methods
+function getName(person: Participant): string {
+  return `${person.firstName ?? ""} ${person.lastName ?? ""}`.trim();
+}
 </script>
 <style lang="scss">
 .octopus-app{

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

@@ -3,10 +3,11 @@
     <h3 class="mb-2">
       {{ titleFilter }}
     </h3>
-    <div class="d-flex align-items-center flex-wrap mb-2">
+    <div class="d-flex align-items-stretch flex-wrap mb-2">
       <div id="podcast-filter-list-category-chooser" class="w-50-responsive pe-3">
         <CategoryChooser
-          :defaultanswer="$t('No category filter')"
+          height="100%"
+          :defaultanswer="t('No category filter')"
           @selected="onCategorySelected"
         />
       </div>
@@ -14,85 +15,90 @@
         v-model:text-init="searchPattern"
         class="w-50-responsive"
         id-search="podcast-filter-search"
-        :label="$t('Search')"
+        :label="t('Search')"
       />
     </div>
     <PodcastList
-      :first="first"
-      :size="size"
+      :first="dfirst"
+      :size="dsize"
       :iab-id="iabId"
       :query="query"
       :participant-id="participantId"
       :emission-id="emissionId"
       :organisation-id="productorId"
+      :sort-criteria="sort"
       :reload="reloadList"
       :include-hidden="editRight"
       :show-count="showCount"
       :display-sort-text="false"
+      :force-update-parameters="forceUpdateParameters"
       @fetch="fetch"
     />
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicSearch from "../../form/ClassicSearch.vue";
 import PodcastList from "./PodcastList.vue";
 import { Category } from "@/stores/class/general/category";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, Ref, computed, watch } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
+import { useI18n } from "vue-i18n";
 const CategoryChooser = defineAsyncComponent(
   () => import("../categories/CategoryChooser.vue"),
 );
-export default defineComponent({
-  components: {
-    CategoryChooser,
-    PodcastList,
-    ClassicSearch,
-  },
-  props: {
-    participantId: { default: undefined, type: Number },
-    name: { default: undefined, type: String },
-    emissionId: { default: undefined, type: Number },
-    categoryFilter: { default: false, type: Boolean },
-    reload: { default: false, type: Boolean },
-    editRight: { default: false, type: Boolean },
-    productorId: { default: () => [], type: Array as () => Array<string> },
-    showCount: { default: false, type: Boolean },
-  },
-  emits: ["fetch"],
 
-  data() {
-    return {
-      first: 0 as number,
-      size: 30 as number,
-      searchPattern: "" as string,
-      iabId: undefined as number | undefined,
-      reloadList: false as boolean,
-    };
-  },
+//Props 
+const props = defineProps({
+  first: { default: 0, type: Number },
+  size: { default: 30, type: Number },
+  query: { default: undefined, type: String },
+  participantId: { default: undefined, type: Number },
+  name: { default: undefined, type: String },
+  emissionId: { default: undefined, type: Number },
+  categoryFilter: { default: false, type: Boolean },
+  reload: { default: false, type: Boolean },
+  editRight: { default: false, type: Boolean },
+  productorId: { default: () => [], type: Array as () => Array<string> },
+  showCount: { default: false, type: Boolean },
+  forceUpdateParameters: { default: false, type: Boolean },
+})
 
-  computed: {
-    titleFilter(): string {
-      return this.name
-        ? this.$t("All podcast button", { name: this.name })
-        : this.$t("All podcast emission button");
-    },
-    query(): string {
-      return this.searchPattern.length >= 3 ? this.searchPattern : "";
-    },
-  },
-  watch: {
-    reload(): void {
-      this.reloadList = !this.reloadList;
-    },
-  },
-  methods: {
-    onCategorySelected(category: Category | undefined): void {
-      this.iabId = category?.id ? category.id : undefined;
-    },
-    fetch(podcasts: Array<Podcast>): void {
-      this.$emit("fetch", podcasts);
-    },
-  },
+//Emits
+const emit = defineEmits(["fetch", "update:query"]);
+
+//Data 
+const dfirst = ref(props.first);
+const dsize = ref(props.size);
+const searchPattern = ref(props.query ?? "");
+const reloadList = ref(false);
+const iabId : Ref<number | undefined>= ref(undefined);
+
+//Composables
+const { t } = useI18n();
+
+//Computed
+const titleFilter = computed(() => {
+  return props.name
+    ? t("All podcast button", { name: props.name })
+    : t("All podcast emission button");
 });
+const query = computed(() => searchPattern.value.length > 3 ? searchPattern.value : "");
+const sort = computed(() =>  !query.value.length ? "DATE" : "SCORE");
+
+//Watch
+watch(()=>props.reload, () => {
+  reloadList.value = !reloadList.value;
+});
+watch(searchPattern, () => {
+  emit('update:query', searchPattern.value);
+});
+
+//Methods
+function onCategorySelected(category: Category | undefined): void {
+  iabId.value = category?.id ? category.id : undefined;
+}
+function fetch(podcasts: Array<Podcast>): void {
+  emit("fetch", podcasts);
+}
 </script>

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

@@ -8,20 +8,21 @@
         name: 'podcast',
         params: { podcastId: podcast.podcastId },
       }"
-      :title="$t('Episode name page', { name: podcast.title })"
+      :title="t('Episode name page', { name: podcast.title })"
     >
       <img
         v-lazy="useProxyImageUrl(podcast.imageUrl, '270')"
         width="270"
         height="270"
-        role="presentation"
+        aria-hidden="true"
+        alt=""
         
         class="img-box img-box-podcast"
-        :title="$t('Episode name image', { name: podcast.title })"
+        :title="t('Episode name image', { name: podcast.title })"
       />
     </router-link>
     <div
-      v-if="isPodcastmaker"
+      v-if="state.generalParameters.podcastmaker"
       :class="mainRubrique ? 'mainRubrique' : 'notMainRubrique'"
     />
     <div
@@ -36,7 +37,7 @@
       {{ statusText }}
     </div>
     <div v-if="isRecordedInLive" class="live-image-status recording-bg">
-      {{ $t("Recorded in live") }}
+      {{ t("Recorded in live") }}
     </div>
     <PodcastPlayButton
       :podcast="podcast"
@@ -46,7 +47,7 @@
     <button
       v-if="displayDescription && isMobile"
       class="background-icon bg-dark text-white"
-      :title="isDescription ? $t('Hide description') : $t('Show description')"
+      :title="isDescription ? t('Hide description') : t('Show description')"
       @click="showDescription"
     >
       <ChevronDownIcon :class="{ 'arrow-transform': !isDescription }" />
@@ -54,107 +55,103 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import PodcastPlayButton from "./PodcastPlayButton.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Conference } from "@/stores/class/conference/conference";
 import {useImageProxy} from "../../composable/useImageProxy";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PodcastImage",
-  components: {
-    PodcastPlayButton,
-    ChevronDownIcon,
-  },
-  props: {
-    podcast: { default: () => ({}), type: Object as () => Podcast },
-    hidePlay: { default: false, type: Boolean },
-    displayDescription: { default: false, type: Boolean },
-    arrowDirection: { default: "up", type: String },
-    isAnimatorLive: { default: false, type: Boolean },
-    fetchConference: { default: undefined, type: Object as () => Conference },
-  },
-  emits: ["hideDescription", "showDescription"],
-  setup(){
-    const { useProxyImageUrl } = useImageProxy();
-    return { useProxyImageUrl }
-  },
-  data() {
-    return {
-      isDescription: false as boolean,
-    };
-  },
-  computed: {
-    mainRubrique(): boolean {
-      return (
-        undefined !== state.podcastPage.mainRubrique &&
-        0 !== state.podcastPage.mainRubrique &&
-        (this.podcast?.rubriqueIds?.includes(
-          state.podcastPage.mainRubrique,
-        ) as boolean)
-      );
-    },
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
-    },
-    isMobile(): boolean {
-      return window.matchMedia("(hover: none)").matches;
-    },
-    isRecordedInLive(): boolean {
-      return (
-        undefined === this.fetchConference &&
-        undefined !== this.podcast.conferenceId &&
-        "READY_TO_RECORD" !== this.podcast.processingStatus
-      );
-    },
-    statusText(): string {
-      if (!this.fetchConference) return "";
-      switch (this.fetchConference.status) {
-        case "PLANNED":
-          return this.$t("live in few time");
-        case "PENDING":
-          if (this.isAnimatorLive) return this.$t("Open studio");
-          return this.$t("live upcoming");
-        case "RECORDING":
-          return this.$t("In live");
-        case "DEBRIEFING":
-          if ("READY_TO_RECORD" === this.podcast.processingStatus)
-            return this.$t("Not recording");
-          return this.$t("Debriefing");
-        case "ERROR":
-          return this.$t("In error");
-        case "PUBLISHING":
-          return this.$t("Publishing");
-        default:
-          return "";
-      }
-    },
-  },
-  watch: {
-    arrowDirection(): void {
-      if ("up" === this.arrowDirection) {
-        this.isDescription = true;
-        this.showDescription();
-      } else {
-        this.isDescription = false;
-        this.showDescription();
-      }
-    },
-  },
+import { computed, onBeforeMount, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-  methods: {
-    showDescription(): void {
-      if (this.isDescription) {
-        this.$emit("hideDescription");
-      } else {
-        this.$emit("showDescription");
-      }
-      this.isDescription = !this.isDescription;
-    },
-  },
+//Props 
+const props = defineProps({
+  podcast: { default: () => ({}), type: Object as () => Podcast },
+  hidePlay: { default: false, type: Boolean },
+  displayDescription: { default: false, type: Boolean },
+  arrowDirection: { default: "up", type: String },
+  isAnimatorLive: { default: false, type: Boolean },
+  fetchConference: { default: undefined, type: Object as () => Conference },
+})
+
+//Emits
+const emit = defineEmits(["hideDescription", "showDescription"]);
+
+//Data 
+const isDescription = ref(false);
+const isMobile = ref(false);
+
+//Composables
+const { t } = useI18n();
+const { useProxyImageUrl } = useImageProxy();
+
+//Computed
+const mainRubrique = computed(() => {
+  return (
+    undefined !== state.podcastPage.mainRubrique &&
+    0 !== state.podcastPage.mainRubrique &&
+    (props.podcast?.rubriqueIds?.includes(
+      state.podcastPage.mainRubrique,
+    ) as boolean)
+  );
+});
+const isRecordedInLive = computed(() => {
+  return (
+    undefined === props.fetchConference &&
+    undefined !== props.podcast.conferenceId &&
+    "READY_TO_RECORD" !== props.podcast.processingStatus
+  );
+});
+const statusText = computed(() => {
+  if (!props.fetchConference) return "";
+  switch (props.fetchConference.status) {
+    case "PLANNED":
+      return t("live in few time");
+    case "PENDING":
+      if (props.isAnimatorLive) return t("Open studio");
+      return t("live upcoming");
+    case "RECORDING":
+      return t("In live");
+    case "DEBRIEFING":
+      if ("READY_TO_RECORD" === props.podcast.processingStatus)
+        return t("Not recording");
+      return t("Debriefing");
+    case "ERROR":
+      return t("In error");
+    case "PUBLISHING":
+      return t("Publishing");
+    default:
+      return "";
+  }
+});
+
+
+//Watch
+watch(()=>props.arrowDirection, () => {
+  if ("up" === props.arrowDirection) {
+    isDescription.value = true;
+    showDescription();
+  } else {
+    isDescription.value = false;
+    showDescription();
+  }
 });
+
+
+onBeforeMount(()=>{
+  isMobile.value = window.matchMedia("(hover: none)").matches;
+})
+
+//Methods
+function showDescription(): void {
+  if (isDescription.value) {
+    emit("hideDescription");
+  } else {
+    emit("showDescription");
+  }
+  isDescription.value = !isDescription.value;
+}
 </script>
 
 <style lang="scss">