Added preview volume slider in settings

public/index.html

@@ -1014,6 +1014,12 @@ <h3 class="settings-group__header settings-group__header--with-icon">
 									</select>
 								</div>
 
+								<div class="input_group">
+									<p class="input_group_text">Preview Volume</p>
+									<input type="range" @change="updateMaxVolume" min="0" max="100" step="1" class="slider" v-model.number="previewVolume.preview_max_volume">
+									<span>{{previewVolume.preview_max_volume}}%</span>
+								</div>
+
 								<div class="input_group">
 									<p class="input_group_text">Command to execute after download</p>
 									<p class="secondary-text">Leave blank for no action</p>

src/js/modules/components/settings-tab.js

@@ -11,7 +11,8 @@ const SettingsTab = new Vue({
 		defaultSettings: {},
 		lastUser: '',
 		spotifyUser: '',
-		slimDownloads: false
+		slimDownloads: false,
+		previewVolume: window.vol
 	}),
 	computed: {
 		changeSlimDownloads: {
@@ -37,6 +38,9 @@ const SettingsTab = new Vue({
 
 			toast('ARL copied to clipboard', 'assignment')
 		},
+		updateMaxVolume(){
+			localStorage.setItem('previewVolume', this.previewVolume.preview_max_volume)
+		},
 		saveSettings() {
 			this.lastSettings = { ...this.settings }
 			this.lastCredentials = { ...this.spotifyFeatures }
@@ -98,6 +102,14 @@ const SettingsTab = new Vue({
 
 		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
 
+		let volume = parseInt(localStorage.getItem('previewVolume'))
+		if (isNaN(volume)){
+			volume = 80
+			localStorage.setItem('previewVolume', volume)
+		}
+		window.vol.preview_max_volume = volume
+
+
 		socket.on('init_settings', this.initSettings)
 		socket.on('updateSettings', this.updateSettings)
 	}

src/js/modules/track-preview.js

@@ -1,7 +1,10 @@
 import $ from 'jquery'
 
 /* ===== Globals ====== */
-window.preview_max_volume = 1
+// Object is needed for vue proxy
+window.vol = {
+	preview_max_volume: 100
+}
 
 /* ===== Locals ===== */
 let preview_track = document.getElementById('preview-track')
@@ -10,17 +13,12 @@ let preview_stopped = true
 // init stuff
 function init() {
 	preview_track.volume = 1
-	/*preview_max_volume = parseFloat(localStorage.getItem("previewVolume"))
-  if (preview_max_volume === null){
-    preview_max_volume = 0.8
-    localStorage.setItem("previewVolume", preview_max_volume)
-  }*/
 
 	// start playing when track loaded
 	preview_track.addEventListener('canplay', function () {
 		preview_track.play()
 		preview_stopped = false
-		$(preview_track).animate({ volume: preview_max_volume }, 500)
+		$(preview_track).animate({ volume: vol.preview_max_volume/100 }, 500)
 	})
 
 	// auto fadeout when at the end of the song
@@ -75,7 +73,7 @@ function playPausePreview(e) {
 			preview_track.play()
 			preview_stopped = false
 			icon.text('pause')
-			$(preview_track).animate({ volume: preview_max_volume }, 500)
+			$(preview_track).animate({ volume: vol.preview_max_volume/100 }, 500)
 		} else {
 			preview_stopped = true
 			icon.text('play_arrow')