@saooti/octopus-sdk 39.1.1-beta → 39.1.2-SNAPSHOT

package/index.ts

@@ -14,6 +14,7 @@ export const getCategory = () => import("./src/components/pages/CategoryPage.vue
 export const getRubrique = () => import("./src/components/pages/RubriquePage.vue");
 export const getError403Page = () => import("./src/components/pages/Error403Page.vue");
 export const getRadio = () => import("./src/components/pages/RadioPage.vue");
+export const getVideo = () => import("./src/components/pages/VideoPage.vue");
 
 //Misc
 export const getAccordion = () => import("./src/components/misc/ClassicAccordion.vue");
@@ -33,6 +34,7 @@ export const getClassicModal = () => import("./src/components/misc/modal/Classic
 export const getClassicLazy = () => import("./src/components/misc/ClassicLazy.vue");
 
 
+
 //Display
 export const getCategoryChooser = () => import("./src/components/display/categories/CategoryChooser.vue");
 export const getCategoryList = () => import("./src/components/display/categories/CategoryList.vue");
@@ -49,6 +51,9 @@ export const getCommentList = () => import("./src/components/display/comments/Co
 export const getCommentInput = () => import("./src/components/display/comments/CommentInput.vue");
 export const getPodcastPlaylistInlineList = () => import("./src/components/display/playlist/PodcastPlaylistInlineList.vue");
 export const getLiveList = () => import("./src/components/display/live/LiveList.vue");
+export const getEmissionPresentationList = () => import("./src/components/display/emission/EmissionPresentationList.vue");
+export const getPodcastPlayButton = () => import("./src/components/display/podcasts/PodcastPlayButton.vue");
+
 
 
 //Radio
@@ -87,10 +92,23 @@ 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 debounce from "./src/components/mixins/debounce.ts";
+
+
+//helper
+import domHelper from "./src/helper/dom.ts";
+import durationHelper from "./src/helper/duration.ts";
+import stringHelper from "./src/helper/string.ts";
+
 
+//stores
+import {useVastStore} from "./src/stores/VastStore.ts";
+import {useSaveFetchStore} from "./src/stores/SaveFetchStore.ts";
+import {usePlayerStore} from "./src/stores/PlayerStore.ts";
+import {useGeneralStore} from "./src/stores/GeneralStore.ts";
+import {useFilterStore} from "./src/stores/FilterStore.ts";
+import {useCommentStore} from "./src/stores/CommentStore.ts";
 
-import TopBar from "./src/components/misc/TopBar.vue";
 
 export {
     selenium,
@@ -101,6 +119,14 @@ export {
     initSDK,
     tagOfMixins,
     resizePhone,
-    commentWebsocket,
-    TopBar
+    debounce,
+    useVastStore,
+    useSaveFetchStore,
+    usePlayerStore,
+    useGeneralStore,
+    useFilterStore,
+    useCommentStore,
+    domHelper,
+    durationHelper,
+    stringHelper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.1.1-beta",
+  "version": "39.1.2-SNAPSHOT",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -14,9 +14,11 @@
     "test": "jest --coverage"
   },
   "dependencies": {
+    "@multiformats/murmur3": "^2.1.8",
     "@popperjs/core": "^2.11.8",
     "@saooti/octopus-api": "^0.39.2",
     "@stomp/stompjs": "^7.0.0",
+    "@tiptap/extension-hard-break": "^2.8.0",
     "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-underline": "^2.4.0",
     "@tiptap/pm": "^2.4.0",
@@ -54,8 +56,8 @@
     "vue3-swatches": "^1.2.4"
   },
   "devDependencies": {
-    "@types/vue-select": "^3.16.8",
     "@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",
     "@vitejs/plugin-vue": "^5.0.5",

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";
@@ -22,8 +21,8 @@ import { Rubriquage } from "./stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "./stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "./stores/class/rubrique/rubrique";
 import initSDK from "./components/mixins/init";
-import { useFilterStore } from "@/stores/FilterStore";
-import { useGeneralStore } from "@/stores/GeneralStore";
+import { useFilterStore } from "./stores/FilterStore";
+import { useGeneralStore } from "./stores/GeneralStore";
 import { mapState, mapActions } from "pinia";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { Category } from "./stores/class/general/category";

package/src/assets/general.scss

@@ -73,6 +73,9 @@ body{
 	.really-light-primary-bg{
 		background-color: $primaryColorReallyTransparent !important;
 	}
+  .blue-bg{
+    background-color: $blue-octopus;
+  }
   .width-fit-content{
     width: fit-content !important;
   }
@@ -81,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/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/categories/CategoryChooser.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import { useGeneralStore } from "@/stores/GeneralStore";
+import { useGeneralStore } from "../../../stores/GeneralStore";
 import { mapState } from "pinia";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
 import { Category } from "@/stores/class/general/category";

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

@@ -65,7 +65,7 @@
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
-import { useFilterStore } from "@/stores/FilterStore";
+import { useFilterStore } from "../../../stores/FilterStore";
 import { state } from "../../../stores/ParamSdkStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";

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

@@ -43,8 +43,8 @@ import octopusApi from "@saooti/octopus-api";
 import { state } from "../../../stores/ParamSdkStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Category } from "@/stores/class/general/category";
-import { useFilterStore } from "@/stores/FilterStore";
-import { useGeneralStore } from "@/stores/GeneralStore";
+import { useFilterStore } from "../../../stores/FilterStore";
+import { useGeneralStore } from "../../../stores/GeneralStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({

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

@@ -58,8 +58,8 @@ import { CommentCreate, CommentPodcast } from "@/stores/class/general/comment";
 import Constants from "../../../../public/config";
 import { mapState } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
-import { usePlayerStore } from "@/stores/PlayerStore";
+import { useCommentStore } from "../../../stores/CommentStore";
+import { usePlayerStore } from "../../../stores/PlayerStore";
 const CheckIdentityModal = defineAsyncComponent(
   () => import("./modal/CheckIdentityModal.vue"),
 );
@@ -160,7 +160,7 @@ export default defineComponent({
       };
       try {
         var commentReceived;
-        if (this.authenticated) {
+        if (!this.authenticated) {
           commentReceived = await octopusApi.postDataPublic<CommentPodcast>(
             2,
             "comment/",

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

@@ -2,9 +2,39 @@
   <div class="d-flex flex-column">
     <div
       v-if="isNotAnAnswerList && 0 !== totalCount"
-      class="text-secondary mb-2"
+      class="d-flex align-items-center mb-2"
     >
-      {{ $t("Number comments", { nb: totalCount }) }}
+      <div class="text-secondary me-3">
+        {{ $t("Number comments", { nb: totalCount }) }}
+      </div>
+      <button
+        id="sort-by-comments"
+        class="btn btn-transparent d-flex align-items-center"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="32"
+          height="32"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h4q.425 0 .713.288T9 17t-.288.713T8 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h10q.425 0 .713.288T15 12t-.288.713T14 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z"
+          />
+        </svg>
+        <p class="ms-1">{{ $t("Sort by") }}</p>
+      </button>
+      <ClassicPopover target="sort-by-comments" :only-click="true">
+        <button
+          v-for="sortOption in sortChoice"
+          :key="sortOption"
+          class="me-3 octopus-dropdown-item"
+          :disabled="sortOption.value === sortType"
+          @mousedown="changeSort(sortOption.value)"
+        >
+          {{ sortOption.title }}
+        </button>
+      </ClassicPopover>
     </div>
     <div v-if="!loading && !error && 0 === totalCount" class="text-center">
       {{ $t("No comments") }}
@@ -49,15 +79,20 @@ import {
   CommentMessage,
   CommentsConfig,
 } from "@/stores/class/config/commentsConfig";
+import { ListClassicReturn } from "@/stores/class/general/listReturn";
 /* eslint-disable */
 const CommentItem: any = defineAsyncComponent(() => import('./item/CommentItem.vue'));
 /* eslint-enable */
+const ClassicPopover = defineAsyncComponent(
+  () => import("../../misc/ClassicPopover.vue"),
+);
 export default defineComponent({
   name: "CommentsList",
 
   components: {
     ClassicLoading,
     CommentItem,
+    ClassicPopover,
   },
   mixins: [handle403],
 
@@ -77,13 +112,14 @@ export default defineComponent({
 
   data() {
     return {
-      loading: true as boolean,
+      loading: false as boolean,
       error: false as boolean,
       dfirst: 0 as number,
       dsize: this.size,
       totalCount: 0 as number,
       comments: [] as Array<CommentPodcast>,
       scrollableSection: undefined as HTMLElement | undefined,
+      sortType: "DATE_DESC" as string,
     };
   },
 
@@ -94,6 +130,12 @@ export default defineComponent({
     isNotAnAnswerList(): boolean {
       return undefined === this.answerToComment;
     },
+    sortChoice() {
+      return [
+        { title: this.$t("The most recent"), value: "DATE_DESC" },
+        { title: this.$t("Top comments"), value: "LIKE_DESC" },
+      ];
+    },
   },
   watch: {
     totalCount() {
@@ -148,6 +190,10 @@ export default defineComponent({
     }
   },
   methods: {
+    changeSort(sortType: string) {
+      this.sortType = sortType;
+      this.fetchContent(true);
+    },
     handleScroll() {
       if (
         this.scrollableSection &&
@@ -183,6 +229,9 @@ export default defineComponent({
       }
     },
     async fetchContent(reset: boolean): Promise<void> {
+      if (this.loading) {
+        return;
+      }
       this.loading = true;
       if (reset) {
         this.dfirst = 0;
@@ -192,18 +241,16 @@ export default defineComponent({
         first: this.dfirst,
         size: this.dsize,
         podcastId: this.podcast?.podcastId,
-        sort: "DATE_DESC",
+        sort: this.sortType,
         answerTo: this.answerToComment,
         hideAnswers: !this.isFlatList,
         state: this.stateFilter.length ? this.stateFilter : undefined,
         organisationId: this.organisationId,
       };
       try {
-        const data = await octopusApi.fetchDataPublicWithParams<{
-          count: number;
-          result: Array<CommentPodcast>;
-          sort: string;
-        }>(2, "comment/list", param);
+        const data = await octopusApi.fetchDataPublicWithParams<
+          ListClassicReturn<CommentPodcast>
+        >(2, "comment/list", param);
         if (reset) {
           this.comments.length = 0;
         }

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

@@ -42,7 +42,7 @@ import Constants from "../../../../public/config";
 import { useAuthStore } from "@/stores/AuthStore";
 import { mapActions, mapState } from "pinia";
 import { defineComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../stores/CommentStore";
 export default defineComponent({
   name: "CommentName",
   emits: [],

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

@@ -35,10 +35,10 @@
 <script lang="ts">
 import { CommentPodcast } from "@/stores/class/general/comment";
 import selenium from "../../mixins/selenium";
-import { usePlayerStore } from "@/stores/PlayerStore";
+import { usePlayerStore } from "../../../stores/PlayerStore";
 import { mapActions, mapState } from "pinia";
 import { defineComponent } from "vue";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../stores/CommentStore";
 export default defineComponent({
   name: "CommentPlayer",
   mixins: [selenium],

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

@@ -30,7 +30,7 @@ import cookies from "../../mixins/cookies";
 import { Podcast } from "@/stores/class/general/podcast";
 import { defineAsyncComponent, defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
-import { useCommentStore } from "@/stores/CommentStore";
+import { useCommentStore } from "../../../stores/CommentStore";
 import {
   CommentMessage,
   CommentsConfig,
@@ -69,9 +69,10 @@ export default defineComponent({
       return this.canPostComment || this.nbComments > 0;
     },
     canPostComment(): boolean {
-      return (
-        this.getCanPostComment(this.configPodcast, this.podcast) &&
-        this.authenticated
+      return this.getCanPostComment(
+        this.configPodcast,
+        this.podcast,
+        this.authenticated,
       );
     },
     eventActive(): boolean {
@@ -93,14 +94,12 @@ export default defineComponent({
     },
   },
   created() {
-    this.initCommentUser();
     this.fetchPodcastCommentsConfig();
   },
   methods: {
     ...mapActions(useCommentStore, [
       "getCommentsConfig",
       "getCanPostComment",
-      "initCommentUser",
       "commentEventHandled",
       "initialize",
       "initComments",

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

@@ -63,6 +63,8 @@ export default defineComponent({
   data() {
     return {
       displayPreview: true as boolean,
+      dateInterval: undefined as ReturnType<typeof setTimeout> | undefined,
+      date: "" as string,
     };
   },
   computed: {
@@ -75,12 +77,6 @@ export default defineComponent({
     isValidComment() {
       return "VALIDATED" === this.comment.state;
     },
-    date(): string {
-      if (!this.comment.date) {
-        return "";
-      }
-      return dayjs(this.comment.date).fromNow();
-    },
     readMore(): string {
       return this.displayPreview ? this.$t("Read more") : this.$t("Read less");
     },
@@ -91,6 +87,23 @@ export default defineComponent({
       return this.comment.content.substring(0, 300) + "...";
     },
   },
+  mounted() {
+    this.defineDateFromNow();
+    this.dateInterval = setInterval(() => {
+      this.defineDateFromNow();
+    }, 60000);
+  },
+  unmounted() {
+    clearInterval(this.dateInterval as unknown as number);
+  },
+  methods: {
+    defineDateFromNow() {
+      if (!this.comment.date) {
+        this.date = "";
+      }
+      this.date = dayjs(this.comment.date).fromNow();
+    },
+  },
 });
 </script>
 <style lang="scss">

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

@@ -3,37 +3,25 @@
     class="d-flex flex-column flex-grow-1 w-100 really-light-secondary-bg"
     :class="isAnAnswer && !isFlatList ? 'my-1 p-0' : 'my-3 p-2'"
   >
-    <CheckIdentityModal
-      v-if="isCheckIdentityActions"
-      :title="$t('Welcome, thanks for your interaction')"
-      @validate="likeActions(isCheckIdentityActions)"
-      @close="isCheckIdentityActions = undefined"
-    />
-    <div class="d-flex justify-content-between align-items-center">
+    <div class="d-flex flex-nowrap justify-content-between align-items-center">
       <CommentBasicView :comment="comment" :edit-right="editRight" />
       <CommentMoreActions
         v-model:comment="commentForVmodel"
         :edit-right="editRight"
         :podcast="podcast"
+        :config="config"
         @delete-comment="emitDeleteComment"
       />
     </div>
     <template v-if="isValidComment">
       <div class="d-flex align-items-center mt-1">
-        <template v-for="section in feelingSection" :key="section.name">
-          <template v-if="section.condition">
-            <CommentLikeButton
-              :like="'like' === section.name"
-              :is-active="section.name === userFeeling"
-              @like-action="initiateLikeActions"
-            />
-            <span v-if="section.counter" class="ms-1 me-2">{{
-              transformInThousands(section.counter)
-            }}</span>
-          </template>
-        </template>
+        <LikeSection
+          v-model:comment="commentForVmodel"
+          :edit-right="editRight"
+          :podcast="podcast"
+        />
         <button
-          v-if="!comment.answerTo"
+          v-if="!comment.answerTo && canPostComment"
           class="btn btn-transparent"
           @click="answerComment"
         >
@@ -52,7 +40,7 @@
         </button>
       </div>
       <CommentInput
-        v-if="isAnsweringComment"
+        v-if="isAnsweringComment && canPostComment"
         class="ms-4"
         :focus="focus"
         :podcast="podcast"
@@ -98,16 +86,12 @@
 <script lang="ts">
 import selenium from "../../../mixins/selenium";
 import displayMethods from "../../../mixins/displayMethods";
-import {
-  CommentFeelings,
-  CommentPodcast,
-} from "@/stores/class/general/comment";
+import { CommentPodcast } from "@/stores/class/general/comment";
 import { Podcast } from "../../../../stores/class/general/podcast";
 import CommentBasicView from "./CommentBasicView.vue";
-import { useCommentStore } from "@/stores/CommentStore";
-import { mapState } from "pinia";
+import { useCommentStore } from "../../../../stores/CommentStore";
+import { mapActions, mapState } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
-import octopusApi from "@saooti/octopus-api";
 import {
   CommentMessage,
   CommentsConfig,
@@ -117,11 +101,8 @@ const CommentInput = defineAsyncComponent(() => import("../CommentInput.vue"));
 const CommentParentInfo = defineAsyncComponent(
   () => import("../CommentParentInfo.vue"),
 );
-const CheckIdentityModal = defineAsyncComponent(
-  () => import("../modal/CheckIdentityModal.vue"),
-);
-const CommentLikeButton = defineAsyncComponent(
-  () => import("../button/CommentLikeButton.vue"),
+const LikeSection = defineAsyncComponent(
+  () => import("../like/LikeSection.vue"),
 );
 const CommentMoreActions = defineAsyncComponent(
   () => import("./CommentMoreActions.vue"),
@@ -135,8 +116,7 @@ export default defineComponent({
     CommentList,
     CommentParentInfo,
     CommentBasicView,
-    CheckIdentityModal,
-    CommentLikeButton,
+    LikeSection,
     CommentMoreActions,
   },
 
@@ -157,28 +137,12 @@ export default defineComponent({
       isAnsweringComment: false as boolean,
       showAnswers: false as boolean,
       focus: false as boolean,
-      isCheckIdentityActions: undefined as string | undefined,
-      userFeeling: undefined as string | undefined,
       showParentComment: false as boolean,
       eventToHandle: undefined as CommentMessage | undefined,
     };
   },
   computed: {
     ...mapState(useCommentStore, ["commentUser"]),
-    feelingSection() {
-      return [
-        {
-          name: "like",
-          counter: this.comment.likes,
-          condition: this.config?.commentLikes.likeEnabled ?? false,
-        },
-        {
-          name: "dislike",
-          counter: this.editRight ? this.comment.dislikes : 0,
-          condition: this.config?.commentLikes.dislikeEnabled ?? false,
-        },
-      ];
-    },
     commentForVmodel: {
       get(): CommentPodcast {
         return this.comment;
@@ -206,42 +170,22 @@ export default defineComponent({
     isValidComment() {
       return "VALIDATED" === this.comment.state;
     },
+    authenticated(): boolean {
+      return state.generalParameters.authenticated as boolean;
+    },
+    canPostComment(): boolean {
+      return this.getCanPostComment(
+        this.config,
+        this.podcast,
+        this.authenticated,
+      );
+    },
     eventActive(): boolean {
       return undefined !== this.podcast?.conferenceId;
     },
   },
   methods: {
-    transformInThousands(nb: number) {
-      if (nb >= 1000) {
-        return Math.round(nb / 100) / 10 + "k";
-      }
-      return nb.toString();
-    },
-    async initiateLikeActions(actionName: string) {
-      if (!this.commentUser?.name) {
-        this.isCheckIdentityActions = actionName;
-        return;
-      }
-      this.likeActions(actionName);
-    },
-    async likeActions(actionName: string) {
-      const data = await octopusApi.putDataPublic<{
-        [key: number]: CommentFeelings;
-      }>(2, "comment/" + actionName, {
-        ids: [this.comment.commentId],
-        name: this.commentUser?.name,
-        uuid: this.commentUser?.uuid,
-      });
-      this.$emit("update:comment", {
-        ...this.comment,
-        ...{
-          likes: data[this.comment.commentId].likesCount,
-          dislikes: data[this.comment.commentId].dislikesCount,
-        },
-      });
-      this.userFeeling = this.userFeeling ? undefined : actionName;
-      this.isCheckIdentityActions = undefined;
-    },
+    ...mapActions(useCommentStore, ["getCanPostComment"]),
     answerComment(): void {
       this.isAnsweringComment = true;
       this.focus = !this.focus;
@@ -288,13 +232,3 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss">
-.octopus-app {
-  .answers-section {
-    .btn.btn-primary {
-      align-self: start !important;
-      margin: 0.5rem 0 0 0 !important;
-    }
-  }
-}
-</style>