@reuters-graphics/graphics-components 3.0.12 → 3.0.13

package/dist/components/ScrollerVideo/demo/Embedded.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import ScrollerVideo from '../ScrollerVideo.svelte';
+  import ScrollerVideoForeground from '../ScrollerVideoForeground.svelte';
+  import Goldengate from '../videos/goldengate.mp4';
+  import BodyText from '../../BodyText/BodyText.svelte';
+
+  import type { ContainerWidth } from '../../@types/global';
+
+  const content = {
+    blocks: [
+      {
+        type: 'scroller-video',
+        id: 'goldengate-scroller',
+        src: '../videos/goldengate.mp4',
+        height: '200lvh',
+        foregrounds: [
+          {
+            startTime: '0',
+            endTime: '2',
+            width: 'normal',
+            position: 'bottom center',
+            backgroundColour: 'rgba(0, 0, 0, 0.8)',
+            text: '#### Golden Gate Bridge\n\nThe Golden Gate Bridge took over 4 years to build (1933-1937) and was the longest suspension bridge in the world at the time of its completion, spanning 4,200 feet between its towers.',
+          },
+          {
+            startTime: '4',
+            endTime: '7',
+            width: 'normal',
+            position: 'bottom center',
+            backgroundColour: 'rgba(0, 0, 0, 0.8)',
+            text: "The bridge's iconic International Orange color was chosen partly for visibility in San Francisco's frequent fog. The paint job requires constant maintenance, with a dedicated crew painting the bridge year-round to protect it from rust and corrosion.",
+          },
+          {
+            startTime: '8',
+            endTime: '11',
+            width: 'normal',
+            position: 'bottom center',
+            backgroundColour: 'rgba(0, 0, 0, 0.8)',
+            text: '#### Engineering Marvel\n\nThe Golden Gate Bridge sways up to **27 feet** sideways in strong winds and can handle winds up to 100 mph. On foggy days, the bridge can collect enough moisture to drip like rain, and it has been struck by ships only once in its history.',
+          },
+        ],
+      },
+    ],
+  };
+
+  const openerText =
+    '**In embedded mode, `ScrollerVideo` behaves like a normal video player, autoplaying the video when the user scrolls onto it.**';
+  const dummyText =
+    'Reprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock tempor meatball alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.';
+  const scrollerVideoBlock = content.blocks[0];
+
+  let embedded = $state(true);
+</script>
+
+<BodyText text={openerText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+
+<ScrollerVideo
+  src={Goldengate}
+  class="embedded-demo"
+  showDebugInfo={true}
+  {embedded}
+  embeddedProps={{
+    threshold: 0.5,
+    duration: 12000,
+    delay: 200,
+  }}
+>
+  {#each scrollerVideoBlock.foregrounds as foreground}
+    <ScrollerVideoForeground
+      startTime={parseFloat(foreground.startTime)}
+      endTime={parseFloat(foreground.endTime)}
+      width={foreground.width as ContainerWidth}
+      position={foreground.position}
+      backgroundColour={foreground.backgroundColour}
+      text={foreground.text}
+    />
+  {/each}
+</ScrollerVideo>
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+<BodyText text={dummyText} />
+
+<style>:global .embedded-demo .foreground-text h4,
+:global .embedded-demo .foreground-text p {
+  color: white;
+}</style>

package/dist/components/ScrollerVideo/demo/Embedded.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Embedded: import("svelte").Component<Record<string, never>, {}, "">;
+type Embedded = ReturnType<typeof Embedded>;
+export default Embedded;

package/dist/components/ScrollerVideo/demo/WithAi2svelteForegrounds.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import ScrollerVideo from '../ScrollerVideo.svelte';
+  import ScrollerVideoForeground from '../ScrollerVideoForeground.svelte';
+  import SM from '../videos/waves_sm.mp4';
+  import MD from '../videos/waves_md.mp4';
+  import LG from '../videos/waves_lg.mp4';
+  import Headline from '../../Headline/Headline.svelte';
+
+  // Foreground ai2svelte components
+  import Foreground1 from './graphic/ai2svelte/annotation1.svelte';
+  import Foreground2 from './graphic/ai2svelte/annotation2.svelte';
+  import Foreground3 from './graphic/ai2svelte/annotation3.svelte';
+  import Foreground4 from './graphic/ai2svelte/annotation4.svelte';
+
+  // Foreground ai2svelte graphics components
+  const aiChartsForeground = {
+    Foreground1,
+    Foreground2,
+    Foreground3,
+    Foreground4,
+  };
+
+  const content = {
+    hed: 'Wind and waves',
+    authors: ['Jane Doe'],
+    publishTime: '2020-01-01T00:00:00Z',
+    startTime: '0',
+    endTime: '0.3',
+    blocks: [
+      {
+        type: 'scroller-video',
+        id: 'surf-scroller',
+        height: '800lvh',
+        foregrounds: [
+          {
+            startTime: '0.3',
+            endTime: '2.2',
+            width: 'fluid',
+            foreground: 'Foreground1',
+          },
+          {
+            startTime: '2.2',
+            endTime: '3.2',
+            width: 'fluid',
+            foreground: 'Foreground2',
+          },
+          {
+            startTime: '3.2',
+            endTime: '4.5',
+            width: 'fluid',
+            foreground: 'Foreground3',
+          },
+          {
+            startTime: '6.5',
+            endTime: '8',
+            width: 'fluid',
+            foreground: 'Foreground4',
+          },
+        ],
+      },
+    ],
+  };
+  const scrollerVideoBlock = content.blocks[0];
+
+  let width = $state(1);
+</script>
+
+<svelte:window bind:innerWidth={width} />
+
+{#snippet ScrollVideo(height: string, src: string)}
+  <ScrollerVideo
+    id={scrollerVideoBlock.id}
+    {height}
+    {src}
+    useWebCodecs={true}
+    showDebugInfo
+  >
+    <ScrollerVideoForeground
+      startTime={parseFloat(content.startTime)}
+      endTime={parseFloat(content.endTime)}
+    >
+      <Headline
+        class="custom-headline"
+        hed={content.hed}
+        authors={content.authors}
+        publishTime={new Date(content.publishTime).toISOString()}
+      />
+    </ScrollerVideoForeground>
+
+    {#each scrollerVideoBlock.foregrounds as foreground}
+      <ScrollerVideoForeground
+        startTime={parseFloat(foreground.startTime)}
+        endTime={parseFloat(foreground.endTime)}
+        width={foreground.width as 'fluid'}
+        Foreground={aiChartsForeground[
+          foreground.foreground as keyof typeof aiChartsForeground
+        ]}
+      />
+    {/each}
+  </ScrollerVideo>
+{/snippet}
+
+{#if width < 600}
+  {@render ScrollVideo(scrollerVideoBlock.height, SM)}
+{:else if width < 1200}
+  {@render ScrollVideo(scrollerVideoBlock.height, MD)}
+{:else}
+  {@render ScrollVideo(scrollerVideoBlock.height, LG)}
+{/if}
+
+<style>:global(.custom-headline *) {
+  color: white;
+}
+
+:global(.surf-scroller .scroller-video-foreground) {
+  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
+}</style>

package/dist/components/ScrollerVideo/demo/WithAi2svelteForegrounds.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const WithAi2svelteForegrounds: import("svelte").Component<Record<string, never>, {}, "">;
+type WithAi2svelteForegrounds = ReturnType<typeof WithAi2svelteForegrounds>;
+export default WithAi2svelteForegrounds;

package/dist/components/ScrollerVideo/demo/WithScrollerBase.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import ScrollerVideo from '../ScrollerVideo.svelte';
+  import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
+  import Goldengate from '../videos/goldengate.mp4';
+
+  // ScrollerBase props
+  let progress = $state(0);
+</script>
+
+<ScrollerBase bind:progress query="div.step-foreground-container" visible>
+  {#snippet backgroundSnippet()}
+    <ScrollerVideo
+      src={Goldengate}
+      height="100lvh"
+      trackScroll={false}
+      videoPercentage={progress}
+      showDebugInfo
+    />
+  {/snippet}
+  {#snippet foregroundSnippet()}
+    <!-- Add custom foreground HTML or component -->
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 1</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 2</h3>
+    </div>
+    <div class="step-foreground-container">
+      <h3 class="text-center">Step 3</h3>
+    </div>
+  {/snippet}
+</ScrollerBase>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+#progress-bar {
+  background-color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  padding: 1rem;
+}
+#progress-bar progress {
+  height: 6px;
+  background-color: rgba(255, 0, 0, 0.2666666667); /* Background color of the entire bar */
+}
+#progress-bar progress::-webkit-progress-value {
+  background-color: white;
+  border-radius: 10px;
+}
+#progress-bar progress::-webkit-progress-bar {
+  background-color: #444444;
+  border-radius: 10px;
+}
+#progress-bar p {
+  font-family: var(--theme-font-family-sans-serif);
+  color: white;
+  font-size: var(--theme-font-size-xs);
+  padding: 0;
+  margin: 0;
+}
+
+.step-foreground-container {
+  height: 100lvh;
+  width: 50%;
+  padding: 1em;
+  margin: auto;
+}
+.step-foreground-container h3 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: white;
+}</style>

package/dist/components/ScrollerVideo/demo/WithScrollerBase.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const WithScrollerBase: import("svelte").Component<Record<string, never>, {}, "">;
+type WithScrollerBase = ReturnType<typeof WithScrollerBase>;
+export default WithScrollerBase;

package/dist/components/ScrollerVideo/demo/WithTextForegrounds.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import ScrollerVideo from '../ScrollerVideo.svelte';
+  import ScrollerVideoForeground from '../ScrollerVideoForeground.svelte';
+  import Drone from '../videos/drone.mp4';
+  import type { ContainerWidth } from '../../@types/global';
+
+  const content = {
+    blocks: [
+      {
+        type: 'scroller-video',
+        id: 'alps-scroller',
+        src: 'videos/alps.mp4',
+        height: '800lvh',
+        foregrounds: [
+          {
+            startTime: '0',
+            endTime: '5',
+            width: 'normal',
+            position: 'bottom center',
+            backgroundColour: 'rgba(0, 0, 0, 0.8)',
+            text: '#### The Alps\n\nThe Alps stretch across eight countries: France, Switzerland, Italy, Monaco, Liechtenstein, Austria, Germany, and Slovenia, covering about 1,200 kilometers (750 miles).',
+          },
+          {
+            startTime: '7',
+            endTime: '12',
+            width: 'normal',
+            position: 'bottom center',
+            backgroundColour: 'rgba(0, 0, 0, 0.8)',
+            text: "Mont Blanc, standing at 4,809 meters (15,777 feet), is the highest peak in the Alps and Western Europe, though there's ongoing debate between France and Italy about exactly where the summit lies.",
+          },
+          {
+            startTime: '14',
+            endTime: '20',
+            width: 'normal',
+            position: 'bottom center',
+            backgroundColour: 'rgba(0, 0, 0, 0.8)',
+            text: '#### History\n\nThe Alps were formed around **65 million years** ago when the African and Eurasian tectonic plates collided, pushing the land upward. Over 14 million people live in the Alpine region, with tourism supporting approximately 120 million visitors annually.',
+          },
+        ],
+      },
+    ],
+  };
+
+  const scrollerVideoBlock = content.blocks[0];
+</script>
+
+<ScrollerVideo
+  id={scrollerVideoBlock.id}
+  height={scrollerVideoBlock.height}
+  src={Drone}
+  useWebCodecs={true}
+  showDebugInfo
+>
+  {#each scrollerVideoBlock.foregrounds as foreground}
+    <ScrollerVideoForeground
+      startTime={parseFloat(foreground.startTime)}
+      endTime={parseFloat(foreground.endTime)}
+      width={foreground.width as ContainerWidth}
+      position={foreground.position}
+      backgroundColour={foreground.backgroundColour}
+      text={foreground.text}
+    />
+  {/each}
+</ScrollerVideo>
+
+<style>:global(.custom-headline *) {
+  text-shadow: 0 0 8px rgba(0, 0, 0, 0.75);
+}
+
+:global #alps-scroller .foreground-text * {
+  color: white;
+}</style>

package/dist/components/ScrollerVideo/demo/WithTextForegrounds.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WithTextForegrounds: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WithTextForegrounds = InstanceType<typeof WithTextForegrounds>;
+export default WithTextForegrounds;