@saooti/octopus-sdk 37.0.6 → 37.0.7

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

@@ -14,32 +14,26 @@
           type="text"
           :placeholder="$t('Your name')"
           :class="{ 'border border-danger': 0 === countName || !validName }"
-        >
+        />
         <p
           class="d-flex justify-content-end h6"
           :class="{ 'text-danger': !validName }"
         >
-          {{ countName + ' / ' + maxName }}
+          {{ countName + " / " + maxName }}
         </p>
-        <div
-          v-if="''!==errorText"
-          class="mt-1 text-danger"
-        >
+        <div v-if="'' !== errorText" class="mt-1 text-danger">
           {{ errorText }}
         </div>
       </template>
       <template v-else>
-        <div>{{ $t('Send in progress') }}</div>
+        <div>{{ $t("Send in progress") }}</div>
       </template>
     </template>
     <template #footer>
-      <button
-        class="btn m-1"
-        @click="closePopup"
-      >
-        {{ $t('Close') }}
+      <button class="btn m-1" @click="closePopup">
+        {{ $t("Close") }}
       </button>
-      <vue-recaptcha 
+      <vue-recaptcha
         v-if="!isVerify"
         ref="invisibleRecaptcha"
         :load-recaptcha-script="true"
@@ -54,56 +48,56 @@
         :disabled="0 === countName || !validName"
         @click="submit"
       >
-        {{ $t('Validate') }}
+        {{ $t("Validate") }}
       </button>
     </template>
   </ClassicModal>
 </template>
 
 <script lang="ts">
-import Constants from '../../../../public/config';
-import { state } from '../../../stores/ParamSdkStore';
-import ClassicModal from '../../misc/modal/ClassicModal.vue';
-import api from '@/api/initialize';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import { VueRecaptcha } from 'vue-recaptcha';
-import { defineComponent } from 'vue';
+import Constants from "../../../../public/config";
+import { state } from "../../../stores/ParamSdkStore";
+import ClassicModal from "../../misc/modal/ClassicModal.vue";
+import api from "@/api/initialize";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import { VueRecaptcha } from "vue-recaptcha";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'AddCommentModal',
-  components:{
+  name: "AddCommentModal",
+  components: {
     VueRecaptcha,
-    ClassicModal
+    ClassicModal,
   },
 
   props: {},
-  emits: ['close','validate'],
+  emits: ["close", "validate"],
 
   data() {
     return {
-      name: '' as string,
+      name: "" as string,
       sending: false as boolean,
       sendError: false as boolean,
       isVerify: false as boolean,
-      maxName : Constants.MAX_COMMENT_NAME as number
+      maxName: Constants.MAX_COMMENT_NAME as number,
     };
   },
   computed: {
-    ...mapState(useAuthStore, ['authProfile']),
-    errorText():string {
-      if(this.isCaptchaTest){
-        return this.$t('Recaptcha not active');
+    ...mapState(useAuthStore, ["authProfile"]),
+    errorText(): string {
+      if (this.isCaptchaTest) {
+        return this.$t("Recaptcha not active");
       }
-      return this.sendError? this.$t('Recaptcha error') : '';
+      return this.sendError ? this.$t("Recaptcha error") : "";
     },
-    validName(): boolean{
+    validName(): boolean {
       return this.countName <= this.maxName;
     },
-    countName(): number{
+    countName(): number {
       return this.name.length;
     },
     isCaptchaTest(): boolean {
-      return (state.generalParameters.isCaptchaTest as boolean);
+      return state.generalParameters.isCaptchaTest as boolean;
     },
   },
 
@@ -111,9 +105,13 @@ export default defineComponent({
     this.initAuthenticatedName();
   },
   methods: {
-    initAuthenticatedName():void{
-      if (!this.authProfile?.userId) { return; }
-      this.name = (`${this.authProfile?.firstname||''} ${this.authProfile?.lastname||''}`).trim();
+    initAuthenticatedName(): void {
+      if (!this.authProfile?.userId) {
+        return;
+      }
+      this.name = `${this.authProfile?.firstname || ""} ${
+        this.authProfile?.lastname || ""
+      }`.trim();
       this.isVerify = true;
     },
     async handleSuccess(token: string) {
@@ -126,17 +124,19 @@ export default defineComponent({
     },
     async submit(): Promise<void> {
       if (!this.isVerify && !this.isCaptchaTest) {
-        return (this.$refs.invisibleRecaptcha as InstanceType<typeof VueRecaptcha>).execute();
+        return (
+          this.$refs.invisibleRecaptcha as InstanceType<typeof VueRecaptcha>
+        ).execute();
       }
       this.sendComment();
     },
     closePopup(): void {
-      this.$emit('close');
+      this.$emit("close");
     },
     sendComment(): void {
       this.sending = true;
-      this.$emit('validate', this.name);
+      this.$emit("validate", this.name);
     },
   },
-})
-</script>
+});
+</script>

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

@@ -2,19 +2,22 @@
   <div>
     <div class="d-flex h6">
       <strong
-        v-if="recordingInLive && ('Live' === comment.phase || 'Prelive' === comment.phase)"
+        v-if="
+          recordingInLive &&
+          ('Live' === comment.phase || 'Prelive' === comment.phase)
+        "
         class="recording-bg me-1 text-light p-1"
-      >{{ $t('Live') }}</strong>
+        >{{ $t("Live") }}</strong
+      >
       <strong
         :id="'popover-comment' + comment.comId"
         role="button"
         tabindex="-1"
-        :class="editRight || isValid? 'c-hand-auto':'text-danger'"
+        :class="editRight || isValid ? 'c-hand-auto' : 'text-danger'"
         class="me-2"
-      >{{
-        comment.name
-      }}</strong>
-      <Popover
+        >{{ comment.name }}</strong
+      >
+      <ClassicPopover
         :disable="editRight || isValid"
         :target="'popover-comment' + comment.comId"
         :content="$t('Comment waiting')"
@@ -29,8 +32,8 @@
       <div class="me-2">
         {{ date }}
       </div>
-      <span 
-        v-if="editRight" 
+      <span
+        v-if="editRight"
         :class="'status-' + comment.status"
         :data-selenium="'status-comment-' + seleniumFormat(comment.name)"
       />
@@ -42,30 +45,31 @@
       v-if="comment.content.length > 300"
       class="c-hand font-italic"
       @click="summary = !summary"
-    >{{ readMore }}</a>
+      >{{ readMore }}</a
+    >
   </div>
 </template>
 
 <script lang="ts">
-import selenium from '../../mixins/selenium';
-import displayMethods from '../../mixins/displayMethods';
-import { CommentPodcast } from '@/stores/class/general/comment';
-import dayjs from 'dayjs';
-import Popover from '../../misc/Popover.vue';
-import { defineComponent } from 'vue';
+import selenium from "../../mixins/selenium";
+import displayMethods from "../../mixins/displayMethods";
+import { CommentPodcast } from "@/stores/class/general/comment";
+import dayjs from "dayjs";
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'CommentBasicView',
+  name: "CommentBasicView",
 
   components: {
-    Popover
+    ClassicPopover,
   },
 
-  mixins:[displayMethods, selenium],
+  mixins: [displayMethods, selenium],
 
   props: {
-    comment: { default: ()=>({}), type: Object as ()=>CommentPodcast },
-    editRight: { default: false, type: Boolean},
-    recordingInLive: { default: false, type: Boolean},
+    comment: { default: () => ({}), type: Object as () => CommentPodcast },
+    editRight: { default: false, type: Boolean },
+    recordingInLive: { default: false, type: Boolean },
   },
 
   data() {
@@ -74,21 +78,25 @@ export default defineComponent({
     };
   },
   computed: {
-    isValid(): boolean{
-      return 'Valid'=== this.comment.status;
+    isValid(): boolean {
+      return "Valid" === this.comment.status;
     },
     date(): string {
-      return this.comment.date ? dayjs(this.comment.date).format('D MMMM YYYY HH[h]mm') : '';
+      return this.comment.date
+        ? dayjs(this.comment.date).format("D MMMM YYYY HH[h]mm")
+        : "";
     },
     readMore(): string {
-      return this.summary ? this.$t('Read more') : this.$t('Read less');
+      return this.summary ? this.$t("Read more") : this.$t("Read less");
     },
     contentDisplay(): string {
-      if (!this.summary){return this.comment.content;}
-      if (!this.comment.content) return '';
+      if (!this.summary) {
+        return this.comment.content;
+      }
+      if (!this.comment.content) return "";
       if (this.comment.content.length <= 300) return this.comment.content;
-      return this.comment.content.substring(0, 300) + '...';
+      return this.comment.content.substring(0, 300) + "...";
     },
   },
-})
+});
 </script>

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

@@ -1,43 +1,35 @@
 <template>
-  <div
-    v-if="isPresent"
-    class="d-flex flex-column comment-input-container mt-3"
-  >
+  <div v-if="isPresent" class="d-flex flex-column comment-input-container mt-3">
     <strong
       v-if="knownIdentity && !editName"
       class="h6 mt-1 c-hand"
       @click="changeIdentity"
-    >{{ knownIdentity }}</strong>
-    <div
-      v-if="editName"
-      class="d-flex"
+      >{{ knownIdentity }}</strong
     >
+    <div v-if="editName" class="d-flex">
       <div class="d-flex flex-column">
         <input
           v-model="temporaryName"
           class="h6 mt-1"
           type="text"
           :class="{ 'border border-danger': 0 === countName || !validName }"
-        >
+        />
         <p
           class="d-flex justify-content-end h6 mb-0"
           :class="{ 'text-danger': !validName }"
         >
-          {{ countName + ' / ' + maxName }}
+          {{ countName + " / " + maxName }}
         </p>
       </div>
-      <button
-        class="btn m-1"
-        @click="editName = false"
-      >
-        {{ $t('Cancel') }}
+      <button class="btn m-1" @click="editName = false">
+        {{ $t("Cancel") }}
       </button>
       <button
         class="btn btn-primary m-1"
         :disabled="0 === countName || !validName"
         @click="validEdit"
       >
-        {{ $t('Validate') }}
+        {{ $t("Validate") }}
       </button>
     </div>
     <textarea
@@ -54,14 +46,11 @@
         class="d-flex justify-content-end h6"
         :class="{ 'text-danger': !validComment }"
       >
-        {{ countComment + ' / ' + maxComment }}
+        {{ countComment + " / " + maxComment }}
       </p>
       <div class="d-flex justify-content-end mt-1">
-        <button
-          class="btn me-2"
-          @mousedown="cancelAction"
-        >
-          {{ $t('Cancel') }}
+        <button class="btn me-2" @mousedown="cancelAction">
+          {{ $t("Cancel") }}
         </button>
         <button
           class="btn btn-primary"
@@ -89,106 +78,122 @@
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import crudApi from '@/api/classicCrud';
-import cookies from '../../mixins/cookies';
-import { state } from '../../../stores/ParamSdkStore';
-import { Podcast } from '@/stores/class/general/podcast';
-import { Conference } from '@/stores/class/conference/conference';
-import { CommentPodcast } from '@/stores/class/general/comment';
-import Constants from '../../../../public/config';
-import { usePlayerStore } from '@/stores/PlayerStore';
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import { defineComponent, defineAsyncComponent } from 'vue';
-const AddCommentModal = defineAsyncComponent(() => import('./AddCommentModal.vue'));
-const MessageModal = defineAsyncComponent(() => import('../../misc/modal/MessageModal.vue'));
+import octopusApi from "@saooti/octopus-api";
+import crudApi from "@/api/classicCrud";
+import cookies from "../../mixins/cookies";
+import { state } from "../../../stores/ParamSdkStore";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Conference } from "@/stores/class/conference/conference";
+import { CommentPodcast } from "@/stores/class/general/comment";
+import Constants from "../../../../public/config";
+import { usePlayerStore } from "@/stores/PlayerStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import { defineComponent, defineAsyncComponent } from "vue";
+const AddCommentModal = defineAsyncComponent(
+  () => import("./AddCommentModal.vue"),
+);
+const MessageModal = defineAsyncComponent(
+  () => import("../../misc/modal/MessageModal.vue"),
+);
 export default defineComponent({
-  name: 'CommentInput',
+  name: "CommentInput",
   components: {
     AddCommentModal,
     MessageModal,
   },
-  mixins:[cookies],
+  mixins: [cookies],
 
   props: {
-    podcast: { default: undefined, type: Object as ()=>Podcast },
+    podcast: { default: undefined, type: Object as () => Podcast },
     knownIdentity: { default: undefined, type: String },
     focus: { default: false, type: Boolean },
-    comment: { default: undefined, type: Object as ()=>CommentPodcast },
-    fetchConference: { default: undefined, type: Object as ()=>Conference },
+    comment: { default: undefined, type: Object as () => CommentPodcast },
+    fetchConference: { default: undefined, type: Object as () => Conference },
   },
-  emits: ['update:knownIdentity', 'cancelAction', 'newComment'],
+  emits: ["update:knownIdentity", "cancelAction", "newComment"],
 
   data() {
     return {
-      newComment: '' as string,
+      newComment: "" as string,
       textareaFocus: false as boolean,
       checkIdentityModal: false as boolean,
       postError: false as boolean,
       isOneLine: true as boolean,
       editName: false as boolean,
-      temporaryName: '' as string,
-      maxComment : Constants.MAX_COMMENT as number,
-      maxName : Constants.MAX_COMMENT_NAME as number
+      temporaryName: "" as string,
+      maxComment: Constants.MAX_COMMENT as number,
+      maxName: Constants.MAX_COMMENT_NAME as number,
     };
   },
 
   computed: {
-    ...mapState(usePlayerStore, ['playerPodcast', 'playerLive', 'playerElapsed', 'playerTotal']),
-    ...mapState(useAuthStore, ['authProfile']),
-    validName(): boolean{
+    ...mapState(usePlayerStore, [
+      "playerPodcast",
+      "playerLive",
+      "playerElapsed",
+      "playerTotal",
+    ]),
+    ...mapState(useAuthStore, ["authProfile"]),
+    validName(): boolean {
       return this.countName <= this.maxName;
     },
-    countName(): number{
+    countName(): number {
       return this.temporaryName.length;
     },
-    validComment(): boolean{
+    validComment(): boolean {
       return this.countComment <= this.maxComment;
     },
-    countComment(): number{
+    countComment(): number {
       return this.newComment.length;
     },
     isPresent(): boolean {
       if (!this.podcast) return true;
-      let podcastComment = this.podcast.annotations?.COMMENTS ?? 'INHERIT';
-      let organisationComment = this.podcast.organisation.comments??'LIVE_ONLY';
-      return !(('LIVE_ONLY' === podcastComment &&
-          'READY_TO_RECORD' !== this.podcast.processingStatus) ||
-        ('INHERIT' === podcastComment &&
-          'LIVE_ONLY' === organisationComment &&
-          'READY_TO_RECORD' !== this.podcast.processingStatus));
+      let podcastComment = this.podcast.annotations?.COMMENTS ?? "INHERIT";
+      let organisationComment =
+        this.podcast.organisation.comments ?? "LIVE_ONLY";
+      return !(
+        ("LIVE_ONLY" === podcastComment &&
+          "READY_TO_RECORD" !== this.podcast.processingStatus) ||
+        ("INHERIT" === podcastComment &&
+          "LIVE_ONLY" === organisationComment &&
+          "READY_TO_RECORD" !== this.podcast.processingStatus)
+      );
     },
     placeholder(): string {
-      return this.comment?.comId? this.$t('Answer a comment') : this.$t('Write a comment');
+      return this.comment?.comId
+        ? this.$t("Answer a comment")
+        : this.$t("Write a comment");
     },
     isCertified(): boolean {
-      return (true === state.generalParameters.isCommments &&
-        state.generalParameters.organisationId === this.podcastOrga) ||
-        true === state.generalParameters.isAdmin;
+      return (
+        (true === state.generalParameters.isCommments &&
+          state.generalParameters.organisationId === this.podcastOrga) ||
+        true === state.generalParameters.isAdmin
+      );
     },
-    phase(): string|undefined {
-      if(undefined === this.podcast){
+    phase(): string | undefined {
+      if (undefined === this.podcast) {
         return this.comment ? this.comment.phase : undefined;
       }
       if (
         !this.podcast.conferenceId ||
         0 === this.podcast.conferenceId ||
-        'READY_TO_RECORD' !== this.podcast.processingStatus
+        "READY_TO_RECORD" !== this.podcast.processingStatus
       )
-        return 'Podcast';
+        return "Podcast";
       if (
         this.fetchConference &&
-        ('PLANNED' === this.fetchConference.status ||
-          'PENDING' === this.fetchConference.status)
+        ("PLANNED" === this.fetchConference.status ||
+          "PENDING" === this.fetchConference.status)
       )
-        return 'Prelive';
-      return 'Live';
+        return "Prelive";
+      return "Live";
     },
-    podcastOrga(): string|undefined{
-      const commentOrga = this.comment?.organisationId ??'';
+    podcastOrga(): string | undefined {
+      const commentOrga = this.comment?.organisationId ?? "";
       return this.podcast?.organisation.id ?? commentOrga;
-    }
+    },
   },
   watch: {
     textareaFocus(): void {
@@ -204,25 +209,29 @@ export default defineComponent({
         (this.$refs.textarea as HTMLElement).clientWidth -
           this.inputExceeded(
             this.newComment,
-            '18px Montserrat, sans-serif, Helvetica Neue'
+            "18px Montserrat, sans-serif, Helvetica Neue",
           ) >
         padding;
     },
   },
   methods: {
     changeIdentity(): void {
-      if(!this.knownIdentity){return}
+      if (!this.knownIdentity) {
+        return;
+      }
       this.temporaryName = this.knownIdentity;
       this.editName = true;
     },
     validEdit(): void {
-      this.setCookie('comment-octopus-name', this.temporaryName);
-      this.$emit('update:knownIdentity', this.temporaryName);
+      this.setCookie("comment-octopus-name", this.temporaryName);
+      this.$emit("update:knownIdentity", this.temporaryName);
       this.editName = false;
     },
     inputExceeded(text: string, font: string): number {
-      const context = document.createElement('canvas').getContext('2d');
-      if(null === context){return 0;}
+      const context = document.createElement("canvas").getContext("2d");
+      if (null === context) {
+        return 0;
+      }
       context.font = font;
       return context.measureText(text).width;
     },
@@ -234,40 +243,38 @@ export default defineComponent({
       }
     },
     cancelAction(): void {
-      this.$emit('cancelAction');
+      this.$emit("cancelAction");
     },
-    defineTimelineValue(): number{
-      let timeline = 0; 
+    defineTimelineValue(): number {
+      let timeline = 0;
       if (
-        undefined !== this.podcast &&(
-        (this.playerPodcast?.podcastId ===this.podcast.podcastId) ||
-        (this.playerLive?.podcastId ===this.podcast.podcastId))
+        undefined !== this.podcast &&
+        (this.playerPodcast?.podcastId === this.podcast.podcastId ||
+          this.playerLive?.podcastId === this.podcast.podcastId)
       ) {
-        timeline = Math.round(
-          this.playerElapsed * this.playerTotal
-        );
+        timeline = Math.round(this.playerElapsed * this.playerTotal);
         if (this.podcast.duration && this.playerPodcast) {
           timeline = Math.round(
-            timeline - (this.playerTotal - this.podcast.duration / 1000)
+            timeline - (this.playerTotal - this.podcast.duration / 1000),
           );
         }
       }
-      return timeline < 0? 0 : timeline;
+      return timeline < 0 ? 0 : timeline;
     },
     async postComment(name?: string): Promise<void> {
       if (name) {
-        this.setCookie('comment-octopus-name', name);
-        this.$emit('update:knownIdentity', name);
+        this.setCookie("comment-octopus-name", name);
+        this.$emit("update:knownIdentity", name);
       }
-      const sendName = name??this.knownIdentity;
+      const sendName = name ?? this.knownIdentity;
       const commentPodcastId = this.comment?.podcastId ?? 0;
       const comment: CommentPodcast = {
         content: this.newComment,
-        name: sendName ??'',
+        name: sendName ?? "",
         podcastId: this.podcast?.podcastId ?? commentPodcastId,
         timeline: this.defineTimelineValue(),
         organisationId: this.podcastOrga,
-        commentIdReferer:this.comment?.comId,
+        commentIdReferer: this.comment?.comId,
         certified: this.isCertified,
         userId: this.authProfile?.userId,
         phase: this.phase,
@@ -275,25 +282,33 @@ export default defineComponent({
       try {
         let data;
         if (this.isCertified) {
-          comment.status = 'Valid';
-          data = await crudApi.postData<CommentPodcast>(2, 'registeredComment/' + comment.userId, {...comment, ...{userId: undefined}});
+          comment.status = "Valid";
+          data = await crudApi.postData<CommentPodcast>(
+            2,
+            "registeredComment/" + comment.userId,
+            { ...comment, ...{ userId: undefined } },
+          );
         } else {
-          data = await octopusApi.postDataPublic<CommentPodcast>(2,'unregisteredComment',comment);
+          data = await octopusApi.postDataPublic<CommentPodcast>(
+            2,
+            "unregisteredComment",
+            comment,
+          );
         }
-        this.$emit('newComment', data);
-        this.newComment = '';
+        this.$emit("newComment", data);
+        this.newComment = "";
       } catch (error) {
         this.postError = true;
       }
       this.checkIdentityModal = false;
     },
   },
-})
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
+@import "@scss/_variables.scss";
+.octopus-app {
   .comment-input-container {
     textarea::placeholder {
       color: $octopus-primary-color;
@@ -310,10 +325,10 @@ export default defineComponent({
       box-shadow: unset !important;
       background: transparent !important;
       height: 50px;
-      &.short{
+      &.short {
         max-height: 38px;
       }
     }
   }
 }
-</style>
+</style>