@saooti/octopus-sdk 31.0.11 → 31.0.14

package/README.md

@@ -586,3 +586,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.9 LazyLoad image
  * 31.0.10 Sécurisation
  * 31.0.11 Sécurisation
+ * 31.0.12 Commentaires Events
+ * 31.0.13 Update/delete Libraries
+ * 31.0.14 Lazy loading lang

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.11",
+  "version": "31.0.14",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,51 +14,45 @@
   },
   "main": "./dist/octopus.common.js",
   "dependencies": {
-    "@popperjs/core": "^2.11.0",
     "@saooti/octopus-api": "^0.31.2",
-    "@vue/cli": "^5.0.0-rc.1",
-    "@vue/compat": "^3.2.26",
+    "@vue/cli": "^5.0.4",
+    "@vue/compat": "^3.2.31",
     "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
-    "core-js": "^3.19.01",
-    "hls.js": "^1.0.12",
-    "humanize-duration": "^3.27.0",
-    "jquery": "^3.6.0",
-    "luxon": "^2.1.0",
-    "moment": "^2.29.1",
+    "core-js": "^3.21.1",
+    "hls.js": "^1.1.5",
+    "humanize-duration": "^3.27.1",
+    "jquery": "^3.5.14",
+    "moment": "^2.29.2",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "popper.js": "^1.16.1",
     "qrcode.vue": "^3.3.3",
-    "sass": "^1.43.4",
-    "sass-loader": "^12.3.0",
-    "v-calendar": "^3.0.0-alpha.6",
-    "vue": "^3.2.21",
-    "vue-i18n": "^9.2.0-beta.17",
+    "sass": "^1.49.11",
+    "sass-loader": "^12.6.0",
+    "v-calendar": "^3.0.0-alpha.8",
+    "vue": "^3.2.31",
+    "vue-i18n": "^9.2.0-beta.34",
     "vue-multiselect": "^3.0.0-alpha.2",
     "vue-recaptcha-v3": "^2.0.1",
-    "vue-router": "^4.0.12",
+    "vue-router": "^4.0.14",
     "vue3-lazyload": "^0.2.5-beta",
-    "vue3-swatches": "^1.0.5",
+    "vue3-swatches": "^1.0.7",
     "vuex": "^4.0.2",
-    "webpack": "^5.66.0"
+    "webpack": "^5.71.0"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.1.8",
-    "@types/hls.js": "^1.0.0",
-    "@types/jquery": "^3.5.11",
-    "@types/vue-datetime": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.8.1",
-    "@typescript-eslint/parser": "^5.8.1",
-    "@vue/cli-plugin-babel": "^5.0.0-rc.1",
-    "@vue/cli-plugin-eslint": "^5.0.0-rc.1",
-    "@vue/cli-plugin-typescript": "^5.0.0-rc.1",
-    "@vue/cli-service": "^5.0.0-rc.1",
-    "@vue/compiler-sfc": "^3.2.26",
+    "@types/jquery": "^3.5.14",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "@vue/cli-plugin-babel": "^5.0.4",
+    "@vue/cli-plugin-eslint": "^5.0.4",
+    "@vue/cli-plugin-typescript": "^5.0.4",
+    "@vue/cli-service": "^5.0.4",
+    "@vue/compiler-sfc": "^3.2.31",
     "@vue/eslint-config-typescript": "^8.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^8.2.0",
+    "eslint": "^8.12.0",
     "eslint-plugin-vue": "^7.20.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.6.3"
   },
   "eslintConfig": {
     "parser": "vue-eslint-parser",

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

@@ -267,18 +267,22 @@ export default defineComponent({
       }
       this.$emit('update:comment', updatedComment);
     },
-    receiveCommentEvent(event: {type?: string; comment: CommentPodcast; status?: string; oldStatus?:string }): void {
+    receiveCommentEvent(event: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
       switch (event.type) {
         case 'Create':this.newComment(event.comment, true);break;
         case 'Update':
           if (this.$refs.commentList) {
-            (this.$refs.commentList as InstanceType<typeof CommentList>).updateComment({ comment: event.comment });
+            (this.$refs.commentList as InstanceType<typeof CommentList>).updateComment(event);
           } else {
             const updatedComment = this.comment;
+            let updatedStatus = "";
+            if (event.comment.status && event.comment.status !== event.oldStatus) {
+              updatedStatus = event.comment.status;
+            }
             if(undefined !== updatedComment.relatedValidComments){
-              if ('Invalid' === event.status) {
+              if ('Invalid' ===updatedStatus) {
                 updatedComment.relatedValidComments -= 1;
-              } else if ('Valid' === event.status) {
+              } else if ('Valid' === updatedStatus) {
                 updatedComment.relatedValidComments += 1;
               }
             }

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

@@ -179,49 +179,36 @@ export default defineComponent({
       }
       this.comments.splice(index, 1);
     },
-    updateComment(data: {type?: string; comment: CommentPodcast; status?: string; oldStatus?:string }): void {
+    updateComment(data: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
       if (this.commentIsNotInList(data.comment.commentIdReferer)){
         const comItem = (this.$refs['comItem' + data.comment.commentIdReferer] as Array<InstanceType<typeof CommentItem>>)[0];
-        comItem.receiveCommentEvent({ ...data, type: 'Update' });
+        comItem.receiveCommentEvent(data);
         return;
       }
       const index = this.findCommentIndex(data.comment.comId);
       if (-1 !== index) {
-        if ('Valid' !== data.status &&
-          (!this.editRight || (this.status && this.status !== data.status))
-        ) {
+        if ((!this.editRight && 'Valid' !== data.comment.status) ||
+          (this.editRight && this.status && this.status !== data.comment.status)) {
           this.comments.splice(index, 1);
         } else {
           this.comments.splice(index, 1, data.comment);
         }
-      }else if (this.status === data.comment.status) {
-        this.comments.unshift(data.comment);
-      } else if ('Valid' === data.status) {
-        if (this.comments.length > 0) {
-          let indexNewComment = -1;
-          for (let i = 0, len = this.comments.length; i < len; i++) {
-            if (
-              moment(this.comments[i].date).isBefore(moment(data.comment.date))
-            ) {
-              indexNewComment = i;
-              break;
-            }
+      }else if((!this.editRight && 'Valid' === data.comment.status) ||
+              (this.editRight && !this.status) ||
+              (this.editRight && this.status && this.status === data.comment.status)){
+        let indexNewComment = 0;
+        for (let i = 0, len = this.comments.length; i < len; i++) {
+          if (
+            moment(this.comments[i].date).isBefore(moment(data.comment.date))
+          ) {
+            indexNewComment = i;
+            break;
           }
-          if (-1 !== indexNewComment) {
-            if (!this.status || this.status === data.status) {
-              this.comments.splice(indexNewComment, 0, data.comment);
-            } /* else {
-              this.comments.splice(indexNewComment, 1);
-            } */
-          } else if (!this.status || this.status === data.status) {
-            this.comments.push(data.comment);
-          }
-        } else if (!this.status || this.status === data.status) {
-          this.comments.unshift(data.comment);
         }
+        this.comments.splice(indexNewComment, 0, data.comment);
       }
-      if (this.comId && data.status) {
-        this.$emit('updateStatus', data.status);
+      if (this.comId && data.oldStatus!==data.comment.status) {
+        this.$emit('updateStatus', data.comment.status);
       }
     },
     addNewComment(comment: CommentPodcast, myself = false): void {

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

@@ -129,20 +129,11 @@ export default defineComponent({
     newComment(comment: CommentPodcast): void {
       (this.$refs.commentList as InstanceType<typeof CommentListVue>).addNewComment(comment, true);
     },
-    receiveCommentEvent(event: {type?: string; comment: CommentPodcast; status?: string; oldStatus?:string }): void {
+    receiveCommentEvent(event: {type: string; comment: CommentPodcast; oldStatus?:string }): void {
       const commentList = (this.$refs.commentList as InstanceType<typeof CommentListVue>);
-      let statusUpdated = undefined;
       switch (event.type) {
         case 'Create':commentList.addNewComment(event.comment);break;
-        case 'Update':
-          if (event.comment.status !== event.oldStatus) {
-            statusUpdated = event.comment.status;
-          }
-          commentList.updateComment({
-            comment: event.comment,
-            status: statusUpdated,
-          });
-          break;
+        case 'Update':commentList.updateComment(event);break;
         case 'Delete':commentList.deleteComment(event.comment);break;
         default:break;
       }

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

@@ -18,7 +18,7 @@
             frameborder="0"
             :width="iFrameWidth"
             :height="iFrameHeight"
-            class="max-iframe"
+            class="max-iframe my-2"
           />
           <div class="d-flex flex-column">
             <button

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

@@ -26,6 +26,7 @@
 </template>
 
 <script lang="ts">
+// @ts-ignore
 import VSwatches from 'vue3-swatches';
 import { defineComponent } from 'vue';
 export default defineComponent({

package/src/components/misc/Footer.vue

@@ -142,9 +142,11 @@
 </template>
 
 <script lang="ts">
+import { cookies } from '../mixins/functions';
 import ClassicSelect from '../form/ClassicSelect.vue';
 import Player from './Player.vue';
 import { state } from '../../store/paramStore';
+import {loadLocaleMessages} from '@/i18n';
 import octopusApi from '@saooti/octopus-api';
 import moment from 'moment';
 import { Category } from '@/store/class/general/category';
@@ -157,6 +159,8 @@ export default defineComponent({
     ClassicSelect
   },
 
+  mixins:[cookies],
+
   data() {
     return {
       language: this.$i18n.locale as string,
@@ -199,7 +203,8 @@ export default defineComponent({
       }
     },
     changeLanguage(): void{
-      this.$i18n.locale= this.language;
+      this.setCookie('octopus-language', this.language);
+      loadLocaleMessages(this.$i18n, this.language, this.$store.state.general.isEducation);
       moment.locale(this.$i18n.locale);
       octopusApi.fetchCategories({ lang: this.$i18n.locale }).then((data: Array<Category>) => {
         this.$store.commit('categoriesSet', data);

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

@@ -91,6 +91,7 @@
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import Snackbar from '../../misc/Snackbar.vue';
 import moment from 'moment';
+// @ts-ignore
 import VSwatches from 'vue3-swatches';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';

package/src/components/pages/Podcast.vue

@@ -376,7 +376,7 @@ export default defineComponent({
         this.$router.push('/');
       }
     },
-    receiveCommentEvent(event:{type?: string; comment: CommentPodcast; status?: string; oldStatus?:string } ): void {
+    receiveCommentEvent(event:{type: string; comment: CommentPodcast; oldStatus?:string } ): void {
       (this.$refs.commentSection as InstanceType<typeof CommentSectionVue>).receiveCommentEvent(event);
     },
   },

package/src/i18n.ts

@@ -0,0 +1,36 @@
+
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n';
+
+
+export function setupI18n(options = { locale: 'en' }, isEducation: boolean) {
+  const i18n = createI18n(options)
+  loadLocaleMessages(i18n.global, options.locale, isEducation);
+  return i18n;
+}
+
+export function setI18nLanguage(i18n: any, locale: string) {
+  i18n.locale = locale;
+  const html= document.querySelector('html');
+  if(html){
+    html.setAttribute('lang', locale);
+  }
+}
+
+export async function loadLocaleMessages(i18n: any, locale:string, isEducation: boolean) {
+	if(!i18n.messages[locale] || 0===Object.keys(i18n.messages[locale]).length){
+		let messages = await import(
+			`./locale/${locale}.ts`
+		)
+		messages = messages.default;
+		if(isEducation && ('fr'===locale || 'en'===locale)){
+			const messagesEdu = await import(
+				`./locale/education${locale}.ts`
+			);
+			messages ={...messages, ...messagesEdu.default};
+		}
+		i18n.setLocaleMessage(locale, messages);
+	}
+  setI18nLanguage(i18n, locale)
+  return nextTick();
+}

package/src/main.ts

@@ -2,50 +2,48 @@ import { createApp } from 'vue';
 import { VueReCaptcha } from 'vue-recaptcha-v3';
 import VueLazyLoad from 'vue3-lazyload';
 import App from './App.vue';
-import { createI18n, VueMessageType } from 'vue-i18n';
-import I18nResources from './locale/messages';
+import {setupI18n} from './i18n';
 import router from '@/router/router';
 import moment from 'moment';
 import store from '@/store/AppStore';
 import paramStore from '@/store/paramStore';
-import { LocaleMessage } from '@intlify/core-base';
 /* import 'popper.js/dist/popper.min.js'; */
 /* import 'jquery/src/jquery.js'; */
 /* import 'jquery';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  */
 
+
 //TODO
-const navigatorLang = navigator.language /* || navigator.userLanguage */;
-let language = 'fr';
-if(navigatorLang.includes('en')){
-  language = 'en';
-}else if(navigatorLang.includes('it')){
-  language = 'it';
-}else if(navigatorLang.includes('sl')){
-  language = 'sl';
-}else if(navigatorLang.includes('es')){
-  language = 'es';
-}else if(navigatorLang.includes('de')){
-  language = 'de';
+const nameEQ = 'octopus-language=';
+const ca = document.cookie.split(';');
+let language = "";
+for (let i = 0; i < ca.length; i++) {
+  let c = ca[i];
+  while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+  if (0 === c.indexOf(nameEQ)){
+    language = c.substring(nameEQ.length, c.length);
+    break;
+  }
 }
-let messages: {[key: string]: LocaleMessage<VueMessageType>} = I18nResources;
-if (store.state.general.education) {
-  messages = {
-    fr: { ...I18nResources.fr, ...I18nResources.educationfr },
-    en: { ...I18nResources.en, ...I18nResources.educationen },
-    it: I18nResources.it,
-    sl: I18nResources.it,
-    es: I18nResources.es,
-    de: I18nResources.de,
-  };
+if(0===language.length){
+  const navigatorLang = navigator.language /* || navigator.userLanguage */;
+  language = 'fr';
+  if(navigatorLang.includes('en')){
+    language = 'en';
+  }else if(navigatorLang.includes('it')){
+    language = 'it';
+  }else if(navigatorLang.includes('sl')){
+    language = 'sl';
+  }else if(navigatorLang.includes('es')){
+    language = 'es';
+  }else if(navigatorLang.includes('de')){
+    language = 'de';
+  }
 }
-const i18n = createI18n({
-  locale: language,
-  messages: messages,
-});
-moment.locale(language);
 
+const i18n = setupI18n({locale: language}, store.state.general.education);
+moment.locale(language);
 
 paramStore.initialize({
   generalParameters: {},