@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/stream-react.cjs.development.js

@@ -47,4 +47,5 @@ 'use strict';
       poster = _ref.poster,
-      adUrl = _ref.adUrl;
-  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
+      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 iframeSrc = React.useMemo(function () {
@@ -55,3 +56,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
   // these options will instead be handled separately via the SDK.
-  [src]);
+  []);
   return iframeSrc;
@@ -143,2 +144,3 @@ }
       preload = _ref2$preload === void 0 ? "metadata" : _ref2$preload,
+      defaultTextTrack = _ref2.defaultTextTrack,
       height = _ref2.height,
@@ -198,3 +200,4 @@ width = _ref2.width,
     poster: poster,
-    adUrl: adUrl
+    adUrl: adUrl,
+    defaultTextTrack: defaultTextTrack
   });
@@ -201,0 +204,0 @@ useProperty("muted", ref, muted);

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%"},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;
+"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.onAbort,H=e.onCanPlay,L=e.onCanPlayThrough,A=e.onDurationChange,M=e.onEnded,N=e.onError,I=e.onLoadedData,q=e.onLoadedMetaData,z=e.onLoadStart,B=e.onPause,O=e.onPlay,_=e.onPlaying,F=e.onProgress,K=e.onRateChange,V=e.onResize,G=e.onSeeked,J=e.onSeeking,Q=e.onStalled,X=e.onSuspend,Y=e.onTimeUpdate,Z=e.onVolumeChange,$=e.onWaiting,ee=e.onStreamAdStart,te=e.onStreamAdEnd,oe=e.onStreamAdTimeout,ne=t.useRef(),re=null!=P?P:ne,ae=t.useState({videoHeight:0,videoWidth:0}),ie=ae[0],de=ae[1],ue=t.useRef(null),le=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",re,m),a("controls",re,c),a("src",re,r),a("autoplay",re,f),a("currentTime",re,C),a("loop",re,g),a("preload",re,S),a("volume",re,x),t.useEffect((function(){var e=n();if(ue.current&&e){var t=e(ue.current);re.current=t;var o=t.videoHeight,r=t.videoWidth;o&&r&&de({videoHeight:o,videoWidth:r})}}),[]),i("abort",re,D),i("canplay",re,H),i("canplaythrough",re,L),i("durationchange",re,A),i("ended",re,M),i("error",re,N),i("loadeddata",re,I),i("loadedmetadata",re,q),i("loadstart",re,z),i("pause",re,B),i("play",re,O),i("playing",re,_),i("progress",re,F),i("ratechange",re,K),i("seeked",re,G),i("seeking",re,J),i("stalled",re,Q),i("suspend",re,X),i("timeupdate",re,Y),i("volumechange",re,Z),i("waiting",re,$),i("stream-adstart",re,ee),i("stream-adend",re,te),i("stream-adtimeout",re,oe),i("resize",re,(function(){if(re.current){var e=re.current;de({videoHeight:e.videoHeight,videoWidth:e.videoWidth}),V&&V()}})),o.createElement(l,{className:j,responsive:W,videoDimensions:ie},o.createElement("iframe",{ref:ue,src:le,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;
 //# sourceMappingURL=stream-react.cjs.production.min.js.map

dist/stream-react.esm.js

@@ -40,4 +40,5 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
       poster = _ref.poster,
-      adUrl = _ref.adUrl;
-  var paramString = [poster && "poster=" + encodeURIComponent(poster), adUrl && "ad-url=" + encodeURIComponent(adUrl), muted && "muted=true", preload && "preload=" + preload, loop && "loop=true", autoplay && "autoplay=true", !controls && "controls=false"].filter(Boolean).join("&");
+      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 iframeSrc = useMemo(function () {
@@ -48,3 +49,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
   // these options will instead be handled separately via the SDK.
-  [src]);
+  []);
   return iframeSrc;
@@ -136,2 +137,3 @@ }
       preload = _ref2$preload === void 0 ? "metadata" : _ref2$preload,
+      defaultTextTrack = _ref2.defaultTextTrack,
       height = _ref2.height,
@@ -191,3 +193,4 @@ width = _ref2.width,
     poster: poster,
-    adUrl: adUrl
+    adUrl: adUrl,
+    defaultTextTrack: defaultTextTrack
   });
@@ -194,0 +197,0 @@ useProperty("muted", ref, muted);

dist/types.d.ts

@@ -112,2 +112,7 @@ import { MutableRefObject } from "react";
     /**
+     * Will initialize the player with the specified text track enabled. The value should be the BCP-47 language code that was used to [upload the text track](https://developers.cloudflare.com/stream/uploading-videos/adding-captions).
+     * Note: This will _only_ work once during initialization. Beyond that point the user has full control over their text track settings.
+     */
+    defaultTextTrack?: string;
+    /**
      * The height of the video’s display area, in CSS pixels.
@@ -114,0 +119,0 @@ */

dist/useIframeSrc.d.ts

@@ -9,5 +9,6 @@ import { Preload } from "./types";
     adUrl?: string;
+    defaultTextTrack?: string;
     preload?: Preload;
 }
-export declare function useIframeSrc(src: string, { muted, preload, loop, autoplay, controls, poster, adUrl }: IframeSrcOptions): string;
+export declare function useIframeSrc(src: string, { muted, preload, loop, autoplay, controls, poster, adUrl, defaultTextTrack, }: IframeSrcOptions): string;
 export {};

package.json

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

src/types.ts

@@ -117,2 +117,7 @@ import { MutableRefObject } from "react";
   /**
+   * Will initialize the player with the specified text track enabled. The value should be the BCP-47 language code that was used to [upload the text track](https://developers.cloudflare.com/stream/uploading-videos/adding-captions).
+   * Note: This will _only_ work once during initialization. Beyond that point the user has full control over their text track settings.
+   */
+  defaultTextTrack?: string;
+  /**
    * The height of the video’s display area, in CSS pixels.
@@ -119,0 +124,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

115886

increased by2.3%

Lines of code

1372

increased by2.54%

No dependency changes