moved quality modal logic to quality modal component

This commit is contained in:
Roberto Tonino 2020-07-06 20:46:25 +02:00
parent 26ed9e6a7d
commit 45c9d02699
11 changed files with 58 additions and 75 deletions

File diff suppressed because one or more lines are too long

View File

@ -12,7 +12,6 @@ import $ from 'jquery'
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
import { toast } from '@/js/toasts.js' import { toast } from '@/js/toasts.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import Tabs from '@/js/tabs.js' import Tabs from '@/js/tabs.js'
import Search from '@/js/search.js' import Search from '@/js/search.js'
@ -22,14 +21,14 @@ function startApp() {
mountApp() mountApp()
Downloads.init() Downloads.init()
QualityModal.init()
Tabs.init() Tabs.init()
Search.linkListeners() Search.linkListeners()
TrackPreview.init() TrackPreview.init()
} }
function mountApp() { function mountApp() {
new Vue({ // TODO Remove the App instance from the window when deemix will be a complete Vue App
window.App = new Vue({
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')
} }

View File

@ -91,7 +91,6 @@
import { isEmpty, orderBy } from 'lodash-es' import { isEmpty, orderBy } from 'lodash-es'
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import { showView, updateSelected } from '@/js/tabs.js' import { showView, updateSelected } from '@/js/tabs.js'
import EventBus from '@/js/EventBus' import EventBus from '@/js/EventBus'
@ -128,7 +127,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
}, },
sortBy(key) { sortBy(key) {
if (key == this.sortKey) { if (key == this.sortKey) {

View File

@ -115,7 +115,6 @@
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js' import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import TrackPreview from '@/js/track-preview.js' import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js' import Utils from '@/js/utils.js'
@ -141,7 +140,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
}, },
getTrackList(event) { getTrackList(event) {
document.getElementById('content').scrollTo(0, 0) document.getElementById('content').scrollTo(0, 0)

View File

@ -185,7 +185,6 @@
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js' import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import TrackPreview from '@/js/track-preview.js' import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js' import Utils from '@/js/utils.js'
import { toast } from '@/js/toasts' import { toast } from '@/js/toasts'
@ -215,7 +214,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
}, },
updated_userSpotifyPlaylists(data) { updated_userSpotifyPlaylists(data) {
this.spotifyPlaylists = data this.spotifyPlaylists = data

View File

@ -56,7 +56,6 @@
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js' import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
export default { export default {
name: 'the-home-tab', name: 'the-home-tab',
@ -77,7 +76,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
}, },
initHome(data) { initHome(data) {
const { const {

View File

@ -440,7 +440,6 @@
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js' import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import TrackPreview from '@/js/track-preview.js' import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js' import Utils from '@/js/utils.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue' import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
@ -570,7 +569,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
}, },
numberWithDots: Utils.numberWithDots, numberWithDots: Utils.numberWithDots,
convertDuration: Utils.convertDuration, convertDuration: Utils.convertDuration,

View File

@ -1,5 +1,5 @@
<template functional> <template>
<div id="modal_quality" class="smallmodal"> <div id="modal_quality" class="smallmodal" v-show="open" @click="tryToDownloadTrack($event)" ref="modal">
<div class="smallmodal-content"> <div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button> <button class="quality-button" data-quality-value="9">Download FLAC</button>
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button> <button class="quality-button" data-quality-value="3">Download MP3 320kbps</button>
@ -12,7 +12,6 @@
</template> </template>
<style> <style>
.smallmodal { .smallmodal {
display: none;
position: fixed; position: fixed;
z-index: 1250; z-index: 1250;
left: 0; left: 0;
@ -20,7 +19,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgba(0, 0, 0, 0.4); background-color: hsla(0, 0%, 0%, 0.4);
animation-duration: 0.3s; animation-duration: 0.3s;
} }
@ -38,3 +37,44 @@
margin-bottom: 8px; margin-bottom: 8px;
} }
</style> </style>
<script>
import Downloads from '@/js/downloads.js'
export default {
data: () => ({
open: false,
url: ''
}),
mounted() {
this.$root.$on('QualityModal:open', this.openModal)
this.$refs.modal.addEventListener('webkitAnimationEnd', this.handleAnimationEnd)
},
methods: {
tryToDownloadTrack(event) {
const { target } = event
this.$refs.modal.classList.add('animated', 'fadeOut')
// If true, the click did not happen on a button but outside
if (!target.matches('.quality-button')) return
Downloads.sendAddToQueue(this.url, target.dataset.qualityValue)
},
openModal(link) {
this.url = link
this.open = true
this.$refs.modal.classList.add('animated', 'fadeIn')
},
handleAnimationEnd(event) {
const { animationName } = event
this.$refs.modal.classList.remove('animated', animationName)
if (animationName === 'fadeIn') return
this.open = false
}
}
}
</script>

View File

@ -151,7 +151,6 @@ import { isEmpty } from 'lodash-es'
import { socket } from '@/js/socket.js' import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js' import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import TrackPreview from '@/js/track-preview.js' import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js' import Utils from '@/js/utils.js'
import EventBus from '@/js/EventBus' import EventBus from '@/js/EventBus'
@ -187,7 +186,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link) Downloads.sendAddToQueue(e.currentTarget.dataset.link)
}, },
openQualityModal(e) { openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link) this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
}, },
toggleAll(e) { toggleAll(e) {
this.body.forEach(item => { this.body.forEach(item => {

View File

@ -1,50 +0,0 @@
import Downloads from '@/js/downloads.js'
const QualityModal = {
// Defaults
open: false,
url: '',
element: null
}
function init() {
QualityModal.element = document.getElementById('modal_quality')
linkListeners()
}
function open(link) {
QualityModal.url = link
QualityModal.element.style.display = 'block'
QualityModal.element.classList.add('animated', 'fadeIn')
}
function linkListeners() {
QualityModal.element.addEventListener('click', handleClick)
QualityModal.element.addEventListener('webkitAnimationEnd', handleAnimationEnd)
}
function handleClick(event) {
const { target } = event
QualityModal.element.classList.add('animated', 'fadeOut')
if (!target.matches('.quality-button')) {
return
}
let bitrate = target.dataset.qualityValue
Downloads.sendAddToQueue(QualityModal.url, bitrate)
}
function handleAnimationEnd() {
QualityModal.element.classList.remove('animated', QualityModal.open ? 'fadeOut' : 'fadeIn')
QualityModal.element.style.display = QualityModal.open ? 'none' : 'block'
QualityModal.open = !QualityModal.open
}
export default {
init,
open
}

View File

@ -1,5 +1,4 @@
import Utils from '@/js/utils.js' import Utils from '@/js/utils.js'
import QualityModal from '@/js/quality-modal.js'
import Downloads from '@/js/downloads.js' import Downloads from '@/js/downloads.js'
import Tabs from '@/js/tabs.js' import Tabs from '@/js/tabs.js'
import EventBus from '@/js/EventBus.js' import EventBus from '@/js/EventBus.js'
@ -31,7 +30,8 @@ function handleSearchBarKeyup(e) {
if (Utils.isValidURL(term)) { if (Utils.isValidURL(term)) {
if (e.ctrlKey) { if (e.ctrlKey) {
QualityModal.open(term) // ! Temporary
App.$root.$emit('QualityModal:open', term)
} else { } else {
if (window.main_selected == 'analyzer_tab') { if (window.main_selected == 'analyzer_tab') {
Tabs.analyzeLink(term) Tabs.analyzeLink(term)