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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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 = {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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"
  },
  {
    "text": "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'
    />
  );
};