WIP HEIC display

Author: edemaine

client/MessageHEIC.coffee

@@ -0,0 +1,46 @@
+import React, {useEffect, useRef, useState} from 'react'
+import {useTracker} from 'meteor/react-meteor-data'
+
+import {ErrorBoundary} from './ErrorBoundary'
+
+heic = null  # will become import of 'libheif-web'
+
+export MessageHEIC = ({file}) ->
+  <ErrorBoundary>
+    <WrappedMessageHEIC file={file}/>
+  </ErrorBoundary>
+MessageHEIC.displayName = 'MessageHEIC'
+
+WrappedMessageHEIC = React.memo ({file}) ->
+  [pngBlob, setPngBlob] = useState()
+  [url, setUrl] = useState()
+
+  useTracker =>
+    ## Load libheif-web
+    unless heic?
+      Session.set 'heicLoading', true
+      Session.get 'heicLoading'  # rerun tracker once libheif-web loaded
+      return import('libheif-web').then (imported) ->
+        heic = window.heic = imported
+        heic.useUrl '/libheif.min.js'
+        Session.set 'heicLoading', false
+    ## Load HEIC file
+    fileData = findFile file
+    return unless fileData?
+    fetch urlToInternalFile file
+    .then (response) => response.blob()
+    .then (blob) =>
+      heic.convertHeif blob, file.filename + '.png', 'image/png'
+    .then (png) => setPngBlob png
+  , [file]
+  useEffect =>
+    return unless pngBlob?
+    url = setUrl URL.createObjectURL pngBlob
+    => URL.revokeObjectURL url
+  , [pngBlob]
+
+  if url
+    <img src={url}/>
+  else
+    null
+WrappedMessageHEIC.displayName = 'WrappedMessageHEIC'

client/message.coffee

@@ -13,6 +13,7 @@ import {Credits} from './layout.coffee'
 import {ErrorBoundary} from './ErrorBoundary'
 import {FormatDate, formatDate} from './lib/date'
 import {ignoreKey} from './keyboard'
+import {MessageHEIC} from './MessageHEIC'
 import {MessageImage, imageTransform, messageRotate} from './MessageImage'
 import {MessagePDF} from './MessagePDF'
 import {TagEdit} from './TagEdit'
@@ -2858,8 +2859,11 @@ export WrappedSubmessage = React.memo ({message, read}) ->
             menu={can.edit} tabindex={tabindex0+9}/>
         }
         <div className="bodyFile">
-          {if messageFileType == 'pdf'
-            <MessagePDF file={historified.file}/>
+          {switch messageFileType
+            when 'pdf'
+              <MessagePDF file={historified.file}/>
+            when 'heic'
+              <MessageHEIC file={historified.file}/>
           }
           {if historified.file
             <>

lib/files.coffee

@@ -93,6 +93,8 @@ export messageFileUrlPrefixPattern =
   switch file?.contentType
     when 'image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/webp', 'image/x-icon'
       'image'
+    when 'image/heic', 'image/heif'#, 'image/heic-sequence', 'image/heif-sequence'
+      'heic'
     when 'video/mp4', 'video/ogg', 'video/webm'
       'video'
     when 'application/pdf'

package.json

@@ -41,12 +41,14 @@
     "dompurify": "2.5.8",
     "exif-parser": "^0.1.12",
     "file-saver": "^2.0.5",
+    "heic-to": "1.1.5",
     "highlight.js": "^10.7.2",
     "jquery": "^3.5.1",
     "js-cookie": "^2.2.1",
     "jsdom": "^19.0.0",
     "jszip": "^3.2.2",
     "katex": "0.16.21",
+    "libheif-web": "^1.0.2",
     "markdown-it": "13.0.1",
     "markdown-it-anchor": "8.6.4",
     "markdown-it-replacements": "1.0.2",