perf: removed jQuery; chore: updated COMPILE-UI

COMPILE-UI.md

@@ -34,6 +34,8 @@ By simply running
 $ npm run dev
 ```
 
+P.S.: You need to be inside the [deemix-pyweb](https://codeberg.org/RemixDev/deemix-pyweb) repo to have the server working correctly.
+
 you will have 3 tasks running at the same time:
 - the server
 - the [rollup](https://rollupjs.org/guide/en/) watcher pointing to the configured `.js` file and ready to re-bundle

src/components/TheTrackPreview.vue

@@ -5,9 +5,11 @@
 </template>
 
 <script>
-import $ from 'jquery'
+// import $ from 'jquery'
 import EventBus from '@/utils/EventBus'
 
+import { adjustVolume } from '@/utils/adjust-volume'
+
 export default {
 	data: () => ({
 		previewStopped: false
@@ -25,90 +27,158 @@ export default {
 			await this.$refs.preview.play()
 
 			this.previewStopped = false
-			$(this.$refs.preview).animate({ volume: window.vol.preview_max_volume / 100 }, 500)
+
+			await adjustVolume(this.$refs.preview, window.vol.preview_max_volume / 100, { duration: 500 })
+			// $(this.$refs.preview).animate({ volume: window.vol.preview_max_volume / 100 }, 500)
+			// this.$refs.preview.volume = window.vol.preview_max_volume / 100
 		},
-		onTimeUpdate() {
+		async onTimeUpdate() {
 			// Prevents first time entering in this function
 			if (isNaN(this.$refs.preview.duration)) return
+
 			let duration = this.$refs.preview.duration
-			if (!isFinite(duration)) duration = 30
+
+			if (!isFinite(duration)) {
+				duration = 30
+			}
+
 			if (duration - this.$refs.preview.currentTime >= 1) return
 			if (this.previewStopped) return
 
-			$(this.$refs.preview).animate({ volume: 0 }, 800)
+			await adjustVolume(this.$refs.preview, 0, { duration: 800 })
+			// this.$refs.preview.volume = 0
+			// $(this.$refs.preview).animate({ volume: 0 }, 800)
 
 			this.previewStopped = true
 
-			$('a[playing] > .preview_controls').css({ opacity: 0 })
-			$('*').removeAttr('playing')
-			$('.preview_controls').text('play_arrow')
-			$('.preview_playlist_controls').text('play_arrow')
+			// $('a[playing] > .preview_controls').css({ opacity: 0 })
+
+			document.querySelectorAll('a[playing] > .preview_controls').forEach(control => {
+				control.style.opacity = 0
+			})
+
+			// $('*').removeAttr('playing')
+			document.querySelectorAll('*').forEach(el => {
+				el.removeAttribute('playing')
+			})
+
+			// $('.preview_controls').text('play_arrow')
+			// $('.preview_playlist_controls').text('play_arrow')
+			document.querySelectorAll('.preview_controls, .preview_playlist_controls').forEach(el => {
+				el.textContent = 'play_arrow'
+			})
 		},
-		playPausePreview(e) {
+		async playPausePreview(e) {
 			e.preventDefault()
 			e.stopPropagation()
 
 			const { currentTarget: obj } = event
 
-			var $icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
+			// var $icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
+			var icon = obj.tagName == 'I' ? obj : obj.querySelector('i')
 
-			if ($(obj).attr('playing')) {
+			// if ($(obj).attr('playing')) {
+			if (obj.hasAttribute('playing')) {
 				if (this.$refs.preview.paused) {
 					this.$refs.preview.play()
 					this.previewStopped = false
 
-					$icon.text('pause')
+					// $icon.text('pause')
+					icon.innerText = 'pause'
 
-					$(this.$refs.preview).animate({ volume: window.vol.preview_max_volume / 100 }, 500)
+					// this.$refs.preview.volume = window.vol.preview_max_volume / 100
+					await adjustVolume(this.$refs.preview, window.vol.preview_max_volume / 100, { duration: 500 })
+					// $(this.$refs.preview).animate({ volume: window.vol.preview_max_volume / 100 }, 500)
 				} else {
 					this.previewStopped = true
 
-					$icon.text('play_arrow')
+					// $icon.text('play_arrow')
+					icon.innerText = 'play_arrow'
 
-					$(this.$refs.preview).animate({ volume: 0 }, 250, 'swing', () => {
+					// this.$refs.preview.volume = 0
+
+					await adjustVolume(this.$refs.preview, 0, { duration: 250 })
+					// $(this.$refs.preview).animate({ volume: 0 }, 250, 'swing', () => {
 					this.$refs.preview.pause()
-					})
+					// })
 				}
 			} else {
-				$('*').removeAttr('playing')
-				$(obj).attr('playing', true)
+				// $('*').removeAttr('playing')
+				document.querySelectorAll('*').forEach(el => {
+					el.removeAttribute('playing')
+				})
+				// $(obj).attr('playing', true)
+				obj.setAttribute('playing', true)
 
-				$('.preview_controls').text('play_arrow')
-				$('.preview_playlist_controls').text('play_arrow')
-				$('.preview_controls').css({ opacity: 0 })
+				// $('.preview_controls').text('play_arrow')
+				// $('.preview_playlist_controls').text('play_arrow')
 
-				$icon.text('pause')
-				$icon.css({ opacity: 1 })
+				document.querySelectorAll('.preview_controls, .preview_playlist_controls').forEach(el => {
+					el.textContent = 'play_arrow'
+				})
+
+				// $('.preview_controls').css({ opacity: 0 })
+				document.querySelectorAll('.preview_controls').forEach(el => {
+					el.style.opacity = 0
+				})
+
+				// $icon.text('pause')
+				// $icon.css({ opacity: 1 })
+				icon.innerText = 'pause'
+				icon.style.opacity = 1
 
 				this.previewStopped = false
 
-				$(this.$refs.preview).animate({ volume: 0 }, 250, 'swing', () => {
+				// this.$refs.preview.volume = 0
+				// $(this.$refs.preview).animate({ volume: 0 }, 250, 'swing', () => {
+				await adjustVolume(this.$refs.preview, 0, { duration: 250 })
 				this.$refs.preview.pause()
-					$('#preview-track_source').prop('src', $(obj).data('preview'))
+
+				// $('#preview-track_source').prop('src', $(obj).data('preview'))
+				document.getElementById('preview-track_source').src = obj.getAttribute('data-preview')
+
 				this.$refs.preview.load()
-				})
+				// })
 			}
 		},
-		stopStackedTabsPreview() {
-			if (
-				$('.preview_playlist_controls').filter(function () {
-					return $(this).attr('playing')
-				}).length > 0
-			) {
-				$(this.$refs.preview).animate({ volume: 0 }, 800)
+		async stopStackedTabsPreview() {
+			let controls = Array.prototype.slice.call(document.querySelectorAll('.preview_playlist_controls[playing]'))
+
+			// $('.preview_playlist_controls').filter(function () {
+			// 	return $(this).attr('playing')
+			// }).length
+
+			if (controls.length === 0) return
+
+			// $(this.$refs.preview).animate({ volume: 0 }, 800)
+			await adjustVolume(this.$refs.preview, 0, { duration: 800 })
+			// this.$refs.preview.volume = 0
 			this.previewStopped = true
-				$('.preview_playlist_controls').removeAttr('playing')
-				$('.preview_playlist_controls').text('play_arrow')
-			}
+
+			controls.forEach(control => {
+				control.removeAttribute('playing')
+				control.innerText = 'play_arrow'
+			})
+
+			// $('.preview_playlist_controls').removeAttr('playing')
+			// $('.preview_playlist_controls').text('play_arrow')
 		},
 		previewMouseEnter(e) {
-			$(e.currentTarget).css({ opacity: 1 })
+			e.currentTarget.style.opacity = 1
+			// $(e.currentTarget).css({ opacity: 1 })
 		},
 		previewMouseLeave(event) {
 			const { currentTarget: obj } = event
 
-			if (($(obj).parent().attr('playing') && this.previewStopped) || !$(obj).parent().attr('playing')) {
-				$(obj).css({ opacity: 0 }, 200)
+			const parentIsPlaying = obj.parentElement.hasAttribute('playing')
+
+			// if (($(obj).parent().attr('playing') && this.previewStopped) || !$(obj).parent().attr('playing')) {
+			// 	$(obj).css({ opacity: 0 }, 200)
+			// }
+
+			if ((parentIsPlaying && this.previewStopped) || !parentIsPlaying) {
+				// $(obj).css({ opacity: 0 }, 200)
+				obj.style.opacity = 0
 			}
 		}
 	}

src/utils/adjust-volume.js

@@ -0,0 +1,28 @@
+// https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out#answer-13149848
+export async function adjustVolume(element, newVolume, { duration = 1000, easing = swing, interval = 13 } = {}) {
+	const originalVolume = element.volume
+	const delta = newVolume - originalVolume
+
+	if (!delta || !duration || !easing || !interval) {
+		element.volume = newVolume
+		return Promise.resolve()
+	}
+
+	const ticks = Math.floor(duration / interval)
+	let tick = 1
+
+	return new Promise(resolve => {
+		const timer = setInterval(() => {
+			element.volume = originalVolume + easing(tick / ticks) * delta
+			// console.log(element.volume)
+			if (++tick === ticks) {
+				clearInterval(timer)
+				resolve()
+			}
+		}, interval)
+	})
+}
+
+export function swing(p) {
+	return 0.5 - Math.cos(p * Math.PI) / 2
+}

src/utils/toasts.js

@@ -1,5 +1,4 @@
 import Toastify from 'toastify-js'
-import $ from 'jquery'
 
 import { socket } from '@/utils/socket'
 
@@ -8,49 +7,83 @@ let toastsWithId = {}
 export const toast = function(msg, icon = null, dismiss = true, id = null) {
 	if (toastsWithId[id]) {
 		let toastObj = toastsWithId[id]
-		let toastDOM = $(`div.toastify[toast_id=${id}]`)
+
+		let toastElement = document.querySelectorAll(`div.toastify[toast_id=${id}]`)
+
 		if (msg) {
-			toastDOM.find('.toast-message').html(msg)
+			toastElement.forEach(toast => {
+				const messages = toast.querySelectorAll('.toast-message')
+
+				messages.forEach(message => {
+					message.innerHTML = msg
+				})
+			})
 		}
+
 		if (icon) {
-			if (icon == 'loading') icon = `<div class="circle-loader"></div>`
-			else icon = `<i class="material-icons">${icon}</i>`
-			toastDOM.find('.toast-icon').html(icon)
+			if (icon == 'loading') {
+				icon = `<div class="circle-loader"></div>`
+			} else {
+				icon = `<i class="material-icons">${icon}</i>`
+			}
+
+			toastElement.forEach(toast => {
+				const icons = toast.querySelectorAll('.toast-icon')
+
+				icons.forEach(toastIcon => {
+					toastIcon.innerHTML = icon
+				})
+			})
 		}
 		if (dismiss !== null && dismiss) {
-			toastDOM.addClass('dismissable')
-			setTimeout(function() {
+			toastElement.forEach(toast => {
+				toast.classList.add('dismissable')
+			})
+
+			setTimeout(() => {
 				toastObj.hideToast()
+
 				delete toastsWithId[id]
 			}, 3000)
 		}
 	} else {
-		if (icon == null) icon = ''
-		else if (icon == 'loading') icon = `<div class="circle-loader"></div>`
-		else icon = `<i class="material-icons">${icon}</i>`
+		if (icon == null) {
+			icon = ''
+		} else if (icon == 'loading') {
+			icon = `<div class="circle-loader"></div>`
+		} else {
+			icon = `<i class="material-icons">${icon}</i>`
+		}
+
 		let toastObj = Toastify({
 			text: `<span class="toast-icon">${icon}</span><span class="toast-message">${msg}</toast>`,
 			duration: dismiss ? 3000 : 0,
 			gravity: 'bottom',
 			position: 'left',
 			className: dismiss ? 'dismissable' : '',
-			onClick: function(){
+			onClick: function() {
 				let dismissable = true
-				if (id){
+
+				if (id) {
 					let toastClasses = document.querySelector(`div.toastify[toast_id=${id}]`).classList
-					if (toastClasses){
-						dismissable = Array.from(toastClasses).indexOf('dismissable') != -1
+
+					if (toastClasses) {
+						dismissable = Array.prototype.slice.call(toastClasses).indexOf('dismissable') != -1
 					}
 				}
 				if (toastObj && dismissable) {
 					toastObj.hideToast()
-					if (id) delete toastsWithId[id]
+
+					if (id) {
+						delete toastsWithId[id]
+					}
 				}
 			}
 		}).showToast()
 		if (id) {
 			toastsWithId[id] = toastObj
-			$(toastObj.toastElement).attr('toast_id', id)
+
+			toastObj.toastElement.setAttribute('toast_id', id)
 		}
 	}
 }