{"version":3,"file":"video-volume.vue2.mjs","sources":["../../../components/video/video-volume.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { Slider } from '@/components/slider'\n\nimport { computed, inject, ref, watch } from 'vue'\n\nimport { useIcons, useNameHelper } from '@vexip-ui/config'\nimport VideoControl from './video-control.vue'\nimport { mergeIconScale } from './helper'\nimport { VIDEO_STATE } from './symbol'\n\ndefineOptions({ name: 'VideoVolume' })\n\nconst props = defineProps({\n  volume: {\n    type: Number,\n    default: 1\n  }\n})\n\nconst emit = defineEmits(['change'])\n\nconst nh = useNameHelper('video')\nconst icons = useIcons()\n\nconst videoState = inject(VIDEO_STATE)!\n\nconst currentVolume = ref(props.volume)\nconst muted = ref(false)\n// const visible = ref(true)\n\nconst volumeIcon = computed(() => {\n  return muted.value\n    ? icons.value.volumeMute\n    : currentVolume.value < 0.5\n      ? icons.value.volumeLow\n      : icons.value.volume\n})\n\nwatch(\n  () => props.volume,\n  value => {\n    currentVolume.value = value\n  }\n)\n\ndefineExpose({ toggleMute })\n\nlet prevVolume = currentVolume.value\n\nfunction toggleMute() {\n  if (muted.value) {\n    currentVolume.value = prevVolume <= 0 ? 0.5 : prevVolume\n  } else {\n    prevVolume = currentVolume.value\n    currentVolume.value = 0\n  }\n\n  muted.value = !muted.value\n\n  emit('change', currentVolume.value)\n}\n\nfunction handleSlide(value: number) {\n  value /= 100\n  prevVolume = value\n  currentVolume.value = value\n  muted.value = value <= 0\n\n  emit('change', currentVolume.value)\n}\n</script>\n\n<template>\n  <VideoControl\n    :class=\"nh.be('volume')\"\n    type=\"panel\"\n    :tip-class=\"nh.be('volume-panel')\"\n    @click=\"toggleMute\"\n  >\n    <Icon v-bind=\"mergeIconScale(videoState.iconScale, volumeIcon)\"></Icon>\n    <template #panel>\n      <div :class=\"nh.be('volume-text')\">\n        {{ (currentVolume * 100).toFixed() }}\n      </div>\n      <Slider\n        :value=\"currentVolume * 100\"\n        :class=\"nh.be('volume-slider')\"\n        :min=\"0\"\n        :max=\"100\"\n        vertical\n        hide-tip\n        reverse\n        :range=\"false\"\n        @input=\"handleSlide\"\n      ></Slider>\n    </template>\n  </VideoControl>\n</template>\n"],"names":["props","__props","emit","__emit","nh","useNameHelper","icons","useIcons","videoState","inject","VIDEO_STATE","currentVolume","ref","muted","volumeIcon","computed","watch","value","__expose","toggleMute","prevVolume","handleSlide"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GAORC,IAAOC,GAEPC,IAAKC,EAAc,OAAO,GAC1BC,IAAQC,EAAS,GAEjBC,IAAaC,EAAOC,CAAW,GAE/BC,IAAgBC,EAAIZ,EAAM,MAAM,GAChCa,IAAQD,EAAI,EAAK,GAGjBE,IAAaC,EAAS,MACnBF,EAAM,QACTP,EAAM,MAAM,aACZK,EAAc,QAAQ,MACpBL,EAAM,MAAM,YACZA,EAAM,MAAM,MACnB;AAED,IAAAU;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAASiB,MAAA;AACP,QAAAN,EAAc,QAAQM;AAAA,MAAA;AAAA,IAE1B,GAEaC,EAAA,EAAE,YAAAC,GAAY;AAE3B,QAAIC,IAAaT,EAAc;AAE/B,aAASQ,IAAa;AACpB,MAAIN,EAAM,QACMF,EAAA,QAAQS,KAAc,IAAI,MAAMA,KAE9CA,IAAaT,EAAc,OAC3BA,EAAc,QAAQ,IAGlBE,EAAA,QAAQ,CAACA,EAAM,OAEhBX,EAAA,UAAUS,EAAc,KAAK;AAAA,IAAA;AAGpC,aAASU,EAAYJ,GAAe;AACzB,MAAAA,KAAA,KACIG,IAAAH,GACbN,EAAc,QAAQM,GACtBJ,EAAM,QAAQI,KAAS,GAElBf,EAAA,UAAUS,EAAc,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}