danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

organizations of js files

This commit is contained in:
Roberto Tonino 2020-04-28 20:42:22 +02:00
parent 7997950fa8
commit 2178b4fad7
9 changed files with 104 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/js/app.js
View File

@ -2,9 +2,9 @@ import { socket } from './modules/socket.js'
import { toast } from './modules/toasts.js'
import Downloads from './modules/downloads.js'
import QualityModal from './modules/quality-modal.js'
import { Tabs } from './modules/tabs.js'
import Tabs from './modules/tabs.js'
import Search from './modules/search.js'
import { initTrackPreview } from './modules/track-preview.js'
import TrackPreview from './modules/track-preview.js'
/* ===== Socketio listeners ===== */
@ -75,7 +75,7 @@ function startApp() {
QualityModal.init()
Tabs.linkListeners()
Search.linkListeners()
initTrackPreview()
TrackPreview.init()
if (localStorage.getItem('arl')) {
let arl = localStorage.getItem('arl')

8
public/js/modules/artist-tab.js → public/js/modules/components/artist-tab.js
View File

@ -1,7 +1,7 @@
import { socket } from './socket.js'
import { albumView } from './tabs.js'
import Downloads from './downloads.js'
import QualityModal from './quality-modal.js'
import { socket } from '../socket.js'
import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js'
import { albumView } from '../tabs.js'
const ArtistTab = new Vue({
data() {

6
public/js/modules/link-analyzer-tab.js → public/js/modules/components/link-analyzer-tab.js
View File

@ -1,6 +1,6 @@
import { socket } from './socket.js'
import { albumView } from './tabs.js'
import Utils from './utils.js'
import { socket } from '../socket.js'
import { albumView } from '../tabs.js'
import Utils from '../utils.js'
const LinkAnalyzerTab = new Vue({
data() {

20
public/js/modules/main-search.js → public/js/modules/components/main-search.js
View File

@ -1,9 +1,9 @@
import { socket } from './socket.js'
import { artistView, albumView, playlistView } from './tabs.js'
import Downloads from './downloads.js'
import QualityModal from './quality-modal.js'
import { playPausePreview, previewMouseEnter, previewMouseLeave } from './track-preview.js'
import Utils from './utils.js'
import { socket } from '../socket.js'
import { artistView, albumView, playlistView } from '../tabs.js'
import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js'
import TrackPreview from '../track-preview.js'
import Utils from '../utils.js'
const MainSearch = new Vue({
data: {
@ -54,9 +54,9 @@ const MainSearch = new Vue({
artistView,
albumView,
playlistView,
playPausePreview,
previewMouseEnter,
previewMouseLeave,
playPausePreview: TrackPreview.playPausePreview,
previewMouseEnter: TrackPreview.previewMouseEnter,
previewMouseLeave: TrackPreview.previewMouseLeave,
handleClickTopResult(event) {
let topResultType = this.results.allTab.TOP_RESULT[0].type
@ -88,7 +88,7 @@ const MainSearch = new Vue({
e.preventDefault()
QualityModal.open(e.currentTarget.dataset.link)
},
numberWithDots: Utils.numberWithDots,
numberWithDots: Utils.numberWithDots,
convertDuration: Utils.convertDuration,
search(type) {
socket.emit('search', {

4
public/js/modules/settings-tab.js → public/js/modules/components/settings-tab.js
View File

@ -1,5 +1,5 @@
import { toast } from './toasts.js'
import { socket } from './socket.js'
import { toast } from '../toasts.js'
import { socket } from '../socket.js'
const SettingsTab = new Vue({
data() {

12
public/js/modules/tracklist-tab.js → public/js/modules/components/tracklist-tab.js
View File

@ -1,8 +1,8 @@
import { socket } from './socket.js'
import { artistView, albumView } from './tabs.js'
import Downloads from './downloads.js'
import QualityModal from './quality-modal.js'
import { playPausePreview } from './track-preview.js'
import { socket } from '../socket.js'
import { albumView, artistView } from '../tabs.js'
import Downloads from '../downloads.js'
import QualityModal from '../quality-modal.js'
import TrackPreview from '../track-preview.js'
const TracklistTab = new Vue({
data: {
@ -20,7 +20,7 @@ const TracklistTab = new Vue({
methods: {
artistView,
albumView,
playPausePreview,
playPausePreview: TrackPreview.playPausePreview,
reset() {
this.title = 'Loading...'
this.image = ''

74
public/js/modules/search.js
View File

@ -1,53 +1,55 @@
import MainSearch from './main-search.js'
import MainSearch from './components/main-search.js'
import Utils from './utils.js'
import QualityModal from './quality-modal.js'
import Downloads from './downloads.js'
import { socket } from './socket.js'
import { analyzeLink } from './tabs.js'
import Tabs from './tabs.js'
export default class Search {
static linkListeners() {
document.getElementById('content').addEventListener('scroll', Utils.debounce(Search.handleContentScroll, 100))
document.getElementById('searchbar').addEventListener('keyup', Search.handleSearchBarKeyup)
}
function linkListeners() {
document.getElementById('content').addEventListener('scroll', Utils.debounce(handleContentScroll, 100))
document.getElementById('searchbar').addEventListener('keyup', handleSearchBarKeyup)
}
// Load more content when the search page is at the end
static handleContentScroll(event) {
let contentElement = event.target
// Load more content when the search page is at the end
function handleContentScroll(event) {
let contentElement = event.target
if (contentElement.scrollTop + contentElement.clientHeight >= contentElement.scrollHeight) {
if (
main_selected === 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
) {
MainSearch.scrolledSearch(search_selected.split('_')[0])
}
if (contentElement.scrollTop + contentElement.clientHeight >= contentElement.scrollHeight) {
if (
main_selected === 'search_tab' &&
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(search_selected) != -1
) {
MainSearch.scrolledSearch(search_selected.split('_')[0])
}
}
}
static handleSearchBarKeyup(e) {
if (e.keyCode == 13) {
let term = this.value
if (Utils.isValidURL(term)) {
if (e.ctrlKey) {
QualityModal.open(term)
} else {
if (window.main_selected == 'analyzer_tab') {
analyzeLink(term)
} else {
Downloads.sendAddToQueue(term)
}
}
function handleSearchBarKeyup(e) {
if (e.keyCode == 13) {
let term = this.value
if (Utils.isValidURL(term)) {
if (e.ctrlKey) {
QualityModal.open(term)
} else {
if (term != MainSearch.query || main_selected == 'search_tab') {
document.getElementById('search_tab_content').style.display = 'none'
socket.emit('mainSearch', { term: term })
if (window.main_selected == 'analyzer_tab') {
Tabs.analyzeLink(term)
} else {
document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
Downloads.sendAddToQueue(term)
}
}
} else {
if (term != MainSearch.query || main_selected == 'search_tab') {
document.getElementById('search_tab_content').style.display = 'none'
socket.emit('mainSearch', { term: term })
} else {
document.getElementById('search_all_tab').click()
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
}
}
}
}
export default {
linkListeners
}

61
public/js/modules/tabs.js
View File

@ -1,10 +1,10 @@
import ArtistTab from './artist-tab.js'
import TracklistTab from './tracklist-tab.js'
import LinkAnalyzerTab from './link-analyzer-tab.js'
import ArtistTab from './components/artist-tab.js'
import TracklistTab from './components/tracklist-tab.js'
import LinkAnalyzerTab from './components/link-analyzer-tab.js'
import { socket } from './socket.js'
import SettingsTab from './settings-tab.js'
import MainSearch from './main-search.js'
import { stopStackedTabsPreview } from './track-preview.js'
import SettingsTab from './components/settings-tab.js'
import MainSearch from './components/main-search.js'
import TrackPreview from './track-preview.js'
/* ===== Globals ====== */
window.search_selected = ''
@ -35,23 +35,21 @@ export function playlistView(ev) {
showTab('playlist', id)
}
export function analyzeLink(link) {
function analyzeLink(link) {
console.log('Analyzing: ' + link)
LinkAnalyzerTab.reset()
socket.emit('analyzeLink', link)
}
export class Tabs {
static linkListeners() {
document.getElementById('search_tab').addEventListener('click', handleTabClick)
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
function linkListeners() {
document.getElementById('search_tab').addEventListener('click', handleTabClick)
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
const backButtons = Array.from(document.getElementsByClassName('back-button'))
const backButtons = Array.from(document.getElementsByClassName('back-button'))
backButtons.forEach(button => {
button.addEventListener('click', backTab)
})
}
backButtons.forEach(button => {
button.addEventListener('click', backTab)
})
}
/**
@ -122,14 +120,6 @@ function handleTabClick(event) {
}
}
// Uses:
// 1. windows_stack
// 2. currentStack
// 3. main_selected
// 4. SettingsTab
// 5. lastSettings
// 6. search_selected
// 7. MainSearch
function changeTab(sidebarEl, section, tabName) {
windows_stack = []
currentStack = {}
@ -170,10 +160,6 @@ function changeTab(sidebarEl, section, tabName) {
}
}
// Uses:
// 1. windows_stack
// 2. main_selected
// 3. currentStack
function showTab(type, id, back = false) {
if (windows_stack.length == 0) {
windows_stack.push({ tab: main_selected })
@ -190,16 +176,9 @@ function showTab(type, id, back = false) {
tabcontent[i].style.display = 'none'
}
document.getElementById(tab).style.display = 'block'
stopStackedTabsPreview()
TrackPreview.stopStackedTabsPreview()
}
// Uses:
// 1. windows_stack
// 2. main_selected
// 3. showTab
// 4. ArtistTab
// 5. TracklistTab
// 6. socket
function backTab() {
if (windows_stack.length == 1) {
document.getElementById(`main_${main_selected}link`).click()
@ -213,5 +192,13 @@ function backTab() {
socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
showTab(tabObj.type, tabObj.id, true)
}
stopStackedTabsPreview()
TrackPreview.stopStackedTabsPreview()
}
export default {
linkListeners,
artistView,
albumView,
playlistView,
analyzeLink
}

19
public/js/modules/track-preview.js
View File

@ -6,7 +6,7 @@ let preview_track = document.getElementById('preview-track')
let preview_stopped = true
// init stuff
export function initTrackPreview() {
function init() {
preview_track.volume = 1
/*preview_max_volume = parseFloat(localStorage.getItem("previewVolume"))
if (preview_max_volume === null){
@ -35,7 +35,7 @@ export function initTrackPreview() {
}
// on modal closing
export function stopStackedTabsPreview() {
function stopStackedTabsPreview() {
if (
$('.preview_playlist_controls').filter(function () {
return $(this).attr('playing')
@ -49,10 +49,11 @@ export function stopStackedTabsPreview() {
}
// on hover event
export function previewMouseEnter(e) {
function previewMouseEnter(e) {
$(e.currentTarget).css({ opacity: 1 })
}
export function previewMouseLeave(e) {
function previewMouseLeave(e) {
let obj = e.currentTarget
if (($(obj).parent().attr('playing') && preview_stopped) || !$(obj).parent().attr('playing')) {
$(obj).css({ opacity: 0 }, 200)
@ -60,7 +61,7 @@ export function previewMouseLeave(e) {
}
// on click event
export function playPausePreview(e) {
function playPausePreview(e) {
e.preventDefault()
console.log('PlayPause')
let obj = e.currentTarget
@ -94,3 +95,11 @@ export function playPausePreview(e) {
})
}
}
export default {
init,
stopStackedTabsPreview,
previewMouseEnter,
previewMouseLeave,
playPausePreview
}