react-image-lighbox doesn't opens video or text. How to make it work with videos as well

Question

I am using react-image-lightbox for carousel in my app. How to make this component identify the type of the content like Video, Images or PDFs,Excels, or Texts. Currently it is working with images only. Please help. Thanks

Answer 1

We need to filter the type according to extension type and then pass it to carousel. For example:

getCrouselItems(documents){
var items=[];
documents.forEach(element => {
  switch(CommonUtils.getFileFormat(element)){
    case "image":
    items.push(AjaxUtils.getImageURL(element));
        break;
    case "video":
    var videoUrl=AjaxUtils.getImageURL(element);
    items.push(<video className="attachments" controls><source src={videoUrl}/>
            </video>)
        break;
    case "pdf":
    items.push(<img className="attachments" src={pdf}></img>)
        break;
    case "excel":
    items.push(<img className="attachments" src={excel}></img>)
        break;
    case "word":
    items.push(<img className="attachments" src={text}></img>)
        break;
    case "others":
    items.push(<img className="attachments" src={excel}></img>)
        break;
    default:
  }
});
 return items;
}