recording tweaks & fixes
This commit is contained in:
parent
3ffe3bbdb2
commit
8b3e863c42
1 changed files with 21 additions and 9 deletions
|
@ -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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue