@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.5.0 to 1.6.1

dist/stream-react.cjs.development.js

@@ -270,3 +270,3 @@ 'use strict';
   useEvent("stream-adtimeout", ref, onStreamAdTimeout);
-  useEvent("resize", ref, function () {
+  useEvent("resize", ref, function (e) {
     if (ref.current) {
@@ -280,3 +280,3 @@ var _ref$current = ref.current,
       });
-      onResize && onResize();
+      onResize && onResize(e);
     }
@@ -283,0 +283,0 @@ });

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

dist/stream-react.esm.js

@@ -263,3 +263,3 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
   useEvent("stream-adtimeout", ref, onStreamAdTimeout);
-  useEvent("resize", ref, function () {
+  useEvent("resize", ref, function (e) {
     if (ref.current) {
@@ -273,3 +273,3 @@ var _ref$current = ref.current,
       });
-      onResize && onResize();
+      onResize && onResize(e);
     }
@@ -276,0 +276,0 @@ });

dist/types.d.ts

@@ -16,3 +16,3 @@ import { MutableRefObject } from "react";
      */
-    addEventListener: (event: string, handler: () => void) => void;
+    addEventListener: (event: string, handler: EventListener) => void;
     /**
@@ -72,3 +72,3 @@ * VAST tag for displaying ads
      */
-    removeEventListener: (event: string, handler: () => void) => void;
+    removeEventListener: (event: string, handler: EventListener) => void;
     /**
@@ -191,55 +191,55 @@ * Either the video id or the signed url for the video you’ve uploaded to Cloudflare Stream should be included here.
      */
-    onAbort?: () => void;
+    onAbort?: EventListener;
     /**
      * Sent when enough data is available that the media can be played, at least for a couple of frames.
      */
-    onCanPlay?: () => void;
+    onCanPlay?: EventListener;
     /**
      * Sent when the entire media can be played without interruption, assuming the download rate remains at least at the current level. It will also be fired when playback is toggled between paused and playing. Note: Manually setting the currentTime will eventually fire a canplaythrough event in firefox. Other browsers might not fire this event.
      */
-    onCanPlayThrough?: () => void;
+    onCanPlayThrough?: EventListener;
     /**
      * The metadata has loaded or changed, indicating a change in duration of the media. This is sent, for example, when the media has loaded enough that the duration is known.
      */
-    onDurationChange?: () => void;
+    onDurationChange?: EventListener;
     /**
      * Sent when playback completes.
      */
-    onEnded?: () => void;
+    onEnded?: EventListener;
     /**
      * Sent when an error occurs. (e.g. the video has not finished encoding yet, or the video fails to load due to an incorrect signed URL)
      */
-    onError?: () => void;
+    onError?: EventListener;
     /**
      * The first frame of the media has finished loading.
      */
-    onLoadedData?: () => void;
+    onLoadedData?: EventListener;
     /**
      * The media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.
      */
-    onLoadedMetaData?: () => void;
+    onLoadedMetaData?: EventListener;
     /**
      * Sent when loading of the media begins.
      */
-    onLoadStart?: () => void;
+    onLoadStart?: EventListener;
     /**
      * Sent when the playback state is changed to paused (paused property is true).
      */
-    onPause?: () => void;
+    onPause?: EventListener;
     /**
      * Sent when the playback state is no longer paused, as a result of the play method, or the autoplay attribute.
      */
-    onPlay?: () => void;
+    onPlay?: EventListener;
     /**
      * Sent when the media has enough data to start playing, after the play event, but also when recovering from being stalled, when looping media restarts, and after seeked, if it was playing before seeking.
      */
-    onPlaying?: () => void;
+    onPlaying?: EventListener;
     /**
      * Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element’s buffered attribute.
      */
-    onProgress?: () => void;
+    onProgress?: EventListener;
     /**
      * Sent when the playback speed changes.
      */
-    onRateChange?: () => void;
+    onRateChange?: EventListener;
     /**
@@ -249,43 +249,43 @@ * Sent when the video's intrinsic dimensions (videoHeight & videoWidth) change.
      */
-    onResize?: () => void;
+    onResize?: EventListener;
     /**
      * Sent when a seek operation completes.
      */
-    onSeeked?: () => void;
+    onSeeked?: EventListener;
     /**
      * Sent when a seek operation begins.
      */
-    onSeeking?: () => void;
+    onSeeking?: EventListener;
     /**
      * Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
      */
-    onStalled?: () => void;
+    onStalled?: EventListener;
     /**
      * Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason.
      */
-    onSuspend?: () => void;
+    onSuspend?: EventListener;
     /**
      * The time indicated by the element’s currentTime attribute has changed.
      */
-    onTimeUpdate?: () => void;
+    onTimeUpdate?: EventListener;
     /**
      * Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
      */
-    onVolumeChange?: () => void;
+    onVolumeChange?: EventListener;
     /**
      * Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).
      */
-    onWaiting?: () => void;
+    onWaiting?: EventListener;
     /**
      * Fires when ad-url attribute is present and the ad begins playback
      */
-    onStreamAdStart?: () => void;
+    onStreamAdStart?: EventListener;
     /**
      * Fires when ad-url attribute is present and the ad finishes playback
      */
-    onStreamAdEnd?: () => void;
+    onStreamAdEnd?: EventListener;
     /**
      * Fires when ad-url attribute is present and the ad took too long to load.
      */
-    onStreamAdTimeout?: () => void;
+    onStreamAdTimeout?: EventListener;
 }

package.json

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

src/types.ts

@@ -20,3 +20,3 @@ import { MutableRefObject } from "react";
    */
-  addEventListener: (event: string, handler: () => void) => void;
+  addEventListener: (event: string, handler: EventListener) => void;
   /**
@@ -76,3 +76,3 @@ * VAST tag for displaying ads
    */
-  removeEventListener: (event: string, handler: () => void) => void;
+  removeEventListener: (event: string, handler: EventListener) => void;
   /**
@@ -196,55 +196,55 @@ * Either the video id or the signed url for the video you’ve uploaded to Cloudflare Stream should be included here.
    */
-  onAbort?: () => void;
+  onAbort?: EventListener;
   /**
    * Sent when enough data is available that the media can be played, at least for a couple of frames.
    */
-  onCanPlay?: () => void;
+  onCanPlay?: EventListener;
   /**
    * Sent when the entire media can be played without interruption, assuming the download rate remains at least at the current level. It will also be fired when playback is toggled between paused and playing. Note: Manually setting the currentTime will eventually fire a canplaythrough event in firefox. Other browsers might not fire this event.
    */
-  onCanPlayThrough?: () => void;
+  onCanPlayThrough?: EventListener;
   /**
    * The metadata has loaded or changed, indicating a change in duration of the media. This is sent, for example, when the media has loaded enough that the duration is known.
    */
-  onDurationChange?: () => void;
+  onDurationChange?: EventListener;
   /**
    * Sent when playback completes.
    */
-  onEnded?: () => void;
+  onEnded?: EventListener;
   /**
    * Sent when an error occurs. (e.g. the video has not finished encoding yet, or the video fails to load due to an incorrect signed URL)
    */
-  onError?: () => void;
+  onError?: EventListener;
   /**
    * The first frame of the media has finished loading.
    */
-  onLoadedData?: () => void;
+  onLoadedData?: EventListener;
   /**
    * The media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.
    */
-  onLoadedMetaData?: () => void;
+  onLoadedMetaData?: EventListener;
   /**
    * Sent when loading of the media begins.
    */
-  onLoadStart?: () => void;
+  onLoadStart?: EventListener;
   /**
    * Sent when the playback state is changed to paused (paused property is true).
    */
-  onPause?: () => void;
+  onPause?: EventListener;
   /**
    * Sent when the playback state is no longer paused, as a result of the play method, or the autoplay attribute.
    */
-  onPlay?: () => void;
+  onPlay?: EventListener;
   /**
    * Sent when the media has enough data to start playing, after the play event, but also when recovering from being stalled, when looping media restarts, and after seeked, if it was playing before seeking.
    */
-  onPlaying?: () => void;
+  onPlaying?: EventListener;
   /**
    * Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element’s buffered attribute.
    */
-  onProgress?: () => void;
+  onProgress?: EventListener;
   /**
    * Sent when the playback speed changes.
    */
-  onRateChange?: () => void;
+  onRateChange?: EventListener;
   /**
@@ -254,43 +254,43 @@ * Sent when the video's intrinsic dimensions (videoHeight & videoWidth) change.
    */
-  onResize?: () => void;
+  onResize?: EventListener;
   /**
    * Sent when a seek operation completes.
    */
-  onSeeked?: () => void;
+  onSeeked?: EventListener;
   /**
    * Sent when a seek operation begins.
    */
-  onSeeking?: () => void;
+  onSeeking?: EventListener;
   /**
    * Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
    */
-  onStalled?: () => void;
+  onStalled?: EventListener;
   /**
    * Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason.
    */
-  onSuspend?: () => void;
+  onSuspend?: EventListener;
   /**
    * The time indicated by the element’s currentTime attribute has changed.
    */
-  onTimeUpdate?: () => void;
+  onTimeUpdate?: EventListener;
   /**
    * Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
    */
-  onVolumeChange?: () => void;
+  onVolumeChange?: EventListener;
   /**
    * Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).
    */
-  onWaiting?: () => void;
+  onWaiting?: EventListener;
   /**
    * Fires when ad-url attribute is present and the ad begins playback
    */
-  onStreamAdStart?: () => void;
+  onStreamAdStart?: EventListener;
   /**
    * Fires when ad-url attribute is present and the ad finishes playback
    */
-  onStreamAdEnd?: () => void;
+  onStreamAdEnd?: EventListener;
   /**
    * Fires when ad-url attribute is present and the ad took too long to load.
    */
-  onStreamAdTimeout?: () => void;
+  onStreamAdTimeout?: EventListener;
 }

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

127138

increased by0.21%

No dependency changes