From 9ac71a081b25d20f2e2cb45d6b2ee86e65c30c4e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 4 Nov 2019 16:49:28 +0000
Subject: [PATCH] Added stream flash animation on capture. Closes #43

---
 src/components/controlComponents/paneCapture.vue |  3 +++
 src/components/viewComponents/streamDisplay.vue  | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
index f0e71bfb..694cc580 100644
--- a/src/components/controlComponents/paneCapture.vue
+++ b/src/components/controlComponents/paneCapture.vue
@@ -224,6 +224,9 @@ export default {
       // Send move request
       axios.post(this.captureApiUri, params)
         .then(response => { 
+          // Flash the stream (capture animation)
+          this.$root.$emit('globalFlashStream')
+          // Update the global capture list
           this.$root.$emit('globalUpdateCaptureList')
         })
         .catch(error => {
diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue
index 342caf7d..c82594f8 100644
--- a/src/components/viewComponents/streamDisplay.vue
+++ b/src/components/viewComponents/streamDisplay.vue
@@ -40,6 +40,10 @@ export default {
 			console.log(`Toggling preview to ${state}`)
 			this.previewRequest(state)
 		})
+    // A global signal listener to flash the stream element
+    this.$root.$on('globalFlashStream', (state) => {
+			this.flashStream()
+		})
 
 		// Mutation observer
 		this.sizeObserver = new ResizeObserver(entries => {
@@ -85,8 +89,17 @@ export default {
 
 			// Emit a signal to move, acted on by panelNavigate.vue
 			this.$root.$emit('globalMoveEvent', xSteps, ySteps, 0, false)
+
+			this.flashStream()
 		},
 		
+		flashStream: function() {
+			let element = this.$refs.streamDisplay
+			element.classList.remove("uk-animation-fade");
+			element.offsetHeight; /* trigger reflow */
+			element.classList.add("uk-animation-fade");
+		},
+
 		handleResize: function(event) {
 			// Only fires resize event after no resize in 500ms (prevents resize event spam)
 			clearTimeout(this.resizeTimeoutId);