@cloudflare/stream-react - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/stream-react.cjs.development.js

@@ -10,2 +10,25 @@ 'use strict';
 
+var scriptLocation = "https://embed.videodelivery.net/embed/r4xu.fla9.latest.js";
+var streamScript = /*#__PURE__*/document.querySelector("script[src=\"" + scriptLocation + "\"]");
+
+function useStreamElement(containerRef, streamRef) {
+  // Need to create stream element with document.createElement
+  // because React will log console warnings if we render
+  // invalid HTML elements in JSX
+  React.useEffect(function () {
+    if (!containerRef.current) return; // grab current container from ref so we can use it in the
+    // callback we return for cleanup.
+
+    var container = containerRef.current;
+    var stream = document.createElement("stream"); // store stream element on ref
+
+    streamRef.current = stream; // insert stream element into dom
+
+    container.appendChild(stream);
+    return function () {
+      // clean up before unmounting or re-running the effect
+      container.removeChild(stream);
+    };
+  }, [streamRef, containerRef]);
+}
 /**
@@ -15,14 +38,22 @@ * Script to load the player. This initializes the player on the stream element
 
-function useStreamScript() {
+
+function useStreamScript(ref) {
   React.useEffect(function () {
-    var streamScript = document.createElement("script");
-    streamScript.setAttribute("data-cfasync", "false");
-    streamScript.setAttribute("defer", "true");
-    streamScript.setAttribute("type", "text/javascript");
-    streamScript.setAttribute("src", "https://embed.videodelivery.net/embed/r4xu.fla9.latest.js");
-    document.head.appendChild(streamScript);
-    return function () {
-      document.head.removeChild(streamScript);
-    }; // no dependencies in the dependancy array means this only fires on mount
+    if (streamScript === null) {
+      streamScript = document.createElement("script");
+      streamScript.setAttribute("data-cfasync", "false");
+      streamScript.setAttribute("defer", "true");
+      streamScript.setAttribute("type", "text/javascript");
+      streamScript.setAttribute("src", scriptLocation);
+      document.head.appendChild(streamScript);
+      return;
+    }
+
+    var streamElement = ref.current;
+
+    if (window.__stream && streamElement) {
+      window.__stream.initElement(streamElement);
+    } // no dependencies in the dependancy array means this only fires on mount
     // and the cleanup only fires on unmount.
+
   }, []);
@@ -126,3 +157,3 @@ }
   // of readonly RefObject which cannot be mutated directly
-  var internalStreamRef = React.useRef(); // Because useRef needs to be called the same number of times
+  var internalStreamRef = React.useRef(null); // Because useRef needs to be called the same number of times
   // across renders, we create an internal ref that we only use
@@ -134,22 +165,5 @@ // when playerRef is not provided
 
-  var containerRef = React.useRef(null); // Need to create stream element with document.createElement
-  // because React will log console warnings if we render
-  // invalid HTML elements in JSX
+  var containerRef = React.useRef(null);
+  useStreamElement(containerRef, ref); // set attributes
 
-  React.useEffect(function () {
-    if (!containerRef.current) return; // grab current container from ref so we can use it in the
-    // callback we return for cleanup.
-
-    var container = containerRef.current;
-    var stream = document.createElement("stream");
-
-    ref.current = stream; // insert stream element into dom
-
-    container.appendChild(stream);
-    return function () {
-      // clean up before unmounting or re-running the effect
-      container.removeChild(stream);
-    };
-  }, [ref]); // set attributes
-
   useAttribute("ad-url", ref, adUrl);
@@ -203,3 +217,3 @@ useAttribute("src", ref, src);
 
-  useStreamScript();
+  useStreamScript(ref);
   return React__default.createElement("div", {
@@ -206,0 +220,0 @@ style: {

dist/stream-react.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(e,n,r){t.useEffect((function(){if(n.current){var t=n.current;!1===r||void 0===r?t.removeAttribute(e):t.setAttribute(e,r.toString())}}),[e,r,n])}function a(e,n,r){t.useEffect((function(){n.current&&(n.current[e]=r)}),[e,r,n])}function o(e,n,r){void 0===r&&(r=u),t.useEffect((function(){if(n.current){var t=n.current;return t.addEventListener(e,r),function(){return t.removeEventListener(e,r)}}}),[r,e,n])}var u=function(){};exports.Stream=function(e){var u=e.src,d=e.adUrl,l=e.controls,i=e.muted,c=e.autoplay,s=e.loop,f=e.preload,m=e.height,p=e.width,h=e.poster,v=e.currentTime,g=e.volume,y=e.streamRef,E=e.onAbort,b=e.onCanPlay,S=e.onCanPlayThrough,A=e.onDurationChange,C=e.onEnded,P=e.onError,L=e.onLoadedData,T=e.onLoadedMetaData,j=e.onLoadStart,k=e.onPause,w=e.onPlay,x=e.onPlaying,R=e.onProgress,D=e.onRateChange,M=e.onSeeked,U=e.onSeeking,_=e.onStalled,q=e.onSuspend,O=e.onTimeUpdate,V=e.onVolumeChange,W=e.onWaiting,z=e.onStreamAdStart,B=e.onStreamAdEnd,F=e.onStreamAdTimeout,G=t.useRef(),H=null!=y?y:G,I=t.useRef(null);return t.useEffect((function(){if(I.current){var e=I.current,t=document.createElement("stream");return H.current=t,e.appendChild(t),function(){e.removeChild(t)}}}),[H]),r("ad-url",H,d),r("src",H,u),r("autoplay",H,c),r("controls",H,l),r("loop",H,s),r("preload",H,f),r("height",H,m),r("width",H,p),r("poster",H,h),r("muted",H,i),a("autoplay",H,null!=c&&c),a("controls",H,null!=l&&l),a("currentTime",H,null!=v?v:0),a("muted",H,null!=i&&i),a("loop",H,null!=s&&s),a("volume",H,null!=g?g:1),a("preload",H,"string"==typeof f?f:!0===f?"auto":"none"),o("abort",H,E),o("canplay",H,b),o("canplaythrough",H,S),o("durationchange",H,A),o("ended",H,C),o("error",H,P),o("loadeddata",H,L),o("loadedmetadata",H,T),o("loadstart",H,j),o("pause",H,k),o("play",H,w),o("playing",H,x),o("progress",H,R),o("ratechange",H,D),o("seeked",H,M),o("seeking",H,U),o("stalled",H,_),o("suspend",H,q),o("timeupdate",H,O),o("volumechange",H,V),o("waiting",H,W),o("stream-adstart",H,z),o("stream-adend",H,B),o("stream-adtimeout",H,F),t.useEffect((function(){var e=document.createElement("script");return e.setAttribute("data-cfasync","false"),e.setAttribute("defer","true"),e.setAttribute("type","text/javascript"),e.setAttribute("src","https://embed.videodelivery.net/embed/r4xu.fla9.latest.js"),document.head.appendChild(e),function(){document.head.removeChild(e)}}),[]),n.createElement("div",{style:{height:m,width:p},ref:I})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r="https://embed.videodelivery.net/embed/r4xu.fla9.latest.js",o=document.querySelector('script[src="'+r+'"]');function a(e,n,r){t.useEffect((function(){if(n.current){var t=n.current;!1===r||void 0===r?t.removeAttribute(e):t.setAttribute(e,r.toString())}}),[e,r,n])}function u(e,n,r){t.useEffect((function(){n.current&&(n.current[e]=r)}),[e,r,n])}function d(e,n,r){void 0===r&&(r=i),t.useEffect((function(){if(n.current){var t=n.current;return t.addEventListener(e,r),function(){return t.removeEventListener(e,r)}}}),[r,e,n])}var i=function(){};exports.Stream=function(e){var i=e.src,l=e.adUrl,c=e.controls,s=e.muted,f=e.autoplay,m=e.loop,p=e.preload,h=e.height,v=e.width,g=e.poster,y=e.currentTime,E=e.volume,b=e.streamRef,S=e.onAbort,A=e.onCanPlay,w=e.onCanPlayThrough,C=e.onDurationChange,P=e.onEnded,_=e.onError,L=e.onLoadedData,T=e.onLoadedMetaData,j=e.onLoadStart,k=e.onPause,x=e.onPlay,R=e.onPlaying,D=e.onProgress,q=e.onRateChange,M=e.onSeeked,U=e.onSeeking,O=e.onStalled,V=e.onSuspend,W=e.onTimeUpdate,z=e.onVolumeChange,B=e.onWaiting,F=e.onStreamAdStart,G=e.onStreamAdEnd,H=e.onStreamAdTimeout,I=t.useRef(null),J=null!=b?b:I,K=t.useRef(null);return function(e,n){t.useEffect((function(){if(e.current){var t=e.current,r=document.createElement("stream");return n.current=r,t.appendChild(r),function(){t.removeChild(r)}}}),[n,e])}(K,J),a("ad-url",J,l),a("src",J,i),a("autoplay",J,f),a("controls",J,c),a("loop",J,m),a("preload",J,p),a("height",J,h),a("width",J,v),a("poster",J,g),a("muted",J,s),u("autoplay",J,null!=f&&f),u("controls",J,null!=c&&c),u("currentTime",J,null!=y?y:0),u("muted",J,null!=s&&s),u("loop",J,null!=m&&m),u("volume",J,null!=E?E:1),u("preload",J,"string"==typeof p?p:!0===p?"auto":"none"),d("abort",J,S),d("canplay",J,A),d("canplaythrough",J,w),d("durationchange",J,C),d("ended",J,P),d("error",J,_),d("loadeddata",J,L),d("loadedmetadata",J,T),d("loadstart",J,j),d("pause",J,k),d("play",J,x),d("playing",J,R),d("progress",J,D),d("ratechange",J,q),d("seeked",J,M),d("seeking",J,U),d("stalled",J,O),d("suspend",J,V),d("timeupdate",J,W),d("volumechange",J,z),d("waiting",J,B),d("stream-adstart",J,F),d("stream-adend",J,G),d("stream-adtimeout",J,H),function(e){t.useEffect((function(){if(null===o)return(o=document.createElement("script")).setAttribute("data-cfasync","false"),o.setAttribute("defer","true"),o.setAttribute("type","text/javascript"),o.setAttribute("src",r),void document.head.appendChild(o);var t=e.current;window.__stream&&t&&window.__stream.initElement(t)}),[])}(J),n.createElement("div",{style:{height:h,width:v},ref:K})};
 //# sourceMappingURL=stream-react.cjs.production.min.js.map

dist/stream-react.esm.js

 import React, { useRef, useEffect } from 'react';
 
+var scriptLocation = "https://embed.videodelivery.net/embed/r4xu.fla9.latest.js";
+var streamScript = /*#__PURE__*/document.querySelector("script[src=\"" + scriptLocation + "\"]");
+
+function useStreamElement(containerRef, streamRef) {
+  // Need to create stream element with document.createElement
+  // because React will log console warnings if we render
+  // invalid HTML elements in JSX
+  useEffect(function () {
+    if (!containerRef.current) return; // grab current container from ref so we can use it in the
+    // callback we return for cleanup.
+
+    var container = containerRef.current;
+    var stream = document.createElement("stream"); // store stream element on ref
+
+    streamRef.current = stream; // insert stream element into dom
+
+    container.appendChild(stream);
+    return function () {
+      // clean up before unmounting or re-running the effect
+      container.removeChild(stream);
+    };
+  }, [streamRef, containerRef]);
+}
 /**
@@ -7,14 +30,22 @@ * Script to load the player. This initializes the player on the stream element
 
-function useStreamScript() {
+
+function useStreamScript(ref) {
   useEffect(function () {
-    var streamScript = document.createElement("script");
-    streamScript.setAttribute("data-cfasync", "false");
-    streamScript.setAttribute("defer", "true");
-    streamScript.setAttribute("type", "text/javascript");
-    streamScript.setAttribute("src", "https://embed.videodelivery.net/embed/r4xu.fla9.latest.js");
-    document.head.appendChild(streamScript);
-    return function () {
-      document.head.removeChild(streamScript);
-    }; // no dependencies in the dependancy array means this only fires on mount
+    if (streamScript === null) {
+      streamScript = document.createElement("script");
+      streamScript.setAttribute("data-cfasync", "false");
+      streamScript.setAttribute("defer", "true");
+      streamScript.setAttribute("type", "text/javascript");
+      streamScript.setAttribute("src", scriptLocation);
+      document.head.appendChild(streamScript);
+      return;
+    }
+
+    var streamElement = ref.current;
+
+    if (window.__stream && streamElement) {
+      window.__stream.initElement(streamElement);
+    } // no dependencies in the dependancy array means this only fires on mount
     // and the cleanup only fires on unmount.
+
   }, []);
@@ -118,3 +149,3 @@ }
   // of readonly RefObject which cannot be mutated directly
-  var internalStreamRef = useRef(); // Because useRef needs to be called the same number of times
+  var 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
@@ -126,22 +157,5 @@ // when playerRef is not provided
 
-  var containerRef = useRef(null); // Need to create stream element with document.createElement
-  // because React will log console warnings if we render
-  // invalid HTML elements in JSX
+  var containerRef = useRef(null);
+  useStreamElement(containerRef, ref); // set attributes
 
-  useEffect(function () {
-    if (!containerRef.current) return; // grab current container from ref so we can use it in the
-    // callback we return for cleanup.
-
-    var container = containerRef.current;
-    var stream = document.createElement("stream");
-
-    ref.current = stream; // insert stream element into dom
-
-    container.appendChild(stream);
-    return function () {
-      // clean up before unmounting or re-running the effect
-      container.removeChild(stream);
-    };
-  }, [ref]); // set attributes
-
   useAttribute("ad-url", ref, adUrl);
@@ -195,3 +209,3 @@ useAttribute("src", ref, src);
 
-  useStreamScript();
+  useStreamScript(ref);
   return React.createElement("div", {
@@ -198,0 +212,0 @@ style: {

dist/Stream.d.ts

 import { MutableRefObject, FC } from "react";
+declare global {
+    interface Window {
+        __stream?: {
+            init: () => void;
+            initElement: (streamElement: HTMLStreamElement) => void;
+        };
+    }
+}
 export declare type HTMLStreamElement = HTMLVideoElement;
@@ -163,5 +171,9 @@ declare type AttributeProps = {
 export declare type StreamProps = Compute<{
-    streamRef?: MutableRefObject<HTMLStreamElement>;
+    /**
+     * 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<HTMLStreamElement | null>;
 } & AttributeProps & PropertyProps & Events>;
 export declare const Stream: FC<StreamProps>;
 export {};

package.json

 {
   "name": "@cloudflare/stream-react",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "license": "BSD-3-Clause",
@@ -5,0 +5,0 @@ "publishConfig": {

README.md

@@ -35,2 +35,7 @@ # @cloudflare/stream-react
   /**
+   * 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<HTMLStreamElement | null>;
+  /**
    * URL to a VAST advertising tag. If specified, the player will attempt to display ads speficied by the VAST ad schema.
@@ -64,3 +69,4 @@ */
   /**
-   * 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. 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.
    */
@@ -67,0 +73,0 @@ currentTime?: number;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

115556

increased by5.97%

Lines of code

984

increased by6.03%

Number of lines in readme file

188

increased by3.3%

No dependency changes