import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as t}from"./index-CO-0pc0F.js";import{M as r,C as n}from"./index-Z-6k0Xrj.js";import{V as c,D as l,A as d,a,T as p}from"./Video.stories-sfptYb-v.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./Video-yHzv19g_.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./size-DMdj3-I9.js";import"./this-CrUBQEQ_.js";import"./index-client-BAw8T8-V.js";import"./slot-B1isFuVn.js";import"./GraphicBlock-uLJTqaY1.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";import"./fa-layers-text.svelte_svelte_type_style_lang-rD9gd1As.js";import"./index-C3C5q_jF.js";function s(i){const o={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:c}),`
`,e.jsx(o.h1,{id:"video",children:"Video"}),`
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Video"})," component adds a video with various controls to your page such as:"]}),`
`,e.jsxs(o.ul,{children:[`
`,e.jsx(o.li,{children:"Play/pause button"}),`
`,e.jsx(o.li,{children:"Autoplay controls, i.e. whether the video plays when it comes into view or on page load"}),`
`,e.jsx(o.li,{children:"Looping"}),`
`,e.jsx(o.li,{children:"Audio controls"}),`
`,e.jsx(o.li,{children:"Text elements such as notes and titles"}),`
`]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
  import { Video } from '@reuters-graphics/graphics-components';
<\/script>

<Video
  ariaDescription="Required description of your video for screen readers."
  src="my-video.mp4"
  width="wide"
  notes="Optional caption for your video."
/>
`})}),`
`,e.jsx(n,{of:l}),`
`,e.jsx(o.h2,{id:"using-with-archieml-docs",children:"Using with ArchieML docs"}),`
`,e.jsx(o.p,{children:"With the graphics kit, you'll likely get your text value from an ArchieML doc..."}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-yaml",children:`# ArchieML doc
[blocks]
type: video
src: videos/my-video.mp4
width: wide
ariaDescription: Required description of your video for screen readers.
notes: Optional caption for your video.
loopVideo: true
[]
`})}),`
`,e.jsxs(o.p,{children:["... which you'll parse out of a ArchieML block object before passing to the ",e.jsx(o.code,{children:"Video"})," component."]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<!-- App.svelte -->
<script>
  import { Video } from '@reuters-graphics/graphics-components';
  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
  import { truthy } from '$utils/propValidators'; // 👈 If using in the graphics kit...
<\/script>

{#each content.blocks as block}
  {#if block.type === 'video'}
    <Video
      ariaDescription={block.ariaDescription}
      src={\`\${assets}/\${block.src}\`}
      width={block.width}
      loopVideo={truthy(block.loopVideo)}
      notes={block.notes}
    />
  {/if}
{/each}
`})}),`
`,e.jsxs(o.blockquote,{children:[`
`,e.jsxs(o.p,{children:[e.jsx(o.strong,{children:"Note:"})," Some props, like ",e.jsx(o.code,{children:"loopVideo"}),", expect boolean values. If you're using the graphics kit, you can use the ",e.jsx(o.code,{children:"truthy()"})," util function to convert a string value to a boolean."]}),`
`]}),`
`,e.jsx(o.h2,{id:"autoplay-controls",children:"Autoplay controls"}),`
`,e.jsxs(o.p,{children:["By default, the video starts playing when 50% (0.5) of the video element's height comes into view. Adjust this with ",e.jsx(o.code,{children:"playVideoThreshold"}),", which is a value between 0 and 1, where 0 means the video will start playing as soon as its top enters the viewport, and 1 means it will start when the whole video is in the viewport."]}),`
`,e.jsxs(o.p,{children:["To make the video play on page load regardless of whether it is in view, set the prop ",e.jsx(o.code,{children:"playVideoWhenInView"})," to ",e.jsx(o.code,{children:"false"}),"."]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
  import { Video } from '@reuters-graphics/graphics-components';
<\/script>

<Video
  ariaDescription="Required description of your video for screen readers."
  src="https://..."
  loopVideo={true}
  playVideoThreshold={0.9}
  notes="World's longest glass bridge opens to public in Vietnam. (c) 2022 Thomson Reuters"
/>
`})}),`
`,e.jsx(n,{of:d}),`
`,e.jsx(o.h2,{id:"audio-controls",children:"Audio controls"}),`
`,e.jsxs(o.p,{children:["On most browsers, ",e.jsx(o.a,{href:"https://developer.chrome.com/blog/autoplay#:~:text=Muted%20autoplay%20is%20always%20allowed,to%20allow%20autoplay%20with%20sound.",rel:"nofollow",children:"autoplaying videos with sound"})," is allowed only if the user has interacted with the page. (Autoplay is allowed with muted videos.)"]}),`
`,e.jsxs(o.p,{children:["By default, this component will not autoplay videos with sound. To change this, set ",e.jsx(o.code,{children:"soundAutoplay"})," to ",e.jsx(o.code,{children:"true"}),". This will allow the video to autoplay with sound when it comes into view, but only if the user has already interacted with the page by clicking or tapping on it."]}),`
`,e.jsxs(o.p,{children:["Test this with the example below: the video will autoplay when it comes into view ",e.jsx(o.em,{children:"only if"})," you have clicked or tapped on the page before scrolling down to it."]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
  import { Video } from '@reuters-graphics/graphics-components';
<\/script>

<Video
  ariaDescription="Required description of your video for screen readers."
  src="https://..."
  controlsColour="#152a1c"
  controlsOpacityMax={1}
  controlsOpacityMin={0.5}
  muteVideo={false}
  soundAutoplay={true}
/>
`})}),`
`,e.jsx(n,{of:a}),`
`,e.jsx(o.h2,{id:"adding-text",children:"Adding text"}),`
`,e.jsxs(o.p,{children:["The ",e.jsx(o.code,{children:"Video"})," component allows you to add a title, description and notes to your video, which are rendered by the ",e.jsx(o.code,{children:"GraphicBlock"})," component."]}),`
`,e.jsxs(o.p,{children:["Customise the ",e.jsx(o.code,{children:"notes"})," section by passing a ",e.jsx(o.a,{href:"https://svelte.dev/docs/svelte/snippet",rel:"nofollow",children:"snippet"})," instead of a string."]}),`
`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-svelte",children:`<script>
  import { Video } from '@reuters-graphics/graphics-components';
<\/script>

<Video
  src="https://..."
  ariaDescription="Required description of your video for screen readers."
  title="Title for your video"
  description="Description for your video"
>
  <!-- Custom notes snippet -->
  {#snippet notes()}
    <aside>
      <p class="notes">Custom-styled notes for the video.</p>
    </aside>
  {/snippet}
</Video>

<style lang="scss">
  @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;

  p.notes {
    @include mixins.body-note;
  }
</style>
`})}),`
`,e.jsx(n,{of:p})]})}function _(i={}){const{wrapper:o}={...t(),...i.components};return o?e.jsx(o,{...i,children:e.jsx(s,{...i})}):s(i)}export{_ as default};