Plyr Radio Buttons not being imported correctly

[taran2k]

Current Behavior:

Currently, the radio buttons that should appear within the submenu allowing for quality/speed selection don't appear, since they are not correctly being imported. This causes the quality / speed change functionality to be broken. See screen capture:

currrent behaviour

This is due to the fact that the media-radio element is not (correctly) being imported/initialized. We can see this if we try to locate the element in the console:

It is not there. This behaviour does not happen when using a CDN import. CDN imports for the same release versions work fine, the issue I'm experiencing is with the npm package.

The issue can be solved by manually importing the radio element and defining it, resulting in the behaviour described under 'Expected Behavior':

import {MediaRadioElement, defineCustomElement} from 'vidstack/elements';
defineCustomElement(MediaRadioElement);

Expected Behavior:

What we expect to happen:

expected

And:

Steps To Reproduce:

Set up a project using the npm package. This issue does not occur when using CDN imports.

Environment:

• Framework: Vue 2.7