wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hero, photo, video fixes #116

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-09-16 12:37:11 +05:30
parent 4b4dbd5100
commit 5a69dafba2
12 changed files with 203 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/FeaturePhoto/FeaturePhoto.svelte
View file

@ -103,7 +103,7 @@
{/if}
{#if caption}
<PaddingReset containerIsFluid="{width === 'fluid'}">
<Block width="{textWidth}" class="fmx-auto fmy-0">
<Block width="{textWidth}" class="notes w-full fmy-0">
<figcaption>
{caption}
</figcaption>

2
src/components/GraphicBlock/TextBlock.svelte
View file

@ -7,7 +7,7 @@
</script>
{#if width}
<Block width="{width}" class="fmx-auto fmy-0">
<Block width="{width}" class="notes fmy-0">
<slot />
</Block>
{:else}

85
src/components/HeroHeadline/Hero.stories.svelte
View file

@ -8,6 +8,8 @@
// @ts-ignore
import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
// @ts-ignore
import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
// @ts-ignore
import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
// @ts-ignore
import videoDocs from './stories/docs/backgroundVideo.md?raw';
@ -23,6 +25,8 @@
import SiteHeader from '../SiteHeader/SiteHeader.svelte';
import HeroHeadline from './Hero.svelte';
import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
import Video from '../Video/Video.svelte';
import CrashMap from './stories/graphics/crash.svelte';
import QuakeMap from './stories/graphics/quakemap.svelte';
@ -187,27 +191,17 @@
publishTime="{new Date('2020-12-18').toISOString()}"
>
<div slot="background">
<GraphicBlock
<Video
width="widest"
role="figure"
class="my-0"
textWidth="normal"
showControls="{false}"
preloadVideo="auto"
playVideoWhenInView="{false}"
src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
notes="Drone footage from the Village 8 refugee camp in Sudan."
ariaDescription="Aerial footage of people houses in refugee camp"
>
<!-- svelte-ignore a11y-media-has-caption -->
<video
autoplay
muted
playsinline
loop
preload="true"
width="100%"
poster="video-poster.png"
src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
>
</video>
</GraphicBlock>
/>
</div>
</HeroHeadline>
<style lang="scss">
@ -228,6 +222,32 @@
</style>
</Story>
<Story name="With inline photo" {...withStoryDocs(inlinePhotoDocs)}>
<Block width="fluid">
<SiteHeader />
</Block>
<HeroHeadline
hed="{'Buried under the bricks'}"
hedWidth="wide"
class="mb-0"
dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
section="{'Global news'}"
authors="{['Mariano Zafra']}"
publishTime="{new Date('2020-01-01').toISOString()}"
>
<div slot="inline">
<FeaturePhoto
width="widest"
class="my-0"
src="https://www.reuters.com/graphics/MOROCCO-QUAKE/CONSTRUCTION/xmpjlblojpr/cdn/images/opening.jpg"
caption="Photo by REUTERS/Nacho Doce."
altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
/>
</div>
</HeroHeadline>
</Story>
<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
<Block width="fluid">
<SiteHeader />
@ -245,7 +265,7 @@
<div slot="inline">
<GraphicBlock
width="widest"
role="figure"
role="img"
class="my-0"
textWidth="normal"
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
@ -257,6 +277,35 @@
</HeroHeadline>
</Story>
<Story name="With inline video" {...withStoryDocs(inlinePhotoDocs)}>
<Block width="fluid">
<SiteHeader />
</Block>
<HeroHeadline
hed="{'Devastation in Derna'}"
hedWidth="wide"
class="mb-0"
dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
section="{'Global news'}"
authors="{['Simon Scarr']}"
publishTime="{new Date('2020-01-01').toISOString()}"
>
<div slot="inline">
<Video
width="widest"
class="my-0"
showControls="{false}"
preloadVideo="auto"
playVideoWhenInView="{false}"
src="https://www.reuters.com/graphics/LIBYA-STORM/EXPLAINER/klvyzqebzpg/cdn/video/drone.mp4"
notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
ariaDescription="alttext fot video"
/>
</div>
</HeroHeadline>
</Story>
<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
<HeroHeadline
class="custom-hed"

4
src/components/HeroHeadline/Hero.svelte
View file

@ -245,7 +245,7 @@
@include body-caption;
}
:global(video) {
:global(.background-hero video) {
position: relative;
display: block;
width: 100%;
@ -253,7 +253,7 @@
object-fit: cover;
}
:global(.graphic-container .article-block:not(.graphic)) {
:global(.graphic-container .article-block.notes) {
@media (max-width: 690px) {
width: 100%;
padding: 0 15px;

8
src/components/HeroHeadline/stories/docs/backgroundGraphic.md
View file

@ -2,12 +2,18 @@ Reuters Graphics headline with ai2svelte graphic as background.
```svelte
<script>
import { HeroHeadline } from '@reuters-graphics/graphics-components';
import {
HeroHeadline,
GraphicBlock,
} from '@reuters-graphics/graphics-components';
import QuakeMap from './ai2svelte/graphic.svelte';
import { assets } from '$app/paths';
export let embedded = false;
</script>
<HeroHeadline
embedded="{embedded}"
hed="{'Earthquake devastates Afghanistan'}"
hedSize="{'big'}"
hedWidth="wide"

29
src/components/HeroHeadline/stories/docs/backgroundVideo.md
View file

@ -2,11 +2,14 @@ Add a cover video and position the title with ease.
```svelte
<script>
import { HeroHeadline } from '@reuters-graphics/graphics-components';
import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths';
export let embedded = false;
</script>
<HeroHeadline
embedded="{embedded}"
class="custom-hero"
hed="The conflict in Ethiopia"
hedSize="bigger"
@ -15,27 +18,17 @@ Add a cover video and position the title with ease.
publishTime="{new Date('2020-12-18').toISOString()}"
>
<div slot="background">
<GraphicBlock
<Video
width="widest"
role="figure"
class="my-0"
textWidth="normal"
showControls="{false}"
preloadVideo="auto"
playVideoWhenInView="{false}"
src="{assets}/videos/intro.mp4"
poster="{assets}/images/video-poster-intro.jpg"
notes="Drone footage from the Village 8 refugee camp in Sudan."
ariaDescription="Aerial footage of people houses in refugee camp"
>
<!-- svelte-ignore a11y-media-has-caption -->
<video
autoplay
muted
playsinline
loop
preload="true"
width="100%"
poster="video-poster.png"
src="{assets}/videos/intro.mp4"
>
</video>
</GraphicBlock>
/>
</div>
</HeroHeadline>

3
src/components/HeroHeadline/stories/docs/component.md
View file

@ -4,9 +4,12 @@ Reuters Graphics headline with a Hero media
<script>
import { HeroHeadline } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
export let embedded = false;
</script>
<HeroHeadline
embedded="{embedded}"
img="{`${assets}/images/myImage.jpg`}"
hed="{'Reuters Graphics Interactive'}"
dek="{'The beginning of a beautiful page'}"

3
src/components/HeroHeadline/stories/docs/customHed.md
View file

@ -4,9 +4,12 @@ Add a custom styled headline.
<script>
import { HeroHeadline } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
export let embedded = false;
</script>
<HeroHeadline
embedded="{embedded}"
class="custom-hed"
authors="{[
'Prasanta Kumar Dutta',

10
src/components/HeroHeadline/stories/docs/inlineGraphic.md
View file

@ -2,12 +2,18 @@ Reuters Graphics headline followed by a graphic or any media block.
```svelte
<script>
import { HeroHeadline } from '@reuters-graphics/graphics-components';
import {
HeroHeadline,
GraphicBlock,
} from '@reuters-graphics/graphics-components';
import Map from './ai2svelte/graphic.svelte';
import { assets } from '$app/paths';
export let embedded = false;
</script>
<HeroHeadline
embedded="{embedded}"
hed="{'The plunge from 29,000 feet'}"
hedWidth="wide"
class="mb-0"
@ -19,7 +25,7 @@ Reuters Graphics headline followed by a graphic or any media block.
<div slot="inline">
<GraphicBlock
width="widest"
role="figure"
role="img"
class="my-0"
textWidth="normal"
notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"

34
src/components/HeroHeadline/stories/docs/inlinePhoto.md Normal file
View file

@ -0,0 +1,34 @@
Reuters Graphics headline followed by a graphic or any media block.
```svelte
<script>
import {
HeroHeadline,
FeaturePhoto,
} from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths';
export let embedded = false;
</script>
<HeroHeadline
embedded="{embedded}"
hed="{'Buried under the bricks'}"
hedWidth="wide"
class="mb-0"
dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
section="{'Global news'}"
authors="{['Mariano Zafra']}"
publishTime="{new Date('2020-01-01').toISOString()}"
>
<div slot="inline">
<FeaturePhoto
width="widest"
class="my-0"
src="{`${assets}/images/myImage.jpg`}"
caption="Photo by REUTERS/Nacho Doce."
altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
/>
</div>
</HeroHeadline>
```

34
src/components/HeroHeadline/stories/docs/inlineVideo.md Normal file
View file

@ -0,0 +1,34 @@
Add a cover video and position the title with ease.
```svelte
<script>
import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
import { assets } from '$app/paths';
export let embedded = false;
</script>
<HeroHeadline
embedded="{embedded}"
hed="{'Devastation in Derna'}"
hedWidth="wide"
class="mb-0"
dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
section="{'Global news'}"
authors="{['Simon Scarr']}"
publishTime="{new Date('2020-01-01').toISOString()}"
>
<div slot="inline">
<Video
width="widest"
class="my-0"
showControls="{false}"
preloadVideo="auto"
playVideoWhenInView="{false}"
src="{assets}/videos/intro.mp4"
notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
ariaDescription="alttext fot video"
/>
</div>
</HeroHeadline>
```

42
src/components/Video/Video.svelte
View file

@ -10,11 +10,31 @@
/// //////////////////////////////////
/**
* Video src.
* Video src
* @type {string}
* @required
*/
export let src = '';
export let ariaHidden = true;
export let ariaDescription = null;
export let src: string;
/**
* Image to be shown while the video is downloading
*/
export let poster: string = '';
/**
* Whether to wrap the graphic with an aria hidden tag.
*/
export let hidden: boolean = true;
/**
* ARIA description, passed in as a markdown string.
* @type {string}
*/
export let ariaDescription: string | null = null;
/** Add extra classes to the block tag to target it with custom CSS. */
let cls: string = '';
export { cls as class };
/**
* Title of the graphic
@ -136,9 +156,9 @@
};
// Warning to missing aria attributes
if (ariaHidden && !ariaDescription) {
if (hidden && !ariaDescription) {
console.warn(
'Must provide aria description for video components if ariaHidden is true.'
'Must provide aria description for video components if hidden is true.'
);
}
</script>
@ -154,7 +174,7 @@
description="{description}"
notes="{notes}"
width="{width}"
class="video-container"
class="video {cls}"
>
<div
role="figure"
@ -171,7 +191,7 @@
interactiveControlsOpacity = 0;
}}"
>
{#if (ariaHidden && ariaDescription) || !ariaHidden}
{#if (hidden && ariaDescription) || !hidden}
{#if ariaDescription}
<p class="visually-hidden">{ariaDescription}</p>
{/if}
@ -187,7 +207,7 @@
<div
bind:this="{element}"
class="video-wrapper relative block"
aria-hidden="{ariaHidden}"
aria-hidden="{hidden}"
bind:clientWidth="{widthVideoContainer}"
bind:clientHeight="{heightVideoContainer}"
>
@ -221,6 +241,7 @@
<video
bind:this="{videoElement}"
src="{src}"
poster="{poster}"
class="pointer-events-none relative"
width="100%"
muted="{muteVideo}"
@ -241,7 +262,7 @@
<!-- Video element without Intersection observer -->
<div
class="video-wrapper relative"
aria-hidden="{ariaHidden}"
aria-hidden="{hidden}"
bind:clientWidth="{widthVideoContainer}"
bind:clientHeight="{heightVideoContainer}"
>
@ -273,6 +294,7 @@
<video
bind:this="{videoElement}"
src="{src}"
poster="{poster}"
class="pointer-events-none relative"
width="100%"
muted="{muteVideo}"