feat: add messenger reposition within overlay

apps/app/src/electron/events/main.ts

@@ -2,41 +2,45 @@ import { processes } from '@/types/electron'
 import { ipcMain } from 'electron-postman'
 
 export const onIPCProcessError = (callback: (error: Error, process: string) => any) => {
-    processes.forEach((process) => {
-        ipcMain.on(process, 'error', (payload: { name: string; message: string }) =>
-            callback(payload, process),
-        )
-    })
+  processes.forEach((process) => {
+    ipcMain.on(process, 'error', (payload: { name: string; message: string }) =>
+      callback(payload, process),
+    )
+  })
 }
 
 export const onIPCGameOverlayStartIntercept = (callback: () => any) => {
-    processes.forEach((process) => {
-        ipcMain.on(process, 'game-overlay-start-intercept', () =>
-            callback(),
-        )
-    })
+  processes.forEach((process) => {
+    ipcMain.on(process, 'game-overlay-start-intercept', () =>
+      callback(),
+    )
+  })
 }
 
 export const onIPCGameOverlayStopIntercept = (callback: () => any) => {
-    processes.forEach((process) => {
-        ipcMain.on(process, 'game-overlay-stop-intercept', () =>
-            callback(),
-        )
-    })
+  processes.forEach((process) => {
+    ipcMain.on(process, 'game-overlay-stop-intercept', () =>
+      callback(),
+    )
+  })
 }
 
 export const emitIPCCancelCurrentMessage = () => {
-    ipcMain.sendTo('speech-worker', 'cancel-current-message')
+  ipcMain.sendTo('speech-worker', 'cancel-current-message')
 }
 
 export const emitIPCCancelAllMessages = () => {
-    ipcMain.sendTo('speech-worker', 'cancel-all-messages')
+  ipcMain.sendTo('speech-worker', 'cancel-all-messages')
 }
 
 export const emitIPCOverlayInputCharacter = (character: string) => {
-    ipcMain.sendTo('overlay', 'overlay-input-character', character)
+  ipcMain.sendTo('overlay', 'overlay-input-character', character)
 }
 
 export const emitIPCOverlayInputCommand = (command: string, args: any[] = []) => {
-    ipcMain.sendTo('overlay', 'overlay-input-command', [command, ...args])
+  ipcMain.sendTo('overlay', 'overlay-input-command', [command, ...args])
+}
+
+export const emitIPCGameOverlayResize = (size: { width: number, height: number }) => {
+  ipcMain.sendTo('messenger-game-overlay', 'resize', size)
 }

apps/app/src/electron/events/renderer.ts

@@ -4,52 +4,58 @@ import { IzabelaMessage } from '@/modules/izabela/types'
 const { ipc } = window
 
 export const emitIPCProcessError = (payload: { name: string; message: string }) => {
-    processes.forEach((process) => {
-        ipc.sendTo(process, 'error', payload)
-    })
+  processes.forEach((process) => {
+    ipc.sendTo(process, 'error', payload)
+  })
 }
 
 export const emitIPCGameOverlayStartIntercept = () => {
-    ipc.sendTo(mainProcess, 'game-overlay-start-intercept')
+  ipc.sendTo(mainProcess, 'game-overlay-start-intercept')
 }
 
 export const emitIPCGameOverlayStopIntercept = () => {
-    ipc.sendTo(mainProcess, 'game-overlay-stop-intercept')
+  ipc.sendTo(mainProcess, 'game-overlay-stop-intercept')
 }
 
 type IPCSayPayload = string | IzabelaMessage
 
 export const onIPCSay = (callback: (payload: IPCSayPayload) => any) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'say', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'say', callback)
+  })
 }
 
 export const emitIPCSay = (payload: IPCSayPayload) => {
-    console.log(ipc, payload)
-    ipc.sendTo('speech-worker', 'say', payload)
+  console.log(ipc, payload)
+  ipc.sendTo('speech-worker', 'say', payload)
 }
 
 export const onIPCCancelCurrentMessage = (callback: () => any) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'cancel-current-message', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'cancel-current-message', callback)
+  })
 }
 
 export const onIPCCancelAllMessages = (callback: () => void) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'cancel-all-messages', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'cancel-all-messages', callback)
+  })
 }
 
 export const onIPCOverlayInputCharacter = (callback: (key: any) => void) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'overlay-input-character', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'overlay-input-character', callback)
+  })
 }
 
 export const onIPCOverlayInputCommand = (callback: (args: any[]) => void) => {
-    processes.forEach((process) => {
-        ipc.on(process, 'overlay-input-command', callback)
-    })
+  processes.forEach((process) => {
+    ipc.on(process, 'overlay-input-command', callback)
+  })
+}
+
+export const onIPCGameOverlayResize = (callback: (size: { width: number, height: number }) => void) => {
+  processes.forEach((process) => {
+    ipc.on(process, 'resize', callback)
+  })
 }

apps/app/src/electron/game-overlay.ts

@@ -1,5 +1,6 @@
 import { app, BrowserWindow, screen, shell } from 'electron'
 import {
+  emitIPCGameOverlayResize,
   onIPCGameOverlayStartIntercept,
   onIPCGameOverlayStopIntercept,
 } from '@/electron/events/main.ts'
@@ -46,12 +47,12 @@ class GameOverlay {
     ])
 
     this.Overlay!.setEventCallback((event: string, payload: any) => {
-      if (event === 'graphics.window.event.resize') {
-        const focusWin = this.windows.get('messenger-game-overlay')
-        if (focusWin) {
-          const { width, height } = payload
-          focusWin.setSize(width, height)
-        }
+      if (['graphics.window.event.resize', 'graphics.window'].includes(event)) {
+        const { width, height } = payload
+        emitIPCGameOverlayResize({
+          width,
+          height,
+        })
       }
       if (event === 'game.input') {
         const window = BrowserWindow.fromId(payload.windowId)
@@ -69,19 +70,17 @@ class GameOverlay {
       if (event === 'game.input.intercept' && payload.intercepting) {
         const focusWin = this.windows.get('messenger-game-overlay')
         if (focusWin) {
-          console.log(payload)
           focusWin.blurWebView()
           focusWin.focusOnWebView()
           const { top, left, right, bottom } = Window.getByPid(
             payload.pid,
           ).getDimensions()
-          const width = right - left
-          const height = bottom - top
-          // focusWin.setSize(width, height)
+          const width = right-left
+          const height = bottom-top
 
           mouse.getPosition().then(async (initialPosition) => {
             await mouse.setPosition(
-              new Point(left + width / 2, top + height / 2),
+              new Point(left+width / 2, top+height / 2),
             )
             await mouse.leftClick()
             await mouse.setPosition(initialPosition)
@@ -145,7 +144,6 @@ class GameOverlay {
     })
 
     window.on('resize', () => {
-      console.log(`${name} resizing`)
       this.Overlay!.sendWindowBounds(window.id, {
         rect: {
           x: window.getBounds().x,
@@ -224,7 +222,7 @@ class GameOverlay {
     for (const window of this.Overlay.getTopWindows()) {
       if (window.processId === pid) {
         console.log(
-          `--------------------\n injecting ${JSON.stringify(window)}`,
+          `--------------------\n injecting ${ JSON.stringify(window) }`,
         )
         this.Overlay.injectProcess(window)
       }

apps/app/src/electron/renderer.ts

@@ -1 +1,9 @@
 import '@/modules/electron-log/renderer'
+
+import { onIPCGameOverlayResize } from '@/electron/events/renderer.ts'
+
+onIPCGameOverlayResize(({ width, height }) => {
+  const appEl = document.getElementById('app')
+  appEl.style.width = width+'px'
+  appEl.style.height = height+'px'
+})

apps/app/src/teams/messenger/components/NvMessenger.vue

@@ -58,16 +58,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {
-  ComponentPublicInstance,
-  computed,
-  defineProps,
-  onMounted,
-  provide,
-  ref,
-  unref,
-  watch,
-} from 'vue'
+import { ComponentPublicInstance, computed, defineProps, onMounted, provide, ref, unref, watch } from 'vue'
 import Moveable from 'vue3-moveable'
 import { NvGroup } from '@packages/ui'
 import { RouteLocationRaw, useRouter } from 'vue-router'
@@ -120,7 +111,7 @@ const props = defineProps({
 const messenger = ref()
 
 const moveable = ref()
-const moveableTarget = ref()
+const moveableTarget = ref<ComponentPublicInstance>()
 
 const doc = document
 const settingsPopover = useRouterViewPopover({
@@ -151,20 +142,24 @@ provide('messenger', {
   navigateTo,
   isViewShown,
 })
+const isGameOverlay = new URLSearchParams(window.location.search).has('game-overlay')
+
 const { width: windowWidth, height: windowHeight } = useWindowSize()
+// TODO: refactor to use only app dimensions
+// Note: Game overlay can only be resized using body for now
+const { width: appWidth, height: appHeight } = useElementSize(ref(document.getElementById('app')))
 const viewport = computed(() => ({
-  width: Math.max(
+  width: isGameOverlay ? appWidth.value : Math.max(
     windowWidth.value,
     document.documentElement.clientWidth || 0,
     window.innerWidth || 0,
   ),
-  height: Math.max(
+  height: isGameOverlay ? appHeight.value : Math.max(
     windowHeight.value,
     document.documentElement.clientHeight || 0,
     window.innerHeight || 0,
   ),
 }))
-
 const savePosition = debounce((event: any) => {
   const { width, height, translate, transform } = event
 
@@ -181,7 +176,9 @@ const savePosition = debounce((event: any) => {
 const onDrag = (event: any) => {
   const { target, transform } = event
   target.style.transform = transform
-  savePosition(event)
+  if (!isGameOverlay) {
+    savePosition(event)
+  }
   settingsPopover.update()
 }
 // watch(() => messengerWindowStore.isShown, (isShown) => {
@@ -235,17 +232,17 @@ function convertScreenPosition() {
     const { x: currentXValue, y: currentYValue } = parseTransform(
       props.transform,
     )
-    const currentCenteredXValue = currentXValue + moveableTargetWidth.value / 2
-    const currentCenteredYValue = currentYValue + moveableTargetHeight.value / 2
+    const currentCenteredXValue = currentXValue+moveableTargetWidth.value / 2
+    const currentCenteredYValue = currentYValue+moveableTargetHeight.value / 2
     const previousCenteredXPercentage =
       currentCenteredXValue / previousWindowWidth
     const previousCenteredYPercentage =
       currentCenteredYValue / previousWindowHeight
     const newXValue =
-      currentWindowWidth * previousCenteredXPercentage -
+      currentWindowWidth * previousCenteredXPercentage-
       moveableTargetWidth.value / 2
     const newYValue =
-      currentWindowHeight * previousCenteredYPercentage -
+      currentWindowHeight * previousCenteredYPercentage-
       moveableTargetHeight.value / 2
     if (convertScreenPositionTimeout) clearTimeout(convertScreenPositionTimeout)
     convertScreenPositionTimeout = setTimeout(() => {
@@ -269,28 +266,57 @@ function convertScreenPosition() {
   }
 }
 
+let setGameOverlayMessengerPositionTimeout = null
+
+function setGameOverlayMessengerPosition() {
+  const currentWindowWidth = viewport.value.width
+  const currentWindowHeight = viewport.value.height
+  const newXValue = currentWindowWidth / 2-moveableTargetWidth.value / 2
+  const newYValue = currentWindowHeight-moveableTargetHeight.value
+  if (setGameOverlayMessengerPositionTimeout) clearTimeout(setGameOverlayMessengerPositionTimeout)
+  setGameOverlayMessengerPositionTimeout = setTimeout(() => {
+    if (moveable.value) {
+      moveable.value.request(
+        'draggable',
+        {
+          x: newXValue,
+          y: newYValue,
+        },
+        true,
+      )
+    }
+    setGameOverlayMessengerPositionTimeout = null
+  }, 1000)
+}
+
 useEventListener(
   'resize',
   throttle(() => {
     convertScreenPosition()
   }, 500),
 )
 
+watch([appWidth, appHeight], () => {
+  if (isGameOverlay) {
+    setGameOverlayMessengerPosition()
+  }
+})
+
 onMounted(() => {
   // gsap.set(messenger.value, {
   //   opacity: 0,
   // })
-  const moveableTargetEl = (moveableTarget.value as ComponentPublicInstance)
-    .$el as HTMLDivElement | null
+  const moveableTargetEl = moveableTarget.value
+    ?.$el as HTMLDivElement | null
   if (moveableTargetEl) {
-    if (props.width) moveableTargetEl.style.width = `${props.width}px`
-    if (props.minWidth) moveableTargetEl.style.minWidth = `${props.minWidth}px`
-    if (props.maxWidth) moveableTargetEl.style.maxWidth = `${props.maxWidth}px`
-    if (props.height) moveableTargetEl.style.height = `${props.height}px`
+    if (props.width) moveableTargetEl.style.width = `${ props.width }px`
+    if (props.minWidth) moveableTargetEl.style.minWidth = `${ props.minWidth }px`
+    if (props.maxWidth) moveableTargetEl.style.maxWidth = `${ props.maxWidth }px`
+    if (props.height) moveableTargetEl.style.height = `${ props.height }px`
     if (props.minHeight)
-      moveableTargetEl.style.minHeight = `${props.minHeight}px`
+      moveableTargetEl.style.minHeight = `${ props.minHeight }px`
     if (props.maxHeight)
-      moveableTargetEl.style.maxHeight = `${props.maxHeight}px`
+      moveableTargetEl.style.maxHeight = `${ props.maxHeight }px`
     if (props.transform) moveableTargetEl.style.transform = props.transform
   }
   moveable.value.updateTarget()
@@ -303,8 +329,8 @@ onMounted(() => {
       moveable.value.request(
         'draggable',
         {
-          x: viewport.value.width / 2 - width / 2,
-          y: viewport.value.height - height - 60,
+          x: viewport.value.width / 2-width / 2,
+          y: viewport.value.height-height-60,
         },
         true,
       )