@saooti/octopus-sdk 37.0.5 → 37.0.7

package/src/components/misc/player/PlayerTimeline.vue

@@ -4,58 +4,54 @@
     class="timeline-button"
     @click="$emit('update:showTimeline', !showTimeline)"
   >
-    <div
-      class="saooti-down"
-      :class="showTimeline ? '' : 'arrow-transform'"
-    />
+    <div class="saooti-down" :class="showTimeline ? '' : 'arrow-transform'" />
     <div>Timeline</div>
   </div>
 </template>
 
 <script lang="ts">
-import { state } from '../../../stores/ParamSdkStore';
-import { defineComponent } from 'vue';
-import { CommentPodcast } from '@/stores/class/general/comment';
+import { state } from "../../../stores/ParamSdkStore";
+import { defineComponent } from "vue";
+import { CommentPodcast } from "@/stores/class/general/comment";
 export default defineComponent({
-  name: 'PlayerTimeline',
+  name: "PlayerTimeline",
 
   props: {
-    showTimeline: { default: false, type: Boolean},
-    comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
+    showTimeline: { default: false, type: Boolean },
+    comments: { default: () => [], type: Array as () => Array<CommentPodcast> },
   },
-  emits:['update:showTimeline'],
+  emits: ["update:showTimeline"],
 
   computed: {
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
   },
-
-})
+});
 </script>
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.player-container {
-  .timeline-button {
-    background: black;
-    padding: 0.1rem;
-    border-radius: 50%;
-    width: 70px;
-    height: 70px;
-    font-size: 0.7rem;
-    font-weight: bold;
-    justify-content: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-    color: $octopus-primary-color;
-    margin-left: 0.5rem;
-    @media (max-width: 960px) {
-      display: none;
+@import "@scss/_variables.scss";
+.octopus-app {
+  .player-container {
+    .timeline-button {
+      background: black;
+      padding: 0.1rem;
+      border-radius: 50%;
+      width: 70px;
+      height: 70px;
+      font-size: 0.7rem;
+      font-weight: bold;
+      justify-content: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      color: $octopus-primary-color;
+      margin-left: 0.5rem;
+      @media (max-width: 960px) {
+        display: none;
+      }
     }
   }
 }
-}
-</style>
+</style>

package/src/components/misc/player/radio/RadioHistory.vue

@@ -1,34 +1,30 @@
 <template>
-  <div 
-    v-if="playerRadioHistory.length"
-    class="d-flex align-items-center mt-3"
-  >
+  <div v-if="playerRadioHistory.length" class="d-flex align-items-center mt-3">
     <div class="fw-bold me-3">
-      {{ $t('Previously') +':' }}
+      {{ $t("Previously") + ":" }}
     </div>
     <button
-      v-if="indexStart!==0"
+      v-if="indexStart !== 0"
       class="btn btn-transparent text-light saooti-left"
       @click="handleResize(0)"
     />
-    <div
-      ref="historyListContainer"
-      class="history-list-container"
-    >
-      <div 
-        v-for="(pastItem, index) in playerRadioHistory" 
+    <div ref="historyListContainer" class="history-list-container">
+      <div
+        v-for="(pastItem, index) in playerRadioHistory"
         :key="pastItem.title"
         :ref="'history' + index"
         class="d-flex flex-shrink-0"
       >
         <div class="d-flex flex-shrink-0 align-items-end">
-          <span class="me-2 hour-past-item">{{ displayTimeItem(pastItem) }}</span>
+          <span class="me-2 hour-past-item">{{
+            displayTimeItem(pastItem)
+          }}</span>
           <span class="me-3">{{ displayPreviousItem(pastItem) }}</span>
         </div>
       </div>
     </div>
     <button
-      v-if="indexNotDisplay<=playerRadioHistory.length-1"
+      v-if="indexNotDisplay <= playerRadioHistory.length - 1"
       class="btn btn-transparent text-light saooti-right"
       @click="handleResize(indexNotDisplay)"
     />
@@ -36,100 +32,107 @@
 </template>
 
 <script lang="ts">
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState } from 'pinia';
-import dayjs from 'dayjs';
-import {fetchRadioData} from '../../../mixins/radio/fetchRadioData';
-import { defineComponent } from 'vue';
-import { MediaRadio } from '@/stores/class/general/player';
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import dayjs from "dayjs";
+import { fetchRadioData } from "../../../mixins/radio/fetchRadioData";
+import { defineComponent } from "vue";
+import { MediaRadio } from "@/stores/class/general/player";
 export default defineComponent({
-  name: 'RadioHistory',
+  name: "RadioHistory",
 
-  components: {
-  },
+  components: {},
 
   mixins: [fetchRadioData],
-  emits: ['updateNotListenTime'],
+  emits: ["updateNotListenTime"],
   data() {
     return {
       indexStart: 0 as number,
       indexNotDisplay: 100 as number,
     };
   },
-  
+
   computed: {
-    ...mapState(usePlayerStore, ['playerRadio']),
-    playerRadioHistory(){
+    ...mapState(usePlayerStore, ["playerRadio"]),
+    playerRadioHistory() {
       return this.playerRadio?.history ?? [];
-    }
+    },
   },
-  watch:{
+  watch: {
     playerRadioHistory: {
       deep: true,
-      immediate:true,
-      handler(){
+      immediate: true,
+      handler() {
         this.$nextTick(() => {
           this.handleResize(0);
         });
-      }
+      },
     },
   },
   created() {
-    window.addEventListener('resize', ()=>{this.handleResize(0);});
+    window.addEventListener("resize", () => {
+      this.handleResize(0);
+    });
   },
   unmounted() {
-    window.removeEventListener('resize', ()=>{this.handleResize(0);});
+    window.removeEventListener("resize", () => {
+      this.handleResize(0);
+    });
   },
   mounted() {
     this.handleResize(0);
   },
-  methods:{
-    handleResize(indexAsked:number): void {
-      const historyList = (this.$refs.historyListContainer as HTMLElement);
-      if(null === historyList ||!historyList){
+  methods: {
+    handleResize(indexAsked: number): void {
+      const historyList = this.$refs.historyListContainer as HTMLElement;
+      if (null === historyList || !historyList) {
         return;
       }
       this.indexStart = indexAsked;
       this.indexNotDisplay = this.playerRadioHistory.length;
       for (let index = 0; index < this.playerRadioHistory.length; index++) {
-        const el = (this.$refs['history' +index] as Array<HTMLElement>)[0];
+        const el = (this.$refs["history" + index] as Array<HTMLElement>)[0];
         if (!el) continue;
-        if(index < this.indexStart && !el.classList.contains('hid')){
-          el.classList.add('hid');
+        if (index < this.indexStart && !el.classList.contains("hid")) {
+          el.classList.add("hid");
           continue;
         }
-        if (index >= this.indexStart && el.classList.contains('hid')) {
-          el.classList.remove('hid');
+        if (index >= this.indexStart && el.classList.contains("hid")) {
+          el.classList.remove("hid");
         }
       }
-      for (let index = this.indexStart + 1; index < this.playerRadioHistory.length; index++) {
-        const el = (this.$refs['history' +index] as Array<HTMLElement>)[0];
+      for (
+        let index = this.indexStart + 1;
+        index < this.playerRadioHistory.length;
+        index++
+      ) {
+        const el = (this.$refs["history" + index] as Array<HTMLElement>)[0];
         if (!el) continue;
-        if (index > this.indexNotDisplay && !el.classList.contains('hid')) {
-          el.classList.add('hid');
+        if (index > this.indexNotDisplay && !el.classList.contains("hid")) {
+          el.classList.add("hid");
           continue;
         }
         const parent = el.parentElement;
-        if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth ) {
+        if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth) {
           this.indexNotDisplay = index;
-          el.classList.add('hid');
+          el.classList.add("hid");
         }
       }
     },
-    displayTimeItem(item: MediaRadio):string{
-      return dayjs(item.startDate).format('HH:mm');
+    displayTimeItem(item: MediaRadio): string {
+      return dayjs(item.startDate).format("HH:mm");
     },
-    displayPreviousItem(item: MediaRadio):string{
-      if(item.podcastId){
+    displayPreviousItem(item: MediaRadio): string {
+      if (item.podcastId) {
         return item.title;
       }
       return this.displayTitle(item);
-    }
-  }
-})
+    },
+  },
+});
 </script>
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .history-list-container {
     display: inline-flex;
     justify-content: flex-start;
@@ -138,9 +141,9 @@ export default defineComponent({
     width: 0;
     position: relative;
   }
-  .hour-past-item{
+  .hour-past-item {
     font-size: 0.8rem;
     color: #dbdbdb;
   }
 }
-</style>
+</style>

package/src/components/misc/player/radio/RadioProgressBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="octopus-progress c-hand-auto mt-1"
-    :class="isAmbiance?'ambiance-progress':''"
+    :class="isAmbiance ? 'ambiance-progress' : ''"
   >
     <div
       class="octopus-progress-bar"
@@ -15,39 +15,40 @@
 </template>
 
 <script lang="ts">
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState, mapActions } from 'pinia';
-import dayjs from 'dayjs';
-import { defineComponent } from 'vue';
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState, mapActions } from "pinia";
+import dayjs from "dayjs";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'RadioProgressBar',
+  name: "RadioProgressBar",
 
-  components: {
-  },
-  emits: ['updateNotListenTime'],
+  components: {},
+  emits: ["updateNotListenTime"],
   data() {
     return {
-      percentInterval: undefined as ReturnType<typeof setTimeout>|undefined,
+      percentInterval: undefined as ReturnType<typeof setTimeout> | undefined,
     };
   },
-  
+
   computed: {
-    ...mapState(usePlayerStore, ['playerRadio', 'playerElapsed']),
-    isAmbiance(): boolean{
-      return !this.playerRadio?.podcast?.podcastId
+    ...mapState(usePlayerStore, ["playerRadio", "playerElapsed"]),
+    isAmbiance(): boolean {
+      return !this.playerRadio?.podcast?.podcastId;
     },
-    percentProgress(): number{
-      if(!this.playerElapsed){return 0;}
+    percentProgress(): number {
+      if (!this.playerElapsed) {
+        return 0;
+      }
       return this.playerElapsed * 100;
     },
   },
-  mounted(){
+  mounted() {
     this.handlePercentInterval();
   },
-  methods:{
-    ...mapActions(usePlayerStore, ['playerUpdateElapsed']),
-    handlePercentInterval(/* clear: boolean */): void{
-     /*  if(clear){
+  methods: {
+    ...mapActions(usePlayerStore, ["playerUpdateElapsed"]),
+    handlePercentInterval(/* clear: boolean */): void {
+      /*  if(clear){
         clearInterval((this.percentInterval as unknown as number));
         this.percentInterval = undefined;
         return;
@@ -56,24 +57,32 @@ export default defineComponent({
         this.calculatePercent();
       }, 1000);
     },
-    calculatePercent(): void{
-      if(!this.playerRadio?.metadata){return;}
-      const actualMilliSecondsPlayed = dayjs().subtract(18, 'second').diff(dayjs(this.playerRadio.metadata.startDate));
-      const percentPlayed = (actualMilliSecondsPlayed) / (this.playerRadio?.metadata.mediaDuration * 1000);
-      this.playerUpdateElapsed(percentPlayed, this.playerRadio?.metadata.mediaDuration);
-    }
-  }
-
-})
+    calculatePercent(): void {
+      if (!this.playerRadio?.metadata) {
+        return;
+      }
+      const actualMilliSecondsPlayed = dayjs()
+        .subtract(18, "second")
+        .diff(dayjs(this.playerRadio.metadata.startDate));
+      const percentPlayed =
+        actualMilliSecondsPlayed /
+        (this.playerRadio?.metadata.mediaDuration * 1000);
+      this.playerUpdateElapsed(
+        percentPlayed,
+        this.playerRadio?.metadata.mediaDuration,
+      );
+    },
+  },
+});
 </script>
 <style lang="scss">
-@import '../../../../assets/progressbar.scss';
-.octopus-app{
-  .ambiance-progress{
+@import "../../../../assets/progressbar.scss";
+.octopus-app {
+  .ambiance-progress {
     background-color: #d1d1d1;
-    .octopus-progress-bar{
+    .octopus-progress-bar {
       background-color: #747474;
     }
   }
 }
-</style>
+</style>

package/src/components/mixins/cookies.ts

@@ -1,21 +1,22 @@
-export default{
+export default {
   methods: {
-    setCookie(name: string, value: string, domain= ""): void {
+    setCookie(name: string, value: string, domain = ""): void {
       const date = new Date();
       date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
-      const expires = '; expires=' + date.toUTCString();
-      document.cookie = name + '=' + (value || '') + expires +domain+ '; path=/';
+      const expires = "; expires=" + date.toUTCString();
+      document.cookie =
+        name + "=" + (value || "") + expires + domain + "; path=/";
     },
-    getCookie(name: string): string|null {
-      const nameEQ = name + '=';
-      const ca = document.cookie.split(';');
-      for (let cookieValue of ca) {
+    getCookie(name: string): string | null {
+      const nameEQ = name + "=";
+      const ca = document.cookie.split(";");
+      for (const cookieValue of ca) {
         let c = cookieValue;
-        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+        while (c.charAt(0) == " ") c = c.substring(1, c.length);
         if (0 === c.indexOf(nameEQ))
           return c.substring(nameEQ.length, c.length);
       }
       return null;
     },
   },
-};
+};

package/src/components/mixins/displayMethods.ts

@@ -1,11 +1,12 @@
-
-export default{
+export default {
   methods: {
     urlify(text: string): string {
       const urlRegex = /[^"](https?:\/\/[^\s<]+)/g;
-      if (!text) return '';
+      if (!text) return "";
       return text.replace(urlRegex, (url: string) => {
-        return '<a href="' + url + '" target="_blank" rel="noopener">' + url + '</a>';
+        return (
+          '<a href="' + url + '" target="_blank" rel="noopener">' + url + "</a>"
+        );
       });
     },
     async onCopyCode(link: string, callback: () => void): Promise<void> {

package/src/components/mixins/handle403.ts

@@ -1,22 +1,22 @@
-import { AxiosError } from 'axios';
-import { defineComponent } from 'vue';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
+import { AxiosError } from "axios";
+import { defineComponent } from "vue";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
 export const handle403 = defineComponent({
   computed: {
-    ...mapState(useAuthStore, ['authOrgaId']),
+    ...mapState(useAuthStore, ["authOrgaId"]),
   },
   methods: {
     handle403(error: AxiosError): void {
       if (403 === error.response?.status) {
-        if(undefined===this.authOrgaId){
+        if (undefined === this.authOrgaId) {
           window.location.href = window.location.origin + "/sso/login";
-        }else{
+        } else {
           this.$router.push({
-            path: '/main/pub/error'
+            path: "/main/pub/error",
           });
         }
       }
     },
   },
-});
+});

package/src/components/mixins/imageProxy.ts

@@ -1,15 +1,22 @@
-import { state } from '../../stores/ParamSdkStore';
+import { state } from "../../stores/ParamSdkStore";
 export default {
   methods: {
-    proxyImageUrl(url:string, width:string, height?:string): string{
-      if(!url){
+    proxyImageUrl(url: string, width: string, height?: string): string {
+      if (!url) {
         return "";
       }
-      if(state.octopusApi.imageUrl && url.includes('http')){
-        const size = height ? "height="+height:"width="+width;
-        return state.octopusApi.imageUrl+"image/"+btoa(url)+"?"+size+"&useWebp=true";
+      if (state.octopusApi.imageUrl && url.includes("http")) {
+        const size = height ? "height=" + height : "width=" + width;
+        return (
+          state.octopusApi.imageUrl +
+          "image/" +
+          btoa(url) +
+          "?" +
+          size +
+          "&useWebp=true"
+        );
       }
       return url;
     },
   },
-};
+};

package/src/components/mixins/init.ts

@@ -1,26 +1,41 @@
-
 import { Category } from "@/stores/class/general/category";
-import orgaFilter from '../mixins/organisationFilter';
-import octopusApi from '@saooti/octopus-api';
-import { state } from '../../stores/ParamSdkStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapActions } from 'pinia';
-import { defineComponent } from 'vue';
+import orgaFilter from "../mixins/organisationFilter";
+import octopusApi from "@saooti/octopus-api";
+import { state } from "../../stores/ParamSdkStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapActions } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
   mixins: [orgaFilter],
   methods: {
-    ...mapActions(useGeneralStore, ['storedUpdateCategories']),
+    ...mapActions(useGeneralStore, ["storedUpdateCategories"]),
     async initSdk() {
-      if (0 === (state.generalParameters.allCategories as Array<Category>).length) {
-        octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list${state.octopusApi.organisationId? '/'+state.octopusApi.organisationId : ''}`, { lang: this.$i18n.locale }).then((data: Array<Category>) => {
-          this.storedUpdateCategories(data);
-        });
-      }else{
-        this.storedUpdateCategories((state.generalParameters.allCategories as Array<Category>));
+      if (
+        0 === (state.generalParameters.allCategories as Array<Category>).length
+      ) {
+        octopusApi
+          .fetchDataWithParams<Array<Category>>(
+            0,
+            `iab/list${
+              state.octopusApi.organisationId
+                ? "/" + state.octopusApi.organisationId
+                : ""
+            }`,
+            { lang: this.$i18n.locale },
+          )
+          .then((data: Array<Category>) => {
+            this.storedUpdateCategories(data);
+          });
+      } else {
+        this.storedUpdateCategories(
+          state.generalParameters.allCategories as Array<Category>,
+        );
       }
-      const captcha = (document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement);
+      const captcha = document.getElementsByClassName(
+        "grecaptcha-badge",
+      )[0] as HTMLElement;
       if (captcha) {
-        captcha.style.display = 'none';
+        captcha.style.display = "none";
       }
     },
   },

package/src/components/mixins/orgaComputed.ts

@@ -1,15 +1,15 @@
-import { state } from '../../stores/ParamSdkStore';
-import { useFilterStore } from '@/stores/FilterStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
+import { state } from "../../stores/ParamSdkStore";
+import { useFilterStore } from "@/stores/FilterStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export const orgaComputed = defineComponent({
   computed: {
-    ...mapState(useFilterStore, ['filterOrgaId']),
-		myOrganisationId(): string|undefined {
+    ...mapState(useFilterStore, ["filterOrgaId"]),
+    myOrganisationId(): string | undefined {
       return state.generalParameters.organisationId;
     },
     authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+      return state.generalParameters.authenticated as boolean;
     },
   },
 });