signal-desktop/ts/components/Lightbox.md
Scott Nonnenberg 2988da0981 Turn on all of Microsoft's recommend lint rules
Biggest changes forced by this: alt tags for all images, resulting in
new strings added to messages.json, and a new i18n paramter/prop added
in a plot of places.

Another change of note is that there are two new tslint.json files under
ts/test and ts/styleguide to relax our rules a bit there. This required
a change to our package.json script, as manually specifying the config
file there made it ignore our tslint.json files in subdirectories
2018-05-23 16:26:47 -07:00

1.3 KiB

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}
    i18n={util.i18n}
  />
</div>;

Image (unsupported format)

const noop = () => {};

<div style={{ position: 'relative', width: '100%', height: 500 }}>
  <Lightbox
    objectURL="foo.tif"
    contentType="image/tiff"
    onSave={noop}
    i18n={util.i18n}
  />
</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}
    i18n={util.i18n}
  />
</div>;

Video (unsupported format)

const noop = () => {};

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

Unsupported file format

const noop = () => {};

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