{"version":3,"file":"video-timer.mjs","sources":["../../../../../../packages/components/video/src/video-timer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport Input from '@lit-element/components/input'\nimport { useNamespace } from '@lit-element/hooks'\nimport {\n  formatSeconds,\n  getRangeWidth,\n  isValidNumber,\n  toNumber,\n} from './hooks/utils'\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 ns = useNamespace('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\n          ? getRangeWidth(durationEl.value) * 2 + 20\n          : 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: any = inputTime.value.trim().split(':')\n\n    if (units.every((unit: any) => isValidNumber(unit))) {\n      currentTime.value = units\n        .map(toNumber)\n        .reverse()\n        .slice(0, 3)\n        .reduce(\n          (seconds: any, unit: any, i: any) => seconds + 60 ** i * unit,\n          0\n        )\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=\"[\n      ns.e('control'),\n      ns.e('timer'),\n      props.disabled && ns.em('control', 'disabled'),\n    ]\"\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=\"ns.e('timer-input')\"\n      size=\"small\"\n      transparent\n      @blur=\"finishInput(false)\"\n      @enter=\"finishInput(true)\"\n    />\n    <template v-else>\n      <span>\n        {{ formattedTime }}\n      </span>\n      <span :class=\"ns.e('timer-separator')\">/</span>\n      <span ref=\"durationEl\">\n        {{ formatSeconds(duration) }}\n      </span>\n    </template>\n  </div>\n</template>\n"],"names":["DO_defineComponent","_openBlock","_createElementBlock","_unref","_normalizeStyle","_createBlock","Input"],"mappings":"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"}