refactor: extract url function to WebcamMixin

Signed-off-by: Stefan Dej <meteyou@gmail.com>
mainsail-crew · Jul 17, 2023 · c615c49 · c615c49
1 parent 6b5cda2
commit c615c49
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 39 deletions.
diff --git a/src/components/mixins/webcam.ts b/src/components/mixins/webcam.ts
@@ -10,9 +10,23 @@ import {
     mdiRaspberryPi,
     mdiWebcam,
 } from '@mdi/js'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
 
 @Component
-export default class WebcamMixin extends Vue {
+export default class WebcamMixin extends Mixins(BaseMixin) {
+    convertUrl(baseUrl: string, printerUrl: string | null) {
+        let url = new URL(baseUrl, this.hostUrl.toString())
+
+        // use printerURL if it exists
+        if (printerUrl !== null) url = new URL(baseUrl, printerUrl)
+
+        // overwrite url to baseUrl, if it is an absolute URL
+        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
+
+        return decodeURIComponent(url.toString())
+    }
+
     convertWebcamIcon(iconName: string): string {
         switch (iconName) {
             case 'mdiAlbum':

diff --git a/src/components/webcams/Hlsstreamer.vue b/src/components/webcams/Hlsstreamer.vue
@@ -15,9 +15,10 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Hls from 'hls.js'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class Hlsstreamer extends Mixins(BaseMixin) {
+export default class Hlsstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private aspectRatio: null | number = null
     private isVisible = true
     private hls: Hls | null = null
@@ -30,13 +31,7 @@ export default class Hlsstreamer extends Mixins(BaseMixin) {
     }
 
     get url() {
-        if (!this.isVisible) return ''
-
-        const baseUrl = this.camSettings.stream_url
-        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

diff --git a/src/components/webcams/Ipstreamer.vue b/src/components/webcams/Ipstreamer.vue
@@ -6,22 +6,17 @@
 import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class Ipstreamer extends Mixins(BaseMixin) {
+export default class Ipstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private isVisible = true
 
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) readonly printerUrl!: string | null
 
     get url() {
-        if (!this.isVisible) return ''
-
-        const baseUrl = this.camSettings.stream_url
-        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

diff --git a/src/components/webcams/JMuxerStream.vue b/src/components/webcams/JMuxerStream.vue
@@ -15,9 +15,10 @@ import JMuxer from 'jmuxer'
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class JMuxerStreamer extends Mixins(BaseMixin) {
+export default class JMuxerStreamer extends Mixins(BaseMixin, WebcamMixin) {
     private jmuxer: JMuxer | null = null
     private status: string = 'connecting'
 
@@ -29,11 +30,7 @@ export default class JMuxerStreamer extends Mixins(BaseMixin) {
     }
 
     get url() {
-        const baseUrl = this.camSettings.stream_url
-        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

diff --git a/src/components/webcams/Mjpegstreamer.vue b/src/components/webcams/Mjpegstreamer.vue
@@ -15,12 +15,13 @@ import Component from 'vue-class-component'
 import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 const CONTENT_LENGTH = 'content-length'
 const TYPE_JPEG = 'image/jpeg'
 
 @Component
-export default class Mjpegstreamer extends Mixins(BaseMixin) {
+export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
     private currentFPS = 0
     private streamState = false
     private aspectRatio: null | number = null
@@ -44,11 +45,7 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
     }
 
     get url() {
-        const baseUrl = this.camSettings.stream_url
-        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

diff --git a/src/components/webcams/Uv4lMjpeg.vue b/src/components/webcams/Uv4lMjpeg.vue
@@ -13,9 +13,10 @@
 import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class Uv4lMjpeg extends Mixins(BaseMixin) {
+export default class Uv4lMjpeg extends Mixins(BaseMixin, WebcamMixin) {
     private aspectRatio: null | number = null
     private isVisible = false
     private isVisibleViewport = false
@@ -29,11 +30,7 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin) {
     }
 
     get url() {
-        const baseUrl = this.camSettings.stream_url
-        let url = new URL(baseUrl, this.printerUrl === null ? this.hostUrl.toString() : this.printerUrl)
-        if (baseUrl.startsWith('http') || baseUrl.startsWith('://')) url = new URL(baseUrl)
-
-        return decodeURIComponent(url.toString())
+        return this.convertUrl(this.camSettings?.stream_url, this.printerUrl)
     }
 
     get webcamStyle() {

diff --git a/src/components/webcams/WebrtcMediaMTX.vue b/src/components/webcams/WebrtcMediaMTX.vue
@@ -21,10 +21,12 @@
 import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import WebcamMixin from '@/components/mixins/webcam'
 
 @Component
-export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin) {
+export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin, WebcamMixin) {
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
     @Ref() declare video: HTMLVideoElement
 
     // webrtc player vars
@@ -54,11 +56,12 @@ export default class WebrtcRTSPSimpleServer extends Mixins(BaseMixin) {
     }
 
     get url() {
-        if (this.camSettings.stream_url.startsWith('http')) {
-            return this.camSettings.stream_url.replace('http', 'ws') + 'ws'
+        let baseUrl = this.camSettings.stream_url
+        if (baseUrl.startsWith('http')) {
+            baseUrl = baseUrl.replace('http', 'ws') + 'ws'
         }
 
-        return this.camSettings.stream_url
+        return this.convertUrl(baseUrl, this.printerUrl)
     }
 
     // stop and restart the video if the url changes