@saooti/octopus-sdk 31.0.0 → 31.0.3

package/README.md

@@ -543,5 +543,28 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.44 ProgressBar pour le soir
  * 30.0.45 ProgressBar pour le soir
  * 30.0.46 Param pour le soir
+ * 30.0.47 Live error
+ * 30.0.48 Podcastmaker ScrollOverflow PodcastInlineList
+ * 30.0.49 Podcastmaker ProgressBar
+ * 30.0.50 Commentaires live
+ * 30.0.51 Commentaires live
+ * 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
 
  * 31.0.0 Passage en 31
+ * 31.0.1 Ajout pocket casts
+ * 31.0.2 Gestion des 403
+ * 31.0.3 Merge 30
+

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.0",
+  "version": "31.0.3",
   "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.3",
+    "@saooti/octopus-api": "^0.31.0",
     "@vue/cli": "^5.0.0-rc.1",
     "@vue/compat": "^3.2.26",
     "axios": "^0.24.0",
@@ -79,7 +79,8 @@
       "no-console": "off",
       "no-debugger": "off",
       "@typescript-eslint/ban-ts-ignore": "off",
-      "@typescript-eslint/ban-ts-comment": "off"
+      "@typescript-eslint/ban-ts-comment": "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%;
@@ -66,6 +80,25 @@
       }
     }
   }
+  .element-list-inline.overflowScroll {
+    display: flex;
+    flex-wrap: wrap;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    padding-bottom: 1rem;
+    width: 100%;
+    height: 80vh;
+    overflow-y: auto;
+    grid-gap: inherit;
+    @media (max-width: 960px) {
+      overflow-x: hidden;
+      flex-direction: column;
+      flex-wrap: nowrap;
+    }
+    .item-phone-margin {
+      margin: 1rem 0.5rem !important;
+    }
+  }
 
   .emission-list {
     align-self: stretch;
@@ -194,4 +227,11 @@
       left: 0.7rem;
     }
   }
+
+  .logo-octopus{
+    width: 350px;
+    @media (max-width: 960px) {
+      width: 200px;
+    }
+  }
 }

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

@@ -28,9 +28,8 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      @open="clearAll"
+      @open="onOpen"
       @search-change="onSearchCategory"
-      @close="onClose"
       @select="onCategorySelected"
     >
       <template #singleLabel="{ option }">
@@ -169,14 +168,11 @@ export default defineComponent({
     }
   },
   methods: {
-    clearAll(): void {
+    onOpen(): void {
       (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
-      if (undefined === this.categoryArray) {
-        this.category = undefined;
-      }
       if (
         undefined !== this.categorySelected ||
         undefined !== this.categoryArray ||
@@ -199,14 +195,6 @@ export default defineComponent({
         this.categories = this.totalCategories;
       }
     },
-    onClose(): void {
-      if (!this.category && undefined === this.categoryArray) {
-        this.category = getDefaultCategory(this.defaultanswer);
-        if(this.category){
-          this.onCategorySelected(this.category);
-        }
-      }
-    },
     onSearchCategory(query: string): void {
       this.isLoading = true;
       const categoryDefault = getDefaultCategory(this.defaultanswer);

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

@@ -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')"
@@ -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/AddCommentModal.vue

@@ -66,7 +66,6 @@
 </template>
 
 <script lang="ts">
-import { IReCaptchaComposition, useReCaptcha } from 'vue-recaptcha-v3';
 import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
 import api from '@/api/initialize';
@@ -130,11 +129,9 @@ export default defineComponent({
         this.sendComment();
         return;
       }
-      const iRecaptcha: IReCaptchaComposition|undefined = useReCaptcha();
-      if(!iRecaptcha){return;}
-      await iRecaptcha.recaptchaLoaded();
-      const token = await iRecaptcha.executeRecaptcha('login');
       try {
+        await this.$recaptchaLoaded()
+        const token = await this.$recaptcha('login');
         this.sendError = false;
         const ok = await api.checkToken(token);
         if (!ok) {

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

@@ -14,7 +14,7 @@
         comment.name
       }}</b>
       <Popover
-        v-if="!editRight && !isValid"
+        :disable="editRight || isValid"
         :target="'popover-comment' + comment.comId"
       >
         {{ $t('Comment waiting') }}

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/EmissionChooser.vue

@@ -29,7 +29,6 @@
       :show-labels="false"
       @search-change="onSearchEmission"
       @open="onOpen"
-      @close="onClose"
       @select="onEmissionSelected"
     >
       <template #clear="{ props }">
@@ -152,16 +151,8 @@ export default defineComponent({
         'autocomplete',
         'off'
       );
-      this.clearAll();
       this.onSearchEmission();
     },
-    onClose(): void {
-      if (this.emission) return;
-      this.emission = this.defaultanswer
-        ? getDefaultEmission(this.defaultanswer)
-        : undefined;
-      this.$emit('selected', this.emission);
-    },
     onEmissionSelected(emission: Emission): void {
       this.$emit('selected', emission);
     },

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"
@@ -55,7 +56,6 @@
       />
     </transition-group>
     <router-link
-      v-if="!overflowScroll"
       :to="href"
       class="btn btn-link align-self-center width-fit-content m-4"
     >
@@ -71,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},
@@ -128,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: {
@@ -154,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.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.allEmissions = this.allEmissions.concat(data.result);
-      if (this.allEmissions.length <= 3) {
-        this.alignLeft = true;
-      }
-      this.first += this.size;
     },
     displayPrevious(): void {
       this.direction = -1;
@@ -203,14 +205,14 @@ export default defineComponent({
     },
     handleResize(): void {
       if (!this.$el) return;
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
       if (this.overflowScroll) {
         this.size = 20;
         return;
       }
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
       this.size = Math.floor(width / sixteen);
@@ -270,24 +272,5 @@ export default defineComponent({
           margin-bottom: 1rem;
       }
   }
-  .element-list-inline.overflowScroll {
-    display: flex;
-    flex-wrap: wrap;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    padding-bottom: 1rem;
-    width: 100%;
-    height: 80vh;
-    overflow-y: auto;
-    grid-gap: inherit;
-    @media (max-width: 960px) {
-      overflow-x: hidden;
-      flex-direction: column;
-      flex-wrap: nowrap;
-    }
-    .item-phone-margin {
-      margin: 1rem 0.5rem !important;
-    }
-  }
 }
 </style>

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>