@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0-rc1

dist/stream-react.cjs.development.js

@@ -48,6 +48,7 @@ 'use strict';
       primaryColor = _ref.primaryColor,
+      letterboxColor = _ref.letterboxColor,
       adUrl = _ref.adUrl,
       startTime = _ref.startTime,
       defaultTextTrack = _ref.defaultTextTrack;
-  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), defaultTextTrack && "defaultTextTrack=" + encodeURIComponent(defaultTextTrack), primaryColor && "primaryColor=" + encodeURIComponent(primaryColor), startTime && "startTime=" + startTime, muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
+  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), defaultTextTrack && "defaultTextTrack=" + encodeURIComponent(defaultTextTrack), primaryColor && "primaryColor=" + encodeURIComponent(primaryColor), letterboxColor && "letterboxColor=" + encodeURIComponent(letterboxColor), startTime && "startTime=" + startTime, muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
   var iframeSrc = React.useMemo(function () {
@@ -155,2 +156,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
       primaryColor = _ref2.primaryColor,
+      letterboxColor = _ref2.letterboxColor,
       defaultTextTrack = _ref2.defaultTextTrack,
@@ -214,2 +216,3 @@ height = _ref2.height,
     primaryColor: primaryColor,
+    letterboxColor: letterboxColor,
     adUrl: adUrl,
@@ -231,2 +234,3 @@ defaultTextTrack: defaultTextTrack,
   useProperty("primaryColor", ref, primaryColor);
+  useProperty("letterboxColor", ref, letterboxColor);
   useProperty("volume", ref, volume); // instantiate API after properties are bound because we want undefined
@@ -233,0 +237,0 @@ // values to be set before defining the properties

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

@@ -41,6 +41,7 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
       primaryColor = _ref.primaryColor,
+      letterboxColor = _ref.letterboxColor,
       adUrl = _ref.adUrl,
       startTime = _ref.startTime,
       defaultTextTrack = _ref.defaultTextTrack;
-  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), defaultTextTrack && "defaultTextTrack=" + encodeURIComponent(defaultTextTrack), primaryColor && "primaryColor=" + encodeURIComponent(primaryColor), startTime && "startTime=" + startTime, muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
+  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), defaultTextTrack && "defaultTextTrack=" + encodeURIComponent(defaultTextTrack), primaryColor && "primaryColor=" + encodeURIComponent(primaryColor), letterboxColor && "letterboxColor=" + encodeURIComponent(letterboxColor), startTime && "startTime=" + startTime, muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
   var iframeSrc = useMemo(function () {
@@ -148,2 +149,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
       primaryColor = _ref2.primaryColor,
+      letterboxColor = _ref2.letterboxColor,
       defaultTextTrack = _ref2.defaultTextTrack,
@@ -207,2 +209,3 @@ height = _ref2.height,
     primaryColor: primaryColor,
+    letterboxColor: letterboxColor,
     adUrl: adUrl,
@@ -224,2 +227,3 @@ defaultTextTrack: defaultTextTrack,
   useProperty("primaryColor", ref, primaryColor);
+  useProperty("letterboxColor", ref, letterboxColor);
   useProperty("volume", ref, volume); // instantiate API after properties are bound because we want undefined
@@ -226,0 +230,0 @@ // values to be set before defining the properties

dist/types.d.ts

@@ -30,2 +30,6 @@ import { MutableRefObject } from "react";
     /**
+     * An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
+     */
+    buffered: TimeRanges;
+    /**
      * Shows the default video controls such as buttons for play/pause, volume controls. You may choose to build buttons and controls that work with the player. If you hide controls, you may choose to build custom buttons and controls that work with the player.
@@ -39,2 +43,15 @@ */
     /**
+     * The read-only HTMLMediaElement property duration indicates the length of the element's media in seconds.
+     */
+    duration: number;
+    /**
+     * Indicates whether the media element has ended playback..
+     */
+    ended: boolean;
+    /**
+     * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     */
+    letterboxColor?: string;
+    /**
      * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
@@ -52,2 +69,6 @@ */
     /**
+     * Returns whether the video is paused
+     */
+    paused: boolean;
+    /**
      * Attempts to play the video. Returns a promise that will resolve if playback begins successfully, and rejects if it fails. The most common reason for this to fail is browser policies which prevent unmuted playback that is not initiated by the user.
@@ -57,2 +78,6 @@ */
     /**
+     * An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
+     */
+    played: TimeRanges;
+    /**
      * A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.
@@ -130,2 +155,7 @@ */
     /**
+     * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     */
+    letterboxColor?: string;
+    /**
      * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
@@ -132,0 +162,0 @@ */

dist/useIframeSrc.d.ts

@@ -9,2 +9,3 @@ import { Preload } from "./types";
     primaryColor?: string;
+    letterboxColor?: string;
     startTime?: string | number;
@@ -15,3 +16,3 @@ adUrl?: string;
 }
-export declare function useIframeSrc(src: string, { muted, preload, loop, autoplay, controls, poster, primaryColor, adUrl, startTime, defaultTextTrack, }: IframeSrcOptions): string;
+export declare function useIframeSrc(src: string, { muted, preload, loop, autoplay, controls, poster, primaryColor, letterboxColor, adUrl, startTime, defaultTextTrack, }: IframeSrcOptions): string;
 export {};

package.json

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

README.md

@@ -75,2 +75,7 @@ # @cloudflare/stream-react
   /**
+   * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  letterboxColor?: string;
+  /**
    * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
@@ -77,0 +82,0 @@ */

src/types.ts

@@ -34,2 +34,6 @@ import { MutableRefObject } from "react";
   /**
+   * An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
+   */
+  buffered: TimeRanges;
+  /**
    * Shows the default video controls such as buttons for play/pause, volume controls. You may choose to build buttons and controls that work with the player. If you hide controls, you may choose to build custom buttons and controls that work with the player.
@@ -43,2 +47,15 @@ */
   /**
+   * The read-only HTMLMediaElement property duration indicates the length of the element's media in seconds.
+   */
+  duration: number;
+  /**
+   * Indicates whether the media element has ended playback..
+   */
+  ended: boolean;
+  /**
+   * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  letterboxColor?: string;
+  /**
    * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
@@ -56,2 +73,6 @@ */
   /**
+   * Returns whether the video is paused
+   */
+  paused: boolean;
+  /**
    * Attempts to play the video. Returns a promise that will resolve if playback begins successfully, and rejects if it fails. The most common reason for this to fail is browser policies which prevent unmuted playback that is not initiated by the user.
@@ -61,2 +82,6 @@ */
   /**
+   * An object conforming to the TimeRanges interface. This object is normalized, which means that ranges are ordered, don’t overlap, aren’t empty, and don’t touch (adjacent ranges are folded into one bigger range).
+   */
+  played: TimeRanges;
+  /**
    * A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.
@@ -135,2 +160,7 @@ */
   /**
+   * Any valid CSS color value provided will be applied to the letterboxing/pillarboxing of the player’s UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  letterboxColor?: string;
+  /**
    * A Boolean attribute; if included the player will automatically seek back to the start upon reaching the end of the video.
@@ -137,0 +167,0 @@ */

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

132457

increased by4.18%

Lines of code

1571

increased by5.01%

Number of lines in readme file

208

increased by2.46%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes