{"version":3,"file":"MediaPlayer-CNkRgD7R.js","sources":["../../src/helpers/time.ts","../../src/helpers/media-player.ts","../../src/components/app/MediaPlayer.vue"],"sourcesContent":["export function formatSeconds(time: number): string {\n  if (time === 0) {\n    return '0:00';\n  }\n  if (!time) {\n    return '';\n  }\n  const h = Math.floor(time / 60 / 60);\n  const m = Math.floor((time / 60) % 60);\n  const s = Math.floor(time % 60);\n  const parts = [];\n  if (h > 0) {\n    parts.push(h);\n  }\n  parts.push(h > 0 && m < 10 ? `0${m}` : m);\n  parts.push(s < 10 ? `0${s}` : s);\n  return parts.join(':');\n}\n\nexport function calcProgress(duration: number, currentTime: number) {\n  const percent = Math.round((currentTime / duration) * 100);\n  return {\n    time: formatSeconds(currentTime),\n    percent: Math.min(percent, 100),\n  };\n}\n","import {computed, ref} from 'vue';\n\nimport type {Ref} from 'vue';\nimport type {SearchResult, TextNode} from '@/types/node';\n\nimport {calcProgress, formatSeconds} from '@/helpers/time';\n\nexport function useMediaPlayerComponent(currentNode: Ref<TextNode | SearchResult | undefined>) {\n  const show = ref(true);\n  const audioTag = ref<HTMLAudioElement>();\n  const track = ref<HTMLInputElement>();\n  const playing = ref(false);\n  const time = ref('0:00');\n  const length = ref('0:00');\n  const percent = ref(0);\n  let timer: number | undefined;\n\n  const nodeLink = computed(() => {\n    return currentNode.value?.url;\n  });\n\n  function toggleView() {\n    show.value = !show.value;\n    clearTimeout(timer);\n  }\n\n  function onPlayStart(ev: Event) {\n    const el = ev.target as HTMLAudioElement;\n    length.value = formatSeconds(el.duration);\n    time.value = formatSeconds(0);\n    percent.value = 0;\n    playing.value = true;\n    show.value = true;\n    timer = setTimeout(() => {\n      show.value = false;\n    }, 30000) as unknown as number;\n  }\n\n  function onPause() {\n    playing.value = false;\n  }\n\n  function onTimeUpdate(ev: Event) {\n    const el = ev.target as HTMLAudioElement;\n    const progress = calcProgress(el.duration, el.currentTime);\n    time.value = progress.time;\n    percent.value = progress.percent;\n  }\n\n  function onEnded() {\n    playing.value = false;\n  }\n\n  function trackChange(ev: Event) {\n    const val = Number((ev.target as HTMLInputElement)?.value || 0);\n    const selectedPercent = val / 100;\n    const el = audioTag.value as HTMLAudioElement;\n    if (!isNaN(el?.duration)) {\n      el.currentTime = Math.round(el.duration * selectedPercent);\n    }\n  }\n\n  async function togglePlay() {\n    const el = audioTag.value;\n    if (playing.value) {\n      await el?.pause();\n    } else {\n      await el?.play();\n    }\n  }\n\n  async function rewind() {\n    jump(-10);\n  }\n  async function forward() {\n    jump(10);\n  }\n\n  function jump(sec: number) {\n    const el = audioTag.value as HTMLAudioElement;\n    if (isNaN(el?.duration)) {\n      return;\n    }\n\n    let to = el.currentTime + sec;\n    if (to < 0) {\n      to = 0;\n    }\n    if (to > el.duration) {\n      to = el.duration;\n    }\n    el.currentTime = to;\n  }\n\n  return {\n    show,\n    audioTag,\n    track,\n    playing,\n    time,\n    length,\n    percent,\n    nodeLink,\n    toggleView,\n    onPlayStart,\n    onPause,\n    onTimeUpdate,\n    onEnded,\n    trackChange,\n    togglePlay,\n    rewind,\n    forward,\n  };\n}\n","<script setup lang=\"ts\">\nimport {storeToRefs} from 'pinia';\n\nimport {useMediaPlayerStore} from '@/stores/media-player';\nimport {useMediaPlayerComponent} from '@/helpers/media-player';\n\ndefineProps<{\n  defaultSite?: boolean;\n}>();\n\nconst store = useMediaPlayerStore();\nconst {currentNode, currentPlay} = storeToRefs(store);\nconst {\n  show,\n  audioTag,\n  track,\n  playing,\n  time,\n  length,\n  percent,\n  nodeLink,\n  toggleView,\n  onPlayStart,\n  onPause,\n  onTimeUpdate,\n  onEnded,\n  trackChange,\n  togglePlay,\n  rewind,\n  forward,\n} = useMediaPlayerComponent(currentNode);\n</script>\n<template>\n  <div\n    v-if=\"currentPlay?.url\"\n    class=\"audio-player\"\n    :data-visible=\"show\"\n  >\n    <button\n      @click=\"toggleView\"\n      type=\"button\"\n      class=\"media-player--toggle\"\n    />\n    <div class=\"audio-player--content content media-player\">\n      <div\n        v-if=\"nodeLink\"\n        class=\"media-player--node\"\n      >\n        <RouterLink\n          :to=\"nodeLink\"\n          class=\"media-player--node-link\"\n        >\n          {{ currentNode?.title }}\n          <small\n            v-if=\"defaultSite\"\n            class=\"media-player--node-preacher\"\n          >\n            {{ currentNode?.field_preacher?.label }}\n          </small>\n        </RouterLink>\n\n        <a\n          class=\"media-player--download\"\n          :href=\"currentPlay.url\"\n        >\n          <i class=\"media-player--download-icon\" />\n          Offline lejátszás\n        </a>\n      </div>\n      <div\n        class=\"media-player--player\"\n        :data-playing=\"playing\"\n      >\n        <div class=\"media-player--player--button\">\n          <button\n            class=\"media-player--player--rewind btn rewind\"\n            aria-label=\"Ugrás vissza 10 másodpercet\"\n            @click=\"rewind\"\n          />\n          <button\n            class=\"media-player--player--btn btn toggle\"\n            @click=\"togglePlay\"\n          />\n          <button\n            class=\"media-player--player--forward btn forward\"\n            aria-label=\"Ugrás előre 10 másodpercet\"\n            @click=\"forward\"\n          />\n        </div>\n        <div class=\"media-player--player--progress\">\n          <div class=\"media-player--player--time\">{{ time }}</div>\n          <div class=\"media-player--player--progress-bar\">\n            <input\n              ref=\"track\"\n              type=\"range\"\n              :value=\"percent\"\n              @change=\"trackChange\"\n            />\n          </div>\n          <div class=\"media-player--player--time media-player--player--length\">{{ length }}</div>\n        </div>\n        <audio\n          ref=\"audioTag\"\n          controls\n          :src=\"currentPlay?.url\"\n          autoplay\n          @play=\"onPlayStart\"\n          @pause=\"onPause\"\n          @timeupdate=\"onTimeUpdate\"\n          @ended=\"onEnded\"\n        />\n      </div>\n      <div class=\"media-player--close\">\n        <button\n          @click=\"store.cancelPlay\"\n          class=\"media-player--close--button\"\n        ></button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["formatSeconds","time","h","m","s","parts","calcProgress","duration","currentTime","percent","useMediaPlayerComponent","currentNode","show","ref","audioTag","track","playing","length","timer","nodeLink","computed","_a","toggleView","onPlayStart","ev","el","onPause","onTimeUpdate","progress","onEnded","trackChange","selectedPercent","togglePlay","rewind","jump","forward","sec","to","store","useMediaPlayerStore","currentPlay","storeToRefs"],"mappings":"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"}