+
+
+
+
+
+ If you're reading this it means that js/bundle.js isn't loading correctly.
+ Make sure the file is present, if not build the webui.
+
+
+
+
+
+
+
diff --git a/webui/src/app.js b/webui/src/app.js
new file mode 100644
index 0000000..398742d
--- /dev/null
+++ b/webui/src/app.js
@@ -0,0 +1,275 @@
+import Vue from 'vue'
+
+import '@/plugins/composition-api'
+
+import '@/styles/vendor/material-icons.css'
+import '@/styles/vendor/OpenSans.css'
+
+import '@/styles/css/tailwind.css'
+
+import '@/styles/css/normalize.css'
+import '@/styles/css/base.css'
+import '@/styles/css/components.css'
+import '@/styles/css/helpers.css'
+import '@/styles/css/icons.css'
+import '@/styles/css/tables.css'
+import '@/styles/css/typography.css'
+
+import App from '@/App.vue'
+import i18n from '@/plugins/i18n'
+import router from '@/router'
+import store from '@/store'
+
+import { socket } from '@/utils/socket'
+import { fetchData, postToServer } from '@/utils/api'
+import { toast } from '@/utils/toasts'
+import { isValidURL } from '@/utils/utils'
+import { sendAddToQueue } from '@/utils/downloads'
+import { SPOTIFY_STATUS } from '@/constants'
+
+/* ===== Random utils ===== */
+
+/* eslint-disable no-extend-native */
+String.prototype.capitalize = function () {
+ return this.charAt(0).toUpperCase() + this.slice(1)
+}
+// Reset if ejs fails
+if (location.base == "<%= locationBase %>") location.base = "/"
+
+/* ===== App initialization ===== */
+async function startApp() {
+ document.getElementById('missingBundle').remove()
+ new Vue({
+ store,
+ router,
+ i18n,
+ render: h => h(App)
+ }).$mount('#app')
+
+ const connectResponse = await fetchData('connect')
+ const spotifyStatus = connectResponse.spotifyEnabled ? SPOTIFY_STATUS.ENABLED : SPOTIFY_STATUS.DISABLED
+
+ if (connectResponse.deezerAvailable === 'no-network') {
+ document.getElementById('deezer_not_reachable').classList.remove('hide')
+ }
+ if (connectResponse.deezerAvailable === 'no') {
+ document.getElementById('deezer_not_available').classList.remove('hide')
+ }
+
+ store.dispatch('setAppInfo', connectResponse.update).catch(console.error)
+ store.dispatch('setSpotifyStatus', spotifyStatus).catch(console.error)
+
+ let arl = localStorage.getItem('arl')
+ let accessToken = localStorage.getItem('accessToken')
+
+ if (connectResponse.singleUser) {
+ if (connectResponse.singleUser.arl) arl = connectResponse.singleUser.arl
+ if (connectResponse.singleUser.accessToken) accessToken = connectResponse.singleUser.accessToken
+ }
+
+ if (connectResponse.autologin) {
+ console.info('Autologin')
+ const accountNum = localStorage.getItem('accountNum')
+
+ async function login(arl, accountNum) {
+ toast(i18n.t('toasts.loggingIn'), 'loading', false, 'login-toast')
+ arl = arl.trim()
+ let result
+
+ if (accountNum !== 0) {
+ result = await postToServer('loginArl', { arl, force: true, child: accountNum || 0 })
+ } else {
+ result = await postToServer('loginArl', { arl })
+ }
+
+ return result
+ }
+
+ if (arl) {
+ let result = await login(arl, accountNum)
+ if (result.status === 0 && accessToken) {
+ const { arl: newArl } = await postToServer('loginWithCredentials', { accessToken })
+ if (newArl && newArl !== arl) {
+ arl = newArl
+ store.dispatch('setARL', { arl })
+ }
+ result = await login(newArl, accountNum)
+ }
+ loggedIn(result)
+ }
+ } else {
+ loggedIn({ status: 3, user: connectResponse.currentUser, arl })
+ }
+
+ if (connectResponse.checkForUpdates) {
+ toast(i18n.t('toasts.checkingUpdates'), 'loading', false, 'updates-toast')
+ const updates = await fetchData('checkForUpdates')
+ store.dispatch('setUpdateInfo', updates).catch(console.error)
+ if (updates.updateAvailable) {
+ toast(i18n.t('toasts.updateAvailable'), 'browser_updated', true, 'updates-toast')
+ } else {
+ toast(i18n.t('toasts.noUpdateAvailable'), 'done', true, 'updates-toast')
+ }
+ }
+}
+
+function initClient() {
+ store.dispatch('setClientMode', true)
+ setClientModeKeyBindings()
+}
+
+document.addEventListener('DOMContentLoaded', startApp)
+if (window.api) {
+ initClient()
+}
+
+/* ===== Global shortcuts ===== */
+
+document.addEventListener('paste', pasteEvent => {
+ if (pasteEvent.target.localName === 'input') return
+
+ let pastedText = pasteEvent.clipboardData.getData('Text')
+
+ if (isValidURL(pastedText)) {
+ if (router.currentRoute.name === 'Link Analyzer') {
+ socket.emit('analyzeLink', pastedText)
+ } else {
+ if (pastedText.includes('\n')) pastedText = pastedText.replace(/\n/g, ';')
+ sendAddToQueue(pastedText)
+ }
+ } else {
+ const searchbar = document.querySelector('#searchbar')
+ searchbar.select()
+ searchbar.setSelectionRange(0, 99999)
+ }
+})
+
+/**
+ * Sets up key bindings that already work in the browser (server mode)
+ */
+function setClientModeKeyBindings() {
+ document.addEventListener('keyup', keyEvent => {
+ // ALT + left
+ if (keyEvent.altKey && keyEvent.key === 'ArrowLeft') {
+ router.back()
+ }
+
+ // ALT + right
+ if (keyEvent.altKey && keyEvent.key === 'ArrowRight') {
+ router.forward()
+ }
+ })
+}
+function loggedIn(data) {
+ const { status, user } = data
+
+ switch (status) {
+ case 1:
+ case 3:
+ // Login ok
+ toast(i18n.t('toasts.loggedIn'), 'done', true, 'login-toast')
+
+ store.dispatch('login', data)
+ break
+ case 2:
+ // Already logged in
+ toast(i18n.t('toasts.alreadyLogged'), 'done', true, 'login-toast')
+
+ store.dispatch('setUser', user)
+ break
+ case 0:
+ // Login failed
+ toast(i18n.t('toasts.loginFailed'), 'close', true, 'login-toast')
+
+ store.dispatch('removeARL')
+ break
+ case -1:
+ toast(i18n.t('toasts.deezerNotAvailable'), 'close', true, 'login-toast')
+
+ // TODO
+ // $('#open_login_prompt').show()
+ // document.getElementById('logged_in_info').classList.add('hide')
+ // $('#settings_username').text('Not Logged')
+ // $('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
+ // document.getElementById('home_not_logged_in').classList.remove('hide')
+ }
+}
+
+/* ===== Socketio listeners ===== */
+
+// Debug messages for socketio
+socket.on('message', function (msg) {
+ console.log(msg)
+})
+socket.on('restoringQueue', function () {
+ toast(i18n.t('toasts.restoringQueue'), 'loading', false, 'restoring_queue')
+})
+
+socket.on('cancellingCurrentItem', function (uuid) {
+ toast(i18n.t('toasts.cancellingCurrentItem'), 'loading', false, 'cancelling_' + uuid)
+})
+
+socket.on('currentItemCancelled', function (uuid) {
+ toast(i18n.t('toasts.currentItemCancelled'), 'done', true, 'cancelling_' + uuid)
+})
+
+socket.on('startAddingArtist', function (data) {
+ toast(i18n.t('toasts.startAddingArtist', { artist: data.name }), 'loading', false, 'artist_' + data.id)
+})
+
+socket.on('finishAddingArtist', function (data) {
+ toast(i18n.t('toasts.finishAddingArtist', { artist: data.name }), 'done', true, 'artist_' + data.id)
+})
+
+socket.on('startConvertingSpotifyPlaylist', function (id) {
+ toast(i18n.t('toasts.startConvertingSpotifyPlaylist'), 'loading', false, 'spotifyplaylist_' + id)
+})
+
+socket.on('finishConvertingSpotifyPlaylist', function (id) {
+ toast(i18n.t('toasts.finishConvertingSpotifyPlaylist'), 'done', true, 'spotifyplaylist_' + id)
+})
+
+socket.on('errorMessage', function (error) {
+ toast(error, 'error')
+})
+
+socket.on('queueError', function (queueItem) {
+ if (queueItem.errid) {
+ toast(queueItem.link + ' - ' + i18n.t(`errors.ids.${queueItem.errid}`), 'error')
+ } else {
+ toast(queueItem.link + ' - ' + queueItem.error, 'error')
+ }
+})
+
+socket.on('alreadyInQueue', function (data) {
+ toast(i18n.t('toasts.alreadyInQueue', { item: data.title }), 'playlist_add_check')
+})
+
+socket.on('queueErrorNotLoggedIn', function () {
+ toast(i18n.t('toasts.loginNeededToDownload'), 'report')
+})
+const bitrateLabels = {
+ 15: '360 HQ',
+ 14: '360 MQ',
+ 13: '360 LQ',
+ 9: 'FLAC',
+ 3: '320kbps',
+ 1: '128kbps',
+ 8: '128kbps',
+ 0: 'MP3'
+}
+socket.on('queueErrorCantStream', function (bitrate) {
+ toast(i18n.t('toasts.queueErrorCantStream', {bitrate: bitrateLabels[bitrate]}), 'report')
+})
+
+socket.on('startGeneratingItems', function (data) {
+ toast(i18n.t('toasts.startGeneratingItems', { n: data.total }), 'loading', false, 'batch_' + data.uuid)
+})
+
+socket.on('finishGeneratingItems', function (data) {
+ toast(i18n.t('toasts.finishGeneratingItems', { n: data.total }), 'done', true, 'batch_' + data.uuid)
+})
+socket.on('toast', data => {
+ const { msg, icon, dismiss, id } = data
+ toast(msg, icon || null, dismiss !== undefined ? dismiss : true, id || null)
+})
diff --git a/webui/src/assets/ar.svg b/webui/src/assets/ar.svg
new file mode 100644
index 0000000..3767090
--- /dev/null
+++ b/webui/src/assets/ar.svg
@@ -0,0 +1,914 @@
+
+
diff --git a/webui/src/assets/deemix-icon.svg b/webui/src/assets/deemix-icon.svg
new file mode 100644
index 0000000..d45054e
--- /dev/null
+++ b/webui/src/assets/deemix-icon.svg
@@ -0,0 +1,240 @@
+
+
diff --git a/webui/src/assets/paypal.svg b/webui/src/assets/paypal.svg
new file mode 100644
index 0000000..d698dfa
--- /dev/null
+++ b/webui/src/assets/paypal.svg
@@ -0,0 +1,44 @@
+
+
+
diff --git a/webui/src/components/TheContent.vue b/webui/src/components/TheContent.vue
new file mode 100644
index 0000000..1d1b406
--- /dev/null
+++ b/webui/src/components/TheContent.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+ search
+
+
+
+
+ search
+
+
+
+
+
+
+
diff --git a/webui/src/components/downloads/TheDownloadBar.vue b/webui/src/components/downloads/TheDownloadBar.vue
new file mode 100644
index 0000000..3fe8ff3
--- /dev/null
+++ b/webui/src/components/downloads/TheDownloadBar.vue
@@ -0,0 +1,441 @@
+
+
+
+
+
+
+ ![]()
+ {{ bitrateText }}
+
+
+
+
+ explicit {{ queueItem.title }}
+
+ -
+ {{ queueItem.artist }}
+
+
+
+ {{ queueItem.downloaded + queueItem.failed }}/{{ queueItem.size }}
+
+
+ {{ queueItem.failed }}
+ error_outline
+
+
+
+
+ folder_open
+
+
+ clear_all
+
+
+ delete_sweep
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/globals/BaseLoadingPlaceholder.vue b/webui/src/components/globals/BaseLoadingPlaceholder.vue
new file mode 100644
index 0000000..e959789
--- /dev/null
+++ b/webui/src/components/globals/BaseLoadingPlaceholder.vue
@@ -0,0 +1,56 @@
+
+
+ Setting
+
+
+
+
+
+ {{ props.text || 'Loading...' }}
+
+
+
+
+
diff --git a/webui/src/components/globals/BaseTabs.js b/webui/src/components/globals/BaseTabs.js
new file mode 100644
index 0000000..981d7c9
--- /dev/null
+++ b/webui/src/components/globals/BaseTabs.js
@@ -0,0 +1,34 @@
+/* eslint-disable vue/one-component-per-file */
+import { defineComponent } from '@vue/composition-api'
+
+// https://vuejs.org/v2/guide/render-function.html
+// https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
+export const BaseTab = defineComponent({
+ name: 'BaseTab',
+ functional: true,
+ render(h, ctx) {
+ return h(
+ 'li',
+ {
+ class: [ctx.data.class, 'section-tabs__tab', 'uppercase-first-letter'],
+ on: ctx.data.on
+ },
+ ctx.slots().default
+ )
+ }
+})
+
+export const BaseTabs = defineComponent({
+ name: 'BaseTabs',
+ functional: true,
+ render(h, ctx) {
+ return h(
+ 'ul',
+ {
+ class: [ctx.data.class, 'my-8', 'section-tabs'],
+ on: ctx.data.on
+ },
+ ctx.slots().default
+ )
+ }
+})
diff --git a/webui/src/components/globals/ConfirmModal.vue b/webui/src/components/globals/ConfirmModal.vue
new file mode 100644
index 0000000..fae1151
--- /dev/null
+++ b/webui/src/components/globals/ConfirmModal.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/globals/CoverContainer.vue b/webui/src/components/globals/CoverContainer.vue
new file mode 100644
index 0000000..f4a2459
--- /dev/null
+++ b/webui/src/components/globals/CoverContainer.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+ {{ titleText }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/globals/DeezerWarning.vue b/webui/src/components/globals/DeezerWarning.vue
new file mode 100644
index 0000000..cdcd564
--- /dev/null
+++ b/webui/src/components/globals/DeezerWarning.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/globals/PreviewControls.vue b/webui/src/components/globals/PreviewControls.vue
new file mode 100644
index 0000000..6b7c50f
--- /dev/null
+++ b/webui/src/components/globals/PreviewControls.vue
@@ -0,0 +1,21 @@
+
+
+ play_arrow
+
+
+
+
diff --git a/webui/src/components/globals/TheContextMenu.vue b/webui/src/components/globals/TheContextMenu.vue
new file mode 100644
index 0000000..de6adf0
--- /dev/null
+++ b/webui/src/components/globals/TheContextMenu.vue
@@ -0,0 +1,308 @@
+
+
+
+
+
+
+
diff --git a/webui/src/components/globals/TheQualityModal.vue b/webui/src/components/globals/TheQualityModal.vue
new file mode 100644
index 0000000..c34f3fe
--- /dev/null
+++ b/webui/src/components/globals/TheQualityModal.vue
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/globals/TheTrackPreview.vue b/webui/src/components/globals/TheTrackPreview.vue
new file mode 100644
index 0000000..c731e99
--- /dev/null
+++ b/webui/src/components/globals/TheTrackPreview.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
diff --git a/webui/src/components/pages/About.vue b/webui/src/components/pages/About.vue
new file mode 100644
index 0000000..52b7776
--- /dev/null
+++ b/webui/src/components/pages/About.vue
@@ -0,0 +1,263 @@
+
+
+
+
+ {{
+ $t('about.lincensedUnder.gpl3')
+ }}
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/Artist.vue b/webui/src/components/pages/Artist.vue
new file mode 100644
index 0000000..b9f37f8
--- /dev/null
+++ b/webui/src/components/pages/Artist.vue
@@ -0,0 +1,203 @@
+
+ {{ $t('sidebar.about') }}
+ +
+
+ {{ $t(`about.appStatus.${isOnline ? 'online' : 'offline'}`) }}
+
+
+
+ -
+
- + {{ $t('about.updates.currentWebuiVersion') }}: + {{ __VER__ || $t('about.updates.versionNotAvailable') }} + +
- + {{ $t('about.updates.currentVersion') }}: + {{ current || $t('about.updates.versionNotAvailable') }} + +
- {{ $t('about.updates.deemixVersion') }}: {{ deemixVersion }} +
-
+
+
+
{{ $t('about.titles.usefulLinks') }}
+-
+
- + 🌍 {{ $t('about.officialWebsite') }} + +
- + 🚀 {{ $t('about.officialRepo') }} + +
- + 💻 {{ $t('about.officialWebuiRepo') }} + +
- + 🤖 {{ $t('about.officialSubreddit') }} + +
- + 📰 {{ $t('about.newsChannel') }} + +
- + 💾 {{ $t('about.devlogChannel') }} + +
+ {{ $t('about.titles.bugReports') }} + + {{ $t('about.subtitles.bugReports') }} + +
+-
+
- + {{ $t('about.beforeReporting') }} + + +
- + {{ $t('about.duplicateReports') }} + + +
+ {{ $t('about.titles.contributing') }} + + {{ $t('about.subtitles.contributing') }} + +
+-
+
- + {{ $t('about.acceptFeatures') }} + +
- + {{ $t('about.otherLanguages') }} + +
- + {{ $t('about.understandingCode') }} + +
+ {{ $t('about.titles.donations') }} + + {{ $t('about.subtitles.donations') }} + +
+-
+
+
- + {{ $t('about.notObligated') }} + +
-
+
- + + PayPal: + PayPal.me/RemixDev + +
{{ $t('about.titles.license') }}
+
+
+ 
+
+
+
+
+
+
+
+ {{ $tc(`globals.listTabs.${name}`, 2) }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/Charts.vue b/webui/src/components/pages/Charts.vue
new file mode 100644
index 0000000..62ab262
--- /dev/null
+++ b/webui/src/components/pages/Charts.vue
@@ -0,0 +1,185 @@
+
+ {{ artistName }}
+ +
+ get_app
+
+ | + + {{ data.title }} + | +|||
|---|---|---|---|
|
+
+
+ {{ release.releaseTitle }}
+
+ fiber_new
+
+
+
+ {{ $tc(`globals.listTabs.${release.releaseType}`) }}
+
+
+ |
+ {{ release.releaseDate }} | +{{ release.releaseTracksNumber }} | ++ file_download + | +
+
+
+
+
diff --git a/webui/src/components/pages/Errors.vue b/webui/src/components/pages/Errors.vue
new file mode 100644
index 0000000..0dd3573
--- /dev/null
+++ b/webui/src/components/pages/Errors.vue
@@ -0,0 +1,83 @@
+
+ {{ $t('charts.title') }} {{ country ? `- ${country}` : '' }}
+ +
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ | + {{ pos + 1 }} + | +
+
+ |
+ + {{ + track.title + + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '') + }} + | +{{ track.artist.name }} | +{{ track.album.title }} | ++ {{ convertDuration(track.duration) }} + | ++ + get_app + + | +
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/Favorites.vue b/webui/src/components/pages/Favorites.vue
new file mode 100644
index 0000000..7b1cf09
--- /dev/null
+++ b/webui/src/components/pages/Favorites.vue
@@ -0,0 +1,316 @@
+
+ {{ $t('errors.title', { name: title }) }}
+ +| ID | +{{ $tc('globals.listTabs.artist', 1) }} | +{{ $tc('globals.listTabs.title', 1) }} | +{{ $tc('globals.listTabs.error', 1) }} | +
|---|---|---|---|
| {{ error.data.id }} | +{{ error.data.artist }} | +{{ error.data.title }} | ++ {{ error.errid ? $t(`errors.ids.${error.errid}`, { 'bitrate': downloadBitrate }) : error.message }} + | +
+
+
+
+ {{$t('errors.postTitle')}}
+| ID | +{{ $tc('globals.listTabs.empty')}} | +{{ $tc('globals.listTabs.error', 1) }} | +
|---|---|---|
| {{ error.data.position }} | +{{ error.data.artist }} - {{ error.data.title }} | +{{ error.errid ? $t(`errors.ids.${error.errid}`) : error.message }} | +
+
+ {{ $t('favorites.title') }}
+
+
+
+
+ {{ $tc(`globals.listTabs.${tab}`, 2) }}
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/Home.vue b/webui/src/components/pages/Home.vue
new file mode 100644
index 0000000..18770de
--- /dev/null
+++ b/webui/src/components/pages/Home.vue
@@ -0,0 +1,109 @@
+
+
+ {{ $t('favorites.title') }}
+
+ sync
+
+
+
+
+
+
+
+
+ {{ $t('favorites.noPlaylists') }}
+
+
+
+
+
+
+
+
+
+
+ {{ release.title }}
++ {{ + `${$t('globals.by', { artist: release.creator.name })} - ${$tc( + 'globals.listTabs.trackN', + release.nb_tracks + )}` + }} +
+
+
+
+
+
+
+
+ {{ release.title }}
++ {{ + `${$t('globals.by', { artist: release.creator.name })} - ${$tc( + 'globals.listTabs.trackN', + release.nb_tracks + )}` + }} +
+
+
+
+
+
+ {{ $t('favorites.noAlbums') }}
+
+
+
+
+
+
+ {{ release.title }}
+{{ `${$t('globals.by', { artist: release.artist.name })}` }}
+
+
+
+
+
+ {{ $t('favorites.noArtists') }}
+
+
+
+
+
+
+ {{ release.name }}
+
+
+
+
+
+
+ {{ $t('favorites.noTracks') }}
+| + {{ track.position }} + | +
+
+ |
+ + {{ + track.title + + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '') + }} + | +{{ track.artist.name }} | +{{ track.album.title }} | ++ {{ convertDuration(track.duration) }} + | +
+
+
+ get_app
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/InfoArl.vue b/webui/src/components/pages/InfoArl.vue
new file mode 100644
index 0000000..306ab55
--- /dev/null
+++ b/webui/src/components/pages/InfoArl.vue
@@ -0,0 +1,58 @@
+
+ {{ $t('globals.welcome') }}
+ +{{ $t('home.needTologin') }}
+{{ $t('home.sections.popularPlaylists') }}
+
+
+
+
+
+
+ {{ release.title }}
++ {{ + `${$t('globals.by', { artist: release.user.name })} - ${$tc( + 'globals.listTabs.trackN', + release.nb_tracks + )}` + }} +
+{{ $t('home.sections.popularAlbums') }}
+
+
+
+
+
+
+ {{ release.title }}
+{{ `${$t('globals.by', { artist: release.artist.name })}` }}
+
+
+
+ {{ $t('settings.login.arl.howTo.chromeSteps.videoGuide.link') }}
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/InfoSpotifyFeatures.vue b/webui/src/components/pages/InfoSpotifyFeatures.vue
new file mode 100644
index 0000000..9e5bbdf
--- /dev/null
+++ b/webui/src/components/pages/InfoSpotifyFeatures.vue
@@ -0,0 +1,44 @@
+
+ {{ $t('settings.login.arl.question') }}
+
+ {{ $t('settings.login.arl.howTo.prologue.p1') }}
+ {{ $t('settings.login.arl.howTo.prologue.p2') }}
+ {{ $t('settings.login.arl.howTo.prologue.p3') }}
+ {{ $t('settings.login.arl.howTo.prologue.p4') }}
+
{{ $t('settings.login.arl.howTo.prologue.warning') }}
+ +{{ $t('settings.login.arl.howTo.chromeSteps.easyWay.title') }}
+-
+
- {{ $t('settings.login.arl.howTo.chromeSteps.step1') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step2') }} +
- {{ $t('settings.login.arl.howTo.chromeSteps.easyWay.step3') }} +
- {{ $t('settings.login.arl.howTo.chromeSteps.easyWay.step4') }} +
- {{ $t('settings.login.arl.howTo.chromeSteps.easyWay.step5') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.lastStep') }} +
{{ $t('settings.login.arl.howTo.chromeSteps.title') }}
+-
+
- {{ $t('settings.login.arl.howTo.chromeSteps.step1') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step2') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step3') }} +
- {{ $t('settings.login.arl.howTo.chromeSteps.step4') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step5') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step6') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step7') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step8') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.lastStep') }} +
{{ $t('settings.login.arl.howTo.firefoxSteps.title') }}
+-
+
- {{ $t('settings.login.arl.howTo.firefoxSteps.step1') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step2') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step3') }} +
- {{ $t('settings.login.arl.howTo.firefoxSteps.step4') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step5') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step6') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step7') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.step8') }} +
- {{ $t('settings.login.arl.howTo.commonSteps.lastStep') }} +
+
+
+ {{ $t('settings.spotify.howTo.clientSecretQuestion.step1.spotifyDevelopersDashboard') }}
+
+
+
+
+ {{ $t('settings.spotify.howTo.usernameQuestion.step1.overviewPage') }}
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/LinkAnalyzer.vue b/webui/src/components/pages/LinkAnalyzer.vue
new file mode 100644
index 0000000..774ac36
--- /dev/null
+++ b/webui/src/components/pages/LinkAnalyzer.vue
@@ -0,0 +1,262 @@
+
+ {{ $t('settings.spotify.question') }}
+
+ {{ $t('settings.spotify.howTo.prologue.p1') }}
+ {{ $t('settings.spotify.howTo.prologue.p2') }}
+ {{ $t('settings.spotify.howTo.prologue.p3') }}
+
{{ $t('settings.spotify.howTo.info') }}
+ +{{ $t('settings.spotify.howTo.clientSecretQuestion.title') }}
+
+ {{ $t('settings.spotify.howTo.clientSecretQuestion.step2.text') }}
+ 
+
+ {{ $t('settings.spotify.howTo.clientSecretQuestion.step3.text') }}
+ 
+
+ {{ $t('settings.spotify.howTo.clientSecretQuestion.step4.text') }}
+ 
+
{{ $t('settings.spotify.howTo.clientSecretQuestion.step5') }}
+ +{{ $t('settings.spotify.howTo.usernameQuestion.title') }}
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/Search.vue b/webui/src/components/pages/Search.vue
new file mode 100644
index 0000000..61601bd
--- /dev/null
+++ b/webui/src/components/pages/Search.vue
@@ -0,0 +1,312 @@
+
+ {{ $t('sidebar.linkAnalyzer') }}
+ +
+
+ + {{ $t('linkAnalyzer.info') }} +
++ {{ $t('linkAnalyzer.useful') }} +
+
+
+
+ {{ $t('linkAnalyzer.linkNotSupported') }}
+{{ $t('linkAnalyzer.linkNotSupportedYet') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+ {{
+ data.artist.name
+ }}
+
+
+
+ •
+
+
+
+ {{ data.album.title }}
+
+
+
+
+
+
+
+
+ {{ data.artist.name }}
+
+
+
+ {{ ` • ${$tc('globals.listTabs.trackN', data.nb_tracks)}` }}
+
+
+ get_app
+
+ | {{ $t('linkAnalyzer.table.id') }} | +{{ data.id }} | +
| {{ $t('linkAnalyzer.table.isrc') }} | +{{ data.isrc }} | +
| {{ $t('linkAnalyzer.table.upc') }} | +{{ data.upc }} | +
| {{ $t('linkAnalyzer.table.duration') }} | +{{ convertDuration(data.duration) }} | +
| {{ $t('linkAnalyzer.table.diskNumber') }} | +{{ data.disk_number }} | +
| {{ $t('linkAnalyzer.table.trackNumber') }} | +{{ data.track_position }} | +
| {{ $t('linkAnalyzer.table.releaseDate') }} | +{{ data.release_date }} | +
| {{ $t('linkAnalyzer.table.bpm') }} | +{{ data.bpm }} | +
| {{ $t('linkAnalyzer.table.label') }} | +{{ data.label }} | +
| {{ $t('linkAnalyzer.table.recordType') }} | +{{ $tc(`globals.listTabs.${data.record_type}`, 1) }} | +
| {{ $t('linkAnalyzer.table.genres') }} | +{{ data.genres.data.map(x => x.name).join('; ') }} | +
| {{ $t('linkAnalyzer.table.readable') }} | +{{ $t(data.readable ? 'globals.yes' : 'globals.no').capitalize() }} | +
| {{ $t('linkAnalyzer.table.available') }} | ++ {{ + $t(available_countries.includes(user.country.toLowerCase()) ? 'globals.yes' : 'globals.no').capitalize() + }} + | +
{{ $t('linkAnalyzer.countries') }}
+{{ country[0] }} - [{{ country[2] }}] {{ country[1] }}
+ + +{{ $t('linkAnalyzer.noCountries') }}
+ + +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/Settings.vue b/webui/src/components/pages/Settings.vue
new file mode 100644
index 0000000..5c483f2
--- /dev/null
+++ b/webui/src/components/pages/Settings.vue
@@ -0,0 +1,1175 @@
+
+
+
+
+ {{ $t('search.startSearching') }}
+{{ $t('search.description') }}
+
+
+
+ {{ tab.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('settings.templates.tracknameAvailableVariables') }}
+
+
+
+
+
+ {{ $t('settings.templates.albumTracknameAvailableVariables') }}
+
+
+
+
+
+ {{ $t('settings.templates.playlistTracknameAvailableVariables') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('settings.spotify.question') }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/pages/Tracklist.vue b/webui/src/components/pages/Tracklist.vue
new file mode 100644
index 0000000..8893ebf
--- /dev/null
+++ b/webui/src/components/pages/Tracklist.vue
@@ -0,0 +1,310 @@
+
+
+
+
+
diff --git a/webui/src/components/search/ResultsAlbums.vue b/webui/src/components/search/ResultsAlbums.vue
new file mode 100644
index 0000000..98c4166
--- /dev/null
+++ b/webui/src/components/search/ResultsAlbums.vue
@@ -0,0 +1,85 @@
+
+ {{ $t('settings.title') }}
+ +
+
+
+ {{ $t('settings.login.arl.title') }}
+
+
+
+
+ person{{ $t('settings.login.title') }}
+ +
+ ![Profile Picture]()
+
+
+
+
+
+ {{ user.name || 'not logged' }}
+
+
+
+
+ {{userLicense}} | {{user.country}}
+ + +
+
+
+
+
+
+ {{ $t('settings.login.arl.question') }}
+
+
+
+
+
+
+
+
+
+
+
+
+ language{{ $t('settings.languages') }}
+ +-
+
+
+ web + {{ $t('settings.appearance.title') }} +
+ + + + + + ++ folder{{ $t('settings.downloadPath.title') }} +
+ + +
+
+
+
+ + font_download{{ $t('settings.templates.title') }} +
+ + +{{ $t('settings.templates.tracknameTemplate') }}
+ + +{{ $t('settings.templates.albumTracknameTemplate') }}
+ +{{ $t('settings.templates.playlistTracknameTemplate') }}
+ ++ create_new_folder{{ $t('settings.folders.title') }} +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('settings.folders.playlistNameTemplate') }}
+ +
+
+
+
+
+
+ {{ $t('settings.folders.artistNameTemplate') }}
+ +
+
+
+
+
+
+ {{ $t('settings.folders.albumNameTemplate') }}
+ ++ title{{ $t('settings.trackTitles.title') }} +
+ + +
+
+
+
+
+
+
+
+
+ {{ $t('settings.trackTitles.paddingSize') }}
+ +
+
+
+
+ {{ $t('settings.trackTitles.illegalCharacterReplacer') }}
+ +album{{ $t('settings.covers.title') }}
+ + + + +
+
+
+
+
+ {{ $t('settings.covers.coverImageTemplate') }}
+ +
+
+
+ {{ $t('settings.covers.artistImageTemplate') }}
+ +
+
+
+ {{ $t('settings.covers.localArtworkSize') }}
+ ++ ⚠️ {{ $t('settings.covers.imageSizeWarning') }} +
+
+
+
+ {{ $t('settings.covers.embeddedArtworkSize') }}
+ ++ ⚠️ {{ $t('settings.covers.imageSizeWarning') }} +
+
+
+
+
+ {{ $t('settings.covers.localArtworkFormat.title') }}
+ ++ ⚠️ {{ $t('settings.covers.embeddedPNGWarning') }} +
+ + + +
+
+ {{ $t('settings.covers.jpegImageQuality') }}
+ ++ bookmarks{{ $t('settings.tags.head') }} +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ⚠️ {{ $t('settings.tags.artistsWarning') }} +
++ get_app{{ $t('settings.downloads.title') }} +
+ + +
+
+
+ {{ $t('settings.downloads.queueConcurrency') }}
+ +
+
+
+ {{ $t('settings.downloads.maxBitrate.title') }}
+ +
+
+
+ {{ $t('settings.downloads.overwriteFile.title') }}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('settings.downloads.playlistFilenameTemplate') }}
+ +list{{ $t('settings.other.title') }}
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ {{ $t('settings.other.multiArtistSeparator.title') }}
+ ++ ⚠️ {{ $t('settings.other.multiArtistSeparator.warning') }} +
+
+
+
+ {{ $t('settings.other.dateFormat.title') }}
+ +
+
+
+ {{ $t('settings.other.featuredToTitle.title') }}
+ +
+
+
+ {{ $t('settings.other.titleCasing') }}
+ +
+
+
+ {{ $t('settings.other.artistCasing') }}
+ +
+
+
+ {{ $t('settings.other.previewVolume') }}
+ + {{ previewVolume }}% +
+
+ {{ $t('settings.other.executeCommand.title') }}
+{{ $t('settings.other.executeCommand.description') }}
+{{ settings.executeCommand }}
+{{ $t('globals.empty').capitalize() }}
++ + {{ $t('settings.spotify.title') }} +
+ + +
+
+
+ {{ $t('settings.spotify.clientID') }}
+ +
+
+
+ {{ $t('settings.spotify.clientSecret') }}
+ +
+
+
+
+ {{ $t('settings.spotify.username') }}
+ +
+
+
+ {{ $t('search.noResultsAlbum') }}
+
+
+
+
+
+
+
+
+
+
+ + {{ + $t('globals.by', { artist: release.artistName }) + + ' - ' + + $tc('globals.listTabs.trackN', release.albumTracks) + }} +
+
+
+
+
+ {{ $t('search.noResults') }}
++ {{ $tc(`globals.listTabs.${section.toLowerCase()}`, 2) }} +
+ +
+
+
+ {{ $t('search.noResultsArtist') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webui/src/components/search/ResultsPlaylists.vue b/webui/src/components/search/ResultsPlaylists.vue
new file mode 100644
index 0000000..2e45859
--- /dev/null
+++ b/webui/src/components/search/ResultsPlaylists.vue
@@ -0,0 +1,78 @@
+
+ {{ $t('search.error') }}
+{{ error }}
+
+
+ {{ $t('search.noResultsPlaylist') }}
+
+
+
+
+
+
+
+
+
+
+ + {{ + `${$t('globals.by', { artist: playlist.artistName })} - ${$tc( + 'globals.listTabs.trackN', + playlist.playlistTracksNumber + )}` + }} +
+
+
+
+ {{ $t('search.noResultsTrack') }}
+| {{ $tc('globals.listTabs.title', 1) }} | +{{ $tc('globals.listTabs.artist', 1) }} | +{{ $tc('globals.listTabs.album', 1) }} | ++ timer + | ++ | |
|---|---|---|---|---|---|
|
+
+ |
+
+
+
+ explicit
+ {{ formatTitle(track) }}
+
+ |
+
+ + + {{ track.artistName }} + + | ++ + {{ track.albumTitle }} + + | ++ {{ convertDuration(track.trackDuration) }} + | + ++ + get_app + + | +
+
+
+
+
+
+
+
diff --git a/webui/src/components/settings/TemplateVariablesList.vue b/webui/src/components/settings/TemplateVariablesList.vue
new file mode 100644
index 0000000..1ac81ee
--- /dev/null
+++ b/webui/src/components/settings/TemplateVariablesList.vue
@@ -0,0 +1,32 @@
+
+
+
+ + {{ $attrs.info.title }} +
++ {{ fansNumber }} +
+ + {{ $tc(`globals.listTabs.${$attrs.info.type}`, 1) }} + +
+
+ {{ templateVariable }}
+
+
+