@saooti/octopus-sdk 31.0.1 → 31.0.4

package/README.md

@@ -551,6 +551,24 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.52 Ajout rubriqueIdFilter
  * 30.0.53 Commentaires live
  * 30.0.54 Multiselect not reload on close
- 
+ * 30.0.55 Align participant img
+ * 30.0.56 Popover title
+ * 30.0.57 podcastmaker Le soir améliorations
+ * 30.0.58 Prefix css dans component par octopus-app
+ * 30.0.59 Pb productorChooser
+ * 30.0.60 PlaylistPodcastInlineList
+ * 30.0.61 Page podcast -> init recherche
+ * 30.0.62 Italian translation
+ * 30.0.63 Italian translation
+ * 30.0.64 Modif Le soir
+ * 30.0.65 OAuthType
+ * 30.0.66 ScrollBehavior
+
  * 31.0.0 Passage en 31
  * 31.0.1 Ajout pocket casts
+ * 31.0.2 Gestion des 403
+ * 31.0.3 Merge 30
+ * 31.0.4 Selection des customPlayers
+
+
+ 

package/index.ts

@@ -32,6 +32,7 @@ import EmissionChooser from "./src/components/display/emission/EmissionChooser.v
 import EmissionList from "./src/components/display/emission/EmissionList.vue";
 /*import MonetizableFilter from "./src/components/display/filter/MonetizableFilter.vue";
 import ProductorSearch from "./src/components/display/filter/ProductorSearch.vue";*/
+import AdvancedSearch from "./src/components/display/filter/AdvancedSearch.vue";
 import OrganisationChooser from "./src/components/display/organisation/OrganisationChooser.vue";
 /*import ParticipantItem from "./src/components/display/participant/ParticipantItem.vue";
 import ParticipantList from "./src/components/display/participant/ParticipantList.vue";
@@ -48,6 +49,7 @@ import EmissionInlineList from "./src/components/display/emission/EmissionInline
 import RubriqueChooser from "./src/components/display/rubriques/RubriqueChooser.vue";
 import CommentList from "./src/components/display/comments/CommentList.vue";
 import CommentInput from "./src/components/display/comments/CommentInput.vue";
+import PodcastPlaylistInlineList from "./src/components/display/playlist/PodcastPlaylistInlineList.vue";
 
 //form
 import ClassicSearch from "./src/components/form/ClassicSearch.vue";
@@ -110,7 +112,9 @@ const components = {
     ClassicSearch,
     ClassicCheckbox,
     ClassicRadio,
-    ClassicLoading
+    ClassicLoading,
+    AdvancedSearch,
+    PodcastPlaylistInlineList
 }
 
 export default components;
@@ -162,5 +166,7 @@ export {
     ClassicSearch,
     ClassicCheckbox,
     ClassicRadio,
-    ClassicLoading
+    ClassicLoading,
+    AdvancedSearch,
+    PodcastPlaylistInlineList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.1",
+  "version": "31.0.4",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -15,7 +15,7 @@
   "main": "./dist/octopus.common.js",
   "dependencies": {
     "@popperjs/core": "^2.11.0",
-    "@saooti/octopus-api": "^0.30.4",
+    "@saooti/octopus-api": "^0.31.0",
     "@vue/cli": "^5.0.0-rc.1",
     "@vue/compat": "^3.2.26",
     "axios": "^0.24.0",
@@ -80,7 +80,7 @@
       "no-debugger": "off",
       "@typescript-eslint/ban-ts-ignore": "off",
       "@typescript-eslint/ban-ts-comment": "off",
-      "no-async-promise-executor":"off"
+      "no-async-promise-executor": "off"
     },
     "parserOptions": {
       "parser": "@typescript-eslint/parser"

package/src/assets/general.scss

@@ -212,6 +212,7 @@ body{
     border-radius: 50%;
     background-size: cover;
     box-shadow: 0px 8px 26px 6px rgba(64, 163, 114, 0.3);
+    margin: auto;
   }
 
   .comma {
@@ -237,6 +238,13 @@ body{
   .c-hand-auto {
     cursor: auto;
   }
+  .two-line-clamp{
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
 
   .html-wysiwyg-content{
     h3,h4{

package/src/assets/share.scss

@@ -1,5 +1,19 @@
 @import '../sass/_variables.scss';
 .octopus-app{
+  .page-box-absolute{
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: max-content;
+		min-height: 100%;
+		z-index: 11;
+		display: flex;
+		flex-direction: column;
+		&.page-box-player{
+			padding-bottom: 120px;
+		}
+	}
   .saooti-help {
 		font-size: 1.5rem;
 		border-radius: 50%;
@@ -213,4 +227,11 @@
       left: 0.7rem;
     }
   }
+
+  .logo-octopus{
+    width: 350px;
+    @media (max-width: 960px) {
+      width: 200px;
+    }
+  }
 }

package/src/components/display/categories/CategoryFilter.vue

@@ -122,7 +122,7 @@ export default defineComponent({
         this.$store.commit('filterRubrique', filter);
         const queries = this.$route.query;
         const queryString = filter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
-        this.$router.push({ query: { ...queries, ...{ rubriquesId: queryString }} });
+        this.$router.replace({ query: { ...queries, ...{ rubriquesId: queryString }} });
       }
     },
     getRubriques(rubriquageId: number): Array<Rubrique>{
@@ -138,7 +138,7 @@ export default defineComponent({
       const queries = this.$route.query;
       if(this.categoryFilter){
         if (queries.iabId) {
-          this.$router.push({ query: {...queries, ...{iabId: undefined} } });
+          this.$router.replace({ query: {...queries, ...{iabId: undefined} } });
         }
         this.$store.commit('filterIab', undefined);
       }else{
@@ -147,9 +147,9 @@ export default defineComponent({
         if (queries.rubriquesId) {
           const queryString = newFilter.map(value => value.rubriquageId+':'+value.rubriqueId).join();
           if("" !== queryString){
-            this.$router.push({ query: { ...queries, ...{ rubriquesId: queryString }} });
+            this.$router.replace({ query: { ...queries, ...{ rubriquesId: queryString }} });
           }else{
-            this.$router.push({ query: { ...queries, ...{ rubriquesId: undefined }} });
+            this.$router.replace({ query: { ...queries, ...{ rubriquesId: undefined }} });
           }
         }
         this.$store.commit('filterRubrique', newFilter);
@@ -162,13 +162,15 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.categary-filter-no-filter{
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background: white;
-  z-index: -1;
+.octopus-app{
+  .categary-filter-no-filter{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: white;
+    z-index: -1;
+  }
 }
 </style>

package/src/components/display/categories/CategoryList.vue

@@ -22,7 +22,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"
@@ -139,7 +139,7 @@ export default defineComponent({
       }
       const queries = this.$route.query;
       if(!queries.iabId || ('string'===typeof queries.iabId &&  parseInt(queries.iabId ,10) !== category.id)) {
-        this.$router.push({ query: { ...queries, ...{ iabId: category.id.toString() }} });
+        this.$router.replace({ query: { ...queries, ...{ iabId: category.id.toString() }} });
       }
       this.$store.commit('filterIab',category);
     },
@@ -178,29 +178,31 @@ export default defineComponent({
 </script>
 <style lang="scss">
 @import '../../../sass/_variables.scss';
-.category-list-container {
-  display: inline-flex;
-  justify-content: flex-start;
-  overflow: hidden;
-  flex-grow: 1;
-  width: 0;
-  padding: 0 4rem;
-}
-.category-item {
-  font-size: 0.6rem;
-  margin: 0.2rem;
-  padding: 0.5rem;
-  display: block;
-  height: 1.5rem;
-  border-radius: 1.5rem;
-  border: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  .router-link-active,&:hover {
-    background: $octopus-secondary-color !important;
+.octopus-app{
+  .category-list-container {
+    display: inline-flex;
+    justify-content: flex-start;
+    overflow: hidden;
+    flex-grow: 1;
+    width: 0;
+    padding: 0 4rem;
+  }
+  .category-item {
+    font-size: 0.6rem;
+    margin: 0.2rem;
+    padding: 0.5rem;
+    display: block;
+    height: 1.5rem;
+    border-radius: 1.5rem;
+    border: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    flex-shrink: 0;
+    .router-link-active,&:hover {
+      background: $octopus-secondary-color !important;
+    }
   }
 }
 </style>

package/src/components/display/comments/CommentInput.vue

@@ -320,25 +320,27 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../../sass/_variables.scss';
-.comment-input-container {
-  textarea::placeholder {
-    color: $octopus-primary-dark;
-  }
-  textarea:focus::placeholder {
-    color: black;
-  }
-  textarea {
-    outline-width: 0 !important;
-    border-top: 0;
-    border-right: 0;
-    border-left: 0;
-    border-bottom: 0.1rem solid #ddd !important;
-    overflow: hidden !important;
-    box-shadow: unset !important;
-    background: transparent !important;
-    height: 50px;
-    &.short{
-      max-height: 38px;
+.octopus-app{
+  .comment-input-container {
+    textarea::placeholder {
+      color: $octopus-primary-dark;
+    }
+    textarea:focus::placeholder {
+      color: black;
+    }
+    textarea {
+      outline-width: 0 !important;
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+      border-bottom: 0.1rem solid #ddd !important;
+      overflow: hidden !important;
+      box-shadow: unset !important;
+      background: transparent !important;
+      height: 50px;
+      &.short{
+        max-height: 38px;
+      }
     }
   }
 }

package/src/components/display/comments/CommentList.vue

@@ -248,6 +248,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../../sass/_variables.scss';
+.octopus-app{
 .my-transition-list-comments {
   position: relative;
   .comment-list-enter-active,
@@ -284,4 +285,5 @@ export default defineComponent({
     background-color: $primaryColorReallyTransparent;
   }
 }
+}
 </style>

package/src/components/display/comments/CommentPlayer.vue

@@ -75,6 +75,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .comment-player-container {
   position: relative;
   width: 100%;
@@ -96,4 +97,5 @@ export default defineComponent({
     position: absolute;
   }
 }
+}
 </style>

package/src/components/display/emission/EmissionInlineList.vue

@@ -43,6 +43,7 @@
         alignLeft ? 'justify-content-start' : '',
         overflowScroll ? 'overflowScroll' : '',
       ]"
+      :css="isInlineAnimation"
     >
       <EmissionPlayerItem
         v-for="e in emissions"
@@ -70,18 +71,22 @@ import octopusApi from '@saooti/octopus-api';
 import domHelper from '../../../helper/dom';
 import EmissionPlayerItem from './EmissionPlayerItem.vue';
 import { state } from '../../../store/paramStore';
-
+import { handle403 } from '../../mixins/handle403';
 const PHONE_WIDTH = 960;
 
 import { Emission } from '@/store/class/general/emission';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'EmissionInlineList',
 
   components: {
     EmissionPlayerItem,
   },
+
+  mixins: [handle403],
+
   props: {
     organisationId: { default: undefined, type: String},
     href: { default: undefined, type: String},
@@ -127,7 +132,10 @@ export default defineComponent({
     },
     transitionName(): string {
       return this.direction > 0 ? 'out-left' : 'out-right';
-    }
+    },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
   },
 
   watch: {
@@ -153,35 +161,30 @@ export default defineComponent({
   },
   methods: {
     async fetchNext(): Promise<void> {
-      const data = await octopusApi.fetchEmissions({
-        first: this.first,
-        size: this.size + 1,
-        organisationId: this.organisationId,
-        rubriqueId: this.rubriqueId ?  [this.rubriqueId] : [],
-        rubriquageId: this.rubriquageId ? [this.rubriquageId] : [],
-        sort: 'LAST_PODCAST_DESC',
-      });
-      this.loading = false;
-      this.loaded = true;
-      this.totalCount = data.count;
-      /* if(this.first === 0 && this.displayRubriquage && state.emissionsPage.mainRubrique){
-        data.result.sort((a, b)=>{
-          if (a.rubriqueIds[0] === state.emissionsPage.mainRubrique)
-            return 1;
-          if (b.rubriqueIds[0] === state.emissionsPage.mainRubrique)
-            return -1;
-          return 0;
+      try {
+        const data = await octopusApi.fetchEmissions({
+          first: this.first,
+          size: this.size + 1,
+          organisationId: this.organisationId,
+          rubriqueId: this.rubriqueId ?  [this.rubriqueId] : [],
+          rubriquageId: this.rubriquageId ? [this.rubriquageId] : [],
+          sort: 'LAST_PODCAST_DESC',
         });
-      } */
-      if (this.allEmissions.length + data.result.length < this.totalCount) {
-        const nexEl = data.result.pop() as Emission;
-        this.preloadImage(nexEl.imageUrl ? nexEl.imageUrl : "");
-      }
-      this.allEmissions = this.allEmissions.concat(data.result);
-      if (this.allEmissions.length <= 3) {
-        this.alignLeft = true;
+        this.loading = false;
+        this.loaded = true;
+        this.totalCount = data.count;
+        if (this.allEmissions.length + data.result.length < this.totalCount) {
+          const nexEl = data.result.pop() as Emission;
+          this.preloadImage(nexEl.imageUrl ? nexEl.imageUrl : "");
+        }
+        this.allEmissions = this.allEmissions.concat(data.result);
+        if (this.allEmissions.length <= 3) {
+          this.alignLeft = true;
+        }
+        this.first += this.size;
+      } catch (error) {
+        this.handle403((error as AxiosError));
       }
-      this.first += this.size;
     },
     displayPrevious(): void {
       this.direction = -1;

package/src/components/display/emission/EmissionList.vue

@@ -51,7 +51,7 @@
         </template>
         <div
           :class="buttonPlus?'ms-1':''"
-          class="saooti-plus"
+          class="saooti-more"
         />
       </button>
     </template>
@@ -60,12 +60,14 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
+import { handle403 } from '../../mixins/handle403';
 import { state } from '../../../store/paramStore';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Emission } from '@/store/class/general/emission';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { FetchParam } from '@/store/class/general/fetchParam';
+import { AxiosError } from 'axios';
 const EmissionItem = defineAsyncComponent(() => import('./EmissionItem.vue'));
 const EmissionPlayerItem = defineAsyncComponent(() => import('./EmissionPlayerItem.vue'));
 export default defineComponent({
@@ -77,6 +79,8 @@ export default defineComponent({
     ClassicLoading
   },
 
+  mixins: [handle403],
+
   props: {
     first: { default: 0, type: Number },
     size: { default: 12, type: Number },
@@ -156,8 +160,6 @@ export default defineComponent({
     },
   },
 
-  
-
   mounted() {
     this.fetchContent(true);
     if (this.displayRubriquage) {
@@ -185,8 +187,12 @@ export default defineComponent({
         rubriquageId: this.rubriquageId.length ? this.rubriquageId : undefined,
         includeHidden:this.includeHidden,
       };
-      const data = await octopusApi.fetchEmissions(param);
-      this.afterFetching(reset, data);
+      try {
+        const data = await octopusApi.fetchEmissions(param);
+        this.afterFetching(reset, data);
+      } catch (error) {
+        this.handle403((error as AxiosError));
+      }
     },
     afterFetching(reset: boolean, data: {count: number, result: Array<Emission>, sort: string}): void {
       if (reset) {
@@ -234,6 +240,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/emission/EmissionPlayerItem.vue

@@ -50,11 +50,23 @@
     <div
       v-for="p in podcasts"
       :key="p.podcastId"
-      class="border-top emission-item-border-color p-2 secondary-bg d-flex"
+      class="border-top emission-item-border-color p-2 secondary-bg d-flex flex-column"
     >
+      <router-link
+        v-if="isProgressBar"
+        :to="{
+          name: 'podcast',
+          params: { podcastId: p.podcastId },
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="text-dark fw-bold two-line-clamp"
+      >
+        {{ p.title }}
+      </router-link>
       <div class="d-flex justify-content-between flex-grow-1">
         <div class="d-flex flex-column">
           <router-link
+            v-if="!isProgressBar"
             :to="{
               name: 'podcast',
               params: { podcastId: p.podcastId },
@@ -153,6 +165,9 @@ export default defineComponent({
   },
   
   computed: {
+    isProgressBar(): boolean{
+      return (state.emissionsPage.progressBar as boolean);
+    },
     buttonMore(): boolean {
       return (state.emissionsPage.buttonMore as boolean);
     },

package/src/components/display/filter/AdvancedSearch.vue

@@ -330,6 +330,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .advanced-search-container {
   background: #fff;
   border-radius: 0.8rem;
@@ -360,4 +361,5 @@ export default defineComponent({
     padding-right: 40px;
   }
 }
+}
 </style>

package/src/components/display/filter/CategoryFilter.vue

@@ -105,7 +105,7 @@ export default defineComponent({
       }
       const queries = this.$route.query;
       if (queries.iabId) {
-        this.$router.push({ query: {...queries, ...{iabId: undefined} } });
+        this.$router.replace({ query: {...queries, ...{iabId: undefined} } });
       }
       this.$store.commit('filterIab', undefined);
     }

package/src/components/display/filter/ProductorSearch.vue

@@ -86,6 +86,7 @@ export default defineComponent({
   },
   watch: {
     queryIntern(): void {
+      if(this.queryIntern !== this.searchPattern)
       this.$emit('updateSearchPattern', this.queryIntern);
     },
     filterOrga(): void {
@@ -98,6 +99,9 @@ export default defineComponent({
     },
   },
   async created() {
+    if(this.searchPattern){
+      this.queryIntern=this.searchPattern;
+    }
     if (!this.organisationId) return;
     if(this.$store.state.filter.organisationId === this.organisationId){
       this.keepOrganisation = true;
@@ -114,11 +118,17 @@ export default defineComponent({
       });
       this.keepOrganisation = false;
       if (organisation && organisation.id) {
-        this.showBubble = true;
-        setTimeout(() => {
-          this.showBubble = false;
-        }, 6000);
         this.$emit('updateOrganisationId', organisation.id);
+        if(organisation.private){
+          this.$nextTick(() => {
+            this.onKeepOrganisation();
+          });
+        } else{
+          this.showBubble = true;
+          setTimeout(() => {
+            this.showBubble = false;
+          }, 6000);
+        }
       } else {
         this.$emit('updateOrganisationId', undefined);
       }
@@ -143,7 +153,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../../sass/_variables.scss';
-
+.octopus-app{
 .filter-speech-bubble {
   position: absolute;
   background: $octopus-primary-dark;
@@ -208,4 +218,5 @@ export default defineComponent({
     margin-right: 0;
   }
 }
+}
 </style>

package/src/components/display/filter/RubriqueFilter.vue

@@ -229,7 +229,7 @@ export default defineComponent({
       }
       const queries = this.$route.query;
       if (queries.rubriquesId) {
-        this.$router.push({ query: {...queries, ...{rubriquesId: undefined} } });
+        this.$router.replace({ query: {...queries, ...{rubriquesId: undefined} } });
       }
       this.$store.commit('filterRubrique', []);
     }

package/src/components/display/live/LiveHorizontalList.vue

@@ -26,7 +26,7 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>

package/src/components/display/live/LiveItem.vue

@@ -273,6 +273,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .live-date-box {
   width: 200px;
   display: flex;
@@ -304,5 +305,5 @@ export default defineComponent({
   width: 0;
   flex-grow: 1;
 }
-
+}
 </style>