@saooti/octopus-sdk 40.2.19 → 41.0.0

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

@@ -32,60 +32,48 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { CommentPodcast } from "@/stores/class/general/comment";
 import {useSelenium} from "../../composable/useSelenium";
 import { usePlayerStore } from "../../../stores/PlayerStore";
-import { mapActions, mapState } from "pinia";
-import { defineComponent } from "vue";
+import { computed, Ref, ref, watch } from "vue";
 import { useCommentStore } from "../../../stores/CommentStore";
-export default defineComponent({
-  name: "CommentPlayer",
-  setup(){
-    const { seleniumFormat } = useSelenium();
-    return { seleniumFormat }
-  },
-  data() {
-    return {
-      displayContent: undefined as CommentPodcast | undefined,
-      commentsToDisplay: [] as Array<CommentPodcast>,
-    };
-  },
-  computed: {
-    ...mapState(usePlayerStore, ["playerPodcast", "playerTotal"]),
-    podcastId() {
-      return this.playerPodcast?.podcastId;
-    },
-  },
-  watch: {
-    podcastId: {
-      immediate: true,
-      handler() {
-        this.initComments();
-      },
-    },
-  },
-  methods: {
-    ...mapActions(useCommentStore, ["fetchCommentsForPlayer"]),
-    async initComments() {
-      if (this.playerPodcast?.podcastId) {
-        this.commentsToDisplay = await this.fetchCommentsForPlayer(
-          this.playerPodcast.podcastId,
-        );
-      }
-    },
-    percentPosition(time: number): number {
-      let realDuration = this.playerTotal;
-      if (this.playerPodcast?.duration) {
-        realDuration = Math.round(this.playerPodcast.duration / 1000);
-      }
-      if (realDuration < this.playerTotal) {
-        time = time + (this.playerTotal - realDuration);
-      }
-      return Math.round((time * 100) / this.playerTotal);
-    },
-  },
-});
+
+//Data 
+const displayContent: Ref<CommentPodcast | undefined> = ref(undefined);
+const commentsToDisplay: Ref<Array<CommentPodcast>> = ref([]);
+
+//Composables
+const { seleniumFormat } = useSelenium();
+const playerStore = usePlayerStore();
+const commentStore = useCommentStore();
+
+//Computed
+const podcastId = computed(() => playerStore.playerPodcast?.podcastId);
+
+
+//Watch
+watch(podcastId, () => {initComments()}, {immediate: true});
+
+
+//Methods
+async function initComments() {
+  if (playerStore.playerPodcast?.podcastId) {
+    commentsToDisplay.value = await commentStore.fetchCommentsForPlayer(
+      playerStore.playerPodcast.podcastId,
+    );
+  }
+}
+function percentPosition(time: number): number {
+  let realDuration = playerStore.playerTotal;
+  if (playerStore.playerPodcast?.duration) {
+    realDuration = Math.round(playerStore.playerPodcast.duration / 1000);
+  }
+  if (realDuration < playerStore.playerTotal) {
+    time = time + (playerStore.playerTotal - realDuration);
+  }
+  return Math.round((time * 100) / playerStore.playerTotal);
+}
 </script>
 
 <style lang="scss">

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

@@ -3,9 +3,9 @@
     <div class="d-flex align-items-center">
       <component 
         :is="inStudio? 'div':'h3'" 
-        :class="inStudio? 'm-1 fw-bold':'mb-0 me-2'">{{ $t("Podcast's comments") }}</component>
+        :class="inStudio? 'm-1 fw-bold':'mb-0 me-2'">{{ t("Podcast's comments") }}</component>
       <button
-        :title="$t('Refresh')"
+        :title="t('Refresh')"
         class="btn btn-transparent"
         @click="reload = !reload"
       >
@@ -30,11 +30,10 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RefreshIcon from "vue-material-design-icons/Refresh.vue";
 import { Podcast } from "@/stores/class/general/podcast";
-import { defineAsyncComponent, defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { computed, defineAsyncComponent, onBeforeMount, ref, Ref, watch } from "vue";
 import { useCommentStore } from "../../../stores/CommentStore";
 import { useAuthStore } from "../../../stores/AuthStore";
 import {
@@ -42,105 +41,88 @@ import {
   CommentsConfig,
 } from "@/stores/class/config/commentsConfig";
 import { CommentPodcast } from "@/stores/class/general/comment";
+import { useI18n } from "vue-i18n";
 const CommentList = defineAsyncComponent(() => import("./CommentList.vue"));
 const CommentInput = defineAsyncComponent(() => import("./CommentInput.vue"));
-export default defineComponent({
-  name: "CommentSection",
-  components: {
-    CommentList,
-    CommentInput,
-    RefreshIcon,
-  },
-  props: {
-    podcast: { default: undefined, type: Object as () => Podcast },
-    inStudio: { default: false, type: Boolean },
-    stateFilter: { default: "", type: String },
-  },
-  emits:['commentReceived'],
-  data() {
-    return {
-      reload: false as boolean,
-      configPodcast: undefined as CommentsConfig | undefined,
-      nbComments: 0 as number,
-      eventToHandle: undefined as CommentMessage | undefined,
-    };
-  },
-  computed: {
-    ...mapState(useCommentStore, [
-      "commentEventToHandle",
-      "commentInitialized",
-      "commentPodcastId",
-    ]),
-    ...mapState(useAuthStore, ["authOrgaId"]),
-    displayCommentSection(): boolean {
-      return this.canPostComment || this.nbComments > 0;
-    },
-    canPostComment(): boolean {
-      return this.getCanPostComment(
-        this.configPodcast,
-        this.podcast,
-        undefined !== this.authOrgaId,
-      );
-    },
-    eventActive(): boolean {
-      return undefined !== this.podcast?.conferenceId;
-    },
-  },
-  watch: {
-    commentEventToHandle: {
-      deep: true,
-      handler(): void {
-        if (
-          !this.commentEventToHandle.length ||
-          this.commentPodcastId !== this.podcast?.podcastId
-        ){
-          return;
-        }
-        this.eventToHandle = this.commentEventToHandle[0];
-        this.commentEventHandled();
-        this.$emit('commentReceived');
-      },
-    },
-  },
-  created() {
-    this.fetchPodcastCommentsConfig();
-  },
-  methods: {
-    ...mapActions(useCommentStore, [
-      "getCommentsConfig",
-      "getCanPostComment",
-      "commentEventHandled",
-      "initialize",
-      "initComments",
-    ]),
-    async fetchPodcastCommentsConfig() {
-      if (!this.podcast?.podcastId) {
-        return;
-      }
-      this.configPodcast = await this.getCommentsConfig(this.podcast);
-      if (!this.eventActive) {
-        return;
-      }
-      this.initLiveComments();
-    },
-    async initLiveComments(): Promise<void> {
-      if (!this.podcast?.podcastId || !this.podcast?.organisation.id) {
-        return;
-      }
-      if (!this.commentInitialized) {
-        await this.initialize();
-      }
-      await this.initComments(
-        this.podcast.podcastId,
-        this.podcast.organisation.id,
-      );
-    },
-    newComment(comment: CommentPodcast) {
-      if (this.eventActive) {
-        return;
-      }
-      this.eventToHandle = { type: "CREATE", comment: comment };
-    },
-  },
+
+//Props 
+const props = defineProps({
+  podcast: { default: undefined, type: Object as () => Podcast },
+  inStudio: { default: false, type: Boolean },
+  stateFilter: { default: "", type: String },
+})
+
+//Emits
+const emit = defineEmits(["commentReceived"]);
+
+//Data 
+const reload = ref(false);
+const configPodcast: Ref<CommentsConfig | undefined> = ref(undefined);
+const nbComments = ref(0);
+const eventToHandle: Ref<CommentMessage | undefined> = ref(undefined);
+
+//Composables
+const { t } = useI18n();
+const commentStore = useCommentStore();
+const authStore = useAuthStore();
+
+
+//Computed
+const displayCommentSection = computed(() => canPostComment.value || nbComments.value > 0);
+const canPostComment = computed(() => {
+  return commentStore.getCanPostComment(
+    configPodcast.value,
+    props.podcast,
+    undefined !== authStore.authOrgaId,
+  );
 });
+const eventActive = computed(() =>  undefined !== props.podcast?.conferenceId);
+
+
+//Watch
+watch(()=>commentStore.commentEventToHandle, async () => {
+  if (
+    !commentStore.commentEventToHandle.length ||
+    commentStore.commentPodcastId !== props.podcast?.podcastId
+  ){
+    return;
+  }
+  eventToHandle.value = commentStore.commentEventToHandle[0];
+  commentStore.commentEventHandled();
+  emit('commentReceived');
+}, {deep: true});
+
+
+onBeforeMount(()=>fetchPodcastCommentsConfig())
+
+
+//Methods
+async function fetchPodcastCommentsConfig() {
+  if (!props.podcast?.podcastId) {
+    return;
+  }
+  configPodcast.value = await commentStore.getCommentsConfig(props.podcast);
+  if (!eventActive.value) {
+    return;
+  }
+  initLiveComments();
+}
+async function initLiveComments(): Promise<void> {
+  if (!props.podcast?.podcastId || !props.podcast?.organisation.id) {
+    return;
+  }
+  if (!commentStore.commentInitialized) {
+    await commentStore.initialize();
+  }
+  await commentStore.initComments(
+    props.podcast.podcastId,
+    props.podcast.organisation.id,
+  );
+}
+function newComment(comment: CommentPodcast) {
+  if (eventActive.value) {
+    return;
+  }
+  eventToHandle.value = { type: "CREATE", comment: comment };
+}
 </script>

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

@@ -9,7 +9,7 @@
       <ClassicPopover
         :disable="isValidComment"
         :target="'popover-comment' + comment.commentId"
-        :content="$t('Comment waiting')"
+        :content="t('Comment waiting')"
       />
       <time :datetime="comment.date" class="me-2">
         {{ date }}
@@ -19,7 +19,7 @@
         class="d-flex align-items-center text-danger me-2"
       >
         <AlertIcon :size="16" class="me-1" />
-        {{ $t("abuse denounced", { nb: comment.abuse }) }}
+        {{ t("abuse denounced", { nb: comment.abuse }) }}
       </div>
       <span v-if="editRight" :class="'status-' + comment.state" />
     </div>
@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import AlertIcon from "vue-material-design-icons/Alert.vue";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -43,67 +43,54 @@ dayjs.extend(relativeTime);
 import displayHelper from "../../../../helper/displayHelper";
 import { CommentPodcast } from "@/stores/class/general/comment";
 import ClassicPopover from "../../../misc/ClassicPopover.vue";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "CommentBasicView",
+import { computed, onMounted, onUnmounted, Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";
 
-  components: {
-    ClassicPopover,
-    AlertIcon,
-  },
+//Props 
+const props = defineProps({
+  comment: { default: () => ({}), type: Object as () => CommentPodcast },
+  editRight: { default: false, type: Boolean },
+})
 
-  props: {
-    comment: { default: () => ({}), type: Object as () => CommentPodcast },
-    editRight: { default: false, type: Boolean },
-  },
-  data() {
-    return {
-      displayPreview: true as boolean,
-      dateInterval: undefined as ReturnType<typeof setTimeout> | undefined,
-      date: "" as string,
-    };
-  },
-  computed: {
-    commentTooLong() {
-      return this.comment.content.length > 300;
-    },
-    username(): string {
-      return this.comment.poster.userName;
-    },
-    isValidComment() {
-      return "VALIDATED" === this.comment.state;
-    },
-    readMore(): string {
-      return this.displayPreview ? this.$t("Read more") : this.$t("Read less");
-    },
-    contentDisplay(): string {
-      if (!this.displayPreview || !this.commentTooLong) {
-        return this.comment.content;
-      }
-      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: {
-    urlify(text:string|undefined){
-      return displayHelper.urlify(text);
-    },
-    defineDateFromNow() {
-      if (!this.comment.date) {
-        this.date = "";
-      }
-      this.date = dayjs(this.comment.date).fromNow();
-    },
-  },
+//Data 
+const displayPreview = ref(true);
+const date = ref("");
+const dateInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
+
+ //Composables
+const { t } = useI18n();
+
+//Computed
+const commentTooLong = computed(() => props.comment.content.length > 300);
+const username = computed(() => props.comment.poster.userName);
+const isValidComment = computed(() => "VALIDATED" === props.comment.state);
+const readMore = computed(() => displayPreview.value ? t("Read more") : t("Read less"));
+const contentDisplay = computed(() => {
+  if (!displayPreview.value || !commentTooLong.value) {
+    return props.comment.content;
+  }
+  return props.comment.content.substring(0, 300) + "...";
 });
+
+onMounted(()=>{
+  defineDateFromNow();
+  dateInterval.value = setInterval(() => {
+    defineDateFromNow();
+  }, 60000);
+})
+ 
+onUnmounted(()=>clearInterval(dateInterval.value as unknown as number))
+
+//Methods
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
+function defineDateFromNow() {
+  if (!props.comment.date) {
+    date.value = "";
+  }
+  date.value = dayjs(props.comment.date).fromNow();
+}
 </script>
 <style lang="scss">
 @use "../../../../style/comments";