evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removed useless divs, moved search placeholder to the right place, improved searchbar keyup listener code

Browse Source
This commit is contained in:
Roberto Tonino
2020-09-15 22:44:29 +02:00
parent 82e45633f5
commit cd8b03681a
16 changed files with 254 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/App.vue
View File

@@ -1,9 +1,16 @@
<template>
<div style="height: inherit;">
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<div>
<TheSidebar />
<TheMainContent />
<div class="app-container">
<div class="content-container">
<TheSearchBar />
<TheMiddleSection />
</div>
<TheDownloadTab class="downlaods" />
</div>
<BaseLoadingPlaceholder id="start_app_placeholder" text="Connecting to the server..." />
<TheTrackPreview />
<TheQualityModal />
@@ -12,18 +19,39 @@
</div>
</template>
<style lang="scss">
.app-container {
display: flex;
}
.content-container {
width: 100%;
display: flex;
flex-direction: column;
margin-left: 48px;
}
.downlaods {
flex-basis: 32px;
}
</style>
<script>
import TheSidebar from '@components/TheSidebar.vue'
import TheMainContent from '@components/TheMainContent.vue'
import TheMiddleSection from '@components/TheMiddleSection.vue'
import TheTrackPreview from '@components/TheTrackPreview.vue'
import TheQualityModal from '@components/TheQualityModal.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
import TheContextMenu from '@components/TheContextMenu.vue'
import TheDownloadTab from '@components/TheDownloadTab.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
export default {
components: {
TheSidebar,
TheMainContent,
TheSearchBar,
TheMiddleSection,
TheDownloadTab,
TheTrackPreview,
TheQualityModal,
BaseLoadingPlaceholder,

2
src/components/BaseLoadingPlaceholder.vue
View File

@@ -1,5 +1,5 @@
<template functional>
<div :id="props.id" class="loading_placeholder" :class="{ 'loading_placeholder--hidden': props.hidden }">
<div :id="props.id" class="loading_placeholder" v-show="!props.hidden">
<span class="loading_placeholder__text">{{ props.text }}</span>
<div class="lds-ring">
<div></div>

117
src/components/TheContent.vue
View File

@@ -1,75 +1,80 @@
<template>
<section id="content" @scroll="handleContentScroll" ref="content">
<!-- <section id="content" @scroll="handleContentScroll" ref="content"> -->
<section id="content">
<div id="container">
<!-- HomeTab and MainSearchTab -->
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
<router-view></router-view>
<TheMainSearch :scrolled-search-type="newScrolled" />
<!-- <ArtistTab /> -->
<!-- <TracklistTab /> -->
<!-- <TheHomeTab /> -->
<!-- <TheChartsTab />
<TheFavoritesTab />
<TheErrorsTab />
<TheLinkAnalyzerTab />
<TheAboutTab />
<TheSettingsTab /> -->
</div>
</section>
</template>
<style lang="scss">
#container {
margin: 0 auto;
max-width: 1280px;
width: var(--container-width);
}
#content {
background-color: var(--main-background);
width: 100%;
height: calc(100vh - 93px);
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--main-background);
}
&::-webkit-scrollbar-thumb {
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
</style>
<script>
// import ArtistTab from '@components/ArtistTab.vue'
// import TracklistTab from '@components/TracklistTab.vue'
// import TheChartsTab from '@components/TheChartsTab.vue'
// import TheFavoritesTab from '@components/TheFavoritesTab.vue'
// import TheErrorsTab from '@components/TheErrorsTab.vue'
// import TheHomeTab from '@components/TheHomeTab.vue'
// import TheLinkAnalyzerTab from '@components/TheLinkAnalyzerTab.vue'
// import TheAboutTab from '@components/TheAboutTab.vue'
// import TheSettingsTab from '@components/TheSettingsTab.vue'
import TheMainSearch from '@components/TheMainSearch.vue'
import { debounce } from '@/utils/utils'
import EventBus from '@/utils/EventBus.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
components: {
// ArtistTab,
// TracklistTab
// TheChartsTab,
// TheFavoritesTab,
// TheErrorsTab,
// TheHomeTab,
// TheLinkAnalyzerTab,
// TheAboutTab,
// TheSettingsTab,
TheMainSearch
BaseLoadingPlaceholder
},
data: () => ({
newScrolled: null
newScrolled: null,
loading: false
}),
methods: {
handleContentScroll: debounce(async function () {
if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
if (
main_selected !== 'search_tab' ||
['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) === -1
) {
return
}
this.newScrolled = window.search_selected.split('_')[0]
await this.$nextTick()
this.newScrolled = null
}, 100)
mounted() {
this.$root.$on('updateSearchLoadingState', loading => {
console.log({ loading })
this.loading = loading
})
}
// methods: {
// handleContentScroll: debounce(async function () {
// if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
// if (
// main_selected !== 'search_tab' ||
// ['track_search', 'album_search', 'artist_search', 'playlist_search'].indexOf(window.search_selected) === -1
// ) {
// return
// }
// this.newScrolled = window.search_selected.split('_')[0]
// await this.$nextTick()
// this.newScrolled = null
// }, 100)
// }
}
</script>
<style>
</style>

66
src/components/TheDownloadTab.vue
View File

@@ -15,14 +15,40 @@
:title="$t('globals.toggle_download_tab_hint')"
></i>
<div id="queue_buttons">
<i id="open_downloads_folder" class="material-icons download_bar_icon hide" :title="$t('globals.open_downloads_folder')" @click="openDownloadsFolder">folder_open</i>
<i id="clean_queue" class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">delete_sweep</i>
<i
id="open_downloads_folder"
class="material-icons download_bar_icon hide"
:title="$t('globals.open_downloads_folder')"
@click="openDownloadsFolder"
>
folder_open
</i>
<i
id="clean_queue"
class="material-icons download_bar_icon"
@click="cleanQueue"
:title="$t('globals.clean_queue_hint')"
>
clear_all
</i>
<i
id="cancel_queue"
class="material-icons download_bar_icon"
@click="cancelQueue"
:title="$t('globals.cancel_queue_hint')"
>
delete_sweep
</i>
</div>
<div id="download_list" @click="handleListClick" ref="list"></div>
</div>
</template>
<style lang="scss" scoped>
#download_tab_container {
height: 100vh;
}
</style>
<script>
import $ from 'jquery'
import { socket } from '@/utils/socket'
@@ -91,9 +117,9 @@ export default {
switch (icon) {
case 'remove':
socket.emit('removeFromQueue', uuid)
if ($(`#bar_${uuid}`).hasClass('indeterminate')){
if ($(`#bar_${uuid}`).hasClass('indeterminate')) {
$(`#download_${uuid}`).remove()
}else{
} else {
target.innerHTML = `<div class="circle-loader"></div>`
}
break
@@ -101,7 +127,13 @@ export default {
}
},
initQueue(data) {
const { queue: initQueue, queueComplete: initQueueComplete, currentItem, queueList: initQueueList, restored } = data
const {
queue: initQueue,
queueComplete: initQueueComplete,
currentItem,
queueList: initQueueList,
restored
} = data
if (initQueueComplete.length) {
initQueueComplete.forEach(item => {
@@ -120,21 +152,21 @@ export default {
this.addToQueue(initQueueList[item])
})
if (restored){
if (restored) {
toast(this.$t('toasts.queueRestored'), 'done', true, 'restoring_queue')
socket.emit('queueRestored')
}
},
addToQueue(queueItem, current = false) {
if (Array.isArray(queueItem)){
if (queueItem.length > 1){
if (Array.isArray(queueItem)) {
if (queueItem.length > 1) {
queueItem.forEach((item, i) => {
item.silent = true
this.addToQueue(item)
});
toast(this.$t('toasts.addedMoreToQueue', {n: queueItem.length}), 'playlist_add_check')
})
toast(this.$t('toasts.addedMoreToQueue', { n: queueItem.length }), 'playlist_add_check')
return
}else{
} else {
queueItem = queueItem[0]
}
}
@@ -210,7 +242,7 @@ export default {
}
if (!queueItem.silent) {
toast(this.$t('toasts.addedToQueue', {item: queueItem.title}), 'playlist_add_check')
toast(this.$t('toasts.addedToQueue', { item: queueItem.title }), 'playlist_add_check')
}
},
updateQueue(update) {
@@ -247,7 +279,7 @@ export default {
}
if (conversion) {
$('#bar_' + uuid).css('width', (100-conversion) + '%')
$('#bar_' + uuid).css('width', 100 - conversion + '%')
}
}
},
@@ -273,7 +305,7 @@ export default {
this.queueList = {}
this.queueList[currentItem] = tempQueueItem
$('.download_object').each(function(index) {
$('.download_object').each(function (index) {
if ($(this).attr('id') != 'download_' + currentItem) $(this).remove()
})
}
@@ -307,7 +339,7 @@ export default {
},
finishDownload(uuid) {
if (this.queue.indexOf(uuid) > -1) {
toast(this.$t('toasts.finishDownload', {item: this.queueList[uuid].title}), 'done')
toast(this.$t('toasts.finishDownload', { item: this.queueList[uuid].title }), 'done')
$('#bar_' + uuid).css('width', '100%')
@@ -382,5 +414,3 @@ export default {
}
</script>
<style>
</style>

10
src/components/TheHomeTab.vue
View File

@@ -29,7 +29,12 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{ `${$t('globals.by', {artist: release.user.name})} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</div>
</div>
@@ -57,7 +62,7 @@
</div>
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', {artist: release.artist.name})}` }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</div>
</div>
</section>
@@ -129,7 +134,6 @@ export default {
this.$refs.notLogged.classList.add('hide')
}
// ! Need to init home everytime, atm this is called only on connect
this.checkIfWaitData(this.getHomeData)
// socket.on('init_home', this.initHome)
},

6
src/components/TheLinkAnalyzerTab.vue
View File

@@ -191,17 +191,11 @@ export default {
}
},
mounted() {
console.log('link analyzer mounted')
// this.$refs.root.style.display = 'block'
EventBus.$on('linkAnalyzerTab:reset', this.reset)
socket.on('analyze_track', this.showTrack)
socket.on('analyze_album', this.showAlbum)
socket.on('analyze_notSupported', this.notSupported)
},
beforeDestroy() {
console.log('link analyzer bef dest')
// this.$refs.root.style.display = 'none'
}
}
</script>

21
src/components/TheMainContent.vue
View File

@@ -1,21 +0,0 @@
<template>
<main id="main_content">
<TheMiddleSection />
<TheDownloadTab />
</main>
</template>
<script>
import TheMiddleSection from '@components/TheMiddleSection.vue'
import TheDownloadTab from '@components/TheDownloadTab.vue'
export default {
components: {
TheMiddleSection,
TheDownloadTab
}
}
</script>
<style>
</style>

74
src/components/TheMainSearch.vue
View File

@@ -16,7 +16,7 @@
{{ $tc('globals.listTabs.playlist', 2) }}
</li>
</ul>
<div id="search_tab_content">
<div id="search_tab_content" v-show="showSearchTab">
<!-- ### Main Search Tab ### -->
<div id="main_search" class="search_tabcontent">
<template v-for="section in results.allTab.ORDER">
@@ -62,8 +62,8 @@
<p class="secondary-text">
{{
results.allTab.TOP_RESULT[0].type == 'artist'
? $t('search.fans', {n: $n(results.allTab.TOP_RESULT[0].nb_fan)})
: $t('globals.by', {artist: results.allTab.TOP_RESULT[0].artist}) +
? $t('search.fans', { n: $n(results.allTab.TOP_RESULT[0].nb_fan) })
: $t('globals.by', { artist: results.allTab.TOP_RESULT[0].artist }) +
' - ' +
$tc('globals.listTabs.trackN', results.allTab.TOP_RESULT[0].nb_song)
}}
@@ -87,9 +87,7 @@
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
explicit
</i>
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon"> explicit </i>
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
</div>
</td>
@@ -119,9 +117,7 @@
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')">
get_app
</i>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
@@ -155,7 +151,7 @@
</div>
</div>
<p class="primary-text">{{ release.ART_NAME }}</p>
<p class="secondary-text">{{ $t('search.fans', {n: $n(release.NB_FAN)}) }}</p>
<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</p>
</div>
</div>
<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
@@ -256,11 +252,9 @@
<th>{{ $tc('globals.listTabs.artist', 1) }}</th>
<th>{{ $tc('globals.listTabs.album', 1) }}</th>
<th>
<i class="material-icons">
timer
</i>
<i class="material-icons"> timer </i>
</th>
<th style="width: 56px;"></th>
<th style="width: 56px"></th>
</tr>
</thead>
<tbody>
@@ -286,9 +280,7 @@
</td>
<td class="table__cell table__cell--large breakline">
<div class="table__cell-content table__cell-content--vertical-center">
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
explicit
</i>
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1
@@ -321,9 +313,7 @@
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')">
get_app
</i>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
@@ -360,7 +350,9 @@
</p>
<p class="secondary-text">
{{
$t('globals.by', {artist: release.artist.name}) + ' - ' + $tc('globals.listTabs.trackN', release.nb_tracks)
$t('globals.by', { artist: release.artist.name }) +
' - ' +
$tc('globals.listTabs.trackN', release.nb_tracks)
}}
</p>
</div>
@@ -423,7 +415,12 @@
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">
{{ `${$t('globals.by', {artist: release.user.name})} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}` }}
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc(
'globals.listTabs.trackN',
release.nb_tracks
)}`
}}
</p>
</div>
</div>
@@ -444,7 +441,6 @@ import { changeTab } from '@js/tabs.js'
import EventBus from '@/utils/EventBus.js'
export default {
name: 'the-main-search-tab',
components: {
BaseLoadingPlaceholder
},
@@ -484,7 +480,8 @@ export default {
total: 0,
loaded: false
}
}
},
showSearchTab: false
}
},
props: {
@@ -494,18 +491,12 @@ export default {
}
},
mounted() {
console.log('main search mounted')
// this.$refs.root.style.display = 'block'
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
this.$root.$on('mainSearch:showNewResults', this.showNewResults)
socket.on('mainSearch', this.handleMainSearch)
socket.on('search', this.handleSearch)
},
beforeDestroy() {
console.log('main search bef dest')
// this.$refs.root.style.display = 'none'
},
methods: {
artistView: showView.bind(null, 'artist'),
albumView: showView.bind(null, 'album'),
@@ -570,15 +561,16 @@ export default {
}
},
showNewResults(term, mainSelected) {
if (term !== this.results.query || mainSelected == 'search_tab') {
document.getElementById('search_tab_content').style.display = 'none'
let needToPerformNewSearch = term !== this.results.query || mainSelected == 'search_tab'
if (needToPerformNewSearch) {
this.showSearchTab = false
socket.emit('mainSearch', { term })
// Showing loading placeholder
document.getElementById('content').style.display = 'none'
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
this.$root.$emit('updateSearchLoadingState', true)
} else {
document.getElementById('search_tab_content').style.display = 'block'
this.showSearchTab = true
document.getElementById('main_search_tablink').click()
}
},
@@ -639,9 +631,11 @@ export default {
}
},
handleMainSearch(result) {
this.$root.$emit('updateSearchLoadingState', false)
// Hiding loading placeholder
document.getElementById('content').style.display = ''
document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
// document.getElementById('content').style.display = ''
// document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
let resetObj = { data: [], next: 0, total: 0, loaded: false }
@@ -651,11 +645,13 @@ export default {
this.results.artistTab = { ...resetObj }
this.results.playlistTab = { ...resetObj }
if (this.results.query == '') document.getElementById('search_all_tab').click()
if (this.results.query == '') {
document.getElementById('search_all_tab').click()
}
this.results.query = result.QUERY
document.getElementById('search_tab_content').style.display = 'block'
document.getElementById('main_search_tablink').click()
// document.getElementById('main_search_tablink').click()
},
handleSearch(result) {
const { next: nextResult, total, type, data } = result

21
src/components/TheMiddleSection.vue
View File

@@ -1,20 +1,29 @@
<template>
<div id="middle_section">
<TheSearchBar />
<main id="main_content">
<TheContent />
<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" />
</div>
<!-- <BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" /> -->
</main>
</template>
<style lang="scss" scoped>
#main_content {
background-color: var(--main-background);
min-width: 10px;
// margin-left: 48px; // $sidebar-width
// width: calc(100% - #{$sidebar-width});
// flex: 1;
width: 100%;
height: 100%;
}
</style>
<script>
import TheContent from '@components/TheContent.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
export default {
components: {
TheContent,
TheSearchBar,
BaseLoadingPlaceholder
}
}

45
src/components/TheSearchBar.vue
View File

@@ -25,28 +25,57 @@ import EventBus from '@/utils/EventBus.js'
import { socket } from '@/utils/socket'
export default {
data() {
return {
lastTextSearch: ''
}
},
methods: {
handleSearchBarKeyup(keyEvent) {
// Enter key
if (keyEvent.keyCode !== 13) return
async handleSearchBarKeyup(keyEvent) {
let isEnterPressed = keyEvent.keyCode === 13
// If not enter do nothing
if (!isEnterPressed) return
let term = this.$refs.searchbar.value
let isEmptySearch = term === ''
if (isValidURL(term)) {
if (keyEvent.ctrlKey) {
// If empty do nothing
if (isEmptySearch) return
let isSearchingURL = isValidURL(term)
let isCtrlPressed = keyEvent.ctrlKey
let isShowingAnalyzer = this.$route.name === 'Link Analyzer'
let isShowingSearch = this.$route.name === 'Search'
let sameAsLastSearch = term === this.lastTextSearch
if (isSearchingURL) {
if (isCtrlPressed) {
this.$root.$emit('QualityModal:open', term)
} else {
if (main_selected === 'analyzer_tab') {
if (isShowingAnalyzer) {
EventBus.$emit('linkAnalyzerTab:reset')
socket.emit('analyzeLink', term)
} else {
// ? Open downloads tab ?
Downloads.sendAddToQueue(term)
}
}
} else {
if (term === '') return
if (isShowingSearch && sameAsLastSearch) return
this.$root.$emit('mainSearch:showNewResults', term, main_selected)
if (!isShowingSearch) {
await this.$router.push({
name: 'Search'
})
}
if (!sameAsLastSearch) {
this.$root.$emit('updateSearchLoadingState', true)
this.lastTextSearch = term
}
this.$root.$emit('mainSearch:showNewResults', term, window.main_selected)
}
}
}

10
src/router.js
View File

@@ -63,11 +63,11 @@ const routes = [
name: 'Settings',
component: TheSettingsTab
},
// {
// path: '/search',
// name: 'Search',
// component: TheMainSearch
// },
{
path: '/search',
name: 'Search',
component: TheMainSearch
},
// 404 client side
{
path: '*',

39
src/styles/scss/_middle-section.scss
View File

@@ -1,11 +1,3 @@
/* Middle section */
#middle_section {
background-color: var(--main-background);
width: 100%;
height: 100%;
min-width: 10px;
}
/* Center section */
$icon-dimension: 2rem;
$searchbar-height: calc(2rem + 1em);
@@ -63,31 +55,6 @@ $searchbar-height: calc(2rem + 1em);
}
}
#content {
background-color: var(--main-background);
// width: calc(100% - 10px);
width: 100%;
height: calc(100% - 93px);
overflow-y: scroll;
overflow-x: hidden;
// padding-left: 10px;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--main-background);
}
&::-webkit-scrollbar-thumb {
background: var(--main-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
#container {
--container-width: 95%;
@@ -100,12 +67,6 @@ $searchbar-height: calc(2rem + 1em);
}
}
#container {
margin: 0 auto;
max-width: 1280px;
width: var(--container-width);
}
/* Modal Content */
.smallmodal-content {
--modal-content-width: 95%;

9
src/styles/scss/globals/_globals.scss
View File

@@ -241,7 +241,7 @@ a {
}
.loading_placeholder {
display: flex;
// display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@@ -316,13 +316,6 @@ a {
}
}
#main_content {
margin-left: $sidebar-width;
width: calc(100% - #{$sidebar-width});
height: 100%;
display: flex;
}
// TODO Remove
.inline-flex {
display: flex;

4
src/utils/socket.js
View File

@@ -7,11 +7,11 @@ socket.on('connect', () => {
})
socket.on('init_charts', charts => {
store.dispatch('cacheCharts', charts)
// store.dispatch('cacheCharts', charts)
})
socket.on('init_favorites', favorites => {
store.dispatch('setFavorites', favorites)
// store.dispatch('setFavorites', favorites)
})
socket.on('init_settings', (settings, credentials, defaults) => {