{"version":3,"file":"CommentInput-D3B_XMti.mjs","names":[],"sources":["../src/components/display/comments/CommentInput.vue","../src/components/display/comments/CommentInput.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex flex-column comment-input-container mt-3\">\n    <CommentName v-if=\"commentStore.commentUser?.name\" />\n    <ClassicContentEditable\n      ref=\"textarea\"\n      v-model=\"newComment\"\n      class=\"comment-input\"\n      :placeholder=\"placeholder\"\n      @focus=\"isTextareaActive = true\"\n    />\n    <div v-if=\"isTextareaActive\" class=\"d-flex justify-content-between mt-1\">\n      <ClassicEmojiPicker\n        :id=\"uniqueId\"\n        popover-relative-class=\"page-element\"\n        @emoji-selected=\"addEmojiSelected\"\n      />\n      <div class=\"d-flex ms-auto\">\n        <p\n          class=\"d-flex justify-content-end h6 me-3\"\n          :class=\"{ 'text-danger': !commentTooLong }\"\n        >\n          {{ countComment + \" / \" + maxComment }}\n        </p>\n        <button class=\"btn me-2\" @mousedown=\"cancelAction\">\n          {{ t(\"Cancel\") }}\n        </button>\n        <button\n          class=\"btn btn-primary\"\n          :disabled=\"0 === countComment || !commentTooLong\"\n          @mousedown=\"requestToSend\"\n        >\n          {{ placeholder }}\n        </button>\n      </div>\n    </div>\n    <CheckIdentityModal\n      v-if=\"isCheckIdentity\"\n      @validate=\"postComment\"\n      @close=\"isCheckIdentity = false\"\n    />\n    <MessageModal\n      v-if=\"postError\"\n      :validatetext=\"t('Close')\"\n      :title=\"t('Error')\"\n      :message=\"t('Error occurs while post your comment...')\"\n      @close=\"postError = false\"\n      @validate=\"postError = false\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport classicApi from \"../../../api/classicApi\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { CommentPodcast } from \"@/stores/class/general/comment\";\nimport Constants from \"../../../../public/config\";\nimport { defineAsyncComponent, ref, computed, watch, useTemplateRef } from \"vue\";\nimport { useCommentStore } from \"../../../stores/CommentStore\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\nconst CheckIdentityModal = defineAsyncComponent(\n  () => import(\"./modal/CheckIdentityModal.vue\"),\n);\nconst CommentName = defineAsyncComponent(() => import(\"./CommentName.vue\"));\nconst MessageModal = defineAsyncComponent(\n  () => import(\"../../misc/modal/MessageModal.vue\"),\n);\nconst ClassicEmojiPicker = defineAsyncComponent(\n  () => import(\"../../form/ClassicEmojiPicker.vue\"),\n);\nconst ClassicContentEditable = defineAsyncComponent(\n  () => import(\"../../form/ClassicContentEditable.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  focus: { default: false, type: Boolean },\n  inAnswerComment: {\n    default: undefined,\n    type: Object as () => CommentPodcast,\n  },\n})\n\n//Emits\nconst emit = defineEmits([\"cancelAction\", \"newComment\"]);\n\n//Data \nconst maxComment = Constants.MAX_COMMENT;\nconst newComment = ref(\"\");\nconst isTextareaActive = ref(false);\nconst isCheckIdentity = ref(false);\nconst postError = ref(false);\nconst textareaRef = useTemplateRef('textarea');\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst commentStore = useCommentStore();\nconst authStore = useAuthStore();\n\n//Computed\nconst commentTooLong = computed(() => countComment.value <= maxComment);\nconst countComment = computed(() => newComment.value.length);\nconst placeholder = computed(() => props.inAnswerComment?.commentId? t(\"Answer a comment\"): t(\"Write a comment\"));\nconst uniqueId = computed(() => \"-comment\"+(props.inAnswerComment?.commentId??\"-parent\"));\n\n\n//Watch\nwatch(()=>props.focus, () => textareaRef?.value?.focus());\n\n\n//Methods\nfunction addEmojiSelected(emoji: string) {\n  newComment.value += emoji;\n}\nfunction requestToSend(): void {\n  if (commentStore.commentUser?.name) {\n    postComment();\n  } else {\n    isCheckIdentity.value = true;\n  }\n}\nfunction cancelAction(): void {\n  newComment.value = \"\";\n  isTextareaActive.value = false;\n  emit(\"cancelAction\");\n}\nasync function postComment(): Promise<void> {\n  try {\n    const commentReceived = await classicApi.postData<CommentPodcast>({\n      api: 2,\n      path: \"comment/\",\n      dataToSend: {\n        answerTo: props.inAnswerComment?.commentId,\n        content: newComment.value.trim(),\n        name: commentStore.commentUser?.name ?? \"\",\n        podcastId:\n          props.podcast?.podcastId ?? props.inAnswerComment?.podcastId ?? 0,\n        uuid: commentStore.commentUser?.uuid ?? \"\",\n        timeline: defineTimelineValue(),\n      },\n      isNotAuth: undefined === authStore.authOrgaId,\n    });\n    emit(\"newComment\", commentReceived);\n    newComment.value = \"\";\n    isTextareaActive.value = false;\n  } catch {\n    postError.value = true;\n  }\n  isCheckIdentity.value = false;\n}\nfunction defineTimelineValue(): number {\n  let timeline = 0;\n  if (\n    undefined !== props.podcast &&\n    (playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playerStore.playerLive?.podcastId === props.podcast.podcastId)\n  ) {\n    timeline = Math.round(playerStore.playerElapsed * playerStore.playerTotal);\n    if (props.podcast.duration && playerStore.playerPodcast) {\n      timeline = Math.round(\n        timeline - (playerStore.playerTotal - props.podcast.duration / 1000),\n      );\n    }\n  }\n  return timeline < 0 ? 0 : timeline;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app .comment-input-container {\n  .comment-input {\n    border-bottom: 0.1rem solid var(--octopus-border-default);\n    overflow: hidden;\n    min-height: 36px;\n    resize: none;\n  }\n}\n</style>\n","<template>\n  <div class=\"d-flex flex-column comment-input-container mt-3\">\n    <CommentName v-if=\"commentStore.commentUser?.name\" />\n    <ClassicContentEditable\n      ref=\"textarea\"\n      v-model=\"newComment\"\n      class=\"comment-input\"\n      :placeholder=\"placeholder\"\n      @focus=\"isTextareaActive = true\"\n    />\n    <div v-if=\"isTextareaActive\" class=\"d-flex justify-content-between mt-1\">\n      <ClassicEmojiPicker\n        :id=\"uniqueId\"\n        popover-relative-class=\"page-element\"\n        @emoji-selected=\"addEmojiSelected\"\n      />\n      <div class=\"d-flex ms-auto\">\n        <p\n          class=\"d-flex justify-content-end h6 me-3\"\n          :class=\"{ 'text-danger': !commentTooLong }\"\n        >\n          {{ countComment + \" / \" + maxComment }}\n        </p>\n        <button class=\"btn me-2\" @mousedown=\"cancelAction\">\n          {{ t(\"Cancel\") }}\n        </button>\n        <button\n          class=\"btn btn-primary\"\n          :disabled=\"0 === countComment || !commentTooLong\"\n          @mousedown=\"requestToSend\"\n        >\n          {{ placeholder }}\n        </button>\n      </div>\n    </div>\n    <CheckIdentityModal\n      v-if=\"isCheckIdentity\"\n      @validate=\"postComment\"\n      @close=\"isCheckIdentity = false\"\n    />\n    <MessageModal\n      v-if=\"postError\"\n      :validatetext=\"t('Close')\"\n      :title=\"t('Error')\"\n      :message=\"t('Error occurs while post your comment...')\"\n      @close=\"postError = false\"\n      @validate=\"postError = false\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport classicApi from \"../../../api/classicApi\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { CommentPodcast } from \"@/stores/class/general/comment\";\nimport Constants from \"../../../../public/config\";\nimport { defineAsyncComponent, ref, computed, watch, useTemplateRef } from \"vue\";\nimport { useCommentStore } from \"../../../stores/CommentStore\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\nconst CheckIdentityModal = defineAsyncComponent(\n  () => import(\"./modal/CheckIdentityModal.vue\"),\n);\nconst CommentName = defineAsyncComponent(() => import(\"./CommentName.vue\"));\nconst MessageModal = defineAsyncComponent(\n  () => import(\"../../misc/modal/MessageModal.vue\"),\n);\nconst ClassicEmojiPicker = defineAsyncComponent(\n  () => import(\"../../form/ClassicEmojiPicker.vue\"),\n);\nconst ClassicContentEditable = defineAsyncComponent(\n  () => import(\"../../form/ClassicContentEditable.vue\"),\n);\n\n//Props \nconst props = defineProps({\n  podcast: { default: undefined, type: Object as () => Podcast },\n  focus: { default: false, type: Boolean },\n  inAnswerComment: {\n    default: undefined,\n    type: Object as () => CommentPodcast,\n  },\n})\n\n//Emits\nconst emit = defineEmits([\"cancelAction\", \"newComment\"]);\n\n//Data \nconst maxComment = Constants.MAX_COMMENT;\nconst newComment = ref(\"\");\nconst isTextareaActive = ref(false);\nconst isCheckIdentity = ref(false);\nconst postError = ref(false);\nconst textareaRef = useTemplateRef('textarea');\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst commentStore = useCommentStore();\nconst authStore = useAuthStore();\n\n//Computed\nconst commentTooLong = computed(() => countComment.value <= maxComment);\nconst countComment = computed(() => newComment.value.length);\nconst placeholder = computed(() => props.inAnswerComment?.commentId? t(\"Answer a comment\"): t(\"Write a comment\"));\nconst uniqueId = computed(() => \"-comment\"+(props.inAnswerComment?.commentId??\"-parent\"));\n\n\n//Watch\nwatch(()=>props.focus, () => textareaRef?.value?.focus());\n\n\n//Methods\nfunction addEmojiSelected(emoji: string) {\n  newComment.value += emoji;\n}\nfunction requestToSend(): void {\n  if (commentStore.commentUser?.name) {\n    postComment();\n  } else {\n    isCheckIdentity.value = true;\n  }\n}\nfunction cancelAction(): void {\n  newComment.value = \"\";\n  isTextareaActive.value = false;\n  emit(\"cancelAction\");\n}\nasync function postComment(): Promise<void> {\n  try {\n    const commentReceived = await classicApi.postData<CommentPodcast>({\n      api: 2,\n      path: \"comment/\",\n      dataToSend: {\n        answerTo: props.inAnswerComment?.commentId,\n        content: newComment.value.trim(),\n        name: commentStore.commentUser?.name ?? \"\",\n        podcastId:\n          props.podcast?.podcastId ?? props.inAnswerComment?.podcastId ?? 0,\n        uuid: commentStore.commentUser?.uuid ?? \"\",\n        timeline: defineTimelineValue(),\n      },\n      isNotAuth: undefined === authStore.authOrgaId,\n    });\n    emit(\"newComment\", commentReceived);\n    newComment.value = \"\";\n    isTextareaActive.value = false;\n  } catch {\n    postError.value = true;\n  }\n  isCheckIdentity.value = false;\n}\nfunction defineTimelineValue(): number {\n  let timeline = 0;\n  if (\n    undefined !== props.podcast &&\n    (playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playerStore.playerLive?.podcastId === props.podcast.podcastId)\n  ) {\n    timeline = Math.round(playerStore.playerElapsed * playerStore.playerTotal);\n    if (props.podcast.duration && playerStore.playerPodcast) {\n      timeline = Math.round(\n        timeline - (playerStore.playerTotal - props.podcast.duration / 1000),\n      );\n    }\n  }\n  return timeline < 0 ? 0 : timeline;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app .comment-input-container {\n  .comment-input {\n    border-bottom: 0.1rem solid var(--octopus-border-default);\n    overflow: hidden;\n    min-height: 36px;\n    resize: none;\n  }\n}\n</style>\n"],"mappings":"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"}