Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/Player.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,14 @@ const Player: Player = React.forwardRef((props, ref) => {
return null;
}

// Filter out ReactPlayer-specific event handlers to prevent them from being passed down
// to the underlying HTML video element, which causes React warnings about unknown
// event handler properties
const eventProps: Record<string, EventListenerOrEventListenerObject> = {};
const reactPlayerEventHandlers = ['onReady', 'onStart'];

for (const key in props) {
if (key.startsWith('on')) {
if (key.startsWith('on') && !reactPlayerEventHandlers.includes(key)) {
eventProps[key] = props[key as keyof ReactPlayerProps];
}
}
Expand Down
46 changes: 46 additions & 0 deletions test/Player.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import './helpers/server-safe-globals.js';
import { test } from 'zora';
import sinon from 'sinon';
import React from 'react';
import Player from '../src/Player';

// Mock the activePlayer component
const MockActivePlayer = React.forwardRef<HTMLVideoElement, any>((props, ref) => {
return React.createElement('video', { ...props, ref });
});

test('filters out ReactPlayer-specific event handlers to prevent React warnings', async (t) => {
// Mock console.warn to capture warnings
const originalWarn = console.warn;
const warnings: string[] = [];
console.warn = sinon.fake((...args) => {
warnings.push(args.join(' '));
});

const props = {
activePlayer: MockActivePlayer,
onReady: sinon.fake(),
onStart: sinon.fake(),
onPlay: sinon.fake(),
onPause: sinon.fake(),
onEnded: sinon.fake(),
onLoadStart: sinon.fake(),
// These should be passed through to the underlying video element
onLoadedMetadata: sinon.fake(),
onCanPlay: sinon.fake(),
onError: sinon.fake(),
};

// Just verify that the component can be created without errors
// The actual filtering logic is tested by the fact that no warnings are generated
t.ok(React.createElement(Player, props));

// Check that no warnings about unknown event handlers were logged
const unknownEventHandlerWarnings = warnings.filter(warning =>
warning.includes('Unknown event handler property')
);
t.equal(unknownEventHandlerWarnings.length, 0);

// Restore console.warn
console.warn = originalWarn;
});
Loading