{"version":3,"file":"RadioHistory-CQCcGdcs.mjs","names":[],"sources":["../src/components/misc/player/radio/RadioHistory.vue","../src/components/misc/player/radio/RadioHistory.vue"],"sourcesContent":["<template>\n  <div v-if=\"playerRadioHistory.length\" class=\"d-flex align-items-center mt-3\">\n    <div class=\"fw-bold me-3\">\n      {{ t(\"Previously\") + \":\" }}\n    </div>\n    <button\n      v-if=\"indexStart !== 0\"\n      class=\"btn btn-transparent text-light\"\n      @click=\"handleResize(0)\"\n    >\n      <ChevronLeftIcon />\n    </button>\n    <div ref=\"historyListContainer\" class=\"history-list-container\">\n      <div\n        v-for=\"(pastItem, index) in playerRadioHistory\"\n        :id=\"'history' + index\"\n        :key=\"pastItem.title\"\n        class=\"d-flex flex-shrink-0\"\n      >\n        <div class=\"d-flex flex-shrink-0 align-items-end\">\n          <time :datetime=\"pastItem.startDate\" class=\"me-2 hour-past-item\">{{\n            displayTimeItem(pastItem)\n          }}</time>\n          <span class=\"me-3\">{{ displayPreviousItem(pastItem) }}</span>\n        </div>\n      </div>\n    </div>\n    <button\n      v-if=\"indexNotDisplay <= playerRadioHistory.length - 1\"\n      class=\"btn btn-transparent text-light\"\n      @click=\"handleResize(indexNotDisplay)\"\n    >\n      <ChevronRightIcon />\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronLeftIcon from \"vue-material-design-icons/ChevronLeft.vue\";\nimport ChevronRightIcon from \"vue-material-design-icons/ChevronRight.vue\";\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport dayjs from \"dayjs\";\nimport { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from \"vue\";\nimport { MediaRadio } from \"@/stores/class/general/player\";\nimport { useI18n } from \"vue-i18n\";\nimport { useFetchRadio } from \"../../../composable/radio/usefetchRadioData\";\n\n\n//Data \nconst indexStart = ref(0);\nconst indexNotDisplay = ref(100);\nconst historyListContainerRef = useTemplateRef('historyListContainer');\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst {displayTitle} = useFetchRadio();\n\n\n//Computed\nconst playerRadioHistory = computed(() => playerStore.playerRadio?.history ?? []);\n   \n\n//Watch\nwatch(playerRadioHistory, () => {\n  nextTick(() => {\n    handleResize(0);\n  });\n}, {deep: true,immediate: true});\n\n\nonMounted(()=>window.addEventListener(\"resize\", () => {handleResize(0);}))\nonUnmounted(()=>window.removeEventListener(\"resize\", () => {handleResize(0);}))\n\n\n//Methods\nfunction displayEverythingAfterIndex(indexAsked: number) {\n  for (let index = 0; index < playerRadioHistory.value.length; index++) {\n    const el = historyListContainerRef?.value?.querySelector('#history' + index);\n    if (!el) continue;\n    if (index < indexAsked && !el.classList.contains(\"hid\")) {\n      el.classList.add(\"hid\");\n      continue;\n    }\n    if (index >= indexAsked && el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  }\n}\nfunction handleResize(indexAsked: number): void {\n  const historyList = historyListContainerRef?.value as HTMLElement;\n  if (null === historyList || !historyList) {\n    return;\n  }\n  indexStart.value = indexAsked;\n  indexNotDisplay.value = playerRadioHistory.value.length;\n  displayEverythingAfterIndex(indexAsked);\n  for (\n    let index = indexStart.value + 1;\n    index < playerRadioHistory.value.length;\n    index++\n  ) {\n    const el = historyListContainerRef?.value?.querySelector('#history' + index);\n    if (!el) continue;\n    if (index > indexNotDisplay.value && !el.classList.contains(\"hid\")) {\n      el.classList.add(\"hid\");\n      continue;\n    }\n    const parent = el.parentElement;\n    if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth) {\n      indexNotDisplay.value = index;\n      el.classList.add(\"hid\");\n    }\n  }\n}\nfunction displayTimeItem(item: MediaRadio): string {\n  return dayjs(item.startDate).format(\"HH:mm\");\n}\nfunction displayPreviousItem(item: MediaRadio): string {\n  if (item.podcastId) {\n    return item.title;\n  }\n  return displayTitle(item);\n}\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .history-list-container {\n    display: inline-flex;\n    justify-content: flex-start;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    position: relative;\n  }\n\n  .hour-past-item {\n    font-size: 0.8rem;\n    color: oklch(89% 0 0deg);\n  }\n}\n</style>\n","<template>\n  <div v-if=\"playerRadioHistory.length\" class=\"d-flex align-items-center mt-3\">\n    <div class=\"fw-bold me-3\">\n      {{ t(\"Previously\") + \":\" }}\n    </div>\n    <button\n      v-if=\"indexStart !== 0\"\n      class=\"btn btn-transparent text-light\"\n      @click=\"handleResize(0)\"\n    >\n      <ChevronLeftIcon />\n    </button>\n    <div ref=\"historyListContainer\" class=\"history-list-container\">\n      <div\n        v-for=\"(pastItem, index) in playerRadioHistory\"\n        :id=\"'history' + index\"\n        :key=\"pastItem.title\"\n        class=\"d-flex flex-shrink-0\"\n      >\n        <div class=\"d-flex flex-shrink-0 align-items-end\">\n          <time :datetime=\"pastItem.startDate\" class=\"me-2 hour-past-item\">{{\n            displayTimeItem(pastItem)\n          }}</time>\n          <span class=\"me-3\">{{ displayPreviousItem(pastItem) }}</span>\n        </div>\n      </div>\n    </div>\n    <button\n      v-if=\"indexNotDisplay <= playerRadioHistory.length - 1\"\n      class=\"btn btn-transparent text-light\"\n      @click=\"handleResize(indexNotDisplay)\"\n    >\n      <ChevronRightIcon />\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronLeftIcon from \"vue-material-design-icons/ChevronLeft.vue\";\nimport ChevronRightIcon from \"vue-material-design-icons/ChevronRight.vue\";\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport dayjs from \"dayjs\";\nimport { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from \"vue\";\nimport { MediaRadio } from \"@/stores/class/general/player\";\nimport { useI18n } from \"vue-i18n\";\nimport { useFetchRadio } from \"../../../composable/radio/usefetchRadioData\";\n\n\n//Data \nconst indexStart = ref(0);\nconst indexNotDisplay = ref(100);\nconst historyListContainerRef = useTemplateRef('historyListContainer');\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst {displayTitle} = useFetchRadio();\n\n\n//Computed\nconst playerRadioHistory = computed(() => playerStore.playerRadio?.history ?? []);\n   \n\n//Watch\nwatch(playerRadioHistory, () => {\n  nextTick(() => {\n    handleResize(0);\n  });\n}, {deep: true,immediate: true});\n\n\nonMounted(()=>window.addEventListener(\"resize\", () => {handleResize(0);}))\nonUnmounted(()=>window.removeEventListener(\"resize\", () => {handleResize(0);}))\n\n\n//Methods\nfunction displayEverythingAfterIndex(indexAsked: number) {\n  for (let index = 0; index < playerRadioHistory.value.length; index++) {\n    const el = historyListContainerRef?.value?.querySelector('#history' + index);\n    if (!el) continue;\n    if (index < indexAsked && !el.classList.contains(\"hid\")) {\n      el.classList.add(\"hid\");\n      continue;\n    }\n    if (index >= indexAsked && el.classList.contains(\"hid\")) {\n      el.classList.remove(\"hid\");\n    }\n  }\n}\nfunction handleResize(indexAsked: number): void {\n  const historyList = historyListContainerRef?.value as HTMLElement;\n  if (null === historyList || !historyList) {\n    return;\n  }\n  indexStart.value = indexAsked;\n  indexNotDisplay.value = playerRadioHistory.value.length;\n  displayEverythingAfterIndex(indexAsked);\n  for (\n    let index = indexStart.value + 1;\n    index < playerRadioHistory.value.length;\n    index++\n  ) {\n    const el = historyListContainerRef?.value?.querySelector('#history' + index);\n    if (!el) continue;\n    if (index > indexNotDisplay.value && !el.classList.contains(\"hid\")) {\n      el.classList.add(\"hid\");\n      continue;\n    }\n    const parent = el.parentElement;\n    if (parent && el.offsetLeft + el.clientWidth > parent.clientWidth) {\n      indexNotDisplay.value = index;\n      el.classList.add(\"hid\");\n    }\n  }\n}\nfunction displayTimeItem(item: MediaRadio): string {\n  return dayjs(item.startDate).format(\"HH:mm\");\n}\nfunction displayPreviousItem(item: MediaRadio): string {\n  if (item.podcastId) {\n    return item.title;\n  }\n  return displayTitle(item);\n}\n</script>\n<style lang=\"scss\">\n.octopus-app {\n  .history-list-container {\n    display: inline-flex;\n    justify-content: flex-start;\n    overflow: hidden;\n    flex-grow: 1;\n    width: 0;\n    position: relative;\n  }\n\n  .hour-past-item {\n    font-size: 0.8rem;\n    color: oklch(89% 0 0deg);\n  }\n}\n</style>\n"],"mappings":"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"}