Added stream flash animation on capture. Closes #43

This commit is contained in:
Joel Collins 2019-11-04 16:49:28 +00:00
parent 37dcc2c796
commit 9ac71a081b
2 changed files with 16 additions and 0 deletions

View file

@ -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 => {

View file

@ -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);