@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/stream-react.cjs.development.js

@@ -60,2 +60,11 @@ 'use strict';
 
+function validSrcUrl(str) {
+  try {
+    var url = new URL(str);
+    return url.hostname.endsWith("videodelivery.net");
+  } catch (_unused) {
+    return false;
+  }
+}
+
 /**
@@ -194,3 +203,3 @@ * Hook for syncing properties to the SDK api when they change
   var iframeRef = React.useRef(null);
-  var iframeSrc = useIframeSrc(src, {
+  var computedSrc = useIframeSrc(src, {
     muted: muted,
@@ -205,3 +214,7 @@ preload: preload,
     defaultTextTrack: defaultTextTrack
-  });
+  }); // While it's easier for most consumers to simply provide the video id
+  // or signed URL and have us compute the iframe's src for them, some
+  // consumers may need to manually specify the iframe's src.
+
+  var iframeSrc = validSrcUrl(src) ? src : computedSrc;
   useProperty("muted", ref, muted);
@@ -208,0 +221,0 @@ useProperty("controls", ref, controls);

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

dist/stream-react.esm.js

@@ -53,2 +53,11 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
 
+function validSrcUrl(str) {
+  try {
+    var url = new URL(str);
+    return url.hostname.endsWith("videodelivery.net");
+  } catch (_unused) {
+    return false;
+  }
+}
+
 /**
@@ -187,3 +196,3 @@ * Hook for syncing properties to the SDK api when they change
   var iframeRef = useRef(null);
-  var iframeSrc = useIframeSrc(src, {
+  var computedSrc = useIframeSrc(src, {
     muted: muted,
@@ -198,3 +207,7 @@ preload: preload,
     defaultTextTrack: defaultTextTrack
-  });
+  }); // While it's easier for most consumers to simply provide the video id
+  // or signed URL and have us compute the iframe's src for them, some
+  // consumers may need to manually specify the iframe's src.
+
+  var iframeSrc = validSrcUrl(src) ? src : computedSrc;
   useProperty("muted", ref, muted);
@@ -201,0 +214,0 @@ useProperty("controls", ref, controls);

package.json

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

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

124530

increased by3.24%

Number of package files

22

increased by10%

Lines of code

1467

increased by2.52%

No dependency changes