@codecademy/gamut
73.6.173.6.2-alpha.3e37cd.0
dist/Video/index.js~
dist/Video/index.jsModified+9
Index: package/dist/Video/index.js
===================================================================
--- package/dist/Video/index.js
+++ package/dist/Video/index.js
@@ -20,8 +20,16 @@
showPlayerEmbed = true
} = props;
const [loading, setLoading] = useState(true);
const isMounted = useIsMounted();
+
+ /*
+ * VideoProps only widens its type for `data-*`/`aria-*` attributes, so
+ * filtering by key prefix picks up exactly (and only) those without also
+ * forwarding unrelated named props (textTracks, thumbnails, etc.) onto the
+ * DOM wrapper below.
+ */
+ const domAttrs = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith('data-') || key.startsWith('aria-')));
const config = {
youtube: {
playerVars: {
color: 'white'
@@ -53,8 +61,9 @@
* Remove ReactPlayer once Vidstack is validated.
*/
if (isExternallyHostedVideo(videoUrl) && !hasTracksWithCaptionOrSubtitle && showPlayerEmbed) {
return /*#__PURE__*/_jsx(Box, {
+ ...domAttrs,
bg: loading ? 'black' : undefined,
borderRadius: "md",
className: className,
overflow: "hidden",