Function setup

packages/vuetify/src/labs/VVideo/VVideo.tsx:104–579

(props, { attrs, emit, slots })

  },

  setup (props, { attrs, emit, slots }) {
    const { themeClasses } = provideTheme(props)
    const { densityClasses } = useDensity(props)
    const { dimensionStyles } = useDimension(props)
    const { elevationClasses } = useElevation(props)
    const { ssr } = useDisplay()

    const roundedForContainer = toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded)
    const roundedForControls = toRef(() => Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded ?? false)
    const { roundedClasses: roundedContainerClasses, roundedStyles: roundedContainerStyles } = useRounded(roundedForContainer)
    const { roundedClasses: roundedControlsClasses, roundedStyles: roundedControlsStyles } = useRounded(roundedForControls)

    const containerRef = ref<HTMLDivElement>()
    const videoRef = ref<HTMLVideoElement>()
    const controlsRef = ref<VVideoControls>()

    const playing = useProxiedModel(props, 'playing')
    const progress = useProxiedModel(props, 'progress')
    const volume = useProxiedModel(props, 'volume', 0, (v?: number | string) => Number(v ?? 0))

    const fullscreen = shallowRef(false)
    const waiting = shallowRef(false)
    const triggered = shallowRef(false)
    const startAfterLoad = shallowRef(false)
    const error = useProxiedModel(props, 'error')
    const state = shallowRef<'idle' | 'loading' | 'loaded' | 'error'>(props.autoplay ? 'loading' : 'idle')
    const duration = shallowRef(0)

    const fullscreenEnabled = toRef(() => !props.noFullscreen && !String(attrs.controlsList ?? '').includes('nofullscreen'))

    function onTimeupdate () {
      const { currentTime, duration } = videoRef.value!
      progress.value = duration === 0 ? 0 : 100 * currentTime / duration
    }

    async function onTriggered () {
      await nextTick()
      if (!videoRef.value) return
      videoRef.value.addEventListener('timeupdate', onTimeupdate)
      videoRef.value.volume = volume.value / 100
      if (state.value !== 'loaded') {
        state.value = 'loading'
      }
    }

    function onVideoLoaded () {
      state.value = 'loaded'
      duration.value = videoRef.value!.duration

      const startTime = Number(props.startAt ?? 0)
      if (startTime && startTime <= duration.value) {
        videoRef.value!.currentTime = startTime
        progress.value = duration.value === 0 ? 0 : 100 * startTime / duration.value
      }

      if (startAfterLoad.value) {
        setTimeout(() => playing.value = true, 100)
      }