fix issues

frontend/src/App.vue

@@ -12,23 +12,20 @@ import {
   provide,
   inject,
   toRef,
-  watch,
   computed,
 } from 'vue'
 import { useTheme } from 'vuetify'
 import {
   onKeyStroke,
   useEventBus,
   useColorMode,
-  useDocumentVisibility,
   useTitle,
 } from '@vueuse/core'
 import { useRoute } from 'vue-router'
 
 import { useConfigStore } from '@/store/config'
 import { useLoginStore } from '@/store/login'
 import { useLocalStorageStore } from '@/store/localStorage'
-import { useShootStore } from '@/store/shoot'
 import { useProjectStore } from '@/store/project'
 
 import { useCustomColors } from '@/composables/useCustomColors'
@@ -38,10 +35,8 @@ import get from 'lodash/get'
 const theme = useTheme()
 const route = useRoute()
 const localStorageStore = useLocalStorageStore()
-const visibility = useDocumentVisibility()
 const configStore = useConfigStore()
 const loginStore = useLoginStore()
-const shootStore = useShootStore()
 const projectStore = useProjectStore()
 const logger = inject('logger')
 

frontend/src/composables/useSocketEventHandler.js

@@ -131,14 +131,13 @@ export function useSocketEventHandler (useStore, options = {}) {
     throttledHandleEvents = wait > 0
       ? throttle(boundHandleEvents, wait)
       : boundHandleEvents
-    return this
+    return throttledHandleEvents
   }
 
   function stop () {
     cancelTrailingInvocation()
     eventMap.clear()
     throttledHandleEvents = undefined
-    return this
   }
 
   function listener (event) {

frontend/src/store/project.js

@@ -159,7 +159,8 @@ export const useProjectStore = defineStore('project', () => {
 
   const socketEventHandler = useSocketEventHandler(useProjectStore, {
     logger,
-  }).start(500)
+  })
+  socketEventHandler.start(500)
 
   async function $reset () {
     list.value = null

frontend/src/store/shoot/shoot.js

@@ -559,7 +559,7 @@ const useShootStore = defineStore('shoot', () => {
     const shootStore = this
     shootStore.$patch(({ state }) => {
       setSubscriptionState(state, constants.OPENING)
-      socketEventHandler.start(throttleDelay)
+      state.subscriptionEventHandler = socketEventHandler.start(throttleDelay)
     })
     try {
       await socketStore.emitSubscribe(value)
@@ -579,6 +579,7 @@ const useShootStore = defineStore('shoot', () => {
       state.subscription = null
       setSubscriptionState(state, constants.CLOSING)
       socketEventHandler.stop()
+      state.subscriptionEventHandler = undefined
     })
     try {
       await socketStore.emitUnsubscribe()
@@ -593,7 +594,7 @@ const useShootStore = defineStore('shoot', () => {
     return includes(activeUids.value, uid)
   }
 
-  const socketEventHandler = useSocketEventHandler('shoots', {
+  const socketEventHandler = useSocketEventHandler(useShootStore, {
     logger,
     createOperator ({ state }) {
       const notOnlyShootsWithIssues = !onlyAllShootsWithIssues(state, context)