@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/misc/MobileMenu.vue

@@ -4,7 +4,7 @@
       v-show="show"
       id="mobile-menu-dropdown"
       class="btn-transparent text-white c-hand m-2 h2"
-      :title="$t('open left Menu')"
+      :title="t('open left Menu')"
       @click="handleMenuClick"
     >
       <MenuIcon :size="34" />
@@ -39,142 +39,132 @@
         class="octopus-dropdown-item realLink"
         :href="pathLogin"
       >
-        {{ $t("Login") }}
+        {{ t("Login") }}
       </a>
       <a v-else class="octopus-dropdown-item c-hand" href="/logout">
-        {{ $t("Logout") }}
+        {{ t("Logout") }}
       </a>
       <router-link
-        v-if="!isGarRole"
+        v-if="!authStore.isGarRole"
         class="octopus-dropdown-item"
         to="/main/pub/contact"
       >
-        {{ $t("Contact") }}
+        {{ t("Contact") }}
       </router-link>
     </ClassicPopover>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import MenuIcon from "vue-material-design-icons/Menu.vue";
 import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import { state } from "../../stores/ParamSdkStore";
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, computed } from "vue";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useAuthStore } from "../../stores/AuthStore";
-import { mapState } from "pinia";
 import { useApiStore } from "../../stores/ApiStore";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
 );
-export default defineComponent({
-  name: "MobileMenu",
-  components: {
-    ClassicPopover,
-    MenuIcon,
-  },
-  props: {
-    isEducation: { default: false, type: Boolean },
-    show: { default: false, type: Boolean },
-    notPodcastAndEmission: { default: false, type: Boolean },
-    scrolled: { default: false, type: Boolean },
-  },
-  setup(){
-    const { rubriqueQueryParam } = useRubriquesFilterComputed();
-    return { rubriqueQueryParam }
-  },
-  data() {
-    return {
-      firstLoaded: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(useAuthStore, ["authOrgaId", "isGarRole"]),
-    ...mapState(useFilterStore, ["filterLive", "filterOrgaId", "filterIab"]),
-    ...mapState(useApiStore, ["frontendUrl"]),
-    isAuthenticatedWithOrga(): boolean {
-      return undefined !== this.authOrgaId;
+
+
+//Props 
+const props = defineProps({
+  isEducation: { default: false, type: Boolean },
+  show: { default: false, type: Boolean },
+  notPodcastAndEmission: { default: false, type: Boolean },
+  scrolled: { default: false, type: Boolean },
+})
+
+//Data 
+const firstLoaded = ref(false);
+
+//Composables
+const { t } = useI18n();
+const { rubriqueQueryParam } = useRubriquesFilterComputed();
+const authStore = useAuthStore();
+const apiStore = useApiStore();
+const filterStore = useFilterStore();
+const route = useRoute();
+
+
+//Computed
+const isAuthenticatedWithOrga = computed(() => undefined !== authStore.authOrgaId);
+const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
+const routerLinkArray = computed(() =>{
+  return [
+    {
+      title: t("My space"),
+      routeName: "backoffice",
+      condition: isAuthenticatedWithOrga.value,
     },
-    pathLogin(){
-      return "/sso/login?redirect_url="+encodeURI(this.frontendUrl + this.$route.fullPath);
+    { title: t("Home"), routeName: "home", condition: true },
+    {
+      title: t("Radio & Live"),
+      routeName: "lives",
+      condition:
+        state.generalParameters.isLiveTab &&
+        ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),
     },
-    routerLinkArray() {
-      return [
-        {
-          title: this.$t("My space"),
-          routeName: "backoffice",
-          condition: this.isAuthenticatedWithOrga,
-        },
-        { title: this.$t("Home"), routeName: "home", condition: true },
-        {
-          title: this.$t("Radio & Live"),
-          routeName: "lives",
-          condition:
-            state.generalParameters.isLiveTab &&
-            ((this.filterOrgaId && this.filterLive) || !this.filterOrgaId),
-        },
-        {
-          title: this.$t("Podcasts"),
-          routeName: "podcasts",
-          condition: !this.notPodcastAndEmission,
-        },
-        {
-          title: this.$t("Emissions"),
-          routeName: "emissions",
-          condition: !this.notPodcastAndEmission,
-        },
-        {
-          title: this.$t("Productors"),
-          routeName: "productors",
-          condition:
-            !this.isPodcastmaker && (!this.filterOrgaId || this.isEducation),
-        },
-        {
-          title: this.$t("Playlists"),
-          routeName: "playlists",
-          condition: true,
-        },
-        {
-          title: this.$t("Speakers"),
-          routeName: "participants",
-          condition: true,
-        },
-        {
-          title: this.$t("Create an account"),
-          routeName: "createAccount",
-          condition: !this.isAuthenticatedWithOrga,
-        },
-      ];
+    {
+      title: t("Podcasts"),
+      routeName: "podcasts",
+      condition: !props.notPodcastAndEmission,
     },
-    isPodcastmaker(): boolean {
-      return state.generalParameters.podcastmaker as boolean;
+    {
+      title: t("Emissions"),
+      routeName: "emissions",
+      condition: !props.notPodcastAndEmission,
     },
-  },
-
-  methods: {
-    handleMenuClick() {
-      if (this.firstLoaded) {
-        return;
-      }
-      this.firstLoaded = true;
-      setTimeout(() => {
-        document.getElementById("mobile-menu-dropdown")?.click();
-      }, 200);
+    {
+      title: t("Productors"),
+      routeName: "productors",
+      condition:
+        !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || props.isEducation),
+    },
+    {
+      title: t("Playlists"),
+      routeName: "playlists",
+      condition: true,
+    },
+    {
+      title: t("Speakers"),
+      routeName: "participants",
+      condition: true,
     },
-    getQueriesRouter(routeName: string) {
-      if (
-        "podcasts" !== routeName &&
-        "emissions" !== routeName &&
-        "home" !== routeName
-      ) {
-        return { productor: this.filterOrgaId };
-      }
-      return {
-        productor: this.filterOrgaId,
-        iabId: this.filterIab?.id,
-        rubriquesId: this.rubriqueQueryParam,
-      };
+    {
+      title: t("Create an account"),
+      routeName: "createAccount",
+      condition: !isAuthenticatedWithOrga.value,
     },
-  },
+  ];
 });
+
+
+//Methods
+function handleMenuClick() {
+  if (firstLoaded.value) {
+    return;
+  }
+  firstLoaded.value = true;
+  setTimeout(() => {
+    document.getElementById("mobile-menu-dropdown")?.click();
+  }, 200);
+}
+function getQueriesRouter(routeName: string) {
+  if (
+    "podcasts" !== routeName &&
+    "emissions" !== routeName &&
+    "home" !== routeName
+  ) {
+    return { productor: filterStore.filterOrgaId };
+  }
+  return {
+    productor: filterStore.filterOrgaId,
+    iabId: filterStore.filterIab?.id,
+    rubriquesId: rubriqueQueryParam.value,
+  };
+}
 </script>

package/src/components/misc/ProgressBar.vue

@@ -10,10 +10,10 @@
       aria-valuenow="0"
       aria-valuemin="0"
       aria-valuemax="100"
-      :aria-label="$t('Live progress bar')"
+      :aria-label="t('Live progress bar')"
       :style="'width: ' + secondaryProgress + '%'"
     />
-    <template v-if="playerMedia">
+    <template v-if="playerStore.playerMedia">
       <div
         v-if="mediaCueInPercent > 0"
         class="octopus-progress-bar bg-complementary"
@@ -30,10 +30,10 @@
       aria-valuenow="0"
       aria-valuemin="0"
       aria-valuemax="100"
-      :aria-label="$t('Listening progress bar')"
+      :aria-label="t('Listening progress bar')"
       :style="'width: ' + mainProgress + '%'"
     />
-    <template v-if="playerMedia">
+    <template v-if="playerStore.playerMedia">
       <div
         v-if="mediaCueInPercent > 0"
         class="octopus-progress-bar octopus-progress-bar-duration bg-complementary"
@@ -55,8 +55,8 @@
       class="octopus-progress-bar-cursor"
       :style="'left:' + mainProgress + '%'"
     />
-    <template v-if="playerChapteringPercent">
-      <template v-for="chapter in playerChapteringPercent" :key="chapter">
+    <template v-if="playerStore.playerChapteringPercent">
+      <template v-for="chapter in playerStore.playerChapteringPercent" :key="chapter">
         <div
           :id="'chapter-' + chapter.startPercent"
           class="octopus-progress-bar octopus-chapter"
@@ -82,66 +82,57 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { usePlayerStore } from "../../stores/PlayerStore";
-import { mapState } from "pinia";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
 );
-export default defineComponent({
-  name: "ProgressBar",
-  components: {
-    ClassicPopover,
-  },
-  props: {
-    alertBar: { default: undefined, type: Number },
-    mainProgress: { default: 0, type: Number },
-    secondaryProgress: { default: 0, type: Number },
-    isProgressCursor: { default: false, type: Boolean },
-    inPlayer: { default: false, type: Boolean },
-  },
-  data() {
-    return {
-      mediaCueInPercent: 0 as number,
-      mediaCueOutPercent: 100 as number,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, [
-      "playerMedia",
-      "playerChapteringPercent",
-      "playerStatus",
-    ]),
-    display() {
-      return "STOPPED" !== this.playerStatus;
-    },
-  },
-  watch: {
-    playerMedia: {
-      deep: true,
-      immediate: true,
-      handler() {
-        if (this.playerMedia) {
-          this.mediaCueInPercent = this.timeMediaToPercent(
-            this.playerMedia.cueIn ?? 0,
-          );
-          this.mediaCueOutPercent = this.timeMediaToPercent(
-            this.playerMedia.cueOut ?? null,
-          );
-        }
-      },
-    },
-  },
-  methods: {
-    timeMediaToPercent(value: number | null): number {
-      if (null === value || !this.playerMedia) {
-        return 100;
-      }
-      return (value * 100) / (this.playerMedia?.duration ?? 1);
-    },
-  },
-});
+
+//Props 
+defineProps({
+  alertBar: { default: undefined, type: Number },
+  mainProgress: { default: 0, type: Number },
+  secondaryProgress: { default: 0, type: Number },
+  isProgressCursor: { default: false, type: Boolean },
+  inPlayer: { default: false, type: Boolean },
+})
+
+
+//Data 
+const mediaCueInPercent = ref(0);
+const mediaCueOutPercent = ref(100);
+
+
+//Composables
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+//Computed
+const display = computed(() => "STOPPED" !== playerStore.playerStatus);
+
+
+//Watch
+watch(()=>playerStore.playerMedia, () => {
+  if (playerStore.playerMedia) {
+    mediaCueInPercent.value = timeMediaToPercent(
+      playerStore.playerMedia.cueIn ?? 0,
+    );
+    mediaCueOutPercent.value = timeMediaToPercent(
+      playerStore.playerMedia.cueOut ?? null,
+    );
+  }
+}, {deep: true, immediate: true});
+
+
+//Methods
+function timeMediaToPercent(value: number | null): number {
+  if (null === value || !playerStore.playerMedia) {
+    return 100;
+  }
+  return (value * 100) / (playerStore.playerMedia?.duration ?? 1);
+}
 </script>
 
 <style lang="scss">

package/src/components/misc/TopBar.vue

@@ -3,7 +3,7 @@
     role="banner"
     class="header-saooti-play"
     :style="headerBackgroundImage"
-    :class="[contentToDisplay ? 'header-img-bg':'header-color-bg', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']"
+    :class="[generalStore.contentToDisplay ? 'header-img-bg':'header-color-bg', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']"
   >
     <TopBarMainContent
       :is-phone="isPhone"
@@ -13,27 +13,26 @@
       :class="headerBackgroundImage.length ? 'header-opacity':''"
     />
   </header>
-  <div v-if="contentToDisplay" class="header-content-bg" :style="headerBackgroundImage" :class="{ scrolled: scrolled, 'header-force-blur':needToBlur }" >
+  <div v-if="generalStore.contentToDisplay" class="header-content-bg" :style="headerBackgroundImage" :class="{ scrolled: scrolled, 'header-force-blur':needToBlur }" >
     <div class="header-additional-content header-content">
       <h1 v-if="!scrolled" class="text-truncate">
         {{ titleToDisplay }}
       </h1>
       <SubscribeButtons
-        v-if="!isGarRole"
+        v-if="!authStore.isGarRole"
         v-show="!scrolled"
         :emission="emissionObject"
-        :playlist-id="contentToDisplay?.playlistId"
+        :playlist-id="generalStore.contentToDisplay?.playlistId"
         :window-width="windowWidth"
       />
     </div>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {useImageProxy} from "../composable/useImageProxy";
 import TopBarMainContent from "./TopBarMainContent.vue";
-import { mapState } from "pinia";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useAuthStore } from "../../stores/AuthStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { Podcast } from "@/stores/class/general/podcast";
@@ -45,121 +44,100 @@ import axios from "axios";
 const SubscribeButtons = defineAsyncComponent(
   () => import("../display/sharing/SubscribeButtons.vue"),
 );
-export default defineComponent({
-  name: "TopBar",
-  components: {
-    TopBarMainContent,
-    SubscribeButtons,
-  },
-  setup(){
-    const { isPhone, windowWidth } = useResizePhone();
-    const { useProxyImageUrl } = useImageProxy();
-    return { isPhone, windowWidth, useProxyImageUrl }
-  },
 
-  data() {
-    return {
-      scrolled: false as boolean,
-      oldScrollY: 0 as number,
-      minScroll: 0 as number,
-      headerBackgroundImage: "" as string,
-      needToBlur: false as boolean,
-    };
-  },
-  computed: {
-    ...mapState(useAuthStore, ["isGarRole"]),
-    ...mapState(useGeneralStore, ["contentToDisplay"]),
-    isContentToDisplay(): boolean {
-      return (
-        "podcast" === this.$route.name ||
-        "emission" === this.$route.name ||
-        "playlist" === this.$route.name ||
-        "radio" === this.$route.name
-      );
-    },
-    titleToDisplay(): string {
-      if ((this.contentToDisplay as Podcast)?.podcastId) {
-        return (this.contentToDisplay as Podcast).emission.name;
-      }
-      if ((this.contentToDisplay as Playlist)?.playlistId) {
-        return (this.contentToDisplay as Playlist).title;
-      }
-      if ((this.contentToDisplay as Emission)?.emissionId) {
-        return (this.contentToDisplay as Emission).name;
-      }
-      if ((this.contentToDisplay as Canal)?.id) {
-        return (this.contentToDisplay as Canal).name;
-      }
-      return "";
-    },
-    emissionObject(): Emission | null {
-      if ((this.contentToDisplay as Podcast)?.podcastId) {
-        return (this.contentToDisplay as Podcast).emission;
-      }
-      if ((this.contentToDisplay as Emission)?.emissionId) {
-        return this.contentToDisplay as Emission;
-      }
-      return null;
-    },
-  },
-  watch:{
-    contentToDisplay: {
-      deep: true,
-      immediate: true,
-      async handler() {
-        if(!this.contentToDisplay){
-          this.headerBackgroundImage = "";
-          this.needToBlur = false;
-          return;
-        }
-        const proxyUrl = this.useProxyImageUrl(this.contentToDisplay.imageUrl,"270", undefined, true);
-        try {
-          const result = await axios.get(proxyUrl);
-          this.headerBackgroundImage = `background-image: url('${result.data}');`;
-          if(result.data !== this.contentToDisplay.imageUrl){
-            this.needToBlur = false;
-          }else{
-            this.needToBlur = true;
-          }
-        } catch {
-          this.headerBackgroundImage = this.contentToDisplay.imageUrl ? `background-image: url('${this.contentToDisplay.imageUrl}');` : "";
-          this.needToBlur = true;
-        }
-      },
-    },
-  },
-  mounted() {
-    window.addEventListener("scroll", this.handleScroll);
-  },
-  beforeUnmount() {
-    window.removeEventListener("scroll", this.handleScroll);
-  },
-  methods: {
-    handleScroll(): void {
-      if (
-        window.scrollY - this.oldScrollY > 0 &&
-        window.scrollY > 1 &&
-        document.body.offsetHeight - window.innerHeight > 40
-      ) {
-        if (!this.scrolled) {
-          this.scrolled = true;
-          this.minScroll = 0;
-        }
-      } else if (
-        window.scrollY - this.oldScrollY < 0 &&
-        window.scrollY < 1 &&
-        this.minScroll > 20
-      ) {
-        this.scrolled = false;
-        this.minScroll = 0;
-      }
-      this.oldScrollY = window.scrollY;
-      if (this.minScroll < window.scrollY) {
-        this.minScroll = window.scrollY;
-      }
-    },
-  },
+
+//Data 
+const scrolled = ref(false);
+const oldScrollY = ref(0);
+const minScroll = ref(0);
+const headerBackgroundImage = ref("");
+const needToBlur = ref(false);
+
+
+//Composables
+const { isPhone, windowWidth } = useResizePhone();
+const { useProxyImageUrl } = useImageProxy();
+const authStore = useAuthStore();
+const generalStore = useGeneralStore();
+
+//Computed
+const titleToDisplay = computed(() => {
+  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {
+    return (generalStore.contentToDisplay as Podcast).emission.name;
+  }
+  if ((generalStore.contentToDisplay as Playlist)?.playlistId) {
+    return (generalStore.contentToDisplay as Playlist).title;
+  }
+  if ((generalStore.contentToDisplay as Emission)?.emissionId) {
+    return (generalStore.contentToDisplay as Emission).name;
+  }
+  if ((generalStore.contentToDisplay as Canal)?.id) {
+    return (generalStore.contentToDisplay as Canal).name;
+  }
+  return "";
+});
+const emissionObject = computed(() => {
+  if ((generalStore.contentToDisplay as Podcast)?.podcastId) {
+    return (generalStore.contentToDisplay as Podcast).emission;
+  }
+  if ((generalStore.contentToDisplay as Emission)?.emissionId) {
+    return generalStore.contentToDisplay as Emission;
+  }
+  return null;
 });
+
+//Watch
+watch(()=>generalStore.contentToDisplay, async () => {
+  if(!generalStore.contentToDisplay){
+    headerBackgroundImage.value = "";
+    needToBlur.value = false;
+    return;
+  }
+  const widthAsked = window.innerWidth > 960 ? "1600":"1000";
+  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl,widthAsked, undefined, true);
+  try {
+    const result = await axios.get(proxyUrl);
+    headerBackgroundImage.value = `background-image: url('${result.data}');`;
+    needToBlur.value = result.data === generalStore.contentToDisplay.imageUrl;
+  } catch {
+    headerBackgroundImage.value = generalStore.contentToDisplay.imageUrl ? `background-image: url('${generalStore.contentToDisplay.imageUrl}');` : "";
+    needToBlur.value = true;
+  }
+}, {deep: true, immediate: true});
+
+
+onMounted(()=>{
+  window.addEventListener("scroll", handleScroll);
+})
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", handleScroll);
+})
+
+
+//Methods
+function handleScroll(): void {
+  if (
+    window.scrollY - oldScrollY.value > 0 &&
+    window.scrollY > 1 &&
+    document.body.offsetHeight - window.innerHeight > 40
+  ) {
+    if (!scrolled.value) {
+      scrolled.value = true;
+      minScroll.value = 0;
+    }
+  } else if (
+    window.scrollY - oldScrollY.value  < 0 &&
+    window.scrollY < 1 &&
+    minScroll.value > 20
+  ) {
+    scrolled.value = false;
+    minScroll.value = 0;
+  }
+  oldScrollY.value  = window.scrollY;
+  if (minScroll.value < window.scrollY) {
+    minScroll.value = window.scrollY;
+  }
+}
 </script>
 
 <style lang="scss">