@saooti/octopus-sdk 33.0.5 → 33.0.7

package/README.md

@@ -688,7 +688,11 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 32.0.35 Enlever Dummy param
  * 32.0.36 Select -> font family
  * 32.0.40 Problème majeur !!! 
+ * 32.0.42 Parlement européen
 
  * 33.0.3 SpeechToText player octopus
  * 33.0.4 Image webp
  * 33.0.5 Change recaptcha
+ * 33.0.6 Crédits
+ * 33.0.7 Test refactor podcastmaker with scss variables
+

package/package.json

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

package/src/assets/bootstrap-diff.scss

@@ -59,8 +59,8 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background: $octopus-primary-dark;
-            border: 1px solid $octopus-primary-dark;
+            background: $octopus-primary-color;
+            border: 1px solid $octopus-primary-color;
             border-radius: 4px !important;
             color: white !important;
             font-weight: bold;
@@ -69,7 +69,7 @@
             &:active,
             &.active {
                 background: transparent;
-                color: $octopus-primary-dark !important;
+                color: $octopus-primary-color !important;
             }
             &:disabled{
                 background-color: #cccccc;
@@ -83,7 +83,7 @@
         }
 
         &.btn-more{
-            background: $octopus-primary-dark;
+            background: $octopus-primary-color;
             color: $octopus-background;
             width: 2rem;
             height: 2rem;
@@ -102,7 +102,7 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            color : $octopus-primary-dark;
+            color : $octopus-primary-color;
             flex-shrink: 0;
             font-weight: normal;
             border-radius: 50% !important;
@@ -117,7 +117,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        color : $octopus-primary-dark;
+        color : $octopus-primary-color;
         flex-shrink: 0;
         border-radius: 50% !important;
     }

package/src/assets/form.scss

@@ -66,8 +66,8 @@
 				border-bottom: 0.1rem solid transparent;
 			}
 			.active{
-				border-bottom-color: $octopus-primary-dark;
-				color: $octopus-primary-dark;
+				border-bottom-color: $octopus-primary-color;
+				color: $octopus-primary-color;
 			}
 		}
 	}

package/src/assets/general.scss

@@ -80,7 +80,7 @@ body{
     color: $octopus-primary-color;
   }
   .primary-darker{
-    color: $octopus-primary-dark;
+    color: $octopus-primary-color;
   }
   .primary-bg{
     background: $octopus-primary-color;
@@ -146,7 +146,7 @@ body{
     color: black !important;
   }
   a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
-    color: $octopus-primary-dark !important;
+    color: $octopus-primary-color !important;
   }
   .descriptionText{
     white-space: pre-wrap; 

package/src/assets/modal.scss

@@ -22,7 +22,7 @@
 	.modal-header { 
 		border: 0;
 		border-radius: 0.8rem 0.8rem 0 0;
-		background: $octopus-primary-dark;
+		background: $octopus-primary-color;
 		color: white;
     }
 	.modal-body{

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

@@ -5,9 +5,8 @@
   >
     <label
       :for="id"
-      class="d-inline"
-      title="select category"
-    />
+      class="hid"
+    >{{$t('Type string to filter by categories')}}</label>
     <VueMultiselect
       :id="id"
       ref="multiselectRef"

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

@@ -45,7 +45,8 @@
           >
             {{ $t('Close') }}
           </button>
-          <vue-recaptcha
+          <vue-recaptcha 
+            v-if="!isVerify"
             ref="invisibleRecaptcha"
             :load-recaptcha-script="true"
             @verify="handleSuccess"

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

@@ -294,7 +294,7 @@ export default defineComponent({
 .octopus-app{
   .comment-input-container {
     textarea::placeholder {
-      color: $octopus-primary-dark;
+      color: $octopus-primary-color;
     }
     textarea:focus::placeholder {
       color: black;

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

@@ -146,7 +146,7 @@ export default defineComponent({
 .octopus-app{
   .filter-speech-bubble {
     position: absolute;
-    background: $octopus-primary-dark;
+    background: $octopus-primary-color;
     border-radius: 0.4em;
     width: 10rem;
     right: 4rem;
@@ -165,7 +165,7 @@ export default defineComponent({
     width: 0;
     height: 0;
     border: 18px solid transparent;
-    border-left-color: $octopus-primary-dark;
+    border-left-color: $octopus-primary-color;
     border-right: 0;
     border-bottom: 0;
     margin-top: -9px;

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

@@ -85,6 +85,12 @@
               {{ podcast.organisation.name }}
             </router-link>
           </div>
+          <div v-if="''!==photoCredit">
+            {{ $t('Photo credits') + " : "+ photoCredit }}
+          </div>
+          <div v-if="''!==audioCredit">
+            {{ $t('Audio credits') + " : "+ audioCredit }}
+          </div>
           <a
             v-if="podcast.article"
             class="btn d-flex align-items-center my-2 width-fit-content"
@@ -224,6 +230,12 @@ export default defineComponent({
     podcastNotValid(): boolean {
       return undefined!==this.podcast?.availability && false === this.podcast?.valid;
     },
+    photoCredit():string{
+      return (this.podcast?.annotations?.photoCredit as string) ?? '';
+    },
+    audioCredit():string{
+      return (this.podcast?.annotations?.audioCredit as string) ?? '';
+    }
   },
   methods: {
     playPodcast(podcast: Podcast): void {

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

@@ -4,7 +4,12 @@
       ref="rubriqueListContainer"
       class="rubrique-list-container"
     >
+      <label
+        for="rubrique-list-select"
+        class="hid"
+      >{{$t('By topic')}}</label>
       <select
+        id="rubrique-list-select"
         v-model="rubriquage"
         class="c-hand"
         @change="onRubriquageSelected"

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

@@ -319,7 +319,7 @@ export default defineComponent({
 .octopus-app{
   .sticker {
     align-self: center;
-    background: $octopus-primary-dark;
+    background: $octopus-primary-color;
     padding: 0.5rem;
     transition: all 0.5s ease;
     color: white;
@@ -331,7 +331,7 @@ export default defineComponent({
     &:hover {
       box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
       background: transparent;
-      color: $octopus-primary-dark;
+      color: $octopus-primary-color;
     }
   }
   .max-iframe {

package/src/components/pages/Category.vue

@@ -23,12 +23,6 @@ export default defineComponent({
     iabId: { default: undefined, type: Number},
   },
 
-  data() {
-    return {
-      title: '' as string,
-    };
-  },
-
   computed: {
     categories(): Array<Category> {
       return this.$store.state.categories;
@@ -36,22 +30,11 @@ export default defineComponent({
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
-  },
-  watch: {
-    iabId(): void {
-      this.extractTitle();
-    },
-  },
-
-  mounted() {
-    this.extractTitle();
-  },
-  methods: {
-    extractTitle(): void {
+    title():string{
       const matchCategories = this.categories.filter((c: Category) => c.id === this.iabId);
-      if (1 !== matchCategories.length) return;
-      this.title = matchCategories[0]['name'];
-    },
+      if (1 !== matchCategories.length) return "";
+      return matchCategories[0]['name'];
+    }
   },
 })
 </script>

package/src/locale/de.ts

@@ -307,4 +307,6 @@ export default{
   "Warning":"Warnung",
   "Visual":"Bild von {name}",
   "If the transcript is available, show it":"Wenn die Abschrift vorhanden ist, zeigen Sie sie",
+  "Photo credits":"Bildnachweis",
+  "Audio credits":"Audio-Credits",
 }

package/src/locale/en.ts

@@ -314,4 +314,6 @@ export default{
   "Warning":"Warning",
   "Visual":"Visual of {name}",
   "If the transcript is available, show it":"If the transcript is available, show it",
+  "Photo credits":"Photo credits",
+  "Audio credits":"Audio credits",
 };

package/src/locale/es.ts

@@ -307,4 +307,6 @@ export default{
   "Warning":"Advertencia",
   "Visual":"Imagen de {name}",
   "If the transcript is available, show it":"Si la transcripción está disponible, muéstrela",
+  "Photo credits":"Créditos fotográficos",
+  "Audio credits":"Créditos de audio",
 }

package/src/locale/fr.ts

@@ -314,4 +314,6 @@ export default{
   "Warning":"Avertissement",
   "Visual":"Visuel de {name}",
   "If the transcript is available, show it":"Si la transcription est disponible, l'afficher",
+  "Photo credits":"Crédits photo",
+  "Audio credits":"Crédits audio",
 };

package/src/locale/it.ts

@@ -304,4 +304,6 @@ export default{
     "Warning":"Avvertimento",
     "Visual":"Visiva di {name}",
     "If the transcript is available, show it":"Se la trascrizione è disponibile, mostrala",
+    "Photo credits":"Crediti fotografici",
+    "Audio credits":"Crediti audio",
   };

package/src/locale/sl.ts

@@ -307,4 +307,6 @@ export default{
   "Warning":"Opozorilo",
   "Visual":"Slika od {name}",
   "If the transcript is available, show it":"Če je prepis na voljo, ga pokažite",
+  "Photo credits":"Avtorji fotografij",
+  "Audio credits":"Avdio krediti",
 }

package/src/sass/_variables.scss

@@ -1,35 +1,18 @@
-// Body
-$body-bg: #f8fafc;
-
 // Typography
 $font-family-sans-serif: sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
-$primary: #32815C;
-$secondary: #636C73;
-$danger: #E22C27;
-
-// Colors
-$blue: #3490dc;
-$indigo: #6574cd;
-$purple: #9561e2;
-$pink: #f66d9b;
-$red: #e3342f;
-$orange: #f6993f;
-$yellow: #ffed4a;
-$green: #38c172;
-$teal: #4dc0b5;
-$cyan: #6cb2eb;
-
-//Octopus style
-$octopus-background: #fafafa;
-$octopus-primary-color: #40a372;
-$octopus-secondary-color : #ddd;
-$octopus-primary-linear-background: #7fd8ab;
-$octopus-primary-dark : #1a8658;
 
-$primaryColorTransparent : #40a37193;
-$primaryColorMoreTransparent : #40a37154;
-$primaryColorReallyTransparent : #cef7e250;
+// bootstrap color
+$primary: #1a8658 !default;
+$secondary: #636C73 !default;
+$danger: #E22C27 !default;
 
+//SDK Octopus style
+$octopus-background: #fafafa !default;
+$octopus-primary-color: #1a8658 !default;
+$octopus-secondary-color : #ddd !default;
 
+$primaryColorTransparent : #1a865893 !default;
+$primaryColorMoreTransparent : #1a865854 !default;
+$primaryColorReallyTransparent : #cef7e250 !default;

package/src/shims-vue-recaptcha-v3.d.ts

@@ -1,9 +0,0 @@
-import { ReCaptchaInstance } from 'recaptcha-v3'
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $recaptcha: (action: string) => Promise<string>
-    $recaptchaLoaded: () => Promise<boolean>
-    $recaptchaInstance: ReCaptchaInstance
-  }
-}