@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/stream-react.cjs.development.js

@@ -47,5 +47,6 @@ 'use strict';
       poster = _ref.poster,
+      primaryColor = _ref.primaryColor,
       adUrl = _ref.adUrl,
       defaultTextTrack = _ref.defaultTextTrack;
-  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), defaultTextTrack && "defaultTextTrack=" + encodeURIComponent(defaultTextTrack), 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), muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
   var iframeSrc = React.useMemo(function () {
@@ -143,2 +144,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
       preload = _ref2$preload === void 0 ? "metadata" : _ref2$preload,
+      primaryColor = _ref2.primaryColor,
       defaultTextTrack = _ref2.defaultTextTrack,
@@ -200,2 +202,3 @@ height = _ref2.height,
     poster: poster,
+    primaryColor: primaryColor,
     adUrl: adUrl,
@@ -211,2 +214,3 @@ defaultTextTrack: defaultTextTrack
   useProperty("preload", ref, preload);
+  useProperty("primaryColor", ref, primaryColor);
   useProperty("volume", ref, volume); // instantiate API after properties are bound because we want undefined
@@ -213,0 +217,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,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%"},l=function(e){var n=e.children,r=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:r?l:void 0},n)},s=function(e){var r=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,g=void 0!==h&&h,y=e.preload,S=void 0===y?"metadata":y,E=e.defaultTextTrack,T=e.height,b=e.width,k=e.poster,w=e.currentTime,C=void 0===w?0:w,R=e.volume,x=void 0===R?1:R,P=e.streamRef,U=e.responsive,W=void 0===U||U,j=e.className,D=e.title,H=e.onAbort,L=e.onCanPlay,A=e.onCanPlayThrough,M=e.onDurationChange,N=e.onEnded,I=e.onError,q=e.onLoadedData,z=e.onLoadedMetaData,B=e.onLoadStart,O=e.onPause,_=e.onPlay,F=e.onPlaying,K=e.onProgress,V=e.onRateChange,G=e.onResize,J=e.onSeeked,Q=e.onSeeking,X=e.onStalled,Y=e.onSuspend,Z=e.onTimeUpdate,$=e.onVolumeChange,ee=e.onWaiting,te=e.onStreamAdStart,oe=e.onStreamAdEnd,ne=e.onStreamAdTimeout,re=t.useRef(),ae=null!=P?P:re,ie=t.useState({videoHeight:0,videoWidth:0}),de=ie[0],ue=ie[1],le=t.useRef(null),se=function(e,o){var n=o.muted,r=o.preload,a=o.loop,i=o.autoplay,d=o.controls,u=o.poster,l=o.adUrl,s=o.defaultTextTrack,c=[u&&"poster="+encodeURIComponent(u),l&&"ad-url="+encodeURIComponent(l),s&&"defaultTextTrack="+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+"?"+c}),[])}(r,{muted:m,preload:S,loop:g,autoplay:f,controls:c,poster:k,adUrl:d,defaultTextTrack:E});return a("muted",ae,m),a("controls",ae,c),a("src",ae,r),a("autoplay",ae,f),a("currentTime",ae,C),a("loop",ae,g),a("preload",ae,S),a("volume",ae,x),t.useEffect((function(){var e=n();if(le.current&&e){var t=e(le.current);ae.current=t;var o=t.videoHeight,r=t.videoWidth;o&&r&&ue({videoHeight:o,videoWidth:r})}}),[]),i("abort",ae,H),i("canplay",ae,L),i("canplaythrough",ae,A),i("durationchange",ae,M),i("ended",ae,N),i("error",ae,I),i("loadeddata",ae,q),i("loadedmetadata",ae,z),i("loadstart",ae,B),i("pause",ae,O),i("play",ae,_),i("playing",ae,F),i("progress",ae,K),i("ratechange",ae,V),i("seeked",ae,J),i("seeking",ae,Q),i("stalled",ae,X),i("suspend",ae,Y),i("timeupdate",ae,Z),i("volumechange",ae,$),i("waiting",ae,ee),i("stream-adstart",ae,te),i("stream-adend",ae,oe),i("stream-adtimeout",ae,ne),i("resize",ae,(function(){if(ae.current){var e=ae.current;ue({videoHeight:e.videoHeight,videoWidth:e.videoWidth}),G&&G()}})),o.createElement(l,{className:j,responsive:W,videoDimensions:de},o.createElement("iframe",{ref:le,src:se,title:D,style:W?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 r()?o.createElement(s,Object.assign({},e)):null},exports.useStreamSDK=r;
+"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;
 //# sourceMappingURL=stream-react.cjs.production.min.js.map

dist/stream-react.esm.js

@@ -40,5 +40,6 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
       poster = _ref.poster,
+      primaryColor = _ref.primaryColor,
       adUrl = _ref.adUrl,
       defaultTextTrack = _ref.defaultTextTrack;
-  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), defaultTextTrack && "defaultTextTrack=" + encodeURIComponent(defaultTextTrack), 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), muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
   var iframeSrc = useMemo(function () {
@@ -136,2 +137,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
       preload = _ref2$preload === void 0 ? "metadata" : _ref2$preload,
+      primaryColor = _ref2.primaryColor,
       defaultTextTrack = _ref2.defaultTextTrack,
@@ -193,2 +195,3 @@ height = _ref2.height,
     poster: poster,
+    primaryColor: primaryColor,
     adUrl: adUrl,
@@ -204,2 +207,3 @@ defaultTextTrack: defaultTextTrack
   useProperty("preload", ref, preload);
+  useProperty("primaryColor", ref, primaryColor);
   useProperty("volume", ref, volume); // instantiate API after properties are bound because we want undefined
@@ -206,0 +210,0 @@ // values to be set before defining the properties

dist/types.d.ts

@@ -64,2 +64,7 @@ import { MutableRefObject } from "react";
     /**
+     * Any valid CSS color value provided will be applied to certain elements of the player's UI.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     */
+    primaryColor?: string;
+    /**
      * Unsubscribe from events
@@ -140,2 +145,7 @@ */
     /**
+     * Any valid CSS color value provided will be applied to certain elements of the player's UI.
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+     */
+    primaryColor?: string;
+    /**
      * Automatically manages the aspect ratio of the iframe for you. Defaults to true. If you want to manually handle the styles yourself, set this to false.
@@ -142,0 +152,0 @@ */

dist/useIframeSrc.d.ts

@@ -8,2 +8,3 @@ import { Preload } from "./types";
     poster?: string;
+    primaryColor?: string;
     adUrl?: string;
@@ -13,3 +14,3 @@ defaultTextTrack?: string;
 }
-export declare function useIframeSrc(src: string, { muted, preload, loop, autoplay, controls, poster, adUrl, defaultTextTrack, }: IframeSrcOptions): string;
+export declare function useIframeSrc(src: string, { muted, preload, loop, autoplay, controls, poster, primaryColor, adUrl, defaultTextTrack, }: IframeSrcOptions): string;
 export {};

package.json

 {
   "name": "@cloudflare/stream-react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "BSD-3-Clause",
@@ -25,3 +25,3 @@ "publishConfig": {
     "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
+    "clean": "rm -rf ./dist && rm -rf ./example/.cache && rm -rf ./example/dist",
     "prepare": "tsdx build",
@@ -37,3 +37,3 @@ "storybook": "start-storybook -p 6006",
     "hooks": {
-      "pre-commit": "yarn prettier && tsdx lint"
+      "pre-commit": "yarn clean && yarn prettier"
     }
@@ -40,0 +40,0 @@ },

README.md

@@ -85,2 +85,6 @@ # @cloudflare/stream-react
   /**
+   * Automatically manages the aspect ratio of the iframe for you. Defaults to true. If you want to manually handle the styles yourself, set this to false.
+   */
+  responsive?: boolean;
+  /**
    * Sets volume from 0.0 (silent) to 1.0 (maximum value)
@@ -87,0 +91,0 @@ */

src/types.ts

@@ -68,2 +68,7 @@ import { MutableRefObject } from "react";
   /**
+   * Any valid CSS color value provided will be applied to certain elements of the player's UI.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  primaryColor?: string;
+  /**
    * Unsubscribe from events
@@ -145,2 +150,7 @@ */
   /**
+   * Any valid CSS color value provided will be applied to certain elements of the player's UI.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  primaryColor?: string;
+  /**
    * Automatically manages the aspect ratio of the iframe for you. Defaults to true. If you want to manually handle the styles yourself, set this to false.
@@ -147,0 +157,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

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

120619

increased by2.52%

Lines of code

1431

increased by2.51%

Number of lines in readme file

190

increased by2.15%

No dependency changes