Ensure that multi-video lightbox scrolling changes video
This commit is contained in:
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>
|
||||||
|
|
|
@ -33,29 +33,35 @@ const mediaItems = [
|
||||||
attachment: { contentType: 'video/mp4' },
|
attachment: { contentType: 'video/mp4' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
objectURL: 'https://placekitten.com/980/800',
|
objectURL: util.mp4ObjectUrlV2,
|
||||||
contentType: 'image/jpeg',
|
contentType: 'video/mp4',
|
||||||
message: { id: 5 },
|
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',
|
contentType: 'image/jpeg',
|
||||||
message: { id: 6 },
|
message: { id: 6 },
|
||||||
attachment: { contentType: 'image/jpeg' },
|
attachment: { contentType: 'image/jpeg' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
objectURL: 'https://placekitten.com/762/400',
|
objectURL: 'https://placekitten.com/656/540',
|
||||||
contentType: 'image/jpeg',
|
contentType: 'image/jpeg',
|
||||||
message: { id: 7 },
|
message: { id: 7 },
|
||||||
attachment: { contentType: 'image/jpeg' },
|
attachment: { contentType: 'image/jpeg' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
objectURL: 'https://placekitten.com/920/620',
|
objectURL: 'https://placekitten.com/762/400',
|
||||||
contentType: 'image/jpeg',
|
contentType: 'image/jpeg',
|
||||||
message: { id: 8 },
|
message: { id: 8 },
|
||||||
attachment: { contentType: 'image/jpeg' },
|
attachment: { contentType: 'image/jpeg' },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
objectURL: 'https://placekitten.com/920/620',
|
||||||
|
contentType: 'image/jpeg',
|
||||||
|
message: { id: 9 },
|
||||||
|
attachment: { contentType: 'image/jpeg' },
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
<div style={{ position: 'relative', width: '100%', height: 500 }}>
|
||||||
|
|
|
@ -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…
Reference in New Issue