build:v1.3.3; workflow: added vue-composition-api; feat: moved app status to about page, this closes #6; chore: removed style scripts from package.json

This commit is contained in:
Roberto Tonino 2020-11-10 22:56:22 +01:00
parent 6c32367c80
commit 351cd2d626
13 changed files with 98 additions and 84 deletions

15
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "deemix-webui",
"version": "1.3.2",
"version": "1.3.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -423,6 +423,14 @@
}
}
},
"@vue/composition-api": {
"version": "1.0.0-beta.19",
"resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-beta.19.tgz",
"integrity": "sha512-FYl3DofSJAKdLO2Ig18ITelcOAWc1CWwfgMrqh7op38aqR5RfcJ7RA3kiDu38iZB0r86dMxcaOHoszIGKpU98g==",
"requires": {
"tslib": "^2.0.1"
}
},
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@ -7337,6 +7345,11 @@
"glob": "^7.1.2"
}
},
"tslib": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
"integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
},
"tunnel-agent": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

View File

@ -1,10 +1,8 @@
{
"name": "deemix-webui",
"version": "1.3.2",
"version": "1.3.3",
"scripts": {
"clean": "rimraf public/css/style.css public/css/style.css.map public/js/bundle.js public/js/bundle.js.map",
"watch:styles": "sass --watch --source-map --embed-sources src/styles/scss/style.scss public/css/style.css",
"build:styles": "sass --no-source-map --style=compressed src/styles/scss/style.scss public/css/style.css",
"build:js": "rollup -c",
"watch:js": "rollup -c -w",
"serve": "python ../server.py",
@ -14,6 +12,7 @@
"build": "npm-run-all --sequential clean build:js"
},
"dependencies": {
"@vue/composition-api": "^1.0.0-beta.19",
"flag-icon-css": "^3.5.0",
"lodash-es": "^4.17.15",
"svg-country-flags": "^1.2.9",

File diff suppressed because one or more lines are too long

View File

@ -48,18 +48,6 @@
></div>
</div>
</span>
<div id="network-status" :class="{ online: appOnline, offline: !appOnline }">
<i v-if="appOnline" class="material-icons">wifi</i>
<i v-else class="material-icons">
<!-- wifi_off icon not working, maybe need to include it? -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
<path
d="M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4c-1.29-1.29-2.84-2.13-4.49-2.56l3.53 3.53.96-.97zM2 3.05L5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24C7.81 10.89 6.27 11.73 5 13v.01L6.99 15c1.36-1.36 3.14-2.04 4.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3c-1.65-1.66-4.34-1.66-6 0z"
/>
</svg>
</i>
</div>
</aside>
</template>
@ -78,25 +66,6 @@
grid-gap: 8px;
}
#network-status {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: auto;
bottom: 0;
}
#network-status.online i.material-icons {
color: hsl(150, 76%, 34%);
}
#network-status.offline i.material-icons svg {
fill: red;
width: 1em;
height: 1em;
}
#update-notification {
position: absolute;
left: 30px;
@ -131,7 +100,6 @@ import { mapGetters } from 'vuex'
export default {
data() {
return {
appOnline: null,
activeTheme: 'light',
themes: ['purple', 'dark', 'light'],
activeTablink: 'home',
@ -202,17 +170,6 @@ export default {
})
},
mounted() {
/* === Online status handling === */
this.appOnline = navigator.onLine
window.addEventListener('online', () => {
this.appOnline = true
})
window.addEventListener('offline', () => {
this.appOnline = false
})
/* === Current theme handling === */
this.activeTheme = localStorage.getItem('selectedTheme') || 'dark'
@ -228,11 +185,6 @@ export default {
socket.on('updateAvailable', () => {
this.updateAvailable = true
})
// Check if download tab has slim entries
if ('true' === localStorage.getItem('slimSidebar')) {
this.$refs.sidebar.classList.add('slim')
}
},
methods: {
changeTheme(newTheme) {

View File

@ -2,6 +2,12 @@
<div id="about_tab">
<h1 class="mb-8 text-5xl capitalize">{{ $t('sidebar.about') }}</h1>
<div class="inline-flex px-4 py-2 mb-8 rounded-full" :class="{ 'bg-green-500': isOnline, 'bg-red-500': !isOnline }">
<span class="text-sm uppercase-first-letter">
{{ $t(`about.appStatus.${isOnline ? 'online' : 'offline'}`) }}
</span>
</div>
<ul>
<li>
{{ $t('about.updates.currentWebuiVersion') }}:
@ -28,7 +34,7 @@
<h2>{{ $t('about.titles.usefulLinks') }}</h2>
<ul class="no-dots">
<!-- <li>
<a href="https://deemix.app" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
<a href="" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
</li> -->
<!-- <li>
<a href="" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
@ -225,37 +231,44 @@ ul {
</style>
<script>
import { socket } from '@/utils/socket'
import { defineComponent, ref, reactive, toRefs, onMounted, computed } from '@vue/composition-api'
import { useOnline } from '@/use/online'
import paypal from '@/assets/paypal.svg'
import ethereum from '@/assets/ethereum.svg'
import { mapGetters } from 'vuex'
export default {
data() {
return {
paypal,
ethereum,
export default defineComponent({
setup(props, ctx) {
const state = reactive({
current: null,
latest: null,
updateAvailable: false,
deemixVersion: null
}
},
computed: {
...mapGetters(['getAppInfo'])
},
methods: {
initUpdate(data) {
const { currentCommit, latestCommit, updateAvailable, deemixVersion } = data
})
const { isOnline } = useOnline()
this.current = currentCommit
this.latest = latestCommit
this.updateAvailable = updateAvailable
this.deemixVersion = deemixVersion
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
}
},
mounted() {
this.initUpdate(this.getAppInfo)
}
}
})
</script>

View File

@ -832,12 +832,14 @@ export default {
this.defaultSettings = defaultSettingsData
this.initSettings(settingsData, spotifyCredentials)
// TODO Move in store
let storedAccountNum = localStorage.getItem('accountNum')
if (storedAccountNum) {
this.accountNum = storedAccountNum
}
// TODO Move in store
let spotifyUser = localStorage.getItem('spotifyUser')
if (spotifyUser) {

View File

@ -33,7 +33,7 @@ export function getInitialPreviewVolume() {
let volume = parseInt(localStorage.getItem('previewVolume'))
if (isNaN(volume)) {
volume = 80
volume = 80 // Default
localStorage.setItem('previewVolume', volume.toString())
}

View File

@ -44,6 +44,10 @@ const en = {
}
},
about: {
appStatus: {
online: 'app online',
offline: 'app offline'
},
updates: {
currentVersion: 'Current Version',
currentWebuiVersion: 'Current WebUI Version',

View File

@ -44,6 +44,10 @@ const it = {
}
},
about: {
appStatus: {
online: 'app online',
offline: 'app offline'
},
updates: {
currentVersion: 'Versione attuale',
currentWebuiVersion: 'Versione WebUI attuale',

View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

View File

@ -1,5 +1,3 @@
import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSidebar } from '@/data/settings'
/**
* @typedef {object} AppInfo
* @property {string} currentCommit
@ -11,6 +9,8 @@ import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSid
* @property {boolean} hasSlimSidebar
*/
import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSidebar } from '@/data/settings'
/**
* @returns {AppInfo}
*/

View File

@ -9,3 +9,13 @@
.secondary-text {
@apply mb-1 text-sm opacity-75;
}
@layer utilities {
.uppercase-first-letter::first-letter {
@apply uppercase;
}
.lowercase-first-letter::first-letter {
@apply lowercase;
}
}

13
src/use/online.js Normal file
View File

@ -0,0 +1,13 @@
import { ref } from '@vue/composition-api'
const isOnline = ref(navigator.onLine)
window.addEventListener('online', () => {
isOnline.value = true
})
window.addEventListener('offline', () => {
isOnline.value = false
})
export const useOnline = () => ({ isOnline })