fix webcam url in printer farm

Signed-off-by: Stefan Dej <meteyou@gmail.com>

src/components/panels/FarmPrinterPanel.vue

@@ -71,7 +71,7 @@
                     <webcam-mjpegstreamer :cam-settings="currentWebcam"></webcam-mjpegstreamer>
                 </template>
                 <template v-if="'service' in currentWebcam && currentWebcam.service === 'mjpegstreamer-adaptive'">
-                    <webcam-mjpegstreamer-adaptive :cam-settings="currentWebcam"></webcam-mjpegstreamer-adaptive>
+                    <webcam-mjpegstreamer-adaptive :cam-settings="currentWebcam" :printer-url="printerUrl"></webcam-mjpegstreamer-adaptive>
                 </template>
             </div>
             <v-card-title class="white--text py-2" style="background-color: rgba(0,0,0,0.3); backdrop-filter: blur(3px);">
@@ -124,6 +124,15 @@
             ...mapState({
                 remoteMode: state => state.socket.remoteMode
             }),
+            printerUrl() {
+                const thisUrl = window.location.href.split("/")
+                const protocol = thisUrl[0]
+
+                let url = protocol+"//"+this.printer.socket.hostname
+                if (80 !== parseInt(this.printer.socket.webPort)) url += ":"+this.printer.socket.webPort
+
+                return url
+            },
             isCurrentPrinter: {
                 get() {
                     return this.$store.getters["farm/"+this.printer._namespace+"/isCurrentPrinter"]
@@ -185,7 +194,7 @@
             },
             changePrinter() {
                 if (this.remoteMode) this.$store.dispatch('changePrinter', { printer: this.printer._namespace })
-                else window.location.href = "//"+this.printer.socket.hostname+(parseInt(this.printer.socket.webPort) !== 80 ? ':'+this.printer.socket.webPort : '')
+                else window.location.href = this.printerUrl
             },
             reconnectPrinter() {
                 this.$store.dispatch("farm/"+this.printer._namespace+"/reconnect")

src/components/panels/Settings/WebcamPanel.vue

@@ -305,8 +305,8 @@ export default {
         },
         saveWebcam() {
             if (this.dialog.valid) {
-                if (this.dialog.index) this.$store.dispatch("gui/updateWebcam", this.dialog)
+                if (this.dialog.index) this.$store.dispatch("gui/updateWebcam", {...this.dialog})
-                else this.$store.dispatch("gui/addWebcam", this.dialog)
+                else this.$store.dispatch("gui/addWebcam", {...this.dialog})
 
                 this.clearDialog()
             }

src/components/webcams/Mjpegstreamer.vue

@@ -27,20 +27,28 @@
         data: function() {
             return {
                 isVisible: true,
+                refresh: Math.ceil(Math.random() * Math.pow(10, 12))
             }
         },
         props: {
             camSettings: Object,
+            printerUrl: {
+                type: String,
+                default: null
+            }
         },
         created: function () {
 
         },
         computed: {
             url() {
-                let basicUrl = this.camSettings.url
+                const baseUrl = this.camSettings.url
-                const params = new URLSearchParams(basicUrl)
+                const hostUrl = new URL(this.printerUrl === null ? document.URL : this.printerUrl)
-                params.set('bypassCache', ""+this.refresh)
+
-                return decodeURIComponent(params.toString())
+                const url = new URL(baseUrl, hostUrl.origin)
+                url.searchParams.append('bypassCache', this.refresh.toString())
+
+                return decodeURIComponent(url.toString())
             },
             webcamStyle() {
                 let transforms = ""

src/components/webcams/MjpegstreamerAdaptive.vue

@@ -51,6 +51,10 @@
         },
         props: {
             camSettings: Object,
+            printerUrl: {
+                type: String,
+                default: null
+            }
         },
         created: function () {
 
@@ -101,7 +105,8 @@
             },
             setUrl() {
                 const baseUrl = this.camSettings.url
-                const hostUrl = new URL(document.URL)
+                const hostUrl = new URL(this.printerUrl === null ? document.URL : this.printerUrl)
+
                 const url = new URL(baseUrl, hostUrl.origin)
 
                 url.searchParams.append('bypassCache', this.refresh.toString())

src/store/farm/printer/getters.js

@@ -252,7 +252,11 @@ export default {
 		if (
 			'gui' in state.data &&
 			'webcam' in state.data.gui &&
-			'configs' in state.data.gui.webcam
+			'bool' in state.data.gui.webcam &&
+			'configs' in state.data.gui.webcam &&
+			'dashboard' in state.data.gui &&
+			'boolWebcam' in state.data.gui.dashboard &&
+			(state.data.gui.dashboard.boolWebcam || state.data.gui.webcam.bool)
 		) return state.data.gui.webcam.configs
 
 		return []

src/store/farm/printer/index.js

@@ -1,6 +1,7 @@
 import actions from './actions'
 import mutations from './mutations'
 import getters from './getters'
+import { getDefaultState as getGuiDefaultState } from '../../gui/index'
 
 export function getDefaultState() {
 	return {
@@ -19,7 +20,7 @@ export function getDefaultState() {
 			wsData: [],
 		},
 		data: {
-
+			gui: getGuiDefaultState()
 		},
 		databases: [],
 		current_file: {},

src/store/farm/printer/mutations.js

@@ -69,6 +69,16 @@ export default {
 	},
 
 	setMainsailData(state, payload) {
-		Vue.set(state.data, 'gui', payload)
+		const setDataDeep = function(currentState, payload) {
+			Object.entries(payload).forEach(([key, value]) => {
+				if (typeof value === 'object' && !Array.isArray(value) && key in currentState) {
+					setDataDeep(currentState[key], value)
+				} else if (key in currentState) {
+					Vue.set(currentState, key, value)
+				}
+			})
+		}
+
+		setDataDeep(state.data.gui, payload)
 	},
 }

src/store/gui/actions.js

@@ -18,7 +18,6 @@ export default {
 				'flipY' in payload.value.webcam
 			)
 		) {
-			window.console.log("convert to multi webcam")
 			dispatch('upgradeWebcamConfig', payload.value.webcam)
 			delete payload.value.webcam
 		}

src/store/gui/mutations.js

@@ -84,8 +84,8 @@ export default {
 
 	updateWebcam(state, payload) {
 		if (state.webcam.configs[payload.index]) {
-			const configs = {...state.webcam.configs}
+			const webcam = {...state.webcam}
-			configs[payload.index] = {
+			webcam.configs[payload.index] = {
 				name: payload.name,
 				icon: payload.icon,
 				service: payload.service,
@@ -95,7 +95,7 @@ export default {
 				flipY: payload.flipY,
 			}
 
-			Vue.set(state.webcam, 'configs', configs)
+			Vue.set(state, 'webcam', webcam)
 		}
 	},