session-desktop/Lightbox.md at a3a7f4a6211492a61ffc4daed0087cd07ef50940 - session-desktop - Lokinet Gitea

You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1.3 KiB

Raw Blame History

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>;