Add web worker communication for offloading the main thread

front/src/composables/audio/usePlayOptions.ts

@@ -45,7 +45,7 @@ export default (props: PlayOptionsProps) => {
   })
 
   const filterableArtist = computed(() => props.track?.artist ?? props.album?.artist ?? props.artist)
-  const filterArtist = () => store.dispatch('moderation/hide', { type: 'artist', target: filterableArtist.value })
+  const filterArtist = async () => store.dispatch('moderation/hide', { type: 'artist', target: filterableArtist.value })
 
   const { $npgettext } = useGettext()
   const addMessage = (tracks: Track[]) => {

front/src/composables/useWebWorker.ts

@@ -0,0 +1,5 @@
+import { createMessageChannel } from '#/communication'
+
+export default (channel: string) => {
+  return createMessageChannel(channel)
+}

front/src/init/worker.ts

@@ -0,0 +1,6 @@
+import { registerMainThread } from '#/communication'
+
+import Worker from '~/worker/webworker?worker'
+
+export const worker = new Worker()
+registerMainThread(worker)

front/src/worker/communication.ts

@@ -0,0 +1,53 @@
+import type { EventHook, EventHookOn } from '@vueuse/core'
+
+import { createEventHook } from '@vueuse/core'
+
+interface MessageChannel {
+  hook: EventHook
+  post: (data: unknown) => void
+  onMessageReceived: EventHookOn
+}
+
+let postMessageFn: typeof postMessage | typeof Worker.prototype.postMessage = () => {
+  throw new Error('Thread is unregistered')
+}
+
+const onMessageFn = (event: MessageEvent) => {
+  const { channel, data } = JSON.parse(event.data)
+  messageChannels.get(channel)?.hook.trigger(data)
+}
+
+export const registerMainThread = (worker: Worker) => {
+  worker.onmessage = onMessageFn
+  postMessageFn = (message: string) => {
+    worker.postMessage(message)
+  }
+}
+
+export const registerWorkerThread = () => {
+  onmessage = onMessageFn
+  postMessageFn = (message: string) => {
+    postMessage(message)
+  }
+}
+
+const messageChannels = new Map<string, MessageChannel>()
+export const createMessageChannel = (channel: string): MessageChannel => {
+  if (messageChannels.has(channel)) {
+    const messageChannel = messageChannels.get(channel)
+    if (messageChannel) return messageChannel
+  }
+
+  const hook = createEventHook()
+  const messageChannel: MessageChannel = {
+    hook,
+    onMessageReceived: hook.on,
+    post: (data: unknown) => postMessageFn(JSON.stringify({
+      channel,
+      data
+    }))
+  }
+
+  messageChannels.set(channel, messageChannel)
+  return messageChannel
+}

front/src/worker/modules/queue.ts

@@ -0,0 +1,30 @@
+import type { Track } from '~/types'
+
+import { createMessageChannel } from '#/communication'
+
+const { onMessageReceived, post } = createMessageChannel('queue')
+
+const queue: Track[] = []
+
+onMessageReceived((data) => {
+  switch (data.type) {
+    case 'queue':
+      queue.length = 0
+      queue.push(...data.tracks)
+      break
+
+    case 'enqueue':
+      queue.push(...data.tracks)
+      post({ type: 'queue', tracks: queue })
+      break
+
+    case 'shuffle':
+      // TODO: Shuffle queue
+      post({ type: 'queue', tracks: [] })
+      break
+
+    case 'unshuffle':
+      post({ type: 'queue', tracks: queue })
+      break
+  }
+})

front/src/worker/webworker.ts

@@ -0,0 +1,4 @@
+import { registerWorkerThread } from '#/communication'
+registerWorkerThread()
+
+import.meta.glob('./modules/*.ts', { eager: true })

front/tsconfig.json

@@ -14,6 +14,7 @@
       "vite-plugin-pwa/client"
     ],
     "paths": {
+      "#/*": ["src/worker/*"],
       "?/*": ["test/*"],
       "~/*": ["src/*"]
     }

front/vite.config.ts

@@ -86,6 +86,7 @@ export default defineConfig(({ mode }) => ({
   },
   resolve: {
     alias: {
+      '#': resolve(__dirname, './src/worker'),
       '?': resolve(__dirname, './test'),
       '~': resolve(__dirname, './src')
     }