feature: use worker for all media preview functionality

packages/extension/extension.json

@@ -5,10 +5,19 @@
   "browser": "src/mediaPreviewMain.ts",
   "activation": ["onWebView:builtin.media-preview"],
   "languages": [],
+  "rpc": [
+    {
+      "id": "builtin.media-preview.media-preview-worker",
+      "type": "web-worker",
+      "name": "Media Preview Worker",
+      "url": "../media-preview-worker/src/mediaPreviewWorkerMain.ts",
+      "contentSecurityPolicy": ["default-src 'none'"]
+    }
+  ],
   "webViews": [
     {
       "id": "builtin.media-preview",
-      "rpc": true,
+      "rpc": "builtin.media-preview.media-preview-worker",
       "selector": [".png", ".jpg", ".jpeg", ".avif", ".svg", ".gif", ".ico", ".webp"],
       "contentSecurityPolicy": ["default-src 'none'", "script-src 'self'", "style-src 'self'", "img-src 'self' blob:"],
       "elements": [

packages/extension/media/index.js

@@ -28,7 +28,53 @@ const handleImageError = async () => {
   await rpc.invoke('handleError')
 }
 
-const initialize = (remoteUrl) => {
+const waitForImageReady = ($Element) => {
+  const handleError = (event) => {
+    cleanup(event)
+  }
+
+  const handleLoad = (event) => {
+    cleanup(event)
+  }
+
+  // @ts-ignore
+  const { resolve, promise } = Promise.withResolvers()
+  const cleanup = (event) => {
+    $Element.removeEventListener('error', handleError)
+    $Element.removeEventListener('load', handleLoad)
+    resolve(event)
+  }
+
+  $Element.addEventListener('error', handleError)
+  $Element.addEventListener('load', handleLoad)
+  return promise
+}
+
+const serializeErrorEvent = (event) => {
+  const { target } = event
+  const { error } = target
+  const { code, message } = error
+  return {
+    type: 'error',
+    code,
+    message,
+  }
+}
+
+const serializeLoadEvent = (event) => {
+  return {
+    type: 'load',
+  }
+}
+
+const serializeEvent = (event) => {
+  if (event.type === 'error') {
+    return serializeErrorEvent(event)
+  }
+  return serializeLoadEvent(event)
+}
+
+const initialize = async (remoteUrl) => {
   const app = document.createElement('div')
   app.className = 'App'
   app.addEventListener('pointerdown', handlePointerDown)
@@ -48,10 +94,14 @@ const initialize = (remoteUrl) => {
   app.append(imageContent)
 
   document.body.append(app)
+
+  const event = await waitForImageReady(image)
+  const serializedEvent = serializeEvent(event)
+  return serializedEvent
 }
 
 const update = (state) => {
-  const { domMatrix, pointerDown, error } = state
+  const { domMatrixString, pointerDown, error } = state
   const app = document.querySelector('.App')
   // @ts-ignore
   app.classList.toggle('Dragging', pointerDown)
@@ -63,7 +113,7 @@ const update = (state) => {
     imageContent.textContent = `Image could not be loaded`
   } else {
     // @ts-ignore
-    imageContent.style.transform = `${domMatrix}`
+    imageContent.style.transform = domMatrixString
   }
 }
 

packages/media-preview-worker/package.json

@@ -31,8 +31,8 @@
     "coverageThreshold": {
       "global": {
         "branches": 62,
-        "functions": 61,
-        "lines": 66
+        "functions": 58,
+        "lines": 64
       }
     }
   }

packages/media-preview-worker/src/parts/CommandMap/CommandMap.ts

@@ -7,14 +7,49 @@ import * as HandlePointerDown from '../HandlePointerDown/HandlePointerDown.ts'
 import * as HandlePointerMove from '../HandlePointerMove/HandlePointerMove.ts'
 import * as HandlePointerUp from '../HandlePointerUp/HandlePointerUp.ts'
 import * as HandleWheel from '../HandleWheel/HandleWheel.ts'
+import { id } from '../Id/Id.ts'
 import * as SaveState from '../SaveState/SaveState.ts'
 import * as SetSavedState from '../SetSavedState/SetSavedState.ts'
+import * as DomMatrix from '../DomMatrix/DomMatrix.ts'
+import * as WebViewStates from '../WebViewStates/WebViewStates.ts'
+import { WebView } from '../WebView/WebView.ts'
+
+interface SerializedState {
+  readonly domMatrixString: string
+  readonly pointerDown: boolean
+  readonly error: boolean
+}
+
+const serializeState = (state: WebView): SerializedState => {
+  const { domMatrix, pointerDown, error } = state
+  return {
+    domMatrixString: DomMatrix.toString(domMatrix),
+    pointerDown,
+    error,
+  }
+}
+
+const wrapCommand = (fn) => {
+  return async (...args) => {
+    await fn(id, ...args)
+    const newState = WebViewStates.get(id)
+    const { port } = newState
+    const serializedState = serializeState(newState)
+    // TODO don't send seriazlied state on every update,
+    // only send the parts that need to be changed
+    await port.invoke('update', serializedState)
+  }
+}
 
 export const commandMap = {
   'WebView.create': Create2.create,
   'WebView.saveState': SaveState.saveState,
+  handlePointerDown: wrapCommand(HandlePointerDown.handlePointerDown),
+  handlePointerMove: wrapCommand(HandlePointerMove.handlePointerMove),
+  handlePointerUp: wrapCommand(HandlePointerUp.handlePointerUp),
+  handleWheel: wrapCommand(HandleWheel.handleWheel),
 
-  // TODO this api looks better
+  // TODO this api looks better / better organized
   'MediaPreview.create': Create.create,
   'MediaPreview.getState': GetState.getState,
   'MediaPreview.getUrl': GetUrl.getUrl,

packages/media-preview-worker/src/parts/Create/Create.ts

@@ -3,6 +3,7 @@ import * as DomMatrix from '../DomMatrix/DomMatrix.ts'
 import type { WebView } from '../WebView/WebView.ts'
 
 export const create = (id: number): WebView => {
+  // @ts-ignore
   const preview: WebView = {
     domMatrix: DomMatrix.create(),
     pointerOffsetX: 0,

packages/media-preview-worker/src/parts/Create2/Create2.ts

@@ -17,6 +17,7 @@ export const create = async ({ port, savedState, webViewId, uri }) => {
     zoomFactor: 200,
     eventCache: [],
     error: false,
+    port,
   }
   PreviewStates.set(id, preview)
   SetSavedState.setSavedState(id, savedState)

packages/media-preview-worker/src/parts/WebView/WebView.ts

@@ -10,4 +10,5 @@ export interface WebView {
   readonly zoomFactor: 200
   readonly eventCache: readonly EventCacheItem[]
   readonly error: boolean
+  readonly port: any
 }