search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.21k stars 62 forks source link

Media controller hotkeys attribute fails on vue #833

Closed clemator closed 5 months ago

clemator commented 7 months ago

Vue: 3.4.19 Media-chrome: 2.2.5

Observed behavior

When setting the hotkeys attribute to the value noarrowleft noarrowright we have a warning from vue and the hotkey is still working.

Expected behavior

No warning from Vue and the hotkeys are disabled

Steps:

Go to https://stackblitz.com/edit/vitejs-vite-zpbjww?file=src%2FApp.vue and open the console You will see a warning from Vue. Focus on the video by clicking it and press left or right arrow.

Capture d’écran 2024-02-22 à 18 45 13
cjpillsbury commented 6 months ago

Hey there @clemator unfortunately it looks like Vue gets confused when there's a read only property with the same name as a corresponding attribute, which is the case for hotkeys. There may be a cleaner way to do this in Vue 3 (not my core area of expertise), but, as a workaround, you should be able to use a ref + onMounted to explicitly set the attribute for your use case. See my modified version of your example code here: https://stackblitz.com/edit/vitejs-vite-5wur6c?file=src%2FApp.vue Let me know if that works out for you, and thanks for the feedback!

clemator commented 6 months ago

Hello @cjpillsbury, yes this works as a work around 👍 thank you for looking at it!