@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.32 kB
Source Map (JSON)
{"version":3,"file":"video-volume.vue2.mjs","sources":["../../../components/video/video-volume.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Icon } from '@/components/icon'\r\nimport { Slider } from '@/components/slider'\r\n\r\nimport { computed, inject, ref, watch } from 'vue'\r\n\r\nimport { useIcons, useNameHelper } from '@vexip-ui/config'\r\nimport VideoControl from './video-control.vue'\r\nimport { mergeIconScale } from './helper'\r\nimport { VIDEO_STATE } from './symbol'\r\n\r\ndefineOptions({ name: 'VideoVolume' })\r\n\r\nconst props = defineProps({\r\n volume: {\r\n type: Number,\r\n default: 1,\r\n },\r\n})\r\n\r\nconst emit = defineEmits(['change'])\r\n\r\nconst nh = useNameHelper('video')\r\nconst icons = useIcons()\r\n\r\nconst videoState = inject(VIDEO_STATE)!\r\n\r\nconst currentVolume = ref(props.volume)\r\nconst muted = ref(false)\r\n// const visible = ref(true)\r\n\r\nconst volumeIcon = computed(() => {\r\n return muted.value\r\n ? icons.value.volumeMute\r\n : currentVolume.value < 0.5\r\n ? icons.value.volumeLow\r\n : icons.value.volume\r\n})\r\n\r\nwatch(\r\n () => props.volume,\r\n value => {\r\n currentVolume.value = value\r\n },\r\n)\r\n\r\ndefineExpose({ toggleMute })\r\n\r\nlet prevVolume = currentVolume.value\r\n\r\nfunction toggleMute() {\r\n if (muted.value) {\r\n currentVolume.value = prevVolume <= 0 ? 0.5 : prevVolume\r\n } else {\r\n prevVolume = currentVolume.value\r\n currentVolume.value = 0\r\n }\r\n\r\n muted.value = !muted.value\r\n\r\n emit('change', currentVolume.value)\r\n}\r\n\r\nfunction handleSlide(value: number) {\r\n value /= 100\r\n prevVolume = value\r\n currentVolume.value = value\r\n muted.value = value <= 0\r\n\r\n emit('change', currentVolume.value)\r\n}\r\n</script>\r\n\r\n<template>\r\n <VideoControl\r\n :class=\"nh.be('volume')\"\r\n type=\"panel\"\r\n :tip-class=\"nh.be('volume-panel')\"\r\n @click=\"toggleMute\"\r\n >\r\n <Icon v-bind=\"mergeIconScale(videoState.iconScale, volumeIcon)\"></Icon>\r\n <template #panel>\r\n <div :class=\"nh.be('volume-text')\">\r\n {{ (currentVolume * 100).toFixed() }}\r\n </div>\r\n <Slider\r\n :value=\"currentVolume * 100\"\r\n :class=\"nh.be('volume-slider')\"\r\n :min=\"0\"\r\n :max=\"100\"\r\n vertical\r\n hide-tip\r\n reverse\r\n :range=\"false\"\r\n @input=\"handleSlide\"\r\n ></Slider>\r\n </template>\r\n </VideoControl>\r\n</template>\r\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","_createBlock","VideoControl","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_createVNode","Slider","mergeIconScale"],"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;2BAKlCW,EAuBeC,GAAA;AAAA,MAtBZ,OAAKC,EAAEC,EAAErB,CAAA,EAAC,GAAE,QAAA,CAAA;AAAA,MACb,MAAK;AAAA,MACJ,aAAWqB,EAAErB,CAAA,EAAC,GAAE,cAAA;AAAA,MAChB,SAAOe;AAAA,IAAA;MAGG,SACT,MAEM;AAAA,QAFNO,EAEM,OAAA;AAAA,UAFA,OAAKF,EAAEC,EAAErB,CAAA,EAAC,GAAE,aAAA,CAAA;AAAA,QAAA,GACZuB,GAAAhB,EAAA,aAAqB,QAAO,CAAA,GAAA,CAAA;AAAA,QAElCiB,EAUUH,EAAAI,CAAA,GAAA;AAAA,UATP,OAAOlB,EAAa,QAAA;AAAA,UACpB,OAAKa,EAAEC,EAAErB,CAAA,EAAC,GAAE,eAAA,CAAA;AAAA,UACZ,KAAK;AAAA,UACL,KAAK;AAAA,UACN,UAAA;AAAA,UACA,YAAA;AAAA,UACA,SAAA;AAAA,UACC,OAAO;AAAA,UACP,SAAOiB;AAAA;;iBAdZ,MAAuE;AAAA,QAAvEO,EAAuEH,UAAzDA,EAAcK,CAAA,EAACL,KAAW,WAAWX,EAAU,KAAA,CAAA,CAAA,GAAA,MAAA,EAAA;AAAA,MAAA;;;;;"}