@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

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

@@ -12,21 +12,21 @@
           :class="{ active: !popularSort }"
           @click="sortChrono()"
         >
-          {{ $t("Last added") }}
+          {{ t("Last added") }}
         </button>
         <button
           class="btn btn-underline"
           :class="{ active: popularSort }"
           @click="sortPopular()"
         >
-          {{ $t("Most popular") }}
+          {{ t("Most popular") }}
         </button>
       </div>
       <div v-if="displayArrow" class="hide-phone">
         <button
           class="btn admin-button m-1"
           :class="{ disabled: !previousAvailable }"
-          :title="$t('Display previous')"
+          :title="t('Display previous')"
           @click="displayPrevious()"
         >
           <ChevronLeftIcon :size="30" />
@@ -34,7 +34,7 @@
         <button
           class="btn admin-button m-1"
           :class="{ disabled: !nextAvailable }"
-          :title="$t('Display next')"
+          :title="t('Display next')"
           @click="displayNext()"
         >
           <ChevronRightIcon :size="30" />
@@ -54,129 +54,122 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import PlusIcon from "vue-material-design-icons/Plus.vue";
 import ChevronLeftIcon from "vue-material-design-icons/ChevronLeft.vue";
 import ChevronRightIcon from "vue-material-design-icons/ChevronRight.vue";
 import { useRubriquesFilterComputed } from "../../composable/route/useRubriquesFilterComputed";
 import { useRubriquesFilterParam } from "../../composable/route/useRubriquesFilterParam";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
-import { defineComponent } from "vue";
-import { RouteLocationRaw } from "vue-router";
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { useFilterStore } from "../../../stores/FilterStore";
-import { mapState } from "pinia";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
-export default defineComponent({
-  name: "PodcastInlineListTemplate",
-  components: {
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    PlusIcon,
-  },
+import { useI18n } from "vue-i18n";
 
-  props: {
-    displayArrow: { default: true, type: Boolean },
-    previousAvailable: { default: false, type: Boolean },
-    nextAvailable: { default: false, type: Boolean },
-    popularSort: { default: false, type: Boolean },
-    buttonText: { default: undefined, type: String },
-    buttonPlus: { default: false, type: Boolean },
-    title: { default: "", type: String },
-    href: { default: undefined, type: String },
-    iabId: { default: undefined, type: Number },
-    rubriqueId: { default: () => [], type: Array as () => Array<number> },
-    noRubriquageId: { default: () => [], type: Array as () => Array<number> },
-    podcastId: { default: undefined, type: Number },
-    titleTag: { default: "h2", type: String },
-  },
-  emits: ["sortChrono", "sortPopular", "displayPrevious", "displayNext"],
-  setup(){
-    const { returnRubriquesFilter } = useRubriquesFilterParam();
-    const { rubriqueQueryParam } = useRubriquesFilterComputed();
-    return { returnRubriquesFilter, rubriqueQueryParam }
-  },
-  data() {
-    return {};
-  },
+//Props 
+const props = defineProps({
+  displayArrow: { default: true, type: Boolean },
+  previousAvailable: { default: false, type: Boolean },
+  nextAvailable: { default: false, type: Boolean },
+  popularSort: { default: false, type: Boolean },
+  buttonText: { default: undefined, type: String },
+  buttonPlus: { default: false, type: Boolean },
+  title: { default: "", type: String },
+  href: { default: undefined, type: String },
+  iabId: { default: undefined, type: Number },
+  rubriqueId: { default: () => [], type: Array as () => Array<number> },
+  noRubriquageId: { default: () => [], type: Array as () => Array<number> },
+  podcastId: { default: undefined, type: Number },
+  titleTag: { default: "h2", type: String },
+})
 
-  computed: {
-    ...mapState(useFilterStore, ["filterIab", "filterRubriquage", "filterOrgaId"]),
-    refTo(): string | RouteLocationRaw {
-      if (this.href) return this.href;
-      if (this.iabId) {
-        return {
-          name: "category",
-          params: { iabId: this.iabId },
-        };
-      }
-      return {
-        name: "podcasts",
-        query: {
-          iabId: this.filterIab?.id,
-          rubriquesId: this.rubriqueQueryParam,
-          productor: this.filterOrgaId
-        },
-      };
-    },
-  },
+//Emits
+const emit = defineEmits(["sortChrono", "sortPopular", "displayPrevious", "displayNext"]);
 
-  methods: {
-    sortChrono(): void {
-      this.$emit("sortChrono");
-    },
-    sortPopular(): void {
-      this.$emit("sortPopular");
-    },
-    displayPrevious(): void {
-      this.$emit("displayPrevious");
-    },
-    displayNext(): void {
-      this.$emit("displayNext");
-    },
-    handleSeeMoreButton(event: { preventDefault: () => void }) {
-      if (this.href ||
-        !this.rubriqueId ||
-        0 === this.rubriqueId.length ||
-        this.noRubriquageId.length
-      ) {
-        return;
-      }
-      event.preventDefault();
-      const rubriqueChosenId = this.rubriqueId.at(-1);
-      let filterToAdd: RubriquageFilter|undefined;
-      if (this.filterRubriquage.length) {
-        for (let i = 0, len = this.filterRubriquage.length; i < len; i++) {
-          const rubriqueChosen = this.filterRubriquage[i].rubriques.find(
-            (element: Rubrique) => element.rubriqueId === rubriqueChosenId,
-          );
-          if (rubriqueChosen) {
-            filterToAdd = {
-              rubriquageId: this.filterRubriquage[i].rubriquageId ?? 0,
-              rubriqueId: rubriqueChosenId,
-              nameRubriquage: this.filterRubriquage[i].title,
-              nameRubrique: rubriqueChosen.name,
-            };
-            break;
-          }
-        }
-      }
-      if(!filterToAdd){return;}
-      const queries = this.returnRubriquesFilter((a) => {
-        const indexRubriquage = a.findIndex(filter => filter.rubriquageId === filterToAdd.rubriquageId);
-        if (indexRubriquage === -1) {
-          a.push(filterToAdd);
-        } else {
-          a[indexRubriquage] = filterToAdd;
-        }
-        return a;
-      })
-      this.$router.push({
-        name: "podcasts",
-        query: {...this.$route.query, ...queries}
-      });
+//Composables
+const { t } = useI18n();
+const { returnRubriquesFilter } = useRubriquesFilterParam();
+const { rubriqueQueryParam } = useRubriquesFilterComputed();
+const filterStore = useFilterStore();
+const router = useRouter();
+const route = useRoute();
+
+
+//Computed
+const refTo = computed(() => {
+  if (props.href) return props.href;
+  if (props.iabId) {
+    return {
+      name: "category",
+      params: { iabId: props.iabId },
+    };
+  }
+  return {
+    name: "podcasts",
+    query: {
+      iabId: filterStore.filterIab?.id,
+      rubriquesId: rubriqueQueryParam.value,
+      productor: filterStore.filterOrgaId
     },
-  },
+  };
 });
+
+//Methods
+function sortChrono(): void {
+  emit("sortChrono");
+}
+function sortPopular(): void {
+  emit("sortPopular");
+}
+function displayPrevious(): void {
+  emit("displayPrevious");
+}
+function displayNext(): void {
+  emit("displayNext");
+}
+function handleSeeMoreButton(event: { preventDefault: () => void }) {
+  if (props.href ||
+    !props.rubriqueId ||
+    0 === props.rubriqueId.length ||
+    props.noRubriquageId.length
+  ) {
+    return;
+  }
+  event.preventDefault();
+  const rubriqueChosenId = props.rubriqueId.at(-1);
+  let filterToAdd: RubriquageFilter|undefined;
+  if (filterStore.filterRubriquage.length) {
+    for (let i = 0, len = filterStore.filterRubriquage.length; i < len; i++) {
+      const rubriqueChosen = filterStore.filterRubriquage[i].rubriques.find(
+        (element: Rubrique) => element.rubriqueId === rubriqueChosenId,
+      );
+      if (rubriqueChosen) {
+        filterToAdd = {
+          rubriquageId: filterStore.filterRubriquage[i].rubriquageId ?? 0,
+          rubriqueId: rubriqueChosenId,
+          nameRubriquage: filterStore.filterRubriquage[i].title,
+          nameRubrique: rubriqueChosen.name,
+        };
+        break;
+      }
+    }
+  }
+  if(!filterToAdd){return;}
+  const queries = returnRubriquesFilter((a) => {
+    const indexRubriquage = a.findIndex(filter => filter.rubriquageId === filterToAdd.rubriquageId);
+    if (indexRubriquage === -1) {
+      a.push(filterToAdd);
+    } else {
+      a[indexRubriquage] = filterToAdd;
+    }
+    return a;
+  })
+  router.push({
+    name: "podcasts",
+    query: {...route.query, ...queries}
+  });
+}
 </script>
 <style lang="scss">
 .octopus-app .podcast-inline-container {

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="'PLAYING' === playerStatus ? 'play-animation' : ''"
+    :class="'PLAYING' === playerStore.playerStatus ? 'play-animation' : ''"
     class="bloc-paddle mx-1"
   >
     <span class="paddle1" />
@@ -9,16 +9,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { usePlayerStore } from "../../../stores/PlayerStore";
-import { mapState } from "pinia";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PodcastIsPlaying",
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerStatus",
-    ])
-  },
-});
+
+const playerStore = usePlayerStore();
 </script>

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

@@ -37,80 +37,65 @@
   </article>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import debounce from '../../../helper/debounceHelper';
 import PodcastItemInfo from "./PodcastItemInfo.vue";
 import PodcastImage from "./PodcastImage.vue";
 import dayjs from "dayjs";
 import { Podcast } from "@/stores/class/general/podcast";
-import { defineComponent } from "vue";
+import { computed, nextTick, onBeforeMount, ref, Ref, useTemplateRef } from "vue";
 import { Conference } from "@/stores/class/conference/conference";
-export default defineComponent({
-  name: "PodcastItem",
 
-  components: {
-    PodcastItemInfo,
-    PodcastImage,
-  },
+//Props 
+const props = defineProps({
+  podcast: { default: () => ({}), type: Object as () => Podcast },
+  fetchConference: { default: undefined, type: Object as () => Conference },
+})
 
-  props: {
-    podcast: { default: () => ({}), type: Object as () => Podcast },
-    fetchConference: { default: undefined, type: Object as () => Conference },
-  },
+//Data 
+const isMobile = ref(false);
+const firstDisplayDesc = ref(false);
+const hoverDesc = ref(false);
+const arrowDirection = ref("up");
+const isDescriptionBig = ref(false);
+const debounceShowDescriptionEvent: Ref< undefined | (() => void)> = ref(undefined);
+const debounceHideDescriptionEvent: Ref< undefined | (() => void)> = ref(undefined);
+const descriptionPodcastRef = useTemplateRef('descriptionPodcast');
+const descriptionPodcastContainerRef = useTemplateRef('descriptionPodcastContainer');
 
-  data() {
-    return {
-      firstDisplayDesc: false as boolean,
-      hoverDesc: false as boolean,
-      arrowDirection: "up" as string,
-      isDescriptionBig: false as boolean,
-      debounceShowDescriptionEvent: undefined as undefined | (() => void),
-      debounceHideDescriptionEvent: undefined as undefined | (() => void),
-    };
-  },
+//Computed
+const displayDate = computed(() => dayjs(props.podcast.pubDate).format());
+const description = computed(() => props.podcast.description ?? "");
 
-  computed: {
-    displayDate(): string {
-      return dayjs(this.podcast.pubDate).format();
-    },
-    description(): string {
-      return this.podcast.description ?? "";
-    },
-    isMobile(): boolean {
-      return window.matchMedia("(hover: none)").matches;
-    },
-  },
-  created() {
-    this.debounceShowDescriptionEvent = debounce(this.showDescription, 100);
-    this.debounceHideDescriptionEvent = debounce(this.hideDescription, 100);
-  },
+onBeforeMount(()=>{
+  isMobile.value = window.matchMedia("(hover: none)").matches;
+  debounceShowDescriptionEvent.value = debounce(showDescription, 100);
+  debounceHideDescriptionEvent.value = debounce(hideDescription, 100);
+})
 
-  methods: {
-    initDescription(): void {
-      if (this.firstDisplayDesc /* || this.isMobile */) {
-        return;
-      }
-      const podcastDesc = this.$refs.descriptionPodcast as HTMLElement;
-      const podcastDescContainer = this.$refs
-        .descriptionPodcastContainer as HTMLElement;
-      if (podcastDesc?.clientHeight > podcastDescContainer?.clientHeight) {
-        this.isDescriptionBig = true;
-      }
-      this.firstDisplayDesc = true;
-    },
-    showDescription(): void {
-      this.arrowDirection = "down";
-      this.hoverDesc = true;
-      this.$nextTick(() => {
-        this.initDescription();
-      });
-    },
-    hideDescription(): void {
-      this.arrowDirection = "up";
-      this.hoverDesc = false;
-    },
-  },
-});
+//Methods
+function initDescription(): void {
+  if (firstDisplayDesc.value) {
+    return;
+  }
+  const podcastDesc = descriptionPodcastRef?.value as HTMLElement;
+  const podcastDescContainer = descriptionPodcastContainerRef?.value as HTMLElement;
+  if (podcastDesc?.clientHeight > podcastDescContainer?.clientHeight) {
+    isDescriptionBig.value = true;
+  }
+  firstDisplayDesc.value = true;
+}
+function showDescription(): void {
+  arrowDirection.value = "down";
+  hoverDesc.value = true;
+  nextTick(() => {
+    initDescription();
+  });
+}
+function hideDescription(): void {
+  arrowDirection.value = "up";
+  hoverDesc.value = false;
+}
 </script>
 
 <style lang="scss">

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

@@ -11,12 +11,12 @@
         params: { podcastId: podcast.podcastId },
       }"
       class="text-dark flex-grow-1 title-podcast-item basic-line-clamp three-line"
-      :title="$t('Episode name page', { name: podcast.title })"
+      :title="t('Episode name page', { name: podcast.title })"
     >
       {{ podcast.title }}
     </router-link>
     <PodcastPlayBar
-      v-if="isProgressBar"
+      v-if="state.emissionsPage.progressBar"
       :display-buton-play="true"
       :podcast="podcast"
       class="me-2"
@@ -43,50 +43,34 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import AnimatorsItem from "./AnimatorsItem.vue";
 import {useOrgaComputed} from "../../composable/useOrgaComputed";
 import dayjs from "dayjs";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
+import { useI18n } from "vue-i18n";
 const PodcastPlayBar = defineAsyncComponent(
   () => import("./PodcastPlayBar.vue"),
 );
-export default defineComponent({
-  name: "PodcastItemInfo",
 
-  components: {
-    AnimatorsItem,
-    PodcastPlayBar,
-  },
+//Props 
+const props = defineProps({
+  podcast: { default: () => ({}), type: Object as () => Podcast },
+})
 
-  props: {
-    podcast: { default: () => ({}), type: Object as () => Podcast },
-  },
+//Composables
+const { t } = useI18n();
+const { isPodcastmaker } = useOrgaComputed();
 
-  setup(){
-    const { isPodcastmaker, isEditRights } = useOrgaComputed();
-    return { isPodcastmaker, isEditRights }
-  },
-
-  computed: {
-    isProgressBar(): boolean {
-      return state.emissionsPage.progressBar as boolean;
-    },
-    date(): string {
-      return dayjs(this.podcast.pubDate).format("D MMMM YYYY");
-    },
-    editRight(): boolean {
-      return this.isEditRights(this.podcast.organisation.id);
-    },
-    orgaNameDisplay(): string {
-      if (this.podcast.organisation.name.length > 30) {
-        return this.podcast.organisation.name.substring(0, 30) + "...";
-      }
-      return this.podcast.organisation.name;
-    },
-  },
+//Computed
+const date = computed(() => dayjs(props.podcast.pubDate).format("D MMMM YYYY"));
+const orgaNameDisplay = computed(() =>{
+  if (props.podcast.organisation.name.length > 30) {
+    return props.podcast.organisation.name.substring(0, 30) + "...";
+  }
+  return props.podcast.organisation.name;
 });
 </script>