hypnagaga/docs/assets/Video.stories-1626d946.js

import{S as de,i as ce,s as fe,q as it,u as lt,r as st,v as rt,b as k,t as g,a1 as De,o as at,a2 as ut,a6 as dt,w as B,C as I,x as w,a as C,N as P,g as L,c as N,d as T,M as me,E as U,j as S,m as R,n as W,O as pe,f as se,D as M,e as _e,z,Y as Se,Q as re,R as Y,T as ae,a3 as ct,a4 as ft,ab as Re,p as ee,k as te,l as oe}from"./index-25af778d.js";import{p as pt,M as yt,T as ht,S as ie}from"./collect-stories-cce06d4a.js";import{F as ye}from"./fa-0c534c9e.js";import{g as We,h as mt,i as _t}from"./index.es-7d03df34.js";import{B as bt}from"./Block-9c89ee1a.js";import{w as ke,a as Q}from"./withParams-90715500.js";const we=`General-purpose video component. Can play on load or when the video comes into view and has play/pause controls. Supports videos with or without audio.

\`\`\`html
<script>
  import { Video } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // If using local video in the Graphics Kit
<\/script>

<video
  ariaDescription="{'Compulsory description of your video for screen readers.'}"
  src="{\`\${assets}/videos/myVideo.mp4\`}"
  width="{'wide'}"
  caption="{'Optional caption for your video.'}"
/>
\`\`\`
`,ge=`\`playVideoWhenInView\`, \`playVideoThreshold\`

- By default, the video will **start playing when 50% of the video element's height is visible on the page**.
  To control the threshold of visibility at which the video starts playing, add the prop \`playVideoThreshold\` and set it to a value between 0 and 1,
  where 0 means that the video will start playing as soon as its top enters the viewport, while 1 means it will start when the whole video is in the viewport.

- If you don't want the video to play when you scroll to it, but **on page load**, add the prop \`playVideoWhenInView={false}\`. The default of the prop is \`true\`,
  which corresponds to the behaviour described above.

\`loopVideo\`

- By default, the video will **loop**. If you don't want that, add the prop \`loopVideo={false}\`.

Here is an example of what the same video would look like with a visibility threshold of 0.9 and not looping. Scroll down slowly to observe the behaviour.

\`\`\`html
<script>
  import { Video } from '@reuters-graphics/graphics-components';
<\/script>

<video
  ariaDescription="{'Compulsory description of your video for screen readers.'}"
  src="{'path-to-video-or-external-url'}"
  width="{'normal'}"
  loopVideo="{false}"
  playVideoThreshold="{0.9}"
/>
\`\`\`
`,le=`\`showControls\`

- By default, the video has a play/pause button, which corresponds to
  \`showControls={true}\`. If you don't want these, just set \`showControls={false}\`.
  When you do that, the icons themselves will disappear but the functionality of playing and pausing remains and can be done by clicking on the video itself.
  If you don't want to enable any play/pause functionality, add \`possibleToPlayPause={false}\`.
- If you want to show the controls only when the video is hovered, set \`hoverToSeeControls={true}\`.

\`controlsColour\`, \`controlsOpacity\`, \`controlsPosition\`, \`separateReplayIcon\`

If you do want to leave the controls, you have a couple of options to style them:

- Set \`controlsColour\` to a colour of your choosing.
- Set \`controlsOpacity\` to a value between \`0\` and \`1\` to control the opacity. The default is \`0.5\`.
- Change the placement of the controls to one of: \`top right\`, \`top left\`, \`bottom right\`, \`bottom left\`, \`center\` by setting \`controlsPosition\`.
- Change the play button to a replay button at the end of the video with the option \`separateReplayIcon={true}\`.

Here is an example with bottom right corner white opaque controls, with a replay button, where you have to hover on the video to see the controls.

\`\`\`html
<script>
  import { Video } from '@reuters-graphics/graphics-components';
<\/script>

<video
  ariaDescription="{'Compulsory description of your video for screen readers.'}"
  src="{'path-to-video-or-external-url'}"
  width="{'normal'}"
  caption="{'Optional caption for your video.'}"
  playVideoThreshold="{0.1}"
  controlsColour="{'white'}"
  controlsOpacity="{1}"
  controlsPosition="{'bottom right'}"
  separateReplayIcon="{true}"
  loopVideo="{false}"
  hoverToSeeControls="{true}"
/>
\`\`\`
`,$=""+new URL("silent-video-5e925669.mp4",import.meta.url).href,ve=""+new URL("sound-video-50224f39.mp4",import.meta.url).href,kt=n=>({intersecting:n&1,entry:n&2,observer:n&4}),Ve=n=>({intersecting:n[0],entry:n[1],observer:n[2]});function wt(n){let e;const o=n[9].default,t=it(o,n,n[8],Ve);return{c(){t&&t.c()},m(i,l){t&&t.m(i,l),e=!0},p(i,[l]){t&&t.p&&(!e||l&263)&&lt(t,o,i,i[8],e?rt(o,i[8],l,kt):st(i[8]),Ve)},i(i){e||(k(t,i),e=!0)},o(i){g(t,i),e=!1},d(i){t&&t.d(i)}}}function gt(n,e,o){let{$$slots:t={},$$scope:i}=e,{element:l=null}=e,{once:s=!1}=e,{intersecting:u=!1}=e,{root:a=null}=e,{rootMargin:y="0px"}=e,{threshold:f=0}=e,{entry:h=null}=e,{observer:r=null}=e;const _=De();let V=null,d=null;const D=()=>{o(2,r=new IntersectionObserver(c=>{c.forEach(b=>{o(1,h=b),o(0,u=b.isIntersecting)})},{root:a,rootMargin:y,threshold:f}))};return at(()=>(D(),()=>{r&&(r.disconnect(),o(2,r=null))})),ut(async()=>{h!==null&&(_("observe",h),h.isIntersecting&&(_("intersect",h),s&&r.unobserve(l))),await dt(),l!==null&&l!==d&&(r.observe(l),d!==null&&r.unobserve(d),d=l),V&&y!==V&&(r.disconnect(),d=null,D()),V=y}),n.$$set=c=>{"element"in c&&o(3,l=c.element),"once"in c&&o(4,s=c.once),"intersecting"in c&&o(0,u=c.intersecting),"root"in c&&o(5,a=c.root),"rootMargin"in c&&o(6,y=c.rootMargin),"threshold"in c&&o(7,f=c.threshold),"entry"in c&&o(1,h=c.entry),"observer"in c&&o(2,r=c.observer),"$$scope"in c&&o(8,i=c.$$scope)},[u,h,r,l,s,a,y,f,i,t]}class vt extends de{constructor(e){super(),ce(this,e,gt,wt,fe,{element:3,once:4,intersecting:0,root:5,rootMargin:6,threshold:7,entry:1,observer:2})}}const Vt=vt;IntersectionObserver.__docgen={version:3,name:"IntersectionObserver.svelte",data:[{keywords:[{name:"type",description:"{HTMLElement}"}],visibility:"public",description:"The HTML Element to observe.",name:"element",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"HTMLElement",type:"HTMLElement"},defaultValue:null},{keywords:[{name:"type",description:"{boolean}"}],visibility:"public",description:"Set to `true` to unobserve the element\nafter it intersects the viewport.",name:"once",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"`true` if the observed element\nis intersecting the viewport.",name:"intersecting",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[{name:"type",description:"{HTMLElement}"}],visibility:"public",description:`Specify the containing element.
Defaults to the browser viewport.`,name:"root",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"HTMLElement",type:"HTMLElement"},defaultValue:null},{keywords:[],visibility:"public",description:"Margin offset of the containing element.",name:"rootMargin",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"0px"},{keywords:[],visibility:"public",description:`Percentage of element visibility to trigger an event.
Value must be between 0 and 1.`,name:"threshold",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:0},{keywords:[{name:"type",description:"{null | IntersectionObserverEntry}"}],visibility:"public",description:"Observed element metadata.",name:"entry",kind:"let",static:!1,readonly:!1,type:{kind:"union",text:"null | IntersectionObserverEntry",type:[{kind:"type",text:"null",type:"null"},{kind:"type",text:"IntersectionObserverEntry",type:"IntersectionObserverEntry"}]},defaultValue:null},{keywords:[{name:"type",description:"{null | IntersectionObserver}"}],visibility:"public",description:"`IntersectionObserver` instance.",name:"observer",kind:"let",static:!1,readonly:!1,type:{kind:"union",text:"null | IntersectionObserver",type:[{kind:"type",text:"null",type:"null"},{kind:"type",text:"IntersectionObserver",type:"IntersectionObserver"}]},defaultValue:null}],computed:[],methods:[],components:[],description:null,keywords:[],events:[{visibility:"public",description:null,keywords:[],name:"observe"},{visibility:"public",description:null,keywords:[],name:"intersect"}],slots:[{keywords:[],visibility:"public",description:"",name:"default",params:[{name:"{intersecting}",type:{kind:"type",text:"*",type:"any"}},{name:"{entry}",type:{kind:"type",text:"*",type:"any"}},{name:"{observer}",type:{kind:"type",text:"*",type:"any"}}],parameters:[{name:"{intersecting}",type:{kind:"type",text:"*",type:"any"}},{name:"{entry}",type:{kind:"type",text:"*",type:"any"}},{name:"{observer}",type:{kind:"type",text:"*",type:"any"}}]}],refs:[]};function Ct(n){let e;return{c(){e=me("error")},m(o,t){C(o,e,t)},p:U,i:U,o:U,d(o){o&&T(e)}}}function Tt(n){let e,o,t;return o=new ye({props:{icon:We,size:"2x",color:n[8]}}),{c(){e=B("i"),S(o.$$.fragment),w(e,"class","play-pause-icon play")},m(i,l){C(i,e,l),R(o,e,null),t=!0},p(i,l){const s={};l&256&&(s.color=i[8]),o.$set(s)},i(i){t||(k(o.$$.fragment,i),t=!0)},o(i){g(o.$$.fragment,i),t=!1},d(i){i&&T(e),W(o)}}}function It(n){let e,o,t;return o=new ye({props:{icon:mt,size:"2x",color:n[8]}}),{c(){e=B("i"),S(o.$$.fragment),w(e,"class","play-pause-icon pause")},m(i,l){C(i,e,l),R(o,e,null),t=!0},p(i,l){const s={};l&256&&(s.color=i[8]),o.$set(s)},i(i){t||(k(o.$$.fragment,i),t=!0)},o(i){g(o.$$.fragment,i),t=!1},d(i){i&&T(e),W(o)}}}function Ot(n){let e,o,t,i;const l=[Dt,Pt],s=[];function u(a,y){return a[7]?0:1}return o=u(n),t=s[o]=l[o](n),{c(){e=B("i"),t.c(),w(e,"class","play-pause-icon replay")},m(a,y){C(a,e,y),s[o].m(e,null),i=!0},p(a,y){let f=o;o=u(a),o===f?s[o].p(a,y):(L(),g(s[f],1,1,()=>{s[f]=null}),N(),t=s[o],t?t.p(a,y):(t=s[o]=l[o](a),t.c()),k(t,1),t.m(e,null))},i(a){i||(k(t),i=!0)},o(a){g(t),i=!1},d(a){a&&T(e),s[o].d()}}}function Pt(n){let e,o;return e=new ye({props:{icon:We,size:"2x",color:n[8]}}),{c(){S(e.$$.fragment)},m(t,i){R(e,t,i),o=!0},p(t,i){const l={};i&256&&(l.color=t[8]),e.$set(l)},i(t){o||(k(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){W(e,t)}}}function Dt(n){let e,o;return e=new ye({props:{icon:_t,size:"2x",color:n[8]}}),{c(){S(e.$$.fragment)},m(t,i){R(e,t,i),o=!0},p(t,i){const l={};i&256&&(l.color=t[8]),e.$set(l)},i(t){o||(k(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){W(e,t)}}}function St(n){let e,o,t,i,l,s;const u=[Ot,It,Tt,Ct],a=[];function y(f,h){return f[6]?0:f[0]===!1?1:f[0]===!0?2:3}return o=y(n),t=a[o]=u[o](n),{c(){e=B("button"),t.c(),I(e,"opacity",n[1]),I(e,"top",n[2]==="top left"||n[2]==="top right"?"10px":n[2]==="center"?`${(n[4]-n[5])/2}px`:`${n[4]-n[5]}px`),I(e,"left",n[2]==="top left"||n[2]==="bottom left"?"10px":n[2]==="center"?`${(n[3]-n[5])/2}px`:`${n[3]-n[5]}px`),w(e,"class","svelte-1rmu17u")},m(f,h){C(f,e,h),a[o].m(e,null),i=!0,l||(s=P(e,"click",n[9]),l=!0)},p(f,[h]){let r=o;o=y(f),o===r?a[o].p(f,h):(L(),g(a[r],1,1,()=>{a[r]=null}),N(),t=a[o],t?t.p(f,h):(t=a[o]=u[o](f),t.c()),k(t,1),t.m(e,null)),(!i||h&2)&&I(e,"opacity",f[1]),(!i||h&52)&&I(e,"top",f[2]==="top left"||f[2]==="top right"?"10px":f[2]==="center"?`${(f[4]-f[5])/2}px`:`${f[4]-f[5]}px`),(!i||h&44)&&I(e,"left",f[2]==="top left"||f[2]==="bottom left"?"10px":f[2]==="center"?`${(f[3]-f[5])/2}px`:`${f[3]-f[5]}px`)},i(f){i||(k(t),i=!0)},o(f){g(t),i=!1},d(f){f&&T(e),a[o].d(),l=!1,s()}}}function Rt(n,e,o){const t=De();let{paused:i}=e,{clickedOnPauseBtn:l}=e,{controlsOpacity:s}=e,{controlsPosition:u}=e,{widthVideoContainer:a}=e,{heightVideoContainer:y}=e,{controlsBorderOffset:f}=e,{resetCondition:h}=e,{separateReplayIcon:r}=e,{controlsColour:_}=e;function V(){o(0,i=!i),o(10,l=i===!0),t("pausePlayEvent",{paused:i,clickedOnPauseBtn:l})}return n.$$set=d=>{"paused"in d&&o(0,i=d.paused),"clickedOnPauseBtn"in d&&o(10,l=d.clickedOnPauseBtn),"controlsOpacity"in d&&o(1,s=d.controlsOpacity),"controlsPosition"in d&&o(2,u=d.controlsPosition),"widthVideoContainer"in d&&o(3,a=d.widthVideoContainer),"heightVideoContainer"in d&&o(4,y=d.heightVideoContainer),"controlsBorderOffset"in d&&o(5,f=d.controlsBorderOffset),"resetCondition"in d&&o(6,h=d.resetCondition),"separateReplayIcon"in d&&o(7,r=d.separateReplayIcon),"controlsColour"in d&&o(8,_=d.controlsColour)},[i,s,u,a,y,f,h,r,_,V,l]}let be=class extends de{constructor(e){super(),ce(this,e,Rt,St,fe,{paused:0,clickedOnPauseBtn:10,controlsOpacity:1,controlsPosition:2,widthVideoContainer:3,heightVideoContainer:4,controlsBorderOffset:5,resetCondition:6,separateReplayIcon:7,controlsColour:8})}};be.__docgen={version:3,name:"Controls.svelte",data:[{visibility:"public",description:null,keywords:[],name:"paused",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"clickedOnPauseBtn",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"controlsOpacity",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"controlsPosition",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"widthVideoContainer",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"heightVideoContainer",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"controlsBorderOffset",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"resetCondition",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"separateReplayIcon",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{visibility:"public",description:null,keywords:[],name:"controlsColour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}}],computed:[],methods:[],components:[],description:null,keywords:[],events:[{keywords:[],visibility:"public",description:"so video doesn't autoplay when coming into view again if paused previously",name:"pausePlayEvent"}],slots:[],refs:[]};function Ce(n){let e,o,t,i,l,s,u=n[3]&&Te(n);const a=[Bt,Wt],y=[];function f(r,_){return r[9]?0:1}o=f(n),t=y[o]=a[o](n);let h=n[4]&&Pe(n);return{c(){u&&u.c(),e=M(),t.c(),i=M(),h&&h.c(),l=_e()},m(r,_){u&&u.m(r,_),C(r,e,_),y[o].m(r,_),C(r,i,_),h&&h.m(r,_),C(r,l,_),s=!0},p(r,_){r[3]?u?u.p(r,_):(u=Te(r),u.c(),u.m(e.parentNode,e)):u&&(u.d(1),u=null);let V=o;o=f(r),o===V?y[o].p(r,_):(L(),g(y[V],1,1,()=>{y[V]=null}),N(),t=y[o],t?t.p(r,_):(t=y[o]=a[o](r),t.c()),k(t,1),t.m(i.parentNode,i)),r[4]?h?h.p(r,_):(h=Pe(r),h.c(),h.m(l.parentNode,l)):h&&(h.d(1),h=null)},i(r){s||(k(t),s=!0)},o(r){g(t),s=!1},d(r){u&&u.d(r),r&&T(e),y[o].d(r),r&&T(i),h&&h.d(r),r&&T(l)}}}function Te(n){let e,o;return{c(){e=B("p"),o=me(n[3]),w(e,"class","visually-hidden svelte-chkcui")},m(t,i){C(t,e,i),z(e,o)},p(t,i){i[0]&8&&Se(o,t[3])},d(t){t&&T(e)}}}function Wt(n){let e,o,t,i,l,s,u=!1,a,y=!0,f,h,r,_,V,d=n[11]&&Ie(n);function D(){cancelAnimationFrame(a),t.paused||(a=Re(D),u=!0),n[45].call(t)}return{c(){e=B("div"),d&&d.c(),o=M(),t=B("video"),i=B("track"),w(i,"kind","captions"),re(t.src,l=n[1])||w(t,"src",l),w(t,"width","100%"),t.muted=n[8],t.playsInline=!0,w(t,"preload",n[6]),t.loop=n[7],t.autoplay=!0,w(t,"style",s=(n[0],"position: relative")),w(t,"class","svelte-chkcui"),n[18]===void 0&&Y(()=>n[46].call(t)),Y(()=>n[48].call(t)),w(e,"class","video-wrapper svelte-chkcui"),w(e,"aria-hidden",n[2]),Y(()=>n[49].call(e))},m(c,b){C(c,e,b),d&&d.m(e,null),z(e,o),z(e,t),z(t,i),n[44](t),f=ae(t,n[48].bind(t)),h=ae(e,n[49].bind(e)),r=!0,_||(V=[P(t,"timeupdate",D),P(t,"durationchange",n[46]),P(t,"play",n[47]),P(t,"pause",n[47])],_=!0)},p(c,b){c[11]?d?(d.p(c,b),b[0]&2048&&k(d,1)):(d=Ie(c),d.c(),k(d,1),d.m(e,o)):d&&(L(),g(d,1,1,()=>{d=null}),N()),(!r||b[0]&2&&!re(t.src,l=c[1]))&&w(t,"src",l),(!r||b[0]&256)&&(t.muted=c[8]),(!r||b[0]&64)&&w(t,"preload",c[6]),(!r||b[0]&128)&&(t.loop=c[7]),(!r||b[0]&1&&s!==(s=(c[0],"position: relative")))&&w(t,"style",s),!u&&b[0]&131072&&!isNaN(c[17])&&(t.currentTime=c[17]),u=!1,b[0]&2097152&&y!==(y=c[21])&&t[y?"pause":"play"](),(!r||b[0]&4)&&w(e,"aria-hidden",c[2])},i(c){r||(k(d),r=!0)},o(c){g(d),r=!1},d(c){c&&T(e),d&&d.d(),n[44](null),f(),h(),_=!1,pe(V)}}}function Bt(n){let e,o,t;function i(s){n[42](s)}let l={element:n[26],threshold:n[10],once:!1,$$slots:{default:[zt]},$$scope:{ctx:n}};return n[20]!==void 0&&(l.intersecting=n[20]),e=new Vt({props:l}),se.push(()=>ct(e,"intersecting",i)),{c(){S(e.$$.fragment)},m(s,u){R(e,s,u),t=!0},p(s,u){const a={};u[0]&67108864&&(a.element=s[26]),u[0]&1024&&(a.threshold=s[10]),u[0]&1072691655|u[1]&8388608&&(a.$$scope={dirty:u,ctx:s}),!o&&u[0]&1048576&&(o=!0,a.intersecting=s[20],ft(()=>o=!1)),e.$set(a)},i(s){t||(k(e.$$.fragment,s),t=!0)},o(s){g(e.$$.fragment,s),t=!1},d(s){W(e,s)}}}function Ie(n){let e,o,t,i;const l=[Mt,Et],s=[];function u(a,y){return a[0]?0:1}return e=u(n),o=s[e]=l[e](n),{c(){o.c(),t=_e()},m(a,y){s[e].m(a,y),C(a,t,y),i=!0},p(a,y){let f=e;e=u(a),e===f?s[e].p(a,y):(L(),g(s[f],1,1,()=>{s[f]=null}),N(),o=s[e],o?o.p(a,y):(o=s[e]=l[e](a),o.c()),k(o,1),o.m(t.parentNode,t))},i(a){i||(k(o),i=!0)},o(a){g(o),i=!1},d(a){s[e].d(a),a&&T(t)}}}function Et(n){let e,o,t;return{c(){e=B("button"),I(e,"position","absolute"),I(e,"top","0"),I(e,"left","0"),I(e,"width",n[25]+"px"),I(e,"height",n[24]+"px"),w(e,"class","svelte-chkcui")},m(i,l){C(i,e,l),o||(t=P(e,"click",n[43]),o=!0)},p(i,l){l[0]&33554432&&I(e,"width",i[25]+"px"),l[0]&16777216&&I(e,"height",i[24]+"px")},i:U,o:U,d(i){i&&T(e),o=!1,t()}}}function Mt(n){let e,o;return e=new be({props:{paused:n[21],clickedOnPauseBtn:n[19],controlsOpacity:n[15],controlsPosition:n[16],widthVideoContainer:n[25],heightVideoContainer:n[24],controlsBorderOffset:Be,resetCondition:n[28],separateReplayIcon:n[13],controlsColour:n[14]}}),e.$on("pausePlayEvent",n[31]),{c(){S(e.$$.fragment)},m(t,i){R(e,t,i),o=!0},p(t,i){const l={};i[0]&2097152&&(l.paused=t[21]),i[0]&524288&&(l.clickedOnPauseBtn=t[19]),i[0]&32768&&(l.controlsOpacity=t[15]),i[0]&65536&&(l.controlsPosition=t[16]),i[0]&33554432&&(l.widthVideoContainer=t[25]),i[0]&16777216&&(l.heightVideoContainer=t[24]),i[0]&268435456&&(l.resetCondition=t[28]),i[0]&8192&&(l.separateReplayIcon=t[13]),i[0]&16384&&(l.controlsColour=t[14]),e.$set(l)},i(t){o||(k(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){W(e,t)}}}function Oe(n){let e,o,t,i;const l=[Ht,At],s=[];function u(a,y){return a[0]?0:1}return e=u(n),o=s[e]=l[e](n),{c(){o.c(),t=_e()},m(a,y){s[e].m(a,y),C(a,t,y),i=!0},p(a,y){let f=e;e=u(a),e===f?s[e].p(a,y):(L(),g(s[f],1,1,()=>{s[f]=null}),N(),o=s[e],o?o.p(a,y):(o=s[e]=l[e](a),o.c()),k(o,1),o.m(t.parentNode,t))},i(a){i||(k(o),i=!0)},o(a){g(o),i=!1},d(a){s[e].d(a),a&&T(t)}}}function At(n){let e,o,t;return{c(){e=B("button"),I(e,"position","absolute"),I(e,"top","0"),I(e,"left","0"),I(e,"width",n[25]+"px"),I(e,"height",n[24]+"px"),w(e,"class","svelte-chkcui")},m(i,l){C(i,e,l),o||(t=P(e,"click",n[34]),o=!0)},p(i,l){l[0]&33554432&&I(e,"width",i[25]+"px"),l[0]&16777216&&I(e,"height",i[24]+"px")},i:U,o:U,d(i){i&&T(e),o=!1,t()}}}function Ht(n){let e,o;return e=new be({props:{paused:n[21],clickedOnPauseBtn:n[19],controlsOpacity:n[12]?n[29]:n[15],controlsPosition:n[16],widthVideoContainer:n[25],heightVideoContainer:n[24],controlsBorderOffset:Be,resetCondition:n[28],separateReplayIcon:n[13],controlsColour:n[14]}}),e.$on("pausePlayEvent",n[31]),{c(){S(e.$$.fragment)},m(t,i){R(e,t,i),o=!0},p(t,i){const l={};i[0]&2097152&&(l.paused=t[21]),i[0]&524288&&(l.clickedOnPauseBtn=t[19]),i[0]&536907776&&(l.controlsOpacity=t[12]?t[29]:t[15]),i[0]&65536&&(l.controlsPosition=t[16]),i[0]&33554432&&(l.widthVideoContainer=t[25]),i[0]&16777216&&(l.heightVideoContainer=t[24]),i[0]&268435456&&(l.resetCondition=t[28]),i[0]&8192&&(l.separateReplayIcon=t[13]),i[0]&16384&&(l.controlsColour=t[14]),e.$set(l)},i(t){o||(k(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){W(e,t)}}}function zt(n){let e,o,t,i,l,s,u=!1,a,y=!0,f,h,r,_,V,d=n[11]&&Oe(n);function D(){cancelAnimationFrame(a),t.paused||(a=Re(D),u=!0),n[36].call(t)}return{c(){e=B("div"),d&&d.c(),o=M(),t=B("video"),i=B("track"),w(i,"kind","captions"),re(t.src,l=n[1])||w(t,"src",l),w(t,"width","100%"),t.muted=n[8],t.playsInline=!0,w(t,"preload",n[6]),t.loop=n[7],w(t,"style",s=(n[0],"position: relative")),w(t,"class","svelte-chkcui"),n[18]===void 0&&Y(()=>n[37].call(t)),Y(()=>n[39].call(t)),w(e,"class","video-wrapper svelte-chkcui"),w(e,"aria-hidden",n[2]),Y(()=>n[41].call(e))},m(c,b){C(c,e,b),d&&d.m(e,null),z(e,o),z(e,t),z(t,i),n[35](t),f=ae(t,n[39].bind(t)),n[40](e),h=ae(e,n[41].bind(e)),r=!0,_||(V=[P(t,"timeupdate",D),P(t,"durationchange",n[37]),P(t,"play",n[38]),P(t,"pause",n[38])],_=!0)},p(c,b){c[11]?d?(d.p(c,b),b[0]&2048&&k(d,1)):(d=Oe(c),d.c(),k(d,1),d.m(e,o)):d&&(L(),g(d,1,1,()=>{d=null}),N()),(!r||b[0]&2&&!re(t.src,l=c[1]))&&w(t,"src",l),(!r||b[0]&256)&&(t.muted=c[8]),(!r||b[0]&64)&&w(t,"preload",c[6]),(!r||b[0]&128)&&(t.loop=c[7]),(!r||b[0]&1&&s!==(s=(c[0],"position: relative")))&&w(t,"style",s),!u&&b[0]&131072&&!isNaN(c[17])&&(t.currentTime=c[17]),u=!1,b[0]&2097152&&y!==(y=c[21])&&t[y?"pause":"play"](),(!r||b[0]&4)&&w(e,"aria-hidden",c[2])},i(c){r||(k(d),r=!0)},o(c){g(d),r=!1},d(c){c&&T(e),d&&d.d(),n[35](null),f(),n[40](null),h(),_=!1,pe(V)}}}function Pe(n){let e,o;return{c(){e=B("div"),o=me(n[4]),w(e,"class","caption svelte-chkcui")},m(t,i){C(t,e,i),z(e,o)},p(t,i){i[0]&16&&Se(o,t[4])},d(t){t&&T(e)}}}function Lt(n){let e,o,t,i,l=(n[2]&&n[3]||!n[2])&&Ce(n);return{c(){e=B("div"),l&&l.c()},m(s,u){C(s,e,u),l&&l.m(e,null),o=!0,t||(i=[P(e,"mouseover",n[50]),P(e,"focus",n[51]),P(e,"mouseout",n[52]),P(e,"blur",n[53])],t=!0)},p(s,u){s[2]&&s[3]||!s[2]?l?(l.p(s,u),u[0]&12&&k(l,1)):(l=Ce(s),l.c(),k(l,1),l.m(e,null)):l&&(L(),g(l,1,1,()=>{l=null}),N())},i(s){o||(k(l),o=!0)},o(s){g(l),o=!1},d(s){s&&T(e),l&&l.d(),t=!1,pe(i)}}}function Nt(n){let e,o,t,i;return e=new bt({props:{width:n[5],cls:"video-container",$$slots:{default:[Lt]},$$scope:{ctx:n}}}),{c(){S(e.$$.fragment)},m(l,s){R(e,l,s),o=!0,t||(i=[P(window,"click",n[30]),P(window,"touchstart",n[30])],t=!0)},p(l,s){const u={};s[0]&32&&(u.width=l[5]),s[0]&1073741791|s[1]&8388608&&(u.$$scope={dirty:s,ctx:l}),e.$set(u)},i(l){o||(k(e.$$.fragment,l),o=!0)},o(l){g(e.$$.fragment,l),o=!1},d(l){W(e,l),t=!1,pe(i)}}}const Be=50;function jt(n,e,o){let t,i,{src:l=""}=e,{ariaHidden:s=!0}=e,{ariaDescription:u=null}=e,{caption:a=""}=e,{width:y="normal"}=e,{preloadVideo:f="auto"}=e,{loopVideo:h=!0}=e,{muteVideo:r=!0}=e,{allowSoundToAutoplay:_=!1}=e,{playVideoWhenInView:V=!0}=e,{playVideoThreshold:d=.5}=e,{possibleToPlayPause:D=!0}=e,{showControls:c=!0}=e,{hoverToSeeControls:b=!1}=e,{separateReplayIcon:j=!1}=e,{controlsColour:G="#333"}=e,{controlsOpacity:p=.5}=e,{controlsPosition:v="top left"}=e,A=0,E,O=!0,q=!1,F,J,X,Z,H,he,x,K=!1;const Ee=()=>{o(33,K=!0)},Me=m=>{const ot=m.detail.paused,nt=m.detail.clickedOnPauseBtn;o(21,O=ot),o(19,q=nt)};s&&!u&&console.warn("Must provide aria description for video components if ariaHidden is true.");const Ae=()=>{O===!0?o(21,O=!1):o(21,O=!0)};function He(m){se[m?"unshift":"push"](()=>{x=m,o(27,x)})}function ze(){A=this.currentTime,o(17,A)}function Le(){E=this.duration,o(18,E)}function Ne(){O=this.paused,o(21,O),o(9,V),o(20,H),o(8,r),o(32,_),o(33,K),o(19,q)}function je(){J=this.clientWidth,F=this.clientHeight,o(23,J),o(22,F)}function qe(m){se[m?"unshift":"push"](()=>{he=m,o(26,he)})}function Fe(){Z=this.clientWidth,X=this.clientHeight,o(25,Z),o(24,X)}function Ue(m){H=m,o(20,H)}const Ge=()=>{O===!0?o(21,O=!1):o(21,O=!0)};function Ke(m){se[m?"unshift":"push"](()=>{x=m,o(27,x)})}function Qe(){A=this.currentTime,o(17,A)}function Ye(){E=this.duration,o(18,E)}function Je(){O=this.paused,o(21,O),o(9,V),o(20,H),o(8,r),o(32,_),o(33,K),o(19,q)}function Xe(){J=this.clientWidth,F=this.clientHeight,o(23,J),o(22,F)}function Ze(){Z=this.clientWidth,X=this.clientHeight,o(25,Z),o(24,X)}const xe=()=>{o(29,t=p)},$e=()=>{o(29,t=p)},et=()=>{o(29,t=0)},tt=()=>{o(29,t=0)};return n.$$set=m=>{"src"in m&&o(1,l=m.src),"ariaHidden"in m&&o(2,s=m.ariaHidden),"ariaDescription"in m&&o(3,u=m.ariaDescription),"caption"in m&&o(4,a=m.caption),"width"in m&&o(5,y=m.width),"preloadVideo"in m&&o(6,f=m.preloadVideo),"loopVideo"in m&&o(7,h=m.loopVideo),"muteVideo"in m&&o(8,r=m.muteVideo),"allowSoundToAutoplay"in m&&o(32,_=m.allowSoundToAutoplay),"playVideoWhenInView"in m&&o(9,V=m.playVideoWhenInView),"playVideoThreshold"in m&&o(10,d=m.playVideoThreshold),"possibleToPlayPause"in m&&o(11,D=m.possibleToPlayPause),"showControls"in m&&o(0,c=m.showControls),"hoverToSeeControls"in m&&o(12,b=m.hoverToSeeControls),"separateReplayIcon"in m&&o(13,j=m.separateReplayIcon),"controlsColour"in m&&o(14,G=m.controlsColour),"controlsOpacity"in m&&o(15,p=m.controlsOpacity),"controlsPosition"in m&&o(16,v=m.controlsPosition)},n.$$.update=()=>{n.$$.dirty[0]&393216&&o(28,i=A>=E),n.$$.dirty[0]&1049344&&V&&H&&r&&o(21,O=!1),n.$$.dirty[0]&1049088&&V&&!H&&o(21,O=!0),n.$$.dirty[0]&1573632|n.$$.dirty[1]&6&&_&&V&&H&&!r&&K&&!q&&o(21,O=!1),n.$$.dirty[0]&256|n.$$.dirty[1]&6&&_&&!r&&!K&&o(21,O=!0),n.$$.dirty[0]&2048&&(D||o(0,c=!0))},o(29,t=0),[c,l,s,u,a,y,f,h,r,V,d,D,b,j,G,p,v,A,E,q,H,O,F,J,X,Z,he,x,i,t,Ee,Me,_,K,Ae,He,ze,Le,Ne,je,qe,Fe,Ue,Ge,Ke,Qe,Ye,Je,Xe,Ze,xe,$e,et,tt]}class ue extends de{constructor(e){super(),ce(this,e,jt,Nt,fe,{src:1,ariaHidden:2,ariaDescription:3,caption:4,width:5,preloadVideo:6,loopVideo:7,muteVideo:8,allowSoundToAutoplay:32,playVideoWhenInView:9,playVideoThreshold:10,possibleToPlayPause:11,showControls:0,hoverToSeeControls:12,separateReplayIcon:13,controlsColour:14,controlsOpacity:15,controlsPosition:16},null,[-1,-1])}}ue.__docgen={version:3,name:"Video.svelte",data:[{keywords:[],visibility:"public",description:"Video src.",name:"src",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{visibility:"public",description:null,keywords:[],name:"ariaHidden",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0},{visibility:"public",description:null,keywords:[],name:"ariaDescription",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"object",type:"object"},defaultValue:null},{visibility:"public",description:null,keywords:[],name:"caption",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Width of the block within the article well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Preload options. `auto` is ignored if `autoplay` is true. Can also be `none` or `metadata`.",name:"preloadVideo",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"auto"},{keywords:[],visibility:"public",description:"Whether the video should loop.",name:"loopVideo",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0},{keywords:[],visibility:"public",description:"Whether video should have sound or not.",name:"muteVideo",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0},{visibility:"public",description:null,keywords:[],name:"allowSoundToAutoplay",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"for video with sound, whether video should be allowed to autoplay if the user has previously interacted with DOM",name:"playVideoWhenInView",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0},{keywords:[],visibility:"public",description:"whether the video should play when it comes into view or just on page load",name:"playVideoThreshold",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:.5},{keywords:[],visibility:"public",description:"if video plays with intersection observer, how much of it should be into view to start playing",name:"possibleToPlayPause",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0},{keywords:[],visibility:"public",description:"whether to have the option to pause and play video",name:"showControls",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!0},{keywords:[],visibility:"public",description:"whetner to show the play / pause buttons",name:"hoverToSeeControls",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"whether you need to hover over the video to see the controls",name:"separateReplayIcon",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"boolean",type:"boolean"},defaultValue:!1},{keywords:[],visibility:"public",description:"whether to use a separate replay icon or use the play icon for replay as well",name:"controlsColour",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"#333"},{keywords:[],visibility:"public",description:"change the colour of the play/pause button",name:"controlsOpacity",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"number",type:"number"},defaultValue:.5},{visibility:"public",description:null,keywords:[],name:"controlsPosition",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"top left"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[],refs:[]};function qt(n){let e,o;const t=[n[0]];let i={};for(let l=0;l<t.length;l+=1)i=ee(i,t[l]);return e=new ue({props:i}),{c(){S(e.$$.fragment)},m(l,s){R(e,l,s),o=!0},p(l,s){const u=s&1?te(t,[oe(l[0])]):{};e.$set(u)},i(l){o||(k(e.$$.fragment,l),o=!0)},o(l){g(e.$$.fragment,l),o=!1},d(l){W(e,l)}}}function Ft(n){let e,o,t,i,l,s,u,a,y,f,h,r;const _=[{title:"Components/Video"},{component:ue},ke(we)];let V={};for(let p=0;p<_.length;p+=1)V=ee(V,_[p]);e=new yt({props:V}),t=new ht({props:{$$slots:{default:[qt,({args:p})=>({0:p}),({args:p})=>p?1:0]},$$scope:{ctx:n}}}),l=new ie({props:{name:"Default",args:{ariaDescription:"Compulsory description of your video for screen readers.",src:$,width:"wide",caption:"Optional caption for your video."}}});const d=[{name:"Playing and looping"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:$,width:"normal",loopVideo:!0,caption:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9}},Q(ge)];let D={};for(let p=0;p<d.length;p+=1)D=ee(D,d[p]);u=new ie({props:D});const c=[{name:"Controls"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:$,width:"normal",caption:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9,controlsColour:"white",controlsOpacity:1,controlsPosition:"bottom right",separateReplayIcon:!0,loopVideo:!1,hoverToSeeControls:!0}},Q(le)];let b={};for(let p=0;p<c.length;p+=1)b=ee(b,c[p]);y=new ie({props:b});const j=[{name:"Videos with sound"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:ve,width:"normal",caption:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9,showControls:!0,loopVideo:!1,muteVideo:!1,playVideoWhenInView:!0,allowSoundToAutoplay:!0}},Q(le)];let G={};for(let p=0;p<j.length;p+=1)G=ee(G,j[p]);return h=new ie({props:G}),{c(){S(e.$$.fragment),o=M(),S(t.$$.fragment),i=M(),S(l.$$.fragment),s=M(),S(u.$$.fragment),a=M(),S(y.$$.fragment),f=M(),S(h.$$.fragment)},m(p,v){R(e,p,v),C(p,o,v),R(t,p,v),C(p,i,v),R(l,p,v),C(p,s,v),R(u,p,v),C(p,a,v),R(y,p,v),C(p,f,v),R(h,p,v),r=!0},p(p,[v]){const A=v&0?te(_,[_[0],v&0&&{component:ue},v&0&&oe(ke(we))]):{};e.$set(A);const E={};v&3&&(E.$$scope={dirty:v,ctx:p}),t.$set(E);const O=v&0?te(d,[d[0],v&0&&{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:$,width:"normal",loopVideo:!0,caption:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9}},v&0&&oe(Q(ge))]):{};u.$set(O);const q=v&0?te(c,[c[0],v&0&&{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:$,width:"normal",caption:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9,controlsColour:"white",controlsOpacity:1,controlsPosition:"bottom right",separateReplayIcon:!0,loopVideo:!1,hoverToSeeControls:!0}},v&0&&oe(Q(le))]):{};y.$set(q);const F=v&0?te(j,[j[0],v&0&&{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:ve,width:"normal",caption:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9,showControls:!0,loopVideo:!1,muteVideo:!1,playVideoWhenInView:!0,allowSoundToAutoplay:!0}},v&0&&oe(Q(le))]):{};h.$set(F)},i(p){r||(k(e.$$.fragment,p),k(t.$$.fragment,p),k(l.$$.fragment,p),k(u.$$.fragment,p),k(y.$$.fragment,p),k(h.$$.fragment,p),r=!0)},o(p){g(e.$$.fragment,p),g(t.$$.fragment,p),g(l.$$.fragment,p),g(u.$$.fragment,p),g(y.$$.fragment,p),g(h.$$.fragment,p),r=!1},d(p){W(e,p),p&&T(o),W(t,p),p&&T(i),W(l,p),p&&T(s),W(u,p),p&&T(a),W(y,p),p&&T(f),W(h,p)}}}class Ut extends de{constructor(e){super(),ce(this,e,null,Ft,fe,{})}}const ne=pt(Ut,{meta:{title:"Components/Video"},stories:{"tpl:default":{storyId:"components-video--default",name:"default",template:!0,source:"<Video {...args} />",hasArgs:!0},Default:{storyId:"components-video--default",name:"Default",template:!1,hasArgs:!1},PlayingAndLooping:{storyId:"components-video--playing-and-looping",name:"Playing and looping",template:!1,hasArgs:!1},Controls:{storyId:"components-video--controls",name:"Controls",template:!1,hasArgs:!1},VideosWithSound:{storyId:"components-video--videos-with-sound",name:"Videos with sound",template:!1,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","playAndLoopDocs","controlsDocs","SilentVideo","SoundVideo","Video","withComponentDocs","withStoryDocs"]}),xt=ne.meta,$t=["Default","PlayingAndLooping","Controls","VideosWithSound"],eo=ne.stories.Default,to=ne.stories.PlayingAndLooping,oo=ne.stories.Controls,no=ne.stories.VideosWithSound;export{oo as Controls,eo as Default,to as PlayingAndLooping,no as VideosWithSound,$t as __namedExportsOrder,xt as default};
//# sourceMappingURL=Video.stories-1626d946.js.map