139 lines
4.6 KiB
Vue
139 lines
4.6 KiB
Vue
<template>
|
|
<div>
|
|
<p>
|
|
{{ $gettext('Set cue and fade points using the visual editor. The timestamps will be saved to the corresponding fields in the advanced playback settings.') }}
|
|
</p>
|
|
|
|
<b-form-group>
|
|
<waveform ref="waveform" :audio-url="audioUrl" :waveform-url="waveformUrl"
|
|
@ready="updateRegions"></waveform>
|
|
</b-form-group>
|
|
<b-form-group>
|
|
<b-button-group>
|
|
<b-button variant="light" @click="playAudio">
|
|
<icon icon="play_arrow"></icon>
|
|
<span class="sr-only">{{ $gettext('Play') }}</span>
|
|
</b-button>
|
|
<b-button variant="dark" @click="stopAudio">
|
|
<icon icon="stop"></icon>
|
|
<span class="sr-only">{{ $gettext('Stop') }}</span>
|
|
</b-button>
|
|
</b-button-group>
|
|
<b-button-group>
|
|
<b-button variant="primary" @click="setCueIn">
|
|
{{ $gettext('Set Cue In') }}
|
|
</b-button>
|
|
|
|
<b-button variant="primary" @click="setCueOut">
|
|
{{ $gettext('Set Cue Out') }}
|
|
</b-button>
|
|
</b-button-group>
|
|
<b-button-group>
|
|
<b-button variant="warning" @click="setFadeOverlap">
|
|
{{ $gettext('Set Overlap') }}
|
|
</b-button>
|
|
</b-button-group>
|
|
<b-button-group>
|
|
<b-button variant="danger" @click="setFadeIn">
|
|
{{ $gettext('Set Fade In') }}
|
|
</b-button>
|
|
|
|
<b-button variant="danger" @click="setFadeOut">
|
|
{{ $gettext('Set Fade Out') }}
|
|
</b-button>
|
|
</b-button-group>
|
|
</b-form-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Waveform from '~/components/Common/Waveform';
|
|
import Icon from '~/components/Common/Icon';
|
|
|
|
export default {
|
|
name: 'MediaFormWaveformEditor',
|
|
components: {Icon, Waveform},
|
|
props: {
|
|
form: Object,
|
|
audioUrl: String,
|
|
waveformUrl: String
|
|
},
|
|
methods: {
|
|
playAudio() {
|
|
this.$refs.waveform.play();
|
|
},
|
|
stopAudio() {
|
|
this.$refs.waveform.stop();
|
|
},
|
|
setCueIn() {
|
|
let currentTime = this.$refs.waveform.getCurrentTime();
|
|
|
|
this.form.cue_in = Math.round((currentTime) * 10) / 10;
|
|
|
|
this.updateRegions();
|
|
},
|
|
setCueOut() {
|
|
let currentTime = this.$refs.waveform.getCurrentTime();
|
|
|
|
this.form.cue_out = Math.round((currentTime) * 10) / 10;
|
|
|
|
this.updateRegions();
|
|
},
|
|
setFadeOverlap() {
|
|
let duration = this.$refs.waveform.getDuration();
|
|
let cue_out = this.form.cue_out || duration;
|
|
let currentTime = this.$refs.waveform.getCurrentTime();
|
|
|
|
this.form.fade_overlap = Math.round((cue_out - currentTime) * 10) / 10;
|
|
|
|
this.updateRegions();
|
|
},
|
|
setFadeIn() {
|
|
let currentTime = this.$refs.waveform.getCurrentTime();
|
|
let cue_in = this.form.cue_in || 0;
|
|
|
|
this.form.fade_in = Math.round((currentTime - cue_in) * 10) / 10;
|
|
|
|
this.updateRegions();
|
|
},
|
|
setFadeOut() {
|
|
let currentTime = this.$refs.waveform.getCurrentTime();
|
|
let duration = this.$refs.waveform.getDuration();
|
|
let cue_out = this.form.cue_out || duration;
|
|
|
|
this.form.fade_out = Math.round((cue_out - currentTime) * 10) / 10;
|
|
|
|
this.updateRegions();
|
|
},
|
|
updateRegions() {
|
|
let duration = this.$refs.waveform.getDuration();
|
|
|
|
let cue_in = this.form.cue_in || 0;
|
|
let cue_out = this.form.cue_out || duration;
|
|
|
|
let fade_overlap = this.form.fade_overlap;
|
|
let fade_in = this.form.fade_in;
|
|
let fade_out = this.form.fade_out;
|
|
|
|
this.$refs.waveform.clearRegions();
|
|
|
|
// Create cue region
|
|
this.$refs.waveform.addRegion(cue_in, cue_out, 'hsla(207,90%,54%,0.4)');
|
|
|
|
// Create overlap region
|
|
if (fade_overlap > cue_in) {
|
|
this.$refs.waveform.addRegion(cue_out - fade_overlap, cue_out, 'hsla(29,100%,48%,0.4)');
|
|
}
|
|
|
|
// Create fade regions
|
|
if (fade_in) {
|
|
this.$refs.waveform.addRegion(cue_in, fade_in + cue_in, 'hsla(351,100%,48%,0.4)');
|
|
}
|
|
if (fade_out) {
|
|
this.$refs.waveform.addRegion(cue_out - fade_out, cue_out, 'hsla(351,100%,48%,0.4)');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|