import { PlayerProp, usePlayerContext, PlayerProps, Dispatcher, createDispatcher, findPlayer, WritableProps, isWritableProp, initialState, } from '@vime/core'; import { onMount } from 'svelte'; import { writable, get as unwrap, Writable, Readable } from 'svelte/store'; type PropStoreType
= P extends keyof WritableProps
? Writable ;
};
interface SvelteWebComponent (
prop: P,
initialValue: PlayerProps[P],
) => {
const store = writable(initialValue);
const canWrite = isWritableProp(prop);
const set = (value: PlayerProps[P]) => {
if (!unwrap(internalStoreRef.get('ready')!)) {
mountedQueue.push(() => {
dispatch(prop as any, value);
});
} else {
dispatch(prop as any, value);
}
};
const update = (updater: (value: PlayerProps[P]) => PlayerProps[P]) => {
set(updater(unwrap(store)));
};
internalStoreRef.set(prop, store);
return {
subscribe: store.subscribe,
update: canWrite ? update : undefined,
set: canWrite ? set : undefined,
};
};
const store = (Object.keys(initialState) as PlayerProp[]).reduce(
(prev, prop) => ({
...prev,
[prop]: vimeable(prop, initialState[prop]),
}),
{},
);
onMount(async () => {
let el: any = ref();
if (el.$$) el = el.getWebComponent();
const player = await findPlayer(el);
if (!player) return;
dispatch = createDispatcher(el);
internalStoreRef.get('ready')!.set(player.ready);
const disconnect = await usePlayerContext(
el,
Object.keys(initialState) as PlayerProp[],
(prop, value) => {
internalStoreRef.get(prop as PlayerProp)!.set(value);
},
player,
);
if (!player.ready) {
const off = await usePlayerContext(
el,
['ready'],
() => {
onPlayerMounted();
off();
},
player,
);
}
return () => {
disconnect();
internalStoreRef.clear();
};
});
return store as any;
};