Write thumbnail file externally

GMOD · Oct 13, 2021 · 884f0cc · 884f0cc
1 parent 69203cc
commit 884f0cc
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/products/jbrowse-desktop/public/electron.ts b/products/jbrowse-desktop/public/electron.ts
@@ -51,12 +51,17 @@ const defaultSessionName = `jbrowse_session.json`
 const userData = app.getPath('userData')
 const recentSessionsPath = path.join(userData, 'recent_sessions.json')
 const quickstartDir = path.join(userData, 'quickstart')
+const thumbnailDir = path.join(userData, 'thumbnails')
 const autosaveDir = path.join(userData, 'autosaved')
 
 function getQuickstartPath(sessionName: string, ext = 'json') {
   return path.join(quickstartDir, `${encodeURIComponent(sessionName)}.${ext}`)
 }
 
+function getThumbnailPath(name: string) {
+  return path.join(thumbnailDir, `${encodeURIComponent(name)}.data`)
+}
+
 function getAutosavePath(sessionName: string, ext = 'json') {
   return path.join(autosaveDir, `${encodeURIComponent(sessionName)}.${ext}`)
 }
@@ -69,6 +74,10 @@ if (!fs.existsSync(quickstartDir)) {
   fs.mkdirSync(quickstartDir, { recursive: true })
 }
 
+if (!fs.existsSync(thumbnailDir)) {
+  fs.mkdirSync(thumbnailDir, { recursive: true })
+}
+
 if (!fs.existsSync(autosaveDir)) {
   fs.mkdirSync(autosaveDir, { recursive: true })
 }
@@ -399,10 +408,9 @@ ipcMain.handle(
       { path: string; updated: number },
     ]
     const idx = rows.findIndex(r => r.path === path)
-    const screenshot = page?.resize({ width: 500 }).toDataURL()
+    const png = page?.resize({ width: 500 }).toDataURL()
     const entry = {
       path,
-      screenshot,
       updated: +Date.now(),
       name: snap.defaultSession?.name,
     }
@@ -412,12 +420,20 @@ ipcMain.handle(
       rows[idx] = entry
     }
     await Promise.all([
+      ...(png ? [writeFile(getThumbnailPath(path), png)] : []),
       writeFile(recentSessionsPath, stringify(rows)),
       writeFile(path, stringify(snap)),
     ])
   },
 )
 
+ipcMain.handle('loadThumbnail', (_event: unknown, name: string) => {
+  const path = getThumbnailPath(name)
+  if (fs.existsSync(path)) {
+    return readFile(path, 'utf8')
+  }
+})
+
 ipcMain.handle('promptOpenFile', async (_event: unknown) => {
   const toLocalPath = path.join(app.getPath('desktop'), defaultSessionName)
   const choice = await dialog.showOpenDialog({

diff --git a/products/jbrowse-desktop/src/StartScreen/SessionCard.tsx b/products/jbrowse-desktop/src/StartScreen/SessionCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   Card,
   CardHeader,
@@ -11,6 +11,7 @@ import {
   Typography,
   makeStyles,
 } from '@material-ui/core'
+import { ipcRenderer } from 'electron'
 
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
 import DeleteIcon from '@material-ui/icons/Delete'
@@ -31,8 +32,8 @@ const useStyles = makeStyles({
 interface RecentSessionData {
   path: string
   name: string
-  screenshot?: string
   updated: number
+  screenshotPath?: string
 }
 
 function RecentSessionCard({
@@ -51,7 +52,24 @@ function RecentSessionCard({
   const classes = useStyles()
   const [hovered, setHovered] = useState(false)
   const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null)
-  const sessionName = sessionData.name
+  const [screenshot, setScreenshot] = useState<string>()
+  const { name, path } = sessionData
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const data = await ipcRenderer.invoke('loadThumbnail', path)
+        if (data) {
+          setScreenshot(data)
+        } else {
+          setScreenshot(defaultSessionScreenshot)
+        }
+      } catch (e) {
+        console.error(e)
+        setScreenshot(defaultSessionScreenshot)
+      }
+    })()
+  }, [path])
 
   return (
     <>
@@ -62,10 +80,12 @@ function RecentSessionCard({
         onClick={() => onClick(sessionData)}
         raised={Boolean(hovered)}
       >
-        <CardMedia
-          className={classes.media}
-          image={sessionData.screenshot || defaultSessionScreenshot}
-        />
+        {screenshot ? (
+          <CardMedia
+            className={classes.media}
+            image={screenshot || defaultSessionScreenshot}
+          />
+        ) : null}
         <CardHeader
           action={
             <IconButton
@@ -79,9 +99,9 @@ function RecentSessionCard({
           }
           disableTypography
           title={
-            <Tooltip title={sessionName} enterDelay={300}>
+            <Tooltip title={name} enterDelay={300}>
               <Typography variant="body2" noWrap style={{ width: 178 }}>
-                {sessionName}
+                {name}
               </Typography>
             </Tooltip>
           }