{"version":3,"file":"video-control.mjs","sources":["../../../../../../packages/components/video/src/video-control.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, watch } from 'vue'\nimport Tooltip from '@lit-element/components/tooltip'\nimport { useNamespace } from '@lit-element/hooks'\nimport { listToMap } from './hooks/utils'\nimport { videoControlProps } from './video'\nimport { VIDEO_STATE } from './symbol'\nimport type { VideoControlOption } from './symbol'\n\ndefineOptions({ name: 'VideoControl' })\n\nconst props = defineProps(videoControlProps)\n\nconst emit = defineEmits(['buttonClick', 'select', 'focus', 'blur'])\n\nconst ns = useNamespace('video')\n\nconst videoState = inject(VIDEO_STATE)!\n\nconst currentValue = ref<any>(props.value)\n\nconst className = computed(() => {\n  return {\n    [ns.e('control')]: true,\n    [ns.em('control', props.type)]: props.type !== 'button',\n    [ns.em('control', 'disabled')]: props.disabled,\n  }\n})\nconst tipClassIn = computed(() => {\n  return props.type === 'button' ? ns.e('control-tip') : ns.e('control-panel')\n})\nconst objectOptions = computed(() => {\n  return props.options.map((option: any) => {\n    return typeof option === 'string' ? { value: option } : option\n  })\n})\nconst optionMap = computed<any>(() =>\n  listToMap(objectOptions.value, 'value', undefined, true)\n)\nconst currentOption = computed<any>(() =>\n  optionMap.value.get(currentValue.value)\n)\n\nlet removeShortcut: (() => void) | undefined\n\nwatch(\n  () => props.shortcut,\n  (value) => {\n    removeShortcut?.()\n\n    if (value) {\n      removeShortcut = videoState.addShortcut(value, handleClick)\n    }\n  },\n  { immediate: true }\n)\n\nonBeforeUnmount(() => removeShortcut?.())\n\nfunction handleClick() {\n  if (!props.disabled) {\n    emit('buttonClick')\n  }\n}\n\nfunction handleSelect(option: VideoControlOption) {\n  if (props.disabled || option.disabled) return\n\n  currentValue.value = option.value\n  emit('select', option)\n}\n</script>\n\n<template>\n  <div :class=\"className\">\n    <Tooltip\n      :trigger=\"props.focusable ? 'focus' : 'hover'\"\n      raw\n      shift\n      :append-to=\"videoState.placeId && `#${videoState.placeId}`\"\n      :popper-class=\"[tipClassIn, tipClass]\"\n      :no-hover=\"props.type === 'button'\"\n      :disabled=\"props.type === 'button' ? !props.label : props.disabled\"\n    >\n      <button\n        :class=\"ns.e('control-button')\"\n        type=\"button\"\n        @click=\"handleClick\"\n      >\n        <slot v-if=\"currentOption\" name=\"selected\" :option=\"currentOption\">\n          {{\n            currentOption.selectedLabel ||\n            currentOption.label ||\n            currentOption.value\n          }}\n        </slot>\n\n        <slot v-else />\n      </button>\n\n      <template #content>\n        <template v-if=\"props.type === 'button'\">\n          <span :class=\"ns.e('control-name')\">\n            <slot name=\"label\">\n              {{ props.label }}\n              <span v-if=\"props.shortcut\" :class=\"ns.e('control-shortcut')\">\n                {{ `(${props.shortcut})` }}\n              </span>\n            </slot>\n          </span>\n        </template>\n\n        <slot v-else name=\"panel\">\n          <ul v-if=\"props.type === 'select'\" :class=\"ns.e('control-options')\">\n            <li\n              v-for=\"(option, index) in objectOptions\"\n              :key=\"option.value\"\n              :class=\"{\n                [ns.e('control-option')]: true,\n                [ns.em('control-option', 'selected')]:\n                  option.value === currentValue,\n              }\"\n              @click=\"handleSelect(option)\"\n            >\n              <slot\n                name=\"option\"\n                :option=\"option\"\n                :index=\"index\"\n                :selected=\"option.value === currentValue\"\n              >\n                {{ option.label || option.value }}\n              </slot>\n            </li>\n          </ul>\n        </slot>\n      </template>\n    </Tooltip>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_createVNode","Tooltip"],"mappings":"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"}