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 { toast } from '@/js/toasts.js'
import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import Tabs from '@/js/tabs.js'
import Search from '@/js/search.js'
@ -22,14 +21,14 @@ function startApp() {
mountApp()
Downloads.init()
QualityModal.init()
Tabs.init()
Search.linkListeners()
TrackPreview.init()
}
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)
}).$mount('#app')
}

View File

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

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 QualityModal from '@/js/quality-modal.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
@ -141,7 +140,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link)
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
getTrackList(event) {
document.getElementById('content').scrollTo(0, 0)

View File

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

View File

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

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 QualityModal from '@/js/quality-modal.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
@ -570,7 +569,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link)
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
numberWithDots: Utils.numberWithDots,
convertDuration: Utils.convertDuration,

View File

@ -1,5 +1,5 @@
<template functional>
<div id="modal_quality" class="smallmodal">
<template>
<div id="modal_quality" class="smallmodal" v-show="open" @click="tryToDownloadTrack($event)" ref="modal">
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button>
<button class="quality-button" data-quality-value="3">Download MP3 320kbps</button>
@ -12,7 +12,6 @@
</template>
<style>
.smallmodal {
display: none;
position: fixed;
z-index: 1250;
left: 0;
@ -20,7 +19,7 @@
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
background-color: hsla(0, 0%, 0%, 0.4);
animation-duration: 0.3s;
}
@ -38,3 +37,44 @@
margin-bottom: 8px;
}
</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 { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js'
import QualityModal from '@/js/quality-modal.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
import EventBus from '@/js/EventBus'
@ -187,7 +186,7 @@ export default {
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
},
openQualityModal(e) {
QualityModal.open(e.currentTarget.dataset.link)
this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
},
toggleAll(e) {
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 QualityModal from '@/js/quality-modal.js'
import Downloads from '@/js/downloads.js'
import Tabs from '@/js/tabs.js'
import EventBus from '@/js/EventBus.js'
@ -31,7 +30,8 @@ function handleSearchBarKeyup(e) {
if (Utils.isValidURL(term)) {
if (e.ctrlKey) {
QualityModal.open(term)
// ! Temporary
App.$root.$emit('QualityModal:open', term)
} else {
if (window.main_selected == 'analyzer_tab') {
Tabs.analyzeLink(term)