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

Squashed merge from refactor/code-cleanup to main

Browse Source
This commit is contained in:
Roberto Tonino
2021-07-17 14:28:29 +02:00
parent b677f422a2
commit 76b9185127
49 changed files with 2086 additions and 2118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/TheContent.vue
View File

@@ -27,6 +27,41 @@
</main>
</template>
<script>
import { debounce } from '@/utils/utils'
import BackButton from '@components/globals/BackButton.vue'
export default {
components: {
BackButton
},
data: () => ({
performScrolledSearch: false
}),
computed: {
showBackButton() {
return ['Tracklist', 'Artist', 'Album', 'Playlist', 'Spotify Playlist'].includes(this.$route.name)
}
},
mounted() {
this.$router.beforeEach((_, __, next) => {
this.$refs.content.scrollTo(0, 0)
next()
})
},
methods: {
handleContentScroll: debounce(async function () {
if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
this.performScrolledSearch = true
await this.$nextTick()
this.performScrolledSearch = false
}, 100)
}
}
</script>
<style lang="scss">
#container {
--container-width: 95%;
@@ -69,38 +104,3 @@ main::-webkit-scrollbar-thumb {
padding: 0px 2px;
}
</style>
<script>
import { debounce } from '@/utils/utils'
import BackButton from '@components/globals/BackButton.vue'
export default {
components: {
BackButton
},
data: () => ({
performScrolledSearch: false
}),
computed: {
showBackButton() {
return ['Tracklist', 'Artist', 'Album', 'Playlist', 'Spotify Playlist'].includes(this.$route.name)
}
},
mounted() {
this.$router.beforeEach((to, from, next) => {
this.$refs.content.scrollTo(0, 0)
next()
})
},
methods: {
handleContentScroll: debounce(async function () {
if (this.$refs.content.scrollTop + this.$refs.content.clientHeight < this.$refs.content.scrollHeight) return
this.performScrolledSearch = true
await this.$nextTick()
this.performScrolledSearch = false
}, 100)
}
}
</script>

155
src/components/TheSearchBar.vue
View File

@@ -21,87 +21,10 @@
</header>
</template>
<style lang="scss">
$icon-dimension: 2rem;
$searchbar-height: 45px;
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
#search {
background-color: var(--secondary-background);
padding: 0 1em;
display: flex;
align-items: center;
border: 1px solid transparent;
transition: border 200ms ease-in-out;
border-radius: 15px;
margin: 10px 10px 20px 10px;
.search__icon {
width: $icon-dimension;
height: $icon-dimension;
i {
font-size: $icon-dimension;
color: var(--foreground);
&::selection {
background: none;
}
}
}
#searchbar {
height: $searchbar-height;
padding-left: 0.5em;
border: 0px;
border-radius: 0px;
background-color: var(--secondary-background);
color: var(--foreground);
font-size: 1.2rem;
font-family: 'Open Sans';
font-weight: 300;
margin-bottom: 0;
&:focus {
outline: none;
}
&::-webkit-search-cancel-button {
appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
// Removing Chrome autofill color
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
}
}
&:focus-within {
border: 1px solid var(--foreground);
}
}
</style>
<script>
import { defineComponent, ref } from '@vue/composition-api'
import { isValidURL } from '@/utils/utils'
import { sendAddToQueue } from '@/utils/downloads'
import { socket } from '@/utils/socket'
import { fetchData } from '@/utils/api'
import EventBus from '@/utils/EventBus'
@@ -120,7 +43,7 @@ export default defineComponent({
}
const deleteSearchBarContent = keyEvent => {
if (!(keyEvent.key == 'Backspace' && keyEvent.ctrlKey && keyEvent.shiftKey)) return
if (!(keyEvent.key === 'Backspace' && keyEvent.ctrlKey && keyEvent.shiftKey)) return
this.$refs.searchbar.value = ''
this.$refs.searchbar.focus()
@@ -207,3 +130,79 @@ export default defineComponent({
}
})
</script>
<style lang="scss">
$icon-dimension: 2rem;
$searchbar-height: 45px;
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
#search {
background-color: var(--secondary-background);
padding: 0 1em;
display: flex;
align-items: center;
border: 1px solid transparent;
transition: border 200ms ease-in-out;
border-radius: 15px;
margin: 10px 10px 20px 10px;
.search__icon {
width: $icon-dimension;
height: $icon-dimension;
i {
font-size: $icon-dimension;
color: var(--foreground);
&::selection {
background: none;
}
}
}
#searchbar {
height: $searchbar-height;
padding-left: 0.5em;
border: 0px;
border-radius: 0px;
background-color: var(--secondary-background);
color: var(--foreground);
font-size: 1.2rem;
font-family: 'Open Sans';
font-weight: 300;
margin-bottom: 0;
&:focus {
outline: none;
}
&::-webkit-search-cancel-button {
appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
// Removing Chrome autofill color
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
}
}
&:focus-within {
border: 1px solid var(--foreground);
}
}
</style>

78
src/components/TheSidebar.vue
View File

@@ -65,6 +65,45 @@
</aside>
</template>
<script>
import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
import { links } from '@/data/sidebar'
import { useTheme } from '@/use/theme'
import deemixIcon from '@/assets/deemix-icon.svg'
export default defineComponent({
setup(_, ctx) {
const state = reactive({
activeTablink: 'home',
links
})
const { THEMES, currentTheme } = useTheme()
/* === Add update notification near info === */
const updateAvailable = computed(() => ctx.root.$store.state.appInfo.updateAvailable)
ctx.root.$router.afterEach(to => {
const linkInSidebar = state.links.find(link => link.routerName === to.name)
if (!linkInSidebar) return
state.activeTablink = linkInSidebar.name
})
return {
...toRefs(state),
updateAvailable,
THEMES,
currentTheme,
isSlim: computed(() => ctx.root.$store.getters.getSlimSidebar),
deemixIcon
}
}
})
</script>
<style lang="scss" scoped>
.deemix-icon-container {
display: grid;
@@ -108,42 +147,3 @@
}
}
</style>
<script>
import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
import { links } from '@/data/sidebar'
import { useTheme } from '@/use/theme'
import deemixIcon from '@/assets/deemix-icon.svg'
export default defineComponent({
setup(props, ctx) {
const state = reactive({
activeTablink: 'home',
links
})
const { THEMES, currentTheme } = useTheme()
/* === Add update notification near info === */
const updateAvailable = computed(() => ctx.root.$store.state.appInfo.updateAvailable)
ctx.root.$router.afterEach((to, from) => {
const linkInSidebar = state.links.find(link => link.routerName === to.name)
if (!linkInSidebar) return
state.activeTablink = linkInSidebar.name
})
return {
...toRefs(state),
updateAvailable,
THEMES,
currentTheme,
isSlim: computed(() => ctx.root.$store.getters.getSlimSidebar),
deemixIcon
}
}
})
</script>

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

@@ -41,184 +41,15 @@
</div>
</template>
<style lang="scss">
.download-object {
padding-bottom: 8px;
.download-info {
display: flex;
align-items: center;
img {
height: 75px;
flex-shrink: 0;
flex: 0 0 75px;
}
.download-line {
display: block;
}
.download-slim-separator {
display: none;
}
}
.download-info-data {
flex: 1 50%;
margin-left: 8px;
overflow: hidden;
}
.download-info-status {
flex: 1 15%;
margin-left: 8px;
width: 80px;
}
> .download-bar {
display: flex;
align-items: center;
height: 24px;
> .queue_icon {
cursor: default;
margin-left: 8px;
}
> .progress {
margin: 0px;
}
}
}
#download_list:not(.slim) .download-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#download_list.slim {
> .download-object {
.download-info {
display: block;
img {
display: none;
}
.download-line {
display: inline-block;
}
.download-slim-separator {
display: inline-block;
}
}
.download-info-data {
width: calc(80% - 16px);
display: inline-block;
padding-left: 0px;
}
.download-info-status {
width: 20%;
display: inline-block; // ignored due to float
float: right;
}
}
}
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: var(--secondary-background);
border-radius: 2px;
margin: 0.5rem 0 1rem 0;
overflow: hidden;
.determinate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--primary-color);
transition: width 0.3s linear;
}
.converting {
background-color: var(--secondary-color);
transition: none !important;
}
.indeterminate {
background-color: var(--primary-color);
&::before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
&::after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 1.15s;
}
}
}
@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>
const possibleStates = ['converting', 'downloading', 'download finished', 'completed']
export default {
props: {
queueItem: Object
queueItem: {
type: Object,
default: () => ({})
}
},
data() {
return {
@@ -321,3 +152,174 @@ export default {
}
}
</script>
<style lang="scss">
.download-object {
padding-bottom: 8px;
.download-info {
display: flex;
align-items: center;
img {
height: 75px;
flex: 0 0 75px;
}
.download-line {
display: block;
}
.download-slim-separator {
display: none;
}
}
.download-info-data {
flex: 1 50%;
margin-left: 8px;
overflow: hidden;
}
.download-info-status {
flex: 1 15%;
margin-left: 8px;
width: 80px;
}
> .download-bar {
display: flex;
align-items: center;
height: 24px;
> .queue_icon {
cursor: default;
margin-left: 8px;
}
> .progress {
margin: 0;
}
}
}
#download_list:not(.slim) .download-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#download_list.slim {
> .download-object {
.download-info {
display: block;
img {
display: none;
}
.download-line {
display: inline-block;
}
.download-slim-separator {
display: inline-block;
}
}
.download-info-data {
width: calc(80% - 16px);
display: inline-block;
padding-left: 0;
}
.download-info-status {
width: 20%;
display: inline-block; // ignored due to float
float: right;
}
}
}
.progress {
position: relative;
height: 4px;
display: block;
width: 100%;
background-color: var(--secondary-background);
border-radius: 2px;
margin: 0.5rem 0 1rem 0;
overflow: hidden;
.determinate {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-color: var(--primary-color);
transition: width 0.3s linear;
}
.converting {
background-color: var(--secondary-color);
transition: none !important;
}
.indeterminate {
background-color: var(--primary-color);
&::before {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
&::after {
content: '';
position: absolute;
background-color: inherit;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 1.15s;
}
}
}
@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>

106
src/components/downloads/TheDownloadBar.vue
View File

@@ -63,58 +63,6 @@
</section>
</template>
<style lang="scss" scoped>
#toggle_download_tab {
width: 25px;
height: 25px;
&::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_right';
}
}
#download_tab_container.tab-hidden {
#toggle_download_tab {
&::before {
content: 'chevron_left';
}
}
&::after {
content: attr(data-label);
display: flex;
align-items: center;
text-transform: capitalize;
writing-mode: vertical-rl;
line-height: 2rem;
}
}
#download_list {
height: calc(100% - 32px);
padding-left: 28px;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--panels-background);
}
&::-webkit-scrollbar-thumb {
background: var(--panels-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
</style>
<script>
import { mapActions, mapGetters } from 'vuex'
import QueueItem from '@components/downloads/QueueItem.vue'
@@ -250,7 +198,7 @@ export default {
addToQueue(queueItem, current = false) {
if (Array.isArray(queueItem)) {
if (queueItem.length > 1) {
queueItem.forEach((item, i) => {
queueItem.forEach(item => {
item.silent = true
this.addToQueue(item)
})
@@ -435,3 +383,55 @@ export default {
}
}
</script>
<style lang="scss" scoped>
#toggle_download_tab {
width: 25px;
height: 25px;
&::before {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
content: 'chevron_right';
}
}
#download_tab_container.tab-hidden {
#toggle_download_tab {
&::before {
content: 'chevron_left';
}
}
&::after {
content: attr(data-label);
display: flex;
align-items: center;
text-transform: capitalize;
writing-mode: vertical-rl;
line-height: 2rem;
}
}
#download_list {
height: calc(100% - 32px);
padding-left: 28px;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-track {
background: var(--panels-background);
}
&::-webkit-scrollbar-thumb {
background: var(--panels-scroll);
border-radius: 4px;
width: 6px;
padding: 0px 2px;
}
}
</style>

22
src/components/globals/BaseAccordion.vue
View File

@@ -10,17 +10,6 @@
</details>
</template>
<style>
details > summary::marker {
display: none;
}
details.with-arrow > summary::marker {
display: initial;
vertical-align: var(--arrow-v-align, super);
}
</style>
<script>
export default {
props: {
@@ -31,3 +20,14 @@ export default {
}
}
</script>
<style>
details > summary::marker {
display: none;
}
details.with-arrow > summary::marker {
display: initial;
vertical-align: var(--arrow-v-align, super);
}
</style>

1
src/components/globals/BaseTabs.js
View File

@@ -1,3 +1,4 @@
/* eslint-disable vue/one-component-per-file */
import { defineComponent } from '@vue/composition-api'
// https://vuejs.org/v2/guide/render-function.html

32
src/components/globals/ConfirmModal.vue
View File

@@ -13,6 +13,22 @@
</div>
</template>
<script>
export default {
data() {
return {
titleText: 'Are you sure you want to reset settings to default?'
}
},
mounted() {
setTimeout(() => {
// this.$refs.wrapper.classList.add('bounceIn')
// this.$refs.body.classList.add('bounceIn')
}, 2000)
}
}
</script>
<style lang="scss" scoped>
$body-padding: 2rem;
$body-radius: 15px;
@@ -68,19 +84,3 @@ $body-radius: 15px;
z-index: 1;
}
</style>
<script>
export default {
data() {
return {
titleText: 'Are you sure you want to reset settings to default?'
}
},
mounted() {
setTimeout(() => {
// this.$refs.wrapper.classList.add('bounceIn')
// this.$refs.body.classList.add('bounceIn')
}, 2000)
}
}
</script>

50
src/components/globals/CoverContainer.vue
View File

@@ -20,6 +20,30 @@
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
cover: {
type: String,
required: true
},
isRounded: {
type: Boolean,
required: false
},
isCircle: {
type: Boolean,
required: false
},
link: {
type: String,
required: true
}
}
}
</script>
<style lang="scss" scoped>
.cover-container {
width: 156px;
@@ -58,32 +82,8 @@
.download_overlay {
opacity: 1;
border: 0px;
border: 0;
}
}
}
</style>
<script>
export default {
inheritAttrs: false,
props: {
cover: {
type: String,
reqired: true
},
isRounded: {
type: Boolean,
required: false
},
isCircle: {
type: Boolean,
required: false
},
link: {
type: String,
reqired: true
}
}
}
</script>

36
src/components/globals/DeezerWarning.vue
View File

@@ -1,23 +1,23 @@
<template>
<div id="deezer_not_available" class="hide">
<i class="material-icons">warning</i> {{ $t('toasts.deezerNotAvailable') }}
</div>
<div id="deezer_not_available" class="hide">
<i class="material-icons">warning</i> {{ $t('toasts.deezerNotAvailable') }}
</div>
</template>
<style>
#deezer_not_available {
background-color: hsl(53, 98%, 47%);
color: rgba(0,0,0, .75);
padding: 8px 12px;
margin: -10px 10px 0px;
display: flex;
border-radius: 8px;
align-items: center;
}
#deezer_not_available i {
margin-right: 8px;
}
#deezer_not_available.hide {
display: none !important;
}
#deezer_not_available {
background-color: hsl(53, 98%, 47%);
color: rgba(0, 0, 0, 0.75);
padding: 8px 12px;
margin: -10px 10px 0px;
display: flex;
border-radius: 8px;
align-items: center;
}
#deezer_not_available i {
margin-right: 8px;
}
#deezer_not_available.hide {
display: none !important;
}
</style>

2
src/components/globals/TheContextMenu.vue
View File

@@ -80,7 +80,7 @@ export default {
position: 6,
action: () => {
// Paste does not always work
if (clipboard in navigator) {
if ('clipboard' in navigator) {
navigator.clipboard.readText().then(text => {
document.execCommand('insertText', undefined, text)
})

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

@@ -22,43 +22,7 @@
</div>
</div>
</template>
<style lang="scss">
.smallmodal {
position: fixed;
z-index: 1250;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: hsla(0, 0%, 0%, 0.4);
animation-duration: 0.3s;
}
.smallmodal-content {
--modal-content-width: 95%;
background-color: transparent;
margin: auto;
width: var(--modal-content-width);
position: relative;
top: 50%;
transform: translateY(-50%);
@media only screen and (min-width: 601px) {
--modal-content-width: 85%;
}
@media only screen and (min-width: 993px) {
--modal-content-width: 70%;
}
}
.smallmodal-content button {
width: 100%;
margin-bottom: 8px;
}
</style>
<script>
import { sendAddToQueue } from '@/utils/downloads'
@@ -99,3 +63,41 @@ export default {
}
}
</script>
<style lang="scss">
.smallmodal {
position: fixed;
z-index: 1250;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: hsla(0, 0%, 0%, 0.4);
animation-duration: 0.3s;
}
.smallmodal-content {
--modal-content-width: 95%;
background-color: transparent;
margin: auto;
width: var(--modal-content-width);
position: relative;
top: 50%;
transform: translateY(-50%);
@media only screen and (min-width: 601px) {
--modal-content-width: 85%;
}
@media only screen and (min-width: 993px) {
--modal-content-width: 70%;
}
}
.smallmodal-content button {
width: 100%;
margin-bottom: 8px;
}
</style>

4
src/components/globals/TheTrackPreview.vue
View File

@@ -34,7 +34,7 @@ export default {
mounted() {
this.$refs.preview.volume = 1
this.$router.beforeEach((to, from, next) => {
this.$router.beforeEach((_, __, next) => {
this.stopStackedTabsPreview()
next()
})
@@ -86,7 +86,7 @@ export default {
const { currentTarget: obj } = e
const icon = obj.tagName == 'I' ? obj : obj.querySelector('i')
const icon = obj.tagName === 'I' ? obj : obj.querySelector('i')
if (obj.hasAttribute('playing')) {
if (this.$refs.preview.paused) {

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

@@ -144,6 +144,49 @@
</div>
</template>
<script>
import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
import { useOnline } from '@/use/online'
import paypal from '@/assets/paypal.svg'
import ethereum from '@/assets/ethereum.svg'
export default defineComponent({
setup(_, ctx) {
const state = reactive({
current: null,
latest: null,
updateAvailable: false,
deemixVersion: null
})
const { isOnline } = useOnline()
function initUpdate(appInfo) {
const { currentCommit, latestCommit, updateAvailable, deemixVersion } = appInfo
state.current = currentCommit
state.latest = latestCommit
state.updateAvailable = updateAvailable
state.deemixVersion = deemixVersion
}
const getAppInfo = computed(() => ctx.root.$store.getters.getAppInfo)
onMounted(() => {
initUpdate(getAppInfo.value)
})
return {
...toRefs(state),
paypal,
ethereum,
isOnline
}
}
})
</script>
<style lang="scss" scoped>
li,
p,
@@ -233,46 +276,3 @@ ul {
}
}
</style>
<script>
import { computed, defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
import { useOnline } from '@/use/online'
import paypal from '@/assets/paypal.svg'
import ethereum from '@/assets/ethereum.svg'
export default defineComponent({
setup(props, ctx) {
const state = reactive({
current: null,
latest: null,
updateAvailable: false,
deemixVersion: null
})
const { isOnline } = useOnline()
function initUpdate(appInfo) {
const { currentCommit, latestCommit, updateAvailable, deemixVersion } = appInfo
state.current = currentCommit
state.latest = latestCommit
state.updateAvailable = updateAvailable
state.deemixVersion = deemixVersion
}
const getAppInfo = computed(() => ctx.root.$store.getters.getAppInfo)
onMounted(() => {
initUpdate(getAppInfo.value)
})
return {
...toRefs(state),
paypal,
ethereum,
isOnline
}
}
})
</script>

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

@@ -87,7 +87,7 @@
</template>
<script>
import { defineComponent, ref, unref, reactive, computed, onMounted, toRefs, watch } from '@vue/composition-api'
import { defineComponent, ref, unref, reactive, computed, toRefs } from '@vue/composition-api'
import { orderBy } from 'lodash-es'
import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
@@ -102,7 +102,7 @@ export default defineComponent({
BaseTabs,
BaseTab
},
setup(props, ctx) {
setup(_, ctx) {
const state = reactive({
currentTab: '',
sortKey: 'releaseDate',
@@ -145,7 +145,7 @@ export default defineComponent({
let sortKey = state.sortKey
if (sortKey === 'releaseTracksNumber') {
sortKey = o => new Number(o.releaseTracksNumber)
sortKey = o => Number(o.releaseTracksNumber)
}
return orderBy(state.currentRelease, sortKey, state.sortOrder)

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

@@ -26,7 +26,7 @@
</button>
<table class="table table--charts">
<tbody>
<tr v-for="(track, pos) in chart" class="track_row">
<tr v-for="(track, pos) in chart" :key="pos" class="track_row">
<td :class="{ first: pos === 0 }" class="p-3 text-center cursor-default">
{{ pos + 1 }}
</td>
@@ -91,7 +91,6 @@ import { getChartsData, getChartTracks } from '@/data/charts'
import PreviewControls from '@components/globals/PreviewControls.vue'
import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
import { fetchData } from '@/utils/api'
export default {
components: {
@@ -178,7 +177,7 @@ export default {
let i = 0
for (; i < this.countries.length; i++) {
if (this.countries[i].title == this.country) break
if (this.countries[i].title === this.country) break
}
if (i !== this.countries.length) {

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

@@ -24,7 +24,7 @@
</button>
<div v-show="activeTab === 'playlist'">
<div v-if="playlists.length == 0">
<div v-if="playlists.length === 0">
<h1>{{ $t('favorites.noPlaylists') }}</h1>
</div>
<div v-if="playlists.length > 0 || spotifyPlaylists.length > 0" class="release-grid">

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

@@ -75,14 +75,14 @@ export default {
albums: []
}
},
computed: {
...mapGetters(['isLoggedIn'])
},
async created() {
const homeData = await getHomeData()
this.initHome(homeData)
},
computed: {
...mapGetters(['isLoggedIn'])
},
methods: {
addToQueue(e) {
sendAddToQueue(e.currentTarget.dataset.link)

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

@@ -120,14 +120,14 @@
</tr>
</table>
<div v-if="type == 'album'">
<div v-if="type === 'album'">
<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>
<p v-for="(country, i) in countries" :key="i">{{ country[0] }} - {{ country[1] }}</p>
</div>
</div>
</div>

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

@@ -43,8 +43,6 @@ import ResultsArtists from '@components/search/ResultsArtists.vue'
import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
import ResultsTracks from '@components/search/ResultsTracks.vue'
import { BaseTabs, BaseTab } from '@components/globals/BaseTabs'
import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads'
import { numberWithDots, convertDuration } from '@/utils/utils'
@@ -52,7 +50,6 @@ import { formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@
import { standardizeData } from '@/data/standardize'
import { useMainSearch } from '@/use/main-search'
import { useSearch } from '@/use/search'
import { useLogs } from '@/use/logs'
const resetObj = { data: [], next: 0, total: 0, hasLoaded: false }
@@ -70,7 +67,7 @@ export default defineComponent({
required: false
}
},
setup(props, ctx) {
setup(_, ctx) {
const state = reactive({
currentTab: {
name: '',
@@ -249,7 +246,7 @@ export default defineComponent({
this.scrolledSearch(needToSearch)
},
currentTab(newTab, old) {
currentTab(newTab) {
if (this.isTabLoaded(newTab)) return
this.performSearch({

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

@@ -718,101 +718,6 @@
</div>
</template>
<style lang="scss" scoped>
#logged_in_info {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
height: 250px;
}
.locale-flag {
justify-content: center;
cursor: pointer;
width: 60px;
&:not(:last-child) {
margin-right: 10px;
}
&.locale-flag--current {
::v-deep svg {
filter: brightness(1) !important;
}
}
&::v-deep svg {
width: 40px !important;
height: 40px !important;
filter: brightness(0.5);
}
}
.settings-group {
border-top-width: 1px;
border-color: hsl(0, 0%, 50%);
}
.settings-group__header {
display: inline-flex;
align-items: center;
padding-top: 2rem;
padding-bottom: 2rem;
font-size: 1.5rem;
i.material-icons {
margin-right: 1rem;
}
}
.settings-container {
display: flex;
&__half {
width: 50%;
}
&__third {
width: 33%;
&--only-checkbox {
display: flex;
align-items: start;
flex-direction: column;
justify-content: center;
}
}
&__half > *,
&__third > * {
margin-bottom: 1rem;
}
}
.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 {
.input-group-text {
margin-bottom: 0.5rem;
}
}
</style>
<script>
import { mapActions, mapGetters } from 'vuex'
import { debounce } from 'lodash-es'
@@ -1013,7 +918,7 @@ export default {
this.lastCredentials = JSON.parse(JSON.stringify(credentials))
this.spotifyFeatures = JSON.parse(JSON.stringify(credentials))
},
async loggedInViaDeezer(arl) {
loggedInViaDeezer(arl) {
this.dispatchARL({ arl })
// this.login()
// const res = await fetchData('login', { arl, force: true, child: this.accountNum })
@@ -1043,7 +948,7 @@ export default {
toast(this.$t('toasts.deezerNotAvailable'), 'close', true, 'login-toast')
}
},
async loginButton() {
loginButton() {
const newArl = this.$refs.loginInput.value.trim()
if (newArl && newArl !== this.arl) {
@@ -1117,3 +1022,98 @@ export default {
}
}
</script>
<style lang="scss" scoped>
#logged_in_info {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
height: 250px;
}
.locale-flag {
justify-content: center;
cursor: pointer;
width: 60px;
&:not(:last-child) {
margin-right: 10px;
}
&.locale-flag--current {
::v-deep svg {
filter: brightness(1) !important;
}
}
&::v-deep svg {
width: 40px !important;
height: 40px !important;
filter: brightness(0.5);
}
}
.settings-group {
border-top-width: 1px;
border-color: hsl(0, 0%, 50%);
}
.settings-group__header {
display: inline-flex;
align-items: center;
padding-top: 2rem;
padding-bottom: 2rem;
font-size: 1.5rem;
i.material-icons {
margin-right: 1rem;
}
}
.settings-container {
display: flex;
&__half {
width: 50%;
}
&__third {
width: 33%;
&--only-checkbox {
display: flex;
align-items: start;
flex-direction: column;
justify-content: center;
}
}
&__half > *,
&__third > * {
margin-bottom: 1rem;
}
}
.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 {
.input-group-text {
margin-bottom: 0.5rem;
}
}
</style>

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

@@ -37,7 +37,7 @@
<tbody>
<template v-if="type !== 'spotifyPlaylist'">
<template v-for="(track, index) in body">
<tr v-if="track.type == 'track'" @click="selectRow(index, track)">
<tr v-if="track.type === 'track'" @click="selectRow(index, track)">
<td class="table__cell--x-small table__cell--center">
<div class="table__cell-content table__cell-content--vertical-center">
<i
@@ -152,7 +152,6 @@
<script>
import { isEmpty } from 'lodash-es'
import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads'
import Utils from '@/utils/utils'
import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
@@ -300,7 +299,7 @@ export default {
this.body = playlistTracks
}
},
selectRow(index, track) {
selectRow(_, track) {
track.selected = !track.selected
}
}

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

@@ -63,7 +63,7 @@ export default {
},
itemsToShow: {
type: Number,
required: false
default: 6
},
wantHeaders: {
type: Boolean,

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

@@ -32,28 +32,24 @@
<ResultsTracks
v-else-if="section === 'TRACK'"
:view-info="standardizeData(viewInfo.TRACK, formatSingleTrack)"
:items-to-show="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsAlbums
v-else-if="section == 'ALBUM'"
v-else-if="section === 'ALBUM'"
:view-info="standardizeData(viewInfo.ALBUM, formatAlbums)"
:items-to-show="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsPlaylists
v-else-if="section == 'PLAYLIST'"
v-else-if="section === 'PLAYLIST'"
:view-info="standardizeData(viewInfo.PLAYLIST, formatPlaylist)"
:items-to-show="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
<ResultsArtists
v-else-if="section === 'ARTIST'"
:view-info="standardizeData(viewInfo.ARTIST, formatArtist)"
:items-to-show="6"
@add-to-queue="$emit('add-to-queue', $event)"
/>
</template>
@@ -85,7 +81,7 @@ export default {
props: {
viewInfo: {
type: Object,
required: false
required: true
}
},
computed: {

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

@@ -51,7 +51,7 @@ export default {
},
itemsToShow: {
type: Number,
required: false
default: 6
},
wantHeaders: {
type: Boolean,

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

@@ -56,7 +56,7 @@ export default {
},
itemsToShow: {
type: Number,
required: false
default: 6
},
wantHeaders: {
type: Boolean,

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

@@ -111,7 +111,7 @@ export default {
},
itemsToShow: {
type: Number,
required: false
default: 6
},
wantHeaders: {
type: Boolean,

2
src/components/search/TopResult.vue
View File

@@ -46,7 +46,7 @@ export default {
number = this.$n(this.$attrs.info.nb_fan, { locale: 'en' })
}
return this.$attrs.info.type == 'artist'
return this.$attrs.info.type === 'artist'
? this.$t('search.fans', { n: number })
: this.$t('globals.by', { artist: this.$attrs.info.artist }) +
' - ' +

3
src/components/settings/TemplateVariablesList.vue
View File

@@ -6,7 +6,8 @@
<div class="flex flex-wrap p-4 space-x-2 rounded-2xl bg-background-secondary">
<span
v-for="templateVariable in templateVariables"
v-for="(templateVariable, i) in templateVariables"
:key="i"
class="inline-block p-2 mt-2 tracking-wider rounded cursor-pointer bg-panels-bg first:ml-2 hover:shadow-outline"
@click="$emit('variable-click', templateVariable)"
>