Squashed merge from refactor/code-cleanup to main

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

View File

@ -14,3 +14,4 @@ rules:
no-unused-vars: off
no-console: off
camelcase: off
vue/no-v-html: off

View File

@ -1,12 +0,0 @@
{
"useTabs": true,
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"bracketSpacing": true,
"trailingComma": "none",
"printWidth": 120,
"arrowParens": "avoid",
"vueIndentScriptAndStyle": false,
"endOfLine": "lf"
}

10
.prettierrc.yml Normal file
View File

@ -0,0 +1,10 @@
---
useTabs: true
tabWidth: 2
semi: false
singleQuote: true
bracketSpacing: true
trailingComma: none
printWidth: 120
arrowParens: avoid
vueIndentScriptAndStyle: false

View File

@ -4,13 +4,11 @@
"scripts": {
"clean": "rimraf public/js/bundle.js public/js/bundle.temp.js public/js/bundle.js.map",
"clean-temp": "rimraf public/js/bundle.temp.js",
"serve": "python ../server.py",
"serve:gui": "python ../deemix-pyweb.py --dev",
"serve": "yarn --cwd ../server start",
"build:js": "rollup -c",
"watch:js": "rollup -c -w",
"minify": "esbuild public/js/bundle.temp.js --outfile=public/js/bundle.js --minify",
"dev": "npm-run-all --parallel serve watch:js",
"dev:gui": "npm-run-all --parallel serve:gui watch:js",
"dev": "npm-run-all --parallel watch:js",
"build": "npm-run-all --sequential clean build:js minify clean-temp",
"lint": "eslint src/**/*.{js,vue} --fix",
"lint-tests": "eslint src/**/*.js --fix",

File diff suppressed because one or more lines are too long

View File

@ -26,18 +26,6 @@
</div>
</template>
<style>
.app-container {
display: flex;
}
.content-container {
width: 100%;
display: flex;
flex-direction: column;
}
</style>
<script>
import { socket } from '@/utils/socket'
@ -78,3 +66,15 @@ export default {
}
}
</script>
<style>
.app-container {
display: flex;
}
.content-container {
width: 100%;
display: flex;
flex-direction: column;
}
</style>

View File

@ -1,13 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="flag-icon-css-ar"
viewBox="0 0 640 480"
version="1.1">
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
id="flag-icon-css-ar"
viewBox="0 0 640 480"
version="1.1">
<metadata
id="metadata1678">
<rdf:RDF>

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

View File

@ -1,5 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg8" version="1.1" viewBox="0 0 26.458333 26.458334" height="100" width="100">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg8" version="1.1"
viewBox="0 0 26.458333 26.458334" height="100" width="100">
<defs id="defs2">
<linearGradient id="linearGradient3062">
<stop id="stop3058" offset="0" style="stop-color:#007aff;stop-opacity:1"/>
@ -208,7 +209,7 @@
</filter>
</defs>
<metadata id="metadata5">
</metadata>
<g style="display:inline" id="layer2">
<circle r="10.583333" cy="13.229166" cx="13.229166" id="path2775" style="opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.881856;stroke-linecap:round;stroke-linejoin:round"/>

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#03A9F4;" d="M425.457,117.739c-3.121-1.838-6.961-1.966-10.197-0.341c-3.231,1.629-5.416,4.786-5.803,8.384
c-0.384,3.499-0.981,6.997-1.728,10.667c-20.885,94.784-62.827,140.885-128.256,140.885h-96c-5.062,0.009-9.42,3.574-10.432,8.533
l-32,149.995l-5.717,38.187c-3.287,17.365,8.125,34.107,25.489,37.394c1.915,0.362,3.858,0.549,5.807,0.558h64.213

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

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>

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>

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>

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>

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>

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>

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

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>

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>

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>

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)
})

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>

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) {

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>

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)

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) {

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">

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)

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>

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({

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>

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
}
}

View File

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

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: {

View File

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

View File

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

View File

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

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 }) +
' - ' +

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)"
>

View File

@ -4,17 +4,13 @@ let settingsData = {}
let defaultSettingsData = {}
let spotifyCredentials = {}
const cached = false
export async function getSettingsData() {
if (!cached) {
const data = await fetchData('getSettings')
const { settings, defaultSettings, spotifySettings } = data
// cached = true
settingsData = settings
defaultSettingsData = defaultSettings
spotifyCredentials = spotifySettings || {}
}
const data = await fetchData('getSettings')
const { settings, defaultSettings, spotifySettings } = data
settingsData = settings
defaultSettingsData = defaultSettings
spotifyCredentials = spotifySettings || {}
return { settingsData, defaultSettingsData, spotifyCredentials }
}

View File

@ -406,7 +406,7 @@ const fr = {
ARLcopied: 'ARL copié dans le presse-papier'
},
logs: {
title: "Journaux (Logs)",
title: 'Journaux (Logs)',
areLogsActive: 'Actifs'
}
},
@ -417,7 +417,7 @@ const fr = {
favorites: 'favoris',
linkAnalyzer: 'analyseur de lien',
settings: 'paramètres',
logs: "journaux (logs)",
logs: 'journaux (logs)',
about: 'à propos'
},
tracklist: {

View File

@ -1,7 +1,7 @@
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { locales } from '@/lang/index'
import { locales } from '@/lang'
Vue.use(VueI18n)
@ -20,7 +20,7 @@ const i18n = new VueI18n({
* @param {number} choicesLength An overall amount of available choices
* @returns A final choice index to select plural word by
*/
ru(choice, choicesLength) {
ru(choice /*, choicesLength */) {
const n = Math.abs(choice) % 100
const n1 = n % 10

View File

@ -127,12 +127,12 @@ const routes = [
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior(to, from, savedPosition) {
scrollBehavior() {
return { x: 0, y: 0 }
}
})
router.beforeEach((to, from, next) => {
router.beforeEach((to, _, next) => {
switch (to.name) {
case 'Tracklist': {
// const getTracklistParams = {

View File

@ -28,10 +28,9 @@ const mutations = {
SET_ERRORS(state, payload) {
// The payload has useless data for the GUI, so only the needed data is saved in the store
for (const errorName in state) {
// eslint-disable-next-line no-prototype-builtins
if (state.hasOwnProperty(errorName)) {
const error = payload[errorName]
state[errorName] = error
state[errorName] = payload[errorName]
}
}
}

View File

@ -34,7 +34,8 @@ const actions = {
commit('RESET_LOGIN')
},
setARL({ commit }, payload) {
let { arl, saveOnLocalStorage } = payload
let { saveOnLocalStorage } = payload
const { arl } = payload
saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage
@ -45,7 +46,8 @@ const actions = {
}
},
setAccessToken({ commit }, payload) {
let { accessToken, saveOnLocalStorage } = payload
let { saveOnLocalStorage } = payload
const { accessToken } = payload
saveOnLocalStorage = typeof saveOnLocalStorage === 'undefined' ? true : saveOnLocalStorage

View File

@ -1,4 +1,4 @@
import { ref, watch } from '@vue/composition-api'
import { ref } from '@vue/composition-api'
import { socket } from '@/utils/socket'
const messages = ref([])

View File

@ -1,5 +1,5 @@
// 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 delta = newVolume - originalVolume

View File

@ -31,7 +31,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
const iconNode = document.createElement('span')
iconNode.classList.add('toast-icon')
if (icon == 'loading') {
if (icon === 'loading') {
const loader = document.createElement('div')
loader.classList.add('circle-loader')
iconNode.appendChild(loader)
@ -66,7 +66,7 @@ export const toast = function (msg, icon = null, dismiss = true, id = null) {
iconNode.classList.add('toast-icon')
if (icon == null) {
iconNode.appendChild(document.createTextNode(''))
} else if (icon == 'loading') {
} else if (icon === 'loading') {
const loader = document.createElement('div')
loader.classList.add('circle-loader')
iconNode.appendChild(loader)

View File

@ -47,14 +47,15 @@ export function isValidURL(text) {
* @since 0.0.0
*/
export function convertDuration(duration) {
const mm = Math.floor(duration / 60)
// Convert from seconds only to mm:ss format
let mm, ss
mm = Math.floor(duration / 60)
ss = duration - mm * 60
// Add leading zero if ss < 0
let ss = duration - mm * 60 // Add leading zero if ss < 0
if (ss < 10) {
ss = '0' + ss
}
return mm + ':' + ss
}
@ -64,11 +65,13 @@ export function convertDuration(duration) {
* @since 0.0.0
*/
export function convertDurationSeparated(duration) {
let hh, mm, ss
mm = Math.floor(duration / 60)
hh = Math.floor(mm / 60)
ss = duration - mm * 60
let mm = Math.floor(duration / 60)
const hh = Math.floor(mm / 60)
const ss = duration - mm * 60
mm -= hh * 60
return [hh, mm, ss]
}

View File

@ -21,7 +21,7 @@
resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.0.tgz"
integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
"@babel/core@7.14.3":
"@babel/core@7.14.3", "@babel/core@^7.1.0", "@babel/core@^7.12.16", "@babel/core@^7.7.5":
version "7.14.3"
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
@ -42,27 +42,6 @@
semver "^6.3.0"
source-map "^0.5.0"
"@babel/core@^7.1.0", "@babel/core@^7.12.16", "@babel/core@^7.7.5":
version "7.14.3"
resolved "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz"
integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
dependencies:
"@babel/code-frame" "^7.12.13"
"@babel/generator" "^7.14.3"
"@babel/helper-compilation-targets" "^7.13.16"
"@babel/helper-module-transforms" "^7.14.2"
"@babel/helpers" "^7.14.0"
"@babel/parser" "^7.14.3"
"@babel/template" "^7.12.13"
"@babel/traverse" "^7.14.2"
"@babel/types" "^7.14.2"
convert-source-map "^1.7.0"
debug "^4.1.0"
gensync "^1.0.0-beta.2"
json5 "^2.1.2"
semver "^6.3.0"
source-map "^0.5.0"
"@babel/eslint-parser@^7.12.16":
version "7.14.3"
resolved "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.14.3.tgz"