signal-desktop/ts/components/Lightbox.md

Image (supported format)

const noop = () => {};

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <Lightbox
    objectURL="https://placekitten.com/800/600"
    contentType="image/jpeg"
    onSave={noop}
  />
</div>;

Image (unsupported format)

const noop = () => {};

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <Lightbox objectURL="foo.tif" contentType="image/tiff" onSave={noop} />
</div>;

Video (supported format)

const noop = () => {};

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <Lightbox
    objectURL="fixtures/pixabay-Soap-Bubble-7141.mp4"
    contentType="video/mp4"
    onSave={noop}
  />
</div>;

Video (unsupported format)

const noop = () => {};

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <Lightbox objectURL="foo.mov" contentType="video/quicktime" onSave={noop} />
</div>;

Unsupported file format

const noop = () => {};

<div style={{ position: 'relative', width: '100%', height: 600 }}>
  <Lightbox
    objectURL="tsconfig.json"
    contentType="application/json"
    onSave={noop}
  />
</div>;