If comment media is full card, it should ignore comment.thumbnailUrl

[estebanabaroa]

Sometimes full card images have comment.thumbnailUrl defined. For example this post https://plebbitapp.eth.limo/#/p/reddit-screenshots.eth/c/QmdU3T9ApmeVeX7jG3v3ay1YMPbKsLFhj3xRqjCMCGeiqy

This causes imgur images to not be full card:

So if the comment media is full card, it should actually ignore comment.thumbnailUrl

The new function should be something like:

import extName from 'ext-name' // https://www.npmjs.com/package/ext-name

const getCommentMediaInfo = (comment) => {
  if (!comment?.link) {
    return
  }

  const mime = extName(new URL(comment.link).pathname.replace('/', '')).mime

  if (mime.startsWith('image') {
    return {url: comment.link, type: 'image'}
  }
  if (mime.startsWith('video') {
    return {url: comment.link, type: 'video'}
  }
  if (mime.startsWith('audio') {
    return {url: comment.link, type: 'audio'}
  }
}

const commentMediaInfo = getCommentMediaInfo(comment)

const mediaIsFullCard = isCard && commentMediaInfo

// should not have full card media and thumbnail at the same time
const hasThumbnail = comment?.thumbnailUrl && !mediaIsFullCard
const thumbnailUrl = hasThumbnail ? comment.thumbnailUrl : undefined

let commentMedia
if (commentMediaInfo?.type === 'image') {
  commentMedia = <img fullCard={mediaIsFullCard} src={comment.link}/>
}
if (commentMediaInfo?.type === 'video') {
  commentMedia = <video fullCard={mediaIsFullCard} src={comment.link}/>
}
if (commentMediaInfo?.type === 'audio') {
  commentMedia = <audio fullCard={mediaIsFullCard} src={comment.link}/>
}
// only classic and compact have placeholder images/icons, card does not have placeholder
// the placeholders are different on classic and compact and also different based on that type of post it is
if (!isCard && !commentMedia) {
  commentMedia = <img src={placeholderImage}/>
}