From b6b3f8de6399f52b5ec1a322353467c285ca5ee0 Mon Sep 17 00:00:00 2001 From: Ryan Date: Wed, 5 Oct 2022 09:08:43 -0400 Subject: [PATCH] fix(hovervideoplayer): remove default "anonymous" value for crossOrigin prop Updates crossOrigin prop to default to null because there actually is a distinction between not setting it and setting it to "anonymous" which can cause issues for some people's setups. Defaulting to null instead should work better for most people, and then if someone is having CORS issues with their video, they can opt into setting crossOrigin="anonymous" re #83, #84 --- docs/README.md | 10 ++++++---- src/HoverVideoPlayer.types.ts | 2 +- src/component/HoverVideoPlayer.tsx | 2 +- tests/cypress/component/videoAttributes.spec.tsx | 10 +++------- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/docs/README.md b/docs/README.md index 0ebba5b..ca071aa 100644 --- a/docs/README.md +++ b/docs/README.md @@ -159,15 +159,17 @@ In practice this looks like: ### crossOrigin -**Type**: `string` | **Default**: `"anonymous"` +**Type**: `string` | **Default**: `null` + +The `crossOrigin` prop maps directly to the [HTML Video element's crossorigin attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) and allows us to define how the video element should handle CORS requests. For most purposes, you should not need to worry about setting this, but if you are having trouble with CORS a good first step may be to try setting it to `"anonymous"`. -The `crossOrigin` prop maps directly to the [HTML Video element's crossorigin attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin) and allows us to define how the video element should handle CORS requests. For most purposes, you should not need to worry about setting this. The acceptable values are: +The acceptable values are: -- `"anonymous"`: The video element will send cross-origin requests with no credentials. This is the browser default and usually all you need for most purposes. +- `"anonymous"`: The video element will send cross-origin requests with no credentials. - `"use-credentials"`: The video element will send cross-origin requests with credentials. ```jsx - + ``` ## Overlays diff --git a/src/HoverVideoPlayer.types.ts b/src/HoverVideoPlayer.types.ts index d225ced..d183281 100644 --- a/src/HoverVideoPlayer.types.ts +++ b/src/HoverVideoPlayer.types.ts @@ -191,7 +191,7 @@ export interface HoverVideoPlayerProps * This is the browser default and usually all you need for most purposes. * - **"use-credentials"**: The video element will send cross-origin requests with credentials. * - * @defaultValue "anonymous" + * @defaultValue null */ crossOrigin?: 'anonymous' | 'use-credentials'; /** diff --git a/src/component/HoverVideoPlayer.tsx b/src/component/HoverVideoPlayer.tsx index 8436069..28c4975 100644 --- a/src/component/HoverVideoPlayer.tsx +++ b/src/component/HoverVideoPlayer.tsx @@ -47,7 +47,7 @@ export default function HoverVideoPlayer({ volume = 1, loop = true, preload = null, - crossOrigin = 'anonymous', + crossOrigin = null, controls = false, controlsList = null, disableRemotePlayback = true, diff --git a/tests/cypress/component/videoAttributes.spec.tsx b/tests/cypress/component/videoAttributes.spec.tsx index 4f44611..9cba6af 100644 --- a/tests/cypress/component/videoAttributes.spec.tsx +++ b/tests/cypress/component/videoAttributes.spec.tsx @@ -58,17 +58,13 @@ describe('Sets attributes on the video element correctly', () => { }); describe('crossOrigin', () => { - it('sets crossOrigin to anonymous by default', () => { + it('does not set crossOrigin by default', () => { mount(); - cy.get(videoElementSelector).should( - 'have.attr', - 'crossorigin', - 'anonymous' - ); + cy.get(videoElementSelector).should('not.have.attr', 'crossorigin'); cy.get(videoElementSelector) .invoke('prop', 'crossOrigin') - .should('eq', 'anonymous'); + .should('be.null'); }); it('sets crossorigin on the video when the crossOrigin prop is set', () => {