@saooti/octopus-sdk 39.0.53 → 39.0.55

package/index.ts

@@ -77,6 +77,8 @@ export const getPaginateParams = () => import("./src/components/display/list/Pag
 export const getListPaginate = () => import("./src/components/display/list/ListPaginate.vue");
 export const getClassicMultiselect = () => import("./src/components/form/ClassicMultiselect.vue");
 export const getClassicInputText = () => import("./src/components/form/ClassicInputText.vue");
+export const getClassicEmojiPicker = () => import("./src/components/form/ClassicEmojiPicker.vue");
+export const getClassicContentEditable = () => import("./src/components/form/ClassicContentEditable.vue");
 
 //mixins
 
@@ -88,6 +90,7 @@ import orgaFilter from "./src/components/mixins/organisationFilter.ts";
 import initSDK from "./src/components/mixins/init.ts";
 import tagOfMixins from "./src/components/mixins/tagOfMixins.ts";
 import resizePhone from "./src/components/mixins/resizePhone.ts";
+import commentWebsocket from "./src/websocket/commentWebsocket.ts";
 
 
 import TopBar from "./src/components/misc/TopBar.vue";
@@ -101,5 +104,6 @@ export {
     initSDK,
     tagOfMixins,
     resizePhone,
+    commentWebsocket,
     TopBar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.0.53",
+  "version": "39.0.55",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,8 +14,10 @@
     "test": "jest --coverage"
   },
   "dependencies": {
+    "@multiformats/murmur3": "^2.1.8",
     "@popperjs/core": "^2.11.8",
-    "@saooti/octopus-api": "^0.39.1",
+    "@saooti/octopus-api": "^0.39.2",
+    "@stomp/stompjs": "^7.0.0",
     "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-underline": "^2.4.0",
     "@tiptap/pm": "^2.4.0",
@@ -28,6 +30,7 @@
     "autoprefixer": "^10.4.19",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
+    "emoji-mart-vue-fast": "^15.0.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "express": "^4.19.2",
@@ -37,6 +40,7 @@
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.1",
     "sass": "^1.77.6",
+    "sockjs-client": "^1.6.1",
     "sonarqube-scanner": "^3.3.0",
     "swiper": "^11.1.4",
     "video.js": "^8.12.0",
@@ -51,6 +55,7 @@
     "vue3-swatches": "^1.2.4"
   },
   "devDependencies": {
+    "@types/sockjs-client": "^1.5.4",
     "@types/vue-select": "^3.16.8",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",

package/public/config.ts

@@ -1,4 +1,4 @@
 export default Object.freeze({
-    MAX_COMMENT : 4096,
-    MAX_COMMENT_NAME : 127
+    MAX_COMMENT : 4095,
+    MAX_COMMENT_NAME : 255
 });

package/src/App.vue

@@ -12,7 +12,6 @@
     </template>
   </div>
 </template>
-
 <script lang="ts">
 import TopBar from "@/components/misc/TopBar.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";

package/src/api/classicCrud.ts

@@ -29,5 +29,10 @@ export default {
         console.log(moduleName,wsPath);
         await axios.delete('/mock');
     },
+    async updateData<Type>(moduleName: ModuleApi,wsPath:string, elementToUpdate: Type): Promise<Type>{
+        console.log(moduleName,wsPath,elementToUpdate);
+        const response = await axios.get('/mock');
+        return response.data;
+    },
 };
 /* eslint-enable */

package/src/assets/bootstrap.scss

@@ -3,7 +3,7 @@
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 }
-input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs__"]), optgroup, textarea {
+input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs__"]), optgroup, textarea, pre {
 	margin: 0;
 	font-family: inherit;
 	font-size: inherit;
@@ -209,7 +209,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		border: 0;
 	}
 	.share-btn {
-			font-size: 1.3rem;
+			font-size: 1rem;
 			width: 2.5rem !important;
 			height: 2.5rem !important;
 			padding: 0.5rem;

package/src/assets/comments.scss

@@ -0,0 +1,18 @@
+@import '@scss/_variables.scss';
+
+.octopus-app{
+  .status-PENDING {
+    background: #eb7d22;
+  }
+  .status-NOT_VALID {
+    background: #d40303;
+  }
+  .status-VALIDATED {
+    background: $octopus-primary-color;
+  }
+  .status-comment, .status-VALIDATED, .status-NOT_VALID, .status-PENDING {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+  }
+}

package/src/assets/general.scss

@@ -64,12 +64,18 @@ body{
   .secondary-bg{
     background: $octopus-background;
   }
+  .really-light-secondary-bg{
+    background: #f7f7f7;
+  }
   .light-primary-bg{
 		background-color: $primaryColorTransparent !important;
 	}
 	.really-light-primary-bg{
 		background-color: $primaryColorReallyTransparent !important;
 	}
+  .blue-bg{
+    background-color: $blue-octopus;
+  }
   .width-fit-content{
     width: fit-content !important;
   }
@@ -78,7 +84,7 @@ body{
   }
   .page-box{
     background-color: $octopus-background;
-    padding: 1rem 5rem 5rem 5rem;
+    padding: 1rem 3rem 3rem 3rem;
     flex-grow: 1;
     display: flex;
     flex-direction: column;

package/src/assets/share.scss

@@ -228,21 +228,6 @@
       }
     }
   }
-  .status-Pending {
-      background: #eb7d22;
-  }
-  .status-Invalid {
-      background: #d40303;
-  }
-  .status-Valid {
-      background: $octopus-primary-color;
-  }
-  .status-Valid, .status-Invalid, .status-Pending {
-      width: 14px;
-      height: 14px;
-      border-radius: 50%;
-  }
-
   .logo-octopus{
     width: 250px;
     @media (max-width: 960px) {

package/src/assets/videoPlayer.scss

@@ -0,0 +1,16 @@
+.octopus-app {
+  .video-responsive-wrapper {
+    position:relative;
+    padding-bottom:56.25%;
+    height:0;
+    width: 100%;
+    iframe, #video-element-hls {
+      position:absolute;
+      top:0;
+      left:0;
+      width:100% !important;
+      height:100%;
+      margin:0 !important;
+    }
+  }
+}

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

@@ -1,70 +1,41 @@
 <template>
-  <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">
-      <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 }}
-        </p>
-      </div>
-      <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") }}
-      </button>
-    </div>
-    <textarea
+  <div class="d-flex flex-column comment-input-container mt-3">
+    <CommentName v-if="commentUser?.name" />
+    <ClassicContentEditable
       ref="textarea"
       v-model="newComment"
+      class="comment-input"
       :placeholder="placeholder"
-      max-rows="10"
-      :class="{ short: isOneLine && !newComment.includes('\n') }"
-      @focus="textareaFocus = true"
-      @blur="textareaFocus = false"
+      @focus="isTextareaActive = true"
     />
-    <template v-if="textareaFocus">
-      <p
-        class="d-flex justify-content-end h6"
-        :class="{ 'text-danger': !validComment }"
-      >
-        {{ countComment + " / " + maxComment }}
-      </p>
-      <div class="d-flex justify-content-end mt-1">
+    <div v-if="isTextareaActive" class="d-flex justify-content-between mt-1">
+      <ClassicEmojiPicker
+        popover-relative-class="page-element"
+        @emoji-selected="addEmojiSelected"
+      />
+      <div class="d-flex ms-auto">
+        <p
+          class="d-flex justify-content-end h6 me-3"
+          :class="{ 'text-danger': !commentTooLong }"
+        >
+          {{ countComment + " / " + maxComment }}
+        </p>
         <button class="btn me-2" @mousedown="cancelAction">
           {{ $t("Cancel") }}
         </button>
         <button
           class="btn btn-primary"
-          :disabled="0 === countComment || !validComment"
+          :disabled="0 === countComment || !commentTooLong"
           @mousedown="requestToSend"
         >
           {{ placeholder }}
         </button>
       </div>
-    </template>
-    <AddCommentModal
-      v-if="checkIdentityModal"
+    </div>
+    <CheckIdentityModal
+      v-if="isCheckIdentity"
       @validate="postComment"
-      @close="checkIdentityModal = false"
+      @close="isCheckIdentity = false"
     />
     <MessageModal
       v-if="postError"
@@ -78,52 +49,58 @@
 </template>
 
 <script lang="ts">
-import octopusApi from "@saooti/octopus-api";
 import crudApi from "@/api/classicCrud";
+import octopusApi from "@saooti/octopus-api";
 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 { CommentCreate, 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"),
+import { useCommentStore } from "@/stores/CommentStore";
+import { usePlayerStore } from "@/stores/PlayerStore";
+const CheckIdentityModal = defineAsyncComponent(
+  () => import("./modal/CheckIdentityModal.vue"),
 );
+const CommentName = defineAsyncComponent(() => import("./CommentName.vue"));
 const MessageModal = defineAsyncComponent(
   () => import("../../misc/modal/MessageModal.vue"),
 );
+const ClassicEmojiPicker = defineAsyncComponent(
+  () => import("../../form/ClassicEmojiPicker.vue"),
+);
+const ClassicContentEditable = defineAsyncComponent(
+  () => import("../../form/ClassicContentEditable.vue"),
+);
 export default defineComponent({
   name: "CommentInput",
   components: {
-    AddCommentModal,
+    CheckIdentityModal,
     MessageModal,
+    ClassicEmojiPicker,
+    ClassicContentEditable,
+    CommentName,
   },
   mixins: [cookies],
 
   props: {
     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 },
+    inAnswerComment: {
+      default: undefined,
+      type: Object as () => CommentPodcast,
+    },
   },
-  emits: ["update:knownIdentity", "cancelAction", "newComment"],
+  emits: ["cancelAction", "newComment"],
 
   data() {
     return {
       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,
+      isTextareaActive: false as boolean,
+      isCheckIdentity: false as boolean,
+      postError: false as boolean,
     };
   },
 
@@ -134,117 +111,76 @@ export default defineComponent({
       "playerElapsed",
       "playerTotal",
     ]),
-    ...mapState(useAuthStore, ["authProfile"]),
-    validName(): boolean {
-      return this.countName <= this.maxName;
-    },
-    countName(): number {
-      return this.temporaryName.length;
-    },
-    validComment(): boolean {
+    ...mapState(useCommentStore, ["commentUser"]),
+    commentTooLong(): boolean {
       return this.countComment <= this.maxComment;
     },
     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)
-      );
+    authenticated(): boolean {
+      return state.generalParameters.authenticated as boolean;
     },
     placeholder(): string {
-      return this.comment?.comId
+      return this.inAnswerComment?.commentId
         ? 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
-      );
-    },
-    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
-      )
-        return "Podcast";
-      if (
-        this.fetchConference &&
-        ("PLANNED" === this.fetchConference.status ||
-          "PENDING" === this.fetchConference.status)
-      )
-        return "Prelive";
-      return "Live";
-    },
-    podcastOrga(): string | undefined {
-      const commentOrga = this.comment?.organisationId ?? "";
-      return this.podcast?.organisation.id ?? commentOrga;
-    },
   },
   watch: {
-    textareaFocus(): void {
-      this.newComment = this.newComment.trim();
-    },
     focus(): void {
       (this.$refs.textarea as HTMLElement).focus();
     },
-    newComment(): void {
-      const padding =
-        1.5 * parseFloat(getComputedStyle(document.documentElement).fontSize);
-      this.isOneLine =
-        (this.$refs.textarea as HTMLElement).clientWidth -
-          this.inputExceeded(
-            this.newComment,
-            "18px Montserrat, sans-serif, Helvetica Neue",
-          ) >
-        padding;
-    },
   },
   methods: {
-    changeIdentity(): void {
-      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.editName = false;
-    },
-    inputExceeded(text: string, font: string): number {
-      const context = document.createElement("canvas").getContext("2d");
-      if (null === context) {
-        return 0;
-      }
-      context.font = font;
-      return context.measureText(text).width;
+    addEmojiSelected(emoji: string) {
+      this.newComment += emoji;
     },
     requestToSend(): void {
-      if (this.knownIdentity) {
+      if (this.commentUser?.name) {
         this.postComment();
       } else {
-        this.checkIdentityModal = true;
+        this.isCheckIdentity = true;
       }
     },
     cancelAction(): void {
+      this.newComment = "";
+      this.isTextareaActive = false;
       this.$emit("cancelAction");
     },
+    async postComment(): Promise<void> {
+      const comment: CommentCreate = {
+        answerTo: this.inAnswerComment?.commentId,
+        content: this.newComment.trim(),
+        name: this.commentUser?.name ?? "",
+        podcastId:
+          this.podcast?.podcastId ?? this.inAnswerComment?.podcastId ?? 0,
+        uuid: this.commentUser?.uuid ?? "",
+        timeline: this.defineTimelineValue(),
+      };
+      try {
+        var commentReceived;
+        if (!this.authenticated) {
+          commentReceived = await octopusApi.postDataPublic<CommentPodcast>(
+            2,
+            "comment/",
+            comment,
+          );
+        } else {
+          commentReceived = await crudApi.postData<CommentPodcast>(
+            2,
+            "comment/",
+            comment,
+          );
+        }
+        this.$emit("newComment", commentReceived);
+        this.newComment = "";
+        this.isTextareaActive = false;
+      } catch (error) {
+        this.postError = true;
+      }
+      this.isCheckIdentity = false;
+    },
     defineTimelineValue(): number {
       let timeline = 0;
       if (
@@ -261,75 +197,23 @@ export default defineComponent({
       }
       return timeline < 0 ? 0 : timeline;
     },
-    async postComment(name?: string): Promise<void> {
-      if (name) {
-        this.setCookie("comment-octopus-name", name);
-        this.$emit("update:knownIdentity", name);
-      }
-      const sendName = name ?? this.knownIdentity;
-      const commentPodcastId = this.comment?.podcastId ?? 0;
-      const comment: CommentPodcast = {
-        content: this.newComment,
-        name: sendName ?? "",
-        podcastId: this.podcast?.podcastId ?? commentPodcastId,
-        timeline: this.defineTimelineValue(),
-        organisationId: this.podcastOrga,
-        commentIdReferer: this.comment?.comId,
-        certified: this.isCertified,
-        userId: this.authProfile?.userId,
-        phase: this.phase,
-      };
-      try {
-        let data;
-        if (this.isCertified) {
-          comment.status = "Valid";
-          data = await crudApi.postData<CommentPodcast>(
-            2,
-            "registeredComment/" + comment.userId,
-            { ...comment, ...{ userId: undefined } },
-          );
-        } else {
-          data = await octopusApi.postDataPublic<CommentPodcast>(
-            2,
-            "unregisteredComment",
-            comment,
-          );
-        }
-        this.$emit("newComment", data);
-        this.newComment = "";
-      } catch (error) {
-        this.postError = true;
-      }
-      this.checkIdentityModal = false;
-    },
   },
 });
 </script>
 
 <style lang="scss">
 @import "@scss/_variables.scss";
-.octopus-app {
-  .comment-input-container {
-    textarea::placeholder {
-      color: $octopus-primary-color;
-    }
-    textarea:focus::placeholder {
-      color: black;
-    }
-    textarea {
-      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;
-      resize: none;
-      &.short {
-        max-height: 38px;
-      }
-    }
+.octopus-app .comment-input-container {
+  .comment-input {
+    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;
+    min-height: 36px;
+    resize: none;
   }
 }
 </style>