fix watcher on player, media, logging

components/Browser.vue

@@ -251,6 +251,7 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 
@@ -266,6 +267,8 @@ const mediaStore = useMedia()
 const { toMin, mediaType } = stringFormatter()
 const contentType = { 'content-type': 'application/json;charset=UTF-8' }
 
+const { configID } = storeToRefs(useConfig())
+
 const browserIsLoading = ref(false)
 const deleteName = ref('')
 const renameOldName = ref('')
@@ -281,6 +284,11 @@ onMounted(() => {
     }
 })
 
+watch([configID], () => {
+    getPath('')
+})
+
+
 async function getPath(path: string) {
     browserIsLoading.value = true
     await mediaStore.getTree(path)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,
@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@nuxt/types": "^2.16.0",
+    "@nuxt/types": "^2.16.3",
     "@pinia/nuxt": "^0.4.7",
     "@popperjs/core": "^2.11.6",
     "@vueuse/core": "^9.13.0",
@@ -23,7 +23,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mpegts.js": "^1.7.2",
-    "pinia": "^2.0.32",
+    "pinia": "^2.0.33",
     "sortablejs": "^1.15.0",
     "sortablejs-vue3": "^1.2.8",
     "splitpanes": "^3.1.5",
@@ -36,10 +36,10 @@
     "@types/lodash": "^4.14.191",
     "@types/splitpanes": "^2.2.1",
     "@types/video.js": "^7.3.51",
-    "eslint": "^8.35.0",
+    "eslint": "^8.36.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "nuxt": "3.2.3",
-    "sass": "^1.58.3",
-    "sass-loader": "^13.2.0"
+    "nuxt": "3.3.1",
+    "sass": "^1.59.3",
+    "sass-loader": "^13.2.1"
   }
 }

pages/logging.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { useAuth } from '~/stores/auth'
 import { useConfig } from '~/stores/config'
 
@@ -24,9 +25,7 @@ useHead({
     title: 'Logging | ffplayout'
 })
 
-onMounted(() => {
-    getLog()
-})
+const { configID } = storeToRefs(useConfig())
 
 const { $dayjs } = useNuxtApp()
 const authStore = useAuth()
@@ -35,7 +34,11 @@ const currentLog = ref('')
 const listDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const { formatLog } = stringFormatter()
 
-watch([listDate, configStore.configID], () => {
+onMounted(() => {
+    getLog()
+})
+
+watch([listDate, configID], () => {
     getLog()
 })
 

pages/player.vue

@@ -523,6 +523,7 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 
@@ -551,6 +552,8 @@ useHead({
     title: 'Player | ffplayout',
 })
 
+const { configID } = storeToRefs(useConfig())
+
 const fileImport = ref()
 const browserIsLoading = ref(false)
 const playlistIsLoading = ref(false)
@@ -562,7 +565,6 @@ const previewName = ref('')
 const previewUrl = ref('')
 const previewOpt = ref()
 const isVideo = ref(false)
-const configID = ref(configStore.configID)
 const selectedFolders = ref([] as string[])
 const generateFromAll =ref(false)
 const browserSortOptions = ref({
@@ -595,6 +597,7 @@ onMounted(() => {
 })
 
 watch([listDate, configID], () => {
+    getPath('')
     getPlaylist()
 })