bug: svelte demo of UI component Control onClick is not working

[jzsplk]

Bug Report

Vime version: 5.0.25

Provider:

[x] Audio [] Video [] HLS [] DASH [] YouTube [] Vimeo [] Dailymotion

Current behavior: When trying the svelte UI component Control, the onClick is not working when the button clicked

Expected behavior: the click should be triggered.

Steps to reproduce: like the demo code in https://vimejs.com/components/ui/controls/control

1. create a demo app in the codesandbox
2. like the demo of the control component in svelte, add a control component in Ui
3. click the play button see: https://codesandbox.io/s/video-demo-control-bug-8slk8?file=/FakePlayControl.svelte

Related code:

<Control
  keys="k"
  label={$i18n.playback}
  pressed={paused}
  on:click={onClick}
  bind:this={ref}
>
  <Icon name={icon} />
  <Tooltip>{tooltip} (k)</Tooltip>
</Control>

<script lang="ts">
  import { usePlayerStore, Control, Icon, Tooltip } from '@vime/svelte';

  let ref: Control;

  const { paused, i18n } = usePlayerStore(() => ref);

  const onClick = () => {
    $paused = !$paused;
  };

  $: icon = $paused ? 'play' : 'pause';
  $: tooltip = $paused ? $i18n.play : $i18n.pause;
</script>

Other information:

[biaocy]

Workaround: bind the event handler to the actual HTML element (ref.getWebComponent())