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

package-lock.json

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

package.json

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

src/components/TheSidebar.vue

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

src/components/pages/About.vue

@@ -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 {
+export default defineComponent({
-	data() {
+	setup(props, ctx) {
-		return {
+		const state = reactive({
-			paypal,
-			ethereum,
 			current: null,
 			latest: null,
 			updateAvailable: false,
 			deemixVersion: null
-		}
+		})
-	},
+		const { isOnline } = useOnline()
-	computed: {
-		...mapGetters(['getAppInfo'])
-	},
-	methods: {
-		initUpdate(data) {
-			const { currentCommit, latestCommit, updateAvailable, deemixVersion } = data
 
-			this.current = currentCommit
+		function initUpdate(appInfo) {
-			this.latest = latestCommit
+			const { currentCommit, latestCommit, updateAvailable, deemixVersion } = appInfo
-			this.updateAvailable = updateAvailable
+
-			this.deemixVersion = deemixVersion
+			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>

src/components/pages/Settings.vue

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

src/data/settings.js

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

src/lang/en.js

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

src/lang/it.js

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

src/plugins/composition-api.js

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

src/store/modules/appInfo.js

@@ -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}
  */

src/styles/css/typography.css

@@ -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;
+	}
+}

src/use/online.js

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