Thumbnail Generation

Learn how you can show a thumbnail preview of an image or video.

The Thumbnail Generation extension will help you generate a thumbnail preview of an image or a video message.

Settings

  1. Login to the CometChat Dashboard
  2. Go to Extensions page simply add the Thumbnail Generation extension.

How does it work?

We generate a small, medium and large thumbnail for every image and video.

The links to these thumbnails are then provided in the metadata of the message as shown below:

"@injected": {
  "extensions": {
    "thumbnail-generation": {
      "url_small": "https://data-eu.cometchat.io/...png",
      "url_medium": "https://data-eu.cometchat.io/...png",
      "url_large": "https://data-eu.cometchat.io/...png"
    }
  }
}

If the data is missing, it means that the extension has timed out.

Implementation

You can make use of the getMetadata() method to extract the thumbnail details for a message.

var metadata = message.getMetadata();
if (metadata != null) {
  var injectedObject = metadata["@injected"];
  if (injectedObject != null && injectedObject.hasOwnProperty("extensions")) {
    var extensionsObject = injectedObject["extensions"];
    if (
      extensionsObject != null &&
      extensionsObject.hasOwnProperty("thumbnail-generation")
    ) {
      var thumbnailGenerationObject = extensionsObject["thumbnail-generation"];
      var smallUrl = thumbnailGenerationObject["url_small"];
      var mediumUrl = thumbnailGenerationObject["url_medium"];
      var largeUrl = thumbnailGenerationObject["url_large"];
    }
  }
}
JSONObject metadata = message.getMetadata();
if (metadata != null) {
  JSONObject injectedObject = metadata.getJSONObject("@injected");
  if (injectedObject != null && injectedObject.has("extensions")) {
    JSONObject extensionsObject = injectedObject.getJSONObject("extensions");
    if (extensionsObject != null && extensionsObject.has("thumbnail-generation"))
        {
          JSONObject thumbnailGenerationObject = extensionsObject.getJSONObject("thumbnail-generation");
          String smallUrl = thumbnailGenerationObject.getString("url_small");
          String mediumUrl = thumbnailGenerationObject.getString("url_medium");
          String largeUrl = thumbnailGenerationObject.getString("url_large");

        }
    }
}
if (metadata != null) {
  if (metadata.has("@injected")) {
     val injectedJSONObject = metadata.getJSONObject("@injected")
     if (injectedJSONObject != null && injectedJSONObject.has("extensions")) {
     val extensionsObject = injectedJSONObject.getJSONObject("extensions")

if (extensionsObject != null && extensionsObject.has("thumbnail-generation")){ val thumbnailGenerationObject = extensionsObject.getJSONObject("thumbnail-generation")

     if (thumbnailGenerationObject.has("url_small"))
  val url_small= thumbnailGenerationObject.getString("url_small")
     if (thumbnailGenerationObject.has("url_medium"))
  val url_medium= thumbnailGenerationObject.getString("url_medium")
     if (thumbnailGenerationObject.has("url_large"))
  val url_large= thumbnailGenerationObject.getString("url_large")
     }
    }
   }
  }
var metadata : [String : Any]? = textMessage.metaData
  if metadata != nil {
            
     var injectedObject : [String : Any]? = (metadata?["@injected"] as? [String : Any])!
            
     if injectedObject != nil && (injectedObject!["extensions"] != nil){
                
        var extensionsObject : [String : Any]? = injectedObject?["extensions"] as? [String : Any]
                
        if extensionsObject != nil && extensionsObject?["thumbnail-generation"] != nil {
                    
          var thumbnailGenerationObject = extensionsObject?["thumbnail-generation"] as! [String :  Any]
          let smallUrl = thumbnailGenerationObject["url_small"]
          let mediumUrl = thumbnailGenerationObject["url_medium"]
          let largeUrl = thumbnailGenerationObject["url_large"]
                    
        }
     }
            
  }

🚧

While thumbnails for images are usually generated within milliseconds, generating video thumbnails might take a little longer. We recommending checking if the file exists before showing the preview. You can set a simple timer to check every second if the difference between message sentAt and the current time is less than 5 seconds.


Did this page help you?