fix: always use core viewType for compatibility

Author: nicodh

packages/frontend/src/components/attachment/Attachment.tsx

@@ -2,60 +2,30 @@ import mimeTypes from 'mime-types'
 import { Type } from '../../backend-com'
 import { runtime } from '@deltachat-desktop/runtime-interface'
 
-/* Section - Data Copied in part from Signal */
-// Supported media types in google chrome
-// See: https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
-const SUPPORTED_IMAGE_MIME_TYPES = Object.freeze([
-  'image/bmp',
-  'image/gif',
-  'image/jpeg',
-  'image/jpg',
-  'image/svg+xml',
-  'image/webp',
-  'image/x-xbitmap',
-  // ICO
-  'image/vnd.microsoft.icon',
-  'image/ico',
-  'image/icon',
-  'image/x-icon',
-  // PNG
-  'image/apng',
-  'image/png',
-  // for opening avatars
-  'image/x',
-])
-// See: https://www.chromium.org/audio-video
-const SUPPORTED_VIDEO_MIME_TYPES = Object.freeze([
-  'video/mp4',
-  'video/ogg',
-  'video/webm',
-  'video/quicktime',
-])
-/* EndSection - Data Copied in part from Signal */
-
-export function isImage(filemime: string | null) {
-  return SUPPORTED_IMAGE_MIME_TYPES.includes(filemime || '')
+export function isImage(viewType: Type.Viewtype | null) {
+  return viewType === 'Image' || viewType === 'Gif'
 }
 
 export function hasAttachment(attachment: MessageTypeAttachmentSubset | null) {
   return attachment && attachment.file
 }
 
-export function isVideo(filemime: string | null) {
-  return SUPPORTED_VIDEO_MIME_TYPES.includes(filemime || '')
-}
-
-export function isAudio(filemime: string | null) {
-  if (!filemime) return false
-  return filemime.startsWith('audio/')
-}
+// note that we rely on the viewTypes from core here to make sure all Deltachat clients
+// display the same attachment types in the same way - although this could result in not
+// showing some attachments even if we could show them (like svg for example)
+// see guess_msgtype_from_path_suffix in https://github.com/chatmail/core/blob/main/src/message.rs
+const MEDIA_VIEW_TYPES = ['Image', 'Gif', 'Video', 'Audio', 'Voice'] as const
 
-export function isDisplayableByFullscreenMedia(filemime: string | null) {
-  return isImage(filemime) || isAudio(filemime) || isVideo(filemime)
+export function isDisplayableByFullscreenMedia(viewType: Type.Viewtype | null) {
+  return MEDIA_VIEW_TYPES.includes(
+    viewType as (typeof MEDIA_VIEW_TYPES)[number]
+  )
 }
 
-export function isGenericAttachment(filemime: string | null) {
-  return !(isImage(filemime) || isVideo(filemime) || isAudio(filemime))
+export function isGenericAttachment(viewType: Type.Viewtype | null) {
+  return !MEDIA_VIEW_TYPES.includes(
+    viewType as (typeof MEDIA_VIEW_TYPES)[number]
+  )
 }
 
 export function getExtension({

packages/frontend/src/components/attachment/galleryAttachment.tsx

@@ -6,13 +6,7 @@ import {
   onDownload,
   openWebxdc,
 } from '../message/messageFunctions'
-import {
-  isImage,
-  isVideo,
-  isAudio,
-  getExtension,
-  dragAttachmentOut,
-} from './Attachment'
+import { isImage, getExtension, dragAttachmentOut } from './Attachment'
 import Timestamp from '../conversations/Timestamp'
 import { makeContextMenu, OpenContextMenu } from '../ContextMenu'
 import { runtime } from '@deltachat-desktop/runtime-interface'
@@ -53,7 +47,7 @@ const contextMenuFactory = (
   openDialog: OpenDialog,
   jumpToMessage: JumpToMessage
 ) => {
-  const showCopyImage = message.viewType === 'Image'
+  const showCopyImage = isImage(message.viewType)
   const tx = window.static_translate
   const { id: msgId, viewType } = message
   return [
@@ -235,7 +229,7 @@ export function ImageAttachment({
       accountId
     )
     const { file, fileMime } = message
-    const hasSupportedFormat = isImage(fileMime)
+    const hasSupportedFormat = isImage(message.viewType)
     const isBroken = !file || !hasSupportedFormat
 
     return (
@@ -324,7 +318,7 @@ export function VideoAttachment({
       accountId
     )
     const { file, fileMime } = message
-    const hasSupportedFormat = isVideo(fileMime)
+    const hasSupportedFormat = message.viewType === 'Video'
     const isBroken = !file || !hasSupportedFormat
     return (
       <button
@@ -416,7 +410,8 @@ export function AudioAttachment({
     )
     const { file, fileMime } = message
     const src = runtime.transformBlobURL(file || '')
-    const hasSupportedFormat = isAudio(fileMime)
+    const hasSupportedFormat =
+      message.viewType === 'Audio' || message.viewType === 'Voice'
     const isBroken = !file || !hasSupportedFormat
     return (
       <div

packages/frontend/src/components/attachment/messageAttachment.tsx

@@ -6,8 +6,6 @@ import { openAttachmentInShell } from '../message/messageFunctions'
 import {
   isDisplayableByFullscreenMedia,
   isImage,
-  isVideo,
-  isAudio,
   getExtension,
   dragAttachmentOut,
   MessageTypeAttachmentSubset,
@@ -50,7 +48,7 @@ export default function Attachment({
   const onClickAttachment = (ev: any) => {
     if (message.viewType === 'Sticker') return
     ev.stopPropagation()
-    if (isDisplayableByFullscreenMedia(message.fileMime)) {
+    if (isDisplayableByFullscreenMedia(message.viewType)) {
       openDialog(FullscreenMedia, {
         msg: message,
         neighboringMedia: NeighboringMediaMode.Chat,
@@ -126,7 +124,7 @@ export default function Attachment({
   const withCaption = Boolean(text)
   // For attachments which aren't full-frame
   const withContentBelow = withCaption
-  if (isImage(message.fileMime) || message.viewType === 'Sticker') {
+  if (isImage(message.viewType) || message.viewType === 'Sticker') {
     if (!message.file) {
       return (
         <div
@@ -158,7 +156,7 @@ export default function Attachment({
         />
       </button>
     )
-  } else if (isVideo(message.fileMime)) {
+  } else if (message.viewType === 'Video') {
     if (!message.file) {
       return (
         <button
@@ -191,7 +189,7 @@ export default function Attachment({
         />
       </div>
     )
-  } else if (isAudio(message.fileMime)) {
+  } else if (message.viewType === 'Audio' || message.viewType === 'Voice') {
     return (
       <div
         className={classNames(
@@ -299,7 +297,7 @@ export function DraftAttachment({
   if (!attachment) {
     return null
   }
-  if (isImage(attachment.fileMime)) {
+  if (isImage(attachment.viewType)) {
     return (
       <div className={classNames('message-attachment-media')}>
         <img
@@ -308,7 +306,7 @@ export function DraftAttachment({
         />
       </div>
     )
-  } else if (isVideo(attachment.fileMime)) {
+  } else if (attachment.viewType === 'Video') {
     return (
       <div className={classNames('message-attachment-media')}>
         <video
@@ -318,7 +316,10 @@ export function DraftAttachment({
         />
       </div>
     )
-  } else if (isAudio(attachment.fileMime)) {
+  } else if (
+    attachment.viewType === 'Audio' ||
+    attachment.viewType === 'Voice'
+  ) {
     return <AudioPlayer src={runtime.transformBlobURL(attachment.file || '')} />
   } else if (isViewTypeWebxdc) {
     const iconUrl = runtime.getWebxdcIconURL(selectedAccountId(), attachment.id)

packages/frontend/src/components/dialogs/FullscreenMedia.tsx

@@ -6,7 +6,7 @@ import Dialog from '../Dialog'
 import { IconButton } from '../Icon'
 import { onDownload } from '../message/messageFunctions'
 import { runtime } from '@deltachat-desktop/runtime-interface'
-import { isImage, isVideo, isAudio } from '../attachment/Attachment'
+
 import { getLogger } from '../../../../shared/logger'
 import { gitHubIssuesUrl } from '../../../../shared/constants'
 import { useInitEffect } from '../helpers/hooks'
@@ -18,6 +18,7 @@ import useMessage from '../../hooks/chat/useMessage'
 import { useZoomKeyboardShortcuts } from '../../hooks/useZoomKeyboardShortcuts'
 
 import type { DialogProps } from '../../contexts/DialogContext'
+import { isImage } from '../attachment/Attachment'
 
 const log = getLogger('renderer/fullscreen_media')
 
@@ -68,12 +69,11 @@ export default function FullscreenMedia(props: Props & DialogProps) {
       } else {
         const { viewType, chatId } = props.msg
         // workaround to get gifs and images into the same media list
-        let additionalViewType: Type.Viewtype | null = null
-        if (props.msg.viewType === 'Image') {
-          additionalViewType = 'Gif'
-        } else if (props.msg.viewType === 'Gif') {
-          additionalViewType = 'Image'
-        }
+        const additionalViewType: Type.Viewtype | null = isImage(viewType)
+          ? viewType === 'Image'
+            ? 'Gif'
+            : 'Image'
+          : null
         const scope =
           props.neighboringMedia === NeighboringMediaMode.Global ? null : chatId
         BackendRemote.rpc
@@ -128,7 +128,7 @@ export default function FullscreenMedia(props: Props & DialogProps) {
 
   let elm = null
 
-  if (isImage(fileMime)) {
+  if (isImage(msg.viewType)) {
     const imageHeight =
       msg.dimensionsHeight < 300 ? 2 * msg.dimensionsHeight : ''
     elm = (
@@ -178,9 +178,9 @@ export default function FullscreenMedia(props: Props & DialogProps) {
         </TransformWrapper>
       </div>
     )
-  } else if (isAudio(fileMime)) {
+  } else if (msg.viewType === 'Audio' || msg.viewType === 'Voice') {
     elm = <audio src={runtime.transformBlobURL(file)} controls />
-  } else if (isVideo(fileMime)) {
+  } else if (msg.viewType === 'Video') {
     elm = <video src={runtime.transformBlobURL(file)} controls autoPlay />
   } else if (!fileMime) {
     // no file mime

packages/frontend/src/components/message/Message.tsx

@@ -29,7 +29,7 @@ import {
   enterEditMessageMode,
 } from './messageFunctions'
 import Attachment from '../attachment/messageAttachment'
-import { isGenericAttachment, isImage, isVideo } from '../attachment/Attachment'
+import { isGenericAttachment, isImage } from '../attachment/Attachment'
 import { runtime } from '@deltachat-desktop/runtime-interface'
 import { ConversationType } from './MessageList'
 import { getDirection } from '../../utils/getDirection'
@@ -289,7 +289,7 @@ function buildContextMenu(
   }
 
   const showAttachmentOptions = !!message.file
-  const showCopyImage = !!message.file && message.viewType === 'Image'
+  const showCopyImage = !!message.file && isImage(message.viewType)
   const showResend =
     message.sender.id === C.DC_CONTACT_ID_SELF && message.viewType !== 'Call'
 
@@ -389,7 +389,7 @@ function buildContextMenu(
     // Open Attachment
     showAttachmentOptions &&
       message.viewType !== 'Webxdc' &&
-      isGenericAttachment(message.fileMime) && {
+      isGenericAttachment(message.viewType) && {
         label: tx('open_attachment'),
         action: openAttachmentInShell.bind(null, message),
       },
@@ -692,7 +692,8 @@ export default function Message(props: {
         // set message width which is used by reaction component
         // to adapt the number of visible reactions
         if (
-          (message.fileMime && isImage(message.fileMime)) ||
+          isImage(message.viewType) ||
+          message.viewType === 'Sticker' ||
           window.innerWidth < 900
         ) {
           // image messages have a defined width
@@ -712,7 +713,7 @@ export default function Message(props: {
     return () => {
       window.removeEventListener('resize', resizeHandler)
     }
-  }, [message.fileMime])
+  }, [message.viewType])
 
   // Info Message
   if (message.isInfo) {
@@ -864,7 +865,7 @@ export default function Message(props: {
 
   const hasText = text !== null && text !== ''
   const fileMime = message.fileMime || null
-  const isWithoutText = isMediaWithoutText(fileMime, hasText, message.viewType)
+  const isWithoutText = isMediaWithoutText(hasText, message.viewType)
   const showAttachment = (message: T.Message) =>
     message.file &&
     message.viewType !== 'Webxdc' &&
@@ -879,7 +880,7 @@ export default function Message(props: {
         direction,
         styles.message,
         rovingTabindex.className,
-        isWithoutText && isVideo(fileMime) ? 'video-only' : '',
+        isWithoutText && viewType === 'Video' ? 'video-only' : '',
         {
           [styles.withReactions]: message.reactions,
           'type-sticker': viewType === 'Sticker',

packages/frontend/src/components/message/MessageMetaData.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 import { T } from '@deltachat/jsonrpc-client'
 
 import Timestamp from '../conversations/Timestamp'
-import { isImage, isVideo } from '../attachment/Attachment'
+import { isImage } from '../attachment/Attachment'
 import { msgStatus } from '../../types-app'
 import useTranslationFunction from '../../hooks/useTranslationFunction'
 import { useRpcFetch } from '../../hooks/useFetch'
@@ -37,7 +37,6 @@ export default function MessageMetaData(props: Props) {
   const {
     messageId,
     encrypted,
-    fileMime,
     direction,
     status,
     error,
@@ -56,11 +55,7 @@ export default function MessageMetaData(props: Props) {
   return (
     <div
       className={classNames('metadata', {
-        'with-image-no-caption': isMediaWithoutText(
-          fileMime,
-          hasText,
-          viewType
-        ),
+        'with-image-no-caption': isMediaWithoutText(hasText, viewType),
       })}
     >
       {/* FYI the email doesn't need `aria-live`
@@ -217,12 +212,11 @@ function ViewCount(props: { messageId: number }) {
  * without any further text.
  **/
 export function isMediaWithoutText(
-  fileMime: string | null,
   hasText: boolean,
   viewType: T.Viewtype
 ): boolean {
   const withImageNoCaption = Boolean(
-    !hasText && (isImage(fileMime) || isVideo(fileMime))
+    !hasText && (isImage(viewType) || viewType === 'Video')
   )
 
   return withImageNoCaption || viewType === 'Sticker'

packages/frontend/src/system-integration/notifications.ts

@@ -2,7 +2,7 @@ import { appName } from '../../../shared/constants'
 import { getLogger } from '../../../shared/logger'
 import { NOTIFICATION_TYPE } from '../../../shared/constants'
 import { BackendRemote } from '../backend-com'
-import { isImage } from '../components/attachment/Attachment'
+
 import { runtime } from '@deltachat-desktop/runtime-interface'
 import SettingsStoreInstance, {
   mentionsEnabledDefaultVal,
@@ -468,7 +468,7 @@ export function clearAllNotifications() {
 function getNotificationIcon(
   notification: T.MessageNotificationInfo
 ): [icon: string | null, iconIsAvatar: boolean] {
-  if (notification.image && isImage(notification.imageMimeType)) {
+  if (notification.image && notification.imageMimeType?.startsWith('image/')) {
     return [notification.image, false]
   } else if (notification.chatProfileImage) {
     return [notification.chatProfileImage, true]