@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

dist/stream-react.cjs.development.js

@@ -49,4 +49,5 @@ 'use strict';
       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), 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), 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 () {
@@ -162,2 +163,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
       volume = _ref2$volume === void 0 ? 1 : _ref2$volume,
+      startTime = _ref2.startTime,
       streamRef = _ref2.streamRef,
@@ -213,3 +215,4 @@ _ref2$responsive = _ref2.responsive,
     adUrl: adUrl,
-    defaultTextTrack: defaultTextTrack
+    defaultTextTrack: defaultTextTrack,
+    startTime: startTime
   }); // While it's easier for most consumers to simply provide the video id
@@ -216,0 +219,0 @@ // or signed URL and have us compute the iframe's src for them, some

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,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;
+"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;
 //# sourceMappingURL=stream-react.cjs.production.min.js.map

dist/stream-react.esm.js

@@ -42,4 +42,5 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
       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), 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), 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 () {
@@ -155,2 +156,3 @@ return "https://iframe.videodelivery.net/" + src + "?" + paramString;
       volume = _ref2$volume === void 0 ? 1 : _ref2$volume,
+      startTime = _ref2.startTime,
       streamRef = _ref2.streamRef,
@@ -206,3 +208,4 @@ _ref2$responsive = _ref2.responsive,
     adUrl: adUrl,
-    defaultTextTrack: defaultTextTrack
+    defaultTextTrack: defaultTextTrack,
+    startTime: startTime
   }); // While it's easier for most consumers to simply provide the video id
@@ -209,0 +212,0 @@ // or signed URL and have us compute the iframe's src for them, some

dist/types.d.ts

@@ -157,2 +157,10 @@ import { MutableRefObject } from "react";
     /**
+     * A timestamp that specifies the time when playback begins.
+     * If a plain number is used such as ?startTime=123, it will
+     * be interpreted as 123 seconds. More human readable timestamps
+     * can also be used, such as ?startTime=1h12m27s for 1 hour,
+     * 12 minutes, and 27 seconds.
+     */
+    startTime?: string | number;
+    /**
      * Ref for accessing the underlying stream element. Useful for providing imperative access to the player API:
@@ -159,0 +167,0 @@ * https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api

dist/useIframeSrc.d.ts

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

package.json

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

README.md

@@ -85,2 +85,15 @@ # @cloudflare/stream-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;
+  /**
+   * A timestamp that specifies the time when playback begins.
+   * If a plain number is used such as ?startTime=123, it will
+   * be interpreted as 123 seconds. More human readable timestamps
+   * can also be used, such as ?startTime=1h12m27s for 1 hour,
+   * 12 minutes, and 27 seconds.
+   */
+  startTime?: string | number;
+  /**
    * 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.
@@ -87,0 +100,0 @@ */

src/types.ts

@@ -162,2 +162,10 @@ import { MutableRefObject } from "react";
   /**
+   * A timestamp that specifies the time when playback begins.
+   * If a plain number is used such as ?startTime=123, it will
+   * be interpreted as 123 seconds. More human readable timestamps
+   * can also be used, such as ?startTime=1h12m27s for 1 hour,
+   * 12 minutes, and 27 seconds.
+   */
+  startTime?: string | number;
+  /**
    * Ref for accessing the underlying stream element. Useful for providing imperative access to the player API:
@@ -164,0 +172,0 @@ * https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api

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

126872

increased by1.87%

Lines of code

1496

increased by1.98%

Number of lines in readme file

203

increased by6.84%

No dependency changes