evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

moved track preview logic to Vue

Browse Source
This commit is contained in:
Roberto Tonino 2020-07-16 22:49:08 +02:00
parent 07df1f2847
commit 1a300a6b1b
10 changed files with 136 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -5,8 +5,8 @@ This is just the WebUI for deemix, it should be used with deemix-pyweb or someth
## What's left to do?
- Use Vue as much as possible
- First step: Single File Components
- Completely remove jQuery dependency
- First step: rewrite the app in Single File Components way ✅
- Second step: Remove jQuery
- Make the UI look coherent
- Style buttons
- Style text inputs

22
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

3
src/js/app.js
View File

@ -6,7 +6,6 @@ window.vol = {
}
import App from '@/js/App.vue'
import TrackPreview from '@/js/track-preview.js'
import $ from 'jquery'
import { socket } from '@/js/socket.js'
@ -17,9 +16,7 @@ import { init as initTabs } from '@/js/tabs.js'
function startApp() {
mountApp()
initTabs()
TrackPreview.init()
}
function mountApp() {

13
src/js/components/TheChartsTab.vue
View File

@ -115,7 +115,6 @@
import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
export default {
@ -131,9 +130,15 @@ export default {
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playPausePreview: TrackPreview.playPausePreview,
previewMouseEnter: TrackPreview.previewMouseEnter,
previewMouseLeave: TrackPreview.previewMouseLeave,
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
},
convertDuration: Utils.convertDuration,
addToQueue(e) {
e.stopPropagation()

13
src/js/components/TheFavoritesTab.vue
View File

@ -185,7 +185,6 @@
import { socket } from '@/js/socket.js'
import { showView, changeTab } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
import { toast } from '@/js/toasts'
@ -205,9 +204,15 @@ export default {
albumView: showView.bind(null, 'album'),
playlistView: showView.bind(null, 'playlist'),
spotifyPlaylistView: showView.bind(null, 'spotifyplaylist'),
playPausePreview: TrackPreview.playPausePreview,
previewMouseEnter: TrackPreview.previewMouseEnter,
previewMouseLeave: TrackPreview.previewMouseLeave,
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
},
convertDuration: Utils.convertDuration,
handleFavoritesTabClick(event) {
const {

13
src/js/components/TheMainSearch.vue
View File

@ -440,7 +440,6 @@
import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
@ -515,9 +514,15 @@ export default {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playlistView: showView.bind(null, 'playlist'),
playPausePreview: TrackPreview.playPausePreview,
previewMouseEnter: TrackPreview.previewMouseEnter,
previewMouseLeave: TrackPreview.previewMouseLeave,
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
previewMouseEnter(e) {
EventBus.$emit('trackPreview:previewMouseEnter', e)
},
previewMouseLeave(e) {
EventBus.$emit('trackPreview:previewMouseLeave', e)
},
handleSearchTabClick(event) {
const {
target,

95
src/js/components/TheTrackPreview.vue
View File

@ -1,29 +1,38 @@
<template>
<audio id="preview-track" @canplay="onCanPlay" @timeupdate="onTimeUpdate" ref="previewEl">
<audio id="preview-track" @canplay="onCanPlay" @timeupdate="onTimeUpdate" ref="preview">
<source id="preview-track_source" src="" type="audio/mpeg" />
</audio>
</template>
<script>
import $ from 'jquery'
import EventBus from '@/js/EventBus'
export default {
data: () => ({
previewStopped: false
}),
mounted() {
this.$refs.preview.volume = 1
EventBus.$on('trackPreview:playPausePreview', this.playPausePreview)
EventBus.$on('trackPreview:stopStackedTabsPreview', this.stopStackedTabsPreview)
EventBus.$on('trackPreview:previewMouseEnter', this.previewMouseEnter)
EventBus.$on('trackPreview:previewMouseLeave', this.previewMouseLeave)
},
methods: {
async onCanPlay() {
await this.$refs.previewEl.play()
await this.$refs.preview.play()
this.previewStopped = false
$(this.$refs.previewEl).animate({ volume: vol.preview_max_volume / 100 }, 500)
$(this.$refs.preview).animate({ volume: vol.preview_max_volume / 100 }, 500)
},
onTimeUpdate() {
// Prevents first time entering in this function
if (isNaN(this.$refs.previewEl.duration)) return
if (this.$refs.previewEl.currentTime <= this.$refs.previewEl.duration - 1) return
if (isNaN(this.$refs.preview.duration)) return
if (this.$refs.preview.currentTime <= this.$refs.preview.duration - 1) return
$(this.$refs.previewEl).animate({ volume: 0 }, 800)
$(this.$refs.preview).animate({ volume: 0 }, 800)
this.previewStopped = true
@ -31,6 +40,80 @@ export default {
$('*').removeAttr('playing')
$('.preview_controls').text('play_arrow')
$('.preview_playlist_controls').text('play_arrow')
},
playPausePreview(e) {
e.preventDefault()
const { currentTarget: obj } = event
var $icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
if ($(obj).attr('playing')) {
if (this.$refs.preview.paused) {
this.$refs.preview.play()
this.previewStopped = false
$icon.text('pause')
$(this.$refs.preview).animate({ volume: vol.preview_max_volume / 100 }, 500)
} else {
this.previewStopped = true
$icon.text('play_arrow')
$(this.$refs.preview).animate({ volume: 0 }, 250, 'swing', () => {
this.$refs.preview.pause()
})
}
} else {
$('*').removeAttr('playing')
$(obj).attr('playing', true)
$('.preview_controls').text('play_arrow')
$('.preview_playlist_controls').text('play_arrow')
$('.preview_controls').css({ opacity: 0 })
$icon.text('pause')
$icon.css({ 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()
})
}
},
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')
}
},
previewMouseEnter(e) {
$(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)
}
}
}
}

5
src/js/components/TracklistTab.vue
View File

@ -151,7 +151,6 @@ import { isEmpty } from 'lodash-es'
import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
import EventBus from '@/js/EventBus'
@ -171,7 +170,9 @@ export default {
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
playPausePreview: TrackPreview.playPausePreview,
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
reset() {
this.title = 'Loading...'
this.image = ''

9
src/js/tabs.js
View File

@ -1,4 +1,3 @@
import TrackPreview from '@/js/track-preview.js'
import { socket } from '@/js/socket.js'
import EventBus from '@/js/EventBus'
@ -91,7 +90,7 @@ export function changeTab(sidebarEl, section, tabName) {
/**
* Shows the passed tab, keeping track of the one that the user is coming from.
*
* Needs TrackPreview and EventBus
* Needs EventBus
*/
function showTab(type, id, back = false) {
if (window.windows_stack.length === 0) {
@ -115,13 +114,13 @@ function showTab(type, id, back = false) {
document.getElementById(window.tab).style.display = 'block'
TrackPreview.stopStackedTabsPreview()
EventBus.$emit('trackPreview:stopStackedTabsPreview')
}
/**
* Goes back to the previous tab according to the global window stack.
*
* Needs TrackPreview, EventBus and socket
* Needs EventBus and socket
*/
function backTab() {
if (window.windows_stack.length == 1) {
@ -145,7 +144,7 @@ function backTab() {
showTab(type, id, true)
}
TrackPreview.stopStackedTabsPreview()
EventBus.$emit('trackPreview:stopStackedTabsPreview')
}
function _linkListeners() {

104
src/js/track-preview.js
View File

@ -1,104 +0,0 @@
import $ from 'jquery'
/* ===== Locals ===== */
let preview_track
let preview_stopped = true
// init stuff
function init() {
preview_track = document.getElementById('preview-track')
preview_track.volume = 1
// start playing when track loaded
preview_track.addEventListener('canplay', function() {
preview_stopped = false
})
// auto fadeout when at the end of the song
preview_track.addEventListener('timeupdate', function() {
if (preview_track.currentTime > preview_track.duration - 1) {
preview_stopped = true
}
})
}
// on modal closing
function stopStackedTabsPreview() {
if (
$('.preview_playlist_controls').filter(function() {
return $(this).attr('playing')
}).length > 0
) {
$(preview_track).animate({ volume: 0 }, 800)
preview_stopped = true
$('.preview_playlist_controls').removeAttr('playing')
$('.preview_playlist_controls').text('play_arrow')
}
}
// on hover event
function previewMouseEnter(e) {
$(e.currentTarget).css({ opacity: 1 })
}
function previewMouseLeave(event) {
const { currentTarget: obj } = event
if (
($(obj)
.parent()
.attr('playing') &&
preview_stopped) ||
!$(obj)
.parent()
.attr('playing')
) {
$(obj).css({ opacity: 0 }, 200)
}
}
// on click event
function playPausePreview(e) {
e.preventDefault()
const { currentTarget: obj } = event
var $icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
if ($(obj).attr('playing')) {
if (preview_track.paused) {
preview_track.play()
preview_stopped = false
$icon.text('pause')
$(preview_track).animate({ volume: vol.preview_max_volume / 100 }, 500)
} else {
preview_stopped = true
$icon.text('play_arrow')
$(preview_track).animate({ volume: 0 }, 250, 'swing', () => {
preview_track.pause()
})
}
} else {
$('*').removeAttr('playing')
$(obj).attr('playing', true)
$('.preview_controls').text('play_arrow')
$('.preview_playlist_controls').text('play_arrow')
$('.preview_controls').css({ opacity: 0 })
$icon.text('pause')
$icon.css({ opacity: 1 })
preview_stopped = false
$(preview_track).animate({ volume: 0 }, 250, 'swing', () => {
preview_track.pause()
$('#preview-track_source').prop('src', $(obj).data('preview'))
preview_track.load()
})
}
}
export default {
init,
stopStackedTabsPreview,
previewMouseEnter,
previewMouseLeave,
playPausePreview
}