wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
hypnagaga/docs/assets/Video.stories-7ce115e0.js
Prasanta Kumar Dutta c523f6e003 build
2023-09-08 17:38:39 +05:30

87 lines
35 KiB
JavaScript
Raw Blame History

import{S as de,i as ue,s as ce,l as Se,u as De,q as We,r as Re,t as b,h as g,T as Be,G as at,$ as dt,a0 as ut,o as B,c as I,b as w,d as v,Q as P,v as H,w as z,f as V,z as Ee,n as N,g as S,m as D,j as W,R as fe,x as ct,y as A,k as pe,I as se,e as j,A as ft,F as re,N as K,O as ae,a1 as pt,a2 as yt,a3 as Me,C as te}from"./index-df681c7c.js";import{g as ht,a as mt}from"./spread-8a54911c.js";import{p as bt,M as _t,T as kt,S as le}from"./collect-stories-a6a786e2.js";import{F as ye}from"./fa-8c2107fb.js";import{a as Ae,b as gt,c as wt}from"./index.es-f852b0b6.js";import{G as vt}from"./GraphicBlock-1af1d726.js";import{w as Vt,b as me}from"./withParams-47e2ab71.js";import"./Block-f95db830.js";import"./PaddingReset-6a0440e6.js";import"./marked.esm-76161808.js";const Ct=`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.
\`\`\`svelte
<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.'}"
/>
\`\`\`
`,It=`\`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.
\`\`\`svelte
<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}"
/>
\`\`\`
`,we=`\`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.
\`\`\`svelte
<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}"
/>
\`\`\`
`,be=""+new URL("silent-video-5e925669.mp4",import.meta.url).href,Ot=""+new URL("sound-video-50224f39.mp4",import.meta.url).href,Pt=n=>({intersecting:n&1,entry:n&2,observer:n&4}),ve=n=>({intersecting:n[0],entry:n[1],observer:n[2]});function Tt(n){let e;const o=n[9].default,t=Se(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)&&De(t,o,i,i[8],e?Re(o,i[8],l,Pt):We(i[8]),ve)},i(i){e||(b(t,i),e=!0)},o(i){g(t,i),e=!1},d(i){t&&t.d(i)}}}function St(n,e,o){let{$$slots:t={},$$scope:i}=e,{element:l=null}=e,{once:r=!1}=e,{intersecting:d=!1}=e,{root:s=null}=e,{rootMargin:u="0px"}=e,{threshold:a=0}=e,{entry:c=null}=e,{observer:k=null}=e;const O=Be();let y=null,_=null;const m=()=>{o(2,k=new IntersectionObserver(h=>{h.forEach(R=>{o(1,c=R),o(0,d=R.isIntersecting)})},{root:s,rootMargin:u,threshold:a}))};return at(()=>(m(),()=>{k&&(k.disconnect(),o(2,k=null))})),dt(async()=>{c!==null&&(O("observe",c),c.isIntersecting&&(O("intersect",c),r&&k.unobserve(l))),await ut(),l!==null&&l!==_&&(k.observe(l),_!==null&&k.unobserve(_),_=l),y&&u!==y&&(k.disconnect(),_=null,m()),y=u}),n.$$set=h=>{"element"in h&&o(3,l=h.element),"once"in h&&o(4,r=h.once),"intersecting"in h&&o(0,d=h.intersecting),"root"in h&&o(5,s=h.root),"rootMargin"in h&&o(6,u=h.rootMargin),"threshold"in h&&o(7,a=h.threshold),"entry"in h&&o(1,c=h.entry),"observer"in h&&o(2,k=h.observer),"$$scope"in h&&o(8,i=h.$$scope)},[d,c,k,l,r,s,u,a,i,t]}class Dt extends de{constructor(e){super(),ue(this,e,St,Tt,ce,{element:3,once:4,intersecting:0,root:5,rootMargin:6,threshold:7,entry:1,observer:2})}}const Wt=Dt;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 Rt(n){let e;return{c(){e=Ee("error")},m(o,t){v(o,e,t)},p:N,i:N,o:N,d(o){o&&V(e)}}}function Bt(n){let e,o,t;return o=new ye({props:{icon:Ae,size:"2x",color:n[8]}}),{c(){e=B("i"),S(o.$$.fragment),w(e,"class","play-pause-icon play")},m(i,l){v(i,e,l),D(o,e,null),t=!0},p(i,l){const r={};l&256&&(r.color=i[8]),o.$set(r)},i(i){t||(b(o.$$.fragment,i),t=!0)},o(i){g(o.$$.fragment,i),t=!1},d(i){i&&V(e),W(o)}}}function Et(n){let e,o,t;return o=new ye({props:{icon:gt,size:"2x",color:n[8]}}),{c(){e=B("i"),S(o.$$.fragment),w(e,"class","play-pause-icon pause")},m(i,l){v(i,e,l),D(o,e,null),t=!0},p(i,l){const r={};l&256&&(r.color=i[8]),o.$set(r)},i(i){t||(b(o.$$.fragment,i),t=!0)},o(i){g(o.$$.fragment,i),t=!1},d(i){i&&V(e),W(o)}}}function Mt(n){let e,o,t,i;const l=[Ht,At],r=[];function d(s,u){return s[7]?0:1}return o=d(n),t=r[o]=l[o](n),{c(){e=B("i"),t.c(),w(e,"class","play-pause-icon replay")},m(s,u){v(s,e,u),r[o].m(e,null),i=!0},p(s,u){let a=o;o=d(s),o===a?r[o].p(s,u):(H(),g(r[a],1,1,()=>{r[a]=null}),z(),t=r[o],t?t.p(s,u):(t=r[o]=l[o](s),t.c()),b(t,1),t.m(e,null))},i(s){i||(b(t),i=!0)},o(s){g(t),i=!1},d(s){s&&V(e),r[o].d()}}}function At(n){let e,o;return e=new ye({props:{icon:Ae,size:"2x",color:n[8]}}),{c(){S(e.$$.fragment)},m(t,i){D(e,t,i),o=!0},p(t,i){const l={};i&256&&(l.color=t[8]),e.$set(l)},i(t){o||(b(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){W(e,t)}}}function Ht(n){let e,o;return e=new ye({props:{icon:wt,size:"2x",color:n[8]}}),{c(){S(e.$$.fragment)},m(t,i){D(e,t,i),o=!0},p(t,i){const l={};i&256&&(l.color=t[8]),e.$set(l)},i(t){o||(b(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,r;const d=[Mt,Et,Bt,Rt],s=[];function u(a,c){return a[6]?0:a[0]===!1?1:a[0]===!0?2:3}return o=u(n),t=s[o]=d[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(a,c){v(a,e,c),s[o].m(e,null),i=!0,l||(r=P(e,"click",n[9]),l=!0)},p(a,[c]){let k=o;o=u(a),o===k?s[o].p(a,c):(H(),g(s[k],1,1,()=>{s[k]=null}),z(),t=s[o],t?t.p(a,c):(t=s[o]=d[o](a),t.c()),b(t,1),t.m(e,null)),(!i||c&2)&&I(e,"opacity",a[1]),(!i||c&52)&&I(e,"top",a[2]==="top left"||a[2]==="top right"?"10px":a[2]==="center"?`${(a[4]-a[5])/2}px`:`${a[4]-a[5]}px`),(!i||c&44)&&I(e,"left",a[2]==="top left"||a[2]==="bottom left"?"10px":a[2]==="center"?`${(a[3]-a[5])/2}px`:`${a[3]-a[5]}px`)},i(a){i||(b(t),i=!0)},o(a){g(t),i=!1},d(a){a&&V(e),s[o].d(),l=!1,r()}}}function Lt(n,e,o){const t=Be();let{paused:i}=e,{clickedOnPauseBtn:l}=e,{controlsOpacity:r}=e,{controlsPosition:d}=e,{widthVideoContainer:s}=e,{heightVideoContainer:u}=e,{controlsBorderOffset:a}=e,{resetCondition:c}=e,{separateReplayIcon:k}=e,{controlsColour:O}=e;function y(){o(0,i=!i),o(10,l=i===!0),t("pausePlayEvent",{paused:i,clickedOnPauseBtn:l})}return n.$$set=_=>{"paused"in _&&o(0,i=_.paused),"clickedOnPauseBtn"in _&&o(10,l=_.clickedOnPauseBtn),"controlsOpacity"in _&&o(1,r=_.controlsOpacity),"controlsPosition"in _&&o(2,d=_.controlsPosition),"widthVideoContainer"in _&&o(3,s=_.widthVideoContainer),"heightVideoContainer"in _&&o(4,u=_.heightVideoContainer),"controlsBorderOffset"in _&&o(5,a=_.controlsBorderOffset),"resetCondition"in _&&o(6,c=_.resetCondition),"separateReplayIcon"in _&&o(7,k=_.separateReplayIcon),"controlsColour"in _&&o(8,O=_.controlsColour)},[i,r,d,s,u,a,c,k,O,y,l]}let _e=class extends de{constructor(e){super(),ue(this,e,Lt,zt,ce,{paused:0,clickedOnPauseBtn:10,controlsOpacity:1,controlsPosition:2,widthVideoContainer:3,heightVideoContainer:4,controlsBorderOffset:5,resetCondition:6,separateReplayIcon:7,controlsColour:8})}};_e.__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:[]};const Nt=n=>({}),Ve=n=>({});function Ce(n){let e,o,t,i,l,r=n[3]&&Ie(n);const d=[Ft,jt],s=[];function u(a,c){return a[12]?0:1}return o=u(n),t=s[o]=d[o](n),{c(){r&&r.c(),e=A(),t.c(),i=pe()},m(a,c){r&&r.m(a,c),v(a,e,c),s[o].m(a,c),v(a,i,c),l=!0},p(a,c){a[3]?r?r.p(a,c):(r=Ie(a),r.c(),r.m(e.parentNode,e)):r&&(r.d(1),r=null);let k=o;o=u(a),o===k?s[o].p(a,c):(H(),g(s[k],1,1,()=>{s[k]=null}),z(),t=s[o],t?t.p(a,c):(t=s[o]=d[o](a),t.c()),b(t,1),t.m(i.parentNode,i))},i(a){l||(b(t),l=!0)},o(a){g(t),l=!1},d(a){a&&(V(e),V(i)),r&&r.d(a),s[o].d(a)}}}function Ie(n){let e,o;return{c(){e=B("p"),o=Ee(n[3]),w(e,"class","visually-hidden")},m(t,i){v(t,e,i),j(e,o)},p(t,i){i[0]&8&&ft(o,t[3])},d(t){t&&V(e)}}}function jt(n){let e,o,t,i,l,r=!1,d,s=!0,u,a,c,k,O,y=n[14]&&Oe(n);function _(){cancelAnimationFrame(d),t.paused||(d=Me(_),r=!0),n[50].call(t)}return{c(){e=B("div"),y&&y.c(),o=A(),t=B("video"),i=B("track"),w(i,"kind","captions"),re(t.src,l=n[1])||w(t,"src",l),w(t,"class","pointer-events-none relative"),w(t,"width","100%"),t.muted=n[11],t.playsInline=!0,w(t,"preload",n[9]),t.loop=n[10],t.autoplay=!0,n[21]===void 0&&K(()=>n[51].call(t)),K(()=>n[53].call(t)),w(e,"class","video-wrapper relative"),w(e,"aria-hidden",n[2]),K(()=>n[54].call(e))},m(m,h){v(m,e,h),y&&y.m(e,null),j(e,o),j(e,t),j(t,i),n[49](t),u=ae(t,n[53].bind(t)),a=ae(e,n[54].bind(e)),c=!0,k||(O=[P(t,"timeupdate",_),P(t,"durationchange",n[51]),P(t,"play",n[52]),P(t,"pause",n[52])],k=!0)},p(m,h){m[14]?y?(y.p(m,h),h[0]&16384&&b(y,1)):(y=Oe(m),y.c(),b(y,1),y.m(e,o)):y&&(H(),g(y,1,1,()=>{y=null}),z()),(!c||h[0]&2&&!re(t.src,l=m[1]))&&w(t,"src",l),(!c||h[0]&2048)&&(t.muted=m[11]),(!c||h[0]&512)&&w(t,"preload",m[9]),(!c||h[0]&1024)&&(t.loop=m[10]),!r&&h[0]&1048576&&!isNaN(m[20])&&(t.currentTime=m[20]),r=!1,h[0]&16777216&&s!==(s=m[24])&&t[s?"pause":"play"](),(!c||h[0]&4)&&w(e,"aria-hidden",m[2])},i(m){c||(b(y),c=!0)},o(m){g(y),c=!1},d(m){m&&V(e),y&&y.d(),n[49](null),u(),a(),k=!1,fe(O)}}}function Ft(n){let e,o,t;function i(r){n[47](r)}let l={element:n[29],threshold:n[13],once:!1,$$slots:{default:[Qt]},$$scope:{ctx:n}};return n[23]!==void 0&&(l.intersecting=n[23]),e=new Wt({props:l}),se.push(()=>pt(e,"intersecting",i)),{c(){S(e.$$.fragment)},m(r,d){D(e,r,d),t=!0},p(r,d){const s={};d[0]&536870912&&(s.element=r[29]),d[0]&8192&&(s.threshold=r[13]),d[0]&2139082247|d[1]&268435459&&(s.$$scope={dirty:d,ctx:r}),!o&&d[0]&8388608&&(o=!0,s.intersecting=r[23],yt(()=>o=!1)),e.$set(s)},i(r){t||(b(e.$$.fragment,r),t=!0)},o(r){g(e.$$.fragment,r),t=!1},d(r){W(e,r)}}}function Oe(n){let e,o,t,i;const l=[qt,Gt],r=[];function d(s,u){return s[0]?0:1}return e=d(n),o=r[e]=l[e](n),{c(){o.c(),t=pe()},m(s,u){r[e].m(s,u),v(s,t,u),i=!0},p(s,u){let a=e;e=d(s),e===a?r[e].p(s,u):(H(),g(r[a],1,1,()=>{r[a]=null}),z(),o=r[e],o?o.p(s,u):(o=r[e]=l[e](s),o.c()),b(o,1),o.m(t.parentNode,t))},i(s){i||(b(o),i=!0)},o(s){g(o),i=!1},d(s){s&&V(t),r[e].d(s)}}}function Gt(n){let e,o,t;return{c(){e=B("button"),w(e,"class","border-0 m-0 p-0 bg-transparent absolute"),I(e,"top","0"),I(e,"left","0"),I(e,"width",n[28]+"px"),I(e,"height",n[27]+"px")},m(i,l){v(i,e,l),o||(t=P(e,"click",n[48]),o=!0)},p(i,l){l[0]&268435456&&I(e,"width",i[28]+"px"),l[0]&134217728&&I(e,"height",i[27]+"px")},i:N,o:N,d(i){i&&V(e),o=!1,t()}}}function qt(n){let e,o;return e=new _e({props:{paused:n[24],clickedOnPauseBtn:n[22],controlsOpacity:n[18],controlsPosition:n[19],widthVideoContainer:n[28],heightVideoContainer:n[27],controlsBorderOffset:He,resetCondition:n[31],separateReplayIcon:n[16],controlsColour:n[17]}}),e.$on("pausePlayEvent",n[34]),{c(){S(e.$$.fragment)},m(t,i){D(e,t,i),o=!0},p(t,i){const l={};i[0]&16777216&&(l.paused=t[24]),i[0]&4194304&&(l.clickedOnPauseBtn=t[22]),i[0]&262144&&(l.controlsOpacity=t[18]),i[0]&524288&&(l.controlsPosition=t[19]),i[0]&268435456&&(l.widthVideoContainer=t[28]),i[0]&134217728&&(l.heightVideoContainer=t[27]),i[1]&1&&(l.resetCondition=t[31]),i[0]&65536&&(l.separateReplayIcon=t[16]),i[0]&131072&&(l.controlsColour=t[17]),e.$set(l)},i(t){o||(b(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){W(e,t)}}}function Pe(n){let e,o,t,i;const l=[Kt,Ut],r=[];function d(s,u){return s[0]?0:1}return e=d(n),o=r[e]=l[e](n),{c(){o.c(),t=pe()},m(s,u){r[e].m(s,u),v(s,t,u),i=!0},p(s,u){let a=e;e=d(s),e===a?r[e].p(s,u):(H(),g(r[a],1,1,()=>{r[a]=null}),z(),o=r[e],o?o.p(s,u):(o=r[e]=l[e](s),o.c()),b(o,1),o.m(t.parentNode,t))},i(s){i||(b(o),i=!0)},o(s){g(o),i=!1},d(s){s&&V(t),r[e].d(s)}}}function Ut(n){let e,o,t;return{c(){e=B("button"),w(e,"class","border-0 m-0 p-0 bg-transparent absolute"),I(e,"top","0"),I(e,"left","0"),I(e,"width",n[28]+"px"),I(e,"height",n[27]+"px")},m(i,l){v(i,e,l),o||(t=P(e,"click",n[39]),o=!0)},p(i,l){l[0]&268435456&&I(e,"width",i[28]+"px"),l[0]&134217728&&I(e,"height",i[27]+"px")},i:N,o:N,d(i){i&&V(e),o=!1,t()}}}function Kt(n){let e,o;return e=new _e({props:{paused:n[24],clickedOnPauseBtn:n[22],controlsOpacity:n[15]?n[32]:n[18],controlsPosition:n[19],widthVideoContainer:n[28],heightVideoContainer:n[27],controlsBorderOffset:He,resetCondition:n[31],separateReplayIcon:n[16],controlsColour:n[17]}}),e.$on("pausePlayEvent",n[34]),{c(){S(e.$$.fragment)},m(t,i){D(e,t,i),o=!0},p(t,i){const l={};i[0]&16777216&&(l.paused=t[24]),i[0]&4194304&&(l.clickedOnPauseBtn=t[22]),i[0]&294912|i[1]&2&&(l.controlsOpacity=t[15]?t[32]:t[18]),i[0]&524288&&(l.controlsPosition=t[19]),i[0]&268435456&&(l.widthVideoContainer=t[28]),i[0]&134217728&&(l.heightVideoContainer=t[27]),i[1]&1&&(l.resetCondition=t[31]),i[0]&65536&&(l.separateReplayIcon=t[16]),i[0]&131072&&(l.controlsColour=t[17]),e.$set(l)},i(t){o||(b(e.$$.fragment,t),o=!0)},o(t){g(e.$$.fragment,t),o=!1},d(t){W(e,t)}}}function Qt(n){let e,o,t,i,l,r=!1,d,s=!0,u,a,c,k,O,y=n[14]&&Pe(n);function _(){cancelAnimationFrame(d),t.paused||(d=Me(_),r=!0),n[41].call(t)}return{c(){e=B("div"),y&&y.c(),o=A(),t=B("video"),i=B("track"),w(i,"kind","captions"),re(t.src,l=n[1])||w(t,"src",l),w(t,"class","pointer-events-none relative"),w(t,"width","100%"),t.muted=n[11],t.playsInline=!0,w(t,"preload",n[9]),t.loop=n[10],n[21]===void 0&&K(()=>n[42].call(t)),K(()=>n[44].call(t)),w(e,"class","video-wrapper relative block"),w(e,"aria-hidden",n[2]),K(()=>n[46].call(e))},m(m,h){v(m,e,h),y&&y.m(e,null),j(e,o),j(e,t),j(t,i),n[40](t),u=ae(t,n[44].bind(t)),n[45](e),a=ae(e,n[46].bind(e)),c=!0,k||(O=[P(t,"timeupdate",_),P(t,"durationchange",n[42]),P(t,"play",n[43]),P(t,"pause",n[43])],k=!0)},p(m,h){m[14]?y?(y.p(m,h),h[0]&16384&&b(y,1)):(y=Pe(m),y.c(),b(y,1),y.m(e,o)):y&&(H(),g(y,1,1,()=>{y=null}),z()),(!c||h[0]&2&&!re(t.src,l=m[1]))&&w(t,"src",l),(!c||h[0]&2048)&&(t.muted=m[11]),(!c||h[0]&512)&&w(t,"preload",m[9]),(!c||h[0]&1024)&&(t.loop=m[10]),!r&&h[0]&1048576&&!isNaN(m[20])&&(t.currentTime=m[20]),r=!1,h[0]&16777216&&s!==(s=m[24])&&t[s?"pause":"play"](),(!c||h[0]&4)&&w(e,"aria-hidden",m[2])},i(m){c||(b(y),c=!0)},o(m){g(y),c=!1},d(m){m&&V(e),y&&y.d(),n[40](null),u(),n[45](null),a(),k=!1,fe(O)}}}function Te(n){let e;const o=n[38].notes,t=Se(o,n,n[59],Ve);return{c(){t&&t.c()},m(i,l){t&&t.m(i,l),e=!0},p(i,l){t&&t.p&&(!e||l[1]&268435456)&&De(t,o,i,i[59],e?Re(o,i[59],l,Nt):We(i[59]),Ve)},i(i){e||(b(t,i),e=!0)},o(i){g(t,i),e=!1},d(i){t&&t.d(i)}}}function Jt(n){let e,o,t,i,l,r,d=(n[2]&&n[3]||!n[2])&&Ce(n),s=n[35].notes&&Te(n);return{c(){e=B("div"),d&&d.c(),o=A(),s&&s.c(),t=pe(),w(e,"role","figure")},m(u,a){v(u,e,a),d&&d.m(e,null),v(u,o,a),s&&s.m(u,a),v(u,t,a),i=!0,l||(r=[P(e,"mouseover",n[55]),P(e,"focus",n[56]),P(e,"mouseout",n[57]),P(e,"blur",n[58])],l=!0)},p(u,a){u[2]&&u[3]||!u[2]?d?(d.p(u,a),a[0]&12&&b(d,1)):(d=Ce(u),d.c(),b(d,1),d.m(e,null)):d&&(H(),g(d,1,1,()=>{d=null}),z()),u[35].notes?s?(s.p(u,a),a[1]&16&&b(s,1)):(s=Te(u),s.c(),b(s,1),s.m(t.parentNode,t)):s&&(H(),g(s,1,1,()=>{s=null}),z())},i(u){i||(b(d),b(s),i=!0)},o(u){g(d),g(s),i=!1},d(u){u&&(V(e),V(o),V(t)),d&&d.d(),s&&s.d(u),l=!1,fe(r)}}}function Xt(n){let e,o,t,i;return e=new vt({props:{textWidth:n[8],title:n[4],description:n[6],notes:n[5],width:n[7],class:"video-container",$$slots:{default:[Jt]},$$scope:{ctx:n}}}),{c(){S(e.$$.fragment)},m(l,r){D(e,l,r),o=!0,t||(i=[P(window,"click",n[33]),P(window,"touchstart",n[33])],t=!0)},p(l,r){const d={};r[0]&256&&(d.textWidth=l[8]),r[0]&16&&(d.title=l[4]),r[0]&64&&(d.description=l[6]),r[0]&32&&(d.notes=l[5]),r[0]&128&&(d.width=l[7]),r[0]&2147483151|r[1]&268435475&&(d.$$scope={dirty:r,ctx:l}),e.$set(d)},i(l){o||(b(e.$$.fragment,l),o=!0)},o(l){g(e.$$.fragment,l),o=!1},d(l){W(e,l),t=!1,fe(i)}}}const He=50;function Yt(n,e,o){let t,i,{$$slots:l={},$$scope:r}=e;const d=ct(l);let{src:s=""}=e,{ariaHidden:u=!0}=e,{ariaDescription:a=null}=e,{title:c=null}=e,{notes:k=null}=e,{description:O=null}=e,{width:y="normal"}=e,{textWidth:_="normal"}=e,{preloadVideo:m="auto"}=e,{loopVideo:h=!0}=e,{muteVideo:R=!0}=e,{allowSoundToAutoplay:M=!1}=e,{playVideoWhenInView:E=!0}=e,{playVideoThreshold:f=.5}=e,{possibleToPlayPause:C=!0}=e,{showControls:Q=!0}=e,{hoverToSeeControls:J=!1}=e,{separateReplayIcon:ne=!1}=e,{controlsColour:ie="#333"}=e,{controlsOpacity:F=.5}=e,{controlsPosition:ge="top left"}=e,G=0,q,T=!0,X=!1,Y,Z,x,$,L,he,ee,U=!1;const ze=()=>{o(37,U=!0)},Le=p=>{const st=p.detail.paused,rt=p.detail.clickedOnPauseBtn;o(24,T=st),o(22,X=rt)};u&&!a&&console.warn("Must provide aria description for video components if ariaHidden is true.");const Ne=()=>{T===!0?o(24,T=!1):o(24,T=!0)};function je(p){se[p?"unshift":"push"](()=>{ee=p,o(30,ee)})}function Fe(){G=this.currentTime,o(20,G)}function Ge(){q=this.duration,o(21,q)}function qe(){T=this.paused,o(24,T),o(12,E),o(23,L),o(11,R),o(36,M),o(37,U),o(22,X)}function Ue(){Z=this.clientWidth,Y=this.clientHeight,o(26,Z),o(25,Y)}function Ke(p){se[p?"unshift":"push"](()=>{he=p,o(29,he)})}function Qe(){$=this.clientWidth,x=this.clientHeight,o(28,$),o(27,x)}function Je(p){L=p,o(23,L)}const Xe=()=>{T===!0?o(24,T=!1):o(24,T=!0)};function Ye(p){se[p?"unshift":"push"](()=>{ee=p,o(30,ee)})}function Ze(){G=this.currentTime,o(20,G)}function xe(){q=this.duration,o(21,q)}function $e(){T=this.paused,o(24,T),o(12,E),o(23,L),o(11,R),o(36,M),o(37,U),o(22,X)}function et(){Z=this.clientWidth,Y=this.clientHeight,o(26,Z),o(25,Y)}function tt(){$=this.clientWidth,x=this.clientHeight,o(28,$),o(27,x)}const ot=()=>{o(32,t=F)},nt=()=>{o(32,t=F)},it=()=>{o(32,t=0)},lt=()=>{o(32,t=0)};return n.$$set=p=>{"src"in p&&o(1,s=p.src),"ariaHidden"in p&&o(2,u=p.ariaHidden),"ariaDescription"in p&&o(3,a=p.ariaDescription),"title"in p&&o(4,c=p.title),"notes"in p&&o(5,k=p.notes),"description"in p&&o(6,O=p.description),"width"in p&&o(7,y=p.width),"textWidth"in p&&o(8,_=p.textWidth),"preloadVideo"in p&&o(9,m=p.preloadVideo),"loopVideo"in p&&o(10,h=p.loopVideo),"muteVideo"in p&&o(11,R=p.muteVideo),"allowSoundToAutoplay"in p&&o(36,M=p.allowSoundToAutoplay),"playVideoWhenInView"in p&&o(12,E=p.playVideoWhenInView),"playVideoThreshold"in p&&o(13,f=p.playVideoThreshold),"possibleToPlayPause"in p&&o(14,C=p.possibleToPlayPause),"showControls"in p&&o(0,Q=p.showControls),"hoverToSeeControls"in p&&o(15,J=p.hoverToSeeControls),"separateReplayIcon"in p&&o(16,ne=p.separateReplayIcon),"controlsColour"in p&&o(17,ie=p.controlsColour),"controlsOpacity"in p&&o(18,F=p.controlsOpacity),"controlsPosition"in p&&o(19,ge=p.controlsPosition),"$$scope"in p&&o(59,r=p.$$scope)},n.$$.update=()=>{n.$$.dirty[0]&3145728&&o(31,i=G>=q),n.$$.dirty[0]&8394752&&E&&L&&R&&o(24,T=!1),n.$$.dirty[0]&8392704&&E&&!L&&o(24,T=!0),n.$$.dirty[0]&12589056|n.$$.dirty[1]&96&&M&&E&&L&&!R&&U&&!X&&o(24,T=!1),n.$$.dirty[0]&2048|n.$$.dirty[1]&96&&M&&!R&&!U&&o(24,T=!0),n.$$.dirty[0]&16384&&(C||o(0,Q=!0))},o(32,t=0),[Q,s,u,a,c,k,O,y,_,m,h,R,E,f,C,J,ne,ie,F,ge,G,q,X,L,T,Y,Z,x,$,he,ee,i,t,ze,Le,d,M,U,l,Ne,je,Fe,Ge,qe,Ue,Ke,Qe,Je,Xe,Ye,Ze,xe,$e,et,tt,ot,nt,it,lt,r]}class ke extends de{constructor(e){super(),ue(this,e,Yt,Xt,ce,{src:1,ariaHidden:2,ariaDescription:3,title:4,notes:5,description:6,width:7,textWidth:8,preloadVideo:9,loopVideo:10,muteVideo:11,allowSoundToAutoplay:36,playVideoWhenInView:12,playVideoThreshold:13,possibleToPlayPause:14,showControls:0,hoverToSeeControls:15,separateReplayIcon:16,controlsColour:17,controlsOpacity:18,controlsPosition:19},null,[-1,-1])}}ke.__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},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Title of the graphic",name:"title",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Notes to the graphic, passed in as a markdown string.",name:"notes",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Description of the graphic, passed in as a markdown string.",name:"description",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{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:`Set a different width for the text within the text well, for example,
"normal" to keep the title, description and notes inline with the rest
of the text well. Can't ever be wider than \`width\`.`,name:"textWidth",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:[{keywords:[],visibility:"public",description:"Custom notes and source slot",name:"notes"}],refs:[]};function Zt(n){let e,o;const t=[n[0]];let i={};for(let l=0;l<t.length;l+=1)i=te(i,t[l]);return e=new ke({props:i}),{c(){S(e.$$.fragment)},m(l,r){D(e,l,r),o=!0},p(l,r){const d=r&1?ht(t,[mt(l[0])]):{};e.$set(d)},i(l){o||(b(e.$$.fragment,l),o=!0)},o(l){g(e.$$.fragment,l),o=!1},d(l){W(e,l)}}}function xt(n){let e,o,t,i,l,r,d,s,u,a,c,k;const O=[{title:"Components/Video"},{component:ke},Vt(Ct)];let y={};for(let f=0;f<O.length;f+=1)y=te(y,O[f]);e=new _t({props:y}),t=new kt({props:{$$slots:{default:[Zt,({args:f})=>({0:f}),({args:f})=>f?1:0]},$$scope:{ctx:n}}}),l=new le({props:{name:"Default",args:{ariaDescription:"Compulsory description of your video for screen readers.",src:be,width:"wide",notes:"Optional caption for your video."}}});const _=[{name:"Playing and looping"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:be,width:"normal",loopVideo:!0,notes:"World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters",playVideoThreshold:.9}},me(It)];let m={};for(let f=0;f<_.length;f+=1)m=te(m,_[f]);d=new le({props:m});const h=[{name:"Controls"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:be,width:"normal",notes:"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}},me(we)];let R={};for(let f=0;f<h.length;f+=1)R=te(R,h[f]);u=new le({props:R});const M=[{name:"Videos with sound"},{args:{ariaDescription:"Compulsory description of your video for screen readers.",src:Ot,width:"normal",notes:"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}},me(we)];let E={};for(let f=0;f<M.length;f+=1)E=te(E,M[f]);return c=new le({props:E}),{c(){S(e.$$.fragment),o=A(),S(t.$$.fragment),i=A(),S(l.$$.fragment),r=A(),S(d.$$.fragment),s=A(),S(u.$$.fragment),a=A(),S(c.$$.fragment)},m(f,C){D(e,f,C),v(f,o,C),D(t,f,C),v(f,i,C),D(l,f,C),v(f,r,C),D(d,f,C),v(f,s,C),D(u,f,C),v(f,a,C),D(c,f,C),k=!0},p(f,[C]){const Q={};e.$set(Q);const J={};C&3&&(J.$$scope={dirty:C,ctx:f}),t.$set(J);const ne={};d.$set(ne);const ie={};u.$set(ie);const F={};c.$set(F)},i(f){k||(b(e.$$.fragment,f),b(t.$$.fragment,f),b(l.$$.fragment,f),b(d.$$.fragment,f),b(u.$$.fragment,f),b(c.$$.fragment,f),k=!0)},o(f){g(e.$$.fragment,f),g(t.$$.fragment,f),g(l.$$.fragment,f),g(d.$$.fragment,f),g(u.$$.fragment,f),g(c.$$.fragment,f),k=!1},d(f){f&&(V(o),V(i),V(r),V(s),V(a)),W(e,f),W(t,f),W(l,f),W(d,f),W(u,f),W(c,f)}}}class $t extends de{constructor(e){super(),ue(this,e,null,xt,ce,{})}}const oe=bt($t,{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,source:"",hasArgs:!1},PlayingAndLooping:{storyId:"components-video--playing-and-looping",name:"Playing and looping",template:!1,source:"",hasArgs:!1},Controls:{storyId:"components-video--controls",name:"Controls",template:!1,source:"",hasArgs:!1},VideosWithSound:{storyId:"components-video--videos-with-sound",name:"Videos with sound",template:!1,source:"",hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","playAndLoopDocs","controlsDocs","SilentVideo","SoundVideo","Video","withComponentDocs","withStoryDocs"]}),fo=oe.meta,po=["Default","PlayingAndLooping","Controls","VideosWithSound"],yo=oe.stories.Default,ho=oe.stories.PlayingAndLooping,mo=oe.stories.Controls,bo=oe.stories.VideosWithSound;export{mo as Controls,yo as Default,ho as PlayingAndLooping,bo as VideosWithSound,po as __namedExportsOrder,fo as default};
//# sourceMappingURL=Video.stories-7ce115e0.js.map
Reference in a new issue View git blame Copy permalink