moved quality modal logic to quality modal component
This commit is contained in:
parent
26ed9e6a7d
commit
45c9d02699
File diff suppressed because one or more lines are too long
@ -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')
|
||||||
}
|
}
|
||||||
|
@ -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) {
|
||||||
|
@ -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)
|
||||||
|
@ -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
|
||||||
|
@ -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 {
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -37,4 +36,45 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
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>
|
@ -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 => {
|
||||||
|
@ -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
|
|
||||||
}
|
|
@ -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)
|
||||||
|
Loading…
Reference in New Issue
Block a user