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
4 changes: 3 additions & 1 deletion src/YouTube.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ function filterResetOptions(opts) {
* @param {Object} props
*/
function shouldResetPlayer(prevProps, props) {
return !isEqual(filterResetOptions(prevProps.opts), filterResetOptions(props.opts));
return (
prevProps.videoId !== props.videoId || !isEqual(filterResetOptions(prevProps.opts), filterResetOptions(props.opts))
);
}

/**
Expand Down
37 changes: 37 additions & 0 deletions src/Youtube.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,43 @@ describe('YouTube', () => {

// player is destroyed & rebound, despite the changes
expect(playerMock.destroy).toHaveBeenCalled();
// and the video is updated
expect(playerMock.loadVideoById).toHaveBeenCalled();
});

it('should not create and bind a new YouTube player when only playerVars.autoplay, playerVars.start, or playerVars.end change', () => {
const { rerender } = render(
<YouTube
videoId="XxVg_s8xAms"
opts={{
width: '480px',
height: '360px',
playerVars: {
autoplay: 0,
start: 0,
end: 50,
},
}}
/>,
);

rerender(
<YouTube
videoId="XxVg_s8xAms"
opts={{
width: '480px',
height: '360px',
playerVars: {
autoplay: 1, // changed, does not force destroy & rebind
start: 10, // changed, does not force destroy & rebind
end: 20, // changed, does not force destroy & rebind
},
}}
/>,
);

// player is destroyed & rebound, despite the changes
expect(playerMock.destroy).not.toHaveBeenCalled();
// instead only the video is updated
expect(playerMock.loadVideoById).toHaveBeenCalled();
});
Expand Down