diff --git a/package-lock.json b/package-lock.json index 71549f79..abf242a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8804,7 +8804,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8825,12 +8826,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8845,17 +8848,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -8972,7 +8978,8 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -8984,6 +8991,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8998,6 +9006,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -9005,12 +9014,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -9029,6 +9040,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -9118,7 +9130,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -9130,6 +9143,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -9215,7 +9229,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -9251,6 +9266,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9270,6 +9286,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -9313,12 +9330,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/components/viewComponents/connectDisplay.vue b/src/components/viewComponents/connectDisplay.vue index 40063aaa..3894baa3 100644 --- a/src/components/viewComponents/connectDisplay.vue +++ b/src/components/viewComponents/connectDisplay.vue @@ -374,7 +374,6 @@ export default { this.$store.commit("changeSetting", ["trackWindow", state]); this.$store.commit("changeSetting", ["disableStream", state]); this.$store.commit("changeSetting", ["autoGpuPreview", state]); - //this.$root.$emit('globalTogglePreview', state) }, delSavedHost: function(host) { diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue index 87b446a4..350f751a 100644 --- a/src/components/viewComponents/streamDisplay.vue +++ b/src/components/viewComponents/streamDisplay.vue @@ -5,7 +5,7 @@ class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget" > { - console.log(`Toggling preview to ${state}`); this.previewRequest(state); }); // A global signal listener to flash the stream element @@ -97,6 +96,7 @@ export default { }, created: function() { + console.log(`${this._uid} created`); // Send a request to start/stop GPU preview based on global setting this.previewRequest(this.$store.state.globalSettings.autoGpuPreview); // Get FOV from settings @@ -104,12 +104,15 @@ export default { }, beforeDestroy: function() { + console.log(`${this._uid} being destroyed`); // Remove global signal listener to change the GPU preview state this.$root.$off("globalTogglePreview"); // Remove global signal listener to flash the stream element this.$root.$off("globalFlashStream"); // Disconnect the size observer this.sizeObserver.disconnect(); + // Remove from the array of active streams + this.$store.commit("removeStream", this._uid); }, methods: { @@ -151,18 +154,56 @@ export default { handleDoneResize: function() { // Recalculate size - console.log("Recalculating frame size"); + console.log(`Recalculating frame size for ${this._uid}`); this.recalculateSize(); - if ( - this.$store.state.globalSettings.autoGpuPreview == true && - this.GpuPreviewActive == true - ) { - // Reload preview - this.$root.$emit("globalTogglePreview", true); + // Handle closed stream + if (this.displaySize[0] == 0 && this.displaySize[1] == 0) { + console.log(`${this._uid} is zero`); + // If this stream was previously active + if (this.$store.state.activeStreams[this._uid] == true) { + console.log(`${this._uid} was active`); + console.log(`STREAM ${this._uid} CLOSED`); + this.$store.commit("removeStream", this._uid); + // If all streams are closed, request the GPU preview close + var a = Object.values(this.$store.state.activeStreams); + let allClosed = a.every(v => v === false); + if (allClosed) { + this.previewRequest(false); + } + } + // If resized to anything other than zero + } else { + console.log(`STREAM ${this._uid} OPEN`); + this.$store.commit("addStream", this._uid); + if (this.$store.state.globalSettings.autoGpuPreview == true) { + // Start the preview immediately + this.previewRequest(true); + // Send another start preview request after 1 second + /* + The internal logic of this component means that a stop GPU preview + request will only ever be sent if ALL stream components are invisible. + However, when switching tabs, sometimes the previous component will + react to becoming invisible before the new tab has become visible. + This results in a stop-preview request being sent JUST before the new + start preview request is sent. In an ideal network, this is fine, however + due to network jitter, these requests will occasionally be recieved out + of order, causing the preview to start in the new location, and then + quickly stop again. + Preventing this properly will involve some clever server-side logic + probably, however as a pit-stop solution, we always send another + start-preview request after 1 second. This means that either: + 1. The initial requests happened in order, in which case this follow-up + request does nothing, or + 2. The requests leapfrog eachother, stopping the preview, in which case + the follow-up request restarts the preview in the correct location. + */ + setTimeout(() => this.previewRequest(true), 250); + } } }, recalculateSize: function() { + // Calculate stream size let element = this.$refs.streamDisplay.parentNode; let bound = element.getBoundingClientRect(); @@ -183,20 +224,26 @@ export default { this.displaySize = elementSize; this.displayPosition = elementPositionOnDisplay; - - console.log(`Size: ${this.displaySize}`); - console.log(`Position: ${this.displayPosition}`); }, previewRequest: function(state) { + var a = Object.values(this.$store.state.activeStreams); + let allClosed = a.every(v => v === false); + // If all streams are closed, don't start GPU preview + if (state === true && allClosed) { + return false; + } + // If not all streams are closed, don't stop GPU preview + if (state === false && !allClosed) { + return false; + } + // If requesting starting the stream, but this component is inactive, skip if (this.$store.getters.ready == true) { var requestUri = null; - // Create URI and set this.GpuPreviewActive depending on if starting or stopping preview + // Create URI if (state == true) { - this.GpuPreviewActive = true; requestUri = this.startPreviewUri; } else { - this.GpuPreviewActive = false; requestUri = this.stopPreviewUri; } @@ -220,6 +267,7 @@ export default { } // Send preview request + console.log(`${this._uid} toggled preview to ${state}`); axios .post(requestUri, payload) .then(() => {}) diff --git a/src/store.js b/src/store.js index 48934e7c..4247712f 100644 --- a/src/store.js +++ b/src/store.js @@ -15,7 +15,8 @@ export default new Vuex.Store({ autoGpuPreview: false, trackWindow: true, appTheme: "system" - } + }, + activeStreams: {} }, mutations: { @@ -41,6 +42,12 @@ export default new Vuex.Store({ setError(state, msg) { state.waiting = false; state.error = msg; + }, + addStream(state, id) { + state.activeStreams[id] = true; + }, + removeStream(state, id) { + state.activeStreams[id] = false; } },