workflow: reset feature/search-page-improvement branch
This commit is contained in:
Roberto Tonino
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
},
|
||||
ARTIST: {
|
||||
hasLoaded: false
|
||||
},
|
||||
TRACK: {
|
||||
hasLoaded: false
|
||||
},
|
||||
PLAYLIST: {
|
||||
hasLoaded: false
|
||||
}
|
||||
},
|
||||
trackTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: false
|
||||
},
|
||||
albumTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: false
|
||||
},
|
||||
artistTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: false
|
||||
},
|
||||
playlistTab: {
|
||||
data: [],
|
||||
next: 0,
|
||||
total: 0,
|
||||
loaded: 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'
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user