Ensure that multi-video lightbox scrolling changes video

pull/272/head
Scott Nonnenberg 6 years ago
parent 523c65a1b7
commit f5954db711

Binary file not shown.

@ -289,6 +289,7 @@ export class Lightbox extends React.Component<Props> {
onClick={this.playVideoBound} onClick={this.playVideoBound}
controls={true} controls={true}
style={styles.object} style={styles.object}
key={objectURL}
> >
<source src={objectURL} /> <source src={objectURL} />
</video> </video>

@ -32,28 +32,34 @@ const mediaItems = [
message: { id: 4 }, message: { id: 4 },
attachment: { contentType: 'video/mp4' }, attachment: { contentType: 'video/mp4' },
}, },
{
objectURL: util.mp4ObjectUrlV2,
contentType: 'video/mp4',
message: { id: 5 },
attachment: { contentType: 'video/mp4' },
},
{ {
objectURL: 'https://placekitten.com/980/800', objectURL: 'https://placekitten.com/980/800',
contentType: 'image/jpeg', contentType: 'image/jpeg',
message: { id: 5 }, message: { id: 6 },
attachment: { contentType: 'image/jpeg' }, attachment: { contentType: 'image/jpeg' },
}, },
{ {
objectURL: 'https://placekitten.com/656/540', objectURL: 'https://placekitten.com/656/540',
contentType: 'image/jpeg', contentType: 'image/jpeg',
message: { id: 6 }, message: { id: 7 },
attachment: { contentType: 'image/jpeg' }, attachment: { contentType: 'image/jpeg' },
}, },
{ {
objectURL: 'https://placekitten.com/762/400', objectURL: 'https://placekitten.com/762/400',
contentType: 'image/jpeg', contentType: 'image/jpeg',
message: { id: 7 }, message: { id: 8 },
attachment: { contentType: 'image/jpeg' }, attachment: { contentType: 'image/jpeg' },
}, },
{ {
objectURL: 'https://placekitten.com/920/620', objectURL: 'https://placekitten.com/920/620',
contentType: 'image/jpeg', contentType: 'image/jpeg',
message: { id: 8 }, message: { id: 9 },
attachment: { contentType: 'image/jpeg' }, attachment: { contentType: 'image/jpeg' },
}, },
]; ];

@ -29,6 +29,9 @@ const txtObjectUrl = makeObjectUrl(txt, 'text/plain');
import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4'; import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4';
const mp4ObjectUrl = makeObjectUrl(mp4, 'video/mp4'); const mp4ObjectUrl = makeObjectUrl(mp4, 'video/mp4');
// @ts-ignore // @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'; import png from '../../fixtures/freepngs-2cd43b_bed7d1327e88454487397574d87b64dc_mv2.png';
// 800×1200 // 800×1200
const pngObjectUrl = makeObjectUrl(png, 'image/png'); const pngObjectUrl = makeObjectUrl(png, 'image/png');
@ -69,6 +72,8 @@ export {
gifObjectUrl, gifObjectUrl,
mp4, mp4,
mp4ObjectUrl, mp4ObjectUrl,
mp4v2,
mp4ObjectUrlV2,
png, png,
pngObjectUrl, pngObjectUrl,
txt, txt,

Loading…
Cancel
Save