Compare commits
29 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c9d07f5ef7 | |||
|
78e89d0c02 | ||
| dfa44db91f | |||
|
|
f3bfe8b9ed | ||
| 7e014b29a2 | |||
|
|
d6a1e55e0d | ||
| a96c3ccacb | |||
| ba175afbf7 | |||
| 2ed91884df | |||
|
|
37e4856cdc | ||
| 3dd098584c | |||
| 9ab6c3bb94 | |||
|
|
0f931e218a | ||
|
|
96fe5f0505 | ||
| 367067eff8 | |||
|
|
740152500e | ||
|
|
836c46db32 | ||
|
|
12d21b0407 | ||
|
|
d2c70fc006 | ||
|
|
d724825e06 | ||
|
|
81b649bd59 | ||
| 023649e647 | |||
|
|
761001d686 | ||
|
|
c2659f4c85 | ||
|
|
426a024564 | ||
| 6ce9df7fd8 | |||
| 4dd3f939b8 | |||
|
|
2b79f47d57 | ||
| ff7bb569fc |
75
package-lock.json
generated
75
package-lock.json
generated
@ -9,7 +9,8 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.3.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.4.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||
"axios": "^1.3.3",
|
||||
"body-parser": "^1.20.1",
|
||||
@ -1890,18 +1891,48 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
|
||||
"integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
|
||||
"node_modules/@fortawesome/free-regular-svg-icons": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
|
||||
"integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.3.0"
|
||||
"@fortawesome/fontawesome-common-types": "6.4.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-regular-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
|
||||
"integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
|
||||
"integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.4.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
|
||||
"integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/vue-fontawesome": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
|
||||
@ -14961,12 +14992,34 @@
|
||||
"@fortawesome/fontawesome-common-types": "6.3.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
|
||||
"integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
|
||||
"@fortawesome/free-regular-svg-icons": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
|
||||
"integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.3.0"
|
||||
"@fortawesome/fontawesome-common-types": "6.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
|
||||
"integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
|
||||
"integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
|
||||
"integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/vue-fontawesome": {
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"main": "electron.js",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.3.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.3.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.4.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||
"axios": "^1.3.3",
|
||||
"body-parser": "^1.20.1",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"backend_dev": "http://localhost:31204",
|
||||
"backend_de": "https://webplay.rocks",
|
||||
"backend": "https://webplay.rocks"
|
||||
"backend_de": "http://localhost:31204",
|
||||
"backend_dev": "https://webplay.rocks",
|
||||
"backend": ""
|
||||
}
|
||||
@ -85,23 +85,10 @@ td.fillCell>* {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.favourite {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.favourite.active {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.keepPlaying {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
DIALOGS
|
||||
@ -638,9 +625,8 @@ td.fillCell>* {
|
||||
}
|
||||
|
||||
#artists .artistCover {
|
||||
min-width: 100%;
|
||||
width: 160px;
|
||||
height: initial;
|
||||
min-height: 128px;
|
||||
}
|
||||
|
||||
#artists .artistName {
|
||||
|
||||
@ -1741,6 +1741,10 @@ td.strech {
|
||||
box-shadow: 0 1px 4px var(--glow);
|
||||
}
|
||||
|
||||
.glow-text {
|
||||
text-shadow: 0 1px 4px var(--glow);
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -146,8 +146,6 @@ export default {
|
||||
this.audio.pause();
|
||||
this.audio.src = url;
|
||||
|
||||
this.pushHistoryItem();
|
||||
|
||||
if (this.currentTrackParent.progress) {
|
||||
if (this.currentTrackParent.progress.id == this.selectedTrack._id) {
|
||||
this.skipToSecond(this.currentTrackParent.progress.progress);
|
||||
@ -297,6 +295,7 @@ export default {
|
||||
track: this.selectedTrack,
|
||||
rate: this.audioBpm,
|
||||
});
|
||||
this.pushHistoryItem();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,65 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
ref="dialogBackground"
|
||||
class="dialog-background"
|
||||
v-if="visible"
|
||||
@click="bgClicked"
|
||||
>
|
||||
<div
|
||||
class="dialog-window"
|
||||
:class="{
|
||||
<div ref="dialogBackground" class="dialog-background" v-if="visible" @click="bgClicked">
|
||||
<div class="dialog-window" :class="{
|
||||
fullscreen: isFullscreen,
|
||||
'max-size': maxSize,
|
||||
playing: $store.getters['player/isPlaying'],
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="dialog-header"
|
||||
:class="{ hideOnMobile: showHeaderOnMobile == false }"
|
||||
v-if="showHeader"
|
||||
@dblclick="headerDoubleClick"
|
||||
>
|
||||
}">
|
||||
<div class="dialog-header" :class="{ hideOnMobile: showHeaderOnMobile == false, 'flat-dialog-header': flatDialogHeader == true }" v-if="showHeader" @dblclick="headerDoubleClick">
|
||||
<div class="dialog-header-left">
|
||||
<slot name="header-left" />
|
||||
</div>
|
||||
<div class="dialog-header-center">
|
||||
<h3 v-if="dialogTitle">{{ dialogTitle }}</h3>
|
||||
<h3 v-if="dialogTitle && !flatDialogHeader">{{ dialogTitle }}</h3>
|
||||
<slot name="header-center" />
|
||||
</div>
|
||||
<div class="dialog-header-right">
|
||||
<slot name="header-right" />
|
||||
<button
|
||||
class="hideOnMobile"
|
||||
@click="isFullscreen = !isFullscreen"
|
||||
v-if="showFullscreenButton"
|
||||
:title="isFullscreen ? 'Restore' : 'Fullscreen'"
|
||||
>
|
||||
<button class="hideOnMobile" @click="isFullscreen = !isFullscreen" v-if="showFullscreenButton" :title="isFullscreen ? 'Restore' : 'Fullscreen'">
|
||||
<awesome-icon v-if="isFullscreen" icon="compress" />
|
||||
<awesome-icon v-else icon="expand" />
|
||||
</button>
|
||||
<button
|
||||
@click="cancel"
|
||||
class="red"
|
||||
v-if="showCloseButton"
|
||||
title="Close"
|
||||
>
|
||||
<button @click="cancel" class="red" v-if="showCloseButton" title="Close">
|
||||
<awesome-icon icon="times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="dialog-body"
|
||||
:class="{
|
||||
hideXScroll: disableXscroll == true,
|
||||
hideYScroll: disableYscroll == true,
|
||||
}"
|
||||
>
|
||||
<div class="dialog-body" :class="{ hideXScroll: disableXscroll == true, hideYScroll: disableYscroll == true, 'flat-dialog-header': flatDialogHeader == true }">
|
||||
<slot />
|
||||
<div
|
||||
class="dialog-body-content"
|
||||
v-if="dialogContent"
|
||||
v-html="dialogContent"
|
||||
/>
|
||||
<div class="dialog-body-content" v-if="dialogContent" v-html="dialogContent" />
|
||||
</div>
|
||||
<div class="dialog-footer" v-if="showFooter">
|
||||
<div class="dialog-footer-left">
|
||||
@ -74,41 +41,15 @@
|
||||
</div>
|
||||
<div>
|
||||
<slot name="footer-right" />
|
||||
<div
|
||||
class="dialog-footer-controls"
|
||||
v-if="
|
||||
showFooterButtons &&
|
||||
<div class="dialog-footer-controls" v-if="showFooterButtons &&
|
||||
(openButtons == null || openButtons.length > 0)
|
||||
"
|
||||
>
|
||||
<button
|
||||
v-for="(button, i) in dialogButtons"
|
||||
:key="i"
|
||||
@click="click('clicked', button.text || button)"
|
||||
:class="button.class || ''"
|
||||
:disabled="button.disabled"
|
||||
:title="button.title || ''"
|
||||
v-show="button.visible != false"
|
||||
>
|
||||
<awesome-icon
|
||||
v-if="button.icon"
|
||||
:icon="button.icon"
|
||||
class="ma-right8"
|
||||
/>
|
||||
">
|
||||
<button v-for="( button, i ) in dialogButtons " :key="i" @click="click('clicked', button.text || button)" :class="button.class || ''" :disabled="button.disabled" :title="button.title || ''" v-show="button.visible != false">
|
||||
<awesome-icon v-if="button.icon" :icon="button.icon" class="ma-right8" />
|
||||
{{ button.text || button }}
|
||||
</button>
|
||||
<button
|
||||
ref="dialogButton"
|
||||
@click="click('accept')"
|
||||
v-if="showFooterButtons && !dialogButtons"
|
||||
:disabled="!enableFooterButtons"
|
||||
:class="buttonClass"
|
||||
>
|
||||
<awesome-icon
|
||||
v-if="buttonIcon"
|
||||
:icon="buttonIcon"
|
||||
class="ma-right8"
|
||||
/>
|
||||
<button ref="dialogButton" @click="click('accept')" v-if="showFooterButtons && !dialogButtons" :disabled="!enableFooterButtons" :class="buttonClass">
|
||||
<awesome-icon v-if="buttonIcon" :icon="buttonIcon" class="ma-right8" />
|
||||
{{ buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
@ -143,6 +84,10 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
flatDialogHeader: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@ -301,6 +246,7 @@ export default {
|
||||
z-index: 1000;
|
||||
animation: fadeIn ease 0.20s;
|
||||
}
|
||||
|
||||
.dialog-window {
|
||||
box-shadow: 0px 8px 32px var(--shadow);
|
||||
background-color: var(--white);
|
||||
@ -308,13 +254,16 @@ export default {
|
||||
max-height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dialog-window.max-size {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.dialog-window.fullscreen {
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
@ -329,10 +278,21 @@ export default {
|
||||
flex-shrink: 0;
|
||||
background-color: var(--background);
|
||||
box-shadow: 0px 1px 4px var(--shadow);
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dialog-header.flat-dialog-header {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
box-shadow: none;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.dialog-header h3 {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
@ -344,6 +304,7 @@ export default {
|
||||
align-self: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dialog-header input,
|
||||
.dialog-header select {
|
||||
padding: 0 4px;
|
||||
@ -352,6 +313,7 @@ export default {
|
||||
background-color: var(--white);
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.dialog-header button,
|
||||
.dialog-header a {
|
||||
background-color: transparent;
|
||||
@ -365,85 +327,124 @@ export default {
|
||||
.dialog-header button:hover {
|
||||
background-color: var(--light-gray);
|
||||
}
|
||||
|
||||
.dialog-header button.red:hover {
|
||||
background-color: var(--red50);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.dialog-header button.red svg {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.dialog-header button.red:hover svg {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.dialog-header button.blue {
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.dialog-header button.green:hover {
|
||||
background-color: var(--green);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.dialog-header button.green svg {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.dialog-header button.yellow {
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
/* SUCCESS */
|
||||
.dialog-header button.success svg {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.dialog-header button.success:hover {
|
||||
background-color: var(--success);
|
||||
}
|
||||
|
||||
.dialog-header button.success:hover svg {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.dialog-header button.primary,
|
||||
.dialog-header a.primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
.dialog-header button > span,
|
||||
.dialog-header a > span {
|
||||
|
||||
.dialog-header button>span,
|
||||
.dialog-header a>span {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.dialog-header svg {
|
||||
width: 16px !important;
|
||||
height: 16px;
|
||||
}
|
||||
.dialog-header > div,
|
||||
.dialog-footer > div {
|
||||
|
||||
.dialog-header>div,
|
||||
.dialog-footer>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dialog-header > .dialog-header-center,
|
||||
.dialog-footer > .dialog-footer-center {
|
||||
|
||||
.dialog-header>.dialog-header-center,
|
||||
.dialog-footer>.dialog-footer-center {
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
margin: 0 12px;
|
||||
}
|
||||
.dialog-header > .dialog-header-right input,
|
||||
.dialog-header > .dialog-header-right select {
|
||||
|
||||
.dialog-header>.dialog-header-right input,
|
||||
.dialog-header>.dialog-header-right select {
|
||||
border-left: 1px solid var(--light-border);
|
||||
}
|
||||
|
||||
.dialog-header.flat-dialog-header>.dialog-header-right>button {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.dialog-header.flat-dialog-header>.dialog-header-right>button:hover {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.dialog-body.flat-dialog-header {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
.dialog-window.fullscreen .dialog-body.flat-dialog-header {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.dialog-body.hideXScroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dialog-body.hideYScroll {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.dialog-body-content {
|
||||
margin: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
border-top: 1px solid var(--light-border);
|
||||
display: flex;
|
||||
@ -451,27 +452,33 @@ export default {
|
||||
align-items: center;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.dialog-footer button:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dialog-footer .dialog-message {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.dialog-footer .dialog-message svg {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dialog-footer .dialog-footer-controls {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dialog-footer .dialog-footer-controls button:not(:last-child) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px), (max-height: 480px) {
|
||||
@media (max-width: 480px),
|
||||
(max-height: 480px) {
|
||||
.dialog-window {
|
||||
max-width: initial;
|
||||
max-height: initial;
|
||||
@ -480,14 +487,22 @@ export default {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.dialog-window.max-size {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.dialog-body.flat-dialog-header {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.dialog-window.playing {
|
||||
margin-bottom: 60px;
|
||||
height: calc(100% - 60px);
|
||||
|
||||
@ -1,17 +1,46 @@
|
||||
<template>
|
||||
<DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
|
||||
<DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true">
|
||||
<div id="albumViewer" class="flex-row">
|
||||
<div id="header" class="flex-column">
|
||||
<div id="header" class="flex-column grow">
|
||||
<div id="background" :style="coverBackground" />
|
||||
<div class="grow z1 center flex-column">
|
||||
<img class="glow ma24" :src="cover" @dblclick="dblclick" />
|
||||
</div>
|
||||
<awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" title="Favourite" />
|
||||
<awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedAlbum.progress" title="Keep playing" />
|
||||
<div id="stats" class="flex-row z1">
|
||||
<div id="title" class="flex-column pa grow z1">
|
||||
<img class="glow ma" :src="cover" />
|
||||
<span id="stats" class="center">
|
||||
{{ selectedAlbum.title }}
|
||||
<br />
|
||||
by
|
||||
<b @click="gotoArtist" class="pointer">{{ selectedAlbum.artist_name }}</b>
|
||||
<br />
|
||||
<span v-if="album_year">
|
||||
from year <b>{{ album_year }}</b> </span><br />
|
||||
<b>{{ album_tracks.length }}</b> Tracks with a duration of
|
||||
<b>{{ album_duration }}</b>
|
||||
</span>
|
||||
<div class="grow"> </div>
|
||||
<div class="flex-row grow ma-top">
|
||||
<button class="flat ma-right" title="Favourite" @click="toggleFavourite">
|
||||
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
|
||||
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
|
||||
</button>
|
||||
<button class="flat ma-right" title="Keep playing" v-if="selectedAlbum._id == selectedTrackContainer._id && isPlaying">
|
||||
<awesome-icon icon="compact-disc" size="2x" class="primary-text" />
|
||||
</button>
|
||||
<button class="flat ma-right" title="Keep playing" @click="playProgress" v-else-if="selectedAlbum.progress">
|
||||
<awesome-icon icon="play" size="2x" class="primary-text" />
|
||||
</button>
|
||||
<button class="flat ma-right" title="Play" @click="playAlbum" v-else>
|
||||
<awesome-icon icon="play" size="2x" class="white-text" />
|
||||
</button>
|
||||
<button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id">
|
||||
<awesome-icon icon="angle-left" class="ma4 white-text" />
|
||||
</button>
|
||||
<button @click="gotoNextAlbum" class="flat" :title="nextAlbum.name" :disabled="!nextAlbum._id">
|
||||
<awesome-icon icon="angle-right" class="ma4 white-text" />
|
||||
</button>
|
||||
<div class="grow"></div>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center" :title="visibility_text">
|
||||
<awesome-icon :icon="visibility_icon" />
|
||||
<awesome-icon :icon="visibility_icon" class="white-text" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
@ -33,24 +62,9 @@
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
<div class="grow flex-column">
|
||||
<p class="ma4 center">
|
||||
<span class="grow center">
|
||||
by
|
||||
<b @click="gotoArtist" class="pointer">{{
|
||||
selectedAlbum.artist_name
|
||||
}}</b>
|
||||
<br />
|
||||
<span v-if="album_year">
|
||||
from year <b>{{ album_year }}</b> </span><br />
|
||||
<b>{{ album_tracks.length }}</b> Tracks with a duration of
|
||||
<b>{{ album_duration }}</b>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center">
|
||||
<awesome-icon icon="ellipsis-v" />
|
||||
<awesome-icon icon="ellipsis-v" class="white-text" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
@ -69,6 +83,7 @@
|
||||
</DropDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="trackList" class="tracks">
|
||||
<li v-for="track in selectedAlbum.tracks" :key="track._id">
|
||||
<TrackItem :track="track" :showCover="false" />
|
||||
@ -100,7 +115,7 @@ export default {
|
||||
window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id;
|
||||
navigator.clipboard.writeText(url);
|
||||
},
|
||||
dblclick() {
|
||||
playAlbum() {
|
||||
this.$store.commit("tracks/resetSelectedTrack");
|
||||
this.$store.commit("radios/resetSelectedRadio");
|
||||
this.$store.dispatch("tracks/playContainer", this.selectedAlbum);
|
||||
@ -231,7 +246,9 @@ export default {
|
||||
nextAlbum: ["albums/nextAlbum"],
|
||||
selectedAlbum: ["albums/selectedAlbum"],
|
||||
selectedTrack: ["tracks/selectedTrack"],
|
||||
selectedTrackContainer: ["tracks/selectedTrackContainer"],
|
||||
favourites: ["user/favourites"],
|
||||
isPlaying: ["player/isPlaying"],
|
||||
}),
|
||||
album_title() {
|
||||
return this.selectedAlbum.title;
|
||||
@ -332,11 +349,13 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
#albumViewer {
|
||||
height: 366px;
|
||||
height: 400px;
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 304px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
@ -348,13 +367,8 @@ export default {
|
||||
|
||||
#stats {
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
color: var(--white);
|
||||
text-shadow: 0 1px 2px black;
|
||||
line-height: 1.4;
|
||||
background-color: #ffffff40;
|
||||
border-top: 1px solid #ffffff20;
|
||||
border-bottom: 1px solid #00000020;
|
||||
}
|
||||
|
||||
.dropdown-activator button {
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<template>
|
||||
<DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
|
||||
<DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :flatDialogHeader="true" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
|
||||
<div id="artistViewer">
|
||||
<div id="header" class="flex-column">
|
||||
<div id="background" :style="coverBackground" />
|
||||
<awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
|
||||
<awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
|
||||
<h1 @dblclick="dblclick">
|
||||
<div id="title" class="flex-column ma-left ma-right pa-bottom">
|
||||
<h1>
|
||||
{{ selectedArtist.name }}
|
||||
</h1>
|
||||
<span id="stats" class="ma-bottom">
|
||||
@ -13,23 +12,30 @@
|
||||
<b>{{ artist_albums.length }}</b> Albums with a duration of
|
||||
<b>{{ artist_duration }}</b>
|
||||
</span>
|
||||
<div id="albumList" class="flex-row showOnMobilePortrait">
|
||||
<AlbumItem class="ma" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
|
||||
</div>
|
||||
<div id="navigation" class="flex-row center ma-top">
|
||||
<div class="flex-row grow"></div>
|
||||
<div class="flex-row">
|
||||
<button @click="gotoPrevArtist" class="primary ma4" :title="prevArtist.name" :disabled="!prevArtist._id">
|
||||
<awesome-icon icon="angle-left" class="ma4" />
|
||||
<div class="flex-row ma-top ma-bottom">
|
||||
<button class="flat ma-right" @click="toggleFavourite" title="Favourite">
|
||||
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
|
||||
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
|
||||
</button>
|
||||
<button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id">
|
||||
<awesome-icon icon="angle-right" class="ma4" />
|
||||
<button class="flat ma-right" title="Keep playing" v-if="selectedArtist._id == selectedTrackContainer._id && isPlaying">
|
||||
<awesome-icon icon="compact-disc" size="2x" class="primary-text" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-row grow right center">
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile">
|
||||
<button class="flat pa8-left pa8-right">
|
||||
<awesome-icon icon="ellipsis-v" />
|
||||
<button class="flat ma-right" @click="playProgress" title="Keep playing" v-else-if="selectedArtist.progress">
|
||||
<awesome-icon icon="play" size="2x" class="primary-text" />
|
||||
</button>
|
||||
<button class="flat ma-right" @click="playArtist" title="Play" v-else>
|
||||
<awesome-icon icon="play" size="2x" class="white-text" />
|
||||
</button>
|
||||
<button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
|
||||
<awesome-icon icon="angle-left" class="ma4 white-text" />
|
||||
</button>
|
||||
<button @click="gotoNextArtist" class="flat" :title="nextArtist.name" :disabled="!nextArtist._id">
|
||||
<awesome-icon icon="angle-right" class="ma4 white-text" />
|
||||
</button>
|
||||
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']" class="ma-left hideOnMobile">
|
||||
<button class="flat pa-left pa-right">
|
||||
<awesome-icon icon="ellipsis-v" class="white-text" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
@ -48,6 +54,9 @@
|
||||
</DropDown>
|
||||
</div>
|
||||
</div>
|
||||
<div id="albumList" class="flex-row showOnMobilePortrait">
|
||||
<AlbumItem class="ma" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-row overflow-y">
|
||||
<div id="albumList" class="flex-column hideOnMobilePortrait">
|
||||
@ -77,7 +86,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dblclick() {
|
||||
playArtist() {
|
||||
this.$store.commit("tracks/resetSelectedTrack");
|
||||
this.$store.commit("radios/resetSelectedRadio");
|
||||
this.$store.dispatch("tracks/playContainer", this.selectedArtist);
|
||||
@ -110,8 +119,9 @@ export default {
|
||||
},
|
||||
closed() {
|
||||
if (
|
||||
window.history.state.back && (
|
||||
window.history.state.back.indexOf("?") == -1 ||
|
||||
window.history.state.back.startsWith("/search")
|
||||
window.history.state.back.startsWith("/search"))
|
||||
) {
|
||||
this.$router.back();
|
||||
} else {
|
||||
@ -169,6 +179,7 @@ export default {
|
||||
nextArtist: ["artists/nextArtist"],
|
||||
selectedArtist: ["artists/selectedArtist"],
|
||||
selectedTrack: ["tracks/selectedTrack"],
|
||||
selectedTrackContainer: ["tracks/selectedTrackContainer"],
|
||||
favourites: ["user/favourites"],
|
||||
isPlaying: ["player/isPlaying"]
|
||||
}),
|
||||
@ -262,7 +273,6 @@ export default {
|
||||
h1,
|
||||
#stats {
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: var(--white);
|
||||
text-shadow: 0 1px 2px black;
|
||||
@ -280,6 +290,10 @@ h1,
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#header #title {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#albumList {
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@ -1,18 +1,38 @@
|
||||
<template>
|
||||
<DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true">
|
||||
<DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true">
|
||||
<div id="boxViewer" class="flex-row">
|
||||
<div id="header" class="flex-column">
|
||||
<div id="header" class="flex-column grow">
|
||||
<div id="background" :style="coverBackground" />
|
||||
<div class="grow z1 center flex-column">
|
||||
<img class="glow ma24" :src="cover" @dblclick="dblclick" />
|
||||
</div>
|
||||
<awesome-icon icon="star" size="2x" class="favourite ma4 z2" :class="{ active: isFavourite }" @click="toggleFavourite" />
|
||||
<awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedBox.progress" title="Keep playing" />
|
||||
<div id="title" class="grow z1 pa flex-column">
|
||||
<img class="glow ma" :src="cover" />
|
||||
<span id="stats" class="center">
|
||||
<b>{{ selectedBox.title }}</b>
|
||||
<br />
|
||||
<b>{{ box_videos.length }}</b> Videos
|
||||
</span>
|
||||
|
||||
<div id="stats" class="flex-row z1">
|
||||
<div class="grow"> </div>
|
||||
<div class="flex-row ma-top grow">
|
||||
<button class="flat ma-right" title="Favourite" @click="toggleFavourite">
|
||||
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
|
||||
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
|
||||
</button>
|
||||
<button class="flat ma-right" title="Keep playing" @click="playProgress" v-if="selectedBox.progress">
|
||||
<awesome-icon icon="play" size="2x" class="primary-text" />
|
||||
</button>
|
||||
<button class="flat ma-right" title="Play" @dblclick="dblclick" v-else>
|
||||
<awesome-icon icon="play" size="2x" class="white-text" />
|
||||
</button>
|
||||
<button @click="gotoPrevBox" class="flat ma-left ma-right" :title="prevBox.name" :disabled="!prevBox._id">
|
||||
<awesome-icon icon="angle-left" class="ma4 white-text" />
|
||||
</button>
|
||||
<button @click="gotoNextBox" class="flat" :title="nextBox.name" :disabled="!nextBox._id">
|
||||
<awesome-icon icon="angle-right" class="ma4 white-text" />
|
||||
</button>
|
||||
<div class="grow"></div>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center" :title="visibility_text">
|
||||
<awesome-icon :icon="visibility_icon" />
|
||||
<awesome-icon :icon="visibility_icon" class="white-text" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
@ -34,18 +54,9 @@
|
||||
</div>
|
||||
</template>
|
||||
</DropDown>
|
||||
<div class="grow flex-column">
|
||||
<p class="ma4 center">
|
||||
<span class="">
|
||||
<b>{{ selectedBox.title }}</b>
|
||||
<br />
|
||||
<b>{{ box_videos.length }}</b> Videos
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<DropDown v-if="$store.getters['user/isAdministrator']">
|
||||
<button class="flat center">
|
||||
<awesome-icon icon="ellipsis-v" />
|
||||
<awesome-icon icon="ellipsis-v" class="white-text" />
|
||||
</button>
|
||||
<template v-slot:dropdown-content>
|
||||
<div>
|
||||
@ -64,7 +75,7 @@
|
||||
</DropDown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ul id="videoList" class="videos">
|
||||
<li v-for="item in selectedBox.videos" :key="item._id">
|
||||
<VideoItem :video="item" />
|
||||
@ -265,7 +276,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
#boxViewer {
|
||||
height: 462px;
|
||||
height: 486px;
|
||||
}
|
||||
|
||||
#header {
|
||||
@ -280,13 +291,8 @@ export default {
|
||||
|
||||
#stats {
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
color: var(--white);
|
||||
text-shadow: 0 1px 2px black;
|
||||
line-height: 1.4;
|
||||
background-color: #ffffff40;
|
||||
border-top: 1px solid #ffffff20;
|
||||
border-bottom: 1px solid #00000020;
|
||||
}
|
||||
|
||||
.dropdown-activator button {
|
||||
@ -294,11 +300,6 @@ export default {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#stats p {
|
||||
max-width: 192px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#videoList {
|
||||
background-color: var(--white);
|
||||
z-index: 1;
|
||||
|
||||
@ -4,6 +4,7 @@ import App from './App.vue'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { far } from '@fortawesome/free-regular-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
|
||||
import DialogBase from "./components/base-components/Dialog";
|
||||
@ -15,6 +16,7 @@ import ArtistItem from "./components/Artist"
|
||||
import BoxItem from "./components/Box"
|
||||
|
||||
library.add(fas)
|
||||
library.add(far)
|
||||
|
||||
import store from "./store/index";
|
||||
import router from './router'
|
||||
|
||||
@ -3,18 +3,12 @@ import axios from 'axios'
|
||||
export default {
|
||||
checkIfInstanceIsNew(context) {
|
||||
return new Promise((resolve) => {
|
||||
axios
|
||||
.get(context.rootGetters.server + "/api/system/setup")
|
||||
.then((res) => {
|
||||
console.log(res.status);
|
||||
axios.get(context.rootGetters.server + "/api/system/setup").then((res) => {
|
||||
if (res.status == 200) {
|
||||
resolve(true);
|
||||
} else {
|
||||
resolve(false);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@ -32,12 +32,15 @@ export default {
|
||||
|
||||
},
|
||||
loadAlbums(context, force) {
|
||||
return new Promise((resolve) => {
|
||||
if ((!context.state.eos || force) && !context.state.loading) {
|
||||
context.state.loading = true;
|
||||
axios.get(context.rootGetters.server + "/api/albums/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
|
||||
context.commit("setAlbums", res.data);
|
||||
resolve(res.data);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
loadFavourites(context) {
|
||||
axios.get(context.rootGetters.server + "/api/albums/favourites", context.rootGetters.headers).then(res => {
|
||||
@ -165,7 +168,7 @@ export default {
|
||||
axios.post(context.rootGetters.server + "/api/albums/" + album._id + "/share", {}, context.rootGetters.headers).then(res => {
|
||||
album.share = res.data;
|
||||
resolve();
|
||||
context.dispatch("addPoUp", { title: "Share successful", message: "Url was copied into your clipboard", type: "success", icon:"share" }, { root: true });
|
||||
context.dispatch("addPoUp", { title: "Share successful", message: "Url was copied into your clipboard", type: "success", icon: "share" }, { root: true });
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@ -13,12 +13,15 @@ export default {
|
||||
})
|
||||
},
|
||||
loadArtists(context, force) {
|
||||
return new Promise((resolve) => {
|
||||
if ((!context.state.eos || force) && !context.state.loading) {
|
||||
context.state.loading = true;
|
||||
axios.get(context.rootGetters.server + "/api/artists/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
|
||||
context.commit("setArtists", res.data);
|
||||
resolve(res.data);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
loadArtist(context, id) {
|
||||
context.state.loading = true;
|
||||
|
||||
@ -13,12 +13,15 @@ export default {
|
||||
})
|
||||
},
|
||||
loadBoxes(context, force) {
|
||||
return new Promise((resolve) => {
|
||||
if ((!context.state.eos || force) && !context.state.loading) {
|
||||
context.state.loading = true;
|
||||
axios.get(context.rootGetters.server + "/api/boxes/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
|
||||
context.commit("setBoxes", res.data);
|
||||
resolve(res.data);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
loadFavourites(context) {
|
||||
axios.get(context.rootGetters.server + "/api/boxes/favourites", context.rootGetters.headers).then(res => {
|
||||
|
||||
@ -10,13 +10,11 @@ export default {
|
||||
load(context) {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(context.rootGetters.server + "/api/user/login", context.rootGetters.headers).then((res) => {
|
||||
console.log(res.data);
|
||||
context.commit("load", res.data);
|
||||
context.rootState["player"].shuffle = res.data.player.shuffle;
|
||||
context.rootState["player"].repeatType = res.data.player.repeat;
|
||||
resolve();
|
||||
}).catch(err => {
|
||||
console.log("error")
|
||||
context.commit("resetToken");
|
||||
reject(err);
|
||||
});
|
||||
|
||||
@ -7,20 +7,12 @@
|
||||
<g>
|
||||
<animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="0 -140" to="-20 -60" dur="30s" />
|
||||
<animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="-20 -60" to="0 -140" dur="30s" />
|
||||
|
||||
<image :xlink:href="item.covers.cover64" :x="Math.floor(i / 6) * 64" :y="i % 6 * 64" width="64" height="64" v-for="(item, i) in randomCovers" :key="item" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-column" style="z-index: 1;">
|
||||
<h1>WebPlay</h1>
|
||||
<p>
|
||||
<b>{{ serverInfo.stats.tracks.toLocaleString("de-DE") }}</b> Tracks
|
||||
and
|
||||
<b>{{ serverInfo.stats.videos.toLocaleString("de-DE") }}</b> Videos |
|
||||
Users:
|
||||
<b>{{ serverInfo.stats.users }}</b>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<MessageScreen title="First Run?" subtitle="You still don't have any Music or Video content on your instance" icon="sync" :commands="messageCommands" @commandClicked="messageCommand" :showCommands="$store.getters['user/isAdministrator']" v-if="serverInfo.stats.tracks == 0 && serverInfo.stats.videos == 0" />
|
||||
@ -89,13 +81,13 @@ export default {
|
||||
messageCommands: [
|
||||
{
|
||||
title: "Scan for Music files",
|
||||
subtitle: "Scann your server for music files…",
|
||||
subtitle: "Scan your server for music files…",
|
||||
icon: "music",
|
||||
command: "scanMusic",
|
||||
},
|
||||
{
|
||||
title: "Scan for Video files",
|
||||
subtitle: "Scann your server for video files…",
|
||||
subtitle: "Scan your server for video files…",
|
||||
icon: "video",
|
||||
command: "scanVideos",
|
||||
},
|
||||
@ -114,8 +106,11 @@ export default {
|
||||
this.$store.dispatch("videos/loadMostViewed");
|
||||
if (this.randomCovers.length == 0) {
|
||||
this.$store.dispatch("albums/loadRandomCovers", 60);
|
||||
this.$store.dispatch("albums/loadAlbums", true);
|
||||
this.$store.dispatch("artists/loadArtists", true);
|
||||
this.$store.dispatch("albums/loadAlbums", true).then(() => {
|
||||
this.$store.dispatch("artists/loadArtists", true).then(() => {
|
||||
this.$store.dispatch("boxes/loadBoxes", true);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
loadNextPage() {
|
||||
|
||||
@ -123,17 +123,13 @@ export default {
|
||||
checkTocken() {
|
||||
let token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
console.log("hello token")
|
||||
this.$store.dispatch("user/setToken", token);
|
||||
console.log("hello token; user/load")
|
||||
this.$store
|
||||
.dispatch("user/load")
|
||||
.then(() => {
|
||||
console.log("user loaded")
|
||||
this.goto();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("user not loaded")
|
||||
console.log(err);
|
||||
this.checkIfNewBackend();
|
||||
});
|
||||
@ -161,7 +157,6 @@ export default {
|
||||
});
|
||||
},
|
||||
checkIfNewBackend() {
|
||||
console.log("check new instance")
|
||||
this.$store.dispatch("checkIfInstanceIsNew").then((res) => {
|
||||
if (res) {
|
||||
this.$router.replace("setup");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user