@saooti/octopus-sdk 37.0.6 → 37.0.8

package/src/components/misc/LeftMenu.vue

@@ -1,15 +1,9 @@
 <template>
-  <div
-    class="left-menu-container"
-    @mouseleave="onMenuClick"
-  >
-    <template
-      v-for="link in routerLinkArray"
-      :key="link.routeName"
-    >
+  <div class="left-menu-container" @mouseleave="onMenuClick">
+    <template v-for="link in routerLinkArray" :key="link.routeName">
       <router-link
         v-if="link.condition"
-        :class="'home'===link.routeName ? 'show-phone' : ''"
+        :class="'home' === link.routeName ? 'show-phone' : ''"
         :to="{
           name: link.routeName,
           query: getQueriesRouter(link.routeName),
@@ -28,7 +22,7 @@
       :reset="reset"
       @selected="onOrganisationSelected"
     />
-    <hr class="show-phone">
+    <hr class="show-phone" />
     <router-link
       v-for="category in categories"
       :key="category.id"
@@ -46,44 +40,75 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../stores/ParamSdkStore';
-import orgaFilter from '../mixins/organisationFilter';
-import { Category } from '@/stores/class/general/category';
-import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { useFilterStore } from '@/stores/FilterStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapState } from 'pinia';
-import { Organisation } from '@/stores/class/general/organisation';
-const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
+import { state } from "../../stores/ParamSdkStore";
+import orgaFilter from "../mixins/organisationFilter";
+import { Category } from "@/stores/class/general/category";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapState } from "pinia";
+import { Organisation } from "@/stores/class/general/organisation";
+const OrganisationChooserLight = defineAsyncComponent(
+  () => import("../display/organisation/OrganisationChooserLight.vue"),
+);
 export default defineComponent({
-  name: 'LeftMenu',
+  name: "LeftMenu",
   components: {
     OrganisationChooserLight,
   },
-  mixins:[orgaFilter],
+  mixins: [orgaFilter],
   props: {
-    isEducation: { default: false, type: Boolean},
+    isEducation: { default: false, type: Boolean },
   },
-  emits: ['close'],
+  emits: ["close"],
   data() {
     return {
-      organisationId: undefined as string|undefined,
+      organisationId: undefined as string | undefined,
       reset: false as boolean,
     };
   },
   computed: {
-    ...mapState(useGeneralStore, ['storedCategories']),
-    ...mapState(useFilterStore, ['filterLive', 'filterOrgaId', 'filterIab', 'filterRubrique']),
-    routerLinkArray(){
+    ...mapState(useGeneralStore, ["storedCategories"]),
+    ...mapState(useFilterStore, [
+      "filterLive",
+      "filterOrgaId",
+      "filterIab",
+      "filterRubrique",
+    ]),
+    routerLinkArray() {
       return [
-        {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 : true},
-        {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
-        {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("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: true },
+        {
+          title: this.$t("Emissions"),
+          routeName: "emissions",
+          condition: true,
+        },
+        {
+          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,
+        },
+      ];
     },
     categories(): Array<Category> {
       return this.storedCategories.filter((c: Category) => {
@@ -92,11 +117,16 @@ export default defineComponent({
       });
     },
     isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
+      return state.generalParameters.podcastmaker as boolean;
     },
-    rubriqueQueryParam(): string|undefined{
-      if(this.filterRubrique?.length){
-        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+    rubriqueQueryParam(): string | undefined {
+      if (this.filterRubrique?.length) {
+        return this.filterRubrique
+          .map(
+            (value: RubriquageFilter) =>
+              value.rubriquageId + ":" + value.rubriqueId,
+          )
+          .join();
       }
       return undefined;
     },
@@ -113,20 +143,26 @@ export default defineComponent({
       },
     },
   },
-  
+
   methods: {
-    getQueriesRouter(routeName: string){
-      if('podcasts' !== routeName && 'emissions' !== routeName && 'home' !== routeName){
-        return { productor: this.filterOrgaId};
+    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}
+      return {
+        productor: this.filterOrgaId,
+        iabId: this.filterIab?.id,
+        rubriquesId: this.rubriqueQueryParam,
+      };
     },
     onMenuClick() {
-      this.$emit('close');
+      this.$emit("close");
     },
-    async onOrganisationSelected(organisation: Organisation|undefined) {
+    async onOrganisationSelected(organisation: Organisation | undefined) {
       if (organisation?.id) {
         await this.selectOrganisation(organisation.id);
         return;
@@ -134,40 +170,40 @@ export default defineComponent({
       this.removeSelectedOrga();
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-.octopus-app{
-.left-menu-container {
-  position: fixed;
-  top: 3rem;
-  bottom: 0;
-  right: 0;
-  z-index: 10;
-  background: #fff;
-  width: 20%;
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  font-size: 0.9rem;
+.octopus-app {
+  .left-menu-container {
+    position: fixed;
+    top: 3rem;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    background: #fff;
+    width: 20%;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    font-size: 0.9rem;
 
-  a{
-    color: black !important;
-    font-weight: bold;
-    margin-bottom: 1rem;
-  }
-  /** PHONES*/
-  @media (max-width: 960px) {
-    width: 75%;
-    max-height: 80%;
-    top: 2.5rem;
-    overflow-y: auto;
-    height: 100%;
+    a {
+      color: black !important;
+      font-weight: bold;
+      margin-bottom: 1rem;
+    }
+    /** PHONES*/
+    @media (max-width: 960px) {
+      width: 75%;
+      max-height: 80%;
+      top: 2.5rem;
+      overflow-y: auto;
+      height: 100%;
+    }
+    @media (max-width: 450px) {
+      width: 94%;
+    }
   }
-  @media (max-width: 450px) {
-    width: 94%;
-  }
-}
 }
-</style>
+</style>

package/src/components/misc/ProgressBar.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="octopus-progress"
-  >
+  <div class="octopus-progress">
     <div
       v-if="secondaryProgress"
       class="octopus-progress-bar bg-light"
@@ -15,12 +13,12 @@
       <div
         v-if="mediaCueInPercent > 0"
         class="octopus-progress-bar bg-complementary"
-        :style="{'width': + mediaCueInPercent + '%'}"
+        :style="{ width: +mediaCueInPercent + '%' }"
       />
       <div
         v-if="mediaCueOutPercent < 100"
         class="octopus-progress-bar end-0 bg-complementary"
-        :style="{'width': + 100- mediaCueOutPercent + '%'}"
+        :style="{ width: +100 - mediaCueOutPercent + '%' }"
       />
     </template>
     <div
@@ -35,12 +33,12 @@
       <div
         v-if="mediaCueInPercent > 0"
         class="octopus-progress-bar octopus-progress-bar-duration bg-complementary"
-        :style="{'left': + mediaCueInPercent + '%'}"
+        :style="{ left: +mediaCueInPercent + '%' }"
       />
       <div
         v-if="mediaCueOutPercent < 100"
         class="octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary"
-        :style="{'right': + 100- mediaCueOutPercent + '%'}"
+        :style="{ right: +100 - mediaCueOutPercent + '%' }"
       />
     </template>
     <div
@@ -57,16 +55,16 @@
 </template>
 
 <script lang="ts">
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { mapState } from 'pinia';
-import { defineComponent } from 'vue';
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { mapState } from "pinia";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ProgressBar',
+  name: "ProgressBar",
   props: {
-    alertBar: { default: undefined, type: Number},
-    mainProgress: { default: 0, type: Number},
-    secondaryProgress: { default: 0, type: Number},
-    isProgressCursor: { default: false, type: Boolean},
+    alertBar: { default: undefined, type: Number },
+    mainProgress: { default: 0, type: Number },
+    secondaryProgress: { default: 0, type: Number },
+    isProgressCursor: { default: false, type: Boolean },
   },
   data() {
     return {
@@ -74,30 +72,36 @@ export default defineComponent({
       mediaCueOutPercent: 100 as number,
     };
   },
-  computed:{
-    ...mapState(usePlayerStore, ['playerMedia']),
+  computed: {
+    ...mapState(usePlayerStore, ["playerMedia"]),
   },
-  watch:{
+  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);
+      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);
+  methods: {
+    timeMediaToPercent(value: number | null): number {
+      if (null === value || !this.playerMedia) {
+        return 100;
+      }
+      return (value * 100) / (this.playerMedia?.duration ?? 1);
     },
-  }
-})
+  },
+});
 </script>
 
 <style lang="scss">
-@import '../../assets/progressbar.scss';
-</style>
+@import "../../assets/progressbar.scss";
+</style>

package/src/components/misc/SnackBar.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="snack-bar-wrap" :style="style.wrap">
+    <template v-for="(msg, i) in msgs" :key="i">
+      <div class="snack-bar" :style="style.bar(msg.color)" @click="pop(i)">
+        {{ msg.msg.message || msg.msg }}
+      </div>
+      <br />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+const getStyle = (
+  baseSize: string,
+  position: { pos: string; textAlign: string },
+) => {
+  const c = (f: number) => `calc(${f} * ${baseSize})`;
+  const { pos, textAlign } = position;
+  return {
+    wrap: {
+      position: "fixed",
+      left: 0,
+      pos: pos ? pos : c(0.05),
+      zIndex: 9999,
+      width: "100%",
+      padding: `0 ${c(0.2)}`,
+      pointerEvents: "none",
+      textAlign,
+    },
+    bar: (bg: string) => ({
+      display: "inline-block",
+      width: "auto",
+      minWidth: baseSize,
+      maxWidth: `calc(100vw - ${c(0.4)})`,
+      padding: `${c(0.15)} ${c(0.2)}`,
+      margin: `0 0 ${c(0.05)}`,
+      borderRadius: c(0.02),
+      lineHeight: c(0.2),
+      color: "#fff",
+      background: bg,
+      boxShadow: `0 ${c(0.01)} ${c(0.025)} rgba(0,0,0, .15)`,
+      cursor: "pointer",
+      textAlign: "center",
+      pointerEvents: "all",
+      userSelect: "none",
+    }),
+  };
+};
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "SnackBar",
+  props: {
+    colors: {
+      default: () => ({
+        open: "#333",
+        info: "#3DBD7D",
+        error: "#FA7377",
+        warn: "#FF6600",
+      }),
+      type: Object,
+    },
+    position: { default: "top-center", type: String },
+    holdTime: { default: 5000, type: Number },
+  },
+  data() {
+    return {
+      msgs: [] as Array<{
+        color: string;
+        msg: string;
+        timer: ReturnType<typeof setTimeout> | undefined;
+      }>,
+      baseSize: "5rem",
+    };
+  },
+  computed: {
+    $_position(): { pos: string; textAlign: string } {
+      const [p, textAlign] = this.position.toString().split("-");
+      return {
+        pos: ["top", "bottom"].includes(p) ? p : "top",
+        textAlign: ["left", "center", "right"].includes(textAlign)
+          ? textAlign
+          : "center",
+      };
+    },
+    style(): {
+      wrap: {
+        position: string;
+        left: number;
+        pos: string;
+        zIndex: number;
+        width: string;
+        padding: string;
+        pointerEvents: string;
+        textAlign: string;
+      };
+      bar: (bg: string) => {
+        display: string;
+        width: string;
+        minWidth: string;
+        maxWidth: string;
+        padding: string;
+        margin: string;
+        borderRadius: string;
+        lineHeight: string;
+        color: string;
+        background: string;
+        boxShadow: string;
+        cursor: string;
+        textAlign: string;
+        pointerEvents: string;
+        userSelect: string;
+      };
+    } {
+      return getStyle(this.baseSize, this.$_position);
+    },
+  },
+  methods: {
+    info(msg: string): boolean {
+      const color = this.colors.info;
+      this.open({ color, msg }, false);
+      return true;
+    },
+    error(msg: string): boolean {
+      const color = this.colors.error;
+      this.open({ color, msg }, false);
+      return false;
+    },
+    warn(msg: string): boolean {
+      const color = this.colors.warn;
+      this.open({ color, msg }, false);
+      return true;
+    },
+    open(
+      message: { color: string; msg: string } | string,
+      isOpen = true,
+    ): boolean {
+      let msg;
+      let color;
+      if (!isOpen) {
+        color = (message as { color: string; msg: string }).color;
+        msg = (message as { color: string; msg: string }).msg;
+      } else {
+        color = this.colors.open;
+        msg = message as string;
+      }
+      const msgObj = {
+        color,
+        msg,
+        timer: setTimeout(this.pop, this.holdTime),
+      };
+
+      this.msgs.push(msgObj);
+
+      return true;
+    },
+    pop(i = 0): void {
+      if (this.msgs[i]) clearTimeout(this.msgs[i].timer as unknown as number);
+      this.msgs.splice(i, 1);
+    },
+  },
+});
+</script>
+<style lang="scss">
+.octopus-app {
+  .snack-bar-wrap {
+    bottom: 0px;
+  }
+}
+</style>