{"version":3,"file":"video-volume.mjs","sources":["../../../../../../packages/components/video/src/video-volume.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useNamespace } from '@lit-element/hooks'\nimport Slider from '@lit-element/components/slider'\nimport VideoControl from './video-control.vue'\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 ns = useNamespace('video')\n\nconst currentVolume = ref(props.volume)\nconst muted = ref(false)\n\nconst volumeIcon = computed(() => {\n  if (muted.value) {\n    return 'https://image.whzb.com/chain/lit-element/js/img/volumeMute.png'\n  } else if (currentVolume.value < 0.5) {\n    return 'https://image.whzb.com/chain/lit-element/js/img/volumeLow.png'\n  } else {\n    return 'https://image.whzb.com/chain/lit-element/js/img/volume.png'\n  }\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: any) {\n  value /= 100\n  prevVolume = value\n  currentVolume.value = value\n  muted.value = value <= 0\n  emit('change', currentVolume.value)\n}\n</script>\n\n<template>\n  <VideoControl\n    :class=\"ns.e('volume')\"\n    type=\"panel\"\n    :tip-class=\"ns.e('volume-panel')\"\n    @button-click=\"toggleMute\"\n  >\n    <img :src=\"volumeIcon\" alt=\"\" style=\"width: 18px\" />\n    <template #panel>\n      <div :class=\"ns.e('volume-text')\">\n        {{ (currentVolume * 100).toFixed() }}\n      </div>\n      <Slider\n        :model-value=\"currentVolume * 100\"\n        :class=\"ns.e('volume-slider')\"\n        :min=\"0\"\n        :max=\"100\"\n        height=\"100px\"\n        vertical\n        size=\"small\"\n        :show-tooltip=\"false\"\n        :range=\"false\"\n        @input=\"handleSlide\"\n      />\n    </template>\n  </VideoControl>\n</template>\n"],"names":["_openBlock","_normalizeClass","_unref"],"mappings":";;;;;;;mCAMc,CAAA,EAAE,IAAM,EAAA,aAAA,EAAc,CAAA,CAAA;;;;;;;;;;;;AAWpC,IAAM,MAAA,EAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAE/B,IAAM,MAAA,aAAA,GAAgB,GAAI,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AACtC,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAK,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAa,SAAS,MAAM;AAChC,MAAA,IAAI,MAAM,KAAO,EAAA;AACf,QAAO,OAAA,gEAAA,CAAA;AAAA,OACT,MAAA,IAAW,aAAc,CAAA,KAAA,GAAQ,GAAK,EAAA;AACpC,QAAO,OAAA,+DAAA,CAAA;AAAA,OACF,MAAA;AACL,QAAO,OAAA,4DAAA,CAAA;AAAA,OACT;AAAA,KACD,CAAA,CAAA;AAED,IAAA,KAAA,CAAA,MAAA,KAAA,CAAA,MAAA,EAAA,CAAA,KAAA,KAAA;AAAA,MACE,aAAY,CAAA,KAAA,GAAA,KAAA,CAAA;AAAA,KAAA,CACZ,CAAC;AACC,IAAA,MAAA,CAAA,EAAA,UAAsB,EAAA,CAAA,CAAA;AAAA,IACxB,IAAA,UAAA,GAAA,aAAA,CAAA,KAAA,CAAA;AAAA,IACF,SAAA,UAAA,GAAA;AAEA,MAAa,IAAA;AAEb,QAAI,aAAa,CAAc,KAAA,GAAA,UAAA,IAAA,CAAA,GAAA,GAAA,GAAA,UAAA,CAAA;AAE/B,OAAA,MAAS;AACP,QAAA,UAAiB,GAAA,aAAA,CAAA,KAAA,CAAA;AACf,QAAc,aAAA,CAAA,KAAA,GAAQ,CAAc,CAAA;AAAU,OACzC;AACL,MAAA,KAAA,CAAA,KAAA,GAAA,CAAa,KAAc,CAAA,KAAA,CAAA;AAC3B,MAAA,IAAA,CAAA,QAAA,EAAA,aAAsB,CAAA,KAAA,CAAA,CAAA;AAAA,KACxB;AAEA,IAAM,SAAA,WAAe,CAAA,KAAA,EAAA;AAErB,MAAK,KAAA,IAAA,GAAA,CAAA;AAA6B,MACpC,UAAA,GAAA,KAAA,CAAA;AAEA,MAAA,mBAAqB,GAAY,KAAA,CAAA;AAC/B,MAAS,KAAA,CAAA,KAAA,GAAA,KAAA,IAAA,CAAA,CAAA;AACT,MAAa,IAAA,CAAA,QAAA,EAAA,aAAA,CAAA,KAAA,CAAA,CAAA;AACb,KAAA;AACA,IAAA,OAAA,CAAM,YAAiB,KAAA;AACvB,MAAK,OAAAA,wBAA6B,CAAA,YAAA,EAAA;AAAA,QACpC,KAAA,EAAAC,cAAA,CAAAC,KAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,QAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}