signal-desktop/ts/components/conversation/media-gallery/MediaGallery.md

Empty states for missing media and documents

<div style={{width: '100%', height: 300}}>
  <MediaGallery
    i18n={window.i18n}
    media={[]}
    documents={[]}
  />
</div>

Media gallery with media and documents

const DAY_MS = 24 * 60 * 60 * 1000;
const MONTH_MS = 30 * DAY_MS;
const YEAR_MS = 12 * MONTH_MS;
const tokens = ['foo', 'bar', 'baz', 'qux', 'quux'];
const fileExtensions = ['docx', 'pdf', 'txt', 'mp3', 'wmv', 'tiff'];
const createRandomMessage = ({startTime, timeWindow} = {}) => (props) => {
  const now = Date.now();
  const fileName =
    `${_.sample(tokens)}${_.sample(tokens)}.${_.sample(fileExtensions)}`;
  return {
    id: _.random(now).toString(),
    received_at: _.random(startTime, startTime + timeWindow),
    attachments: [{
      data: null,
      fileName,
      size: _.random(1000, 1000 * 1000 * 50),
    }],

    objectURL: `https://placekitten.com/${_.random(50, 150)}/${_.random(50, 150)}`,
    ...props,
  };
};

const createRandomMessages = ({startTime, timeWindow}) =>
  _.range(_.random(5, 10)).map(createRandomMessage({startTime, timeWindow}));


const startTime = Date.now();
const messages = _.sortBy(
  [
    ...createRandomMessages({
      startTime,
      timeWindow: DAY_MS,
    }),
    ...createRandomMessages({
      startTime: startTime - DAY_MS,
      timeWindow: DAY_MS,
    }),
    ...createRandomMessages({
      startTime: startTime - 3 * DAY_MS,
      timeWindow: 3 * DAY_MS,
    }),
    ...createRandomMessages({
      startTime: startTime - 30 * DAY_MS,
      timeWindow: 15 * DAY_MS,
    }),
    ...createRandomMessages({
      startTime: startTime - 365 * DAY_MS,
      timeWindow: 300 * DAY_MS,
    }),
  ],
  message => -message.received_at
);

<MediaGallery
  i18n={window.i18n}
  media={messages}
  documents={messages}
/>