recording tweaks & fixes

This commit is contained in:
Tomáš Mládek 2018-02-21 14:52:22 +01:00 committed by Tomáš Mládek
parent 3ffe3bbdb2
commit 8b3e863c42

View file

@ -15,7 +15,8 @@
<input type="checkbox" v-model="record" id="recordMode"> <input type="checkbox" v-model="record" id="recordMode">
</div> </div>
<div> <div>
<input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position"> <input type="range" min="0" :max="frames - 1" value="0" class="slider"
v-model.number="position" :disabled=record>
</div> </div>
<div> <div>
<button @click="playPause">{{buttonLabel}}</button> <button @click="playPause">{{buttonLabel}}</button>
@ -48,7 +49,6 @@
data: function () { data: function () {
return { return {
image: null, image: null,
buttonLabel: 'PLAY',
playing: false, playing: false,
zoom: 1, zoom: 1,
fullscreen: false, fullscreen: false,
@ -116,6 +116,17 @@
} else { } else {
return sequence return sequence
} }
},
buttonLabel: function () {
if (!this.playing) {
if (this.record) {
return 'RECORD'
} else {
return 'PLAY'
}
} else {
return 'STOP'
}
} }
}, },
mounted: function () { mounted: function () {
@ -141,9 +152,12 @@
this.$render() this.$render()
}, },
record: function () { record: function () {
if (this.record && !bowser.chrome) { if (this.record) {
alert('Recording only supported in Chrome :( \n' + this.position = 0
'https://github.com/spite/ccapture.js/#limitations') if (!bowser.chrome) {
alert('Recording only supported in Chrome :( \n' +
'https://github.com/spite/ccapture.js/#limitations')
}
} }
} }
}, },
@ -154,13 +168,11 @@
} }
this.playing = !this.playing this.playing = !this.playing
if (this.playing) { if (this.playing) {
this.buttonLabel = 'STOP'
this.tmp_ctx = this.$refs.canvas.getContext('2d') this.tmp_ctx = this.$refs.canvas.getContext('2d')
if (this.record) this.capturer.start() if (this.record) this.capturer.start()
this.$render_advance() this.$render_advance()
} else { } else {
cancelAnimationFrame(this.animation_id) cancelAnimationFrame(this.animation_id)
this.buttonLabel = 'PLAY'
} }
}, },
clear: function (style) { clear: function (style) {
@ -187,8 +199,8 @@
this.playPause() this.playPause()
this.position = 0 this.position = 0
if (this.record) { if (this.record) {
this.record.stop() this.capturer.stop()
this.record.save() this.capturer.save()
} }
} }
} }