{"version":3,"file":"video-timer.vue2.mjs","sources":["../../../components/video/video-timer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Input } from '@/components/input'\n\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\n\nimport { useNameHelper } from '@vexip-ui/config'\nimport { getRangeWidth, isValidNumber, toNumber } from '@vexip-ui/utils'\nimport { formatSeconds } from './helper'\n\ndefineOptions({ name: 'VideoTimer' })\n\nconst props = defineProps({\n  time: {\n    type: Number,\n    default: 0\n  },\n  duration: {\n    type: Number,\n    default: 0\n  },\n  disabled: {\n    type: Boolean,\n    default: false\n  }\n})\n\nconst emit = defineEmits(['change'])\n\nconst nh = useNameHelper('video')\n\nconst currentTime = ref(props.time)\nconst editing = ref(false)\nconst width = ref(84)\nconst inputTime = ref('')\n\nconst input = ref<HTMLInputElement>()\nconst durationEl = ref<HTMLElement>()\n\nconst formattedTime = computed(() => formatSeconds(currentTime.value))\n\nwatch(\n  () => props.time,\n  value => {\n    currentTime.value = value\n  }\n)\nwatch(\n  () => props.disabled,\n  value => {\n    if (value) {\n      editing.value = false\n    }\n  }\n)\n\nonMounted(() => {\n  watch(\n    () => props.duration,\n    () => {\n      nextTick(() => {\n        width.value = durationEl.value ? getRangeWidth(durationEl.value) * 2 + 20 : 84\n      })\n    },\n    { immediate: true }\n  )\n})\n\nfunction handleClick() {\n  if (!props.disabled && !editing.value) {\n    editing.value = true\n    inputTime.value = formattedTime.value\n    nextTick(() => {\n      input.value?.focus()\n    })\n  }\n}\n\nfunction finishInput(confirm: boolean) {\n  editing.value = false\n\n  if (confirm) {\n    const units = inputTime.value.trim().split(':')\n\n    if (units.every(unit => isValidNumber(unit))) {\n      currentTime.value = units\n        .map(toNumber)\n        .reverse()\n        .slice(0, 3)\n        .reduce((seconds, unit, i) => seconds + 60 ** i * unit, 0)\n      currentTime.value = Math.min(currentTime.value, props.duration)\n      emit('change', currentTime.value)\n    }\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"[nh.be('control'), nh.be('timer'), props.disabled && nh.bem('control', 'disabled')]\"\n    :style=\"{ width: `${width}px` }\"\n    @click=\"handleClick\"\n  >\n    <Input\n      v-if=\"editing\"\n      ref=\"input\"\n      v-model:value=\"inputTime\"\n      :class=\"nh.be('timer-input')\"\n      size=\"small\"\n      transparent\n      @blur=\"finishInput(false)\"\n      @enter=\"finishInput(true)\"\n    ></Input>\n    <template v-else>\n      <span>\n        {{ formattedTime }}\n      </span>\n      <span :class=\"nh.be('timer-separator')\">/</span>\n      <span ref=\"durationEl\">\n        {{ formatSeconds(duration) }}\n      </span>\n    </template>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","currentTime","ref","editing","width","inputTime","input","durationEl","formattedTime","computed","formatSeconds","watch","value","onMounted","nextTick","getRangeWidth","handleClick","_a","finishInput","confirm","units","unit","isValidNumber","toNumber","seconds","i"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,GAeRC,IAAOC,GAEPC,IAAKC,EAAc,OAAO,GAE1BC,IAAcC,EAAIP,EAAM,IAAI,GAC5BQ,IAAUD,EAAI,EAAK,GACnBE,IAAQF,EAAI,EAAE,GACdG,IAAYH,EAAI,EAAE,GAElBI,IAAQJ,EAAsB,GAC9BK,IAAaL,EAAiB,GAE9BM,IAAgBC,EAAS,MAAMC,EAAcT,EAAY,KAAK,CAAC;AAErE,IAAAU;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASiB,MAAA;AACP,QAAAX,EAAY,QAAQW;AAAA,MAAA;AAAA,IAExB,GACAD;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASiB,MAAA;AACP,QAAIA,MACFT,EAAQ,QAAQ;AAAA,MAClB;AAAA,IAEJ,GAEAU,EAAU,MAAM;AACd,MAAAF;AAAA,QACE,MAAMhB,EAAM;AAAA,QACZ,MAAM;AACJ,UAAAmB,EAAS,MAAM;AACP,YAAAV,EAAA,QAAQG,EAAW,QAAQQ,EAAcR,EAAW,KAAK,IAAI,IAAI,KAAK;AAAA,UAAA,CAC7E;AAAA,QACH;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB;AAAA,IAAA,CACD;AAED,aAASS,IAAc;AACrB,MAAI,CAACrB,EAAM,YAAY,CAACQ,EAAQ,UAC9BA,EAAQ,QAAQ,IAChBE,EAAU,QAAQG,EAAc,OAChCM,EAAS,MAAM;;AACb,SAAAG,IAAAX,EAAM,UAAN,QAAAW,EAAa;AAAA,MAAM,CACpB;AAAA,IACH;AAGF,aAASC,EAAYC,GAAkB;AAGrC,UAFAhB,EAAQ,QAAQ,IAEZgB,GAAS;AACX,cAAMC,IAAQf,EAAU,MAAM,KAAK,EAAE,MAAM,GAAG;AAE9C,QAAIe,EAAM,MAAM,CAAAC,MAAQC,EAAcD,CAAI,CAAC,MAC7BpB,EAAA,QAAQmB,EACjB,IAAIG,CAAQ,EACZ,QAAQ,EACR,MAAM,GAAG,CAAC,EACV,OAAO,CAACC,GAASH,GAAMI,MAAMD,IAAU,MAAMC,IAAIJ,GAAM,CAAC,GAC3DpB,EAAY,QAAQ,KAAK,IAAIA,EAAY,OAAON,EAAM,QAAQ,GACzDE,EAAA,UAAUI,EAAY,KAAK;AAAA,MAClC;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}