Vue wrapper

[AlekseyPn]

Hi, you are testing vue wrapper on all kinds cases? I try customize VimeSettings and MenuRadio not working correct, when i try handle vCheck i got null to event argument, and when i open submenu, i will not back to all menu items. And how i can disable picture in picture for controls.

My code

<VimePlayer playsinline autoplay @vPlayingChange="playing = $event">
  <VimeHls preload="auto" version="latest" :hlsConfig="{}">
    <source :data-src="hls" type="application/x-mpegURL" />
  </VimeHls>
  <VimeDefaultUi noClickToPlay noControls noSettings noDblClickFullscreen>
    <VimeDefaultControls
      hideOnMouseLeave
      hideWhenPaused
      activeDuration="1500"
      waitForPlaybackStart
    ></VimeDefaultControls>
    <VimeControls pin="center" :hidden="playing" :class="$style.controls">
      <VimePlaybackControl></VimePlaybackControl>
    </VimeControls>
    <VimeSettings>
      <VimeSubmenu label="Language" :hint="language">
        <VimeMenuRadioGroup :value="language" @vCheck="onCheck($event)">
          <VimeMenuRadio label="RUS" value="RUS"></VimeMenuRadio>
          <VimeMenuRadio label="ENG" value="ENG"></VimeMenuRadio>
        </VimeMenuRadioGroup>
      </VimeSubmenu>
    </VimeSettings>
  </VimeDefaultUi>
</VimePlayer>

[AlekseyPn]

UPD: If i use controls with VimeUi, icon not showing on controls

<VimeUi>
  <VimeControls pin="topLeft">
    <VimeSettingsControl menu="language"></VimeSettingsControl>
  </VimeControls>
  <VimeMenu identifier="language">
    <VimeSettings>
      <VimeSubmenu label="Translations" hint="RUS"></VimeSubmenu>
    </VimeSettings>
  </VimeMenu>
</VimeUi>

[AlekseyPn]

Funny fact :D if i set active attribute to vime-sub-menu from developer tools, submenu works fine, and back navigation after click on menu item works.

[elimisteve]

I am having a similar problem from Svelte; creating a custom submenu doesn't work.

[elimisteve]

Custom submenu with "Playback Quality" and "Playback Rate" as options:

      <Player
        theme="dark"
        class=""
        style="--vm-player-theme: #e86c8b;"
      >
        <Video
          crossOrigin
          mediaTitle={`Video: ${$courseVideos[$currentVideoGid].name}`}
          class=""
          style=""
        >
          <source
            type="video/mp4"
            src={getVideoUrl()}
          />
        </Video>

        <Ui class="" style="">
          <DefaultControls class="" style="" hideOnMouseLeave activeDuration="{2000}" />
          <Settings class="" style="">

            <Submenu label="Playback Quality" hint={$playbackQuality || '4K'} class="" style="">
              <MenuRadioGroup value={$playbackQuality} on:vmCheck={onQualityChange} class="" style="">
                <MenuRadio class="" style="" label="4K" value="" />
                <MenuRadio class="" style="" label="720p" value="720" />
              </MenuRadioGroup>
            </Submenu>

            <Submenu label="Playback Rate" hint={$playbackRate === '1' ? 'Normal' : $playbackRate + 'x'} class="" style="">
              <MenuRadioGroup value={$playbackRate} on:vmCheck={onRateChange} class="" style="">
                <MenuRadio class="" style="" label="0.25" value="0.25" />
                <MenuRadio class="" style="" label="0.5" value="0.5" />
                <MenuRadio class="" style="" label="0.75" value="0.75" />
                <MenuRadio class="" style="" label="Normal" value="1" />
                <MenuRadio class="" style="" label="1.25" value="1.25" />
                <MenuRadio class="" style="" label="1.5" value="1.5" />
                <MenuRadio class="" style="" label="1.75" value="1.75" />
                <MenuRadio class="" style="" label="2" value="2" />
              </MenuRadioGroup>
            </Submenu>

          </Settings>
        </Ui>
      </Player>

When clicking on the first Submenu and hovering over the top row, it shows 2 separate list items overlapping:

No matter what I click on, the on:vmCheck functions don't run.

Also, 7 of the 8 options under Playback Rate don't show up; I see them in the DOM, but they aren't visible to the user; the Settings menu's height isn't expanding to show all the options.