Media Library

The Media Library displays a collection of images/videos in an organized grid.

<MediaLibrary
  loading={false}
  size={'sm'}
  data={[
    {
      title: 'Appreciate Great',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-appreci8great.mp4',
      value: 1,
    },
    {
      title: 'Elevate Others\r\n',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
      value: 2,
    },
    {
      title: '3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-barn-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-barn-eb.jpg',
      value: 3,
    },
  ]}
/>

Props

Prop	Type	Default	Description
size	'auto' \| 'sm' \| 'md'	'auto'	Defines the number of columns the component will display the media cards. sm = 2, md = 4, auto = display 2 columns when the viewport is less that 768px & 4 columns when greater than or equal to 768px
pageSize	number	5	The number of the cards that will be visible on screen.
variant	0	button	Media library with scrolling ability when the type is set to scroll.
loading	bool	false	If true, the Skeleton loading cards will be visible on screen as per the page size.
showMore	bool	false	If true, show the "Show more" button
data	Array<{ title: string; mediaType: 'video' \| 'img'; mediaUrl?: string; thumbNailUrl?: string; value?: number; }>	[]	Data containing the media items in the specific format
onShowMoreClick	func		specific to MediaLibrary, Function that is called when the Show more button is clicked.
data-testid	string		data-testid added to the root element of the component
onMediaSelect	func		Callback fired when Media card is selected.
selectedMedia	{ title: string; mediaType: 'video' \| 'img'; mediaUrl?: string; thumbNailUrl?: string; value?: number; } \| null		Render selected media item if passed.

Examples

Media Library with pagination

() => {
  const mediaData = [
    {
      title: 'Appreciate Great',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-appreci8great.mp4',
      value: 4,
    },
    {
      title: 'Elevate Others\r\n',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
      value: 5,
    },
    {
      title: '3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-barn-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-barn-eb.jpg',
      value: 6,
    },
    {
      title: 'Celebrate 3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-car-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-car-eb.jpg',
    },
    {
      title: 'Celebrate 5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-stamp-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-stamp-eb.jpg',
    },
    {
      title: '5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-track-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-track-eb.jpg',
    },
    {
      title: 'Race Track 3',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-3.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-3.mp4',
    },
    {
      title: 'Race Track 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-5.mp4',
    },
    {
      title: 'Lots of Numbers 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lots_of_5s.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lots_of_5s.mp4',
    },
    {
      title: 'Number Fun 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-5.mp4',
    },
    {
      title: 'Flipper 14 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-14.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-14.mp4',
    },
    {
      title: '15 Year',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-15-wall-eb.jpg',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-15-wall-eb.jpg',
    },
    {
      title: 'Number Fun 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-15.mp4',
    },
    {
      title: 'Beautiful Numbers 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/beautifulNumbers-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/beautifulNumbers-15.mp4',
    },
    {
      title: 'Lots of Numbers 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lotsOfNumbers-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lotsOfNumbers-15.mp4',
    },
    {
      title: 'Flipper 15 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-15.mp4',
    },
    {
      title: 'Race Track 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-15.mp4',
    },
    {
      title: 'Flipper 16 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-16.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-16.mp4',
    },
    {
      title: 'Flipper 17 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-17.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-17.mp4',
    },
  ];

  const pageSize = 8;
  const [page, setPage] = React.useState(1);
  const [itemData, setItemData] = React.useState([]);
  const totalPages = mediaData.length % pageSize;
  const [loading, setLoading] = React.useState(false);
  const [showMore, setShowMore] = React.useState(true);

  React.useEffect(() => {
    if (page <= totalPages) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        const pageData = mediaData.slice(0, pageSize * page);
        setItemData(pageData);
        setLoading(false);
        setShowMore(!(page + 1 > totalPages));
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    }
  }, [page]);

  const onShowMoreClick = () => {
    setPage(page + 1);
  };

  return (
    <MediaLibrary
      pageSize={pageSize}
      loading={loading}
      data={itemData}
      onShowMoreClick={onShowMoreClick}
      showMore={showMore}
    />
  );
};

Media Library with Selected media item

() => {
  const mediaData = [
    {
      title: 'Appreciate Great',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-appreci8great.mp4',
      value: 4,
    },
    {
      title: 'Elevate Others\r\n',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
      value: 5,
    },
    {
      title: '3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-barn-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-barn-eb.jpg',
      value: 6,
    },
    {
      title: 'Celebrate 3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-car-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-car-eb.jpg',
    },
  ];

  const defaultSelectedMedia = {
    title: 'Elevate Others\r\n',
    mediaType: 'video',
    thumbNailUrl:
      'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
    mediaUrl:
      'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
    value: 5,
  };

  const pageSize = 8;
  const [page, setPage] = React.useState(1);
  const [itemData, setItemData] = React.useState([]);
  const totalPages = mediaData.length % pageSize;
  const [loading, setLoading] = React.useState(false);
  const [showMore, setShowMore] = React.useState(true);
  const [selected, setSelected] = React.useState(defaultSelectedMedia);

  React.useEffect(() => {
    if (page <= totalPages) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        const pageData = mediaData.slice(0, pageSize * page);
        setItemData(pageData);
        setLoading(false);
        setShowMore(!(page + 1 > totalPages));
      }, 500 + Math.floor(Math.random() * 2000));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    }
  }, [page]);

  const onShowMoreClick = () => {
    setPage(page + 1);
  };

  const onMediaSelect = (mediaItem) => {
    setSelected(mediaItem);
  };

  return (
    <MediaLibrary
      pageSize={pageSize}
      loading={loading}
      data={itemData}
      onShowMoreClick={onShowMoreClick}
      showMore={showMore}
      onMediaSelect={onMediaSelect}
      selectedMedia={selected}
    />
  );
};

Media Library with Failed State

() => {
  const mediaData = [
    {
      title: 'Appreciate Great',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great1.jpg',
      mediaUrl: '',
      value: 4,
    },
  ];

  return <MediaLibrary data={mediaData} size={'sm'} />;
};

Media Library with Gifs

() => {
  const mediaData = [
    {
      title: 'Appreciate Great',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/thank_you_x2.jpg',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/thank_you_x2.gif',
      largeUrl: '',
      mediaUrl: '',
      value: 4,
    },
    {
      title: 'passover dove',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Static/passover_dove.jpg',
      largeUrl: '',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/passover_dove.gif',
      mediaUrl: '',
      value: 5,
    },
    {
      title: 'gratitude day',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/gratitude_day.gif',
      largeUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Static/gratitude_day.gif',
      normalUrl: '',
      mediaUrl: '',
      value: 5,
    },
  ];

  return <MediaLibrary data={mediaData} size={'sm'} />;
};

Media Library Infinity Scroll

() => {
  const mediaData = [
    {
      title: 'Appreciate Great',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-appreci8great.mp4',
      value: 4,
    },
    {
      title: 'Elevate Others\r\n',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
      value: 5,
    },
    {
      title: '3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-barn-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-barn-eb.jpg',
      value: 6,
    },
    {
      title: 'Celebrate 3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-car-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-car-eb.jpg',
    },
    {
      title: 'Celebrate 5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-stamp-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-stamp-eb.jpg',
    },
    {
      title: '5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-track-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-track-eb.jpg',
    },
    {
      title: 'Race Track 3',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-3.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-3.mp4',
    },
    {
      title: 'Race Track 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-5.mp4',
    },
    {
      title: 'Lots of Numbers 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lots_of_5s.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lots_of_5s.mp4',
    },
    {
      title: 'Number Fun 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-5.mp4',
    },
    {
      title: 'Flipper 14 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-14.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-14.mp4',
    },
    {
      title: '15 Year',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-15-wall-eb.jpg',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-15-wall-eb.jpg',
    },
    {
      title: 'Number Fun 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-15.mp4',
    },
    {
      title: 'Beautiful Numbers 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/beautifulNumbers-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/beautifulNumbers-15.mp4',
    },
    {
      title: 'Lots of Numbers 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lotsOfNumbers-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lotsOfNumbers-15.mp4',
    },
    {
      title: 'Flipper 15 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-15.mp4',
    },
    {
      title: 'Race Track 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-15.mp4',
    },
    {
      title: 'Flipper 16 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-16.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-16.mp4',
    },
    {
      title: 'Appreciate Great',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-appreci8great.mp4',
      value: 4,
    },
    {
      title: 'Elevate Others\r\n',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
      value: 5,
    },
    {
      title: '3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-barn-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-barn-eb.jpg',
      value: 6,
    },
    {
      title: 'Celebrate 3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-car-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-car-eb.jpg',
    },
    {
      title: 'Celebrate 5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-stamp-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-stamp-eb.jpg',
    },
    {
      title: '5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-track-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-track-eb.jpg',
    },
    {
      title: 'Race Track 3',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-3.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-3.mp4',
    },
    {
      title: 'Race Track 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-5.mp4',
    },
    {
      title: 'Lots of Numbers 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lots_of_5s.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lots_of_5s.mp4',
    },
    {
      title: 'Appreciate Great',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-appreci8great.mp4',
      value: 4,
    },
    {
      title: 'Elevate Others\r\n',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
      value: 5,
    },
    {
      title: '3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-barn-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-barn-eb.jpg',
      value: 6,
    },
    {
      title: 'Celebrate 3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-car-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-car-eb.jpg',
    },
    {
      title: 'Celebrate 5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-stamp-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-stamp-eb.jpg',
    },
    {
      title: '5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-track-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-track-eb.jpg',
    },
    {
      title: 'Race Track 3',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-3.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-3.mp4',
    },
    {
      title: 'Race Track 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-5.mp4',
    },
    {
      title: 'Lots of Numbers 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lots_of_5s.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lots_of_5s.mp4',
    },
    {
      title: 'Number Fun 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-5.mp4',
    },
    {
      title: 'Flipper 14 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-14.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-14.mp4',
    },
    {
      title: '15 Year',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-15-wall-eb.jpg',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-15-wall-eb.jpg',
    },
    {
      title: 'Number Fun 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-15.mp4',
    },
    {
      title: 'Beautiful Numbers 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/beautifulNumbers-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/beautifulNumbers-15.mp4',
    },
    {
      title: 'Lots of Numbers 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lotsOfNumbers-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lotsOfNumbers-15.mp4',
    },
    {
      title: 'Flipper 15 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-15.mp4',
    },
    {
      title: 'Race Track 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-15.mp4',
    },
    {
      title: 'Flipper 16 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-16.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-16.mp4',
    },
    {
      title: 'Appreciate Great',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-appreci8great.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-appreci8great.mp4',
      value: 4,
    },
    {
      title: 'Elevate Others\r\n',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/thumbnails/oct-ec-elevateothers.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/0001543530/Performance/eCards-en_US/Mobile/oct-ec-elevateothers.mp4',
      value: 5,
    },
    {
      title: '3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-barn-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-barn-eb.jpg',
      value: 6,
    },
    {
      title: 'Celebrate 3 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-3-car-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-3-car-eb.jpg',
    },
    {
      title: 'Celebrate 5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-stamp-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-stamp-eb.jpg',
    },
    {
      title: '5 Year',
      mediaType: 'img',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-5-track-eb.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-5-track-eb.jpg',
    },
    {
      title: 'Race Track 3',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-3.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-3.mp4',
    },
    {
      title: 'Race Track 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/Racetrack-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/Racetrack-5.mp4',
    },
    {
      title: 'Lots of Numbers 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/lots_of_5s.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/lots_of_5s.mp4',
    },
    {
      title: 'Number Fun 5',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-5.jpg',
      mediaUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-5.mp4',
    },
    {
      title: 'Flipper 14 Years',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/flipper-14.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/flipper-14.mp4',
    },
    {
      title: '15 Year',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails-eb/milestone-15-wall-eb.jpg',
      normalUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/eCards/milestone-15-wall-eb.jpg',
    },
    {
      title: 'Number Fun 15',
      mediaType: 'video',
      thumbNailUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Thumbnails/numberFun-15.jpg',
      videoUrl:
        'https://oct.assets.appreciatehub.com/webresources/documentum/PublishEProduct/en_US/eProducts/eCards/Mobile/numberFun-15.mp4',
    },
  ];

  const pageSize = 8;
  const [page, setPage] = React.useState(1);
  const [itemData, setItemData] = React.useState([]);
  const totalPages = Math.ceil(mediaData.length / pageSize);
  const [loading, setLoading] = React.useState(false);
  const [showMore, setShowMore] = React.useState(true);

  React.useEffect(() => {
    if (page <= totalPages) {
      setLoading(true);
      const timeoutId = setTimeout(() => {
        const pageData = mediaData.slice(0, pageSize * page);
        setItemData(pageData);
        setLoading(false);
        setShowMore(!(page + 1 > totalPages));
      }, 500 + Math.floor(Math.random() * 10));
      return () => {
        clearTimeout(timeoutId);
        setLoading(false);
      };
    }
  }, [page]);

  const onShowMoreClick = () => {
    setPage(page + 1);
  };

  return (
    <MediaLibrary
      pageSize={pageSize}
      loading={loading}
      data={itemData}
      onShowMoreClick={onShowMoreClick}
      showMore={showMore}
      variant="scroll"
    />
  );
};