diff --git a/fixtures/ghost-kitty.mp4 b/fixtures/ghost-kitty.mp4 new file mode 100644 index 000000000..936349ea5 Binary files /dev/null and b/fixtures/ghost-kitty.mp4 differ diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index 88fc57a82..05cda90b0 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -289,6 +289,7 @@ export class Lightbox extends React.Component { onClick={this.playVideoBound} controls={true} style={styles.object} + key={objectURL} > diff --git a/ts/components/LightboxGallery.md b/ts/components/LightboxGallery.md index ded53f090..a3ec989f1 100644 --- a/ts/components/LightboxGallery.md +++ b/ts/components/LightboxGallery.md @@ -33,29 +33,35 @@ const mediaItems = [ attachment: { contentType: 'video/mp4' }, }, { - objectURL: 'https://placekitten.com/980/800', - contentType: 'image/jpeg', + objectURL: util.mp4ObjectUrlV2, + contentType: 'video/mp4', message: { id: 5 }, - attachment: { contentType: 'image/jpeg' }, + attachment: { contentType: 'video/mp4' }, }, { - objectURL: 'https://placekitten.com/656/540', + objectURL: 'https://placekitten.com/980/800', contentType: 'image/jpeg', message: { id: 6 }, attachment: { contentType: 'image/jpeg' }, }, { - objectURL: 'https://placekitten.com/762/400', + objectURL: 'https://placekitten.com/656/540', contentType: 'image/jpeg', message: { id: 7 }, attachment: { contentType: 'image/jpeg' }, }, { - objectURL: 'https://placekitten.com/920/620', + objectURL: 'https://placekitten.com/762/400', contentType: 'image/jpeg', message: { id: 8 }, attachment: { contentType: 'image/jpeg' }, }, + { + objectURL: 'https://placekitten.com/920/620', + contentType: 'image/jpeg', + message: { id: 9 }, + attachment: { contentType: 'image/jpeg' }, + }, ];
diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index bb78c52fe..5504d695e 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -29,6 +29,9 @@ const txtObjectUrl = makeObjectUrl(txt, 'text/plain'); import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4'; const mp4ObjectUrl = makeObjectUrl(mp4, 'video/mp4'); // @ts-ignore +import mp4v2 from '../../fixtures/ghost-kitty.mp4'; +const mp4ObjectUrlV2 = makeObjectUrl(mp4v2, 'video/mp4'); +// @ts-ignore import png from '../../fixtures/freepngs-2cd43b_bed7d1327e88454487397574d87b64dc_mv2.png'; // 800×1200 const pngObjectUrl = makeObjectUrl(png, 'image/png'); @@ -69,6 +72,8 @@ export { gifObjectUrl, mp4, mp4ObjectUrl, + mp4v2, + mp4ObjectUrlV2, png, pngObjectUrl, txt,