<script type="text/x-template" id="audio-playbackrate">
    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioPlaybackRate = false"
         @contextmenu.self="app.modals.audioPlaybackRate = false">
        <div class="modal-window">
            <div class="modal-header">
                <div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
                <button class="close-btn" @click="app.modals.audioPlaybackRate = false" :aria-label="app.getLz('action.close')"></button>
            </div>
            <div class="modal-content">
                <div class="md-option-line">
                    <div class="md-option-segment">
                        {{app.getLz('settings.option.audio.playbackRate')}}
                    </div>
                    <div class="md-option-segment playbackrate-text" v-if="this.playbackRate">
                        {{playbackRate}} ×
                    </div>
                    <div class="md-option-segment md-option-segment_auto">
                        <input type="range" :step="0.05" min="0.25" :max="2" @wheel="playbackRateWheel" v-model="playbackRate">
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
	Vue.component('audio-playbackrate', {
		template: '#audio-playbackrate',
		data: function () {
			return {
				app: this.$root,
				playbackRate: this.$root.cfg.audio.playbackRate
			}
		},
		watch: {
			playbackRate: function (newValue, _oldValue) {
                this.saveValue(newValue);
			}
		},
        methods: {
            playbackRateWheel(event) {
                if (app.checkScrollDirectionIsUp(event)) {
                    this.saveValue(this.$root.cfg.audio.playbackRate + 0.05);
                } else {
                    this.saveValue(this.$root.cfg.audio.playbackRate - 0.05);
                }
            },
            saveValue(newValue) {
                newValue = Number(newValue);
                if (newValue >= 0.25 && newValue <= 2) {
                    newValue = String(newValue).length > 4 ? newValue.toFixed(2) : newValue;
                    this.$root.mk.playbackRate = newValue;
                    this.$root.cfg.audio.playbackRate = newValue;
                    this.playbackRate = newValue;
                }
            }
        }
	});
</script>
