import { onMounted , readonly , Ref , ref , watch } from 'vue' ; import { createDispatcher , Dispatcher , findPlayer , PlayerProps , WritableProps , usePlayerContext as useVimeContext , isWritableProp , } from '@vime/core' ; param el export const usePlayer = < T extends HTMLElement > ( el ) => { const player = ref < HTMLVmPlayerElement | null > ( null ) ; const find = async ( ) => { player . value = el . value ? ( await findPlayer ( el . value ) ) ?? null : null ; } ; onMounted ( find ) ; watch ( el , find ) ; return readonly ( player ) as Readonly < Ref < HTMLVmPlayerElement | null > > ; } ; export type PropBinding < P extends keyof PlayerProps > = P extends keyof WritableProps ? Ref < PlayerProps [ P ] > : Readonly < Ref < PlayerProps [ P ] > > ; param el param prop param defaultValue export const usePlayerContext = < T extends HTMLElement , P extends keyof PlayerProps > ( el , prop , defaultValue ) : PropBinding < P > => { const noop = ( ) => { } ; const binding = ref ( defaultValue ) ; const dispatch = ref < Dispatcher > ( noop ) ; let prevValue = defaultValue ; watch ( el , ( ) => { dispatch . value = el . value ? createDispatcher ( el . value ) : noop ; } ) ; watch ( binding , ( ) => { if ( binding . value !== prevValue ) dispatch . value ( prop as any , binding . value ) ; } ) ; watch ( el , async ( _a , _b , onInvalidate ) => { if ( ! el . value ) return ; const off = await useVimeContext ( el . value , [ prop ] , ( _ , newValue ) => { binding . value = newValue as any ; prevValue = newValue as any ; } ) ; onInvalidate ( off ) ; } ) ; return ( isWritableProp ( prop ) ? binding : readonly ( binding ) ) as any ; } ;