Skip to content

Commit

Permalink
fix(gallery): Fix AV Portal video overlay display - FRONT-3741
Browse files Browse the repository at this point in the history
  • Loading branch information
@papegaill
papegaill committed Sep 6, 2022
1 parent a77147e commit 69eb680
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 120 deletions.
114 changes: 27 additions & 87 deletions src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,40 +334,20 @@ exports[`Gallery Default renders correctly 1`] = `
class="ecl-gallery__item"
>
<a
aria-label="Image 8"
aria-label="Climate change and protect nature"
class="ecl-gallery__item-link"
data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image8.jpg"
href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
data-ecl-gallery-item-embed-src="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
href="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
>
<figure
class="ecl-gallery__image-container"
>
<video
<img
alt="Climate change and protect nature"
class="ecl-gallery__image"
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
>
<source
src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
type="video/mp4"
/>
<source
src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm"
type="video/webm"
/>
<track
kind="captions"
label="English"
src="/captions/bunny-en.vtt"
srclang="en"
/>
<track
kind="captions"
label="français"
src="/captions/bunny-fr.vtt"
srclang="fr"
/>
</video>
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
/>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-gallery__image-icon"
Expand All @@ -381,7 +361,7 @@ exports[`Gallery Default renders correctly 1`] = `
class="ecl-gallery__description"
data-ecl-gallery-description=""
>
Kids' Corner
Climate change and protect nature
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-gallery__description-icon"
Expand All @@ -395,7 +375,7 @@ exports[`Gallery Default renders correctly 1`] = `
class="ecl-gallery__meta"
data-ecl-gallery-meta=""
>
Copyright, Author, Licence for image 8
Copyright, Author, Licence for embedded media
</span>
</figcaption>
</figure>
Expand Down Expand Up @@ -1022,40 +1002,20 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
class="ecl-gallery__item"
>
<a
aria-label="Image 8"
aria-label="Climate change and protect nature"
class="ecl-gallery__item-link"
data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image8.jpg"
href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
data-ecl-gallery-item-embed-src="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
href="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
>
<figure
class="ecl-gallery__image-container"
>
<video
<img
alt="Climate change and protect nature"
class="ecl-gallery__image"
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
>
<source
src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
type="video/mp4"
/>
<source
src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm"
type="video/webm"
/>
<track
kind="captions"
label="English"
src="/captions/bunny-en.vtt"
srclang="en"
/>
<track
kind="captions"
label="français"
src="/captions/bunny-fr.vtt"
srclang="fr"
/>
</video>
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
/>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-gallery__image-icon"
Expand All @@ -1069,7 +1029,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
class="ecl-gallery__description"
data-ecl-gallery-description=""
>
Kids' Corner
Climate change and protect nature
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-gallery__description-icon"
Expand All @@ -1083,7 +1043,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = `
class="ecl-gallery__meta"
data-ecl-gallery-meta=""
>
Copyright, Author, Licence for image 8
Copyright, Author, Licence for embedded media
</span>
</figcaption>
</figure>
Expand Down Expand Up @@ -1708,40 +1668,20 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
class="ecl-gallery__item"
>
<a
aria-label="Image 8"
aria-label="Climate change and protect nature"
class="ecl-gallery__item-link"
data-ecl-gallery-item=""
data-ecl-gallery-item-share="/share#example-image8.jpg"
href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
data-ecl-gallery-item-embed-src="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
href="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
>
<figure
class="ecl-gallery__image-container"
>
<video
<img
alt="Climate change and protect nature"
class="ecl-gallery__image"
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
>
<source
src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
type="video/mp4"
/>
<source
src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm"
type="video/webm"
/>
<track
kind="captions"
label="English"
src="/captions/bunny-en.vtt"
srclang="en"
/>
<track
kind="captions"
label="français"
src="/captions/bunny-fr.vtt"
srclang="fr"
/>
</video>
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
/>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-gallery__image-icon"
Expand All @@ -1755,7 +1695,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
class="ecl-gallery__description"
data-ecl-gallery-description=""
>
Kids' Corner
Climate change and protect nature
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-gallery__description-icon"
Expand All @@ -1769,7 +1709,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = `
class="ecl-gallery__meta"
data-ecl-gallery-meta=""
>
Copyright, Author, Licence for image 8
Copyright, Author, Licence for embedded media
</span>
</figcaption>
</figure>
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/vanilla/components/gallery/_gallery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ $_overlay-links-hover-color: null !default;
.ecl-gallery__slider-embed {
@include uMedia.aspect-ratio(16, 9);

width: 100%;
width: calc(100% - map.get(theme.$spacing, 'l'));
}

.ecl-gallery__slider-previous {
Expand Down
41 changes: 9 additions & 32 deletions src/specs/components/gallery/demo/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,44 +119,21 @@ module.exports = {
share_path: '/share#example-image7.jpg',
},
{
// Video
video: {
poster:
'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg',
sources: [
{
src: 'https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4',
type: 'video/mp4',
},
{
src: 'https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm',
type: 'video/webm',
},
],
tracks: [
{
src: '/captions/bunny-en.vtt',
kind: 'captions',
src_lang: 'en',
label: 'English',
},
{
src: '/captions/bunny-fr.vtt',
kind: 'captions',
src_lang: 'fr',
label: 'français',
},
],
// Embedded AV Portal video
image: {
src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg',
alt: 'Climate change and protect nature',
},
alt: 'Image 8',
description: "Kids' Corner",
meta: 'Copyright, Author, Licence for image 8',
embedded_video: {
src: 'https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN',
},
description: 'Climate change and protect nature',
meta: 'Copyright, Author, Licence for embedded media',
icon: {
name: 'video',
size: 'l',
path: '/icons.svg',
},
share_path: '/share#example-image8.jpg',
},
{
// Image
Expand Down

0 comments on commit 69eb680

Please sign in to comment.