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 { toast } from './modules/toasts.js'
import Downloads from './modules/downloads.js' import Downloads from './modules/downloads.js'
import QualityModal from './modules/quality-modal.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 Search from './modules/search.js'
import { initTrackPreview } from './modules/track-preview.js' import TrackPreview from './modules/track-preview.js'
/* ===== Socketio listeners ===== */ /* ===== Socketio listeners ===== */
@ -75,7 +75,7 @@ function startApp() {
QualityModal.init() QualityModal.init()
Tabs.linkListeners() Tabs.linkListeners()
Search.linkListeners() Search.linkListeners()
initTrackPreview() TrackPreview.init()
if (localStorage.getItem('arl')) { if (localStorage.getItem('arl')) {
let arl = 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 { socket } from '../socket.js'
import { albumView } from './tabs.js' import Downloads from '../downloads.js'
import Downloads from './downloads.js' import QualityModal from '../quality-modal.js'
import QualityModal from './quality-modal.js' import { albumView } from '../tabs.js'
const ArtistTab = new Vue({ const ArtistTab = new Vue({
data() { 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 { socket } from '../socket.js'
import { albumView } from './tabs.js' import { albumView } from '../tabs.js'
import Utils from './utils.js' import Utils from '../utils.js'
const LinkAnalyzerTab = new Vue({ const LinkAnalyzerTab = new Vue({
data() { data() {

18
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 { socket } from '../socket.js'
import { artistView, albumView, playlistView } from './tabs.js' import { artistView, albumView, playlistView } from '../tabs.js'
import Downloads from './downloads.js' import Downloads from '../downloads.js'
import QualityModal from './quality-modal.js' import QualityModal from '../quality-modal.js'
import { playPausePreview, previewMouseEnter, previewMouseLeave } from './track-preview.js' import TrackPreview from '../track-preview.js'
import Utils from './utils.js' import Utils from '../utils.js'
const MainSearch = new Vue({ const MainSearch = new Vue({
data: { data: {
@ -54,9 +54,9 @@ const MainSearch = new Vue({
artistView, artistView,
albumView, albumView,
playlistView, playlistView,
playPausePreview, playPausePreview: TrackPreview.playPausePreview,
previewMouseEnter, previewMouseEnter: TrackPreview.previewMouseEnter,
previewMouseLeave, previewMouseLeave: TrackPreview.previewMouseLeave,
handleClickTopResult(event) { handleClickTopResult(event) {
let topResultType = this.results.allTab.TOP_RESULT[0].type let topResultType = this.results.allTab.TOP_RESULT[0].type

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 { toast } from '../toasts.js'
import { socket } from './socket.js' import { socket } from '../socket.js'
const SettingsTab = new Vue({ const SettingsTab = new Vue({
data() { 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 { socket } from '../socket.js'
import { artistView, albumView } from './tabs.js' import { albumView, artistView } from '../tabs.js'
import Downloads from './downloads.js' import Downloads from '../downloads.js'
import QualityModal from './quality-modal.js' import QualityModal from '../quality-modal.js'
import { playPausePreview } from './track-preview.js' import TrackPreview from '../track-preview.js'
const TracklistTab = new Vue({ const TracklistTab = new Vue({
data: { data: {
@ -20,7 +20,7 @@ const TracklistTab = new Vue({
methods: { methods: {
artistView, artistView,
albumView, albumView,
playPausePreview, playPausePreview: TrackPreview.playPausePreview,
reset() { reset() {
this.title = 'Loading...' this.title = 'Loading...'
this.image = '' this.image = ''

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

@ -1,18 +1,17 @@
import MainSearch from './main-search.js' import MainSearch from './components/main-search.js'
import Utils from './utils.js' import Utils from './utils.js'
import QualityModal from './quality-modal.js' import QualityModal from './quality-modal.js'
import Downloads from './downloads.js' import Downloads from './downloads.js'
import { socket } from './socket.js' import { socket } from './socket.js'
import { analyzeLink } from './tabs.js' import Tabs from './tabs.js'
export default class Search { function linkListeners() {
static linkListeners() { document.getElementById('content').addEventListener('scroll', Utils.debounce(handleContentScroll, 100))
document.getElementById('content').addEventListener('scroll', Utils.debounce(Search.handleContentScroll, 100)) document.getElementById('searchbar').addEventListener('keyup', handleSearchBarKeyup)
document.getElementById('searchbar').addEventListener('keyup', Search.handleSearchBarKeyup) }
}
// Load more content when the search page is at the end // Load more content when the search page is at the end
static handleContentScroll(event) { function handleContentScroll(event) {
let contentElement = event.target let contentElement = event.target
if (contentElement.scrollTop + contentElement.clientHeight >= contentElement.scrollHeight) { if (contentElement.scrollTop + contentElement.clientHeight >= contentElement.scrollHeight) {
@ -23,9 +22,9 @@ export default class Search {
MainSearch.scrolledSearch(search_selected.split('_')[0]) MainSearch.scrolledSearch(search_selected.split('_')[0])
} }
} }
} }
static handleSearchBarKeyup(e) { function handleSearchBarKeyup(e) {
if (e.keyCode == 13) { if (e.keyCode == 13) {
let term = this.value let term = this.value
if (Utils.isValidURL(term)) { if (Utils.isValidURL(term)) {
@ -33,7 +32,7 @@ export default class Search {
QualityModal.open(term) QualityModal.open(term)
} else { } else {
if (window.main_selected == 'analyzer_tab') { if (window.main_selected == 'analyzer_tab') {
analyzeLink(term) Tabs.analyzeLink(term)
} else { } else {
Downloads.sendAddToQueue(term) Downloads.sendAddToQueue(term)
} }
@ -49,5 +48,8 @@ export default class Search {
} }
} }
} }
} }
export default {
linkListeners
} }

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

@ -1,10 +1,10 @@
import ArtistTab from './artist-tab.js' import ArtistTab from './components/artist-tab.js'
import TracklistTab from './tracklist-tab.js' import TracklistTab from './components/tracklist-tab.js'
import LinkAnalyzerTab from './link-analyzer-tab.js' import LinkAnalyzerTab from './components/link-analyzer-tab.js'
import { socket } from './socket.js' import { socket } from './socket.js'
import SettingsTab from './settings-tab.js' import SettingsTab from './components/settings-tab.js'
import MainSearch from './main-search.js' import MainSearch from './components/main-search.js'
import { stopStackedTabsPreview } from './track-preview.js' import TrackPreview from './track-preview.js'
/* ===== Globals ====== */ /* ===== Globals ====== */
window.search_selected = '' window.search_selected = ''
@ -35,14 +35,13 @@ export function playlistView(ev) {
showTab('playlist', id) showTab('playlist', id)
} }
export function analyzeLink(link) { function analyzeLink(link) {
console.log('Analyzing: ' + link) console.log('Analyzing: ' + link)
LinkAnalyzerTab.reset() LinkAnalyzerTab.reset()
socket.emit('analyzeLink', link) socket.emit('analyzeLink', link)
} }
export class Tabs { function linkListeners() {
static linkListeners() {
document.getElementById('search_tab').addEventListener('click', handleTabClick) document.getElementById('search_tab').addEventListener('click', handleTabClick)
document.getElementById('sidebar').addEventListener('click', handleSidebarClick) document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
@ -51,7 +50,6 @@ export class Tabs {
backButtons.forEach(button => { backButtons.forEach(button => {
button.addEventListener('click', backTab) 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) { function changeTab(sidebarEl, section, tabName) {
windows_stack = [] windows_stack = []
currentStack = {} 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) { function showTab(type, id, back = false) {
if (windows_stack.length == 0) { if (windows_stack.length == 0) {
windows_stack.push({ tab: main_selected }) windows_stack.push({ tab: main_selected })
@ -190,16 +176,9 @@ function showTab(type, id, back = false) {
tabcontent[i].style.display = 'none' tabcontent[i].style.display = 'none'
} }
document.getElementById(tab).style.display = 'block' 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() { function backTab() {
if (windows_stack.length == 1) { if (windows_stack.length == 1) {
document.getElementById(`main_${main_selected}link`).click() document.getElementById(`main_${main_selected}link`).click()
@ -213,5 +192,13 @@ function backTab() {
socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id }) socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
showTab(tabObj.type, tabObj.id, true) 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 let preview_stopped = true
// init stuff // init stuff
export function initTrackPreview() { function init() {
preview_track.volume = 1 preview_track.volume = 1
/*preview_max_volume = parseFloat(localStorage.getItem("previewVolume")) /*preview_max_volume = parseFloat(localStorage.getItem("previewVolume"))
if (preview_max_volume === null){ if (preview_max_volume === null){
@ -35,7 +35,7 @@ export function initTrackPreview() {
} }
// on modal closing // on modal closing
export function stopStackedTabsPreview() { function stopStackedTabsPreview() {
if ( if (
$('.preview_playlist_controls').filter(function () { $('.preview_playlist_controls').filter(function () {
return $(this).attr('playing') return $(this).attr('playing')
@ -49,10 +49,11 @@ export function stopStackedTabsPreview() {
} }
// on hover event // on hover event
export function previewMouseEnter(e) { function previewMouseEnter(e) {
$(e.currentTarget).css({ opacity: 1 }) $(e.currentTarget).css({ opacity: 1 })
} }
export function previewMouseLeave(e) {
function previewMouseLeave(e) {
let obj = e.currentTarget let obj = e.currentTarget
if (($(obj).parent().attr('playing') && preview_stopped) || !$(obj).parent().attr('playing')) { if (($(obj).parent().attr('playing') && preview_stopped) || !$(obj).parent().attr('playing')) {
$(obj).css({ opacity: 0 }, 200) $(obj).css({ opacity: 0 }, 200)
@ -60,7 +61,7 @@ export function previewMouseLeave(e) {
} }
// on click event // on click event
export function playPausePreview(e) { function playPausePreview(e) {
e.preventDefault() e.preventDefault()
console.log('PlayPause') console.log('PlayPause')
let obj = e.currentTarget let obj = e.currentTarget
@ -94,3 +95,11 @@ export function playPausePreview(e) {
}) })
} }
} }
export default {
init,
stopStackedTabsPreview,
previewMouseEnter,
previewMouseLeave,
playPausePreview
}