Function setup

packages/vue/src/component.ts:17–119

(props, context)

  // https://github.com/vuejs/core/pull/2693
  // slots: Object as () => { player: VideoJsPlayer; state: DeepReadonly<PlayerState> },
  setup(props, context) {
    const { class: initClassName, ...rawProps } = toRaw(props)
    const mounted = shallowRef(false)
    const videoElement = shallowRef<HTMLVideoElement | null>(null)
    const playerResult = shallowRef<PlayerResult | null>(null)
    const videoJsPlayer = computed(() => {
      return playerResult.value ? playerResult.value.player : null
    })

    const state = ref<PlayerState | null>(null)
    const readOnlyState = computed<DeepReadonly<PlayerState> | null>(() => {
      return state.value ? readonly(state.value) : null
    })

    onMounted(() => {
      // Create player.
      const playerRes = createPlayer({
        element: videoElement.value!,
        props: rawProps,
        onEvent: context.emit
      })

      // Sync Video.js config change to update:prop event.
      bindPropUpdateEvent({
        player: playerRes.player,
        onEvent: context.emit
      })

      // Sync Vue class name to Video.js container.
      watch(
        () => props.class,
        (newClassName, oldClassName) => {
          const ocn = normalizeClass(oldClassName)
          const ncn = normalizeClass(newClassName)
          playerRes.updateClassNames(ocn, ncn)
        },
        { immediate: true }
      )

      // Sync fallback options to Video.js config.
      watch(
        () => props.options,
        (newOptions) => playerRes.updateOptions(newOptions ?? {}),
        { deep: true }
      )

      // Sync component props to Video.js config.
      propKeys
        .filter((key) => key !== 'options')
        .forEach((key) => {
          watch(
            () => props[key],
            (newValue) => playerRes.updatePropOption(key, newValue),
            { deep: true }
          )
        })

      // Create player state.