perf: removed jQuery; chore: updated COMPILE-UI

This commit is contained in:
Roberto Tonino 2020-09-22 21:59:18 +02:00
parent b00d6e70a6
commit 717a1a87b8
5 changed files with 199 additions and 91 deletions

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -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.pause()
})
// 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.pause()
$('#preview-track_source').prop('src', $(obj).data('preview'))
this.$refs.preview.load()
})
// 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'))
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)
this.previewStopped = true
$('.preview_playlist_controls').removeAttr('playing')
$('.preview_playlist_controls').text('play_arrow')
}
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
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
}
}
}

View File

@ -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
}

View File

@ -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)
}
}
}