@saooti/octopus-sdk 33.0.3 → 33.0.5

package/README.md

@@ -690,3 +690,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 32.0.40 Problème majeur !!! 
 
  * 33.0.3 SpeechToText player octopus
+ * 33.0.4 Image webp
+ * 33.0.5 Change recaptcha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.0.3",
+  "version": "33.0.5",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -37,7 +37,7 @@
     "vue": "^3.2.37",
     "vue-i18n": "^9.2.0-beta.40",
     "vue-multiselect": "^3.0.0-alpha.2",
-    "vue-recaptcha-v3": "^2.0.1",
+    "vue-recaptcha": "^2.0.3",
     "vue-router": "^4.1.2",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-swatches": "^1.0.10",

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

@@ -45,11 +45,20 @@
           >
             {{ $t('Close') }}
           </button>
+          <vue-recaptcha
+            ref="invisibleRecaptcha"
+            :load-recaptcha-script="true"
+            @verify="handleSuccess"
+            @expired="handleError"
+            size="invisible"
+            sitekey="6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh"
+          >
+          </vue-recaptcha>
           <button
             v-if="!sending"
             class="btn btn-primary m-1"
             :disabled="0 === countName || !validName"
-            @click="validateName"
+            @click="submit"
           >
             {{ $t('Validate') }}
           </button>
@@ -63,9 +72,13 @@
 import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
 import api from '@/api/initialize';
-import { defineComponent } from 'vue'
+import { VueRecaptcha } from 'vue-recaptcha';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'AddCommentModal',
+  components:{
+    VueRecaptcha
+  },
 
   props: {},
   emits: ['close','validate'],
@@ -74,8 +87,8 @@ export default defineComponent({
     return {
       name: '' as string,
       sending: false as boolean,
-      needVerify: true as boolean,
       sendError: false as boolean,
+      isVerify: false as boolean,
       maxName : Constants.MAX_COMMENT_NAME as number
     };
   },
@@ -97,34 +110,26 @@ export default defineComponent({
     },
   },
 
-  mounted() {
-    this.displayCaptcha('block');
+  created() {
     this.initAuthenticatedName();
   },
-  unmounted() {
-    this.displayCaptcha('none');
-  },
   methods: {
     initAuthenticatedName():void{
       if (!state.generalParameters.authenticated) { return; }
       this.name = (`${this.$store.state.profile.firstname||''} ${this.$store.state.profile.lastname||''}`).trim();
-      this.needVerify = false;
+      this.isVerify = true;
+    },
+    async handleSuccess(token: string) {
+      this.isVerify = await api.checkToken(token);
+      this.sendComment();
     },
-    displayCaptcha(displayStyle: string): void{
-      const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
-      if (!captcha) {return;}
-      (captcha as HTMLElement).style.display = displayStyle;
+    handleError() {
+      this.isVerify = false;
+      this.sendError = true;
     },
-    async validateName(): Promise<void> {
-      if (this.needVerify && this.isCaptchaTest) {
-        try {
-          await this.$recaptchaLoaded()
-          const token = await this.$recaptcha('login');
-          this.sendError = !await api.checkToken(token);
-        } catch {
-          this.sendError = true;
-        }
-        if(this.sendError){return;}
+    async submit(): Promise<void> {
+      if (!this.isVerify && !this.isCaptchaTest) {
+        return (this.$refs.invisibleRecaptcha as InstanceType<typeof VueRecaptcha>).execute();
       }
       this.sendComment();
     },

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

@@ -119,7 +119,7 @@ import { Organisation } from '@/store/class/general/organisation';
 
 const ELEMENTS_COUNT = 50;
 const DEFAULT_ORGANISATION_ID = "";
-const DEFAULT_ORGANISATION_IMAGE = '/img/emptypodcast.png';
+const DEFAULT_ORGANISATION_IMAGE = '/img/emptypodcast.webp';
 
 const getDefaultOrganistion = (defaultName: string) => {
   if(''===defaultName){

package/src/components/misc/Footer.vue

@@ -66,7 +66,7 @@
         >
           <img
             class="acpm_image"
-            src="/img/ACPM.png"
+            src="/img/ACPM.webp"
             :title="$t('Octopus is ACPM Podcast accredited')"
             :alt="$t('Octopus is ACPM Podcast accredited')"
           >

package/src/components/misc/TopBar.vue

@@ -117,7 +117,7 @@ export default defineComponent({
       return undefined;
     },
     logoUrl(): string {
-      return this.isEducation ?'/img/logo_education.png': '/img/logo_octopus_final.svg';
+      return this.isEducation ?'/img/logo_education.webp': '/img/logo_octopus_final.svg';
     },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);

package/src/components/misc/player/PlayerCompact.vue

@@ -60,12 +60,12 @@
     </div>
     <button
       :title="$t('Enlarge')"
-      class="btn play-button-box primary-bg text-light saooti-up"
+      class="btn play-button-box saooti-up"
       @click="changePlayerLargeVersion"
     />
     <button
       :title="$t('Close')"
-      class="btn play-button-box primary-bg text-light saooti-remove"
+      class="btn play-button-box saooti-remove"
       @click="stopPlayer"
     />
     <PlayerTimeline

package/src/components/pages/Error403Page.vue

@@ -11,7 +11,7 @@
       </div>
       <img
         class="stop-octopus-img"
-        src="/img/403.jpeg"
+        src="/img/403.webp"
         :alt="$t('You do not have the right to access this page')"
       >
     </div>

package/src/main.ts

@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
-import { VueReCaptcha } from 'vue-recaptcha-v3';
 import VueLazyLoad from 'vue3-lazyload';
 import App from './App.vue';
 import {setupI18n} from './i18n';
@@ -57,5 +56,4 @@ createApp(App)
 .use(store)
 .use(router)
 .use(VueLazyLoad)
-.use(VueReCaptcha, { siteKey: '6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh' })
 .mount('#app');

package/src/store/paramStore.ts

@@ -78,15 +78,15 @@ const state:ParamStore = {
     contactLink: undefined,
   },
   organisation: {
-    imageUrl: '/img/emptypodcast.png',
+    imageUrl: '/img/emptypodcast.webp',
     name: 'Saooti',
     userName: '',
   },
   octopusApi: {
-    url: 'http://api.dev2.saooti.org/',
-    commentsUrl: 'http://comments.dev2.saooti.org/',
-    imageUrl:'http://imageproxy.dev2.saooti.org/',
-    studioUrl: 'http://studio.dev2.saooti.org/',
+    url: 'https://api.dev2.saooti.org/',
+    commentsUrl: 'https://comments.dev2.saooti.org/',
+    imageUrl:'https://imageproxy.dev2.saooti.org/',
+    studioUrl: 'https://studio.dev2.saooti.org/',
     playerUrl: 'https://playerbeta.dev2.saooti.org/',
     speechToTextUrl:'https://speech2text.dev2.saooti.org/',
     recoUrl: 'https://reco.dev2.saooti.org/',