From 854d6a800d260e067098d9da3b7cd4ea92064128 Mon Sep 17 00:00:00 2001 From: Kevin Kipp Date: Mon, 4 Jan 2021 16:01:15 -0600 Subject: [PATCH 1/4] Document streamRef prop and fix types --- README.md | 5 +++++ example/index.tsx | 21 +++++++++++++++++++-- src/Stream.tsx | 12 ++++++++---- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index a6f332d..43b7109 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,11 @@ export type StreamProps = { * Either the video id or the signed url for the video you’ve uploaded to Cloudflare Stream should be included here. */ src: string; + /** + * Ref for accessing the underlying stream element. Useful for providing imperative access to the player API: + * https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api + */ + streamRef?: MutableRefObject; /** * URL to a VAST advertising tag. If specified, the player will attempt to display ads speficied by the VAST ad schema. */ diff --git a/example/index.tsx b/example/index.tsx index 9c653ec..7383943 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -1,12 +1,29 @@ import "react-app-polyfill/ie11"; import * as React from "react"; import * as ReactDOM from "react-dom"; -import { Thing } from "../."; +import { HTMLStreamElement, Stream } from "../."; const App = () => { + const ref = React.useRef(null); + return (
- + +
); }; diff --git a/src/Stream.tsx b/src/Stream.tsx index 7a1a83d..52cc62f 100644 --- a/src/Stream.tsx +++ b/src/Stream.tsx @@ -15,7 +15,7 @@ let streamScript = document.querySelector( function useStreamElement( containerRef: RefObject, - streamRef: MutableRefObject + streamRef: MutableRefObject ) { // Need to create stream element with document.createElement // because React will log console warnings if we render @@ -51,7 +51,7 @@ declare global { /** * Script to load the player. This initializes the player on the stream element */ -function useStreamScript(ref: MutableRefObject) { +function useStreamScript(ref: MutableRefObject) { useEffect(() => { if (streamScript === null) { streamScript = document.createElement("script"); @@ -299,7 +299,11 @@ type Compute = T extends Function ? T : {} & { [Key in keyof T]: T[Key] }; export type StreamProps = Compute< { - streamRef?: MutableRefObject; + /** + * Ref for accessing the underlying stream element. Useful for providing imperative access to the player API: + * https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api + */ + streamRef?: MutableRefObject; } & AttributeProps & PropertyProps & Events @@ -346,7 +350,7 @@ export const Stream: FC = ({ }) => { // initialize with no argument to get a mutable ref back instead // of readonly RefObject which cannot be mutated directly - const internalStreamRef = useRef(); + const internalStreamRef = useRef(null); // Because useRef needs to be called the same number of times // across renders, we create an internal ref that we only use // when playerRef is not provided From 3a1e2b14ac3d1e034341b0b4c6e4c3fb9b88bd6c Mon Sep 17 00:00:00 2001 From: Kevin Kipp Date: Mon, 4 Jan 2021 16:01:39 -0600 Subject: [PATCH 2/4] Remove inaccurate language about currentTime prop --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 43b7109..f63aa01 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ export type StreamProps = { */ controls?: boolean; /** - * Returns the current playback time in seconds. Setting this value seeks the video to a new time. + * Setting this value seeks the video to a new time. */ currentTime?: number; /** From 70281b5c66f9c8da809ca89efd80acf210a681bc Mon Sep 17 00:00:00 2001 From: Kevin Kipp Date: Tue, 5 Jan 2021 09:59:11 -0600 Subject: [PATCH 3/4] Use null instead of undefined in streamRef types --- README.md | 2 +- src/Stream.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f63aa01..3f8c99f 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ export type StreamProps = { * Ref for accessing the underlying stream element. Useful for providing imperative access to the player API: * https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api */ - streamRef?: MutableRefObject; + streamRef?: MutableRefObject; /** * URL to a VAST advertising tag. If specified, the player will attempt to display ads speficied by the VAST ad schema. */ diff --git a/src/Stream.tsx b/src/Stream.tsx index 52cc62f..9adc7ad 100644 --- a/src/Stream.tsx +++ b/src/Stream.tsx @@ -51,7 +51,7 @@ declare global { /** * Script to load the player. This initializes the player on the stream element */ -function useStreamScript(ref: MutableRefObject) { +function useStreamScript(ref: RefObject) { useEffect(() => { if (streamScript === null) { streamScript = document.createElement("script"); @@ -83,7 +83,7 @@ type Primitive = string | number | boolean; */ function useAttribute( attributeName: string, - ref: RefObject, + ref: RefObject, value?: Primitive ) { useEffect(() => { @@ -119,7 +119,7 @@ function useProperty( */ function useEvent( event: string, - ref: RefObject, + ref: RefObject, callback: EventListener = noop ) { useEffect(() => { From 66a42630b48e12bd3b436c0f4a0651df29471422 Mon Sep 17 00:00:00 2001 From: Kevin Kipp Date: Tue, 5 Jan 2021 12:28:14 -0600 Subject: [PATCH 4/4] Clarify limitations of currentTime prop --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3f8c99f..46153d9 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,8 @@ export type StreamProps = { */ controls?: boolean; /** - * Setting this value seeks the video to a new time. + * Setting this value seeks the video to a new time. Note that seeking only occurs when a new value is set. If this is problematic for your use-case, consider using the streamRef prop to set the currentTime directly on + * the stream element which will seek every time the value is set. */ currentTime?: number; /**