@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/stream-react.cjs.development.js

@@ -10,10 +10,12 @@ 'use strict';
 
-var sdkScriptLocation = "https://embed.videodelivery.net/embed/sdk.latest.js";
+var sdkScriptLocation = "https://embed.videodelivery.net/embed/sdk.latest.js"; // This needs to be wrapped as such for two reasons:
+// - Stream is a function, and useState invokes functions immediately and uses the return value.
+// - We need to check typeof on window to ensure safety for server side rendering.
+
+var safelyAccessStreamSDK = function safelyAccessStreamSDK() {
+  if (typeof window === "undefined") return undefined;
+  return window.Stream;
+};
 function useStreamSDK() {
-  // Because we're storing the Stream function in state, we need to pass a
-  // function in that returns it because React will invoke functions that
-  // are passed into state
-  var _useState = React.useState(function () {
-    return window.Stream;
-  }),
+  var _useState = React.useState(safelyAccessStreamSDK),
       streamSdk = _useState[0],
@@ -27,6 +29,3 @@ setStreamSdk = _useState[1];
       script.addEventListener("load", function () {
-        // Same thing here, passing in a function that will return window.Stream
-        setStreamSdk(function () {
-          return window.Stream;
-        });
+        setStreamSdk(safelyAccessStreamSDK);
       });
@@ -211,4 +210,6 @@
   React.useEffect(function () {
-    if (iframeRef.current && window.Stream) {
-      var api = window.Stream(iframeRef.current);
+    var Stream = safelyAccessStreamSDK();
+
+    if (iframeRef.current && Stream) {
+      var api = Stream(iframeRef.current);
       ref.current = api;
@@ -215,0 +216,0 @@ var videoHeight = api.videoHeight,

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

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),o=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(){var e=t.useState((function(){return window.Stream})),o=e[0],n=e[1];return t.useEffect((function(){if(!o){var e=document.querySelector("script[src='https://embed.videodelivery.net/embed/sdk.latest.js']"),t=null!=e?e:document.createElement("script");t.addEventListener("load",(function(){n((function(){return window.Stream}))})),e||(t.src="https://embed.videodelivery.net/embed/sdk.latest.js",document.head.appendChild(t))}}),[o]),o}function r(e,o,n){t.useEffect((function(){o.current&&(o.current[e]=n)}),[e,n,o])}function a(e,o,n){void 0===n&&(n=i),t.useEffect((function(){if(o.current){var t=o.current;return t.addEventListener(e,n),function(){return t.removeEventListener(e,n)}}}),[n,e,o])}var i=function(){},d={position:"absolute",top:0,left:0,right:0,bottom:0,height:"100%",width:"100%"},u=function(e){var n=e.children,r=e.responsive,a=e.className,i=e.videoDimensions,d=i.videoHeight,u=i.videoWidth,s=t.useMemo((function(){return{position:"relative",paddingTop:u>0?d/u*100+"%":void 0}}),[u,d]);return o.createElement("div",{className:a,style:r?s:void 0},n)},s=function(e){var n=e.src,i=e.adUrl,s=e.controls,l=void 0!==s&&s,c=e.muted,m=void 0!==c&&c,p=e.autoplay,v=void 0!==p&&p,f=e.loop,h=void 0!==f&&f,g=e.preload,y=void 0===g?"metadata":g,S=e.height,E=e.width,w=e.poster,b=e.currentTime,C=void 0===b?0:b,P=e.volume,R=void 0===P?1:P,W=e.streamRef,j=e.responsive,k=void 0===j||j,D=e.className,H=e.onAbort,L=e.onCanPlay,T=e.onCanPlayThrough,U=e.onDurationChange,A=e.onEnded,M=e.onError,N=e.onLoadedData,x=e.onLoadedMetaData,q=e.onLoadStart,z=e.onPause,B=e.onPlay,I=e.onPlaying,O=e.onProgress,_=e.onRateChange,F=e.onResize,K=e.onSeeked,V=e.onSeeking,G=e.onStalled,J=e.onSuspend,Q=e.onTimeUpdate,X=e.onVolumeChange,Y=e.onWaiting,Z=e.onStreamAdStart,$=e.onStreamAdEnd,ee=e.onStreamAdTimeout,te=t.useRef(),oe=null!=W?W:te,ne=t.useState({videoHeight:0,videoWidth:0}),re=ne[0],ae=ne[1],ie=t.useRef(null),de=function(e,o){var n=o.muted,r=o.preload,a=o.loop,i=o.autoplay,d=o.controls,u=o.poster,s=o.adUrl,l=[u&&"poster="+encodeURIComponent(u),s&&"ad-url="+encodeURIComponent(s),n&&"muted=true",r&&"preload="+r,a&&"loop=true",i&&"autoplay=true",!d&&"controls=false"].filter(Boolean).join("&");return t.useMemo((function(){return"https://iframe.videodelivery.net/"+e+"?"+l}),[e])}(n,{muted:m,preload:y,loop:h,autoplay:v,controls:l,poster:w,adUrl:i});return r("muted",oe,m),r("controls",oe,l),r("src",oe,n),r("autoplay",oe,v),r("currentTime",oe,C),r("loop",oe,h),r("preload",oe,y),r("volume",oe,R),t.useEffect((function(){if(ie.current&&window.Stream){var e=window.Stream(ie.current);oe.current=e;var t=e.videoHeight,o=e.videoWidth;t&&o&&ae({videoHeight:t,videoWidth:o})}}),[]),a("abort",oe,H),a("canplay",oe,L),a("canplaythrough",oe,T),a("durationchange",oe,U),a("ended",oe,A),a("error",oe,M),a("loadeddata",oe,N),a("loadedmetadata",oe,x),a("loadstart",oe,q),a("pause",oe,z),a("play",oe,B),a("playing",oe,I),a("progress",oe,O),a("ratechange",oe,_),a("seeked",oe,K),a("seeking",oe,V),a("stalled",oe,G),a("suspend",oe,J),a("timeupdate",oe,Q),a("volumechange",oe,X),a("waiting",oe,Y),a("stream-adstart",oe,Z),a("stream-adend",oe,$),a("stream-adtimeout",oe,ee),a("resize",oe,(function(){if(oe.current){var e=oe.current;ae({videoHeight:e.videoHeight,videoWidth:e.videoWidth}),F&&F()}})),o.createElement(u,{className:D,responsive:k,videoDimensions:re},o.createElement("iframe",{ref:ie,src:de,style:k?d:void 0,frameBorder:0,height:S,width:E,allow:"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;",allowFullScreen:!0}))};exports.Stream=function(e){return n()?o.createElement(s,Object.assign({},e)):null},exports.useStreamSDK=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),o=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=function(){if("undefined"!=typeof window)return window.Stream};function r(){var e=t.useState(n),o=e[0],r=e[1];return t.useEffect((function(){if(!o){var e=document.querySelector("script[src='https://embed.videodelivery.net/embed/sdk.latest.js']"),t=null!=e?e:document.createElement("script");t.addEventListener("load",(function(){r(n)})),e||(t.src="https://embed.videodelivery.net/embed/sdk.latest.js",document.head.appendChild(t))}}),[o]),o}function a(e,o,n){t.useEffect((function(){o.current&&(o.current[e]=n)}),[e,n,o])}function i(e,o,n){void 0===n&&(n=d),t.useEffect((function(){if(o.current){var t=o.current;return t.addEventListener(e,n),function(){return t.removeEventListener(e,n)}}}),[n,e,o])}var d=function(){},u={position:"absolute",top:0,left:0,right:0,bottom:0,height:"100%",width:"100%"},s=function(e){var n=e.children,r=e.responsive,a=e.className,i=e.videoDimensions,d=i.videoHeight,u=i.videoWidth,s=t.useMemo((function(){return{position:"relative",paddingTop:u>0?d/u*100+"%":void 0}}),[u,d]);return o.createElement("div",{className:a,style:r?s:void 0},n)},l=function(e){var r=e.src,d=e.adUrl,l=e.controls,c=void 0!==l&&l,p=e.muted,v=void 0!==p&&p,m=e.autoplay,f=void 0!==m&&m,h=e.loop,g=void 0!==h&&h,y=e.preload,S=void 0===y?"metadata":y,E=e.height,b=e.width,w=e.poster,C=e.currentTime,P=void 0===C?0:C,R=e.volume,W=void 0===R?1:R,j=e.streamRef,k=e.responsive,D=void 0===k||k,H=e.className,L=e.onAbort,T=e.onCanPlay,U=e.onCanPlayThrough,A=e.onDurationChange,M=e.onEnded,N=e.onError,x=e.onLoadedData,q=e.onLoadedMetaData,z=e.onLoadStart,B=e.onPause,I=e.onPlay,O=e.onPlaying,_=e.onProgress,F=e.onRateChange,K=e.onResize,V=e.onSeeked,G=e.onSeeking,J=e.onStalled,Q=e.onSuspend,X=e.onTimeUpdate,Y=e.onVolumeChange,Z=e.onWaiting,$=e.onStreamAdStart,ee=e.onStreamAdEnd,te=e.onStreamAdTimeout,oe=t.useRef(),ne=null!=j?j:oe,re=t.useState({videoHeight:0,videoWidth:0}),ae=re[0],ie=re[1],de=t.useRef(null),ue=function(e,o){var n=o.muted,r=o.preload,a=o.loop,i=o.autoplay,d=o.controls,u=o.poster,s=o.adUrl,l=[u&&"poster="+encodeURIComponent(u),s&&"ad-url="+encodeURIComponent(s),n&&"muted=true",r&&"preload="+r,a&&"loop=true",i&&"autoplay=true",!d&&"controls=false"].filter(Boolean).join("&");return t.useMemo((function(){return"https://iframe.videodelivery.net/"+e+"?"+l}),[e])}(r,{muted:v,preload:S,loop:g,autoplay:f,controls:c,poster:w,adUrl:d});return a("muted",ne,v),a("controls",ne,c),a("src",ne,r),a("autoplay",ne,f),a("currentTime",ne,P),a("loop",ne,g),a("preload",ne,S),a("volume",ne,W),t.useEffect((function(){var e=n();if(de.current&&e){var t=e(de.current);ne.current=t;var o=t.videoHeight,r=t.videoWidth;o&&r&&ie({videoHeight:o,videoWidth:r})}}),[]),i("abort",ne,L),i("canplay",ne,T),i("canplaythrough",ne,U),i("durationchange",ne,A),i("ended",ne,M),i("error",ne,N),i("loadeddata",ne,x),i("loadedmetadata",ne,q),i("loadstart",ne,z),i("pause",ne,B),i("play",ne,I),i("playing",ne,O),i("progress",ne,_),i("ratechange",ne,F),i("seeked",ne,V),i("seeking",ne,G),i("stalled",ne,J),i("suspend",ne,Q),i("timeupdate",ne,X),i("volumechange",ne,Y),i("waiting",ne,Z),i("stream-adstart",ne,$),i("stream-adend",ne,ee),i("stream-adtimeout",ne,te),i("resize",ne,(function(){if(ne.current){var e=ne.current;ie({videoHeight:e.videoHeight,videoWidth:e.videoWidth}),K&&K()}})),o.createElement(s,{className:H,responsive:D,videoDimensions:ae},o.createElement("iframe",{ref:de,src:ue,style:D?u:void 0,frameBorder:0,height:E,width:b,allow:"accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;",allowFullScreen:!0}))};exports.Stream=function(e){return r()?o.createElement(l,Object.assign({},e)):null},exports.useStreamSDK=r;
 //# sourceMappingURL=stream-react.cjs.production.min.js.map

dist/stream-react.esm.js

 import React, { useState, useEffect, useMemo, useRef } from 'react';
 
-var sdkScriptLocation = "https://embed.videodelivery.net/embed/sdk.latest.js";
+var sdkScriptLocation = "https://embed.videodelivery.net/embed/sdk.latest.js"; // This needs to be wrapped as such for two reasons:
+// - Stream is a function, and useState invokes functions immediately and uses the return value.
+// - We need to check typeof on window to ensure safety for server side rendering.
+
+var safelyAccessStreamSDK = function safelyAccessStreamSDK() {
+  if (typeof window === "undefined") return undefined;
+  return window.Stream;
+};
 function useStreamSDK() {
-  // Because we're storing the Stream function in state, we need to pass a
-  // function in that returns it because React will invoke functions that
-  // are passed into state
-  var _useState = useState(function () {
-    return window.Stream;
-  }),
+  var _useState = useState(safelyAccessStreamSDK),
       streamSdk = _useState[0],
@@ -19,6 +21,3 @@ setStreamSdk = _useState[1];
       script.addEventListener("load", function () {
-        // Same thing here, passing in a function that will return window.Stream
-        setStreamSdk(function () {
-          return window.Stream;
-        });
+        setStreamSdk(safelyAccessStreamSDK);
       });
@@ -203,4 +202,6 @@
   useEffect(function () {
-    if (iframeRef.current && window.Stream) {
-      var api = window.Stream(iframeRef.current);
+    var Stream = safelyAccessStreamSDK();
+
+    if (iframeRef.current && Stream) {
+      var api = Stream(iframeRef.current);
       ref.current = api;
@@ -207,0 +208,0 @@ var videoHeight = api.videoHeight,

dist/useStreamSDK.d.ts

@@ -0,1 +1,2 @@
+export declare const safelyAccessStreamSDK: () => ((iframe: HTMLIFrameElement) => import("./types").StreamPlayerApi) | undefined;
 export declare function useStreamSDK(): ((iframe: HTMLIFrameElement) => import("./types").StreamPlayerApi) | undefined;

package.json

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

src/useStreamSDK.ts

@@ -5,7 +5,12 @@ import { useState, useEffect } from "react";
 
+// This needs to be wrapped as such for two reasons:
+// - Stream is a function, and useState invokes functions immediately and uses the return value.
+// - We need to check typeof on window to ensure safety for server side rendering.
+export const safelyAccessStreamSDK = () => {
+  if (typeof window === "undefined") return undefined;
+  return window.Stream;
+};
+
 export function useStreamSDK() {
-  // Because we're storing the Stream function in state, we need to pass a
-  // function in that returns it because React will invoke functions that
-  // are passed into state
-  const [streamSdk, setStreamSdk] = useState(() => window.Stream);
+  const [streamSdk, setStreamSdk] = useState(safelyAccessStreamSDK);
 
@@ -19,4 +24,3 @@ useEffect(() => {
       script.addEventListener("load", () => {
-        // Same thing here, passing in a function that will return window.Stream
-        setStreamSdk(() => window.Stream);
+        setStreamSdk(safelyAccessStreamSDK);
       });
@@ -23,0 +27,0 @@ if (!existingScript) {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113279

increased by1.07%

Lines of code

1338

increased by0.22%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes