{"version":3,"file":"CommentPlayer-BAqa0jnq.mjs","names":[],"sources":["../src/components/display/comments/CommentPlayer.vue","../src/components/display/comments/CommentPlayer.vue"],"sourcesContent":["<template>\n  <div v-if=\"commentsToDisplay.length\" class=\"comment-player-container\">\n    <div\n      v-for=\"c in commentsToDisplay\"\n      :key=\"c.commentId\"\n      class=\"c-hand\"\n      @mouseenter=\"displayContent = c\"\n      @mouseleave=\"displayContent = undefined\"\n      @click=\"displayContent = c\"\n    >\n      <div\n        :style=\"'margin-left: ' + percentPosition(c.timeline ?? 0) + '%'\"\n        class=\"comment-border\"\n      />\n      <div\n        :style=\"\n          'margin-left: calc(' + percentPosition(c.timeline ?? 0) + '% - 7px)'\n        \"\n        class=\"status-comment\"\n        :data-selenium=\"'comment-' + seleniumFormat(c.poster.userName)\"\n      />\n    </div>\n    <div v-if=\"displayContent\" class=\"d-flex align-itemx-center mt-4\">\n      <div class=\"text-primary flex-shrink-0\">\n        {{ displayContent.poster.userName }}\n      </div>\n      <div class=\"ms-1 me-1\">-</div>\n      <div class=\"text-truncate\">\n        {{ displayContent.content }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { CommentPodcast } from \"@/stores/class/general/comment\";\nimport {useSelenium} from \"../../composable/useSelenium\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, Ref, ref, watch } from \"vue\";\nimport { useCommentStore } from \"../../../stores/CommentStore\";\n\n//Data \nconst displayContent: Ref<CommentPodcast | undefined> = ref(undefined);\nconst commentsToDisplay: Ref<Array<CommentPodcast>> = ref([]);\n\n//Composables\nconst { seleniumFormat } = useSelenium();\nconst playerStore = usePlayerStore();\nconst commentStore = useCommentStore();\n\n//Computed\nconst podcastId = computed(() => playerStore.playerPodcast?.podcastId);\n\n\n//Watch\nwatch(podcastId, () => {initComments()}, {immediate: true});\n\n\n//Methods\nasync function initComments() {\n  if (playerStore.playerPodcast?.podcastId) {\n    commentsToDisplay.value = await commentStore.fetchCommentsForPlayer(\n      playerStore.playerPodcast.podcastId,\n    );\n  }\n}\nfunction percentPosition(time: number): number {\n  let realDuration = playerStore.playerTotal;\n  if (playerStore.playerPodcast?.duration) {\n    realDuration = Math.round(playerStore.playerPodcast.duration / 1000);\n  }\n  if (realDuration < playerStore.playerTotal) {\n    time = time + (playerStore.playerTotal - realDuration);\n  }\n  return Math.round((time * 100) / playerStore.playerTotal);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"../../../style/comments\";\n\n.octopus-app {\n  .comment-player-container {\n    position: relative;\n    width: 100%;\n    height: 60px;\n    display: flex;\n\n    @media (width <= 960px) {\n      display: none;\n    }\n    \n    .comment-border {\n      width: auto;\n      position: absolute;\n      border-left: solid 1px white;\n      height: 10px;\n    }\n\n    .status-comment {\n      margin-top: 10px;\n      position: absolute;\n      background: white;\n    }\n  }\n}\n</style>\n","<template>\n  <div v-if=\"commentsToDisplay.length\" class=\"comment-player-container\">\n    <div\n      v-for=\"c in commentsToDisplay\"\n      :key=\"c.commentId\"\n      class=\"c-hand\"\n      @mouseenter=\"displayContent = c\"\n      @mouseleave=\"displayContent = undefined\"\n      @click=\"displayContent = c\"\n    >\n      <div\n        :style=\"'margin-left: ' + percentPosition(c.timeline ?? 0) + '%'\"\n        class=\"comment-border\"\n      />\n      <div\n        :style=\"\n          'margin-left: calc(' + percentPosition(c.timeline ?? 0) + '% - 7px)'\n        \"\n        class=\"status-comment\"\n        :data-selenium=\"'comment-' + seleniumFormat(c.poster.userName)\"\n      />\n    </div>\n    <div v-if=\"displayContent\" class=\"d-flex align-itemx-center mt-4\">\n      <div class=\"text-primary flex-shrink-0\">\n        {{ displayContent.poster.userName }}\n      </div>\n      <div class=\"ms-1 me-1\">-</div>\n      <div class=\"text-truncate\">\n        {{ displayContent.content }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { CommentPodcast } from \"@/stores/class/general/comment\";\nimport {useSelenium} from \"../../composable/useSelenium\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, Ref, ref, watch } from \"vue\";\nimport { useCommentStore } from \"../../../stores/CommentStore\";\n\n//Data \nconst displayContent: Ref<CommentPodcast | undefined> = ref(undefined);\nconst commentsToDisplay: Ref<Array<CommentPodcast>> = ref([]);\n\n//Composables\nconst { seleniumFormat } = useSelenium();\nconst playerStore = usePlayerStore();\nconst commentStore = useCommentStore();\n\n//Computed\nconst podcastId = computed(() => playerStore.playerPodcast?.podcastId);\n\n\n//Watch\nwatch(podcastId, () => {initComments()}, {immediate: true});\n\n\n//Methods\nasync function initComments() {\n  if (playerStore.playerPodcast?.podcastId) {\n    commentsToDisplay.value = await commentStore.fetchCommentsForPlayer(\n      playerStore.playerPodcast.podcastId,\n    );\n  }\n}\nfunction percentPosition(time: number): number {\n  let realDuration = playerStore.playerTotal;\n  if (playerStore.playerPodcast?.duration) {\n    realDuration = Math.round(playerStore.playerPodcast.duration / 1000);\n  }\n  if (realDuration < playerStore.playerTotal) {\n    time = time + (playerStore.playerTotal - realDuration);\n  }\n  return Math.round((time * 100) / playerStore.playerTotal);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"../../../style/comments\";\n\n.octopus-app {\n  .comment-player-container {\n    position: relative;\n    width: 100%;\n    height: 60px;\n    display: flex;\n\n    @media (width <= 960px) {\n      display: none;\n    }\n    \n    .comment-border {\n      width: auto;\n      position: absolute;\n      border-left: solid 1px white;\n      height: 10px;\n    }\n\n    .status-comment {\n      margin-top: 10px;\n      position: absolute;\n      background: white;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;EA0CA,MAAM,iBAAkD,IAAI,KAAA,CAAS;EACrE,MAAM,oBAAgD,IAAI,CAAC,CAAC;EAG5D,MAAM,EAAE,mBAAmB,YAAY;EACvC,MAAM,cAAc,eAAe;EACnC,MAAM,eAAe,gBAAgB;EAGrC,MAAM,YAAY,eAAe,YAAY,eAAe,SAAS;EAIrE,MAAM,iBAAiB;GAAC,aAAa;EAAC,GAAG,EAAC,WAAW,KAAI,CAAC;EAI1D,eAAe,eAAe;GAC5B,IAAI,YAAY,eAAe,WAC7B,kBAAkB,QAAQ,MAAM,aAAa,uBAC3C,YAAY,cAAc,SAC5B;EAEJ;EACA,SAAS,gBAAgB,MAAsB;GAC7C,IAAI,eAAe,YAAY;GAC/B,IAAI,YAAY,eAAe,UAC7B,eAAe,KAAK,MAAM,YAAY,cAAc,WAAW,GAAI;GAErE,IAAI,eAAe,YAAY,aAC7B,OAAO,QAAQ,YAAY,cAAc;GAE3C,OAAO,KAAK,MAAO,OAAO,MAAO,YAAY,WAAW;EAC1D;;;;;;;;;;;;;;;;;;;;;;CC1EuC,OAAM;;;;;;CAqBd,OAAM;;mBAC1B,OAAM,6BAA4B;mBAIlC,OAAM,gBAAe;;QA1BnB,OAAA,kBAAkB,UAAA,UAAA,GAA7B,mBA8BM,OA9BN,YA8BM,EAAA,UAAA,IAAA,GA7BJ,mBAmBM,UAAA,MAAA,WAlBQ,OAAA,oBAAL,MAAC;sBADV,mBAmBM,OAAA;GAjBH,KAAK,EAAE;GACR,OAAM;GACL,eAAU,WAAE,OAAA,iBAAiB;GAC7B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,iBAAiB,KAAA;GAC7B,UAAK,WAAE,OAAA,iBAAiB;MAEzB,mBAGE,OAAA;GAFC,OAAK,eAAA,kBAAoB,OAAA,gBAAgB,EAAE,YAAQ,CAAA,IAAA,GAAA;GACpD,OAAM;eAER,mBAME,OAAA;GALC,OAAK,eAAA,uBAAoC,OAAA,gBAAgB,EAAE,YAAQ,CAAA,IAAA,UAAA;GAGpE,OAAM;GACL,iBAAa,aAAe,OAAA,eAAe,EAAE,OAAO,QAAQ;;YAGtD,OAAA,kBAAA,UAAA,GAAX,mBAQM,OARN,YAQM;EAPJ,mBAEM,OAFN,YAEM,gBADD,OAAA,eAAe,OAAO,QAAQ,GAAA,CAAA;4BAEnC,mBAA8B,OAAA,EAAzB,OAAM,YAAW,GAAC,KAAC,EAAA;EACxB,mBAEM,OAFN,YAEM,gBADD,OAAA,eAAe,OAAO,GAAA,CAAA"}