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

workflow: reset feature/search-page-improvement branch

Browse Source
This commit is contained in:
Roberto Tonino 2020-11-02 12:25:08 +01:00
parent 66b1ebe244
commit 7f0d621f62
44 changed files with 3265 additions and 1592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -20,8 +20,8 @@ yarn-debug.log*
yarn-error.log*
# Editor directories and files
# .vscode
.idea
.vscode
*.suo
*.ntvs*
*.njsproj

28
.vscode/tasks.json vendored Normal file
View File

@ -0,0 +1,28 @@
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": [],
"label": "npm: build",
"detail": "npm-run-all --sequential clean build:js"
},
{
// Workaround for dev script
"type": "npm",
"script": "dev:gui",
"problemMatcher": [],
"label": "npm: dev:gui",
"detail": "npm-run-all --parallel serve:gui watch:js",
"group": {
"kind": "test",
"isDefault": true
}
}
]
}

2991
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
public/index.html
View File

@ -4,12 +4,12 @@
<head>
<meta charset="utf-8">
<title>deemix</title>
<link rel="stylesheet" type="text/css" href="/css/vendor/material-icons.css">
<link rel="stylesheet" type="text/css" href="/css/vendor/OpenSans.css">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<script>
if (localStorage.getItem('selectedTheme')) {
document.documentElement.setAttribute('data-theme', localStorage.getItem('selectedTheme'))

10
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

10
src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div id="app">
<div class="app-container">
<TheSidebar />
@ -12,8 +12,8 @@
</div>
<BaseLoadingPlaceholder
:hidden="isSocketConnected"
text="Connecting to the server..."
:hidden="isSocketConnected"
additionalClasses="absolute top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-50"
/>
@ -44,7 +44,7 @@ import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.v
import TheContextMenu from '@components/globals/TheContextMenu.vue'
import TheTrackPreview from '@components/globals/TheTrackPreview.vue'
import TheQualityModal from '@components/globals/TheQualityModal.vue'
import ConfirmModal from '@components/globals/ConfirmModal.vue'
// import ConfirmModal from '@components/globals/ConfirmModal.vue'
import TheSidebar from '@components/TheSidebar.vue'
import TheSearchBar from '@components/TheSearchBar.vue'
@ -65,8 +65,8 @@ export default {
TheQualityModal,
BaseLoadingPlaceholder,
TheContextMenu,
TheContent,
ConfirmModal
TheContent
// ConfirmModal
},
mounted() {
socket.on('connect', () => {

8
src/app.js
View File

@ -5,8 +5,12 @@ window.vol = {
preview_max_volume: 100
}
import '@/styles/css/material-icons.css'
import '@/styles/css/OpenSans.css'
import '@/styles/scss/style.scss'
import '@/styles/css/components.css'
import '@/styles/css/helpers.css'
import App from '@/App.vue'
import i18n from '@/plugins/i18n'
@ -174,9 +178,9 @@ socket.on('errorMessage', function(error) {
socket.on('queueError', function(queueItem) {
if (queueItem.errid) {
toast(queueItem.link+ " - " +i18n.t(`errors.ids.${queueItem.errid}`), 'error')
toast(queueItem.link + ' - ' + i18n.t(`errors.ids.${queueItem.errid}`), 'error')
} else {
toast(queueItem.link+ " - " +queueItem.error, 'error')
toast(queueItem.link + ' - ' + queueItem.error, 'error')
}
})

6
src/components/TheContent.vue
View File

@ -31,8 +31,6 @@
</template>
<style lang="scss">
@import '../styles/scss/base/_variables.scss';
// src/components/TheContent.vue
#container {
--container-width: 95%;
@ -41,11 +39,11 @@
width: var(--container-width);
transform: scale(1);
@media only screen and (min-width: $small) {
@media only screen and (min-width: 601px) {
--container-width: 85%;
}
@media only screen and (min-width: $medium) {
@media only screen and (min-width: 993px) {
--container-width: 70%;
}
}

3
src/components/TheSearchBar.vue
View File

@ -168,7 +168,8 @@ export default {
}
} else {
if (isShowingSearch && sameAsLastSearch) {
this.$root.$emit('mainSearch:updateResults', term)
// ? Has this any sense since we're not performing any call?
// this.$root.$emit('mainSearch:updateResults', term)
return
}

32
src/components/downloads/QueueItem.vue
View File

@ -13,7 +13,7 @@
<span
v-if="hasFails"
class="inline-flex"
class="flex items-center"
:class="{ clickable: finishedWithFails }"
style="justify-content: center"
@click="finishedWithFails ? $emit('show-errors', queueItem) : null"
@ -181,6 +181,36 @@
}
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
</style>
<script>

27
src/components/globals/BaseLoadingPlaceholder.vue
View File

@ -1,11 +1,10 @@
<template functional>
<div
:id="props.id"
class="flex justify-center items-center flex-col flex-1 h-full"
:class="props.additionalClasses"
v-show="!props.hidden"
>
<span class="mb-5">{{ props.text }}</span>
<span class="mb-5">{{ props.text || 'Loading...' }}</span>
<div class="lds-ring">
<div></div>
@ -60,27 +59,3 @@
}
</style>
<script>
export default {
props: {
text: {
type: String,
required: false,
default: 'Loading...'
},
id: {
type: String,
required: false
},
hidden: {
type: Boolean,
required: false,
default: false
},
additionalClasses: {
type: String,
required: false
}
}
}
</script>

6
src/components/globals/TheQualityModal.vue
View File

@ -23,8 +23,6 @@
</div>
</template>
<style lang="scss">
@import '../../styles/scss/base/_variables.scss';
.smallmodal {
position: fixed;
z-index: 1250;
@ -47,11 +45,11 @@
top: 50%;
transform: translateY(-50%);
@media only screen and (min-width: $small) {
@media only screen and (min-width: 601px) {
--modal-content-width: 85%;
}
@media only screen and (min-width: $medium) {
@media only screen and (min-width: 993px) {
--modal-content-width: 70%;
}
}

4
src/components/pages/About.vue
View File

@ -23,10 +23,10 @@
<a href="https://deemix.app" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
</li> -->
<li>
<a href="https://git.fuwafuwa.moe/RemixDev/deemix" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
<a href="https://codeberg.org/RemixDev/deemix" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
</li>
<li>
<a href="https://git.fuwafuwa.moe/RemixDev/deemix-webui" target="_blank">💻 {{ $t('about.officialWebuiRepo') }}</a>
<a href="https://codeberg.org/RemixDev/deemix-webui" target="_blank">💻 {{ $t('about.officialWebuiRepo') }}</a>
</li>
<li>
<a href="https://www.reddit.com/r/deemix" target="_blank">🤖 {{ $t('about.officialSubreddit') }}</a>

8
src/components/pages/Artist.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="artist_tab" class="relative image-header" ref="root">
<header
class="inline-flex"
class="flex items-center"
:style="{
'background-image':
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
@ -14,7 +14,7 @@
aria-label="download"
@click.stop="addToQueue"
:data-link="link"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center right"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center ml-auto"
>
<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i>
</div>
@ -54,13 +54,13 @@
</thead>
<tbody>
<tr v-for="release in showTable" :key="release.id">
<router-link tag="td" class="inline-flex clickable" :to="{ name: 'Album', params: { id: release.id } }">
<router-link tag="td" class="flex items-center clickable" :to="{ name: 'Album', params: { id: release.id } }">
<img
class="rounded coverart"
:src="release.cover_small"
style="margin-right: 16px; width: 56px; height: 56px"
/>
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon"> explicit </i>
<i v-if="release.explicit_lyrics" class="material-icons explicit-icon"> explicit </i>
{{ release.title }}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300">
fiber_new

2
src/components/pages/Charts.vue
View File

@ -27,7 +27,7 @@
<table class="table table--charts">
<tbody>
<tr v-for="track in chart" class="track_row">
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
<td class="p-3 text-center cursor-default" :class="{ first: track.position === 1 }">
{{ track.position }}
</td>
<td class="table__icon table__icon--big">

12
src/components/pages/Favorites.vue
View File

@ -26,9 +26,7 @@
</ul>
<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType">
{{
$t('globals.download', { thing: $tc(`globals.listTabs.${activeTab}N`, getTabLenght() )})
}}
{{ $t('globals.downloadAll', { thing: $tc(`globals.listTabs.${activeTab}`, 2) }) }}
</button>
<div class="favorites_tabcontent" :class="{ 'favorites_tabcontent--active': activeTab === 'playlist' }">
@ -166,7 +164,7 @@
</div>
<table v-if="tracks.length > 0" class="table">
<tr v-for="track in tracks" class="track_row">
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
<td class="p-3 text-center cursor-default" :class="{ first: track.position === 1 }">
{{ track.position }}
</td>
<td>
@ -389,12 +387,6 @@ export default {
return toDownload
},
getTabLenght(tab = this.activeTab) {
let total = this[`${tab}s`].length
// TODO: Add Spotify playlists to downlaod queue as well
//if (tab === "playlist") total += this.spotifyPlaylists.length
return total
},
getLovedTracksPlaylist() {
let lovedTracks = this.playlists.filter(playlist => {
return playlist.is_loved_track

2
src/components/pages/Home.vue
View File

@ -4,7 +4,7 @@
<section class="py-6 border-0 border-t border-solid border-grayscale-500" ref="notLogged" v-if="!isLoggedIn">
<p id="home_not_logged_text" class="mb-4">{{ $t('home.needTologin') }}</p>
<router-link tag="button" name="button" :to="{ name: 'Settings' }" class="btn btn-primary">
<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Settings' }">
{{ $t('home.openSettings') }}
</router-link>
</section>

7
src/components/pages/LinkAnalyzer.vue
View File

@ -17,7 +17,7 @@
<div v-else>
<header
class="inline-flex"
class="flex items-center"
:style="{
'background-image':
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
@ -68,7 +68,7 @@
@contextmenu.prevent="openQualityModal"
@click.stop="addToQueue"
:data-link="link"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center right"
class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center ml-auto"
>
<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i>
</div>
@ -121,10 +121,11 @@
</table>
<div v-if="type == 'album'">
<router-link tag="button" :to="{ name: 'Album', params: { id } }">
<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
{{ $t('linkAnalyzer.table.tracklist') }}
</router-link>
</div>
<div v-if="countries.length">
<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p>
</div>

187
src/components/pages/Search.vue
View File

@ -21,7 +21,8 @@
<keep-alive>
<component
:is="currentTab.component"
:results="results"
:viewInfo="getViewInfo()"
want-headers
@add-to-queue="addToQueue"
@change-search-tab="changeSearchTab"
></component>
@ -43,10 +44,20 @@ import { sendAddToQueue } from '@/utils/downloads'
import { numberWithDots, convertDuration } from '@/utils/utils'
import EventBus from '@/utils/EventBus'
import { reduceSearchResults, formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
const resetObj = { data: [], next: 0, total: 0, hasLoaded: false }
export default {
components: {
BaseLoadingPlaceholder
},
props: {
performScrolledSearch: {
type: Boolean,
required: false
}
},
data() {
const $t = this.$t.bind(this)
const $tc = this.$tc.bind(this)
@ -54,33 +65,45 @@ export default {
return {
currentTab: {
name: '',
component: {}
searchType: '',
component: {},
viewInfo: '',
formatFunc: () => {}
},
tabs: [
{
name: $t('globals.listTabs.all'),
searchType: 'all',
component: ResultsAll
component: ResultsAll,
viewInfo: 'allTab'
},
{
name: $tc('globals.listTabs.track', 2),
searchType: 'track',
component: ResultsTracks
component: ResultsTracks,
viewInfo: 'trackTab',
formatFunc: formatSingleTrack
},
{
name: $tc('globals.listTabs.album', 2),
searchType: 'album',
component: ResultsAlbums
component: ResultsAlbums,
viewInfo: 'albumTab',
formatFunc: formatAlbums
},
{
name: $tc('globals.listTabs.artist', 2),
searchType: 'artist',
component: ResultsArtists
component: ResultsArtists,
viewInfo: 'artistTab',
formatFunc: formatArtist
},
{
name: $tc('globals.listTabs.playlist', 2),
searchType: 'playlist',
component: ResultsPlaylists
component: ResultsPlaylists,
viewInfo: 'playlistTab',
formatFunc: formatPlaylist
}
],
results: {
@ -88,35 +111,23 @@ export default {
allTab: {
ORDER: [],
TOP_RESULT: [],
ALBUM: {},
ARTIST: {},
TRACK: {},
PLAYLIST: {}
ALBUM: {
hasLoaded: false
},
trackTab: {
data: [],
next: 0,
total: 0,
loaded: false
ARTIST: {
hasLoaded: false
},
albumTab: {
data: [],
next: 0,
total: 0,
loaded: false
TRACK: {
hasLoaded: false
},
artistTab: {
data: [],
next: 0,
total: 0,
loaded: false
},
playlistTab: {
data: [],
next: 0,
total: 0,
loaded: false
PLAYLIST: {
hasLoaded: false
}
},
trackTab: { ...resetObj },
albumTab: { ...resetObj },
artistTab: { ...resetObj },
playlistTab: { ...resetObj }
}
}
},
@ -125,87 +136,82 @@ export default {
return this.results.query !== ''
},
loadedTabs() {
const loaded = []
const tabsLoaded = []
for (const resultKey in this.results) {
if (this.results.hasOwnProperty(resultKey)) {
const result = this.results[resultKey]
const currentResult = this.results[resultKey]
if (result.loaded) {
loaded.push(resultKey.replace(/Tab/g, ''))
if (currentResult.hasLoaded) {
tabsLoaded.push(resultKey.replace(/Tab/g, ''))
}
}
}
return loaded
}
},
props: {
performScrolledSearch: {
type: Boolean,
required: false
return tabsLoaded
}
},
created() {
this.currentTab = this.tabs[0]
},
mounted() {
EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)
this.$root.$on('mainSearch:showNewResults', this.checkIfShowNewResults)
this.$root.$on('mainSearch:showNewResults', this.checkIfPerformNewMainSearch)
this.$root.$on('mainSearch:updateResults', this.checkIfUpdateResults)
socket.on('mainSearch', this.handleMainSearch)
socket.on('mainSearch', this.saveMainSearchResult)
socket.on('search', this.handleSearch)
},
methods: {
changeSearchTab(sectionName) {
sectionName = sectionName.toLowerCase()
numberWithDots,
convertDuration,
addToQueue(e) {
sendAddToQueue(e.currentTarget.dataset.link)
},
getViewInfo() {
if (this.currentTab.searchType === 'all') {
return this.results.allTab
}
let newTab = this.tabs.find(tab => {
return tab.searchType === sectionName
return reduceSearchResults(this.results[this.currentTab.viewInfo], this.currentTab.formatFunc)
},
changeSearchTab(tabName) {
tabName = tabName.toLowerCase()
const newTab = this.tabs.find(tab => {
return tab.searchType === tabName
})
if (!newTab) {
console.error(`No tab ${sectionName} found`)
console.error(`No tab ${tabName} found`)
return
}
window.scrollTo(0, 0)
this.currentTab = newTab
},
checkIfShowNewResults(term, mainSelected) {
let needToPerformNewSearch = term !== this.results.query /* || mainSelected == 'search_tab' */
checkIfPerformNewMainSearch(searchTerm) {
let needToPerformNewMainSearch = searchTerm !== this.results.query
if (needToPerformNewSearch) {
this.showNewResults(term)
if (needToPerformNewMainSearch) {
this.performNewMainSearch(searchTerm)
}
},
checkIfUpdateResults(term) {
let needToUpdateSearch = term === this.results.query && this.currentTab.searchType !== 'all'
if (needToUpdateSearch) {
let resetObj = { data: [], next: 0, total: 0, loaded: false }
this.results[this.currentTab.searchType + 'Tab'] = { ...resetObj }
this.search(this.currentTab.searchType)
}
},
showNewResults(term) {
performNewMainSearch(term) {
socket.emit('mainSearch', { term })
// Showing loading placeholder
this.$root.$emit('updateSearchLoadingState', true)
this.currentTab = this.tabs[0]
},
checkLoadMoreContent(searchSelected) {
if (this.results[searchSelected.split('_')[0] + 'Tab'].data.length !== 0) return
// ! Updates search only if the search term is the same as before AND we're not in the ALL tab. Wtf
checkIfUpdateResults(term) {
let needToUpdateSearch = term === this.results.query && this.currentTab.searchType !== 'all'
this.search(searchSelected.split('_')[0])
if (needToUpdateSearch) {
this.results[this.currentTab.searchType + 'Tab'] = { ...resetObj }
this.search(this.currentTab.searchType)
}
},
addToQueue(e) {
sendAddToQueue(e.currentTarget.dataset.link)
},
numberWithDots,
convertDuration,
search(type) {
socket.emit('search', {
term: this.results.query,
@ -217,29 +223,34 @@ export default {
scrolledSearch() {
if (this.currentTab.searchType === 'all') return
let currentTab = `${this.currentTab.searchType}Tab`
const currentTabKey = `${this.currentTab.searchType}Tab`
const needToPerformScrolledSearch = this.results[currentTabKey].next < this.results[currentTabKey].total
if (this.results[currentTab].next < this.results[currentTab].total) {
if (needToPerformScrolledSearch) {
this.search(this.currentTab.searchType)
}
},
handleMainSearch(result) {
// Hiding loading placeholder
saveMainSearchResult(searchResult) {
// Hide loading placeholder
this.$root.$emit('updateSearchLoadingState', false)
let resetObj = { data: [], next: 0, total: 0, loaded: false }
this.results.query = searchResult.QUERY
this.results.allTab = searchResult
this.results.allTab.TRACK.hasLoaded = true
this.results.allTab.ALBUM.hasLoaded = true
this.results.allTab.ARTIST.hasLoaded = true
this.results.allTab.PLAYLIST.hasLoaded = true
this.results.allTab = result
this.results.trackTab = { ...resetObj }
this.results.albumTab = { ...resetObj }
this.results.artistTab = { ...resetObj }
this.results.playlistTab = { ...resetObj }
this.results.query = result.QUERY
},
handleSearch(result) {
const { next: nextResult, total, type, data } = result
const { next: nextResult, total, type, data: newData } = result
let currentTab = type + 'Tab'
const currentTabKey = type + 'Tab'
let next = 0
if (nextResult) {
@ -248,16 +259,16 @@ export default {
next = total
}
if (this.results[currentTab].total != total) {
this.results[currentTab].total = total
if (this.results[currentTabKey].total !== total) {
this.results[currentTabKey].total = total
}
if (this.results[currentTab].next != next) {
this.results[currentTab].next = next
this.results[currentTab].data = this.results[currentTab].data.concat(data)
if (this.results[currentTabKey].next !== next) {
this.results[currentTabKey].next = next
this.results[currentTabKey].data = this.results[currentTabKey].data.concat(newData)
}
this.results[currentTab].loaded = true
this.results[currentTabKey].hasLoaded = true
},
isTabLoaded(tab) {
return this.loadedTabs.indexOf(tab.searchType) !== -1 || tab.searchType === 'all'

116
src/components/pages/Settings.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="settings_tab" class="fixed-footer " ref="root">
<div id="settings_tab" class="fixed-footer" ref="root">
<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
@ -22,7 +22,7 @@
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">person</i>{{ $t('settings.login.title') }}
</h3>
<div class="inline-flex">
<div class="flex items-center">
<input
autocomplete="off"
type="password"
@ -68,11 +68,11 @@
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">web</i>{{ $t('settings.appearance.title') }}
</h3>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimDownloads" />
<span class="checkbox_text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="changeSlimSidebar" />
<span class="checkbox_text">{{ $t('settings.appearance.slimSidebar') }}</span>
</label>
@ -82,7 +82,7 @@
<h3 class="settings-group__header settings-group__header--with-icon">
<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
</h3>
<div class="inline-flex">
<div class="flex items-center">
<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
<button
id="select_downloads_folder"
@ -116,7 +116,7 @@
</h3>
<div class="settings-container">
<div class="settings-container__third">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.createPlaylistFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createPlaylistFolder') }}</span>
</label>
@ -126,7 +126,7 @@
</div>
</div>
<div class="settings-container__third">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.createArtistFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createArtistFolder') }}</span>
</label>
@ -137,7 +137,7 @@
</div>
</div>
<div class="settings-container__third">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.createAlbumFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createAlbumFolder') }}</span>
</label>
@ -149,17 +149,17 @@
</div>
</div>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.createCDFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createCDFolder') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.createStructurePlaylist" />
<span class="checkbox_text">{{ $t('settings.folders.createStructurePlaylist') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.createSingleFolder" />
<span class="checkbox_text">{{ $t('settings.folders.createSingleFolder') }}</span>
</label>
@ -172,7 +172,7 @@
<div class="settings-container">
<div class="settings-container__third settings-container__third--only-checkbox">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.padTracks" />
<span class="checkbox_text">{{ $t('settings.trackTitles.padTracks') }}</span>
</label>
@ -224,34 +224,34 @@
<div class="settings-container">
<div class="settings-container__third settings-container__third--only-checkbox">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.fallbackBitrate" />
<span class="checkbox_text">{{ $t('settings.downloads.fallbackBitrate') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.fallbackSearch" />
<span class="checkbox_text">{{ $t('settings.downloads.fallbackSearch') }}</span>
</label>
</div>
<div class="settings-container__third settings-container__third--only-checkbox">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.logErrors" />
<span class="checkbox_text">{{ $t('settings.downloads.logErrors') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.logSearched" />
<span class="checkbox_text">{{ $t('settings.downloads.logSearched') }}</span>
</label>
</div>
<div class="settings-container__third settings-container__third--only-checkbox">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.syncedLyrics" />
<span class="checkbox_text">{{ $t('settings.downloads.syncedLyrics') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.createM3U8File" />
<span class="checkbox_text">{{ $t('settings.downloads.createM3U8File') }}</span>
</label>
@ -263,7 +263,7 @@
<input type="text" v-model="settings.playlistFilenameTemplate" />
</div>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.saveDownloadQueue" />
<span class="checkbox_text">{{ $t('settings.downloads.saveDownloadQueue') }}</span>
</label>
@ -274,7 +274,7 @@
<i class="material-icons">album</i>{{ $t('settings.covers.title') }}
</h3>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.saveArtwork" />
<span class="checkbox_text">{{ $t('settings.covers.saveArtwork') }}</span>
</label>
@ -284,7 +284,7 @@
<input type="text" v-model="settings.coverImageTemplate" />
</div>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.saveArtworkArtist" />
<span class="checkbox_text">{{ $t('settings.covers.saveArtworkArtist') }}</span>
</label>
@ -319,7 +319,7 @@
</select>
</div>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.embeddedArtworkPNG" />
<span class="checkbox_text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
</label>
@ -327,7 +327,7 @@
⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}
</p>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.coverDescriptionUTF8" />
<span class="checkbox_text">{{ $t('settings.covers.coverDescriptionUTF8') }}</span>
</label>
@ -345,106 +345,106 @@
<div class="settings-container">
<div class="settings-container__half">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.title" />
<span class="checkbox_text">{{ $t('settings.tags.title') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.artist" />
<span class="checkbox_text">{{ $t('settings.tags.artist') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.album" />
<span class="checkbox_text">{{ $t('settings.tags.album') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.cover" />
<span class="checkbox_text">{{ $t('settings.tags.cover') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.trackNumber" />
<span class="checkbox_text">{{ $t('settings.tags.trackNumber') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.trackTotal" />
<span class="checkbox_text">{{ $t('settings.tags.trackTotal') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.discNumber" />
<span class="checkbox_text">{{ $t('settings.tags.discNumber') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.discTotal" />
<span class="checkbox_text">{{ $t('settings.tags.discTotal') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.albumArtist" />
<span class="checkbox_text">{{ $t('settings.tags.albumArtist') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.genre" />
<span class="checkbox_text">{{ $t('settings.tags.genre') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.year" />
<span class="checkbox_text">{{ $t('settings.tags.year') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.date" />
<span class="checkbox_text">{{ $t('settings.tags.date') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.explicit" />
<span class="checkbox_text">{{ $t('settings.tags.explicit') }}</span>
</label>
</div>
<div class="settings-container__half">
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.isrc" />
<span class="checkbox_text">{{ $t('settings.tags.isrc') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.length" />
<span class="checkbox_text">{{ $t('settings.tags.length') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.barcode" />
<span class="checkbox_text">{{ $t('settings.tags.barcode') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.bpm" />
<span class="checkbox_text">{{ $t('settings.tags.bpm') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.replayGain" />
<span class="checkbox_text">{{ $t('settings.tags.replayGain') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.label" />
<span class="checkbox_text">{{ $t('settings.tags.label') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.lyrics" />
<span class="checkbox_text">{{ $t('settings.tags.lyrics') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.syncedLyrics" />
<span class="checkbox_text">{{ $t('settings.tags.syncedLyrics') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.copyright" />
<span class="checkbox_text">{{ $t('settings.tags.copyright') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.composer" />
<span class="checkbox_text">{{ $t('settings.tags.composer') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.involvedPeople" />
<span class="checkbox_text">{{ $t('settings.tags.involvedPeople') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.source" />
<span class="checkbox_text">{{ $t('settings.tags.source') }}</span>
</label>
@ -457,17 +457,17 @@
<i class="material-icons">list</i>{{ $t('settings.other.title') }}
</h3>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation" />
<span class="checkbox_text">{{ $t('settings.other.savePlaylistAsCompilation') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.useNullSeparator" />
<span class="checkbox_text">{{ $t('settings.other.useNullSeparator') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.saveID3v1" />
<span class="checkbox_text">{{ $t('settings.other.saveID3v1') }}</span>
</label>
@ -488,22 +488,22 @@
</select>
</div>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.tags.singleAlbumArtist" />
<span class="checkbox_text">{{ $t('settings.other.singleAlbumArtist') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.albumVariousArtists" />
<span class="checkbox_text">{{ $t('settings.other.albumVariousArtists') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.removeAlbumVersion" />
<span class="checkbox_text">{{ $t('settings.other.removeAlbumVersion') }}</span>
</label>
<label class="with_checkbox">
<label class="with-checkbox">
<input type="checkbox" v-model="settings.removeDuplicateArtists" />
<span class="checkbox_text">{{ $t('settings.other.removeDuplicateArtists') }}</span>
</label>
@ -643,7 +643,7 @@
.locale-flag {
width: 60px;
display: inline-flex;
display: flex items-center;
justify-content: center;
align-items: center;
cursor: pointer;
@ -724,10 +724,6 @@ export default {
set(wantSlimSidebar) {
this.slimSidebar = wantSlimSidebar
document.getElementById('sidebar').classList.toggle('slim', wantSlimSidebar)
// Moves all toast messages when the option changes
Array.from(document.getElementsByClassName('toastify')).forEach((toast)=>{
toast.style.transform = `translate(${wantSlimSidebar ? '3rem' : '14rem'}, 0)`;
})
localStorage.setItem('slimSidebar', wantSlimSidebar)
}
},

10
src/components/pages/Tracklist.vue
View File

@ -6,8 +6,8 @@
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
}"
>
<h1 class="inline-flex m-0 text-5xl">
{{ title }} <i v-if="explicit" class="material-icons explicit_icon explicit_icon--right">explicit</i>
<h1 class="flex items-center m-0 text-5xl">
{{ title }} <i v-if="explicit" class="material-icons explicit-icon explicit-icon--right">explicit</i>
</h1>
<h2 class="m-0 mb-3 text-lg">
@ -60,7 +60,7 @@
</td>
<td class="table__cell--large table__cell--with-icon">
<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
@ -126,8 +126,8 @@
<i v-else class="material-icons disabled">play_arrow</i>
</td>
<td>{{ i + 1 }}</td>
<td class="inline-flex">
<i v-if="track.explicit" class="material-icons explicit_icon">explicit</i>
<td class="flex items-center">
<i v-if="track.explicit" class="material-icons explicit-icon">explicit</i>
{{ track.name }}
</td>
<td>{{ track.artists[0].name }}</td>

60
src/components/search/ResultsAlbums.vue
View File

@ -1,51 +1,79 @@
<template>
<div id="album_search" class="search_tabcontent">
<BaseLoadingPlaceholder v-if="!results.albumTab.loaded" />
<div v-else-if="results.albumTab.data.length == 0">
<section>
<BaseLoadingPlaceholder v-if="isLoading" />
<template v-else>
<div v-if="viewInfo.data.length === 0">
<h1>{{ $t('search.noResultsAlbum') }}</h1>
</div>
<div class="release_grid" v-if="results.albumTab.data.length > 0">
<div class="release_grid" v-else>
<router-link
tag="div"
v-for="release in results.albumTab.data"
:key="release.id"
v-for="release in viewInfo.data.slice(0, itemsToShow)"
:key="release.albumID"
class="release clickable"
:to="{ name: 'Album', params: { id: release.id } }"
:to="{ name: 'Album', params: { id: release.albumID } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
<img aria-hidden="true" class="rounded coverart" :src="release.albumCoverMedium" />
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.link"
:data-link="release.albumLink"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text inline-flex">
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
{{ release.title }}
<p class="primary-text flex items-center">
<i v-if="release.isAlbumExplicit" class="material-icons explicit-icon">explicit</i>
{{ release.albumTitle }}
</p>
<p class="secondary-text">
{{
$t('globals.by', { artist: release.artist.name }) +
$t('globals.by', { artist: release.artistName }) +
' - ' +
$tc('globals.listTabs.trackN', release.nb_tracks)
$tc('globals.listTabs.trackN', release.albumTracks)
}}
</p>
</router-link>
</div>
</div>
</template>
</section>
</template>
<script>
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
export default {
props: ['results'],
props: {
viewInfo: {
validator: function (value) {
let isNull = Object.is(value, null)
let isObject = Object.prototype.toString.call(value) === '[object Object]'
return isNull || isObject
},
required: true
},
itemsToShow: {
type: Number,
required: false
},
wantHeaders: {
type: Boolean,
required: false,
default: false
}
},
computed: {
isLoading() {
return !this.viewInfo || !this.viewInfo.hasLoaded
}
},
components: {
BaseLoadingPlaceholder
}

304
src/components/search/ResultsAll.vue
View File

@ -1,221 +1,66 @@
<template>
<div id="main_search" class="search_tabcontent">
<template v-for="section in results.allTab.ORDER">
<section>
<div v-if="!thereAreResults">
<h1>{{ $t('search.noResults') }}</h1>
</div>
<template v-else>
<section
v-if="
(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) || results.allTab[section].length > 0
"
class="search_section"
v-for="section in viewInfo.ORDER"
:key="section"
class="float-none py-5 border-grayscale-500 border-t first:border-t-0"
>
<h2
@click="$emit('change-search-tab', section)"
class="search_header"
:class="{ top_result_header: section === 'TOP_RESULT' }"
class="mb-6 capitalize"
:class="{
'text-4xl text-center': section === 'TOP_RESULT',
'inline-block cursor-pointer text-3xl hover:text-primary transition-colors duration-200 ease-in-out':
section !== 'TOP_RESULT'
}"
>
{{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }}
</h2>
<!-- Top result -->
<router-link
tag="div"
v-if="section == 'TOP_RESULT'"
class="top_result clickable"
:to="{ name: upperCaseFirstLowerCaseRest(topResultType), params: { id: results.allTab.TOP_RESULT[0].id } }"
>
<div class="cover_container">
<img
aria-hidden="true"
:src="results.allTab.TOP_RESULT[0].picture"
:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"
<TopResult
v-if="section === 'TOP_RESULT'"
:info="viewInfo.TOP_RESULT[0]"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="results.allTab.TOP_RESULT[0].link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<div class="info_box">
<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
<p class="secondary-text">
{{ fansNumber }}
</p>
<span class="tag">{{ $tc(`globals.listTabs.${results.allTab.TOP_RESULT[0].type}`, 1) }}</span>
</div>
</router-link>
<div v-else-if="section == 'TRACK'">
<table class="table table--tracks">
<tbody>
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" :key="track.SNG_ID">
<td class="table__icon" aria-hidden="true">
<img
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/cover/' + track.ALB_PICTURE + '/32x32-000000-80-0-0.jpg'
"
<ResultsTracks
v-else-if="section === 'TRACK'"
:viewInfo="reduceSearchResults(viewInfo.TRACK, formatSingleTrack)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
</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>
{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
</div>
</td>
<td class="table__cell table__cell--medium table__cell--center breakline">
<router-link
tag="span"
v-for="artist in track.ARTISTS"
:key="artist.ART_ID"
class="clickable"
:to="{
name: 'Artist',
params: { id: artist.ART_ID }
}"
>
{{ artist.ART_NAME }}
</router-link>
</td>
<router-link
tag="td"
class="table__cell--medium table__cell--center breakline clickable"
:to="{ name: 'Album', params: { id: track.ALB_ID } }"
>
{{ track.ALB_TITLE }}
</router-link>
<td class="table__cell table__cell--center">
{{ convertDuration(track.DURATION) }}
</td>
<td
class="table__cell--download table__cell--center clickable"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
role="button"
aria-label="download"
>
<i class="material-icons" :title="$t('globals.download_hint')"> get_app </i>
</td>
</tr>
</tbody>
</table>
</div>
<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
<router-link
tag="div"
v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
class="release clickable"
:key="release.ART_ID"
:to="{ name: 'Artist', params: { id: release.ART_ID } }"
>
<div class="cover_container">
<img
aria-hidden="true"
class="circle coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/artist/' + release.ART_PICTURE + '/156x156-000000-80-0-0.jpg'
"
<ResultsAlbums
v-else-if="section == 'ALBUM'"
:viewInfo="reduceSearchResults(viewInfo.ALBUM, formatAlbums)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://deezer.com/artist/' + release.ART_ID"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text">{{ release.ART_NAME }}</p>
<p class="secondary-text">{{ $t('search.fans', { n: $n(release.NB_FAN) }) }}</p>
</router-link>
</div>
<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
<router-link
tag="div"
v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
:key="release.ALB_ID"
class="release clickable"
:to="{ name: 'Album', params: { id: release.ALB_ID } }"
>
<div class="cover_container">
<img
aria-hidden="true"
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/cover/' + release.ALB_PICTURE + '/156x156-000000-80-0-0.jpg'
"
<ResultsPlaylists
v-else-if="section == 'PLAYLIST'"
:viewInfo="reduceSearchResults(viewInfo.PLAYLIST, formatPlaylist)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://deezer.com/album/' + release.ALB_ID"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text inline-flex">
<i
v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
class="material-icons explicit_icon"
>explicit</i
>
{{ release.ALB_TITLE }}
</p>
<p class="secondary-text">
{{ release.ART_NAME + ' - ' + $tc('globals.listTabs.trackN', release.NUMBER_TRACK) }}
</p>
</router-link>
</div>
<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
<router-link
tag="div"
v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
class="release clickable"
:key="release.PLAYLIST_ID"
:to="{ name: 'Playlist', params: { id: release.PLAYLIST_ID } }"
>
<div class="cover_container">
<img
aria-hidden="true"
class="rounded coverart"
:src="
'https://e-cdns-images.dzcdn.net/images/' +
release.PICTURE_TYPE +
'/' +
release.PLAYLIST_PICTURE +
'/156x156-000000-80-0-0.jpg'
"
<ResultsArtists
v-else-if="section === 'ARTIST'"
:viewInfo="reduceSearchResults(viewInfo.ARTIST, formatArtist)"
:itemsToShow="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text">{{ release.TITLE }}</p>
<p class="secondary-text">{{ $tc('globals.listTabs.trackN', release.NB_SONG) }}</p>
</router-link>
</div>
</section>
</template>
<div v-if="noResults">
<h1>{{ $t('search.noResults') }}</h1>
</div>
</div>
</section>
</template>
<style lang="scss" scoped>
<style scoped>
.tag {
background-color: var(--tag-background);
border-radius: 2px;
@ -230,39 +75,66 @@
<script>
import { convertDuration } from '@/utils/utils'
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
import TopResult from '@/components/search/TopResult.vue'
import ResultsTracks from '@components/search/ResultsTracks.vue'
import ResultsAlbums from '@components/search/ResultsAlbums.vue'
import ResultsArtists from '@components/search/ResultsArtists.vue'
import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
import { reduceSearchResults, formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
export default {
props: ['results'],
computed: {
topResultType() {
return this.results.allTab.TOP_RESULT[0].type
components: {
TopResult,
ResultsTracks,
ResultsAlbums,
ResultsArtists,
ResultsPlaylists
},
noResults() {
return this.results.allTab.ORDER.every(section =>
section == 'TOP_RESULT'
? this.results.allTab[section].length == 0
: this.results.allTab[section].data.length == 0
props: {
viewInfo: {
type: Object,
required: false
}
},
computed: {
thereAreResults() {
let areInfosLoaded = !!this.viewInfo
if (!areInfosLoaded) {
return false
}
let noResultsPresent = this.viewInfo.ORDER.every(section =>
section === 'TOP_RESULT' ? this.viewInfo[section].length === 0 : this.viewInfo[section].data.length === 0
)
return !noResultsPresent
},
fansNumber() {
let number
try {
number = this.$n(this.results.allTab.TOP_RESULT[0].nb_fan)
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan)
} catch (error) {
number = this.$n(this.results.allTab.TOP_RESULT[0].nb_fan, { locale: 'en' })
number = this.$n(this.viewInfo.TOP_RESULT[0].nb_fan, { locale: 'en' })
}
return this.results.allTab.TOP_RESULT[0].type == 'artist'
return this.viewInfo.TOP_RESULT[0].type == 'artist'
? this.$t('search.fans', { n: number })
: this.$t('globals.by', { artist: this.results.allTab.TOP_RESULT[0].artist }) +
: this.$t('globals.by', { artist: this.viewInfo.TOP_RESULT[0].artist }) +
' - ' +
this.$tc('globals.listTabs.trackN', this.results.allTab.TOP_RESULT[0].nb_song)
this.$tc('globals.listTabs.trackN', this.viewInfo.TOP_RESULT[0].nb_song)
}
},
methods: {
convertDuration,
upperCaseFirstLowerCaseRest
upperCaseFirstLowerCaseRest,
reduceSearchResults,
formatSingleTrack,
formatAlbums,
formatArtist,
formatPlaylist
}
}
</script>

54
src/components/search/ResultsArtists.vue
View File

@ -1,44 +1,72 @@
<template>
<div id="artist_search" class="search_tabcontent">
<BaseLoadingPlaceholder v-if="!results.artistTab.loaded"></BaseLoadingPlaceholder>
<div v-else-if="results.artistTab.data.length == 0">
<section>
<BaseLoadingPlaceholder v-if="isLoading" />
<template v-else>
<div v-if="viewInfo.data.length === 0">
<h1>{{ $t('search.noResultsArtist') }}</h1>
</div>
<div class="release_grid" v-if="results.artistTab.data.length > 0">
<div v-else class="release_grid">
<router-link
tag="div"
v-for="release in results.artistTab.data"
v-for="release in viewInfo.data.slice(0, itemsToShow)"
class="release clickable"
:key="release.id"
:to="{ name: 'Artist', params: { id: release.id } }"
:key="release.artistID"
:to="{ name: 'Artist', params: { id: release.artistID } }"
>
<div class="cover_container">
<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
<img aria-hidden="true" class="circle coverart" :src="release.artistPictureMedium" />
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.link"
:data-link="release.artistLink"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text">{{ release.name }}</p>
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.nb_album) }}</p>
<p class="primary-text">{{ release.artistName }}</p>
<p class="secondary-text">{{ $tc('globals.listTabs.releaseN', release.artistAlbumsNumber) }}</p>
</router-link>
</div>
</div>
</template>
</section>
</template>
<script>
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder
},
props: {
viewInfo: {
validator: function (value) {
let isNull = Object.is(value, null)
let isObject = Object.prototype.toString.call(value) === '[object Object]'
return isNull || isObject
},
required: true
},
itemsToShow: {
type: Number,
required: false
},
wantHeaders: {
type: Boolean,
required: false,
default: false
}
},
computed: {
isLoading() {
return !this.viewInfo || !this.viewInfo.hasLoaded
}
}
}
</script>

56
src/components/search/ResultsPlaylists.vue
View File

@ -1,48 +1,78 @@
<template>
<div id="playlist_search" class="search_tabcontent">
<BaseLoadingPlaceholder v-if="!results.playlistTab.loaded" />
<div v-else-if="results.playlistTab.data.length == 0">
<section>
<BaseLoadingPlaceholder v-if="isLoading" />
<template v-else>
<div v-if="viewInfo.data.length === 0">
<h1>{{ $t('search.noResultsPlaylist') }}</h1>
</div>
<div class="release_grid" v-if="results.playlistTab.data.length > 0">
<div class="release_grid" v-else>
<router-link
tag="div"
v-for="release in results.playlistTab.data"
v-for="playlist in viewInfo.data.slice(0, itemsToShow)"
class="release clickable"
:key="release.id"
:to="{ name: 'Playlist', params: { id: release.id } }"
:key="playlist.playlistID"
:to="{ name: 'Playlist', params: { id: playlist.playlistID } }"
>
<div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
<img aria-hidden="true" class="rounded coverart" :src="playlist.playlistPictureMedium" />
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="release.link"
:data-link="playlist.playlistLink"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<p class="primary-text">{{ release.title }}</p>
<p class="primary-text">{{ playlist.playlistTitle }}</p>
<p class="secondary-text">
{{
`${$t('globals.by', { artist: release.user.name })} - ${$tc('globals.listTabs.trackN', release.nb_tracks)}`
`${$t('globals.by', { artist: playlist.artistName })} - ${$tc(
'globals.listTabs.trackN',
playlist.playlistTracksNumber
)}`
}}
</p>
</router-link>
</div>
</div>
</template>
</section>
</template>
<script>
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder
},
props: {
viewInfo: {
validator: function (value) {
let isNull = Object.is(value, null)
let isObject = Object.prototype.toString.call(value) === '[object Object]'
return isNull || isObject
},
required: true
},
itemsToShow: {
type: Number,
required: false
},
wantHeaders: {
type: Boolean,
required: false,
default: false
}
},
computed: {
isLoading() {
return !this.viewInfo || !this.viewInfo.hasLoaded
}
}
}
</script>

85
src/components/search/ResultsTracks.vue
View File

@ -1,75 +1,77 @@
<template>
<div id="track_search" class="search_tabcontent">
<BaseLoadingPlaceholder v-if="!results.trackTab.loaded" />
<div v-else-if="results.trackTab.data.length == 0">
<section>
<BaseLoadingPlaceholder v-if="isLoading" />
<template v-else>
<div v-if="viewInfo.data.length === 0">
<h1>{{ $t('search.noResultsTrack') }}</h1>
</div>
<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
<thead>
<tr>
<table v-else class="table table--tracks">
<thead v-if="wantHeaders">
<tr class="capitalize">
<th colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
<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: 3.5rem"></th>
</tr>
</thead>
<tbody>
<tr v-for="track in results.trackTab.data">
<tr v-for="track in viewInfo.data.slice(0, itemsToShow)" :key="track.trackLink">
<td class="table__icon table__icon--big">
<a
href="#"
@click="playPausePreview"
class="rounded"
:class="{ 'single-cover': !!track.preview }"
:data-preview="track.preview"
:class="{ 'single-cover': !!track.trackPreview }"
:data-preview="track.trackPreview"
>
<PreviewControls v-if="track.preview" />
<PreviewControls v-if="track.trackPreview" />
<img class="rounded coverart" :src="track.album.cover_small" />
<img class="rounded coverart" :src="track.albumPicture" />
</a>
</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>
{{
track.title +
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
}}
<i v-if="track.isTrackExplicit" class="material-icons explicit-icon">explicit</i>
{{ getTitle(track) }}
</div>
</td>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
:to="{ name: 'Artist', params: { id: track.artist.id } }"
:to="{ name: 'Artist', params: { id: track.artistID } }"
>
{{ track.artist.name }}
{{ track.artistName }}
</router-link>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center breakline clickable"
:to="{ name: 'Album', params: { id: track.album.id } }"
:to="{ name: 'Album', params: { id: track.albumID } }"
>
{{ track.album.title }}
{{ track.albumTitle }}
</router-link>
<td class="table__cell table__cell--small table__cell--center">
{{ convertDuration(track.duration) }}
{{ convertDuration(track.trackDuration) }}
</td>
<td
class="table__cell--download table__cell--center clickable"
@click.stop="$emit('add-to-queue', $event)"
:data-link="track.link"
:data-link="track.trackLink"
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>
</table>
</div>
</template>
</section>
</template>
<script>
@ -80,15 +82,44 @@ import EventBus from '@/utils/EventBus'
import { convertDuration } from '@/utils/utils'
export default {
props: ['results'],
components: {
BaseLoadingPlaceholder,
PreviewControls
},
props: {
viewInfo: {
validator: function (value) {
let isNull = Object.is(value, null)
let isObject = Object.prototype.toString.call(value) === '[object Object]'
return isNull || isObject
},
required: true
},
itemsToShow: {
type: Number,
required: false
},
wantHeaders: {
type: Boolean,
required: false,
default: false
}
},
computed: {
isLoading() {
return !this.viewInfo || !this.viewInfo.hasLoaded
}
},
methods: {
convertDuration,
playPausePreview(e) {
EventBus.$emit('trackPreview:playPausePreview', e)
},
getTitle(track) {
const hasTitleVersion = track.trackTitleVersion && track.trackTitle.indexOf(track.trackTitleVersion) === -1
return `${track.trackTitle}${hasTitleVersion ? ` ${track.trackTitleVersion}` : ''}`
}
}
}

73
src/components/search/TopResult.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<router-link
tag="div"
class="top_result cursor-pointer flex items-center flex-col"
:to="{ name: upperCaseFirstLowerCaseRest($attrs.info.type), params: { id: $attrs.info.id } }"
>
<div class="cover_container">
<img
aria-hidden="true"
class="coverart"
:src="$attrs.info.picture"
:class="$attrs.info.type == 'artist' ? 'circle' : 'rounded'"
/>
<button
role="button"
aria-label="download"
@click.stop="$emit('add-to-queue', $event)"
:data-link="$attrs.info.link"
class="download_overlay"
tabindex="0"
>
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</button>
</div>
<div class="info_box">
<p class="primary-text">{{ $attrs.info.title }}</p>
<p class="secondary-text">
{{ fansNumber }}
</p>
<span class="tag">{{ $tc(`globals.listTabs.${$attrs.info.type}`, 1) }}</span>
</div>
</router-link>
</template>
<style scoped>
.tag {
background-color: var(--tag-background);
border-radius: 2px;
color: var(--tag-text);
display: inline-block;
font-size: 10px;
padding: 3px 6px;
text-transform: capitalize;
}
</style>
<script>
import { upperCaseFirstLowerCaseRest } from '@/utils/texts'
export default {
methods: {
upperCaseFirstLowerCaseRest
},
computed: {
fansNumber() {
let number
try {
number = this.$n(this.$attrs.info.nb_fan)
} catch (error) {
number = this.$n(this.$attrs.info.nb_fan, { locale: 'en' })
}
return this.$attrs.info.type == 'artist'
? this.$t('search.fans', { n: number })
: this.$t('globals.by', { artist: this.$attrs.info.artist }) +
' - ' +
this.$tc('globals.listTabs.trackN', this.$attrs.info.nb_song)
}
}
}
</script>

117
src/data/search.js Normal file
View File

@ -0,0 +1,117 @@
import { getProperty } from '@/utils/utils'
/**
* @typedef {object} ReducedSearchResult
* @property {FormattedData} data
* @property {boolean} hasLoaded
*/
/**
* @typedef {object} FormattedData
*/
/**
* @typedef {function} Formatter
* @returns {FormattedData} formattedData
*/
/**
* Reduces passed data to a specific format decied by the formatter passed.
*
* @param {object} rawObj
* @param {Formatter} formatFunc
* @returns {null|ReducedSearchResult}
*/
export function reduceSearchResults(rawObj, formatFunc) {
if (!rawObj.hasLoaded) {
return null
} else {
const { data: rawData } = rawObj
const formattedData = []
for (const dataElement of rawData) {
let formatted = formatFunc(dataElement)
formattedData.push(formatted)
}
return {
data: formattedData,
hasLoaded: rawObj.hasLoaded
}
}
}
/**
* @param {FormattedData} track
*/
export function formatSingleTrack(track) {
return {
/* Track */
trackTitle: getProperty(track, 'title', 'SNG_TITLE'),
trackTitleVersion: getProperty(track, 'title_version', 'VERSION'),
trackPreview: getProperty(track, 'preview'),
trackDuration: getProperty(track, 'duration', 'DURATION'),
trackLink: getProperty(track, 'link') || `https://www.deezer.com/track/${track.SNG_ID}`,
isTrackExplicit: getProperty(track, 'explicit_lyrics', 'EXPLICIT_LYRICS'),
/* Artist */
artistID: getProperty(track, 'artist.id', 'ART_ID'),
artistName: getProperty(track, 'artist.name', 'ART_NAME'),
/* Album */
albumID: getProperty(track, 'album.id', 'ALB_ID'),
albumTitle: getProperty(track, 'album.title', 'ALB_TITLE'),
albumPicture:
getProperty(track, 'album.cover_small') ||
`https://e-cdns-images.dzcdn.net/images/cover/${track.ALB_PICTURE}/32x32-000000-80-0-0.jpg`
}
}
export function formatAlbums(album) {
return {
/* Album */
albumID: getProperty(album, 'id', 'ALB_ID'),
albumTitle: getProperty(album, 'title', 'ALB_TITLE'),
albumCoverMedium:
getProperty(album, 'cover_medium') ||
`https://e-cdns-images.dzcdn.net/images/cover/${album.ALB_PICTURE}/156x156-000000-80-0-0.jpg`,
albumLink: getProperty(album, 'link') || `https://deezer.com/album/${album.ALB_ID}`,
albumTracks: getProperty(album, 'nb_tracks', 'NUMBER_TRACK'),
isAlbumExplicit: getProperty(album, 'explicit_lyrics', 'EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS'),
/* Artist */
artistName: getProperty(album, 'artist.name', 'ART_NAME')
}
}
export function formatArtist(artist) {
return {
/* Artist */
artistID: getProperty(artist, 'id', 'ART_ID'),
artistName: getProperty(artist, 'name', 'ART_NAME'),
artistPictureMedium:
getProperty(artist, 'picture_medium') ||
`https://e-cdns-images.dzcdn.net/images/artist/${artist.ART_PICTURE}/156x156-000000-80-0-0.jpg`,
artistLink: getProperty(artist, 'link') || `https://deezer.com/artist/${artist.ART_ID}`,
artistAlbumsNumber: getProperty(artist, 'nb_album', 'NB_FAN')
}
}
export function formatPlaylist(playlist) {
return {
/* Playlist */
playlistID: getProperty(playlist, 'id', 'PLAYLIST_ID'),
playlistTitle: getProperty(playlist, 'title', 'TITLE'),
playlistPictureMedium:
getProperty(playlist, 'picture_medium') ||
`https://e-cdns-images.dzcdn.net/images/${playlist.PICTURE_TYPE}/${
playlist.PLAYLIST_PICTURE
}/156x156-000000-80-0-0.jpg`,
playlistLink: getProperty(playlist, 'link') || `https://deezer.com/playlist/${playlist.PLAYLIST_ID}`,
playlistTracksNumber: getProperty(playlist, 'nb_tracks', 'NB_SONG'),
/* Artist */
artistName: getProperty(playlist, 'user.name')
}
}

8
src/lang/en.js
View File

@ -4,6 +4,7 @@ const en = {
back: 'back',
loading: 'loading',
download: 'Download {thing}',
downloadAll: 'Download all {thing}',
by: 'by {artist}',
in: 'in {album}',
download_hint: 'Download',
@ -27,6 +28,7 @@ const en = {
single: 'single | singles',
title: 'title | titles',
track: 'track | tracks',
trackN: '0 tracks | {n} track | {n} tracks',
releaseN: '0 releases | {n} release | {n} releases',
playlist: 'playlist | playlists',
compile: 'compilation | compilations',
@ -36,11 +38,7 @@ const en = {
featured: 'Featured in',
spotifyPlaylist: 'spotify playlist | spotify playlists',
releaseDate: 'release date',
error: 'error',
trackN: '0 tracks | {n} track | {n} tracks',
albumN: '0 albums | {n} album | {n} albums',
artistN: '0 artists | {n} artist | {n} artists',
playlistN: '0 playlists | {n} playlist | {n} playlists',
error: 'error'
}
},
about: {

14
src/lang/fr.js
View File

@ -4,6 +4,7 @@ const fr = {
back: 'retour',
loading: 'chargement en cours',
download: 'Télécharger {thing}',
downloadAll: "Télécharger l'intégralité des {thing}",
by: 'par {artist}',
in: 'dans {album}',
download_hint: 'Télécharger',
@ -27,6 +28,7 @@ const fr = {
single: 'single | singles',
title: 'titre | titres',
track: 'piste | pistes',
trackN: '0 piste | {n} piste | {n} pistes',
releaseN: '0 sortie | {n} sortie | {n} sorties',
playlist: 'playlist | playlists',
compile: 'compilation | compilations',
@ -36,11 +38,7 @@ const fr = {
featured: 'Apparaît dans',
spotifyPlaylist: 'playlist spotify | playlists spotify',
releaseDate: 'date de sortie',
error: 'erreur',
trackN: '0 piste | {n} piste | {n} pistes',
albumN: '0 album | {n} album | {n} albums',
artistN: '0 artiste | {n} artiste | {n} artistes',
playlistN: '0 playlist | {n} playlist | {n} playlists'
error: 'erreur'
}
},
about: {
@ -201,8 +199,7 @@ const fr = {
},
appearance: {
title: 'Apparence',
slimDownloadTab: 'Onglet de téléchargement compact',
slimSidebar: 'Barre latérale compacte'
slimDownloadTab: 'Onglet de téléchargement compact'
},
downloadPath: {
title: 'Emplacement De Téléchargement'
@ -302,8 +299,7 @@ const fr = {
syncedLyrics: 'Paroles Synchronisées',
copyright: "Droits d'Auteur (Copyright)",
composer: 'Compositeur',
involvedPeople: 'Personnes Impliquées',
source: 'ID de la source et de la piste'
involvedPeople: 'Personnes Impliquées'
},
other: {
title: 'Autre',

8
src/lang/it.js
View File

@ -4,6 +4,7 @@ const it = {
back: 'indietro',
loading: 'caricamento',
download: 'Scarica {thing}',
downloadAll: 'Scarica ogni {thing}',
by: 'di {artist}',
in: 'in {album}',
download_hint: 'Scarica',
@ -26,6 +27,7 @@ const it = {
single: 'singolo | singoli',
title: 'titolo | titoli',
track: 'brano | brani',
trackN: '0 brani | {n} brano | {n} brani',
releaseN: '0 dischi | {n} disco | {n} dischi',
playlist: 'playlist',
compile: 'compilation',
@ -36,11 +38,7 @@ const it = {
spotifyPlaylist: 'playlist spotify',
releaseDate: 'data di uscita',
error: 'errore',
empty: '',
trackN: '0 brani | {n} brano | {n} brani',
albumN: '{n} album',
artistN: '0 artisti | {n} artista | {n} artisti',
playlistN: '{n} playlist',
empty: ''
}
},
about: {

0
public/css/vendor/OpenSans.css → src/styles/css/OpenSans.css
View File

7
src/styles/css/helpers.css Normal file
View File

@ -0,0 +1,7 @@
.changing-theme {
transition: all 200ms ease-in-out;
}
[v-cloak] {
display: none;
}

19
public/css/vendor/material-icons.css → src/styles/css/material-icons.css
View File

@ -25,3 +25,22 @@
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons.explicit-icon {
margin-right: 0.3125em;
margin-left: -3px;
color: hsl(240, 5%, 59%);
}
.material-icons.explicit-icon.explicit-icon--right {
margin-right: 0px;
margin-left: 0.3125em;
}
.material-icons.disabled {
@apply opacity-50 cursor-default;
}
.material-icons.mirrored {
transform: scaleX(-1);
}

30
src/styles/scss/base/_animations.scss
View File

@ -6,33 +6,3 @@
transform: rotate(360deg);
}
}
@keyframes indeterminate {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
100% {
left: 100%;
right: -90%;
}
}
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}

7
src/styles/scss/base/_variables.scss
View File

@ -1,7 +0,0 @@
// Breakpoints
// TODO Change them in more proper values
$small: 601px;
$medium: 993px;
// Static variables (not an oxymoron)
$explicit-separator: 0.3125em;

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

@ -2,55 +2,55 @@ input[type='text'],
input[type='password'],
input[type='number'] {
appearance: none;
width: calc(100% - 16px);
margin-bottom: 8px;
border: 0px solid black;
line-height: 36px;
padding: 0px 8px;
border-radius: 4px;
background-color: var(--secondary-background);
padding: 0px 8px;
width: calc(100% - 16px);
line-height: 36px;
color: var(--foreground);
margin-bottom: 8px;
}
input[type='checkbox'] {
appearance: none;
background-color: none;
border: 2px solid gray;
opacity: 0.5;
border-radius: 2px;
padding: 7px;
margin: 3px;
display: inline-block;
position: relative;
opacity: 0.5;
margin: 3px;
border: 2px solid gray;
border-radius: 2px;
background-color: none;
padding: 7px;
&:checked {
opacity: 1;
margin: 3px;
border: 0px solid var(--primary-color);
border-radius: 2px;
background-color: var(--primary-color);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: center center;
border: 0px solid var(--primary-color);
border-radius: 2px;
padding: 9px;
margin: 3px;
color: var(--primary-text);
}
}
select {
appearance: none;
width: 100%;
margin-bottom: 8px;
border: 0px solid black;
line-height: 36px;
padding: 0px 40px 0px 8px;
border-radius: 4px;
background-clip: border-box;
background-color: var(--secondary-background);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-position: calc(100% - 8px) center;
background-repeat: no-repeat;
background-size: 24px;
background-position: calc(100% - 8px) center;
background-clip: border-box;
padding: 0px 40px 0px 8px;
width: 100%;
line-height: 36px;
color: var(--foreground);
margin-bottom: 8px;
}
p {
@ -67,27 +67,9 @@ img {
}
}
i {
&.disabled {
opacity: 0.5;
cursor: default;
}
&.explicit_icon {
color: hsl(240, 5%, 59%);
margin-right: $explicit-separator;
margin-left: -3px;
&.explicit_icon--right {
margin-left: $explicit-separator;
margin-right: 0px;
}
}
}
.single-cover {
position: relative;
display: inline-block;
position: relative;
color: white;
}
@ -105,61 +87,42 @@ i {
cursor: pointer !important;
}
.table--tracklist .clickable:hover,
.table--charts .clickable:hover {
text-decoration: underline;
}
.with_checkbox {
display: flex;
align-items: center;
[type='checkbox'] {
cursor: pointer;
}
.checkbox_text {
margin-left: 10px;
cursor: pointer;
user-select: none;
}
}
.coverart {
background-color: var(--secondary-background);
}
// ? Maybe make a component?
.cover_container {
position: relative;
.coverart {
opacity: 1;
display: block;
backface-visibility: hidden;
transition: 0.5s ease;
opacity: 1;
width: 100%;
height: auto;
transition: 0.5s ease;
backface-visibility: hidden;
}
.download_overlay {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #000000;
border-radius: 50%;
min-width: 32px;
padding: 0px;
height: 44px;
transition: 0.5s ease;
opacity: 0;
border: 0px;
border-radius: 50%;
background-color: #000000;
padding: 0px;
min-width: 32px;
height: 44px;
text-align: center;
i {
color: white;
padding: 10px;
cursor: pointer;
padding: 10px;
color: white;
}
&:focus {
@ -178,45 +141,3 @@ i {
}
}
}
// TODO Remove
.inline-flex {
display: flex;
align-items: center;
.right {
margin-left: auto;
}
}
// TODO Remove
.right {
float: right;
}
.hide {
display: none !important;
}
.changing-theme {
transition: all 200ms ease-in-out;
}
[v-cloak] {
display: none;
}
.material-icons {
@apply select-none;
$sizes: 18, 24, 36, 48;
@each $size in $sizes {
&.md-#{$size} {
font-size: $size * 1px;
}
}
&.mirrored {
transform: scaleX(-1);
}
}

8
src/styles/scss/globals/_tables.scss
View File

@ -228,9 +228,7 @@ $table-border-radius: 3px;
}
}
// @todo Remove
.top-tracks-position {
padding: 12px;
text-align: center;
cursor: default;
.table--tracklist .clickable:hover,
.table--charts .clickable:hover {
text-decoration: underline;
}

1
src/styles/scss/style.scss
View File

@ -3,7 +3,6 @@
@import '~tailwindcss/utilities';
@import './base/base';
@import './base/variables';
html {
height: 100vh;

68
src/styles/scss/tabs/_search-tab.scss
View File

@ -1,47 +1,13 @@
#main_search {
.search_section {
float: none;
padding-top: 20px;
padding-bottom: 20px;
&:not(:first-child) {
border-top: 1px solid theme('colors.grayscale.500');
}
}
.top_result_header {
display: block;
cursor: default;
font-size: 2rem;
text-align: center;
}
}
.search_header {
display: inline-block;
cursor: pointer;
font-size: 1.75rem;
margin-bottom: 25px;
text-transform: capitalize;
&:not(.top_result_header) {
transition: color 200ms ease-in-out;
&:hover {
color: var(--primary-color);
}
}
}
/* Top Result */
.top_result {
display: flex;
align-items: center;
flex-direction: column;
@apply flex items-center flex-col;
// display: flex;
// align-items: center;
// flex-direction: column;
> .cover_container {
width: 156px;
height: 156px;
width: 9.75rem;
height: 9.75rem;
}
.info_box {
@ -49,24 +15,24 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
margin-top: 0.9375rem;
.primary-text,
.secondary-text {
font-size: 18px;
font-size: 1.125rem;
text-align: center;
}
.primary-text {
margin-bottom: 5px;
margin-bottom: 0.3125rem;
}
.secondary-text {
margin-bottom: 10px;
margin-bottom: 0.625rem;
}
.tag {
width: 40px;
width: 2.5rem;
text-align: center;
}
}
@ -76,17 +42,17 @@
.release {
.primary-text,
.secondary-text {
margin: 0px;
margin-bottom: 4px;
margin: 0rem;
margin-bottom: 0.25rem;
}
.secondary-text {
opacity: 0.75;
font-size: 14px;
font-size: 0.875rem;
.material-icons {
font-size: 17px !important;
margin-left: 4px;
font-size: 1.0625rem !important;
margin-left: 0.25rem;
}
}
}
@ -99,7 +65,7 @@
&.firstrow_only {
grid-template-rows: 1fr;
grid-auto-rows: 0;
grid-row-gap: 0px;
grid-row-gap: 0rem;
overflow-y: hidden;
}
}

17
src/styles/scss/tabs/_settings-tab.scss
View File

@ -78,6 +78,21 @@
}
}
.with-checkbox {
display: flex;
align-items: center;
[type='checkbox'] {
cursor: pointer;
}
.checkbox_text {
margin-left: 10px;
cursor: pointer;
user-select: none;
}
}
/* Input group */
.input_group {
margin-bottom: 25px;
@ -86,7 +101,7 @@
margin-bottom: 7px;
}
.with_checkbox + & {
.with-checkbox + & {
margin-top: 10px;
}
}

8
src/utils/toasts.js
View File

@ -6,7 +6,10 @@ import { socket } from '@/utils/socket'
const sharedOptions = {
gravity: 'bottom',
position: 'left'
position: 'left',
offset: {
x: '14rem'
}
}
let toastsWithId = {}
@ -84,9 +87,6 @@ export const toast = function(msg, icon = null, dismiss = true, id = null) {
delete toastsWithId[id]
}
}
},
offset: {
x: 'true' === localStorage.getItem('slimSidebar') ? '3rem': '14rem'
}
}).showToast()
if (id) {

22
src/utils/utils.js
View File

@ -95,6 +95,28 @@ export function copyToClipboard(text) {
ghostInput.remove()
}
export function getProperty(obj, ...props) {
for (const prop of props) {
// Example: this.is.an.example
let hasDotNotation = /\./.test(prop)
// Searching the properties in the object
let valueToTest = hasDotNotation
? prop.split('.').reduce((o, i) => {
if (o) {
return o[i]
}
}, obj)
: obj[prop]
if (!!valueToTest) {
return valueToTest
}
}
return null
}
export default {
isValidURL,
convertDuration,

3
tailwind.config.js
View File

@ -48,7 +48,8 @@ module.exports = {
}
},
variants: {
textColor: ({ after }) => after(['group-hover'])
textColor: ({ after }) => after(['group-hover']),
borderWidth: ['responsive', 'first', 'hover', 'focus']
},
corePlugins: {
preflight: false