@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/misc/Snackbar.vue

@@ -1,19 +1,25 @@
 <template>
-  <div class="snack-bar-wrap" :style="style.wrap">
-    <template v-for="(msg, i) in msgs" :key="i">
+  <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)"
         v-html="msg.msg.message || msg.msg"
-      ></div>
-      <br/>
+      />
+      <br>
     </template>
   </div>
 </template>
 
 <script lang="ts">
-/* const getStyle = (baseSize: any, position:any) => {
+const getStyle = (baseSize: string, position: any) => {
   const c = (f: number) => `calc(${f} * ${baseSize})`;
   const { pos, textAlign } = position;
   return {
@@ -45,36 +51,28 @@
       userSelect: 'none',
     }),
   };
-}; */
-import { defineComponent } from 'vue';
+};
+import { defineComponent } from 'vue'
 export default defineComponent({
- /*  name: 'Snackbar',
+  name: 'Snackbar',
   props: {
-    colors: {
-      default() {
-        return {
+    colors: { default: ()=> ({
           open: '#333',
           info: '#3DBD7D',
           error: '#FA7377',
           warn: '#FF6600',
-        };
-      },
-      type: Object,
-    },
-    position: {
-      default: 'top-center',
-      type: String,
-    },
+        }), type: Object},
+    position: { default: 'top-center', type: String},
   },
   data() {
     return {
       msgs: [] as any,
-      holdTime: 3000,
+      holdTime: 5000,
       baseSize: '5rem',
     };
   },
   computed: {
-    $_position():any {
+    $_position(): any {
       const [p, textAlign] = this.position.toString().split('-');
       return {
         pos: ['top', 'bottom'].includes(p) ? p : 'top',
@@ -83,27 +81,27 @@ export default defineComponent({
           : 'center',
       };
     },
-    style() {
+    style(): any {
       return getStyle(this.baseSize, this.$_position);
     },
   },
   methods: {
-    info(msg: any) {
+    info(msg: any): boolean {
       const color = this.colors.info;
       this.open({ color, msg }, false);
       return true;
     },
-    error(msg: any) {
+    error(msg: any): boolean {
       const color = this.colors.error;
       this.open({ color, msg }, false);
       return false;
     },
-    warn(msg: any) {
+    warn(msg: any): boolean {
       const color = this.colors.warn;
       this.open({ color, msg }, false);
       return true;
     },
-    open(message: { color?: any; msg?: any; }, isOpen = true) {
+    open(message: any, isOpen = true): boolean {
       let msg;
       let color;
       if (!isOpen) {
@@ -123,10 +121,10 @@ export default defineComponent({
 
       return true;
     },
-    pop(i = 0) {
+    pop(i = 0): void {
       if (this.msgs[i]) clearTimeout(this.msgs[i].timer);
       this.msgs.splice(i, 1);
     },
-  }, */
-});
+  },
+})
 </script>

package/src/components/misc/TopBar.vue

@@ -1,116 +1,133 @@
 <template>
   <div
-    class="top-bar-container position-sticky"
-    v-bind:class="{ 'shadow-element': scrolled }"
     v-if="init"
+    class="top-bar-container position-sticky"
+    :class="{ 'shadow-element': scrolled }"
   >
     <div class="top-bar">
       <div
         class="hamburger-menu"
-        v-on:click="onDisplayMenu(false)"
         :aria-label="$t('open left Menu')"
+        @click="onDisplayMenu(false)"
       >
-        <div class="saooti-burger-menu h3"></div>
+        <div class="saooti-burger-menu h3" />
       </div>
       <router-link
         :to="{
           name: 'home',
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: $store.state.filter.organisationId,
+                   iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                   rubriquesId: rubriqueQueryParam},
         }"
       >
-        <div class="top-bar-logo m-3" v-on:click="onDisplayMenu(true)">
+        <div
+          class="top-bar-logo m-3"
+          @click="onDisplayMenu(true)"
+        >
           <img
+            v-if="!filterOrga || '' === imgUrl"
             :src="logoUrl"
             :alt="$t('Logo of main page')"
             :class="isEducation ? 'educationLogo' : ''"
-            v-if="!filterOrga || undefined === imgUrl"
-          />
-          <img :src="imgUrl" :alt="$t('Logo of main page')" v-else />
+          >
+          <img
+            v-else
+            :src="imgUrl"
+            :alt="$t('Logo of main page')"
+          >
         </div>
       </router-link>
       <OrganisationChooserLight
+        v-if="!isPodcastmaker"
         width="auto"
         page="topBar"
         :defaultanswer="$t('No organisation filter')"
-        @selected="onOrganisationSelected"
         :value="organisationId"
         :light="true"
-        class="mr-2 hide-top-bar"
+        class="me-2 hide-top-bar"
         :reset="reset"
-        v-if="!isPodcastmaker"
+        @selected="onOrganisationSelected"
       />
       <div class="d-flex align-items-center justify-content-center flex-grow">
         <router-link
           v-if="
             isLiveTab &&
-              !isPodcastmaker &&
               ((filterOrga && filterOrgaLive) || !filterOrga)
           "
           :to="{
             name: 'lives',
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Live') }}</router-link
+          class="linkHover p-3 text-dark fw-bold"
         >
+          {{ $t('Live') }}
+        </router-link>
         <router-link
           :to="{
             name: 'podcasts',
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId,
+                     iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                     rubriquesId: rubriqueQueryParam},
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Podcasts') }}</router-link
+          class="linkHover p-3 text-dark fw-bold"
         >
+          {{ $t('Podcasts') }}
+        </router-link>
         <router-link
           :to="{
             name: 'emissions',
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId,
+                     iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                     rubriquesId: rubriqueQueryParam },
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Emissions') }}</router-link
+          class="linkHover p-3 text-dark fw-bold"
         >
+          {{ $t('Emissions') }}
+        </router-link>
         <router-link
           :to="{
             name: 'participants',
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Speakers') }}</router-link
+          class="linkHover p-3 text-dark fw-bold"
         >
+          {{ $t('Speakers') }}
+        </router-link>
         <router-link
           :to="{
             name: 'playlists',
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          >{{ $t('Playlists') }}</router-link
+          class="linkHover p-3 text-dark fw-bold"
         >
+          {{ $t('Playlists') }}
+        </router-link>
         <router-link
+          v-if="!isPodcastmaker && (!filterOrga || isEducation)"
           :to="{
             name: 'productors',
-            query: { productor: this.$store.state.filter.organisationId },
+            query: { productor: $store.state.filter.organisationId },
           }"
-          class="linkHover p-3 text-dark font-weight-bold"
-          v-if="!isPodcastmaker && (!filterOrga || isEducation)"
-          >{{ $t('Productors') }}</router-link
+          class="linkHover p-3 text-dark fw-bold"
         >
+          {{ $t('Productors') }}
+        </router-link>
       </div>
       <div class="d-flex flex-column">
         <div class="d-flex justify-content-end hostedBy hide-phone">
-          <span>{{ $t('Hosted by') }}</span
-          ><span class="ml-1 mr-1 primary-color">Saooti</span>
+          <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-color">Saooti</span>
         </div>
         <div class="d-flex align-items-center justify-content-end flex-no-wrap">
-          <HomeDropdown :isEducation="isEducation" />
+          <HomeDropdown :is-education="isEducation" />
           <router-link
             :aria-label="$t('Search')"
             :to="{
               name: 'podcasts',
-              query: { productor: this.$store.state.filter.organisationId },
+              query: { productor: $store.state.filter.organisationId },
             }"
           >
             <div class="btn admin-button m-1">
-              <i class="saooti-search text-dark"></i>
+              <i class="saooti-search text-dark" />
             </div>
           </router-link>
         </div>
@@ -118,6 +135,147 @@
     </div>
   </div>
 </template>
+
+<script lang="ts">
+import { state } from '../../store/paramStore';
+import HomeDropdown from './HomeDropdown.vue';
+import { Organisation } from '@/store/class/organisation';
+import { orgaFilter } from '../mixins/organisationFilter';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { defineComponent,defineAsyncComponent } from 'vue';
+const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
+export default defineComponent({
+  name: 'TopBar',
+
+  components: {
+    OrganisationChooserLight,
+    HomeDropdown,
+  },
+  mixins:[orgaFilter],
+
+  props: {
+    displayMenu: { default: false, type: Boolean},
+    isEducation: { default: false, type: Boolean},
+  },
+  emits: ['update:displayMenu'],
+
+  data() {
+    return {
+      scrolled: false as boolean,
+      oldScrollY: 0 as number,
+      minScroll: 0 as number,
+      organisationId: undefined as string | undefined,
+      reset: false as boolean,
+      init: false as boolean,
+      dummyParam: new Date().getTime().toString() as string,
+    };
+  },
+
+ 
+  computed: {
+    rubriqueQueryParam(): string|undefined{
+      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
+        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
+    },
+    logoUrl(): string {
+      if (this.isEducation) return '/img/logo_education.png';
+      return '/img/logo_octopus_final.svg';
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    isLiveTab(): boolean {
+      return state.generalParameters.isLiveTab;
+    },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    filterOrgaLive(): string {
+      return this.$store.state.filter.live;
+    },
+    imgUrl(): string {
+      if (
+        this.$store.state.filter.imgUrl &&
+        !this.$store.state.filter.imgUrl.includes('emptypodcast')
+      )
+        return this.$store.state.filter.imgUrl + '?dummy=' + this.dummyParam;
+      return '';
+    },
+  },
+  watch: {
+    filterOrga(): void {
+      if (this.filterOrga) {
+        this.organisationId = this.filterOrga;
+      } else {
+        this.reset = !this.reset;
+      }
+    },
+  },
+
+  mounted() {
+    if (this.filterOrga) {
+      this.organisationId = this.filterOrga;
+    }
+    this.init = true;
+    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
+      ) {
+        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;
+      }
+      if (!this.scrolled) {
+        this.$emit('update:displayMenu', false);
+      }
+    },
+    onDisplayMenu(param: boolean): void {
+      if (true === param) {
+        this.$emit('update:displayMenu', false);
+      } else {
+        this.$emit('update:displayMenu', !this.displayMenu);
+      }
+    },
+    async onOrganisationSelected(organisation: Organisation | undefined): Promise<void> {
+      const queries = this.$route.query;
+      if (organisation && organisation.id) {
+        if (this.$route.query.productor !== organisation.id) {
+          this.$router.push({ query: {...queries, ...{productor: organisation.id} } });
+        }
+        await this.selectOrganisation(organisation.id);
+      } else {
+        this.organisationId = undefined;
+        if (this.$route.query.productor) {
+          this.$router.push({ query: { ...queries, ...{productor: undefined} } });
+        }
+        this.$store.commit('filterOrga', { orgaId: undefined });
+      }
+    },
+  },
+})
+</script>
+
 <style lang="scss">
 .top-bar-container {
   top: 0;
@@ -246,142 +404,14 @@
       }
     }
   }
-}
-</style>
-
-<script lang="ts">
-import { state } from '../../store/paramStore';
-import OrganisationChooserLight from '../display/organisation/OrganisationChooserLight.vue';
-import HomeDropdown from './HomeDropdown.vue';
-const octopusApi = require('@saooti/octopus-api');
-
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'TopBar',
-
-  components: {
-    OrganisationChooserLight,
-    HomeDropdown,
-  },
-
-  mounted() {
-    if (this.filterOrga) {
-      this.organisationId = this.filterOrga;
-    }
-    this.init = true;
-    window.addEventListener('scroll', this.handleScroll);
-  },
-  beforeUnmount() {
-    window.removeEventListener('scroll', this.handleScroll);
-  },
-
-  props: ['displayMenu', 'isEducation'],
-  emits: ['update:displayMenu'],
-
-  data() {
-    return {
-      scrolled: false,
-      oldScrollY: 0,
-      minScroll: 0,
-      organisationId: undefined as any,
-      reset: false,
-      init: false,
-      dummyParam: new Date().getTime().toString(),
-    };
-  },
-
-  computed: {
-    logoUrl() {
-      if (this.isEducation) return '/img/logo_education.png';
-      return '/img/logo_octopus_final.svg';
-    },
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-    isLiveTab() {
-      return state.generalParameters.isLiveTab;
-    },
-    filterOrga():any {
-      return this.$store.state.filter.organisationId;
-    },
-    filterOrgaLive():any {
-      return this.$store.state.filter.live;
-    },
-    imgUrl():any {
-      if (
-        this.$store.state.filter.imgUrl &&
-        !this.$store.state.filter.imgUrl.includes('emptypodcast')
-      )
-        return this.$store.state.filter.imgUrl + '?dummy=' + this.dummyParam;
-      return undefined;
-    },
-  },
-
-  methods: {
-    handleScroll() {
-      if (
-        window.scrollY - this.oldScrollY > 0 &&
-        window.scrollY > 1 &&
-        document.body.offsetHeight - window.innerHeight > 40
-      ) {
-        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;
-      }
-      if (!this.scrolled) {
-        this.$emit('update:displayMenu', false);
-      }
-    },
-
-    onDisplayMenu(param: boolean) {
-      if (true === param) {
-        this.$emit('update:displayMenu', false);
-      } else {
-        this.$emit('update:displayMenu', !this.displayMenu);
-      }
-    },
-
-    async onOrganisationSelected(organisation: any) {
-      if (organisation && organisation.id) {
-        if (this.$route.query.productor !== organisation.id) {
-          this.$router.push({ query: { productor: organisation.id } });
-        }
-        this.$store.commit('filterOrga', {
-          orgaId: organisation.id,
-          imgUrl: organisation.imageUrl,
-        });
-        const isLive = await octopusApi.liveEnabledOrganisation(
-          organisation.id
-        );
-        this.$store.commit('filterOrgaLive', isLive);
-      } else {
-        this.organisationId = undefined;
-        if (this.$route.query.productor) {
-          this.$router.push({ query: { productor: undefined } });
+  @media (max-width: 290px) {
+    .top-bar {
+      .top-bar-logo {
+        img {
+          display: none;
         }
-        this.$store.commit('filterOrga', { orgaId: undefined });
-      }
-    },
-  },
-
-  watch: {
-    filterOrga(newVal) {
-      if (newVal) {
-        this.organisationId = newVal;
-      } else {
-        this.reset = !this.reset;
       }
-    },
-  },
-});
-</script>
+    }
+  }
+}
+</style>