@cloudflare/stream-react - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/stream-react.cjs.development.js

@@ -154,2 +154,3 @@ 'use strict';
       className = _ref2.className,
+      title = _ref2.title,
       onAbort = _ref2.onAbort,
@@ -269,2 +270,3 @@ onCanPlay = _ref2.onCanPlay,
     src: iframeSrc,
+    title: title,
     style: responsive ? responsiveIframeStyles : undefined,
@@ -271,0 +273,0 @@ frameBorder: 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,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;
+"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;
 //# sourceMappingURL=stream-react.cjs.production.min.js.map

dist/stream-react.esm.js

@@ -147,2 +147,3 @@ import React, { useState, useEffect, useMemo, useRef } from 'react';
       className = _ref2.className,
+      title = _ref2.title,
       onAbort = _ref2.onAbort,
@@ -262,2 +263,3 @@ onCanPlay = _ref2.onCanPlay,
     src: iframeSrc,
+    title: title,
     style: responsive ? responsiveIframeStyles : undefined,
@@ -264,0 +266,0 @@ frameBorder: 0,

dist/types.d.ts

@@ -152,2 +152,11 @@ import { MutableRefObject } from "react";
     /**
+     * Title of the iframe that the player will load within.
+     *
+     * From the MDN docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#accessibility_concerns
+     *
+     * People navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content. The title's value should concisely describe the embedded content.
+     * Without this title, they have to navigate into the <iframe> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <iframe>s and/or if embeds contain interactive content like video or audio.
+     */
+    title?: string;
+    /**
      * Sets volume from 0.0 (silent) to 1.0 (maximum value)
@@ -154,0 +163,0 @@ */

package.json

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

src/types.ts

@@ -157,2 +157,11 @@ import { MutableRefObject } from "react";
   /**
+   * Title of the iframe that the player will load within.
+   *
+   * From the MDN docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#accessibility_concerns
+   *
+   * People navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content. The title's value should concisely describe the embedded content.
+   * Without this title, they have to navigate into the <iframe> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <iframe>s and/or if embeds contain interactive content like video or audio.
+   */
+  title?: string;
+  /**
    * Sets volume from 0.0 (silent) to 1.0 (maximum value)
@@ -159,0 +168,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

117651

increased by1.52%

Lines of code

1396

increased by1.75%

No dependency changes