WebPlay/client
1
1
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: WebPlay:367067eff8208e6ac28e3d857ce0de51fe32fa77
Branches Tags
WebPlay:main
WebPlay:dev
WebPlay:mongodb-6
..
compare: WebPlay:761001d6863187e0776c41e40cf3b86d40e0d2cd
Branches Tags
WebPlay:main
WebPlay:dev
WebPlay:mongodb-6

No commits in common. "367067eff8208e6ac28e3d857ce0de51fe32fa77" and "761001d6863187e0776c41e40cf3b86d40e0d2cd" have entirely different histories.
367067eff8 ... 761001d686

9 changed files with 137 additions and 203 deletions
Show Stats Expand all files Collapse all files

71
package-lock.json generated
View File

@ -9,8 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0", "@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3", "@fortawesome/vue-fontawesome": "^3.0.3",
"axios": "^1.3.3", "axios": "^1.3.3",
"body-parser": "^1.20.1", "body-parser": "^1.20.1",
@ -1891,48 +1890,18 @@
"node": ">=6" "node": ">=6"
} }
}, },
"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.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": { "node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.2", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
"integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==", "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.2" "@fortawesome/fontawesome-common-types": "6.3.0"
}, },
"engines": { "engines": {
"node": ">=6" "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": { "node_modules/@fortawesome/vue-fontawesome": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
@ -14992,34 +14961,12 @@
"@fortawesome/fontawesome-common-types": "6.3.0" "@fortawesome/fontawesome-common-types": "6.3.0"
} }
}, },
"@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.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": { "@fortawesome/free-solid-svg-icons": {
"version": "6.4.2", "version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
"integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==", "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
"requires": { "requires": {
"@fortawesome/fontawesome-common-types": "6.4.2" "@fortawesome/fontawesome-common-types": "6.3.0"
},
"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": { "@fortawesome/vue-fontawesome": {

3
package.json
View File

@ -14,8 +14,7 @@
"main": "electron.js", "main": "electron.js",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0", "@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3", "@fortawesome/vue-fontawesome": "^3.0.3",
"axios": "^1.3.3", "axios": "^1.3.3",
"body-parser": "^1.20.1", "body-parser": "^1.20.1",

162
src/components/base-components/Dialog.vue
View File

@ -1,32 +1,65 @@
<template> <template>
<div ref="dialogBackground" class="dialog-background" v-if="visible" @click="bgClicked"> <div
<div class="dialog-window" :class="{ ref="dialogBackground"
class="dialog-background"
v-if="visible"
@click="bgClicked"
>
<div
class="dialog-window"
:class="{
fullscreen: isFullscreen, fullscreen: isFullscreen,
'max-size': maxSize, 'max-size': maxSize,
playing: $store.getters['player/isPlaying'], playing: $store.getters['player/isPlaying'],
}"> }"
<div class="dialog-header" :class="{ hideOnMobile: showHeaderOnMobile == false, 'flat-dialog-header': flatDialogHeader == true }" v-if="showHeader" @dblclick="headerDoubleClick"> >
<div
class="dialog-header"
:class="{ hideOnMobile: showHeaderOnMobile == false }"
v-if="showHeader"
@dblclick="headerDoubleClick"
>
<div class="dialog-header-left"> <div class="dialog-header-left">
<slot name="header-left" /> <slot name="header-left" />
</div> </div>
<div class="dialog-header-center"> <div class="dialog-header-center">
<h3 v-if="dialogTitle && !flatDialogHeader">{{ dialogTitle }}</h3> <h3 v-if="dialogTitle">{{ dialogTitle }}</h3>
<slot name="header-center" /> <slot name="header-center" />
</div> </div>
<div class="dialog-header-right"> <div class="dialog-header-right">
<slot name="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-if="isFullscreen" icon="compress" />
<awesome-icon v-else icon="expand" /> <awesome-icon v-else icon="expand" />
</button> </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" /> <awesome-icon icon="times" />
</button> </button>
</div> </div>
</div> </div>
<div class="dialog-body" :class="{ hideXScroll: disableXscroll == true, hideYScroll: disableYscroll == true, 'flat-dialog-header': flatDialogHeader == true}"> <div
class="dialog-body"
:class="{
hideXScroll: disableXscroll == true,
hideYScroll: disableYscroll == true,
}"
>
<slot /> <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>
<div class="dialog-footer" v-if="showFooter"> <div class="dialog-footer" v-if="showFooter">
<div class="dialog-footer-left"> <div class="dialog-footer-left">
@ -41,15 +74,41 @@
</div> </div>
<div> <div>
<slot name="footer-right" /> <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) (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.text || button }}
</button> </button>
<button ref="dialogButton" @click="click('accept')" v-if="showFooterButtons && !dialogButtons" :disabled="!enableFooterButtons" :class="buttonClass"> <button
<awesome-icon v-if="buttonIcon" :icon="buttonIcon" class="ma-right8" /> ref="dialogButton"
@click="click('accept')"
v-if="showFooterButtons && !dialogButtons"
:disabled="!enableFooterButtons"
:class="buttonClass"
>
<awesome-icon
v-if="buttonIcon"
:icon="buttonIcon"
class="ma-right8"
/>
{{ buttonText }} {{ buttonText }}
</button> </button>
</div> </div>
@ -84,10 +143,6 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
flatDialogHeader: {
type: Boolean,
default: false
},
showFooter: { showFooter: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -246,7 +301,6 @@ export default {
z-index: 1000; z-index: 1000;
animation: fadeIn ease 0.20s; animation: fadeIn ease 0.20s;
} }
.dialog-window { .dialog-window {
box-shadow: 0px 8px 32px var(--shadow); box-shadow: 0px 8px 32px var(--shadow);
background-color: var(--white); background-color: var(--white);
@ -254,16 +308,13 @@ export default {
max-height: 80%; max-height: 80%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top-left-radius: 8px; border-top-left-radius: 4px;
border-top-right-radius: 8px; border-top-right-radius: 4px;
position: absolute;
} }
.dialog-window.max-size { .dialog-window.max-size {
width: 90%; width: 90%;
height: 90%; height: 90%;
} }
.dialog-window.fullscreen { .dialog-window.fullscreen {
max-width: initial; max-width: initial;
max-height: initial; max-height: initial;
@ -278,21 +329,10 @@ export default {
flex-shrink: 0; flex-shrink: 0;
background-color: var(--background); background-color: var(--background);
box-shadow: 0px 1px 4px var(--shadow); box-shadow: 0px 1px 4px var(--shadow);
border-top-left-radius: 8px; border-top-left-radius: 4px;
border-top-right-radius: 8px; border-top-right-radius: 4px;
z-index: 1; 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 { .dialog-header h3 {
flex-grow: 1; flex-grow: 1;
margin: 0; margin: 0;
@ -304,7 +344,6 @@ export default {
align-self: center; align-self: center;
cursor: default; cursor: default;
} }
.dialog-header input, .dialog-header input,
.dialog-header select { .dialog-header select {
padding: 0 4px; padding: 0 4px;
@ -313,7 +352,6 @@ export default {
background-color: var(--white); background-color: var(--white);
align-self: stretch; align-self: stretch;
} }
.dialog-header button, .dialog-header button,
.dialog-header a { .dialog-header a {
background-color: transparent; background-color: transparent;
@ -327,118 +365,85 @@ export default {
.dialog-header button:hover { .dialog-header button:hover {
background-color: var(--light-gray); background-color: var(--light-gray);
} }
.dialog-header button.red:hover { .dialog-header button.red:hover {
background-color: var(--red50); background-color: var(--red50);
color: var(--white); color: var(--white);
} }
.dialog-header button.red svg { .dialog-header button.red svg {
color: var(--red); color: var(--red);
} }
.dialog-header button.red:hover svg { .dialog-header button.red:hover svg {
color: var(--white); color: var(--white);
} }
.dialog-header button.blue { .dialog-header button.blue {
background-color: var(--blue); background-color: var(--blue);
} }
.dialog-header button.green:hover { .dialog-header button.green:hover {
background-color: var(--green); background-color: var(--green);
color: var(--green); color: var(--green);
} }
.dialog-header button.green svg { .dialog-header button.green svg {
color: var(--green); color: var(--green);
} }
.dialog-header button.yellow { .dialog-header button.yellow {
background-color: var(--yellow); background-color: var(--yellow);
} }
/* SUCCESS */ /* SUCCESS */
.dialog-header button.success svg { .dialog-header button.success svg {
color: var(--success); color: var(--success);
} }
.dialog-header button.success:hover { .dialog-header button.success:hover {
background-color: var(--success); background-color: var(--success);
} }
.dialog-header button.success:hover svg { .dialog-header button.success:hover svg {
color: var(--white); color: var(--white);
} }
.dialog-header button.primary, .dialog-header button.primary,
.dialog-header a.primary { .dialog-header a.primary {
background-color: var(--primary); background-color: var(--primary);
color: var(--white); color: var(--white);
} }
.dialog-header button > span, .dialog-header button > span,
.dialog-header a > span { .dialog-header a > span {
margin-left: 12px; margin-left: 12px;
} }
.dialog-header svg { .dialog-header svg {
width: 16px !important; width: 16px !important;
height: 16px; height: 16px;
} }
.dialog-header > div, .dialog-header > div,
.dialog-footer > div { .dialog-footer > div {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.dialog-header > .dialog-header-center, .dialog-header > .dialog-header-center,
.dialog-footer > .dialog-footer-center { .dialog-footer > .dialog-footer-center {
flex-grow: 1; flex-grow: 1;
justify-content: center; justify-content: center;
margin: 0 12px; margin: 0 12px;
} }
.dialog-header > .dialog-header-right input, .dialog-header > .dialog-header-right input,
.dialog-header > .dialog-header-right select { .dialog-header > .dialog-header-right select {
border-left: 1px solid var(--light-border); 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 { .dialog-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
} }
.dialog-body.flat-dialog-header {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.dialog-body.hideXScroll { .dialog-body.hideXScroll {
overflow-x: hidden; overflow-x: hidden;
} }
.dialog-body.hideYScroll { .dialog-body.hideYScroll {
overflow-y: hidden; overflow-y: hidden;
} }
.dialog-body-content { .dialog-body-content {
margin: 4px; margin: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.dialog-footer { .dialog-footer {
border-top: 1px solid var(--light-border); border-top: 1px solid var(--light-border);
display: flex; display: flex;
@ -446,33 +451,27 @@ export default {
align-items: center; align-items: center;
background-color: var(--background); background-color: var(--background);
} }
.dialog-footer button:disabled { .dialog-footer button:disabled {
opacity: 0.5; opacity: 0.5;
} }
.dialog-footer .dialog-message { .dialog-footer .dialog-message {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 4px; margin-left: 4px;
} }
.dialog-footer .dialog-message svg { .dialog-footer .dialog-message svg {
margin-right: 4px; margin-right: 4px;
} }
.dialog-footer .dialog-footer-controls { .dialog-footer .dialog-footer-controls {
padding: 4px; padding: 4px;
display: flex; display: flex;
} }
.dialog-footer .dialog-footer-controls button:not(:last-child) { .dialog-footer .dialog-footer-controls button:not(:last-child) {
margin-right: 4px; margin-right: 4px;
} }
@media (max-width: 480px), @media (max-width: 480px), (max-height: 480px) {
(max-height: 480px) {
.dialog-window { .dialog-window {
max-width: initial; max-width: initial;
max-height: initial; max-height: initial;
@ -481,17 +480,14 @@ export default {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.dialog-window.max-size { .dialog-window.max-size {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.dialog-header { .dialog-header {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.dialog-window.playing { .dialog-window.playing {
margin-bottom: 60px; margin-bottom: 60px;
height: calc(100% - 60px); height: calc(100% - 60px);

12
src/components/dialogs/ArtistViewer.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :flatDialogHeader="true" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true"> <DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showHeader="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
<div id="artistViewer"> <div id="artistViewer">
<div id="header" class="flex-column"> <div id="header" class="flex-column">
<div id="background" :style="coverBackground" /> <div id="background" :style="coverBackground" />
@ -13,15 +13,14 @@
<b>{{ artist_duration }}</b> <b>{{ artist_duration }}</b>
</span> </span>
<div class="flex-row ma-top ma-bottom"> <div class="flex-row ma-top ma-bottom">
<button class="flat ma-right" @click="toggleFavourite" title="Favourite"> <button class="flat ma-right">
<awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" /> <awesome-icon icon="star" size="2x" class="favourite" :class="{ active: isFavourite }" @click="toggleFavourite" />
<awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
</button> </button>
<button class="flat ma-right" v-if="selectedArtist.progress"> <button class="flat ma-right" v-if="selectedArtist.progress">
<awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" /> <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
</button> </button>
<button class="flat ma-right" v-else> <button class="flat ma-right" v-else>
<awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Play" /> <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Keep playing" />
</button> </button>
<button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id"> <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
<awesome-icon icon="angle-left" class="ma4 white-text" /> <awesome-icon icon="angle-left" class="ma4 white-text" />
@ -116,9 +115,8 @@ export default {
}, },
closed() { closed() {
if ( if (
window.history.state.back && (
window.history.state.back.indexOf("?") == -1 || window.history.state.back.indexOf("?") == -1 ||
window.history.state.back.startsWith("/search")) window.history.state.back.startsWith("/search")
) { ) {
this.$router.back(); this.$router.back();
} else { } else {

2
src/main.js
View File

@ -4,7 +4,6 @@ import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons' import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import DialogBase from "./components/base-components/Dialog"; import DialogBase from "./components/base-components/Dialog";
@ -16,7 +15,6 @@ import ArtistItem from "./components/Artist"
import BoxItem from "./components/Box" import BoxItem from "./components/Box"
library.add(fas) library.add(fas)
library.add(far)
import store from "./store/index"; import store from "./store/index";
import router from './router' import router from './router'

3
src/store/modules/albums/actions.js
View File

@ -32,15 +32,12 @@ export default {
}, },
loadAlbums(context, force) { loadAlbums(context, force) {
return new Promise((resolve) => {
if ((!context.state.eos || force) && !context.state.loading) { if ((!context.state.eos || force) && !context.state.loading) {
context.state.loading = true; context.state.loading = true;
axios.get(context.rootGetters.server + "/api/albums/page/" + context.state.page++, context.rootGetters.headers).then((res) => { axios.get(context.rootGetters.server + "/api/albums/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
context.commit("setAlbums", res.data); context.commit("setAlbums", res.data);
resolve(res.data);
}); });
} }
});
}, },
loadFavourites(context) { loadFavourites(context) {
axios.get(context.rootGetters.server + "/api/albums/favourites", context.rootGetters.headers).then(res => { axios.get(context.rootGetters.server + "/api/albums/favourites", context.rootGetters.headers).then(res => {

3
src/store/modules/artists/actions.js
View File

@ -13,15 +13,12 @@ export default {
}) })
}, },
loadArtists(context, force) { loadArtists(context, force) {
return new Promise((resolve) => {
if ((!context.state.eos || force) && !context.state.loading) { if ((!context.state.eos || force) && !context.state.loading) {
context.state.loading = true; context.state.loading = true;
axios.get(context.rootGetters.server + "/api/artists/page/" + context.state.page++, context.rootGetters.headers).then((res) => { axios.get(context.rootGetters.server + "/api/artists/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
context.commit("setArtists", res.data); context.commit("setArtists", res.data);
resolve(res.data);
}); });
} }
});
}, },
loadArtist(context, id) { loadArtist(context, id) {
context.state.loading = true; context.state.loading = true;

3
src/store/modules/boxes/actions.js
View File

@ -13,15 +13,12 @@ export default {
}) })
}, },
loadBoxes(context, force) { loadBoxes(context, force) {
return new Promise((resolve) => {
if ((!context.state.eos || force) && !context.state.loading) { if ((!context.state.eos || force) && !context.state.loading) {
context.state.loading = true; context.state.loading = true;
axios.get(context.rootGetters.server + "/api/boxes/page/" + context.state.page++, context.rootGetters.headers).then((res) => { axios.get(context.rootGetters.server + "/api/boxes/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
context.commit("setBoxes", res.data); context.commit("setBoxes", res.data);
resolve(res.data);
}); });
} }
});
}, },
loadFavourites(context) { loadFavourites(context) {
axios.get(context.rootGetters.server + "/api/boxes/favourites", context.rootGetters.headers).then(res => { axios.get(context.rootGetters.server + "/api/boxes/favourites", context.rootGetters.headers).then(res => {

15
src/views/Home.vue
View File

@ -7,12 +7,20 @@
<g> <g>
<animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="0 -140" to="-20 -60" dur="30s" /> <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" /> <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" /> <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> </g>
</svg> </svg>
</div> </div>
<div class="flex-column" style="z-index: 1;"> <div class="flex-column" style="z-index: 1;">
<h1>WebPlay</h1> <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>
</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" /> <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" />
@ -106,11 +114,8 @@ export default {
this.$store.dispatch("videos/loadMostViewed"); this.$store.dispatch("videos/loadMostViewed");
if (this.randomCovers.length == 0) { if (this.randomCovers.length == 0) {
this.$store.dispatch("albums/loadRandomCovers", 60); this.$store.dispatch("albums/loadRandomCovers", 60);
this.$store.dispatch("albums/loadAlbums", true).then(() => { this.$store.dispatch("albums/loadAlbums", true);
this.$store.dispatch("artists/loadArtists", true).then(() => { this.$store.dispatch("artists/loadArtists", true);
this.$store.dispatch("boxes/loadBoxes", true);
});
});
} }
}, },
loadNextPage() { loadNextPage() {