@saooti/octopus-sdk 30.0.56 → 30.0.59

package/README.md

@@ -552,4 +552,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 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.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

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";
@@ -110,7 +111,8 @@ const components = {
     ClassicSearch,
     ClassicCheckbox,
     ClassicRadio,
-    ClassicLoading
+    ClassicLoading,
+    AdvancedSearch
 }
 
 export default components;
@@ -162,5 +164,6 @@ export {
     ClassicSearch,
     ClassicCheckbox,
     ClassicRadio,
-    ClassicLoading
+    ClassicLoading,
+    AdvancedSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.56",
+  "version": "30.0.59",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -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"
@@ -127,7 +128,10 @@ export default defineComponent({
     },
     transitionName(): string {
       return this.direction > 0 ? 'out-left' : 'out-right';
-    }
+    },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
   },
 
   watch: {

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

@@ -234,6 +234,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

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

@@ -143,7 +143,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../../sass/_variables.scss';
-
+.octopus-app{
 .filter-speech-bubble {
   position: absolute;
   background: $octopus-primary-dark;
@@ -208,4 +208,5 @@ export default defineComponent({
     margin-right: 0;
   }
 }
+}
 </style>

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>

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

@@ -238,9 +238,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .live-list-category {
   align-self: flex-start;
   text-transform: uppercase;
   font-weight: bold;
 }
+}
 </style>

package/src/components/display/organisation/OrganisationChooser.vue

@@ -14,7 +14,7 @@
       ref="multiselectRef"
       v-model="organisation"
       label="name"
-      track-by="organisationId"
+      track-by="id"
       :placeholder="$t('Type string to filter by organisation')"
       :options="organisations"
       :multiple="false"

package/src/components/display/organisation/OrganisationChooserLight.vue

@@ -83,9 +83,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .organisation-chooser-light select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
+}
 </style>

package/src/components/display/participant/ParticipantItem.vue

@@ -134,6 +134,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.octopus-app{
 .participant-item-container {
   list-style: none;
   border-radius: 2rem;
@@ -184,4 +185,5 @@ export default defineComponent({
     margin: 1rem 0 0;
   }
 }
+}
 </style>

package/src/components/display/participant/ParticipantList.vue

@@ -125,6 +125,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .participant-list {
   align-self: stretch;
   flex-grow: 1;
@@ -147,4 +148,5 @@ export default defineComponent({
     grid-gap: 0;
   }
 }
+}
 </style>

package/src/components/display/playlist/PodcastList.vue

@@ -173,10 +173,12 @@ export default defineComponent({
 
 
 <style lang="scss">
+.octopus-app{
 .width-600 {
   width: 600px;
   @media (max-width: 600px) {
     width: 100%;
   }
 }
+}
 </style>

package/src/components/display/podcasts/AnimatorsItem.vue

@@ -48,6 +48,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .podcast-item-animator {
   display: flex;
   align-items: flex-start;
@@ -58,4 +59,5 @@ export default defineComponent({
   text-transform: capitalize;
   margin: 00.25rem 0.5rem 0;
 }
+}
 </style>

package/src/components/display/podcasts/PodcastImage.vue

@@ -286,6 +286,7 @@ export default defineComponent({
 
 
 <style lang="scss">
+.octopus-app{
 .live-image-status {
   text-align: center;
   width: 100%;
@@ -363,5 +364,5 @@ export default defineComponent({
     z-index: 2;
   }
 }
-
+}
 </style>

package/src/components/display/podcasts/PodcastInlineList.vue

@@ -55,6 +55,7 @@
         alignLeft ? 'justify-content-start' : '',
         overflowScroll ? 'overflowScroll' : '',
       ]"
+      :css="isInlineAnimation"
     >
       <PodcastItem
         v-for="p in podcasts"
@@ -137,6 +138,9 @@ export default defineComponent({
     overflowScroll(): boolean {
       return (state.emissionPage.overflowScroll as boolean);
     },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },

package/src/components/display/podcasts/PodcastItem.vue

@@ -243,6 +243,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .podcast-item-container {
   border-radius: 0.8rem;
   list-style: none;
@@ -308,4 +309,5 @@ export default defineComponent({
     margin: 0.5rem !important;
   }
 }
+}
 </style>

package/src/components/display/podcasts/PodcastPlayBar.vue

@@ -84,6 +84,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .podcast-play-bar {
   .progress{
     height: 6px;
@@ -97,4 +98,5 @@ export default defineComponent({
     position: absolute;
   }
 }
+}
 </style>

package/src/components/display/podcasts/TagList.vue

@@ -51,6 +51,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .tag-list-component{
   .ouest-france-logo{
     width: 20px;
@@ -65,4 +66,5 @@ export default defineComponent({
     border-radius: 0.5rem;
   }
 }
+}
 </style>

package/src/components/display/rubriques/RubriqueList.vue

@@ -179,6 +179,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 #rubrique-list-container {
   display: flex;
   justify-content: flex-start;
@@ -210,4 +211,5 @@ export default defineComponent({
     background: #eee !important;
   }
 }
+}
 </style>

package/src/components/display/sharing/PlayerParameters.vue

@@ -157,9 +157,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
   .input-share-player {
     border: 1px solid #ddd;
     border-radius: 50px;
     width: 60px;
   }
+}
 </style>

package/src/components/display/sharing/QrCode.vue

@@ -50,6 +50,9 @@ export default defineComponent({
       return (state.generalParameters.authenticated as boolean);
     },
   },
+  created(){
+    this.initColor();
+  },
   methods:{
     download(): void{
       const link = document.createElement('a');
@@ -62,6 +65,10 @@ export default defineComponent({
       }
     },
     async initColor(): Promise<void> {
+      if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
+        this.color = state.generalParameters.podcastmakerColor;
+        return;
+      }
       if (!this.authenticated) return;
       let data;
       if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){

package/src/components/display/sharing/ShareDistribution.vue

@@ -156,6 +156,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .sharing-distribution-container {
   border: 0.05rem solid #dee2e6;
   border-radius: 0.3rem;
@@ -193,4 +194,5 @@ export default defineComponent({
     margin: 0.2rem 0.5rem;
   }
 }
+}
 </style>

package/src/components/display/sharing/SharePlayer.vue

@@ -364,6 +364,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../../sass/_variables.scss';
+.octopus-app{
 .sticker {
   align-self: center;
   background: $octopus-primary-dark;
@@ -385,4 +386,5 @@ export default defineComponent({
 .max-iframe {
   max-width: 300px;
 }
+}
 </style>

package/src/components/form/ClassicSearch.vue

@@ -61,6 +61,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
+.octopus-app{
 .champs-searchPage{
   input {
     border: 2px solid #dee2e6;
@@ -81,4 +82,5 @@ export default defineComponent({
     margin: 1rem;
   }
 } 
+}
 </style>

package/src/components/misc/ErrorMessage.vue

@@ -28,10 +28,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .bg-error-message {
   background-color: #ffd84a9c;
 }
 .alert-text{
   color: darkred;
 }
+}
 </style>

package/src/components/misc/Footer.vue

@@ -201,6 +201,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 #footer{
   font-size: 0.7rem;
   .acpm_image {
@@ -221,4 +222,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/LeftMenu.vue

@@ -195,6 +195,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .left-menu-container {
   position: fixed;
   top: 3rem;
@@ -225,4 +226,5 @@ export default defineComponent({
     width: 94%;
   }
 }
+}
 </style>

package/src/components/misc/Player.vue

@@ -51,6 +51,15 @@
           :player-error="playerError"
           :listen-time="listenTime"
         />
+        <div
+          class="play-button-box primary-bg text-light"
+          @click="stopPlayer"
+        >
+          <div
+            class="saooti-cross"
+            :title="$t('Close')"
+          />
+        </div>
         <PlayerClockAndTimeline
           v-model:showTimeline="showTimeline"
           :comments="comments"
@@ -204,6 +213,9 @@ export default defineComponent({
   },
   
   methods: {
+    stopPlayer(): void {
+      this.$store.commit('playerPlayPodcast');
+    },
     getListenerId(): string{
       let listenerId = this.getCookie("octopus_listenerId");
       if(!listenerId){
@@ -473,6 +485,7 @@ reject('There is an error while reading media content');
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-container {
   position: fixed;
   overflow: hidden;
@@ -497,4 +510,5 @@ reject('There is an error while reading media content');
     }
   }
 }
+}
 </style>

package/src/components/misc/PlayerButtons.vue

@@ -23,16 +23,6 @@
       }"
     />
   </div>
-  <div
-    v-if="isPlaying || isPaused"
-    class="play-button-box primary-bg text-light"
-    @click="stopPlayer"
-  >
-    <div
-      class="saooti-stop-bounty"
-      :title="$t('Stop')"
-    />
-  </div>
 </template>
 
 <script lang="ts">
@@ -114,9 +104,6 @@ export default defineComponent({
         this.onPause();
       }
     },
-    stopPlayer(): void {
-      this.$store.commit('playerPlayPodcast');
-    },
     onPlay(): void {
       this.$store.commit('playerPause', false);
     },
@@ -128,6 +115,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-image {
   border-radius: 0.2rem;
   height: 2.4rem;
@@ -151,5 +139,5 @@ export default defineComponent({
   flex-shrink: 0;
   cursor: pointer;
 }
-
+}
 </style>

package/src/components/misc/PlayerClockAndTimeline.vue

@@ -61,6 +61,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 @import '../../sass/_variables.scss';
+.octopus-app{
 .player-container {
   .timeline-button {
     background: black;
@@ -82,4 +83,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/PlayerProgressBar.vue

@@ -146,6 +146,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-grow-content {
   display: flex;
   flex-direction: column;
@@ -165,4 +166,5 @@ export default defineComponent({
     position: absolute;
   }
 }
+}
 </style>

package/src/components/misc/Popover.vue

@@ -106,6 +106,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.octopus-app{
 .popover{
   max-height: 80vh;
   overflow: auto;
@@ -113,4 +114,5 @@ export default defineComponent({
     width: 100px;
   }
 }
+}
 </style>

package/src/components/misc/Snackbar.vue

@@ -160,7 +160,9 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.octopus-app{
 .snack-bar-wrap{
   bottom: 0px;
 }
+}
 </style>

package/src/components/misc/TopBar.vue

@@ -257,6 +257,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .top-bar-container {
   position: sticky;
   top: 0;
@@ -336,4 +337,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/modal/NewsletterModal.vue

@@ -242,9 +242,7 @@ export default defineComponent({
           `" title="` +
           this.$t('Listen this episode') +
           `">
-          <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="` +
-          this.resourcesUrl +
-          `/img/play-podcast.png">
+          <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAAAxElEQVRIie3WMWpCURBG4Q8FSRrtbC2SPhvICmzchVuwtXQLbsE2pVUIkjqQHVgqNmIj6EvxGHhFQAIvcxt/OPVhhrlzh3sKZ4MvTLLFVYNPvJYQB294LiGucMYSw2xxcMQcj9niYIsputni4BvjEuJgjZcS4goXrDDKFgcnLDDIFgd7zNDLFgfvTUHnL23ISJuV7iS3Ooarn1VxkeeUvkDSV2b6J3FQT+pDW8Jb4vRD4Kqe1Kf/Ev4mTj32PhQ6b+9pPT+XHgysHrPM6QAAAABJRU5ErkJggg=="/>
         </a>
         <a style="color: #000;text-decoration: none; margin-right:8px" href="` +
           window.location.href +
@@ -283,6 +281,9 @@ export default defineComponent({
       });
     },
   },
+  created(){
+    this.initColor();
+  },
   methods: {
     closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();
@@ -302,12 +303,18 @@ export default defineComponent({
     },
     afterCopy(): void{
       (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Data in clipboard'));
+    },
+    initColor(): void {
+      if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
+        this.color = state.generalParameters.podcastmakerColor;
+      }
     }
   },
 })
 </script>
 
 <style lang="scss">
+.octopus-app{
 #newsletter-modal {
   textarea {
     border: 2px solid #eee;
@@ -323,4 +330,5 @@ export default defineComponent({
     max-width: 60%;
   }
 }
+}
 </style>

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -139,6 +139,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .share-modal-border {
   border-right: solid 1px rgb(222, 226, 230);
   border-left: solid 1px rgb(222, 226, 230);
@@ -178,4 +179,5 @@ export default defineComponent({
     align-self: center;
   }
 }
+}
 </style>

package/src/components/pages/Participant.vue

@@ -194,10 +194,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 @media (min-width: 950px) {
   .participant-desc {
     max-width: 50%;
     line-height: 1.5em;
   }
 }
+}
 </style>

package/src/store/paramStore.ts

@@ -18,7 +18,8 @@ const state:paramStore = {
     allCategories: [],
     isLiveTab: false,
     isCaptchaTest: true,
-    podcastItem:13
+    podcastItem:13,
+    isInlineAnimation:true,
   },
   podcastPage: {
     EditBox: false,
@@ -108,7 +109,9 @@ export interface GeneralParameters{
   allCategories?: Array<Category>,
   isLiveTab?: boolean,
   isCaptchaTest?: boolean,
-  podcastItem?: number
+  podcastItem?: number,
+  podcastmakerColor?: string,
+  isInlineAnimation?: boolean
 }
 export interface PodcastPage{
   EditBox?: boolean,