React Media LightBox - Part 2

       0

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.

A recap of the first part of react media lightbox is a simple lightbox to go around all kinds of media files like image, video and audio. It is built as a React component with custom hooks like moving to the next slide and moving to previous slide options.

In this blog, we will bring the essential features zoom control, download, fullscreen to enhance the view experience of the media items. Lightbox components provide options for captioning the media items as well. Brought all the features only with material design and there are no dependencies required for the functionalities of the media lightbox.

Adding Caption

Caption the media item to easily identify and recognize the media items while moving around the gallery of items. We will try to bring the caption underneath with white color text which fits best for the lightbox dim background. To do that, the caption key also needs to be passed in the media array.

const data = [
  {
    media: image1,
    type: "IMAGE",
    caption: "Zoom Photo Image",
  },
  {
    media: image2,
    type: "IMAGE",
    caption: "Bubble Splash Image",
  },
  {
    media: video1,
    type: "VIDEO",
    caption: "City Traffic Video",
  },
  {
    media: image3,
    type: "IMAGE",
    caption: "Splendid Nature Image"
  },
  {
    media: image4,
    type: "IMAGE",
    caption: "Wallpaper Cave",
  },
  {
    media: image5,
    type: "IMAGE",
    caption: "Spider Man Image",
  },
  {
    media: audio1,
    type: "AUDIO",
    caption: "Demo Music",
  },
];

Inside the lightbox component, while displaying media items like image, video or audio, we would display h5 elements under the media. If the caption is not given, it will nullify the html elements. 

<h5 className={classes.caption}>
         {mediaItems[ currentSlide ].caption ? mediaItems[ currentSlide ].caption : ""}
</h5>

Css styling for the caption is to have white color text justified center to the media item.

caption: {
      color: "#fff",
      marginTop: -1,
      display: "flex",
      justifyContent: "center",
},

As we are setting the media object for the lightbox component with currentIndex, so when the user moves to the next media item, currentIndex moves over the media Object array and the caption sets up according to it.

Zoom In and Zoom Out Controls

Zoom in controls are required for image and video type of media items. Zoom in helps to see the details of the image and zoom out to have a handy look of the image. Now zoomIn and zoomOut iconButtons with intuitive help of having the zoomIn and zoomOut. Materials icons are used inside the icon button to have it.

<Tooltip title="Zoom In" arrow>
     <IconButton onClick={ZoomIn} className={classes.arrowButton} size="small">
         <ZoomInIcon />
     </IconButton>
</Tooltip>
<Tooltip title="Zoom Out" arrow>
     <IconButton onClick={ZoomOut} className={classes.arrowButton} size="small">
         <ZoomOutIcon />
     </IconButton>
</Tooltip>

Stylings for all lightbox controls will be almost the same having the material icons with white color and background matching the lightbox background image.

arrowButton: {
      color: "#ffffff",
      "&:hover": {
        backgroundColor: "#808080",
      },
      //backgroundColor: "#000000",
},

ZoomIn function increases the scale of the image by 1.1 times when it is zoomed in. Likewise, the zoom out function decreases the scale of the image by 1.1 times.

const ZoomIn = () => {
    setScale(scale * 1.1);
  };
  const ZoomOut = () => {
    setScale(scale / 1.1);
};

scale state is used as part of the transform style property in the container div block.

{mediaItems[ currentSlide ].type === "IMAGE" ? (
	<div style={{ transform: `scale(${scale})` }}>
		  <img src={media} alt="Image Broken" className={classes.lightbox} />
			<h5 className={classes.caption}>
			  {mediaItems[ currentSlide ].caption 
			         ? mediaItems[ currentSlide ].caption : ""}
			</h5>
	  </div>
	   ) : mediaItems[ currentSlide ].type === "VIDEO" ? (
		<div style={{ transform: `scale(${scale})` }}>
			<video className={classes.lightbox} controls>
			  <source src={media} type="video/mp4" />
			  <source src={media} type="video/ogg" />
			</video>
			<h5 className={classes.caption}>
				   {mediaItems[ currentSlide ].caption 
				           ? mediaItems[ currentSlide ].caption : ""}
			</h5>
	    </div>
       )

Full screen Control

Show the whole image or video in a full screen mode.

<Tooltip title="Full Screen" arrow>
       <IconButton onClick={setToFullScreen} className={classes.arrowButton} size="small">
                <FullscreenIcon />
        </IconButton>
</Tooltip>

When setToFullScreen clicked, element reference of the media element will be made to full screen using the requestFullScreen method.

const setToFullScreen = () => {
	    const el = inputRef.current;
	    console.log(el);
	    
	    if (el.requestFullscreen) {
	      el.requestFullscreen();
	    } 
	    else if (el.msRequestFullscreen) {
	      el.msRequestFullscreen();
	    } 
	    else if (el.mozRequestFullScreen) {
	      el.mozRequestFullScreen();
	    } 
	    else if (el.webkitRequestFullscreen) {
	      el.webkitRequestFullscreen();
	    }
  };

Input reference will be taken from the media container, then use the input reference for the requestfullscreen which will provide the full screen mode and pressing esc will land back to the lightbox mode. 

const inputRef = useRef();

<div style={{ display: "contents" }} ref={inputRef}>

Download Control

Downlaod the media items from the gallery will have similar material icon button with the tooltip items. Download control is enclosed with anchor tag so by clicking will download the media items as it suffixed with download attribute. Also anchor tag has the downloadMediaUrl state, it is to fetch the remote media item and make the media as blob url to the anchor tag.  

<a href={downloadMediaUrl} download>
        <Tooltip title="Download" arrow>
               <IconButton className={classes.arrowButton} size="small">
                        <DownloadIcon />
                 </IconButton>
        </Tooltip>
</a>

Fetch the remote media item and get the blob content to create the blob object url. Then it is set to download media url state variable which is re-rendered on the anchor tag href link.

fetch(mediaUrl).then(res => res.blob()).then(data => {
      const blobUrl = URL.createObjectURL(data);
      setDownloadMediaUrl(blobUrl);
 });

The above logic will be done when we open, moving the next media item and moving to the previous media item so that the download media blob url will be set accordingly in the download media control.

Share Control

Share control will help us to share the media item. This icon button will be added to the media control array. 

<Tooltip title="Share" arrow>
          <IconButton onClick={Share} className={classes.arrowButton} size="small">
                      <ShareIcon />
            </IconButton>
</Tooltip>

On click of the media share control, the handler opens the navigator share control. Navigator api opens up the native share window for sharing in email or get the link to it. 

const Share = () => {
    if (navigator.share) {
      navigator.share({
        title: 'Media Share',
        url: media
      }).then(() => {
        console.log('Thanks for sharing!');
      })
        .catch(console.error);
    }
  }

Few of the media controls are specific to the media type. Like zoom in, out, full screen are not applicable for audio items. So we will have an isScalable state variable based on that media controls will be conditionally rendered.

{ isScalable ? 
	<div> 
	   <Tooltip title="Zoom In" arrow>
			<IconButton onClick={ZoomIn} 
			               className={classes.arrowButton} size="small">
				<ZoomInIcon />
			 </IconButton>
	  </Tooltip>
	 <Tooltip title="Zoom Out" arrow>
	  <IconButton onClick={ZoomOut} 
	                 className={classes.arrowButton} size="small">
			<ZoomOutIcon />
	  </IconButton>
	</Tooltip>
	<Tooltip title="Full Screen" arrow>
	  <IconButton onClick={setToFullScreen} 
	                 className={classes.arrowButton} size="small">
		   <FullscreenIcon />
	  </IconButton>
	</Tooltip> </div>
  : null
 }

isScalable state variable will be set based on the media type as video or image. The condition check will be done on the first lightbox show up and the same will be done in the previous and next gallery items chosen.

if (mediaItems[ currentSlide ].type === "VIDEO" 
       || mediaItems[ currentSlide ].type === "IMAGE") 
   {
      setIsScalable(true);
   } 
   else {
     setIsScalable(false);
}
 

Complete lightbox component with the app built on top of the component is made as a workable demo and it is available in the github project. In the workable demo, we have passed remote media items, but it will work with the local media items as well. Lightbox works with all the controls like zoom, download, share options.

Github Reference: https://github.com/devgroves/reactmedialightgallery