fix: some lint errors
This commit is contained in:
Roberto Tonino
parent
59e6b20c61
commit
39d68cdce4
|
|
@ -14,3 +14,4 @@ rules:
|
||||||
no-unused-vars: off
|
no-unused-vars: off
|
||||||
no-console: off
|
no-console: off
|
||||||
camelcase: off
|
camelcase: off
|
||||||
|
vue/no-v-html: off
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
24
src/App.vue
24
src/App.vue
|
|
@ -25,18 +25,6 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
|
||||||
.app-container {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { socket } from '@/utils/socket'
|
import { socket } from '@/utils/socket'
|
||||||
|
|
||||||
|
|
@ -75,3 +63,15 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,41 @@
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</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">
|
<style lang="scss">
|
||||||
#container {
|
#container {
|
||||||
--container-width: 95%;
|
--container-width: 95%;
|
||||||
|
|
@ -69,38 +104,3 @@ main::-webkit-scrollbar-thumb {
|
||||||
padding: 0px 2px;
|
padding: 0px 2px;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -21,82 +21,6 @@
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
import { defineComponent, ref } from '@vue/composition-api'
|
import { defineComponent, ref } from '@vue/composition-api'
|
||||||
import { isValidURL } from '@/utils/utils'
|
import { isValidURL } from '@/utils/utils'
|
||||||
|
|
@ -119,7 +43,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteSearchBarContent = keyEvent => {
|
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.value = ''
|
||||||
this.$refs.searchbar.focus()
|
this.$refs.searchbar.focus()
|
||||||
|
|
@ -206,3 +130,79 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -65,6 +65,45 @@
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</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>
|
<style lang="scss" scoped>
|
||||||
.deemix-icon-container {
|
.deemix-icon-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -108,42 +147,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -41,184 +41,15 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
const possibleStates = ['converting', 'downloading', 'download finished', 'completed']
|
const possibleStates = ['converting', 'downloading', 'download finished', 'completed']
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
queueItem: Object
|
queueItem: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -321,3 +152,174 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -63,58 +63,6 @@
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
import { mapActions, mapGetters } from 'vuex'
|
import { mapActions, mapGetters } from 'vuex'
|
||||||
import QueueItem from '@components/downloads/QueueItem.vue'
|
import QueueItem from '@components/downloads/QueueItem.vue'
|
||||||
|
|
@ -250,7 +198,7 @@ export default {
|
||||||
addToQueue(queueItem, current = false) {
|
addToQueue(queueItem, current = false) {
|
||||||
if (Array.isArray(queueItem)) {
|
if (Array.isArray(queueItem)) {
|
||||||
if (queueItem.length > 1) {
|
if (queueItem.length > 1) {
|
||||||
queueItem.forEach((item, i) => {
|
queueItem.forEach(item => {
|
||||||
item.silent = true
|
item.silent = true
|
||||||
this.addToQueue(item)
|
this.addToQueue(item)
|
||||||
})
|
})
|
||||||
|
|
@ -435,3 +383,55 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -10,17 +10,6 @@
|
||||||
</details>
|
</details>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
|
||||||
details > summary::marker {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
details.with-arrow > summary::marker {
|
|
||||||
display: initial;
|
|
||||||
vertical-align: var(--arrow-v-align, super);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -31,3 +20,14 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
details > summary::marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
details.with-arrow > summary::marker {
|
||||||
|
display: initial;
|
||||||
|
vertical-align: var(--arrow-v-align, super);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
/* eslint-disable vue/one-component-per-file */
|
||||||
import { defineComponent } from '@vue/composition-api'
|
import { defineComponent } from '@vue/composition-api'
|
||||||
|
|
||||||
// https://vuejs.org/v2/guide/render-function.html
|
// https://vuejs.org/v2/guide/render-function.html
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,22 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<style lang="scss" scoped>
|
||||||
$body-padding: 2rem;
|
$body-padding: 2rem;
|
||||||
$body-radius: 15px;
|
$body-radius: 15px;
|
||||||
|
|
@ -68,19 +84,3 @@ $body-radius: 15px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,30 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<style lang="scss" scoped>
|
||||||
.cover-container {
|
.cover-container {
|
||||||
width: 156px;
|
width: 156px;
|
||||||
|
|
@ -58,32 +82,8 @@
|
||||||
|
|
||||||
.download_overlay {
|
.download_overlay {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
border: 0px;
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,7 @@ export default {
|
||||||
position: 6,
|
position: 6,
|
||||||
action: () => {
|
action: () => {
|
||||||
// Paste does not always work
|
// Paste does not always work
|
||||||
if (clipboard in navigator) {
|
if ('clipboard' in navigator) {
|
||||||
navigator.clipboard.readText().then(text => {
|
navigator.clipboard.readText().then(text => {
|
||||||
document.execCommand('insertText', undefined, text)
|
document.execCommand('insertText', undefined, text)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -22,43 +22,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
import { sendAddToQueue } from '@/utils/downloads'
|
import { sendAddToQueue } from '@/utils/downloads'
|
||||||
|
|
||||||
|
|
@ -99,3 +63,41 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$refs.preview.volume = 1
|
this.$refs.preview.volume = 1
|
||||||
|
|
||||||
this.$router.beforeEach((to, from, next) => {
|
this.$router.beforeEach((_, __, next) => {
|
||||||
this.stopStackedTabsPreview()
|
this.stopStackedTabsPreview()
|
||||||
next()
|
next()
|
||||||
})
|
})
|
||||||
|
|
@ -86,7 +86,7 @@ export default {
|
||||||
|
|
||||||
const { currentTarget: obj } = e
|
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 (obj.hasAttribute('playing')) {
|
||||||
if (this.$refs.preview.paused) {
|
if (this.$refs.preview.paused) {
|
||||||
|
|
|
||||||
|
|
@ -144,6 +144,49 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<style lang="scss" scoped>
|
||||||
li,
|
li,
|
||||||
p,
|
p,
|
||||||
|
|
@ -233,46 +276,3 @@ ul {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,7 @@ export default defineComponent({
|
||||||
BaseTabs,
|
BaseTabs,
|
||||||
BaseTab
|
BaseTab
|
||||||
},
|
},
|
||||||
setup(props, ctx) {
|
setup(_, ctx) {
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
currentTab: '',
|
currentTab: '',
|
||||||
sortKey: 'releaseDate',
|
sortKey: 'releaseDate',
|
||||||
|
|
@ -145,7 +145,7 @@ export default defineComponent({
|
||||||
let sortKey = state.sortKey
|
let sortKey = state.sortKey
|
||||||
|
|
||||||
if (sortKey === 'releaseTracksNumber') {
|
if (sortKey === 'releaseTracksNumber') {
|
||||||
sortKey = o => new Number(o.releaseTracksNumber)
|
sortKey = o => Number(o.releaseTracksNumber)
|
||||||
}
|
}
|
||||||
|
|
||||||
return orderBy(state.currentRelease, sortKey, state.sortOrder)
|
return orderBy(state.currentRelease, sortKey, state.sortOrder)
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
</button>
|
</button>
|
||||||
<table class="table table--charts">
|
<table class="table table--charts">
|
||||||
<tbody>
|
<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">
|
<td :class="{ first: pos === 0 }" class="p-3 text-center cursor-default">
|
||||||
{{ pos + 1 }}
|
{{ pos + 1 }}
|
||||||
</td>
|
</td>
|
||||||
|
|
@ -177,7 +177,7 @@ export default {
|
||||||
|
|
||||||
let i = 0
|
let i = 0
|
||||||
for (; i < this.countries.length; i++) {
|
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) {
|
if (i !== this.countries.length) {
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div v-show="activeTab === 'playlist'">
|
<div v-show="activeTab === 'playlist'">
|
||||||
<div v-if="playlists.length == 0">
|
<div v-if="playlists.length === 0">
|
||||||
<h1>{{ $t('favorites.noPlaylists') }}</h1>
|
<h1>{{ $t('favorites.noPlaylists') }}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="playlists.length > 0 || spotifyPlaylists.length > 0" class="release-grid">
|
<div v-if="playlists.length > 0 || spotifyPlaylists.length > 0" class="release-grid">
|
||||||
|
|
|
||||||
|
|
@ -75,14 +75,14 @@ export default {
|
||||||
albums: []
|
albums: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['isLoggedIn'])
|
||||||
|
},
|
||||||
async created() {
|
async created() {
|
||||||
const homeData = await getHomeData()
|
const homeData = await getHomeData()
|
||||||
|
|
||||||
this.initHome(homeData)
|
this.initHome(homeData)
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
...mapGetters(['isLoggedIn'])
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
addToQueue(e) {
|
addToQueue(e) {
|
||||||
sendAddToQueue(e.currentTarget.dataset.link)
|
sendAddToQueue(e.currentTarget.dataset.link)
|
||||||
|
|
|
||||||
|
|
@ -120,14 +120,14 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</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 } }">
|
<router-link tag="button" class="btn btn-primary" name="button" :to="{ name: 'Album', params: { id } }">
|
||||||
{{ $t('linkAnalyzer.table.tracklist') }}
|
{{ $t('linkAnalyzer.table.tracklist') }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="countries.length">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ export default defineComponent({
|
||||||
required: false
|
required: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props, ctx) {
|
setup(_, ctx) {
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
currentTab: {
|
currentTab: {
|
||||||
name: '',
|
name: '',
|
||||||
|
|
@ -246,7 +246,7 @@ export default defineComponent({
|
||||||
|
|
||||||
this.scrolledSearch(needToSearch)
|
this.scrolledSearch(needToSearch)
|
||||||
},
|
},
|
||||||
currentTab(newTab, old) {
|
currentTab(newTab) {
|
||||||
if (this.isTabLoaded(newTab)) return
|
if (this.isTabLoaded(newTab)) return
|
||||||
|
|
||||||
this.performSearch({
|
this.performSearch({
|
||||||
|
|
|
||||||
|
|
@ -718,101 +718,6 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
import { mapActions, mapGetters } from 'vuex'
|
import { mapActions, mapGetters } from 'vuex'
|
||||||
import { debounce } from 'lodash-es'
|
import { debounce } from 'lodash-es'
|
||||||
|
|
@ -1013,7 +918,7 @@ export default {
|
||||||
this.lastCredentials = JSON.parse(JSON.stringify(credentials))
|
this.lastCredentials = JSON.parse(JSON.stringify(credentials))
|
||||||
this.spotifyFeatures = JSON.parse(JSON.stringify(credentials))
|
this.spotifyFeatures = JSON.parse(JSON.stringify(credentials))
|
||||||
},
|
},
|
||||||
async loggedInViaDeezer(arl) {
|
loggedInViaDeezer(arl) {
|
||||||
this.dispatchARL({ arl })
|
this.dispatchARL({ arl })
|
||||||
// this.login()
|
// this.login()
|
||||||
// const res = await fetchData('login', { arl, force: true, child: this.accountNum })
|
// 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')
|
toast(this.$t('toasts.deezerNotAvailable'), 'close', true, 'login-toast')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async loginButton() {
|
loginButton() {
|
||||||
const newArl = this.$refs.loginInput.value.trim()
|
const newArl = this.$refs.loginInput.value.trim()
|
||||||
|
|
||||||
if (newArl && newArl !== this.arl) {
|
if (newArl && newArl !== this.arl) {
|
||||||
|
|
@ -1117,3 +1022,98 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<tbody>
|
<tbody>
|
||||||
<template v-if="type !== 'spotifyPlaylist'">
|
<template v-if="type !== 'spotifyPlaylist'">
|
||||||
<template v-for="(track, index) in body">
|
<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">
|
<td class="table__cell--x-small table__cell--center">
|
||||||
<div class="table__cell-content table__cell-content--vertical-center">
|
<div class="table__cell-content table__cell-content--vertical-center">
|
||||||
<i
|
<i
|
||||||
|
|
@ -299,7 +299,7 @@ export default {
|
||||||
this.body = playlistTracks
|
this.body = playlistTracks
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
selectRow(index, track) {
|
selectRow(_, track) {
|
||||||
track.selected = !track.selected
|
track.selected = !track.selected
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ export default {
|
||||||
},
|
},
|
||||||
itemsToShow: {
|
itemsToShow: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: false
|
default: 6
|
||||||
},
|
},
|
||||||
wantHeaders: {
|
wantHeaders: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
|
||||||
|
|
@ -32,28 +32,24 @@
|
||||||
<ResultsTracks
|
<ResultsTracks
|
||||||
v-else-if="section === 'TRACK'"
|
v-else-if="section === 'TRACK'"
|
||||||
:view-info="standardizeData(viewInfo.TRACK, formatSingleTrack)"
|
:view-info="standardizeData(viewInfo.TRACK, formatSingleTrack)"
|
||||||
:items-to-show="6"
|
|
||||||
@add-to-queue="$emit('add-to-queue', $event)"
|
@add-to-queue="$emit('add-to-queue', $event)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ResultsAlbums
|
<ResultsAlbums
|
||||||
v-else-if="section == 'ALBUM'"
|
v-else-if="section === 'ALBUM'"
|
||||||
:view-info="standardizeData(viewInfo.ALBUM, formatAlbums)"
|
:view-info="standardizeData(viewInfo.ALBUM, formatAlbums)"
|
||||||
:items-to-show="6"
|
|
||||||
@add-to-queue="$emit('add-to-queue', $event)"
|
@add-to-queue="$emit('add-to-queue', $event)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ResultsPlaylists
|
<ResultsPlaylists
|
||||||
v-else-if="section == 'PLAYLIST'"
|
v-else-if="section === 'PLAYLIST'"
|
||||||
:view-info="standardizeData(viewInfo.PLAYLIST, formatPlaylist)"
|
:view-info="standardizeData(viewInfo.PLAYLIST, formatPlaylist)"
|
||||||
:items-to-show="6"
|
|
||||||
@add-to-queue="$emit('add-to-queue', $event)"
|
@add-to-queue="$emit('add-to-queue', $event)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ResultsArtists
|
<ResultsArtists
|
||||||
v-else-if="section === 'ARTIST'"
|
v-else-if="section === 'ARTIST'"
|
||||||
:view-info="standardizeData(viewInfo.ARTIST, formatArtist)"
|
:view-info="standardizeData(viewInfo.ARTIST, formatArtist)"
|
||||||
:items-to-show="6"
|
|
||||||
@add-to-queue="$emit('add-to-queue', $event)"
|
@add-to-queue="$emit('add-to-queue', $event)"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -85,7 +81,7 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
viewInfo: {
|
viewInfo: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: false
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,7 @@ export default {
|
||||||
},
|
},
|
||||||
itemsToShow: {
|
itemsToShow: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: false
|
default: 6
|
||||||
},
|
},
|
||||||
wantHeaders: {
|
wantHeaders: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,7 @@ export default {
|
||||||
},
|
},
|
||||||
itemsToShow: {
|
itemsToShow: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: false
|
default: 6
|
||||||
},
|
},
|
||||||
wantHeaders: {
|
wantHeaders: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
|
||||||
|
|
@ -111,7 +111,7 @@ export default {
|
||||||
},
|
},
|
||||||
itemsToShow: {
|
itemsToShow: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: false
|
default: 6
|
||||||
},
|
},
|
||||||
wantHeaders: {
|
wantHeaders: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ export default {
|
||||||
number = this.$n(this.$attrs.info.nb_fan, { locale: 'en' })
|
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('search.fans', { n: number })
|
||||||
: this.$t('globals.by', { artist: this.$attrs.info.artist }) +
|
: this.$t('globals.by', { artist: this.$attrs.info.artist }) +
|
||||||
' - ' +
|
' - ' +
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,8 @@
|
||||||
|
|
||||||
<div class="flex flex-wrap p-4 space-x-2 rounded-2xl bg-background-secondary">
|
<div class="flex flex-wrap p-4 space-x-2 rounded-2xl bg-background-secondary">
|
||||||
<span
|
<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"
|
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)"
|
@click="$emit('variable-click', templateVariable)"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueI18n from 'vue-i18n'
|
import VueI18n from 'vue-i18n'
|
||||||
|
|
||||||
import { locales } from '@/lang/index'
|
import { locales } from '@/lang'
|
||||||
|
|
||||||
Vue.use(VueI18n)
|
Vue.use(VueI18n)
|
||||||
|
|
||||||
|
|
@ -20,7 +20,7 @@ const i18n = new VueI18n({
|
||||||
* @param {number} choicesLength An overall amount of available choices
|
* @param {number} choicesLength An overall amount of available choices
|
||||||
* @returns A final choice index to select plural word by
|
* @returns A final choice index to select plural word by
|
||||||
*/
|
*/
|
||||||
ru(choice, choicesLength) {
|
ru(choice /*, choicesLength */) {
|
||||||
const n = Math.abs(choice) % 100
|
const n = Math.abs(choice) % 100
|
||||||
const n1 = n % 10
|
const n1 = n % 10
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -127,12 +127,12 @@ const routes = [
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
mode: 'history',
|
mode: 'history',
|
||||||
routes,
|
routes,
|
||||||
scrollBehavior(to, from, savedPosition) {
|
scrollBehavior() {
|
||||||
return { x: 0, y: 0 }
|
return { x: 0, y: 0 }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
router.beforeEach((to, from, next) => {
|
router.beforeEach((to, _, next) => {
|
||||||
switch (to.name) {
|
switch (to.name) {
|
||||||
case 'Tracklist': {
|
case 'Tracklist': {
|
||||||
// const getTracklistParams = {
|
// const getTracklistParams = {
|
||||||
|
|
|
||||||
|
|
@ -28,10 +28,9 @@ const mutations = {
|
||||||
SET_ERRORS(state, payload) {
|
SET_ERRORS(state, payload) {
|
||||||
// The payload has useless data for the GUI, so only the needed data is saved in the store
|
// The payload has useless data for the GUI, so only the needed data is saved in the store
|
||||||
for (const errorName in state) {
|
for (const errorName in state) {
|
||||||
|
// eslint-disable-next-line no-prototype-builtins
|
||||||
if (state.hasOwnProperty(errorName)) {
|
if (state.hasOwnProperty(errorName)) {
|
||||||
const error = payload[errorName]
|
state[errorName] = payload[errorName]
|
||||||
|
|
||||||
state[errorName] = error
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,8 @@ const actions = {
|
||||||
commit('RESET_LOGIN')
|
commit('RESET_LOGIN')
|
||||||
},
|
},
|
||||||
setARL({ commit }, payload) {
|
setARL({ commit }, payload) {
|
||||||
let { arl, saveOnLocalStorage } = payload
|
let { saveOnLocalStorage } = payload
|
||||||
|
const { arl } = payload
|
||||||
|
|
||||||
saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
|
saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
|
||||||
|
|
||||||
|
|
@ -45,7 +46,8 @@ const actions = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setAccessToken({ commit }, payload) {
|
setAccessToken({ commit }, payload) {
|
||||||
let { accessToken, saveOnLocalStorage } = payload
|
let { saveOnLocalStorage } = payload
|
||||||
|
const { accessToken } = payload
|
||||||
|
|
||||||
saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
|
saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
// https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out#answer-13149848
|
// https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out#answer-13149848
|
||||||
export async function adjustVolume(element, newVolume, { duration = 1000, easing = swing, interval = 13 } = {}) {
|
export function adjustVolume(element, newVolume, { duration = 1000, easing = swing, interval = 13 } = {}) {
|
||||||
const originalVolume = element.volume
|
const originalVolume = element.volume
|
||||||
const delta = newVolume - originalVolume
|
const delta = newVolume - originalVolume
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
|
||||||
const iconNode = document.createElement('span')
|
const iconNode = document.createElement('span')
|
||||||
iconNode.classList.add('toast-icon')
|
iconNode.classList.add('toast-icon')
|
||||||
|
|
||||||
if (icon == 'loading') {
|
if (icon === 'loading') {
|
||||||
const loader = document.createElement('div')
|
const loader = document.createElement('div')
|
||||||
loader.classList.add('circle-loader')
|
loader.classList.add('circle-loader')
|
||||||
iconNode.appendChild(loader)
|
iconNode.appendChild(loader)
|
||||||
|
|
@ -66,7 +66,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
|
||||||
iconNode.classList.add('toast-icon')
|
iconNode.classList.add('toast-icon')
|
||||||
if (icon == null) {
|
if (icon == null) {
|
||||||
iconNode.appendChild(document.createTextNode(''))
|
iconNode.appendChild(document.createTextNode(''))
|
||||||
} else if (icon == 'loading') {
|
} else if (icon === 'loading') {
|
||||||
const loader = document.createElement('div')
|
const loader = document.createElement('div')
|
||||||
loader.classList.add('circle-loader')
|
loader.classList.add('circle-loader')
|
||||||
iconNode.appendChild(loader)
|
iconNode.appendChild(loader)
|
||||||
|
|
|
||||||
|
|
@ -47,14 +47,15 @@ export function isValidURL(text) {
|
||||||
* @since 0.0.0
|
* @since 0.0.0
|
||||||
*/
|
*/
|
||||||
export function convertDuration(duration) {
|
export function convertDuration(duration) {
|
||||||
|
const mm = Math.floor(duration / 60)
|
||||||
|
|
||||||
// Convert from seconds only to mm:ss format
|
// Convert from seconds only to mm:ss format
|
||||||
let mm, ss
|
let ss = duration - mm * 60 // Add leading zero if ss < 0
|
||||||
mm = Math.floor(duration / 60)
|
|
||||||
ss = duration - mm * 60
|
|
||||||
// Add leading zero if ss < 0
|
|
||||||
if (ss < 10) {
|
if (ss < 10) {
|
||||||
ss = '0' + ss
|
ss = '0' + ss
|
||||||
}
|
}
|
||||||
|
|
||||||
return mm + ':' + ss
|
return mm + ':' + ss
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -64,11 +65,13 @@ export function convertDuration(duration) {
|
||||||
* @since 0.0.0
|
* @since 0.0.0
|
||||||
*/
|
*/
|
||||||
export function convertDurationSeparated(duration) {
|
export function convertDurationSeparated(duration) {
|
||||||
let hh, mm, ss
|
let mm = Math.floor(duration / 60)
|
||||||
mm = Math.floor(duration / 60)
|
|
||||||
hh = Math.floor(mm / 60)
|
const hh = Math.floor(mm / 60)
|
||||||
ss = duration - mm * 60
|
const ss = duration - mm * 60
|
||||||
|
|
||||||
mm -= hh * 60
|
mm -= hh * 60
|
||||||
|
|
||||||
return [hh, mm, ss]
|
return [hh, mm, ss]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue