stories-react - npm Package Compare versions

Comparing version 1.0.17 to 1.0.18

dist/Hooks/index.d.ts

@@ -5,2 +5,3 @@ import { IStoryContext } from '../types';
 export declare function useAnimationFrame(callback: (time: number) => void, start: boolean): void;
+export declare function useWindowVisibility(callback: (isVisible: boolean) => void): void;
 //# sourceMappingURL=index.d.ts.map

dist/index.d.ts

 /// <reference types="react" />
 import { IStoryProps } from './types';
-export default function Stories({ stories, width, height, onStoryChange, currentIndex, defaultDuration, onAllStoriesEnd, onStoriesStart, classNames, }: IStoryProps): JSX.Element | null;
+export default function Stories({ stories, width, height, onStoryChange, currentIndex, defaultDuration, onAllStoriesEnd, onStoriesStart, classNames, pauseStoryWhenInActiveWindow, }: IStoryProps): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

dist/index.esm.js

@@ -1,2 +0,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import{createContext as t,useState as o,useRef as r,Fragment as i,useEffect as u,useContext as s,useMemo as c}from"react";var l=function(){return l=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},l.apply(this,arguments)},a=t({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var d=Object.freeze({LEFT:"left",RIGHT:"right"}),v="Actions-styles_left__eky50",f="Actions-styles_right__zguoH";function y(t){var u=t.onNextClick,s=t.onPrevClick,c=t.onPause,a=t.onResume,y=o(!1),m=y[0],h=y[1],p=r(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(p.current),p.current=setTimeout((function(){c(),h(!0)}),200)}function g(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(p.current),m)return a(),void h(!1);a(),e!=d.LEFT?u():s()}function w(e){return{onMouseUp:function(n){return g(e,n)},onTouchEnd:function(n){return g(e,n)},onTouchStart:function(e){return _(e)},onMouseDown:function(e){return _(e)}}}return e(i,{children:[n("div",l({className:v},w(d.LEFT)),void 0),n("div",l({className:f},w(d.RIGHT)),void 0)]},void 0)}function m(){return s(a)}var h="ProgressBar-styles_wrapper__oqUCo",p="ProgressBar-styles_bar__x0O50",_=0,g=.1;function w(e){var t,i,s,c,a,d=m(),v=d.defaultDuration,f=d.classNames,y=r(null),w=r(null),x=o(!1),P=x[0],M=x[1];return u((function(){!e.isPaused&&e.isActive&&e.isActive?M(!0):M(!1)}),[e.isActive,e.isPaused]),u((function(){var n;y.current&&(e.hasStoryPassed?y.current.style.width="".concat(null===(n=null==w?void 0:w.current)||void 0===n?void 0:n.offsetWidth,"px"):y.current.style.width="0px")}),[e.hasStoryPassed,e.isActive]),t=function(n){var t;y.current&&w.current&&((_=Number((y.current.style.width||"1px").slice(0,y.current.style.width.length-2))||0)>w.current.offsetWidth?M(!1):(g=(null===(t=null==w?void 0:w.current)||void 0===t?void 0:t.offsetWidth)/((e.story.duration||v)/n),y.current.style.width="".concat(_+g,"px")))},i=P,s=r(),c=r(),a=r(t),u((function(){a.current=t}),[t]),u((function(){return!1!==i?(s.current=requestAnimationFrame((function e(n){if(null!=c.current){var t=n-c.current;a.current(t)}c.current=n,s.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(s.current),s.current=null,c.current=null}):function(){s.current&&(s.current=null),cancelAnimationFrame(s.current),c.current=null}}),[i]),n("div",l({className:"".concat(h," ").concat((null==f?void 0:f.progressBarContainer)||""),ref:w},{children:n("div",{className:"".concat(p," ").concat((null==f?void 0:f.progressBar)||""),ref:y},void 0)}),void 0)}var x="progress-styles_wrapper__qQPyW";function P(e){var t=m(),o=t.stories,r=t.classNames;return n("div",l({className:"".concat(x," ").concat((null==r?void 0:r.progressContainer)||""),style:{gridTemplateColumns:"repeat(".concat(o.length,",1fr)")}},{children:o.map((function(t){return n(w,{hasStoryPassed:t.index<e.activeStoryIndex,isActive:t.index===e.activeStoryIndex,story:t,isPaused:t.index===e.activeStoryIndex&&e.isPaused},t.index)}))}),void 0)}var M=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),N="Story-styles_wrapper__oJP7j",S="Story-styles_header__-rnWL",C="Image-styles_image__gnfW1";function T(e){return u((function(){e.onPause()}),[]),n("img",{className:C,src:e.story.url,alt:"story",onLoad:function(){setTimeout((function(){e.onResume()}),4)}},void 0)}var I,O="Video-styles_video__BykuO",D="Video-styles_loaderWrapper__TqVWk",E="Video-styles_loader__FxxSV",A="Video-styles_soundIcon__ZvYXE";function b(e){return"off"===e.type?n("svg",l({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):n("svg",l({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var k="RSIsMute",W="undefined"==typeof window?{}:window;function z(t){var s,c=m().isPaused,a=o("true"===(null===(s=null==W?void 0:W.localStorage)||void 0===s?void 0:s.getItem(k))),d=a[0],v=a[1],f=o(!1),y=f[0],h=f[1],p=r(null);function _(e){var n;null===(n=null==W?void 0:W.localStorage)||void 0===n||n.setItem(k,String(e)),v(e)}return u((function(){t.onPause(),h(!0)}),[]),u((function(){p.current&&(!c||p.current.paused?p.current.play().catch((function(){var e;_(!0),null===(e=p.current)||void 0===e||e.play()})):p.current.pause())}),[c]),e(i,{children:[e("video",l({className:O,ref:p,playsInline:!0,"webkit-playsinline":"",controls:!1,src:t.story.url,onLoadedData:function(){setTimeout((function(){t.onResume(),h(!1)}),4)},muted:d},{children:[n("source",{src:t.story.url,type:"video/mp4"},void 0),n("source",{src:t.story.url,type:"video/webm"},void 0),n("source",{src:t.story.url,type:"video/ogg"},void 0),n("p",{children:"Video not supported"},void 0)]}),void 0),n("div",l({className:A,onClick:function(){return _(!d)}},{children:n(b,{type:d?"off":"on"},void 0)}),void 0),y&&n("div",l({className:D},{children:n("div",{className:E},void 0)}),void 0)]},void 0)}null===(I=null==W?void 0:W.localStorage)||void 0===I||I.setItem(k,"true");var R="CustomComponents-styles_component__w87Wx";function F(e){return n("div",l({className:R},{children:n(e.story.component,{pause:e.onPause,resume:e.onResume,story:e.story,isPaused:e.isPaused},void 0)}),void 0)}var V="SeeMore-styles_seeMoreWrapper__kwjif",j="SeeMore-styles_defaultSeeMore__-B1QW";function B(t){return t.story.seeMore?n("button",l({type:"button",onClick:function(){t.onSeeMoreClick()},className:V},{children:function(){var o=t.story.seeMore,r=typeof o;if(["string","boolean"].includes(r)){var i="string"===r?o:"See More";return e("div",l({className:j},{children:[n("span",{children:"^"},void 0),n("p",{children:i},void 0)]}),void 0)}return"function"===r?n(t.story.seeMore,{},void 0):t.story.seeMore}()}),void 0):null}var U="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",L="SeeMoreComponent-styles_closeIcon__LMm3b";function q(t){return t.story.seeMore&&t.story.seeMoreComponent?e("div",l({className:U},{children:[n("button",l({className:L,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?n(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function H(t){var r=o(!1),i=r[0],s=r[1],c=m().classNames;return u((function(){s(!1)}),[t.story]),e("div",l({className:"".concat(N," ").concat((null==c?void 0:c.storyContainer)||"")},{children:[t.story.type===M.IMAGE?n(T,l({},t),void 0):t.story.type===M.VIDEO?n(z,l({},t),void 0):t.story.type===M.COMPONENT?n(F,l({},t),void 0):null,t.story.header&&n("div",l({className:S},{children:"function"==typeof t.story.header?n(t.story.header,{},void 0):t.story.header}),void 0),n(B,{onSeeMoreClick:function(){var e,n;t.onPause(),s(!0),null===(n=(e=t.story).onSeeMoreClick)||void 0===n||n.call(e,t.story.index)},story:t.story},void 0),i&&n(q,{story:t.story,onClose:function(){t.onResume(),s(!1)}},void 0)]}),void 0)}var G="styles_main__-0FEu";function Q(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}function J(t){var i,s,d,v,f,m,h,p=t.stories,_=void 0===p?[]:p,g=t.width,w=void 0===g?"100%":g,x=t.height,M=void 0===x?"100%":x,N=t.onStoryChange,S=void 0===N?function(){}:N,C=t.currentIndex,T=void 0===C?0:C,I=t.defaultDuration,O=void 0===I?1e4:I,D=t.onAllStoriesEnd,E=void 0===D?function(){}:D,A=t.onStoriesStart,b=void 0===A?function(){}:A,k=t.classNames,W=void 0===k?{}:k,z=c((function(){return function(e,n){var t=0;return e.map((function(e,o){var r=e.duration||n,i=r+Q();return i===t&&(i=r+Q(6)),t=i,l(l({},e),{index:o,calculatedDuration:i})}))}(_,O)}),[_,O]),R=o(),F=R[0],V=R[1],j=_.length-1,B=o(!1),U=B[0],L=B[1],q=r(!1),J=r(!1);function X(){q.current||(null==F?void 0:F.index)!==j||(E(),q.current=!0),(null==F?void 0:F.index)!==j&&V((function(e){if(!e)return z[0];var n=(null==e?void 0:e.index)+1;return z[n]}))}function Y(){L(!0)}function Z(){L(!1)}u((function(){J.current||(J.current=!0,b())}),[b]),u((function(){var e=z[T];e&&V(e)}),[T,_]),u((function(){F&&S(F.index)}),[F]),s=function(){X()},d=null!==(i=null==F?void 0:F.calculatedDuration)&&void 0!==i?i:null,v=U,f=r(),m=r(d),h=r(Date.now()),u((function(){f.current=s}),[s]),u((function(){m.current=d}),[d]),u((function(){if(null!==d&&!1===v){h.current=Date.now();var e=setTimeout((function(){f.current()}),m.current);return function(){clearTimeout(e)}}return function(){}}),[d,v]),u((function(){v&&(m.current=m.current-(Date.now()-h.current))}),[v]);var K={stories:z,width:w,height:M,defaultDuration:O,isPaused:U,classNames:W};return F?(console.log(W),n(a.Provider,l({value:K},{children:e("div",l({className:"".concat(G," ").concat(W.main||""),style:{width:w,height:M}},{children:[n(P,{activeStoryIndex:F.index,isPaused:U},void 0),n(H,{onPause:Y,onResume:Z,story:F,isPaused:U},F.index),n(y,{onNextClick:X,onPrevClick:function(){0!==(null==F?void 0:F.index)&&V((function(e){if(!e)return z[0];var n=(null==e?void 0:e.index)-1;return z[n]}))},onPause:Y,onResume:Z},void 0)]}),void 0)}),void 0)):null}export{J as default};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{createContext as t,useState as o,useRef as r,Fragment as i,useEffect as u,useContext as s,useMemo as c}from"react";var a=function(){return a=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},a.apply(this,arguments)},l=t({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var d=Object.freeze({LEFT:"left",RIGHT:"right"}),v="Actions-styles_left__eky50",f="Actions-styles_right__zguoH";function y(t){var u=t.onNextClick,s=t.onPrevClick,c=t.onPause,l=t.onResume,y=o(!1),m=y[0],h=y[1],p=r(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(p.current),p.current=setTimeout((function(){c(),h(!0)}),200)}function w(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(p.current),m)return l(),void h(!1);l(),e!=d.LEFT?u():s()}function g(e){return{onMouseUp:function(n){return w(e,n)},onTouchEnd:function(n){return w(e,n)},onTouchStart:function(e){return _(e)},onMouseDown:function(e){return _(e)}}}return e(i,{children:[n("div",a({className:v},g(d.LEFT)),void 0),n("div",a({className:f},g(d.RIGHT)),void 0)]},void 0)}function m(){return s(l)}var h="ProgressBar-styles_wrapper__oqUCo",p="ProgressBar-styles_bar__x0O50",_=0,w=.1;function g(e){var t,i,s,c,l,d=m(),v=d.defaultDuration,f=d.classNames,y=r(null),g=r(null),x=o(!1),P=x[0],S=x[1];return u((function(){!e.isPaused&&e.isActive&&e.isActive?S(!0):S(!1)}),[e.isActive,e.isPaused]),u((function(){var n;y.current&&(e.hasStoryPassed?y.current.style.width="".concat(null===(n=null==g?void 0:g.current)||void 0===n?void 0:n.offsetWidth,"px"):y.current.style.width="0px")}),[e.hasStoryPassed,e.isActive]),t=function(n){var t;y.current&&g.current&&((_=Number((y.current.style.width||"1px").slice(0,y.current.style.width.length-2))||0)>g.current.offsetWidth?S(!1):(w=(null===(t=null==g?void 0:g.current)||void 0===t?void 0:t.offsetWidth)/((e.story.duration||v)/n),y.current.style.width="".concat(_+w,"px")))},i=P,s=r(),c=r(),l=r(t),u((function(){l.current=t}),[t]),u((function(){return!1!==i?(s.current=requestAnimationFrame((function e(n){if(null!=c.current){var t=n-c.current;l.current(t)}c.current=n,s.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(s.current),s.current=null,c.current=null}):function(){s.current&&(s.current=null),cancelAnimationFrame(s.current),c.current=null}}),[i]),n("div",a({className:"".concat(h," ").concat((null==f?void 0:f.progressBarContainer)||""),ref:g},{children:n("div",{className:"".concat(p," ").concat((null==f?void 0:f.progressBar)||""),ref:y},void 0)}),void 0)}var x="progress-styles_wrapper__qQPyW";function P(e){var t=m(),o=t.stories,r=t.classNames;return n("div",a({className:"".concat(x," ").concat((null==r?void 0:r.progressContainer)||""),style:{gridTemplateColumns:"repeat(".concat(o.length,",1fr)")}},{children:o.map((function(t){return n(g,{hasStoryPassed:t.index<e.activeStoryIndex,isActive:t.index===e.activeStoryIndex,story:t,isPaused:t.index===e.activeStoryIndex&&e.isPaused},t.index)}))}),void 0)}var S=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),M="Story-styles_wrapper__oJP7j",N="Story-styles_header__-rnWL",C="Image-styles_image__gnfW1";function T(e){return u((function(){e.onPause()}),[]),n("img",{className:C,src:e.story.url,alt:"story",onLoad:function(){setTimeout((function(){e.onResume()}),4)}},void 0)}var E,I="Video-styles_video__BykuO",O="Video-styles_loaderWrapper__TqVWk",D="Video-styles_loader__FxxSV",b="Video-styles_soundIcon__ZvYXE";function A(e){return"off"===e.type?n("svg",a({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):n("svg",a({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var k="RSIsMute",W="undefined"==typeof window?{}:window;function z(t){var s,c=m().isPaused,l=o("true"===(null===(s=null==W?void 0:W.localStorage)||void 0===s?void 0:s.getItem(k))),d=l[0],v=l[1],f=o(!1),y=f[0],h=f[1],p=r(null);function _(e){var n;null===(n=null==W?void 0:W.localStorage)||void 0===n||n.setItem(k,String(e)),v(e)}return u((function(){t.onPause(),h(!0)}),[]),u((function(){p.current&&(!c||p.current.paused?p.current.play().catch((function(){var e;_(!0),null===(e=p.current)||void 0===e||e.play()})):p.current.pause())}),[c]),e(i,{children:[e("video",a({className:I,ref:p,playsInline:!0,"webkit-playsinline":"",controls:!1,src:t.story.url,onLoadedData:function(){setTimeout((function(){t.onResume(),h(!1)}),4)},muted:d},{children:[n("source",{src:t.story.url,type:"video/mp4"},void 0),n("source",{src:t.story.url,type:"video/webm"},void 0),n("source",{src:t.story.url,type:"video/ogg"},void 0),n("p",{children:"Video not supported"},void 0)]}),void 0),n("div",a({className:b,onClick:function(){return _(!d)}},{children:n(A,{type:d?"off":"on"},void 0)}),void 0),y&&n("div",a({className:O},{children:n("div",{className:D},void 0)}),void 0)]},void 0)}null===(E=null==W?void 0:W.localStorage)||void 0===E||E.setItem(k,"true");var L="CustomComponents-styles_component__w87Wx";function R(e){return n("div",a({className:L},{children:n(e.story.component,{pause:e.onPause,resume:e.onResume,story:e.story,isPaused:e.isPaused},void 0)}),void 0)}var F="SeeMore-styles_seeMoreWrapper__kwjif",V="SeeMore-styles_defaultSeeMore__-B1QW";function j(t){return t.story.seeMore?n("button",a({type:"button",onClick:function(){t.onSeeMoreClick()},className:F},{children:function(){var o=t.story.seeMore,r=typeof o;if(["string","boolean"].includes(r)){var i="string"===r?o:"See More";return e("div",a({className:V},{children:[n("span",{children:"^"},void 0),n("p",{children:i},void 0)]}),void 0)}return"function"===r?n(t.story.seeMore,{},void 0):t.story.seeMore}()}),void 0):null}var B="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",U="SeeMoreComponent-styles_closeIcon__LMm3b";function q(t){return t.story.seeMore&&t.story.seeMoreComponent?e("div",a({className:B},{children:[n("button",a({className:U,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?n(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function H(t){var r=o(!1),i=r[0],s=r[1],c=m().classNames;return u((function(){s(!1)}),[t.story]),e("div",a({className:"".concat(M," ").concat((null==c?void 0:c.storyContainer)||"")},{children:[t.story.type===S.IMAGE?n(T,a({},t),void 0):t.story.type===S.VIDEO?n(z,a({},t),void 0):t.story.type===S.COMPONENT?n(R,a({},t),void 0):null,t.story.header&&n("div",a({className:N},{children:"function"==typeof t.story.header?n(t.story.header,{},void 0):t.story.header}),void 0),n(j,{onSeeMoreClick:function(){var e,n;t.onPause(),s(!0),null===(n=(e=t.story).onSeeMoreClick)||void 0===n||n.call(e,t.story.index)},story:t.story},void 0),i&&n(q,{story:t.story,onClose:function(){t.onResume(),s(!1)}},void 0)]}),void 0)}var G="styles_main__-0FEu";function Q(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}function J(t){var i,s,d,v,f,m,h,p=t.stories,_=void 0===p?[]:p,w=t.width,g=void 0===w?"100%":w,x=t.height,S=void 0===x?"100%":x,M=t.onStoryChange,N=void 0===M?function(){}:M,C=t.currentIndex,T=void 0===C?0:C,E=t.defaultDuration,I=void 0===E?1e4:E,O=t.onAllStoriesEnd,D=void 0===O?function(){}:O,b=t.onStoriesStart,A=void 0===b?function(){}:b,k=t.classNames,W=void 0===k?{}:k,z=t.pauseStoryWhenInActiveWindow,L=void 0===z||z,R=c((function(){return function(e,n){var t=0;return e.map((function(e,o){var r=e.duration||n,i=r+Q();return i===t&&(i=r+Q(6)),t=i,a(a({},e),{index:o,calculatedDuration:i})}))}(_,I)}),[_,I]),F=o(),V=F[0],j=F[1],B=_.length-1,U=o(!1),q=U[0],J=U[1],X=r(!1),Y=r(!1);function Z(){X.current||(null==V?void 0:V.index)!==B||(D(),X.current=!0),(null==V?void 0:V.index)!==B&&j((function(e){if(!e)return R[0];var n=(null==e?void 0:e.index)+1;return R[n]}))}function K(){J(!0)}function $(){J(!1)}u((function(){Y.current||(Y.current=!0,A())}),[A]),u((function(){var e=R[T];e&&j(e)}),[T,_]),u((function(){V&&N(V.index)}),[V]),s=function(){Z()},d=null!==(i=null==V?void 0:V.calculatedDuration)&&void 0!==i?i:null,v=q,f=r(),m=r(d),h=r(Date.now()),u((function(){f.current=s}),[s]),u((function(){m.current=d}),[d]),u((function(){if(null!==d&&!1===v){h.current=Date.now();var e=setTimeout((function(){f.current()}),m.current);return function(){clearTimeout(e)}}return function(){}}),[d,v]),u((function(){v&&(m.current=m.current-(Date.now()-h.current))}),[v]),function(e){var n=r(e);u((function(){n.current=e}),[e]),u((function(){function e(){n.current(!0)}function t(){n.current(!1)}return window.addEventListener("focus",e),window.addEventListener("blur",t),function(){window.removeEventListener("focus",e),window.removeEventListener("blur",t)}}),[])}((function(e){L&&J(!e)}));var ee={stories:R,width:g,height:S,defaultDuration:I,isPaused:q,classNames:W};return V?n(l.Provider,a({value:ee},{children:e("div",a({className:"".concat(G," ").concat(W.main||""),style:{width:g,height:S}},{children:[n(P,{activeStoryIndex:V.index,isPaused:q},void 0),n(H,{onPause:K,onResume:$,story:V,isPaused:q},V.index),n(y,{onNextClick:Z,onPrevClick:function(){0!==(null==V?void 0:V.index)&&j((function(e){if(!e)return R[0];var n=(null==e?void 0:e.index)-1;return R[n]}))},onPause:K,onResume:$},void 0)]}),void 0)}),void 0):null}export{J as default};
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=function(){return n=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},n.apply(this,arguments)},o=t.createContext({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var r=Object.freeze({LEFT:"left",RIGHT:"right"}),s="Actions-styles_left__eky50",i="Actions-styles_right__zguoH";function u(o){var u=o.onNextClick,c=o.onPrevClick,a=o.onPause,l=o.onResume,d=t.useState(!1),v=d[0],f=d[1],y=t.useRef(null);function m(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){a(),f(!0)}),200)}function h(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(y.current),v)return l(),void f(!1);l(),e!=r.LEFT?u():c()}function x(e){return{onMouseUp:function(t){return h(e,t)},onTouchEnd:function(t){return h(e,t)},onTouchStart:function(e){return m(e)},onMouseDown:function(e){return m(e)}}}return e.jsxs(t.Fragment,{children:[e.jsx("div",n({className:s},x(r.LEFT)),void 0),e.jsx("div",n({className:i},x(r.RIGHT)),void 0)]},void 0)}function c(){return t.useContext(o)}var a="ProgressBar-styles_wrapper__oqUCo",l="ProgressBar-styles_bar__x0O50",d=0,v=.1;function f(o){var r,s,i,u,f,y=c(),m=y.defaultDuration,h=y.classNames,x=t.useRef(null),p=t.useRef(null),_=t.useState(!1),j=_[0],g=_[1];return t.useEffect((function(){!o.isPaused&&o.isActive&&o.isActive?g(!0):g(!1)}),[o.isActive,o.isPaused]),t.useEffect((function(){var e;x.current&&(o.hasStoryPassed?x.current.style.width="".concat(null===(e=null==p?void 0:p.current)||void 0===e?void 0:e.offsetWidth,"px"):x.current.style.width="0px")}),[o.hasStoryPassed,o.isActive]),r=function(e){var t;x.current&&p.current&&((d=Number((x.current.style.width||"1px").slice(0,x.current.style.width.length-2))||0)>p.current.offsetWidth?g(!1):(v=(null===(t=null==p?void 0:p.current)||void 0===t?void 0:t.offsetWidth)/((o.story.duration||m)/e),x.current.style.width="".concat(d+v,"px")))},s=j,i=t.useRef(),u=t.useRef(),f=t.useRef(r),t.useEffect((function(){f.current=r}),[r]),t.useEffect((function(){return!1!==s?(i.current=requestAnimationFrame((function e(t){if(null!=u.current){var n=t-u.current;f.current(n)}u.current=t,i.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(i.current),i.current=null,u.current=null}):function(){i.current&&(i.current=null),cancelAnimationFrame(i.current),u.current=null}}),[s]),e.jsx("div",n({className:"".concat(a," ").concat((null==h?void 0:h.progressBarContainer)||""),ref:p},{children:e.jsx("div",{className:"".concat(l," ").concat((null==h?void 0:h.progressBar)||""),ref:x},void 0)}),void 0)}var y="progress-styles_wrapper__qQPyW";function m(t){var o=c(),r=o.stories,s=o.classNames;return e.jsx("div",n({className:"".concat(y," ").concat((null==s?void 0:s.progressContainer)||""),style:{gridTemplateColumns:"repeat(".concat(r.length,",1fr)")}},{children:r.map((function(n){return e.jsx(f,{hasStoryPassed:n.index<t.activeStoryIndex,isActive:n.index===t.activeStoryIndex,story:n,isPaused:n.index===t.activeStoryIndex&&t.isPaused},n.index)}))}),void 0)}var h=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),x="Story-styles_wrapper__oJP7j",p="Story-styles_header__-rnWL",_="Image-styles_image__gnfW1";function j(n){return t.useEffect((function(){n.onPause()}),[]),e.jsx("img",{className:_,src:n.story.url,alt:"story",onLoad:function(){setTimeout((function(){n.onResume()}),4)}},void 0)}var g,w="Video-styles_video__BykuO",S="Video-styles_loaderWrapper__TqVWk",M="Video-styles_loader__FxxSV",P="Video-styles_soundIcon__ZvYXE";function C(t){return"off"===t.type?e.jsx("svg",n({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):e.jsx("svg",n({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var N="RSIsMute",E="undefined"==typeof window?{}:window;function R(o){var r,s=c().isPaused,i=t.useState("true"===(null===(r=null==E?void 0:E.localStorage)||void 0===r?void 0:r.getItem(N))),u=i[0],a=i[1],l=t.useState(!1),d=l[0],v=l[1],f=t.useRef(null);function y(e){var t;null===(t=null==E?void 0:E.localStorage)||void 0===t||t.setItem(N,String(e)),a(e)}return t.useEffect((function(){o.onPause(),v(!0)}),[]),t.useEffect((function(){f.current&&(!s||f.current.paused?f.current.play().catch((function(){var e;y(!0),null===(e=f.current)||void 0===e||e.play()})):f.current.pause())}),[s]),e.jsxs(t.Fragment,{children:[e.jsxs("video",n({className:w,ref:f,playsInline:!0,"webkit-playsinline":"",controls:!1,src:o.story.url,onLoadedData:function(){setTimeout((function(){o.onResume(),v(!1)}),4)},muted:u},{children:[e.jsx("source",{src:o.story.url,type:"video/mp4"},void 0),e.jsx("source",{src:o.story.url,type:"video/webm"},void 0),e.jsx("source",{src:o.story.url,type:"video/ogg"},void 0),e.jsx("p",{children:"Video not supported"},void 0)]}),void 0),e.jsx("div",n({className:P,onClick:function(){return y(!u)}},{children:e.jsx(C,{type:u?"off":"on"},void 0)}),void 0),d&&e.jsx("div",n({className:S},{children:e.jsx("div",{className:M},void 0)}),void 0)]},void 0)}null===(g=null==E?void 0:E.localStorage)||void 0===g||g.setItem(N,"true");var T="CustomComponents-styles_component__w87Wx";function I(t){return e.jsx("div",n({className:T},{children:e.jsx(t.story.component,{pause:t.onPause,resume:t.onResume,story:t.story,isPaused:t.isPaused},void 0)}),void 0)}var O="SeeMore-styles_seeMoreWrapper__kwjif",D="SeeMore-styles_defaultSeeMore__-B1QW";function A(t){return t.story.seeMore?e.jsx("button",n({type:"button",onClick:function(){t.onSeeMoreClick()},className:O},{children:function(){var o=t.story.seeMore,r=typeof o;if(["string","boolean"].includes(r)){var s="string"===r?o:"See More";return e.jsxs("div",n({className:D},{children:[e.jsx("span",{children:"^"},void 0),e.jsx("p",{children:s},void 0)]}),void 0)}return"function"===r?e.jsx(t.story.seeMore,{},void 0):t.story.seeMore}()}),void 0):null}var b="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",k="SeeMoreComponent-styles_closeIcon__LMm3b";function W(t){return t.story.seeMore&&t.story.seeMoreComponent?e.jsxs("div",n({className:b},{children:[e.jsx("button",n({className:k,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?e.jsx(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function F(o){var r=t.useState(!1),s=r[0],i=r[1],u=c().classNames;return t.useEffect((function(){i(!1)}),[o.story]),e.jsxs("div",n({className:"".concat(x," ").concat((null==u?void 0:u.storyContainer)||"")},{children:[o.story.type===h.IMAGE?e.jsx(j,n({},o),void 0):o.story.type===h.VIDEO?e.jsx(R,n({},o),void 0):o.story.type===h.COMPONENT?e.jsx(I,n({},o),void 0):null,o.story.header&&e.jsx("div",n({className:p},{children:"function"==typeof o.story.header?e.jsx(o.story.header,{},void 0):o.story.header}),void 0),e.jsx(A,{onSeeMoreClick:function(){var e,t;o.onPause(),i(!0),null===(t=(e=o.story).onSeeMoreClick)||void 0===t||t.call(e,o.story.index)},story:o.story},void 0),s&&e.jsx(W,{story:o.story,onClose:function(){o.onResume(),i(!1)}},void 0)]}),void 0)}var z="styles_main__-0FEu";function V(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}module.exports=function(r){var s,i,c,a,l,d,v,f=r.stories,y=void 0===f?[]:f,h=r.width,x=void 0===h?"100%":h,p=r.height,_=void 0===p?"100%":p,j=r.onStoryChange,g=void 0===j?function(){}:j,w=r.currentIndex,S=void 0===w?0:w,M=r.defaultDuration,P=void 0===M?1e4:M,C=r.onAllStoriesEnd,N=void 0===C?function(){}:C,E=r.onStoriesStart,R=void 0===E?function(){}:E,T=r.classNames,I=void 0===T?{}:T,O=t.useMemo((function(){return function(e,t){var o=0;return e.map((function(e,r){var s=e.duration||t,i=s+V();return i===o&&(i=s+V(6)),o=i,n(n({},e),{index:r,calculatedDuration:i})}))}(y,P)}),[y,P]),D=t.useState(),A=D[0],b=D[1],k=y.length-1,W=t.useState(!1),B=W[0],U=W[1],q=t.useRef(!1),L=t.useRef(!1);function H(){q.current||(null==A?void 0:A.index)!==k||(N(),q.current=!0),(null==A?void 0:A.index)!==k&&b((function(e){if(!e)return O[0];var t=(null==e?void 0:e.index)+1;return O[t]}))}function G(){U(!0)}function Q(){U(!1)}t.useEffect((function(){L.current||(L.current=!0,R())}),[R]),t.useEffect((function(){var e=O[S];e&&b(e)}),[S,y]),t.useEffect((function(){A&&g(A.index)}),[A]),i=function(){H()},c=null!==(s=null==A?void 0:A.calculatedDuration)&&void 0!==s?s:null,a=B,l=t.useRef(),d=t.useRef(c),v=t.useRef(Date.now()),t.useEffect((function(){l.current=i}),[i]),t.useEffect((function(){d.current=c}),[c]),t.useEffect((function(){if(null!==c&&!1===a){v.current=Date.now();var e=setTimeout((function(){l.current()}),d.current);return function(){clearTimeout(e)}}return function(){}}),[c,a]),t.useEffect((function(){a&&(d.current=d.current-(Date.now()-v.current))}),[a]);var J={stories:O,width:x,height:_,defaultDuration:P,isPaused:B,classNames:I};return A?(console.log(I),e.jsx(o.Provider,n({value:J},{children:e.jsxs("div",n({className:"".concat(z," ").concat(I.main||""),style:{width:x,height:_}},{children:[e.jsx(m,{activeStoryIndex:A.index,isPaused:B},void 0),e.jsx(F,{onPause:G,onResume:Q,story:A,isPaused:B},A.index),e.jsx(u,{onNextClick:H,onPrevClick:function(){0!==(null==A?void 0:A.index)&&b((function(e){if(!e)return O[0];var t=(null==e?void 0:e.index)-1;return O[t]}))},onPause:G,onResume:Q},void 0)]}),void 0)}),void 0)):null};
+"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=function(){return t=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},t.apply(this,arguments)},o=n.createContext({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var r=Object.freeze({LEFT:"left",RIGHT:"right"}),s="Actions-styles_left__eky50",i="Actions-styles_right__zguoH";function u(o){var u=o.onNextClick,c=o.onPrevClick,a=o.onPause,l=o.onResume,d=n.useState(!1),v=d[0],f=d[1],y=n.useRef(null);function m(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){a(),f(!0)}),200)}function h(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(y.current),v)return l(),void f(!1);l(),e!=r.LEFT?u():c()}function x(e){return{onMouseUp:function(n){return h(e,n)},onTouchEnd:function(n){return h(e,n)},onTouchStart:function(e){return m(e)},onMouseDown:function(e){return m(e)}}}return e.jsxs(n.Fragment,{children:[e.jsx("div",t({className:s},x(r.LEFT)),void 0),e.jsx("div",t({className:i},x(r.RIGHT)),void 0)]},void 0)}function c(){return n.useContext(o)}var a="ProgressBar-styles_wrapper__oqUCo",l="ProgressBar-styles_bar__x0O50",d=0,v=.1;function f(o){var r,s,i,u,f,y=c(),m=y.defaultDuration,h=y.classNames,x=n.useRef(null),p=n.useRef(null),_=n.useState(!1),j=_[0],w=_[1];return n.useEffect((function(){!o.isPaused&&o.isActive&&o.isActive?w(!0):w(!1)}),[o.isActive,o.isPaused]),n.useEffect((function(){var e;x.current&&(o.hasStoryPassed?x.current.style.width="".concat(null===(e=null==p?void 0:p.current)||void 0===e?void 0:e.offsetWidth,"px"):x.current.style.width="0px")}),[o.hasStoryPassed,o.isActive]),r=function(e){var n;x.current&&p.current&&((d=Number((x.current.style.width||"1px").slice(0,x.current.style.width.length-2))||0)>p.current.offsetWidth?w(!1):(v=(null===(n=null==p?void 0:p.current)||void 0===n?void 0:n.offsetWidth)/((o.story.duration||m)/e),x.current.style.width="".concat(d+v,"px")))},s=j,i=n.useRef(),u=n.useRef(),f=n.useRef(r),n.useEffect((function(){f.current=r}),[r]),n.useEffect((function(){return!1!==s?(i.current=requestAnimationFrame((function e(n){if(null!=u.current){var t=n-u.current;f.current(t)}u.current=n,i.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(i.current),i.current=null,u.current=null}):function(){i.current&&(i.current=null),cancelAnimationFrame(i.current),u.current=null}}),[s]),e.jsx("div",t({className:"".concat(a," ").concat((null==h?void 0:h.progressBarContainer)||""),ref:p},{children:e.jsx("div",{className:"".concat(l," ").concat((null==h?void 0:h.progressBar)||""),ref:x},void 0)}),void 0)}var y="progress-styles_wrapper__qQPyW";function m(n){var o=c(),r=o.stories,s=o.classNames;return e.jsx("div",t({className:"".concat(y," ").concat((null==s?void 0:s.progressContainer)||""),style:{gridTemplateColumns:"repeat(".concat(r.length,",1fr)")}},{children:r.map((function(t){return e.jsx(f,{hasStoryPassed:t.index<n.activeStoryIndex,isActive:t.index===n.activeStoryIndex,story:t,isPaused:t.index===n.activeStoryIndex&&n.isPaused},t.index)}))}),void 0)}var h=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),x="Story-styles_wrapper__oJP7j",p="Story-styles_header__-rnWL",_="Image-styles_image__gnfW1";function j(t){return n.useEffect((function(){t.onPause()}),[]),e.jsx("img",{className:_,src:t.story.url,alt:"story",onLoad:function(){setTimeout((function(){t.onResume()}),4)}},void 0)}var w,g="Video-styles_video__BykuO",S="Video-styles_loaderWrapper__TqVWk",E="Video-styles_loader__FxxSV",M="Video-styles_soundIcon__ZvYXE";function P(n){return"off"===n.type?e.jsx("svg",t({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):e.jsx("svg",t({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var C="RSIsMute",N="undefined"==typeof window?{}:window;function R(o){var r,s=c().isPaused,i=n.useState("true"===(null===(r=null==N?void 0:N.localStorage)||void 0===r?void 0:r.getItem(C))),u=i[0],a=i[1],l=n.useState(!1),d=l[0],v=l[1],f=n.useRef(null);function y(e){var n;null===(n=null==N?void 0:N.localStorage)||void 0===n||n.setItem(C,String(e)),a(e)}return n.useEffect((function(){o.onPause(),v(!0)}),[]),n.useEffect((function(){f.current&&(!s||f.current.paused?f.current.play().catch((function(){var e;y(!0),null===(e=f.current)||void 0===e||e.play()})):f.current.pause())}),[s]),e.jsxs(n.Fragment,{children:[e.jsxs("video",t({className:g,ref:f,playsInline:!0,"webkit-playsinline":"",controls:!1,src:o.story.url,onLoadedData:function(){setTimeout((function(){o.onResume(),v(!1)}),4)},muted:u},{children:[e.jsx("source",{src:o.story.url,type:"video/mp4"},void 0),e.jsx("source",{src:o.story.url,type:"video/webm"},void 0),e.jsx("source",{src:o.story.url,type:"video/ogg"},void 0),e.jsx("p",{children:"Video not supported"},void 0)]}),void 0),e.jsx("div",t({className:M,onClick:function(){return y(!u)}},{children:e.jsx(P,{type:u?"off":"on"},void 0)}),void 0),d&&e.jsx("div",t({className:S},{children:e.jsx("div",{className:E},void 0)}),void 0)]},void 0)}null===(w=null==N?void 0:N.localStorage)||void 0===w||w.setItem(C,"true");var T="CustomComponents-styles_component__w87Wx";function I(n){return e.jsx("div",t({className:T},{children:e.jsx(n.story.component,{pause:n.onPause,resume:n.onResume,story:n.story,isPaused:n.isPaused},void 0)}),void 0)}var O="SeeMore-styles_seeMoreWrapper__kwjif",D="SeeMore-styles_defaultSeeMore__-B1QW";function b(n){return n.story.seeMore?e.jsx("button",t({type:"button",onClick:function(){n.onSeeMoreClick()},className:O},{children:function(){var o=n.story.seeMore,r=typeof o;if(["string","boolean"].includes(r)){var s="string"===r?o:"See More";return e.jsxs("div",t({className:D},{children:[e.jsx("span",{children:"^"},void 0),e.jsx("p",{children:s},void 0)]}),void 0)}return"function"===r?e.jsx(n.story.seeMore,{},void 0):n.story.seeMore}()}),void 0):null}var A="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",k="SeeMoreComponent-styles_closeIcon__LMm3b";function W(n){return n.story.seeMore&&n.story.seeMoreComponent?e.jsxs("div",t({className:A},{children:[e.jsx("button",t({className:k,onClick:n.onClose},{children:"✕"}),void 0),"function"==typeof n.story.seeMoreComponent?e.jsx(n.story.seeMoreComponent,{},void 0):n.story.seeMoreComponent]}),void 0):null}function F(o){var r=n.useState(!1),s=r[0],i=r[1],u=c().classNames;return n.useEffect((function(){i(!1)}),[o.story]),e.jsxs("div",t({className:"".concat(x," ").concat((null==u?void 0:u.storyContainer)||"")},{children:[o.story.type===h.IMAGE?e.jsx(j,t({},o),void 0):o.story.type===h.VIDEO?e.jsx(R,t({},o),void 0):o.story.type===h.COMPONENT?e.jsx(I,t({},o),void 0):null,o.story.header&&e.jsx("div",t({className:p},{children:"function"==typeof o.story.header?e.jsx(o.story.header,{},void 0):o.story.header}),void 0),e.jsx(b,{onSeeMoreClick:function(){var e,n;o.onPause(),i(!0),null===(n=(e=o.story).onSeeMoreClick)||void 0===n||n.call(e,o.story.index)},story:o.story},void 0),s&&e.jsx(W,{story:o.story,onClose:function(){o.onResume(),i(!1)}},void 0)]}),void 0)}var z="styles_main__-0FEu";function L(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}module.exports=function(r){var s,i,c,a,l,d,v,f=r.stories,y=void 0===f?[]:f,h=r.width,x=void 0===h?"100%":h,p=r.height,_=void 0===p?"100%":p,j=r.onStoryChange,w=void 0===j?function(){}:j,g=r.currentIndex,S=void 0===g?0:g,E=r.defaultDuration,M=void 0===E?1e4:E,P=r.onAllStoriesEnd,C=void 0===P?function(){}:P,N=r.onStoriesStart,R=void 0===N?function(){}:N,T=r.classNames,I=void 0===T?{}:T,O=r.pauseStoryWhenInActiveWindow,D=void 0===O||O,b=n.useMemo((function(){return function(e,n){var o=0;return e.map((function(e,r){var s=e.duration||n,i=s+L();return i===o&&(i=s+L(6)),o=i,t(t({},e),{index:r,calculatedDuration:i})}))}(y,M)}),[y,M]),A=n.useState(),k=A[0],W=A[1],V=y.length-1,B=n.useState(!1),U=B[0],q=B[1],H=n.useRef(!1),G=n.useRef(!1);function Q(){H.current||(null==k?void 0:k.index)!==V||(C(),H.current=!0),(null==k?void 0:k.index)!==V&&W((function(e){if(!e)return b[0];var n=(null==e?void 0:e.index)+1;return b[n]}))}function J(){q(!0)}function X(){q(!1)}n.useEffect((function(){G.current||(G.current=!0,R())}),[R]),n.useEffect((function(){var e=b[S];e&&W(e)}),[S,y]),n.useEffect((function(){k&&w(k.index)}),[k]),i=function(){Q()},c=null!==(s=null==k?void 0:k.calculatedDuration)&&void 0!==s?s:null,a=U,l=n.useRef(),d=n.useRef(c),v=n.useRef(Date.now()),n.useEffect((function(){l.current=i}),[i]),n.useEffect((function(){d.current=c}),[c]),n.useEffect((function(){if(null!==c&&!1===a){v.current=Date.now();var e=setTimeout((function(){l.current()}),d.current);return function(){clearTimeout(e)}}return function(){}}),[c,a]),n.useEffect((function(){a&&(d.current=d.current-(Date.now()-v.current))}),[a]),function(e){var t=n.useRef(e);n.useEffect((function(){t.current=e}),[e]),n.useEffect((function(){function e(){t.current(!0)}function n(){t.current(!1)}return window.addEventListener("focus",e),window.addEventListener("blur",n),function(){window.removeEventListener("focus",e),window.removeEventListener("blur",n)}}),[])}((function(e){D&&q(!e)}));var Y={stories:b,width:x,height:_,defaultDuration:M,isPaused:U,classNames:I};return k?e.jsx(o.Provider,t({value:Y},{children:e.jsxs("div",t({className:"".concat(z," ").concat(I.main||""),style:{width:x,height:_}},{children:[e.jsx(m,{activeStoryIndex:k.index,isPaused:U},void 0),e.jsx(F,{onPause:J,onResume:X,story:k,isPaused:U},k.index),e.jsx(u,{onNextClick:Q,onPrevClick:function(){0!==(null==k?void 0:k.index)&&W((function(e){if(!e)return b[0];var n=(null==e?void 0:e.index)-1;return b[n]}))},onPause:J,onResume:X},void 0)]}),void 0)}),void 0):null};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "stories-react",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "instagram style stories in react js",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -64,13 +64,14 @@ <h1 style="margin: 0" align="center">stories-react</h1>
 
-| Property                 | Type                          | Default       | Description                                                                             |
-| ------------------------ | ------------------------------| --------------| --------------------------------------------------------------------------------------- |
-| `stories`                | `IStoryObject[]`              | `[]`          |  An array of story objects. description of `IStoryObject` is mentioned below            |
-| `height`                 | `string`                      | `100%`        |  Height of story container                                                              |
-| `width`                  | `string`                      | `100%`        |  Width of story container                                                               |
-| `onStoryChange`          | `function(index:number)`      | `-`           |  Callback called when story changes                                                     |
-| `onStoriesStart`         | `function`                    | `-`           |  Callback called when first story is rendered. it get called only once,                 |
-| `onAllStoriesEnd`        | `function`                    | `-`           |  Callback called when last story gets completed. it will get called only once           |
-| `currentIndex`           | `number`                      | `-`           |  Current index of the story which should be selected first                              |
-| `defaultDuration`        | `number`                      | `10000`       |  default duration in ms of stories if duration is not provided in the `IStoryObject`    |
-| `classNames`             | `IStoryClassNames`            | `{}`           |  classnames to overide different sections of a story renderer                           |
+| Property                      | Type                          | Default       | Description                                                                             |
+| ------------------------------| ------------------------------| --------------| --------------------------------------------------------------------------------------- |
+| `stories`                     | `IStoryObject[]`              | `[]`          |  An array of story objects. description of `IStoryObject` is mentioned below            |
+| `height`                      | `string`                      | `100%`        |  Height of story container                                                              |
+| `width`                       | `string`                      | `100%`        |  Width of story container                                                               |
+| `onStoryChange`               | `function(index:number)`      | `-`           |  Callback called when story changes                                                     |
+| `onStoriesStart`              | `function`                    | `-`           |  Callback called when first story is rendered. it get called only once,                 |
+| `onAllStoriesEnd`             | `function`                    | `-`           |  Callback called when last story gets completed. it will get called only once           |
+| `currentIndex`                | `number`                      | `-`           |  Current index of the story which should be selected first                              |
+| `defaultDuration`             | `number`                      | `10000`       |  default duration in ms of stories if duration is not provided in the `IStoryObject`    |
+| `classNames`                  | `IStoryClassNames`            | `{}`          |  classnames to overide different sections of a story renderer                           |
+| `pauseStoryWhenInActiveWindow`| `boolean`                     | `true`        |  pauses story when window goes out of focus (user changes tab/minimizes browser etc     |
 
@@ -77,0 +78,0 @@ ## IStoryObject

src/Hooks/index.ts

@@ -93,1 +93,24 @@ import { useContext, useRef, useEffect } from 'react';
 }
+
+export function useWindowVisibility(callback: (isVisible: boolean) => void) {
+  const callBackRef = useRef(callback);
+  useEffect(() => {
+    callBackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    function handleActive() {
+      callBackRef.current(true);
+    }
+    function handleInActive() {
+      callBackRef.current(false);
+    }
+    window.addEventListener('focus', handleActive);
+    window.addEventListener('blur', handleInActive);
+
+    return () => {
+      window.removeEventListener('focus', handleActive);
+      window.removeEventListener('blur', handleInActive);
+    };
+  }, []);
+}

src/types.d.ts

@@ -35,2 +35,3 @@ interface IStoryObject {
   classNames?: IStoryClassNames;
+  pauseStoryWhenInActiveWindow?: boolean;
 }
@@ -37,0 +38,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

543616

increased by0.36%

Lines of code

1250

increased by2.38%

Number of lines in readme file

110

increased by0.92%

No dependency changes