Merge pull request 'add a diffrent icon, if media is playing' (#39 ) from dev into main

Reviewed-on: #39
add a diffrent icon, if media is playing
2024-09-24 00:06:52 +02:00 · 2024-09-24 00:00:30 +02:00 · 2024-02-22 23:37:10 +01:00 · 2024-02-22 23:32:00 +01:00 · 2024-02-22 22:08:39 +01:00 · 2024-02-22 22:07:05 +01:00
55 changed files with 2558 additions and 907 deletions
--- a/.drone.yml
+++ b/.drone.yml
@@ -24,4 +24,7 @@ steps:
        from_secret: password
    when:
      branch:
-        - main
+        - main
+      event:
+        exclude:
+          - pull_request
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,16 @@
      "name": "webplay-client",
      "version": "0.1.0",
      "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.2.1",
-        "@fortawesome/free-solid-svg-icons": "^6.2.1",
-        "@fortawesome/vue-fontawesome": "^3.0.2",
-        "axios": "^1.2.2",
-        "body-parser": "^1.19.1",
-        "core-js": "^3.27.1",
+        "@fortawesome/fontawesome-svg-core": "^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",
+        "core-js": "^3.28.0",
        "express": "^4.18.2",
        "mp3tag.js": "^3.3.2",
-        "vue": "*",
+        "vue": "^3.2.47",
        "vue-router": "^4.1.6",
        "vuex": "^4.1.0"
      },
@@ -25,10 +26,10 @@
        "@vue/cli-plugin-babel": "^5.0.8",
        "@vue/cli-plugin-eslint": "^5.0.8",
        "@vue/cli-service": "^5.0.8",
-        "electron": "^22.0.0",
+        "electron": "^23.1.0",
        "electron-builder": "^23.6.0",
-        "eslint": "^8.31.0",
-        "eslint-plugin-vue": "^9.8.0"
+        "eslint": "^8.34.0",
+        "eslint-plugin-vue": "^9.9.0"
      }
    },
    "node_modules/@achrinza/node-ipc": {
@@ -1870,42 +1871,72 @@
      }
    },
    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
-      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
+      "integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==",
      "hasInstallScript": true,
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
-      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
+      "integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
      "hasInstallScript": true,
      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@fortawesome/fontawesome-common-types": "6.3.0"
      },
      "engines": {
        "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": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
-      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "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.2.1"
+        "@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.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.2.tgz",
-      "integrity": "sha512-xHVtVY8ASUeEvgcA/7vULUesENhD+pi/EirRHdMBqooHlXBqK+yrV6d8tUye1m5UKQKVgYAHMhUBfOnoiwvc8Q==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
+      "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
      "peerDependencies": {
        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
        "vue": ">= 3.0.0 < 4"
@@ -3143,36 +3174,36 @@
      "dev": true
    },
    "node_modules/@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
      "dependencies": {
        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
+        "@vue/shared": "3.2.47",
        "estree-walker": "^2.0.2",
        "source-map": "^0.6.1"
      }
    },
    "node_modules/@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
      "dependencies": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
-      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
      "dependencies": {
        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/reactivity-transform": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.25.7",
        "postcss": "^8.1.10",
@@ -3180,12 +3211,12 @@
      }
    },
    "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
-      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
      "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "node_modules/@vue/component-compiler-utils": {
@@ -3258,60 +3289,60 @@
      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
    },
    "node_modules/@vue/reactivity": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
-      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
      "dependencies": {
-        "@vue/shared": "3.2.45"
+        "@vue/shared": "3.2.47"
      }
    },
    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
-      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
      "dependencies": {
        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.25.7"
      }
    },
    "node_modules/@vue/runtime-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
-      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
      "dependencies": {
-        "@vue/reactivity": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "node_modules/@vue/runtime-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
-      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
      "dependencies": {
-        "@vue/runtime-core": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
        "csstype": "^2.6.8"
      }
    },
    "node_modules/@vue/server-renderer": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
-      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
      "dependencies": {
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
      },
      "peerDependencies": {
-        "vue": "3.2.45"
+        "vue": "3.2.47"
      }
    },
    "node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
    },
    "node_modules/@vue/vue-loader-v15": {
      "name": "vue-loader",
@@ -3947,9 +3978,9 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz",
-      "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.3.tgz",
+      "integrity": "sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==",
      "dependencies": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
@@ -5087,9 +5118,9 @@
      }
    },
    "node_modules/core-js": {
-      "version": "3.27.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz",
-      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww==",
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
+      "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==",
      "hasInstallScript": true,
      "funding": {
        "type": "opencollective",
@@ -5945,9 +5976,9 @@
      }
    },
    "node_modules/electron": {
-      "version": "22.0.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-22.0.0.tgz",
-      "integrity": "sha512-cgRc4wjyM+81A0E8UGv1HNJjL1HBI5cWNh/DUIjzYvoUuiEM0SS0hAH/zaFQ18xOz2ced6Yih8SybpOiOYJhdg==",
+      "version": "23.1.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-23.1.0.tgz",
+      "integrity": "sha512-LRgACMpVrmjfYWPgCSyJ+TFQ/FPeniOowpO57z0xUcTchfC7EH+5rUncgYN+uMvqePiYDce+ywZeCIFaO8x/Nw==",
      "dev": true,
      "hasInstallScript": true,
      "dependencies": {
@@ -6386,9 +6417,9 @@
      }
    },
    "node_modules/eslint": {
-      "version": "8.31.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
-      "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
      "dev": true,
      "dependencies": {
        "@eslint/eslintrc": "^1.4.1",
@@ -6442,9 +6473,9 @@
      }
    },
    "node_modules/eslint-plugin-vue": {
-      "version": "9.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.8.0.tgz",
-      "integrity": "sha512-E/AXwcTzunyzM83C2QqDHxepMzvI2y6x+mmeYHbVDQlKFqmKYvRrhaVixEeeG27uI44p9oKDFiyCRw4XxgtfHA==",
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.9.0.tgz",
+      "integrity": "sha512-YbubS7eK0J7DCf0U2LxvVP7LMfs6rC6UltihIgval3azO3gyDwEGVgsCMe1TmDiEkl6GdMKfRpaME6QxIYtzDQ==",
      "dev": true,
      "dependencies": {
        "eslint-utils": "^3.0.0",
@@ -7914,9 +7945,9 @@
      }
    },
    "node_modules/http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
      "dev": true
    },
    "node_modules/http-deceiver": {
@@ -12575,15 +12606,15 @@
      }
    },
    "node_modules/vue": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
-      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
      "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-sfc": "3.2.45",
-        "@vue/runtime-dom": "3.2.45",
-        "@vue/server-renderer": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "node_modules/vue-eslint-parser": {
@@ -14949,30 +14980,52 @@
      }
    },
    "@fortawesome/fontawesome-common-types": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
-      "integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ=="
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
+      "integrity": "sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg=="
    },
    "@fortawesome/fontawesome-svg-core": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
-      "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz",
+      "integrity": "sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==",
      "requires": {
-        "@fortawesome/fontawesome-common-types": "6.2.1"
+        "@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": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
-      "integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
+      "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.2.1"
+        "@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": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.2.tgz",
-      "integrity": "sha512-xHVtVY8ASUeEvgcA/7vULUesENhD+pi/EirRHdMBqooHlXBqK+yrV6d8tUye1m5UKQKVgYAHMhUBfOnoiwvc8Q==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
+      "integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
      "requires": {}
    },
    "@hapi/hoek": {
@@ -15990,36 +16043,36 @@
      }
    },
    "@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
      "requires": {
        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
+        "@vue/shared": "3.2.47",
        "estree-walker": "^2.0.2",
        "source-map": "^0.6.1"
      }
    },
    "@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
      "requires": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "@vue/compiler-sfc": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
-      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
      "requires": {
        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/reactivity-transform": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.25.7",
        "postcss": "^8.1.10",
@@ -16027,12 +16080,12 @@
      }
    },
    "@vue/compiler-ssr": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
-      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
      "requires": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "@vue/component-compiler-utils": {
@@ -16098,57 +16151,57 @@
      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
    },
    "@vue/reactivity": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
-      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
      "requires": {
-        "@vue/shared": "3.2.45"
+        "@vue/shared": "3.2.47"
      }
    },
    "@vue/reactivity-transform": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
-      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
      "requires": {
        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
        "estree-walker": "^2.0.2",
        "magic-string": "^0.25.7"
      }
    },
    "@vue/runtime-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
-      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
      "requires": {
-        "@vue/reactivity": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "@vue/runtime-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
-      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
      "requires": {
-        "@vue/runtime-core": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
        "csstype": "^2.6.8"
      }
    },
    "@vue/server-renderer": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
-      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
      "requires": {
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
    },
    "@vue/vue-loader-v15": {
      "version": "npm:vue-loader@15.10.1",
@@ -16647,9 +16700,9 @@
      }
    },
    "axios": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.2.tgz",
-      "integrity": "sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.3.tgz",
+      "integrity": "sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==",
      "requires": {
        "follow-redirects": "^1.15.0",
        "form-data": "^4.0.0",
@@ -17513,9 +17566,9 @@
      }
    },
    "core-js": {
-      "version": "3.27.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.1.tgz",
-      "integrity": "sha512-GutwJLBChfGCpwwhbYoqfv03LAfmiz7e7D/BNxzeMxwQf10GRSzqiOjx7AmtEk+heiD/JWmBuyBPgFtx0Sg1ww=="
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
+      "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw=="
    },
    "core-js-compat": {
      "version": "3.27.1",
@@ -18127,9 +18180,9 @@
      }
    },
    "electron": {
-      "version": "22.0.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-22.0.0.tgz",
-      "integrity": "sha512-cgRc4wjyM+81A0E8UGv1HNJjL1HBI5cWNh/DUIjzYvoUuiEM0SS0hAH/zaFQ18xOz2ced6Yih8SybpOiOYJhdg==",
+      "version": "23.1.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-23.1.0.tgz",
+      "integrity": "sha512-LRgACMpVrmjfYWPgCSyJ+TFQ/FPeniOowpO57z0xUcTchfC7EH+5rUncgYN+uMvqePiYDce+ywZeCIFaO8x/Nw==",
      "dev": true,
      "requires": {
        "@electron/get": "^2.0.0",
@@ -18471,9 +18524,9 @@
      "dev": true
    },
    "eslint": {
-      "version": "8.31.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.31.0.tgz",
-      "integrity": "sha512-0tQQEVdmPZ1UtUKXjX7EMm9BlgJ08G90IhWh0PKDCb3ZLsgAOHI8fYSIzYVZej92zsgq+ft0FGsxhJ3xo2tbuA==",
+      "version": "8.34.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
+      "integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
      "dev": true,
      "requires": {
        "@eslint/eslintrc": "^1.4.1",
@@ -18612,9 +18665,9 @@
      }
    },
    "eslint-plugin-vue": {
-      "version": "9.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.8.0.tgz",
-      "integrity": "sha512-E/AXwcTzunyzM83C2QqDHxepMzvI2y6x+mmeYHbVDQlKFqmKYvRrhaVixEeeG27uI44p9oKDFiyCRw4XxgtfHA==",
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.9.0.tgz",
+      "integrity": "sha512-YbubS7eK0J7DCf0U2LxvVP7LMfs6rC6UltihIgval3azO3gyDwEGVgsCMe1TmDiEkl6GdMKfRpaME6QxIYtzDQ==",
      "dev": true,
      "requires": {
        "eslint-utils": "^3.0.0",
@@ -19629,9 +19682,9 @@
      }
    },
    "http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
      "dev": true
    },
    "http-deceiver": {
@@ -23074,15 +23127,15 @@
      }
    },
    "vue": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
-      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
      "requires": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-sfc": "3.2.45",
-        "@vue/runtime-dom": "3.2.45",
-        "@vue/server-renderer": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
      }
    },
    "vue-eslint-parser": {
--- a/package.json
+++ b/package.json
@@ -13,15 +13,16 @@
  },
  "main": "electron.js",
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/vue-fontawesome": "^3.0.2",
-    "axios": "^1.2.2",
-    "body-parser": "^1.19.1",
-    "core-js": "^3.27.1",
+    "@fortawesome/fontawesome-svg-core": "^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",
+    "core-js": "^3.28.0",
    "express": "^4.18.2",
    "mp3tag.js": "^3.3.2",
-    "vue": "*",
+    "vue": "^3.2.47",
    "vue-router": "^4.1.6",
    "vuex": "^4.1.0"
  },
@@ -30,10 +31,10 @@
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
-    "electron": "^22.0.0",
+    "electron": "^23.1.0",
    "electron-builder": "^23.6.0",
-    "eslint": "^8.31.0",
-    "eslint-plugin-vue": "^9.8.0"
+    "eslint": "^8.34.0",
+    "eslint-plugin-vue": "^9.9.0"
  },
  "eslintConfig": {
    "root": true,
--- a/public/config.json
+++ b/public/config.json
@@ -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": ""
 }
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,16 @@
  <link rel="icon" type="image/svg+xml" href="static/icon_32.svg" sizes="32x32" />
  <link rel="icon" type="image/svg+xml" href="static/icon_48.svg" sizes="48x48" />
  <link rel="icon" type="image/svg+xml" href="static/icon_64.svg" sizes="any" />
+
+  <link rel="apple-touch-icon-precomposed" href="static/icon_16.png" sizes="16x16" />
+  <link rel="apple-touch-icon-precomposed" href="static/icon_24.png" sizes="24x24" />
+  <link rel="apple-touch-icon-precomposed" href="static/icon_32_flat-dark.png" sizes="32x32" />
+  <link rel="apple-touch-icon-precomposed" href="static/icon_48_flat-dark.png" sizes="48x48" />
+  <link rel="apple-touch-icon-precomposed" href="static/icon_64_flat-dark.png" sizes="64x64" />
+  <link rel="apple-touch-icon-precomposed" href="static/icon_96_flat-dark.png" sizes="96x96" />
+  <link rel="apple-touch-icon-precomposed" href="static/icon_128_flat-dark.png" sizes="128x128" />
+  <link rel="apple-touch-icon-precomposed" href="static/icon_192_flat-dark.png" sizes="192x192" />
+
  <title>WebPlay.rocks</title>
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="static/style.css" />
--- a/public/static/app.css
+++ b/public/static/app.css
@@ -7,6 +7,16 @@ body {
  overflow-y: overlay;
 }

+#popup-collection {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 16px;
+  left: -160px;
+  margin-left: 50%;
+  z-index: 1200;
+}
+
 h1 {
  font-weight: 200;
  font-size: 3rem;
@@ -56,7 +66,8 @@ td.fillCell>* {
 #boxes,
 #radios,
 #search,
-#welcome {
+#welcome,
+#share {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
@@ -65,6 +76,7 @@ td.fillCell>* {
 }

 .componentTitle {
+  border-top: 1px solid #ffffffc0;
  position: absolute;
  bottom: 0;
  background-color: #ffffffb0;
@@ -73,23 +85,20 @@ td.fillCell>* {
  text-align: center;
 }

-.favourite {
-  z-index: 1;
-  position: absolute;
-  cursor: pointer;
-}
-
 .favourite.active {
  color: var(--yellow);
 }

+
 /*
  DIALOGS
 */

 #artistViewer #background,
 #albumViewer #background,
-#boxViewer #background {
+#boxViewer #background,
+#albumContent #background,
+#boxContent #background {
  background-size: cover;
  background-position: center;
  top: -16px;
@@ -591,6 +600,10 @@ td.fillCell>* {
  animation: glow 1s infinite alternate;
 }

+.z-1 {
+  z-index: -1;
+}
+
 .z1 {
  z-index: 1;
 }
@@ -612,9 +625,8 @@ td.fillCell>* {
  }

  #artists .artistCover {
-    min-width: 100%;
+    width: 160px;
    height: initial;
-    min-height: 128px;
  }

  #artists .artistName {
--- a/public/static/icon_128_flat-dark.png
+++ b/public/static/icon_128_flat-dark.png
--- a/public/static/icon_32_flat-dark.png
+++ b/public/static/icon_32_flat-dark.png
--- a/public/static/icon_32_flat-dark.svg
+++ b/public/static/icon_32_flat-dark.svg
@@ -0,0 +1,346 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="32"
+   height="32"
+   version="1.1"
+   id="svg94"
+   sodipodi:docname="icon_32_flat-dark.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   inkscape:export-filename="icon_32_flat-dark.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata98">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1729"
+     inkscape:window-height="959"
+     id="namedview96"
+     showgrid="false"
+     inkscape:zoom="10.429825"
+     inkscape:cx="-9.0126153"
+     inkscape:cy="-9.5878886"
+     inkscape:window-x="124"
+     inkscape:window-y="40"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg94"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <defs
+     id="defs38">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient949">
+      <stop
+         style="stop-color:#545c64;stop-opacity:1"
+         offset="0"
+         id="stop945" />
+      <stop
+         style="stop-color:#31363b;stop-opacity:1"
+         offset="1"
+         id="stop947" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4161"
+       x1="24"
+       x2="24"
+       y1="5"
+       y2="43"
+       gradientTransform="matrix(0.67567568,0,0,0.67567568,-0.21621703,-0.21620627)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3924-0" />
+    <linearGradient
+       id="linearGradient3924-0">
+      <stop
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1"
+         id="stop3" />
+      <stop
+         offset=".063"
+         style="stop-color:#ffffff;stop-opacity:0.23529412"
+         id="stop5" />
+      <stop
+         offset=".951"
+         style="stop-color:#ffffff;stop-opacity:0.15686275"
+         id="stop7" />
+      <stop
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0.39215687"
+         id="stop9" />
+    </linearGradient>
+    <radialGradient
+       id="radialGradient2976"
+       cx="4.993"
+       cy="43.5"
+       r="2.5"
+       fx="4.993"
+       fy="43.5"
+       gradientTransform="matrix(2.003784,0,0,1.4,27.98813,-17.4)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3688-166-749-6" />
+    <linearGradient
+       id="linearGradient3688-166-749-6">
+      <stop
+         offset="0"
+         style="stop-color:#181818;stop-opacity:1"
+         id="stop13" />
+      <stop
+         offset="1"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop15" />
+    </linearGradient>
+    <radialGradient
+       id="radialGradient2978"
+       cx="4.993"
+       cy="43.5"
+       r="2.5"
+       fx="4.993"
+       fy="43.5"
+       gradientTransform="matrix(2.003784,0,0,1.4,-20.01187,-104.4)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3688-464-309-7" />
+    <linearGradient
+       id="linearGradient3688-464-309-7">
+      <stop
+         offset="0"
+         style="stop-color:#181818;stop-opacity:1"
+         id="stop19" />
+      <stop
+         offset="1"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop21" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2980"
+       x1="25.058"
+       x2="25.058"
+       y1="47.028"
+       y2="39.999"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3702-501-757-3" />
+    <linearGradient
+       id="linearGradient3702-501-757-3">
+      <stop
+         offset="0"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop25" />
+      <stop
+         offset=".5"
+         style="stop-color:#181818;stop-opacity:1"
+         id="stop27" />
+      <stop
+         offset="1"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop29" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4256">
+      <stop
+         offset="0"
+         style="stop-color:#1777ba;stop-opacity:1"
+         id="stop32" />
+      <stop
+         offset="1"
+         style="stop-color:#5cb7f6;stop-opacity:1"
+         id="stop34" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4248"
+       x1="16"
+       x2="16"
+       y1="29"
+       y2="3"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient4256" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient949"
+       id="radialGradient951"
+       cx="8"
+       cy="16"
+       fx="8"
+       fy="16"
+       r="14"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,1.9935897,-2.1298809,0,50.078095,-13.484182)" />
+  </defs>
+  <rect
+     style="fill:url(#radialGradient951);fill-opacity:1;stroke:none;stroke-width:2.17991281;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect925"
+     width="32"
+     height="32"
+     x="0"
+     y="0"
+     ry="0" />
+  <path
+     d="M 16 5 C 11.560863 5 8.7693012 7.2360203 7.4296875 9.4726562 C 6.1060542 11.682611 6.0039063 13.894531 6.0039062 13.894531 C 6.0020435 13.927059 6.0002716 13.959606 6 13.992188 A 1.0001 1.0001 0 0 0 6 14 L 6 16.208984 C 5.4481455 16.432277 5.0000623 16.876571 5 17.5 L 5 19.5 C 5.0000816 20.3165 5.6834996 20.999918 6.5 21 L 6.5742188 21 L 7.1582031 22.167969 C 7.4105832 22.675344 7.933321 22.999486 8.5 23 L 9.8789062 23 L 10.439453 23.560547 C 10.720431 23.841561 11.102612 23.999924 11.5 24 L 12.5 24 C 13.3165 23.999918 13.999918 23.3165 14 22.5 L 14 15.5 C 13.999918 14.6835 13.3165 14.000082 12.5 14 L 11.5 14 C 10.933321 14.000513 10.410584 14.324656 10.158203 14.832031 L 10 15.146484 L 10 14.099609 C 9.9992628 14.112029 10.08956 12.812634 10.859375 11.527344 C 11.65569 10.197806 12.783237 9 16 9 C 19.216764 9 20.34431 10.197806 21.140625 11.527344 C 21.910439 12.812635 22.001422 14.123011 22 14.099609 L 22 15.146484 L 21.841797 14.832031 C 21.589416 14.324656 21.066679 14.000513 20.5 14 L 19.5 14 C 18.6835 14.000082 18.000082 14.6835 18 15.5 L 18 22.5 C 18.000082 23.3165 18.6835 23.999918 19.5 24 L 20.5 24 C 20.897388 23.999924 21.279569 23.841561 21.560547 23.560547 L 22.121094 23 L 23.5 23 C 24.066679 22.999487 24.589416 22.675344 24.841797 22.167969 L 25.425781 21 L 25.5 21 C 26.3165 20.999918 26.999918 20.3165 27 19.5 L 27 17.5 C 26.999938 16.876571 26.551855 16.432277 26 16.208984 L 26 14 A 1.0001 1.0001 0 0 0 26 13.990234 C 25.999707 13.958304 25.997894 13.926411 25.996094 13.894531 C 25.996094 13.894531 25.893947 11.682611 24.570312 9.4726562 C 23.230808 7.2359838 20.439137 5 16 5 z"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.15;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="path52" />
+  <path
+     d="M 16,6 C 11.886169,6 9.4723841,8.0073783 8.2871094,9.9863281 7.1018346,11.965278 7.0019531,13.945315 7.0019531,13.945312 A 1.0001,1.0001 0 0 0 7,14 l 0,3 -0.5,0 A 0.50005,0.50005 0 0 0 6,17.5 l 0,2 A 0.50005,0.50005 0 0 0 6.5,20 l 0.6914062,0 0.8613282,1.722656 A 0.50005,0.50005 0 0 0 8.5,22 l 1.792969,0 0.853515,0.853516 A 0.50005,0.50005 0 0 0 11.5,23 l 1,0 A 0.50005,0.50005 0 0 0 13,22.5 l 0,-7 A 0.50005,0.50005 0 0 0 12.5,15 l -1,0 a 0.50005,0.50005 0 0 0 -0.447266,0.277344 L 10.191406,17 9,17 9,14.042969 C 9.00117,14.024379 9.096555,12.525336 10.001953,11.013672 10.912973,9.4926217 12.499009,8 16,8 c 3.500992,0 5.087027,1.4926217 5.998047,3.013672 0.905398,1.511664 1.000787,3.01071 1.001953,3.029297 L 23,17 21.808594,17 20.947266,15.277344 A 0.50005,0.50005 0 0 0 20.5,15 l -1,0 A 0.50005,0.50005 0 0 0 19,15.5 l 0,7 a 0.50005,0.50005 0 0 0 0.5,0.5 l 1,0 a 0.50005,0.50005 0 0 0 0.353516,-0.146484 L 21.707031,22 23.5,22 a 0.50005,0.50005 0 0 0 0.447266,-0.277344 L 24.808594,20 25.5,20 A 0.50005,0.50005 0 0 0 26,19.5 l 0,-2 A 0.50005,0.50005 0 0 0 25.5,17 l -0.5,0 0,-3 a 1.0001,1.0001 0 0 0 -0.002,-0.05469 c 0,0 -0.09988,-1.980034 -1.285156,-3.9589839 C 22.52771,8.0073823 20.113831,6 16,6 Z"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.3;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="path54" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="2"
+     height="1"
+     x="5"
+     y="26"
+     rx="0"
+     ry="0"
+     id="rect60" />
+  <rect
+     width="2"
+     height="1"
+     x="8"
+     y="26"
+     rx="0"
+     ry="0"
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect62" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="3"
+     height="1"
+     x="11"
+     y="26"
+     rx="0"
+     ry="0"
+     id="rect64" />
+  <rect
+     width="2"
+     height="1"
+     x="15"
+     y="26"
+     rx="0"
+     ry="0"
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect66" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="3"
+     height="1"
+     x="18"
+     y="26"
+     rx="0"
+     ry="0"
+     id="rect68" />
+  <rect
+     width="2"
+     height="1"
+     x="22"
+     y="26"
+     rx="0"
+     ry="0"
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect70" />
+  <rect
+     width="2"
+     height="1"
+     x="5"
+     y="24"
+     rx="0"
+     ry="0"
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect72" />
+  <rect
+     width="3"
+     height="1"
+     x="11"
+     y="24"
+     rx="0"
+     ry="0"
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect74" />
+  <rect
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="2"
+     height="1"
+     x="15"
+     y="24"
+     rx="0"
+     ry="0"
+     id="rect76" />
+  <rect
+     width="3"
+     height="1"
+     x="18"
+     y="24"
+     rx="0"
+     ry="0"
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect78" />
+  <rect
+     width="2"
+     height="1"
+     x="15"
+     y="22"
+     rx="0"
+     ry="0"
+     style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect80" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="2"
+     height="1"
+     x="25"
+     y="26"
+     rx="0"
+     ry="0"
+     id="rect82" />
+  <rect
+     width="2"
+     height="1"
+     x="25"
+     y="24"
+     rx="0"
+     ry="0"
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect84" />
+  <rect
+     style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="2"
+     height="1"
+     x="25"
+     y="22"
+     rx="0"
+     ry="0"
+     id="rect86" />
+  <path
+     d="m 6.5,16.500017 0,2 1,0 1,2 2,0 1,1 1,0 0,-7 -1,0 -1,2 z"
+     style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path88" />
+  <path
+     d="m 8,16.000017 0,-3 c 0,0 0.3851775,-6.9999996 8,-6.9999996 7.614823,0 8,6.9999996 8,6.9999996 l 0,3"
+     style="display:inline;opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path90" />
+  <path
+     style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 25.5,16.500017 0,2 -1,0 -1,2 -2,0 -1,1 -1,0 0,-7 1,0 1,2 z"
+     id="path92" />
+</svg>
--- a/public/static/icon_48_flat-dark.png
+++ b/public/static/icon_48_flat-dark.png
--- a/public/static/icon_48_flat-dark.svg
+++ b/public/static/icon_48_flat-dark.svg
@@ -0,0 +1,347 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48"
+   height="48"
+   version="1.1"
+   id="svg2"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="icon_48_flat-dark.svg"
+   inkscape:export-filename="icon_48_flat-dark.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata96">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1459"
+     inkscape:window-height="959"
+     id="namedview94"
+     showgrid="false"
+     inkscape:zoom="4.9166667"
+     inkscape:cx="5.4915254"
+     inkscape:cy="-19.728813"
+     inkscape:window-x="171"
+     inkscape:window-y="40"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <defs
+     id="defs4">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient877">
+      <stop
+         style="stop-color:#545c64;stop-opacity:1"
+         offset="0"
+         id="stop873" />
+      <stop
+         style="stop-color:#31363b;stop-opacity:1"
+         offset="1"
+         id="stop875" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3058"
+       x1="24"
+       x2="24"
+       y1="5"
+       y2="43"
+       gradientTransform="translate(4e-6,1.000006)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3924-1" />
+    <linearGradient
+       id="linearGradient3924-1">
+      <stop
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1"
+         id="stop8" />
+      <stop
+         offset=".063"
+         style="stop-color:#ffffff;stop-opacity:0.23529412"
+         id="stop10" />
+      <stop
+         offset=".951"
+         style="stop-color:#ffffff;stop-opacity:0.15686275"
+         id="stop12" />
+      <stop
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0.39215687"
+         id="stop14" />
+    </linearGradient>
+    <radialGradient
+       id="radialGradient3013"
+       cx="4.993"
+       cy="43.5"
+       r="2.5"
+       fx="4.993"
+       fy="43.5"
+       gradientTransform="matrix(2.4045409,0,0,0.89999994,27.985756,4.600003)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3688-166-749" />
+    <linearGradient
+       id="linearGradient3688-166-749">
+      <stop
+         offset="0"
+         style="stop-color:#181818;stop-opacity:1"
+         id="stop18" />
+      <stop
+         offset="1"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop20" />
+    </linearGradient>
+    <radialGradient
+       id="radialGradient3015"
+       cx="4.993"
+       cy="43.5"
+       r="2.5"
+       fx="4.993"
+       fy="43.5"
+       gradientTransform="matrix(2.4045409,0,0,0.89999994,-20.014244,-82.899992)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3688-464-309" />
+    <linearGradient
+       id="linearGradient3688-464-309">
+      <stop
+         offset="0"
+         style="stop-color:#181818;stop-opacity:1"
+         id="stop24" />
+      <stop
+         offset="1"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop26" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3702-501-757">
+      <stop
+         offset="0"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop29" />
+      <stop
+         offset=".5"
+         style="stop-color:#181818;stop-opacity:1"
+         id="stop31" />
+      <stop
+         offset="1"
+         style="stop-color:#181818;stop-opacity:0"
+         id="stop33" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient6647"
+       x1="25.058"
+       x2="25.058"
+       y1="47.028"
+       y2="39.999"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3702-501-757"
+       gradientTransform="matrix(1.1428571,0,0,0.6428571,-3.4285711,15.785724)" />
+    <linearGradient
+       id="linearGradient4256">
+      <stop
+         offset="0"
+         style="stop-color:#1777ba;stop-opacity:1"
+         id="stop37" />
+      <stop
+         offset="1"
+         style="stop-color:#5cb7f6;stop-opacity:1"
+         id="stop39" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4254"
+       x1="24"
+       x2="24"
+       y1="44"
+       y2="5.972"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient4256" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient877"
+       id="radialGradient879"
+       cx="24"
+       cy="3.0744331"
+       fx="24"
+       fy="3.0744331"
+       r="21"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,1.9467312,-2.2881356,0,31.03472,-43.647117)" />
+  </defs>
+  <rect
+     style="fill:url(#radialGradient879);fill-opacity:1;stroke:none;stroke-width:1.99050581;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect853"
+     width="48"
+     height="48"
+     x="0"
+     y="0"
+     ry="0" />
+  <path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.15;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="M 24,9 C 17.872945,9 14.350715,12.036316 12.691406,15.021484 11.032098,18.006653 11,20.974609 11,20.974609 A 1.50015,1.50015 0 0 0 11,21 l 0,4 -1.5,0 A 0.50005,0.50005 0 0 0 9,25.5 l 0,5 A 0.50005,0.50005 0 0 0 9.5,31 l 1.691406,0 0.861328,1.722656 A 0.50005,0.50005 0 0 0 12.5,33 l 2.691406,0 0.861328,1.722656 A 0.50005,0.50005 0 0 0 16.5,35 l 2,0 A 0.50005,0.50005 0 0 0 19,34.5 l 0,-11 A 0.50005,0.50005 0 0 0 18.5,23 l -2,0 a 0.50005,0.50005 0 0 0 -0.447266,0.277344 L 15.191406,25 14,25 14,21.025391 c 0,0 0.05359,-2.282044 1.3125,-4.546875 C 16.571408,14.213684 18.799922,12 24,12 c 5.200091,0 7.428595,2.213686 8.6875,4.478516 C 33.946405,18.743345 34,21.025391 34,21.025391 L 34,25 32.808594,25 31.947266,23.277344 A 0.50005,0.50005 0 0 0 31.5,23 l -2,0 A 0.50005,0.50005 0 0 0 29,23.5 l 0,11 a 0.50005,0.50005 0 0 0 0.5,0.5 l 2,0 a 0.50005,0.50005 0 0 0 0.447266,-0.277344 L 32.808594,33 35.5,33 a 0.50005,0.50005 0 0 0 0.447266,-0.277344 L 36.808594,31 38.5,31 A 0.50005,0.50005 0 0 0 39,30.5 l 0,-5 A 0.50005,0.50005 0 0 0 38.5,25 l -1.5,0 0,-4 a 1.50015,1.50015 0 0 0 0,-0.02539 c 0,0 -0.0321,-2.967955 -1.691406,-5.953125 C 33.649288,12.036312 30.127066,9 24,9 Z"
+     id="path52" />
+  <path
+     d="M 24,9 C 17.872945,9 14.350715,12.036316 12.691406,15.021484 11.032098,18.006653 11,20.974609 11,20.974609 A 1.50015,1.50015 0 0 0 11,21 l 0,4 -1.5,0 A 0.50005,0.50005 0 0 0 9,25.5 l 0,5 A 0.50005,0.50005 0 0 0 9.5,31 l 1.691406,0 0.861328,1.722656 A 0.50005,0.50005 0 0 0 12.5,33 l 2.691406,0 0.861328,1.722656 A 0.50005,0.50005 0 0 0 16.5,35 l 2,0 A 0.50005,0.50005 0 0 0 19,34.5 l 0,-11 A 0.50005,0.50005 0 0 0 18.5,23 l -2,0 a 0.50005,0.50005 0 0 0 -0.447266,0.277344 L 15.191406,25 14,25 14,21.025391 c 0,0 0.05359,-2.282044 1.3125,-4.546875 C 16.571408,14.213684 18.799922,12 24,12 c 5.200091,0 7.428595,2.213686 8.6875,4.478516 C 33.946405,18.743345 34,21.025391 34,21.025391 L 34,25 32.808594,25 31.947266,23.277344 A 0.50005,0.50005 0 0 0 31.5,23 l -2,0 A 0.50005,0.50005 0 0 0 29,23.5 l 0,11 a 0.50005,0.50005 0 0 0 0.5,0.5 l 2,0 a 0.50005,0.50005 0 0 0 0.447266,-0.277344 L 32.808594,33 35.5,33 a 0.50005,0.50005 0 0 0 0.447266,-0.277344 L 36.808594,31 38.5,31 A 0.50005,0.50005 0 0 0 39,30.5 l 0,-5 A 0.50005,0.50005 0 0 0 38.5,25 l -1.5,0 0,-4 a 1.50015,1.50015 0 0 0 0,-0.02539 c 0,0 -0.0321,-2.967955 -1.691406,-5.953125 C 33.649288,12.036312 30.127066,9 24,9 Z"
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.3;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="path54" />
+  <path
+     d="m 9.5000062,24.499999 0,5 1.9999998,0 1,2 3,0 1,2 2,0 0,-11 -2,0 -1,2 z"
+     style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path60" />
+  <path
+     d="m 12.500006,24.478599 0,-4.4786 c 0,0 0.172867,-10.4999998 11.5,-10.4999998 11.327157,0 11.5,10.4999998 11.5,10.4999998 l 0,4.4786"
+     style="display:inline;opacity:1;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path62" />
+  <path
+     style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 38.500006,24.499999 0,5 -2,0 -1,2 -3,0 -1,2 -2,0 0,-11 2,0 1,2 z"
+     id="path64" />
+  <rect
+     width="4"
+     height="2"
+     x="7"
+     y="39"
+     rx="0"
+     ry="0"
+     style="display:inline;opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect66" />
+  <rect
+     style="display:inline;opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="12"
+     y="39"
+     rx="0"
+     ry="0"
+     id="rect68" />
+  <rect
+     width="4"
+     height="2"
+     x="17"
+     y="39"
+     rx="0"
+     ry="0"
+     style="display:inline;opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect70" />
+  <rect
+     style="display:inline;opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="22"
+     y="39"
+     rx="0"
+     ry="0"
+     id="rect72" />
+  <rect
+     width="4"
+     height="2"
+     x="27"
+     y="39"
+     rx="0"
+     ry="0"
+     style="display:inline;opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect74" />
+  <rect
+     style="display:inline;opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="32"
+     y="39"
+     rx="0"
+     ry="0"
+     id="rect76" />
+  <rect
+     width="4"
+     height="2"
+     x="37"
+     y="39"
+     rx="0"
+     ry="0"
+     style="display:inline;opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect78" />
+  <rect
+     style="display:inline;opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="7"
+     y="36"
+     rx="0"
+     ry="0"
+     id="rect80" />
+  <rect
+     style="display:inline;opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="17"
+     y="36"
+     rx="0"
+     ry="0"
+     id="rect82" />
+  <rect
+     width="4"
+     height="2"
+     x="22"
+     y="36"
+     rx="0"
+     ry="0"
+     style="display:inline;opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect84" />
+  <rect
+     style="display:inline;opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="27"
+     y="36"
+     rx="0"
+     ry="0"
+     id="rect86" />
+  <rect
+     style="display:inline;opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="37"
+     y="36"
+     rx="0"
+     ry="0"
+     id="rect88" />
+  <rect
+     style="display:inline;opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="4"
+     height="2"
+     x="22"
+     y="33"
+     rx="0"
+     ry="0"
+     id="rect90" />
+  <rect
+     width="4"
+     height="2"
+     x="37"
+     y="33"
+     rx="0"
+     ry="0"
+     style="display:inline;opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect92" />
+</svg>
--- a/public/static/icon_64_flat-dark.png
+++ b/public/static/icon_64_flat-dark.png
--- a/public/static/icon_64_flat-dark.svg
+++ b/public/static/icon_64_flat-dark.svg
@@ -0,0 +1,347 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   version="1.1"
+   id="svg2"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="icon_64_flat-dark.svg"
+   inkscape:export-filename="icon_96_flat-dark.png"
+   inkscape:export-xdpi="144"
+   inkscape:export-ydpi="144"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <metadata
+     id="metadata96">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1611"
+     inkscape:window-height="952"
+     id="namedview94"
+     showgrid="false"
+     inkscape:zoom="8"
+     inkscape:cx="32"
+     inkscape:cy="31.5625"
+     inkscape:window-x="172"
+     inkscape:window-y="47"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <defs
+     id="defs4">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient877">
+      <stop
+         style="stop-color:#535c65;stop-opacity:1"
+         offset="0"
+         id="stop873" />
+      <stop
+         style="stop-color:#31363b;stop-opacity:1"
+         offset="1"
+         id="stop875" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4256">
+      <stop
+         style="stop-color:#1777ba;stop-opacity:1"
+         offset="0"
+         id="stop7" />
+      <stop
+         style="stop-color:#1777ba;stop-opacity:1"
+         offset="1"
+         id="stop9" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3381-5-4"
+       x1="24"
+       x2="24"
+       y1="5"
+       y2="43"
+       gradientTransform="matrix(1.4324324,0,0,1.4362832,-2.378381,-2.4707782)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3924-2-2-5-8" />
+    <linearGradient
+       id="linearGradient3924-2-2-5-8">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0"
+         id="stop13" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.23529412"
+         offset=".063"
+         id="stop15" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.15686275"
+         offset=".951"
+         id="stop17" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.39215687"
+         offset="1"
+         id="stop19" />
+    </linearGradient>
+    <radialGradient
+       id="radialGradient3337-2-2"
+       cx="4.993"
+       cy="43.5"
+       r="2.5"
+       fx="4.993"
+       fy="43.5"
+       gradientTransform="matrix(3.2060543,0,0,0.99999998,37.981006,16.000001)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3688-166-749-4-0-3-8" />
+    <linearGradient
+       id="linearGradient3688-166-749-4-0-3-8">
+      <stop
+         style="stop-color:#181818;stop-opacity:1"
+         offset="0"
+         id="stop23" />
+      <stop
+         style="stop-color:#181818;stop-opacity:0"
+         offset="1"
+         id="stop25" />
+    </linearGradient>
+    <radialGradient
+       id="radialGradient3339-1-4"
+       cx="4.993"
+       cy="43.5"
+       r="2.5"
+       fx="4.993"
+       fy="43.5"
+       gradientTransform="matrix(3.2060543,0,0,0.99999998,-26.018992,-103)"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3688-464-309-9-2-4-2" />
+    <linearGradient
+       id="linearGradient3688-464-309-9-2-4-2">
+      <stop
+         style="stop-color:#181818;stop-opacity:1"
+         offset="0"
+         id="stop29" />
+      <stop
+         style="stop-color:#181818;stop-opacity:0"
+         offset="1"
+         id="stop31" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3702-501-757-8-4-1-1">
+      <stop
+         style="stop-color:#181818;stop-opacity:0"
+         offset="0"
+         id="stop34" />
+      <stop
+         style="stop-color:#181818;stop-opacity:1"
+         offset=".5"
+         id="stop36" />
+      <stop
+         style="stop-color:#181818;stop-opacity:0"
+         offset="1"
+         id="stop38" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient6394"
+       x1="25.058"
+       x2="25.058"
+       y1="47.028"
+       y2="39.999"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient3702-501-757-8-4-1-1"
+       gradientTransform="matrix(1.5714286,0,0,0.7142857,-5.7142853,28.428572)" />
+    <linearGradient
+       id="linearGradient4262"
+       x1="31"
+       x2="31"
+       y1="59"
+       y2="4.737"
+       gradientUnits="userSpaceOnUse"
+       xlink:href="#linearGradient4256" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient877"
+       id="radialGradient879"
+       cx="31.625"
+       cy="4"
+       fx="31.625"
+       fy="4"
+       r="28"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,1.9571706,-2.0851744,0,39.965698,-57.895519)" />
+  </defs>
+  <rect
+     style="fill:url(#radialGradient879);fill-opacity:1;stroke:none;stroke-width:2.85814881;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect853"
+     width="64"
+     height="64"
+     x="0"
+     y="0"
+     ry="0" />
+  <path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.15;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="M 32 8 C 22.542678 8 17.01237 12.828471 14.480469 17.591797 C 11.967919 22.318718 11.999934 26.988801 12 26.998047 L 12 27 L 12 27.003906 L 12 31 L 11.5 31 C 10.6835 31.000082 10.000082 31.6835 10 32.5 L 10 39.5 C 10.000082 40.3165 10.6835 40.999918 11.5 41 L 13.417969 41 L 14.076172 42.974609 C 14.27934 43.583587 14.858026 44.000335 15.5 44 L 17.417969 44 L 18.076172 45.974609 C 18.27934 46.583587 18.858026 47.000335 19.5 47 L 24.5 47 C 25.3165 46.999918 25.999918 46.3165 26 45.5 L 26 28.5 C 25.999918 27.6835 25.3165 27.000082 24.5 27 L 19.5 27 A 1.0001 1.0001 0 0 0 19.498047 27 C 18.815558 27.0011 18.210263 27.47456 18.044922 28.136719 L 18 28.316406 L 18 27.007812 L 18 27 C 17.9989 27.150353 18.04342 23.670266 19.777344 20.408203 C 21.536818 17.098064 24.422823 14 32 14 C 39.577196 14 42.463186 17.098064 44.222656 20.408203 C 45.959897 23.676524 46.001144 27.155119 46 27.007812 L 46 28.316406 L 45.955078 28.136719 C 45.789735 27.47456 45.184442 27.001063 44.501953 27 A 1.0001 1.0001 0 0 0 44.5 27 L 39.5 27 C 38.6835 27.000082 38.000082 27.6835 38 28.5 L 38 45.5 C 38.000082 46.3165 38.6835 46.999918 39.5 47 L 44.5 47 C 45.141974 47.000335 45.72066 46.583587 45.923828 45.974609 L 46.582031 44 L 48.5 44 C 49.141974 44.000335 49.72066 43.583587 49.923828 42.974609 L 50.582031 41 L 52.5 41 C 53.3165 40.999918 53.999918 40.3165 54 39.5 L 54 32.5 C 53.999918 31.6835 53.3165 31.000082 52.5 31 L 52 31 L 52 27.003906 L 52 27 C 52.000045 26.9938 52.03291 22.320279 49.519531 17.591797 C 46.987635 12.82862 41.457345 8 32 8 z"
+     id="path52" />
+  <path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.3;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 32,8.9999999 c -9.123144,0 -14.251477,4.5731351 -16.636719,9.0605471 C 12.97804,22.547959 13,26.998047 13,26.998047 A 2.0002,2.0002 0 0 0 13,27 l 0,5 -1.5,0 A 0.50005,0.50005 0 0 0 11,32.5 l 0,7 a 0.50005,0.50005 0 0 0 0.5,0.5 l 2.638672,0 0.886719,2.658203 A 0.50005,0.50005 0 0 0 15.5,43 l 2.638672,0 0.886719,2.658203 A 0.50005,0.50005 0 0 0 19.5,46 l 5,0 A 0.50005,0.50005 0 0 0 25,45.5 l 0,-17 A 0.50005,0.50005 0 0 0 24.5,28 l -5,0 a 0.50005,0.50005 0 0 0 -0.484375,0.378906 L 18.109375,32 17,32 17,27.001953 17,27 c 2.4e-5,-0.0031 0.02826,-3.549488 1.894531,-7.060547 C 20.761615,16.426865 24.132444,13 32,13 39.867575,13 43.23839,16.426866 45.105469,19.939453 46.971734,23.45051 46.999976,26.99691 47,27 l 0,5 -1.109375,0 -0.90625,-3.621094 A 0.50005,0.50005 0 0 0 44.5,28 l -5,0 A 0.50005,0.50005 0 0 0 39,28.5 l 0,17 a 0.50005,0.50005 0 0 0 0.5,0.5 l 5,0 a 0.50005,0.50005 0 0 0 0.474609,-0.341797 L 45.861328,43 48.5,43 a 0.50005,0.50005 0 0 0 0.474609,-0.341797 L 49.861328,40 52.5,40 A 0.50005,0.50005 0 0 0 53,39.5 l 0,-7 A 0.50005,0.50005 0 0 0 52.5,32 l -1.5,0 0,-5 a 2.0002,2.0002 0 0 0 0,-0.002 c 0,0 0.02196,-4.450087 -2.363281,-8.9375 C 46.251481,13.573227 41.123161,8.9999999 32,8.9999999 Z"
+     id="path54" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="22"
+     y="52"
+     rx="0"
+     ry="0"
+     id="rect60" />
+  <rect
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="22"
+     y="47"
+     rx="0"
+     ry="0"
+     id="rect62" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="15"
+     y="52"
+     rx="0"
+     ry="0"
+     id="rect64" />
+  <rect
+     width="6"
+     height="4"
+     x="8"
+     y="52"
+     rx="0"
+     ry="0"
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect66" />
+  <rect
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="8"
+     y="47"
+     rx="0"
+     ry="0"
+     id="rect68" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="29"
+     y="52"
+     rx="0"
+     ry="0"
+     id="rect70" />
+  <rect
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="29"
+     y="47"
+     rx="0"
+     ry="0"
+     id="rect72" />
+  <rect
+     width="6"
+     height="4"
+     x="29"
+     y="42"
+     rx="0"
+     ry="0"
+     style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect74" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="36"
+     y="52"
+     rx="0"
+     ry="0"
+     id="rect76" />
+  <rect
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="43"
+     y="52"
+     rx="0"
+     ry="0"
+     id="rect78" />
+  <rect
+     width="6"
+     height="4"
+     x="50"
+     y="52"
+     rx="0"
+     ry="0"
+     style="opacity:0.9;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect80" />
+  <rect
+     width="6"
+     height="4"
+     x="50"
+     y="47"
+     rx="0"
+     ry="0"
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect82" />
+  <rect
+     style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     width="6"
+     height="4"
+     x="50"
+     y="42"
+     rx="0"
+     ry="0"
+     id="rect84" />
+  <rect
+     width="6"
+     height="4"
+     x="36"
+     y="47"
+     rx="0"
+     ry="0"
+     style="opacity:0.65;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="rect86" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+     d="m 11.499998,31.49999 0,7 3,0 1,3 3,0 1,3 5,0 0,-17 -5,0 -1,4 z"
+     id="path88" />
+  <path
+     d="m 52.499998,31.49999 0,7 -3,0 -1,3 -3,0 -1,3 -5,0 0,-17 5,0 1,4 z"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
+     id="path90" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 14.999998,30.99999 0,-5 c 0,0 0.0093,-16.0000004 17,-16.0000004 16.990736,0 17,16.0000004 17,16.0000004 l 0,5"
+     id="path92" />
+</svg>
--- a/public/static/icon_96_flat-dark.png
+++ b/public/static/icon_96_flat-dark.png
--- a/public/static/icons/dummy/radio.svg
+++ b/public/static/icons/dummy/radio.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   data-name="Layer 1"
+   viewBox="0 0 48 48"
+   x="0px"
+   y="0px"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="radio.svg"
+   width="48"
+   height="48"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs6" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="13.033333"
+     inkscape:cx="27.199488"
+     inkscape:cy="24.55243"
+     inkscape:window-width="1920"
+     inkscape:window-height="959"
+     inkscape:window-x="0"
+     inkscape:window-y="40"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <title
+     id="title1">Artboard 47</title>
+  <path
+     d="m 35.61,14.29 -1.21,-1.59 -3.19,2.42 1.21,1.59 a 13,13 0 0 1 0,15.7 l -1.23,1.59 3.19,2.43 1.21,-1.6 a 17,17 0 0 0 0,-20.54 z"
+     id="path1"
+     style="fill:#7f8c8d;fill-opacity:1" />
+  <path
+     d="m 38.13,6.62 -2.9,2.75 1.37,1.45 a 20,20 0 0 1 1.54,25.61 L 37,38 l 3.22,2.38 1.19,-1.61 A 24,24 0 0 0 39.51,8.08 Z"
+     id="path2"
+     style="fill:#7f8c8d;fill-opacity:1" />
+  <path
+     d="m 13,24.55 a 12.88,12.88 0 0 1 2.63,-7.84 l 1.21,-1.59 -3.24,-2.42 -1.21,1.59 a 17,17 0 0 0 0,20.54 L 13.6,36.43 16.81,34 15.6,32.41 A 12.81,12.81 0 0 1 13,24.55 Z"
+     id="path3"
+     style="fill:#7f8c8d;fill-opacity:1" />
+  <path
+     d="M 6,24.55 A 20,20 0 0 1 11.4,10.82 L 12.77,9.37 9.87,6.62 8.49,8.08 A 24,24 0 0 0 6.64,38.81 L 7.83,40.42 11.05,38 9.86,36.43 A 19.84,19.84 0 0 1 6,24.55 Z"
+     id="path4"
+     style="fill:#7f8c8d;fill-opacity:1" />
+  <path
+     d="m 24.05,18.55 a 6,6 0 0 0 -2,11.65 v 10.35 h 4 V 30.2 a 6,6 0 0 0 -2,-11.65 z m 0,8 a 2,2 0 1 1 2,-2 2,2 0 0 1 -2,2 z"
+     id="path5"
+     style="fill:#7f8c8d;fill-opacity:1" />
+  <metadata
+     id="metadata6">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:title>Artboard 47</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -136,6 +136,10 @@ h6.slim {
  font-weight: normal;
 }

+.relative {
+  position: relative;
+}
+
 input {
  border-width: 1px;
  border-style: solid;
@@ -511,6 +515,14 @@ label.yellow50 {
  border-color: var(--yellow);
 }

+button.faded {
+  opacity: 0.25;
+}
+
+button.faded:hover {
+  opacity: 1;
+}
+
 button.medium {
  padding: 8px;
 }
@@ -808,6 +820,10 @@ li {
  list-style: none;
 }

+li:hover {
+  background-color: var(--nav);
+}
+
 li.selected,
 li.active {
  background-color: var(--selected);
@@ -1725,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;
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,11 @@
 <template>
  <div id="app">
    <nav
-      v-show="$route.path != '/login' && $route.path != '/setup' && $route.path != '/share' "
+      v-show="
+        $route.path != '/login' &&
+        $route.path != '/setup' &&
+        $route.path != '/share'
+      "
      :class="{ slideOverTop: $store.getters.isDialogOpen }"
    >
      <div>
@@ -43,7 +47,7 @@
          v-model.lazy="$store.state.search.term"
          placeholder="Search…"
          autocomplete="one-time-code"
-          class="hideOnMobile"
+          class="hideOnMobilePortrait"
        />
        <DropDown v-if="user.token">
          <template v-slot:default>
@@ -72,6 +76,14 @@
            >
              <awesome-icon icon="server" />Server settings
            </button>
+
+            <button
+              @click="openDialog('sharedItems')"
+              v-if="$store.getters['user/isAdministrator']"
+            >
+              <awesome-icon icon="share" />Shared items
+            </button>
+
            <button
              v-if="$store.getters.isElectron"
              @click="openDialog('dialogSettings')"
@@ -114,6 +126,13 @@
        </keep-alive>
      </router-view>
    </div>
+    <div id="popup-collection">
+      <PopUp
+        v-for="popup in $store.state.popups"
+        :key="popup.time"
+        :item="popup"
+      />
+    </div>
    <Player ref="player" />
    <Users ref="dialogUsers" />
    <UserProfile ref="dialogUserProfile" />
@@ -122,6 +141,7 @@
    <VideoScreen />
    <AudioUploadDialog ref="audioUploader" />
    <VideoUploadDialog ref="videoUploader" />
+    <SharedItems ref="sharedItems" />
  </div>
 </template>

@@ -135,6 +155,8 @@ import Player from "./components/Player";
 import ServerSettings from "./components/dialogs/ServerSettings";
 import AudioUploadDialog from "./components/dialogs/AudioUpload";
 import VideoUploadDialog from "./components/dialogs/VideoUpload";
+import SharedItems from "./components/dialogs/SharedItems";
+import PopUp from "./components/base-components/PopUp";

 import { mapGetters } from "vuex";

@@ -184,27 +206,14 @@ export default {
          album: track.parent.title,
          artwork: [
            {
-              src: track.parent.covers.cover32,
-              sizes: "32x32",
-              type: "image/png",
-            },
-            {
-              src: track.parent.covers.cover64,
-              sizes: "64x64",
-              type: "image/png",
-            },
-            {
-              src: track.parent.covers.cover128,
-              sizes: "96x96",
-              type: "image/png",
-            },
-            {
-              src: track.parent.covers.cover128,
+              src:
+                track.parent.covers.cover128 || "/static/icons/dummy/album.svg",
              sizes: "128x128",
              type: "image/png",
            },
            {
-              src: track.parent.covers.cover128,
+              src:
+                track.parent.covers.cover128 || "/static/icons/dummy/album.svg",
              sizes: "256x256",
              type: "image/png",
            },
@@ -245,7 +254,11 @@ export default {
    },
    login() {
      let hash = window.location.hash.replace("#/", "");
-      if (!hash.startsWith("login") && !hash.startsWith("setup") && !hash.startsWith("share")) {
+      if (
+        !hash.startsWith("login") &&
+        !hash.startsWith("setup") &&
+        !hash.startsWith("share")
+      ) {
        let redirect = encodeURIComponent(hash);
        if (redirect) {
          this.$router.replace({
@@ -284,6 +297,8 @@ export default {
    UserProfile,
    VideoScreen,
    VideoUploadDialog,
+    SharedItems,
+    PopUp,
  },
 };
 </script>
--- a/src/components/AlbumContent.vue
+++ b/src/components/AlbumContent.vue
@@ -1,21 +1,24 @@
 <template>
-  <div id="content" class="flex-column">
-    <div class="flex-column ma-horizontal">
+  <div id="albumContent" class="flex-column">
+    <div class="flex-column pa-horizontal border-bottom hideOnMobile">
      <h1>{{ album.title }}</h1>
      <h2>{{ album.artist_name }}</h2>
    </div>
-    <div id="tracks" class="flex-row border-top">
-      <div class="flex-column">
-        <img id="cover" class="shadow ma24" :src="cover" />
+    <div id="album" class="flex-row">
+      <div id="header" class="flex-column relative">
+        <div id="background" :style="coverBackground" />
+        <img id="cover" class="shadow ma24 z1" :src="cover" />
        <p class="center ma-off hideOnMobile">
          <b>{{ album.tracks.length }}</b> Tracks
        </p>
      </div>
-      <ul id="trackList" class="tracks">
-        <li v-for="track in album.tracks" :key="track._id">
-          <TrackItem :track="track" :showCover="false" />
-        </li>
-      </ul>
+      <div id="tracks" class="flex-column grow">
+        <ul id="trackList" class="tracks">
+          <li v-for="track in album.tracks" :key="track._id">
+            <TrackItem :track="track" :showCover="false" />
+          </li>
+        </ul>
+      </div>
    </div>
  </div>
 </template>
@@ -43,6 +46,9 @@ export default {
      }
      return this.album.covers.cover256;
    },
+    coverBackground() {
+      return "background-image: url('" + this.cover + "'); z-index: -1";
+    },
  },
  components: {
    TrackItem,
@@ -56,16 +62,30 @@ export default {
  width: 256px;
 }

-#content,
-#tracks {
+#albumContent {
+  overflow: hidden;
+  width: 100%;
+}
+
+#album {
  overflow: auto;
 }

+#header {
+  overflow: hidden;
+}
+
+#tracks {
+  background-color: var(--white);
+  overflow-y: auto;
+}
+
@media (max-width: 480px) {
-  #tracks {
+  #album {
    flex-direction: column;
+    max-height: 100%;
  }
-  #trackList {
+  #tracks {
    border-top: 1px solid var(--light-border);
  }
 }
--- a/src/components/BoxContent.vue
+++ b/src/components/BoxContent.vue
@@ -1,20 +1,23 @@
 <template>
-  <div id="content" class="flex-column">
-    <div class="flex-column ma-horizontal">
+  <div id="boxContent" class="flex-column">
+    <div class="flex-column pa-horizontal border-bottom hideOnMobile">
      <h1>{{ box.title }}</h1>
    </div>
-    <div id="videos" class="flex-row border-top">
-      <div class="flex-column">
+    <div id="box" class="flex-row">
+      <div id="header" class="flex-column relative">
+        <div id="background" :style="coverBackground" />
        <img id="cover" class="shadow ma24" :src="cover" />
        <p class="center ma-off hideOnMobile">
          <b>{{ box.videos.length }}</b> Videos
        </p>
      </div>
-      <ul id="videoList" class="videos">
-        <li v-for="video in box.videos" :key="video._id">
-          <VideoItem :video="video" />
-        </li>
-      </ul>
+      <div id="videos" class="flex-column grow">
+        <ul id="videoList" class="videos">
+          <li v-for="video in box.videos" :key="video._id">
+            <VideoItem :video="video" />
+          </li>
+        </ul>
+      </div>
    </div>
  </div>
 </template>
@@ -42,6 +45,9 @@ export default {
      }
      return this.box.covers.cover256;
    },
+    coverBackground() {
+      return "background-image: url('" + this.cover + "'); z-index: -1";
+    },
  },
  components: {
    VideoItem,
@@ -55,20 +61,33 @@ export default {
  width: 256px;
 }

-#content,
-#videos {
+#boxContent {
+  overflow: hidden;
+  width: 100%;
+}
+#box {
  overflow: auto;
 }

+#header {
+  overflow: hidden;
+}
+
+#videos {
+  background-color: var(--white);
+  overflow-y: auto;
+}
+
 .video {
  max-width: 256px;
 }

@media (max-width: 480px) {
-  #videos {
+  #box {
    flex-direction: column;
+    max-height: 100%;
  }
-  #videoList {
+  #videos {
    border-top: 1px solid var(--light-border);
  }
  .video {
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,52 +1,22 @@
 <template>
-  <div
-    id="player"
-    class="flex-column"
-    v-show="selectedTrack._id || selectedRadio._id"
-  >
-    <input
-      type="range"
-      id="slider"
-      min="0"
-      max="100"
-      step="0.1"
-      v-model="selectedTrack.percent"
-      @change="slideChanged"
-    />
+  <div id="player" class="flex-column" v-show="selectedTrack._id || selectedRadio._id">
+    <input type="range" id="slider" min="0" max="100" step="0.1" v-model="selectedTrack.percent" @change="slideChanged"/>
    <div id="playerBar" class="flex-row">
      <div class="flex-row grow">
-        <img
-          class="cover pointer"
-          :src="
-            selectedTrack.parent.covers.cover64 ||
-            selectedRadio.cover64 ||
-            '/static/icons/dummy/album.svg'
-          "
-          :title="selectedTrack.parent.title"
-          @click="gotoContainer"
-        />
+        <img class="cover pointer" :src="cover" :title="selectedTrack.parent.title" @click="gotoContainer" />
        <div v-if="selectedTrack._id" class="flex-column">
          <b>{{ selectedTrack.title }}</b>
          from
          <b>{{ selectedTrack.parent.title }}</b>
        </div>
+        <div v-if="selectedRadio._id" class="flex-column">
+          <b>{{ selectedRadio.name }}</b>
+        </div>
      </div>
      <div id="playerControls" class="flex-row center">
-        <button
-          @click="switchShuffle"
-          title="Shuffle mode"
-          v-if="selectedTrack._id"
-        >
-          <img
-            src="static/icons/media-shuffle-dark.svg"
-            v-show="$store.getters['player/shuffle']"
-            class="small"
-          />
-          <img
-            src="static/icons/media-consecutive-dark.svg"
-            v-show="$store.getters['player/shuffle'] == false"
-            class="small"
-          />
+        <button @click="switchShuffle" title="Shuffle mode" v-if="selectedTrack._id">
+          <img src="static/icons/media-shuffle-dark.svg" v-show="$store.getters['player/shuffle']" class="small" />
+          <img src="static/icons/media-consecutive-dark.svg" v-show="$store.getters['player/shuffle'] == false" class="small" />
        </button>
        <button @click="prevTrack" title="Back" v-if="selectedTrack._id">
          <awesome-icon icon="backward" />
@@ -58,46 +28,17 @@
        <button @click="nextTrack" title="Forward" v-if="selectedTrack._id">
          <awesome-icon icon="forward" />
        </button>
-        <button
-          @click="switchRepeatType"
-          title="Repeat mode"
-          v-if="selectedTrack._id"
-        >
-          <img
-            src="static/icons/media-repeat-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'all'"
-          />
-          <img
-            src="static/icons/media-repeat-song-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'one'"
-          />
-          <img
-            src="static/icons/media-no-repeat-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'none'"
-          />
+        <button @click="switchRepeatType" title="Repeat mode" v-if="selectedTrack._id">
+          <img src="static/icons/media-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'all'" />
+          <img src="static/icons/media-repeat-song-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'one'" />
+          <img src="static/icons/media-no-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'none'" />
        </button>
      </div>
-      <div
-        class="flex-row ma-right hideOnMobilePortrait grow right"
-        v-show="selectedTrack.title"
-      >
-        {{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}
+      <div class="flex-row ma-right hideOnMobilePortrait grow right">
+        <span v-show="selectedTrack.title">{{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}</span>
      </div>
    </div>
-    <audio
-      preload="auto"
-      ref="audioControl"
-      type="audio/mpeg"
-      @ended="nextTrack"
-      @canplay="play"
-      @playing="playing"
-      @durationchange="durationChanged"
-      @timeupdate="timeUpdate"
-      src
-    ></audio>
+    <audio preload="auto" ref="audioControl" type="audio/mpeg" @ended="nextTrack" @canplay="play" @playing="playing" @durationchange="durationChanged" @timeupdate="timeUpdate" src></audio>
  </div>
 </template>

@@ -109,7 +50,8 @@ export default {
      audio: {},
      duration: 0,
      progress: 0,
-      interval: 0,
+      intervalProgress: 0,
+      intervalState: 0,
      preConvert: false,
    };
  },
@@ -123,19 +65,33 @@ export default {

  methods: {
    play() {
-      if (this.audio.paused) {
-        this.audio.play();
-      }
+      this.audio.play();
+    },
+    pause() {
+      this.audio.pause();
+
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalState);
+
+      this.pushState();
    },
    durationChanged() {
      this.duration = this.audio.duration;
    },
    playing() {
-      window.clearInterval(this.interval);
-      this.interval = setInterval(() => {
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalState);
+
+      this.intervalProgress = setInterval(() => {
        this.progress = this.audio.currentTime;
        this.selectedTrack.percent = (100 / this.duration) * this.progress;
      }, 500);
+
+      if (this.currentUser._id) {
+        this.intervalState = setInterval(() => {
+          this.pushState();
+        }, 10000);
+      }
    },
    audioReset() {
      this.audio.pause();
@@ -156,6 +112,14 @@ export default {
        this.audio.play();
      }
    },
+    skipToSecond(second) {
+      let was_paused = this.audio.paused;
+      this.audio.pause();
+      this.audio.currentTime = second;
+      if (!was_paused) {
+        this.audio.play();
+      }
+    },
    playRadio(radio) {
      this.$store.commit("tracks/resetSelectedTrack");
      this.audio.pause();
@@ -163,7 +127,8 @@ export default {

      let item = {
        id: this.selectedRadio._id,
-        cover128: this.selectedRadio.cover128,
+        covers: { cover128: this.selectedRadio.covers.cover128 },
+        name: this.selectedRadio.name,
        type: "radio",
      };
      this.$store.dispatch("user/saveHistoryItem", item);
@@ -181,7 +146,14 @@ 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);
+        }
+        this.currentTrackParent.progress = undefined;
+      }
+      // Try to fix SAFARI
+      this.audio.play();
    },
    pushHistoryItem() {
      if (!this.currentUser._id) {
@@ -228,13 +200,20 @@ export default {
        return;
      }
      if (!this.audio.paused) {
-        this.audio.pause();
+        this.pause();
      } else if (this.audio.src != "") {
        this.audio.play();
      }
    },
-    reset() {
-      window.clearInterval(this.interval);
+    reset(item) {
+      let parentId = item.parent._id;
+      if (item.parent.parent && item.parent.parent.tracks) {
+        parentId = item.parent.parent._id;
+      }
+      this.$store.dispatch("user/resetProgress", parentId);
+
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalState);
      if (!this.audio.paused) {
        this.audio.pause();
      }
@@ -244,10 +223,10 @@ export default {
      if ("mediaSession" in navigator) {
        let me = this;
        navigator.mediaSession.setActionHandler("play", function () {
-          me.togglePlaying();
+          me.play();
        });
        navigator.mediaSession.setActionHandler("pause", function () {
-          me.togglePlaying();
+          me.pause();
        });
        navigator.mediaSession.setActionHandler("seekto", function (details) {
          if (details.fastSeek && "fastSeek" in me.audio) {
@@ -295,6 +274,19 @@ export default {
      }
      this.$store.dispatch("user/savePlayerSettings");
    },
+    pushState() {
+      if (!this.currentUser._id) {
+        return;
+      }
+      this.progress = this.audio.currentTime;
+      let item = {
+        id: this.selectedTrack._id,
+        parentId: this.currentTrackParent._id,
+        type: "track",
+        progress: Math.round(this.progress)
+      }
+      this.$store.dispatch("user/saveProgress", item);
+    },
    timeUpdate(event) {
      let percent = (event.target.currentTime / event.target.duration) * 100;
      if (percent > 10 && !this.preConvert) {
@@ -303,10 +295,32 @@ export default {
          track: this.selectedTrack,
          rate: this.audioBpm,
        });
+        this.pushHistoryItem();
      }
    },
  },
  computed: {
+    cover() {
+      if (this.selectedTrack.title != "") {
+        let res = "/static/icons/dummy/album.svg";
+
+        if (this.selectedTrack.parent.covers.cover64) {
+          res = this.selectedTrack.parent.covers.cover64;
+        }
+
+        return res;
+      }
+
+      if (this.selectedRadio) {
+        let res = "/static/icons/dummy/radio.svg";
+        if (this.selectedRadio.covers.cover64) {
+          res = this.selectedRadio.covers.cover64;
+        }
+        return res;
+      }
+
+      return "";
+    },
    selectedTrack() {
      return this.$store.getters["tracks/selectedTrack"];
    },
@@ -365,11 +379,11 @@ export default {
        this.reset();
      }
    },
-    selectedTrack(newVal) {
+    selectedTrack(newVal, oldVal) {
      if (newVal._id) {
        this.playTrack(newVal);
      } else {
-        this.reset();
+        this.reset(oldVal);
      }
    },
  },
@@ -384,17 +398,21 @@ export default {
  z-index: 1001;
  box-shadow: 0 0px 4px var(--shadow);
 }
+
 #player .cover {
  width: 52px;
  margin-right: 4px;
 }
+
 #playerBar {
  overflow: hidden;
  max-height: 52px;
 }
-#playerBar > div {
+
+#playerBar>div {
  align-items: center;
 }
+
 #playerControls button {
  display: flex;
  padding: 4px 12px;
--- a/src/components/Radio.vue
+++ b/src/components/Radio.vue
@@ -1,6 +1,6 @@
 <template>
-  <div :title="item.name" class="container radio" @click="clicked">
-    <img class="radioCover shadow" :src="item.cover128" />
+  <div :title="item.name" class="container radio ma" @click="clicked">
+    <img class="radioCover shadow" :src="cover" />
    <p
      class="radioTitle"
      :class="{ selected: item == $store.state.selectedRadio }"
@@ -30,5 +30,14 @@ export default {
      }
    },
  },
+  computed: {
+    cover() {
+      let res = "/static/icons/dummy/radio.svg";
+      if (this.item && this.item.covers.cover128) {
+        res = this.item.covers.cover128;
+      }
+      return res;
+    },
+  },
 };
 </script>
--- a/src/components/Track.vue
+++ b/src/components/Track.vue
@@ -66,12 +66,14 @@ export default {
        this.$nextTick(() => {
          element.scrollIntoView({
            block: "start",
+            behavior: "smooth",
          });
        });
      } else if (scrollUp) {
        this.$nextTick(() => {
          element.scrollIntoView({
            block: "end",
+            behavior: "smooth",
          });
        });
      }
--- a/src/components/base-components/Dialog.vue
+++ b/src/components/base-components/Dialog.vue
@@ -1,65 +1,32 @@
 <template>
-  <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 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, '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 &&
-              (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"
-              />
+          <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.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,
@@ -299,8 +244,9 @@ export default {
  right: 0;
  bottom: 0;
  z-index: 1000;
-  animation: fadeIn ease 0.15s;
+  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);
--- a/src/components/base-components/PopUp.vue
+++ b/src/components/base-components/PopUp.vue
@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="popup-control flex-column shadow ma8"
+    :class="{ fadeOut: fadeout }"
+  >
+    <div class="flex-row" :class="item.type">
+      <awesome-icon :icon="item.icon || 'circle-info'" size="2x" class="ma" />
+      <div class="flex-column pa8-top ma8-bottom ma8-right">
+        <h3 class="ma-off">{{ item.title }}</h3>
+        <p class="ma-off ma8-top">{{ item.message }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      fadeout: false,
+    };
+  },
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {
+          type: "default",
+        };
+      },
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.fadeout = true;
+      setTimeout(() => {
+        this.$store.dispatch("removePopUp", this.item);
+      }, 1000);
+    }, 4000);
+  },
+};
+</script>
+
+<style scoped>
+.popup-control {
+  width: 320px;
+  border-radius: 8px;
+  background-color: var(--white);
+}
+
+.default {
+  border-radius: 8px;
+  background-color: var(--white);
+}
+
+.danger {
+  border-radius: 8px;
+  background-color: var(--danger25);
+}
+.info {
+  border-radius: 8px;
+  background-color: var(--info);
+}
+.success {
+  border-radius: 8px;
+  background-color: var(--success);
+}
+.fadeOut {
+  animation: fadeOut ease 1s;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+</style>
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -1,95 +1,89 @@
 <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"
-        />
-        <div id="stats" class="flex-row z1">
-          <DropDown v-if="$store.getters['user/isAdministrator']">
-            <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
+        <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>
-            <template v-slot:dropdown-content>
-              <div>
-                <button
-                  v-for="(item, i) in $store.state.system.lists.visibility"
-                  :key="i"
-                  @click="setVisibility(item)"
-                >
-                  <awesome-icon :icon="getVisibilityIcon(item)" />{{
-                    getVisibilityText(item)
-                  }}
-                </button>
-                <hr />
-                <button v-if="!selectedAlbum.share._id" @click="shareEnable">
-                  <awesome-icon icon="share" />Share this album
-                </button>
-                <button
-                  v-if="selectedAlbum.share._id"
-                  @click="addShareUrlToClipboard"
-                >
-                  <awesome-icon icon="clipboard" />Copy url into clipboard
-                </button>
-                <button v-if="selectedAlbum.share._id" @click="shareDisable">
-                  <awesome-icon icon="share" />Remove share
-                </button>
-              </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>
+            <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" class="white-text" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
+                    <awesome-icon :icon="getVisibilityIcon(item)" />{{
+                      getVisibilityText(item)
+                    }}
+                  </button>
+                  <hr />
+                  <button v-if="!selectedAlbum.share._id" @click="shareEnable">
+                    <awesome-icon icon="share" />Share this album
+                  </button>
+                  <button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
+                    <awesome-icon icon="clipboard" />Copy url into clipboard
+                  </button>
+                  <button v-if="selectedAlbum.share._id" @click="shareDisable">
+                    <awesome-icon icon="share" />Remove share
+                  </button>
+                </div>
+              </template>
+            </DropDown>
+            <DropDown v-if="$store.getters['user/isAdministrator']">
+              <button class="flat center">
+                <awesome-icon icon="ellipsis-v" class="white-text" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button @click="uploadNewCover">
+                    <awesome-icon icon="image" />Set new Cover...
+                  </button>
+                  <button @click="resetCover">
+                    <awesome-icon icon="eraser" />Reset Cover
+                  </button>
+                  <hr />
+                  <button @click="mergeAlbum">
+                    <awesome-icon icon="compress-alt" />Merge Albums...
+                  </button>
+                </div>
+              </template>
+            </DropDown>
          </div>
-          <DropDown v-if="$store.getters['user/isAdministrator']">
-            <button class="flat center">
-              <awesome-icon icon="ellipsis-v" />
-            </button>
-            <template v-slot:dropdown-content>
-              <div>
-                <button @click="uploadNewCover">
-                  <awesome-icon icon="image" />Set new Cover...
-                </button>
-                <button @click="resetCover">
-                  <awesome-icon icon="eraser" />Reset Cover
-                </button>
-                <hr />
-                <button @click="mergeAlbum">
-                  <awesome-icon icon="compress-alt" />Merge Albums...
-                </button>
-              </div>
-            </template>
-          </DropDown>
        </div>
      </div>
-
      <ul id="trackList" class="tracks">
        <li v-for="track in selectedAlbum.tracks" :key="track._id">
          <TrackItem :track="track" :showCover="false" />
@@ -121,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);
@@ -156,6 +150,14 @@ export default {
        }
      }
    },
+    playProgress() {
+      let track = this.selectedAlbum.tracks.find(
+        (f) => f._id == this.selectedAlbum.progress.id
+      );
+      if (track) {
+        this.$store.dispatch("tracks/play", track);
+      }
+    },
    closed() {
      if (
        (window.history.state.back &&
@@ -201,19 +203,19 @@ export default {
      return visibility == "global"
        ? "globe"
        : visibility == "instance"
-        ? "server"
-        : visibility == "hidden"
-        ? "eye-slash"
-        : "user";
+          ? "server"
+          : visibility == "hidden"
+            ? "eye-slash"
+            : "user";
    },
    getVisibilityText(visibility) {
      return visibility == "global"
        ? "Global"
        : visibility == "instance"
-        ? "On this server"
-        : visibility == "hidden"
-        ? "Hide this Album"
-        : "Only for me";
+          ? "On this server"
+          : visibility == "hidden"
+            ? "Hide this Album"
+            : "Only for me";
    },
    selectAlbum(album) {
      this.$store.dispatch("albums/selectAlbum", album);
@@ -228,6 +230,15 @@ export default {
    shareDisable() {
      this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
    },
+    loadUserProgress() {
+      if (this.selectedTrack.parent._id != this.selectedAlbum._id) {
+        this.$store
+          .dispatch("user/getProgress", this.selectedAlbum)
+          .then(() => {
+            this.gotoTrack();
+          });
+      }
+    }
  },
  computed: {
    ...mapGetters({
@@ -235,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;
@@ -287,19 +300,19 @@ export default {
      return this.selectedAlbum.visibility == "global"
        ? "globe"
        : this.selectedAlbum.visibility == "instance"
-        ? "server"
-        : this.selectedAlbum.visibility == "hidden"
-        ? "eye-slash"
-        : "user";
+          ? "server"
+          : this.selectedAlbum.visibility == "hidden"
+            ? "eye-slash"
+            : "user";
    },
    visibility_text() {
      return this.selectedAlbum.visibility == "global"
        ? "Visible for the whole world"
        : this.selectedAlbum.visibility == "instance"
-        ? "Visible on this instance"
-        : this.selectedAlbum.visibility == "hidden"
-        ? "Hidden for all users"
-        : "Visible only for me";
+          ? "Visible on this instance"
+          : this.selectedAlbum.visibility == "hidden"
+            ? "Hidden for all users"
+            : "Visible only for me";
    },
    isFavourite() {
      return (
@@ -318,7 +331,7 @@ export default {
          this.$refs.dialogWindow.open();
          window.addEventListener("keydown", this.keydownListener);
        }
-        this.gotoTrack();
+        this.loadUserProgress();
      } else {
        if (this.$refs.dialogWindow.visible) {
          this.$refs.dialogWindow.close();
@@ -336,31 +349,33 @@ export default {

 <style scoped>
 #albumViewer {
-  height: 366px;
+  height: 400px;
  width: 640px;
 }
+
 #header {
+  width: 304px;
+  height: 400px;
  position: relative;
  background-color: black;
 }
+
 #header img {
  align-self: center;
  width: 256px;
 }
+
 #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 {
  width: 32px;
  height: 32px;
 }
+
 #trackList {
  background-color: var(--white);
  z-index: 1;
@@ -370,15 +385,19 @@ export default {
  #header {
    width: 100%;
  }
+
  #albumViewer {
    flex-direction: column;
  }
 }
-@media (max-width: 480px), (max-height: 480px) {
+
+@media (max-width: 480px),
+(max-height: 480px) {
  #albumViewer {
    width: 100%;
    height: 100%;
  }
+
  #trackList {
    height: initial;
    flex-grow: 1;
--- a/src/components/dialogs/ArtistViewer.vue
+++ b/src/components/dialogs/ArtistViewer.vue
@@ -1,70 +1,41 @@
 <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"
-        />
-        <h1 @dblclick="dblclick">
-          {{ selectedArtist.name }}
-        </h1>
-        <span id="stats" class="ma-bottom">
-          <b>{{ artist_tracks.length }}</b> Tracks in
-          <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">
-          <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 id="title" class="flex-column ma-left ma-right pa-bottom">
+          <h1>
+            {{ selectedArtist.name }}
+          </h1>
+          <span id="stats" class="ma-bottom">
+            <b>{{ artist_tracks.length }}</b> Tracks in
+            <b>{{ artist_albums.length }}</b> Albums with a duration of
+            <b>{{ artist_duration }}</b>
+          </span>
+          <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>
@@ -83,26 +54,15 @@
            </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">
-          <AlbumItem
-            class="ma-top ma-left ma-right"
-            :class="{ playing: playingAlbumId == album._id }"
-            v-for="album in selectedArtist.albums"
-            :key="album._id"
-            :item="album"
-            :id="album._id"
-            :ref="album._id"
-            @click="scrollToAlbum(album)"
-            @dblclick="playAlbum(album)"
-          />
+          <AlbumItem class="ma-top ma-left ma-right" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" :id="album._id" :ref="album._id" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
        </div>
-        <ul
-          id="trackList"
-          class="tracks"
-          :class="{ playing: selectedTrack._id != null }"
-        >
+        <ul id="trackList" class="tracks" :class="{ playing: selectedTrack._id != null }">
          <li v-for="track in selectedArtist.tracks" :key="track._id">
            <TrackItem :track="track" :ref="track._id" />
          </li>
@@ -126,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);
@@ -143,6 +103,14 @@ export default {
        }
      }
    },
+    playProgress() {
+      let track = this.selectedArtist.tracks.find(
+        (f) => f._id == this.selectedArtist.progress.id
+      );
+      if (track) {
+        this.$store.dispatch("tracks/play", track);
+      }
+    },
    gotoNextArtist() {
      this.$store.dispatch("artists/gotoNextArtist");
    },
@@ -151,8 +119,9 @@ export default {
    },
    closed() {
      if (
-        window.history.state.back.indexOf("?") == -1 ||
-        window.history.state.back.startsWith("/search")
+        window.history.state.back && (
+          window.history.state.back.indexOf("?") == -1 ||
+          window.history.state.back.startsWith("/search"))
      ) {
        this.$router.back();
      } else {
@@ -194,6 +163,15 @@ export default {
    uploadNewCover() {
      this.$store.dispatch("artists/uploadNewCover", this.selectedArtist);
    },
+    loadUserProgress() {
+      if (!this.isPlaying || !this.selectedTrack.parent.parent || this.selectedTrack.parent.parent._id != this.selectedArtist._id) {
+        this.$store.dispatch("user/getProgress", this.selectedArtist).then(() => {
+          this.gotoTrack();
+        });
+      } else {
+        this.gotoTrack();
+      }
+    }
  },
  computed: {
    ...mapGetters({
@@ -201,7 +179,9 @@ export default {
      nextArtist: ["artists/nextArtist"],
      selectedArtist: ["artists/selectedArtist"],
      selectedTrack: ["tracks/selectedTrack"],
+      selectedTrackContainer: ["tracks/selectedTrackContainer"],
      favourites: ["user/favourites"],
+      isPlaying: ["player/isPlaying"]
    }),
    cover() {
      let covers = this.selectedArtist.covers;
@@ -266,7 +246,7 @@ export default {
          this.$refs.dialogWindow.open();
          window.addEventListener("keydown", this.keydownListener);
        }
-        this.gotoTrack();
+        this.loadUserProgress();
      } else {
        if (this.$refs.dialogWindow.visible) {
          this.$refs.dialogWindow.close();
@@ -289,41 +269,52 @@ export default {
  flex-direction: column;
  overflow: hidden;
 }
+
 h1,
 #stats {
  z-index: 1;
-  text-align: center;
  width: 100%;
  color: var(--white);
  text-shadow: 0 1px 2px black;
 }
+
 #artistImage {
  width: 512px;
  max-height: 256px;
 }
+
 #header {
  position: relative;
  background-color: black;
  width: 760px;
  max-width: 100%;
 }
+
+#header #title {
+  z-index: 100;
+}
+
 #albumList {
  z-index: 1;
  overflow-y: auto;
  background-color: var(--white);
 }
+
 #albumList::-webkit-scrollbar {
  display: none;
 }
+
 #albumList .album:last-child {
  margin-bottom: 12px;
 }
+
 #navigation {
  z-index: 2;
  background-color: #ffffff40;
  border-top: 1px solid #ffffff20;
  border-bottom: 1px solid #00000020;
 }
+
 #trackList {
  z-index: 1;
  background-color: var(--white);
@@ -338,12 +329,15 @@ h1,
  width: initial;
  height: initial;
 }
+
 .dialog-body button {
  color: var(--darkgray);
 }
+
 .container {
  flex-grow: 0;
 }
+
@media (max-width: 480px) {
  #albumList {
    background-color: initial;
@@ -353,19 +347,21 @@ h1,
  }
 }

-@media (max-width: 480px), (max-height: 480px) {
+@media (max-width: 480px),
+(max-height: 480px) {
  #artistViewer {
    height: initial;
  }
+
  #trackList {
    width: initial;
    height: initial;
  }
+
  #header {
    width: initial;
  }
 }

-@media (max-height: 480px) {
-}
+@media (max-height: 480px) {}
 </style>
--- a/src/components/dialogs/BoxViewer.vue
+++ b/src/components/dialogs/BoxViewer.vue
@@ -1,89 +1,81 @@
 <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"
-        />
-        <div id="stats" class="flex-row z1">
-          <DropDown v-if="$store.getters['user/isAdministrator']">
-            <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
+        <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 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>
-            <template v-slot:dropdown-content>
-              <div>
-                <button
-                  v-for="(item, i) in $store.state.system.lists.visibility"
-                  :key="i"
-                  @click="setVisibility(item)"
-                >
-                  <awesome-icon :icon="getVisibilityIcon(item)" />{{
-                    getVisibilityText(item)
-                  }}
-                </button>
-                <hr />
-                <button v-if="!selectedBox.share._id" @click="shareEnable">
-                  <awesome-icon icon="share" />Share this box
-                </button>
-                <button
-                  v-if="selectedBox.share._id"
-                  @click="addShareUrlToClipboard"
-                >
-                  <awesome-icon icon="clipboard" />Copy url into clipboard
-                </button>
-                <button v-if="selectedBox.share._id" @click="shareDisable">
-                  <awesome-icon icon="share" />Remove share
-                </button>
-              </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>
+            <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" class="white-text" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
+                    <awesome-icon :icon="getVisibilityIcon(item)" />{{
+                      getVisibilityText(item)
+                    }}
+                  </button>
+                  <hr />
+                  <button v-if="!selectedBox.share._id" @click="shareEnable">
+                    <awesome-icon icon="share" />Share this box
+                  </button>
+                  <button v-if="selectedBox.share._id" @click="addShareUrlToClipboard">
+                    <awesome-icon icon="clipboard" />Copy url into clipboard
+                  </button>
+                  <button v-if="selectedBox.share._id" @click="shareDisable">
+                    <awesome-icon icon="share" />Remove share
+                  </button>
+                </div>
+              </template>
+            </DropDown>
+            <DropDown v-if="$store.getters['user/isAdministrator']">
+              <button class="flat center">
+                <awesome-icon icon="ellipsis-v" class="white-text" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button @click="uploadNewCover">
+                    <awesome-icon icon="image" />Set new Cover...
+                  </button>
+                  <button @click="resetCover">
+                    <awesome-icon icon="eraser" />Reset Cover
+                  </button>
+                  <hr />
+                  <button @click="mergeBox">
+                    <awesome-icon icon="compress-alt" />Merge Boxes...
+                  </button>
+                </div>
+              </template>
+            </DropDown>
          </div>
-          <DropDown v-if="$store.getters['user/isAdministrator']">
-            <button class="flat center">
-              <awesome-icon icon="ellipsis-v" />
-            </button>
-            <template v-slot:dropdown-content>
-              <div>
-                <button @click="uploadNewCover">
-                  <awesome-icon icon="image" />Set new Cover...
-                </button>
-                <button @click="resetCover">
-                  <awesome-icon icon="eraser" />Reset Cover
-                </button>
-                <hr />
-                <button @click="mergeBox">
-                  <awesome-icon icon="compress-alt" />Merge Boxes...
-                </button>
-              </div>
-            </template>
-          </DropDown>
        </div>
      </div>
-
      <ul id="videoList" class="videos">
        <li v-for="item in selectedBox.videos" :key="item._id">
          <VideoItem :video="item" />
@@ -121,6 +113,14 @@ export default {
        }
      }
    },
+    playProgress() {
+      let video = this.selectedBox.videos.find(
+        (f) => f._id == this.selectedBox.progress.id
+      );
+      if (video) {
+        this.$store.dispatch("videos/play", video);
+      }
+    },
    gotoNextBox() {
      this.$store.dispatch("boxes/gotoNextBox");
    },
@@ -167,19 +167,19 @@ export default {
      return visibility == "global"
        ? "globe"
        : visibility == "instance"
-        ? "server"
-        : visibility == "hidden"
-        ? "eye-slash"
-        : "user";
+          ? "server"
+          : visibility == "hidden"
+            ? "eye-slash"
+            : "user";
    },
    getVisibilityText(visibility) {
      return visibility == "global"
        ? "Global"
        : visibility == "instance"
-        ? "On this server"
-        : visibility == "hidden"
-        ? "Hide this Box"
-        : "Only for me";
+          ? "On this server"
+          : visibility == "hidden"
+            ? "Hide this Box"
+            : "Only for me";
    },
    resetCover() {
      this.$store.dispatch("boxes/resetCover", this.selectedBox);
@@ -192,6 +192,15 @@ export default {
    shareDisable() {
      this.$store.dispatch("boxes/shareDisable", this.selectedBox);
    },
+    loadUserProgress() {
+      if (this.selectedVideo.parent._id != this.selectedBox._id) {
+        this.$store
+          .dispatch("user/getProgress", this.selectedBox)
+          .then(() => {
+            this.gotoVideo();
+          });
+      }
+    }
  },
  computed: {
    ...mapGetters({
@@ -227,19 +236,19 @@ export default {
      return this.selectedBox.visibility == "global"
        ? "globe"
        : this.selectedBox.visibility == "instance"
-        ? "server"
-        : this.selectedBox.visibility == "hidden"
-        ? "eye-slash"
-        : "user";
+          ? "server"
+          : this.selectedBox.visibility == "hidden"
+            ? "eye-slash"
+            : "user";
    },
    visibility_text() {
      return this.selectedBox.visibility == "global"
        ? "Visible for the whole world"
        : this.selectedBox.visibility == "instance"
-        ? "Visible on this instance"
-        : this.selectedBox.visibility == "hidden"
-        ? "Hidden for all users"
-        : "Visible only for me";
+          ? "Visible on this instance"
+          : this.selectedBox.visibility == "hidden"
+            ? "Hidden for all users"
+            : "Visible only for me";
    },
  },
  watch: {
@@ -249,7 +258,7 @@ export default {
          this.$refs.dialogWindow.open();
          window.addEventListener("keydown", this.keydownListener);
        }
-        this.gotoVideo();
+        this.loadUserProgress();
      } else {
        if (this.$refs.dialogWindow.visible) {
          this.$refs.dialogWindow.close();
@@ -267,39 +276,36 @@ export default {

 <style scoped>
 #boxViewer {
-  height: 462px;
+  height: 486px;
 }
+
 #header {
  position: relative;
  background-color: black;
 }
+
 #header img {
  align-self: center;
  width: 256px;
 }
+
 #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 {
  width: 32px;
  height: 32px;
 }
-#stats p {
-  max-width: 192px;
-  align-self: center;
-}
+
 #videoList {
  background-color: var(--white);
  z-index: 1;
  overflow: overlay;
 }
+
 .video {
  width: 220px;
 }
@@ -308,26 +314,32 @@ export default {
  #boxViewer {
    flex-direction: column;
  }
+
  #stats p {
    max-width: initial;
  }
 }
-@media (max-width: 480px), (max-height: 480px) {
+
+@media (max-width: 480px),
+(max-height: 480px) {
  #boxViewer {
    width: 100%;
    height: 100%;
  }
+
  #header img {
    width: 192px;
  }
+
  #videoList {
    height: initial;
    flex-grow: 1;
  }
+
  .video {
    width: initial;
  }
 }
-@media (max-height: 480px) {
-}
+
+@media (max-height: 480px) {}
 </style>
--- a/src/components/dialogs/Radios.vue
+++ b/src/components/dialogs/Radios.vue
@@ -53,7 +53,7 @@
            <td>
              <img
                class="radioCover"
-                :src="radio.cover32"
+                :src="cover(radio)"
                @click="updateCover(radio)"
              />
            </td>
@@ -116,6 +116,13 @@ export default {
    updateCover(radio) {
      this.$store.dispatch("radios/updateRadio", radio);
    },
+    cover(radio) {
+      let res = "/static/icons/dummy/radio.svg";
+      if (radio.covers.cover32) {
+        res = radio.covers.cover32;
+      }
+      return res;
+    },
  },
 };
 </script>
--- a/src/components/dialogs/SharedItems.vue
+++ b/src/components/dialogs/SharedItems.vue
@@ -0,0 +1,118 @@
+<template>
+  <DialogBase ref="dialogWindow" title="Shared items" button-text="close">
+    <div class="flex-column" id="sharedContent">
+      <ul v-if="shares.length > 0">
+        <li
+          class="flex-row pa4-top pa4-bottom"
+          v-for="share in shares"
+          :key="share._id"
+        >
+          <div class="flex-row grow">
+            <a
+              :href="'/#/share?id=' + share._id"
+              target="webplay_share"
+              :title="'Open ' + share.type"
+            >
+              <img
+                class="cover ma-horizontal shadow pointer"
+                :src="cover(share)"
+              />
+            </a>
+            <p class="grow ma-off">
+              {{ share.title }}
+            </p>
+            <button
+              class="flat danger faded"
+              @click="shareDisable(share)"
+              title="Disable Sharing"
+            >
+              <awesome-icon icon="trash-alt" />
+            </button>
+          </div>
+        </li>
+      </ul>
+      <h3 v-else class="ma">No shares on your instance</h3>
+    </div>
+  </DialogBase>
+</template>
+
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  methods: {
+    open() {
+      this.loadCollection();
+      this.$store.state.systemDialog = true;
+      this.$refs.dialogWindow.open();
+    },
+    closed() {
+      this.$store.state.systemDialog = false;
+    },
+    cover(item) {
+      switch (item.type) {
+        case "album":
+          return item.cover || "/static/icons/dummy/album.svg";
+        case "box":
+          return item.cover || "/static/icons/dummy/box.svg";
+      }
+    },
+    loadCollection() {
+      this.$store.dispatch("share/loadShares");
+    },
+    shareDisable(share) {
+      switch (share.type) {
+        case "album":
+          this.$store
+            .dispatch("albums/getAlbumById", share.object_id)
+            .then((item) => {
+              this.$store
+                .dispatch(
+                  "albums/shareDisable",
+                  item || { _id: share.object_id }
+                )
+                .then(() => {
+                  this.loadCollection();
+                });
+            });
+
+          break;
+        case "box":
+          this.$store
+            .dispatch("boxes/getBoxById", share.object_id)
+            .then((item) => {
+              this.$store
+                .dispatch(
+                  "boxes/shareDisable",
+                  item || { _id: share.object_id }
+                )
+                .then(() => {
+                  this.loadCollection();
+                });
+            });
+          break;
+      }
+    },
+  },
+  computed: {
+    ...mapGetters({
+      shares: ["share/collection"],
+    }),
+  },
+};
+</script>
+
+<style scoped>
+li p {
+  align-self: center;
+}
+
+li .cover {
+  width: 32px;
+}
+
+#sharedContent {
+  min-width: 320px;
+}
+</style>
--- a/src/components/dialogs/Users.vue
+++ b/src/components/dialogs/Users.vue
@@ -87,7 +87,7 @@
              <button
                @click="deleteUser(user)"
                title="Remove Useraccount"
-                class="flat danger"
+                class="flat danger faded"
                v-if="user._id != me._id"
              >
                <awesome-icon icon="trash-alt" />
@@ -198,12 +198,6 @@ export default {
 #usersBody .me {
  font-weight: bold;
 }
-#usersBody table button {
-  opacity: 0.25;
-}
-#usersBody table button:hover {
-  opacity: 1;
-}
 #usersBody .user-role {
  display: flex;
  align-items: center;
--- a/src/components/dialogs/VideoScreen.vue
+++ b/src/components/dialogs/VideoScreen.vue
@@ -1,37 +1,14 @@
 <template>
-  <DialogBase
-    ref="dialogWindow"
-    @closing="closing"
-    :showFooter="false"
-    :showFullscreenButton="true"
-  >
+  <DialogBase ref="dialogWindow" @closing="closing" :showFooter="false" :showFullscreenButton="true">
    <template v-slot:header-right>
-      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1"
-        >Language:</span
-      >
-      <select
-        v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1"
-        @change="langChanged"
-        v-model="selectedLang"
-      >
-        <option
-          v-for="(lang, i) in selectedVideo.tracks"
-          :key="i"
-          :value="lang"
-          :title="lang.title"
-        >
+      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1">Language:</span>
+      <select v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1" @change="langChanged" v-model="selectedLang">
+        <option v-for="(lang, i) in selectedVideo.tracks" :key="i" :value="lang" :title="lang.title">
          {{ lang.lang.toUpperCase() }}
        </option>
      </select>
    </template>
-    <video
-      @ended="nextVideo"
-      @timeupdate="timeUpdate"
-      controls
-      style="height: 100%; width: 100%; background: black"
-      ref="videoControl"
-      src
-    ></video>
+    <video @ended="nextVideo" @timeupdate="timeUpdate" @playing="playing" @pause="pause" controls style="height: 100%; width: 100%; background: black" ref="videoControl" src></video>
  </DialogBase>
 </template>
 <script>
@@ -42,6 +19,7 @@ export default {
      languages: [],
      selectedLang: {},
      preConvert: false,
+      intervalState: 0,
    };
  },
  methods: {
@@ -50,6 +28,30 @@ export default {
        this.$store.getters["videos/getStreamUrl"] + this.langIndex;
      this.video.play();
    },
+    pause() {
+      window.clearInterval(this.intervalState);
+    },
+    playing() {
+      window.clearInterval(this.intervalState);
+      this.pushState();
+
+      this.intervalState = setInterval(() => {
+        this.pushState();
+      }, 10000);
+    },
+    pushState() {
+      if (!this.currentUser._id || !this.video || !this.selectedVideo._id) {
+        return;
+      }
+      let item = {
+        id: this.selectedVideo._id,
+        parentId: this.selectedVideo.parent._id,
+        type: "video",
+        progress: Math.round(this.video.currentTime)
+      }
+      this.$store.dispatch("user/saveProgress", item);
+    },
+
    playVideo(video) {
      this.$store.commit("radios/resetSelectedRadio");
      this.$store.commit("tracks/resetSelectedTrack");
@@ -81,6 +83,13 @@ export default {

      this.video.src =
        this.$store.getters["videos/getStreamUrl"] + this.langIndex;
+      if (this.selectedVideo.parent.progress) {
+        if (this.selectedVideo.parent.progress.id == this.selectedVideo._id) {
+          this.skipToSecond(this.selectedVideo.parent.progress.progress);
+        }
+        this.selectedVideo.parent.progress = undefined;
+      }
+
      this.video.play();

      this.pushHistoryItem();
@@ -120,7 +129,22 @@ export default {
        });
      }
    },
+    reset() {
+      if (this.$refs.dialogWindow.visible) {
+        this.$refs.dialogWindow.close();
+      }
+    },
+    skipToSecond(second) {
+      let was_paused = this.video.paused;
+      this.video.pause();
+      this.video.currentTime = second;
+      if (!was_paused) {
+        this.video.play();
+      }
+    },
    closing() {
+      window.clearInterval(this.intervalState);
+      this.pushState();
      this.video = undefined;
      this.$store.dispatch("videos/resetSelectedVideo");
    },
@@ -172,9 +196,7 @@ export default {
      if (newVal._id) {
        this.playVideo(newVal);
      } else {
-        if (this.$refs.dialogWindow.visible) {
-          this.$refs.dialogWindow.close();
-        }
+        this.reset();
      }
    },
  },
--- a/src/main.js
+++ b/src/main.js
@@ -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'
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -87,5 +87,12 @@ export default {
  },
  resetRedisCache(context) {
    axios.post(context.rootGetters.server + "/api/system/reset/redis", {}, context.rootGetters.headers);
+    context.dispatch("addPoUp", { title: "Cache", message: "Cache was reseted", type: "info" })
+  },
+  addPoUp(context, item) {
+    context.commit("addPopUp", item);
+  },
+  removePopUp(context, item) {
+    context.commit("removePopUp", item);
  }
 }
--- a/src/store/modules/albums/actions.js
+++ b/src/store/modules/albums/actions.js
@@ -32,12 +32,15 @@ export default {

  },
  loadAlbums(context, force) {
-    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);
-      });
-    }
+    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 => {
@@ -111,6 +114,12 @@ export default {
      context.dispatch("selectAlbum", album);
    }
  },
+  getAlbumById(context, id) {
+    return new Promise(resolve => {
+      let album = context.getters.collection.find(item => item._id == id);
+      resolve(album);
+    });
+  },
  gotoPrevAlbum(context) {
    let prevAlbum = context.getters.prevAlbum;
    if (prevAlbum._id) {
@@ -159,12 +168,21 @@ 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 });
      });
    });
  },
  shareDisable(context, album) {
-    axios.delete(context.rootGetters.server + "/api/albums/" + album._id + "/share", context.rootGetters.headers).then(() => {
-      album.share = {};
+    return new Promise(resolve => {
+      axios.delete(context.rootGetters.server + "/api/albums/" + album._id + "/share", context.rootGetters.headers).then(() => {
+        album.share = {};
+        resolve();
+      });
+    });
+  },
+  loadRandomCovers(context, count) {
+    axios.get(context.rootGetters.server + "/api/albums/random/" + count, context.rootGetters.headers).then((res) => {
+      context.commit("setRandomCovers", res.data);
    });
  }
 }
--- a/src/store/modules/albums/getters.js
+++ b/src/store/modules/albums/getters.js
@@ -32,5 +32,8 @@ export default {
    },
    newest(state) {
        return state.newest;
+    },
+    randomCovers(state) {
+        return state.randomCovers;
    }
 }
--- a/src/store/modules/albums/mutations.js
+++ b/src/store/modules/albums/mutations.js
@@ -76,5 +76,8 @@ export default {
      }
    });
    state.newest = albums;
+  },
+  setRandomCovers(state, covers) {
+    state.randomCovers = covers;
  }
 }
--- a/src/store/modules/albums/state.js
+++ b/src/store/modules/albums/state.js
@@ -2,6 +2,7 @@ export default {
    collection: [],
    newest: [],
    selectedAlbum: { tracks: [], covers: {}, share: {} },
+    randomCovers: [],
    page: 1,
    loading: false,
    eos: false
--- a/src/store/modules/artists/actions.js
+++ b/src/store/modules/artists/actions.js
@@ -13,12 +13,15 @@ export default {
    })
  },
  loadArtists(context, force) {
-    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);
-      });
-    }
+    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;
--- a/src/store/modules/boxes/actions.js
+++ b/src/store/modules/boxes/actions.js
@@ -13,12 +13,15 @@ export default {
    })
  },
  loadBoxes(context, force) {
-    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);
-      });
-    }
+    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 => {
@@ -75,6 +78,12 @@ export default {
      context.dispatch("selectBox", box);
    }
  },
+  getBoxById(context, id) {
+    return new Promise(resolve => {
+      let box = context.getters.collection.find(item => item._id == id);
+      resolve(box);
+    });
+  },
  gotoPrevBox(context) {
    let prevBox = context.getters.prevBox;
    if (prevBox._id) {
@@ -135,12 +144,16 @@ export default {
      axios.post(context.rootGetters.server + "/api/boxes/" + box._id + "/share", {}, context.rootGetters.headers).then(res => {
        box.share = res.data;
        resolve();
+        context.dispatch("addPoUp", { title: "Share successful", message: "Url was copied into your clipboard", type: "success", icon: "share" }, { root: true });
      });
    });
  },
  shareDisable(context, box) {
-    axios.delete(context.rootGetters.server + "/api/boxes/" + box._id + "/share", context.rootGetters.headers).then(() => {
-      box.share = {};
+    return new Promise(resolve => {
+      axios.delete(context.rootGetters.server + "/api/boxes/" + box._id + "/share", context.rootGetters.headers).then(() => {
+        box.share = {};
+        resolve();
+      });
    });
  }
 }
--- a/src/store/modules/radios/actions.js
+++ b/src/store/modules/radios/actions.js
@@ -44,9 +44,7 @@ export default {
        let h = context.rootGetters.headers;
        h.headers["content-type"] = "multipart/form-data";
        axios.put(context.rootGetters.server + "/api/radios/" + radio._id + "/cover", formData, h).then((res) => {
-          radio.cover32 = res.data.cover32;
-          radio.cover64 = res.data.cover64;
-          radio.cover128 = res.data.cover128;
+          radio.covers = res.data.covers;
          context.dispatch("loadRadios", true);
        });
      }
--- a/src/store/modules/radios/state.js
+++ b/src/store/modules/radios/state.js
@@ -1,4 +1,4 @@
 export default {
    collection: [],
-    selectedRadio: {},
+    selectedRadio: { covers: {} },
 }
--- a/src/store/modules/share/actions.js
+++ b/src/store/modules/share/actions.js
@@ -1,6 +1,11 @@
 import axios from 'axios'

 export default {
+  loadShares(context) {
+    axios.get(context.rootGetters.server + "/api/shares", context.rootGetters.headers).then((res) => {
+      context.commit('setShares', res.data);
+    });
+  },
  get(context, id) {
    return new Promise((resolve) => {
      axios.get(context.rootGetters.server + "/api/shares/" + id, context.rootGetters.headers).then((res) => {
--- a/src/store/modules/share/getters.js
+++ b/src/store/modules/share/getters.js
@@ -0,0 +1,5 @@
+export default {
+    collection(state) {
+        return state.collection;
+    },
+}
--- a/src/store/modules/share/index.js
+++ b/src/store/modules/share/index.js
@@ -1,9 +1,12 @@
-//import state from './state.js';
-//import getters from './getters.js';
-//import mutations from './mutations.js';
+import state from './state.js';
+import getters from './getters.js';
+import mutations from './mutations.js';
 import actions from './actions.js';

 export default {
    namespaced: true,
+    state,
+    getters,
+    mutations,
    actions
 }
--- a/src/store/modules/share/mutations.js
+++ b/src/store/modules/share/mutations.js
@@ -0,0 +1,6 @@
+export default {
+
+  setShares(state, shares) {
+    state.collection = shares;
+  },
+}
--- a/src/store/modules/share/state.js
+++ b/src/store/modules/share/state.js
@@ -0,0 +1,3 @@
+export default {
+    collection: [],
+}
--- a/src/store/modules/user/actions.js
+++ b/src/store/modules/user/actions.js
@@ -80,6 +80,34 @@ export default {
        context.commit("setHistory", res.data);
      });
  },
+  saveProgress(context, item) {
+    if (context.state._id == -1) {
+      return;
+    }
+    axios
+      .post(context.rootGetters.server + "/api/user/progress", item, context.rootGetters.headers);
+  },
+  getProgress(context, parent) {
+    return new Promise((resolve) => {
+      if (context.state._id == -1) {
+        resolve();
+      } else {
+        axios
+          .get(context.rootGetters.server + "/api/user/progress/" + parent._id, context.rootGetters.headers)
+          .then((res) => {
+            parent.progress = res.data;
+            resolve();
+          });
+      }
+    });
+  },
+  resetProgress(context, parentId) {
+    if (context.state._id == -1) {
+      return;
+    }
+    axios
+      .delete(context.rootGetters.server + "/api/user/progress/" + parentId, context.rootGetters.headers);
+  },
  savePlayerSettings(context) {
    let body = {
      repeat: context.rootGetters["player/repeatType"],
--- a/src/store/modules/videos/actions.js
+++ b/src/store/modules/videos/actions.js
@@ -16,6 +16,8 @@ export default {
    let currentIndex = video.parent.videos.indexOf(video);
    if (currentIndex < video.parent.videos.length - 1) {
      context.dispatch("play", video.parent.videos[currentIndex + 1]);
+    } else {
+      this.dispatch("user/resetProgress", video.parent._id);
    }
  },
  convertNextTo(context, payload) {
--- a/src/store/modules/videos/mutations.js
+++ b/src/store/modules/videos/mutations.js
@@ -6,7 +6,7 @@ export default {
        if (!state.selectedVideo._id) {
            return;
        }
-        state.selectedVideo = { tracks: [] };
+        state.selectedVideo = { tracks: [], parent: { title: "", covers: {} } };
    },
    setMostViewed(state, tracks) {
        state.mostViewed = tracks;
--- a/src/store/modules/videos/state.js
+++ b/src/store/modules/videos/state.js
@@ -1,4 +1,4 @@
 export default {
-    selectedVideo: { tracks: [] },
+    selectedVideo: { tracks: [], parent: { title: "", covers: {} } },
    mostViewed: []
 }
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -25,5 +25,13 @@ export default {
  },
  setServerInfo(state, info) {
    state.serverInfo = info;
+  },
+  addPopUp(state, item) {
+    item.time = Date.now();
+    state.popups.unshift(item);
+  },
+  removePopUp(state, item) {
+    let index = state.popups.indexOf(item);
+    state.popups.splice(index, 1);
  }
 }
--- a/src/store/state.js
+++ b/src/store/state.js
@@ -15,6 +15,6 @@ export default {
            videos: 0,
            users: 0
        }
-    }
-
+    },
+    popups: []
 }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,30 +2,21 @@
  <div id="welcome" ref="welcome" @scroll="loadNextPage">
    <div id="welcomeLeft" class="flex-column grow">
      <div id="banner" class="center flex-column shadow">
-        <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 id="collage">
+          <svg width="100%" height="100%" viewBox="20 40 600 100">
+            <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>
+        </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
-        v-else-if="mostListened.length == 0 && mostViewed.length == 0"
-        title="Still no history or trends"
-        subtitle="Still no history or trends on this instance"
-        icon="info"
-      />
+      <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 v-else-if="mostListened.length == 0 && mostViewed.length == 0" title="Still no history or trends" subtitle="Still no history or trends on this instance" icon="info" />
      <template v-else>
        <h2 class="ma-left ma-top pa-top ma4-bottom" v-if="history.length > 0">
          Last played
@@ -33,90 +24,43 @@
        <template v-if="history.length > 0">
          <div id="history" :class="{ more: historyAll == true }">
            <template v-for="item in history">
-              <AlbumItem
-                class="ma8"
-                v-if="item.type == 'album'"
-                :item="item"
-                :key="item._id"
-              />
-              <ArtistItem
-                class="ma8"
-                v-if="item.type == 'artist'"
-                :item="item"
-                :key="item._id"
-              />
-              <BoxItem
-                class="ma8"
-                v-if="item.type == 'box'"
-                :item="item"
-                :key="item._id"
-              />
-              <RadioItem
-                class="ma8"
-                v-if="item.type == 'radio'"
-                :item="item"
-                :key="item._id"
-              />
+              <AlbumItem class="ma8" v-if="item.type == 'album'" :item="item" :key="item._id" />
+              <ArtistItem class="ma8" v-if="item.type == 'artist'" :item="item" :key="item._id" />
+              <BoxItem class="ma8" v-if="item.type == 'box'" :item="item" :key="item._id" />
+              <RadioItem class="ma8" v-if="item.type == 'radio'" :item="item" :key="item._id" />
            </template>
          </div>

          <span class="pa-top pa-right right" @click="toggleHistory">
-            <awesome-icon
-              :icon="historyAll ? 'arrow-up' : 'arrow-down'"
-              class="pa8-right"
-            />{{ historyToggleText }}</span
-          >
+            <awesome-icon :icon="historyAll ? 'arrow-up' : 'arrow-down'" class="pa8-right" />{{ historyToggleText }}</span>
        </template>
        <div id="mostUsed" class="flex-row ma">
          <div id="mostListened" class="grow" v-if="mostListened.length > 0">
            <h2 class="ma-top pa-top ma4-bottom">Most listened</h2>
            <div class="flex-column">
-              <TrackItem
-                v-for="(item, i) in mostListened"
-                :track="item"
-                :key="i"
-              />
+              <TrackItem v-for="(item, i) in mostListened" :track="item" :key="i" />
            </div>
          </div>
          <div id="mostViewed" class="grow" v-if="mostViewed.length > 0">
            <h2 class="ma-top pa-top ma4-bottom">Most viewed</h2>
            <div id="mostViewedVideos" class="flex-row">
-              <VideoItem
-                v-for="(item, i) in mostViewed"
-                :video="item"
-                :key="i"
-              />
+              <VideoItem v-for="(item, i) in mostViewed" :video="item" :key="i" />
            </div>
          </div>
        </div>
      </template>
    </div>
-    <div
-      v-if="newestAlbums.length > 0 || newestBoxes.length > 0"
-      id="newest"
-      class="pa-left pa-right"
-    >
+    <div v-if="newestAlbums.length > 0 || newestBoxes.length > 0" id="newest" class="pa-left pa-right">
      <template v-if="newestAlbums.length > 0">
        <h3>Newest Music</h3>
        <div id="newestMusic" class="flex-column pa-bottom">
-          <AlbumItem
-            class="ma8"
-            v-for="item in newestAlbums"
-            type="line"
-            :item="item"
-            :key="item._id"
-          />
+          <AlbumItem class="ma8" v-for="item in newestAlbums" type="line" :item="item" :key="item._id" />
        </div>
      </template>
      <template v-if="newestBoxes.length > 0">
        <h3>Newest Videos</h3>
        <div id="newestVideos" class="flex-row">
-          <BoxItem
-            class="ma8 small"
-            v-for="item in newestBoxes"
-            :item="item"
-            :key="item._id"
-          />
+          <BoxItem class="ma8 small" v-for="item in newestBoxes" :item="item" :key="item._id" />
        </div>
      </template>
    </div>
@@ -137,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",
        },
@@ -160,6 +104,14 @@ export default {
      this.$store.dispatch("boxes/loadNewest");
      this.$store.dispatch("tracks/loadMostListened");
      this.$store.dispatch("videos/loadMostViewed");
+      if (this.randomCovers.length == 0) {
+        this.$store.dispatch("albums/loadRandomCovers", 60);
+        this.$store.dispatch("albums/loadAlbums", true).then(() => {
+          this.$store.dispatch("artists/loadArtists", true).then(() => {
+            this.$store.dispatch("boxes/loadBoxes", true);
+          });
+        });
+      }
    },
    loadNextPage() {
      this.scrollPosition = this.$refs.welcome.scrollTop;
@@ -194,6 +146,7 @@ export default {
      serverInfo: "serverInfo",
      mostListened: "tracks/mostListened",
      mostViewed: "videos/mostViewed",
+      randomCovers: ["albums/randomCovers"],
    }),
    historyToggleText() {
      return this.historyAll ? "less..." : "more...";
@@ -221,4 +174,17 @@ export default {
 #history.more {
  max-height: initial;
 }
+
+#banner {
+  position: relative;
+}
+
+#collage {
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.2;
+  position: absolute;
+}
 </style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -3,7 +3,7 @@
    <div id="loginViewer">
      <div id="loginLogin" class="flex-column">
        <img id="loginLogo" src="static/icon_64_flat.svg" />
-        <h1>Web Play</h1>
+        <h1>WebPlay</h1>
        <form id="loginForm" @submit.prevent="login" method="POST">
          <p>
            <input
@@ -96,6 +96,9 @@
        </div>
      </div>
    </div>
+    <div id="loginFooter" class="ma">
+    create your own <a href="https://code.anufrij.de/WebPlay/docker#setup-your-own-webplay-instance" target="webplay">WebPlay</a> instance
+    </div>
  </div>
 </template>

@@ -219,4 +222,18 @@ export default {
  },
  components: { ExpanderControl },
 };
-</script>
+</script>
+
+<style scoped>
+#loginFooter {
+
+  position: absolute;
+  bottom: 0;
+} 
+
+#loginFooter a {
+  display: initial;
+  color: var(--white);
+  font-weight: bold;
+}
+</style>
--- a/src/views/Share.vue
+++ b/src/views/Share.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="share" id="share" class="flex-column">
+  <div ref="share" id="share">
    <AlbumContent ref="album" v-if="type == 'album'" />
    <BoxContent ref="box" v-if="type == 'box'" />
  </div>
@@ -16,6 +16,11 @@ export default {
      type: "",
    };
  },
+  mounted() {
+    if (this.server != "none") {
+      this.loadShare();
+    }
+  },
  methods: {
    loadShare() {
      if (this.$route.query.id) {
@@ -63,6 +68,6 @@ export default {

 <style scoped>
 #share {
-  overflow: auto;
+  flex-direction: column;
 }
 </style>
Author	SHA1	Message	Date
Artem Anufrij	c9d07f5ef7	Merge pull request 'add a diffrent icon, if media is playing' (#39 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #39	2024-09-24 00:06:52 +02:00
Artem Anufrij	78e89d0c02	add a diffrent icon, if media is playing All checks were successful continuous-integration/drone Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-09-24 00:00:30 +02:00
Artem Anufrij	dfa44db91f	Merge pull request 'fix type "scan"' (#38 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #38	2024-02-22 23:37:10 +01:00
Artem Anufrij	f3bfe8b9ed	use flat dialog for box view All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-22 23:32:00 +01:00
Artem Anufrij	7e014b29a2	Merge branch 'main' into dev All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-22 22:08:39 +01:00
Artem Anufrij	d6a1e55e0d	fix type "scan" All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2024-02-22 22:07:05 +01:00
Artem Anufrij	a96c3ccacb	public/config.json aktualisiert All checks were successful continuous-integration/drone/push Build is passing Details	2024-02-21 16:06:47 +01:00
Artem Anufrij	ba175afbf7	public/config.json aktualisiert All checks were successful continuous-integration/drone Build is passing Details	2024-02-21 15:43:46 +01:00
Artem Anufrij	2ed91884df	Merge pull request 'fix round corners' (#36 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #36	2023-11-05 18:38:59 +01:00
Artem Anufrij	37e4856cdc	fix round corners All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-11-05 18:37:01 +01:00
Artem Anufrij	3dd098584c	Merge pull request 'Flat Album dialog' (#34 ) from dev into main All checks were successful continuous-integration/drone Build is passing Details Reviewed-on: #34	2023-11-05 18:15:02 +01:00
Artem Anufrij	9ab6c3bb94	Merge branch 'main' into dev	2023-11-05 18:14:38 +01:00
Artem Anufrij	0f931e218a	use flat dialog for albums	2023-11-05 18:12:41 +01:00
Artem Anufrij	96fe5f0505	use smaller artists cover All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-05 15:50:11 +02:00
Artem Anufrij	367067eff8	Merge pull request 'dev' (#33 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #33	2023-10-05 13:32:55 +02:00
Artem Anufrij	740152500e	load first pages serial instead parallel All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-10-05 13:31:46 +02:00
Artem Anufrij	836c46db32	code style All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-05 13:23:07 +02:00
Artem Anufrij	12d21b0407	remove sub title on home screen All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-05 13:22:50 +02:00
Artem Anufrij	d2c70fc006	use radius for flat dialogs All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-05 12:45:11 +02:00
Artem Anufrij	d724825e06	add "regular" icons All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-05 12:35:05 +02:00
Artem Anufrij	81b649bd59	change header bar. added "flatDialogHeader" property All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-05 10:52:30 +02:00
Artem Anufrij	023649e647	Merge pull request 'main' (#32 ) from main into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #32	2023-10-05 09:29:53 +02:00
Artem Anufrij	761001d686	remove empty class attribute All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-10-04 22:56:11 +02:00
Artem Anufrij	c2659f4c85	hide header in artist dialog Some checks failed continuous-integration/drone/push Build is failing Details	2023-10-04 22:49:06 +02:00
Artem Anufrij	426a024564	redesign artist dialog All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-04 22:33:31 +02:00
Artem Anufrij	6ce9df7fd8	Merge pull request 'Merge pull request 'Merge pull request 'use new cover structure for radios' (#20 ) from dev into main' (#21 ) from main into dev' (#28 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #28	2023-10-04 11:34:00 +02:00
Artem Anufrij	4dd3f939b8	Merge branch 'main' into dev All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-10-04 11:32:49 +02:00
Artem Anufrij	2b79f47d57	push history item after 10%. fix #27 All checks were successful continuous-integration/drone/push Build is passing Details	2023-10-04 11:29:32 +02:00
Artem Anufrij	2abc46216d	adjust banner animation for smartphones All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-28 12:48:11 +02:00
Artem Anufrij	dbefc505dd	adjust viewbox All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-27 22:35:09 +02:00
Artem Anufrij	16bdebf796	Merge pull request 'fancy-banner' (#25 ) from fancy-banner into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #25	2023-09-27 22:14:40 +02:00
Artem Anufrij	a9d705298a	don't reload random covers All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-09-27 22:13:10 +02:00
Artem Anufrij	d0b4590664	ready to use All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-27 22:10:16 +02:00
Artem Anufrij	7ebce51c2d	load random covers All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-27 16:51:44 +02:00
Artem Anufrij	02e13cb642	wip All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-26 23:51:33 +02:00
Artem Anufrij	c7f6695416	show radio title in the palyer bar. fix #23 All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-26 14:57:37 +02:00
Artem Anufrij	ff7bb569fc	Merge pull request 'Merge pull request 'use new cover structure for radios' (#20 ) from dev into main' (#21 ) from main into dev All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details Reviewed-on: #21	2023-09-26 14:52:00 +02:00
Artem Anufrij	9c73510bc9	code style finish fix #24 All checks were successful continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details	2023-09-22 23:29:27 +02:00
Artem Anufrij	9fcadd21ac	save and restore video progress All checks were successful continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details	2023-09-22 22:36:18 +02:00
Artem Anufrij	c1ceae5aa9	Merge pull request 'fix radio cover in histroy item' (#22 ) from dev into main All checks were successful continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details Reviewed-on: #22	2023-09-22 15:00:50 +02:00
Artem Anufrij	4b266c4738	fix radio cover in histroy item All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-09-22 14:59:31 +02:00
Artem Anufrij	e690201947	Merge pull request 'use new cover structure for radios' (#20 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details Reviewed-on: #20	2023-09-22 14:17:39 +02:00
Artem Anufrij	1097c6aa3d	use new object structure for radio covers All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-09-22 14:16:39 +02:00
Artem Anufrij	6b9d73492b	Merge pull request 'main' (#19 ) from main into dev All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #19	2023-09-22 14:13:12 +02:00
Artem Anufrij	82b77876a8	Merge branch 'dev' into main All checks were successful continuous-integration/drone/pr Build is passing Details continuous-integration/drone/push Build is passing Details	2023-09-22 14:10:52 +02:00
Artem Anufrij	5ca85841e7	undo last changes All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-09-22 14:10:13 +02:00
Artem Anufrij	8c651108c4	switch to new cover property Some checks failed continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is failing Details	2023-09-22 14:04:22 +02:00
Artem Anufrij	d44176f86c	change cover structure for radio fix #15 All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-21 11:11:54 +02:00
Artem Anufrij	0a78c4ee19	try to fix behavior on safari Some checks failed continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is failing Details	2023-09-19 18:05:26 +02:00
Artem Anufrij	37919998dd	restore progress after reloading the page (F5) All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-19 17:40:18 +02:00
Artem Anufrij	fa75ba4ad7	Merge pull request 'fix: check if the selected track equal the track in the progress' (#17 ) from save-and-restore-progress-for-audio into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #17	2023-09-19 17:09:03 +02:00
Artem Anufrij	aad14f6cd5	fix: check if the selected track equal the track in the progress All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-09-19 17:07:16 +02:00
Artem Anufrij	44497c4429	Merge pull request 'save-and-restore-progress-for-audio fix #10 ' (#16 ) from save-and-restore-progress-for-audio into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #16	2023-09-19 16:34:56 +02:00
Artem Anufrij	25b9b7b582	disable play button on artist dialog All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-09-19 16:32:06 +02:00
Artem Anufrij	733b8eee91	reset progress for artists if playing is done All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-19 16:20:21 +02:00
Artem Anufrij	724f35dfb1	pregress handling for artists All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-19 15:16:23 +02:00
Artem Anufrij	62091a02a3	reset progress if album is finished All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-19 15:00:48 +02:00
Artem Anufrij	159935d949	added a play button and work on behavior All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-19 12:03:00 +02:00
Artem Anufrij	239b538c4b	added first functions All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-19 01:56:09 +02:00
Artem Anufrij	8248073a4d	prepare the intervals All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-18 17:41:42 +02:00
Artem Anufrij	ec9c9858f6	create and handle interval All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-18 16:54:28 +02:00
Artem Anufrij	1986105e71	small style changes and fix #14 All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-15 21:49:09 +02:00
Artem Anufrij	6b6d3fd3f0	add pause function into payer control All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-14 20:35:58 +02:00
Artem Anufrij	108514aaa4	remove small resolution images from mediasession All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-14 20:00:19 +02:00
Artem Anufrij	8ef939856f	fix the project url All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 21:05:22 +02:00
Artem Anufrij	b094d0da33	link to the project on the login screen fix #12 All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 21:02:24 +02:00
Artem Anufrij	661f8bbd3a	add margin to the radio component All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 20:44:12 +02:00
Artem Anufrij	5fd39722ce	add radio name to the history item All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 20:41:34 +02:00
Artem Anufrij	ad6161c40a	show dummy icon inside media info All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 20:28:35 +02:00
Artem Anufrij	173cf77054	show radio dummy icon in the player bar All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 20:24:31 +02:00
Artem Anufrij	608e16c827	show dummy icon for radios without logo. fix #13 All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 20:10:54 +02:00
Artem Anufrij	7974c8bdca	change apple icons in index.html fix #13 All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 18:38:58 +02:00
Artem Anufrij	89eb0bb02d	new flat icons All checks were successful continuous-integration/drone/push Build is passing Details	2023-09-12 18:35:40 +02:00
Artem Anufrij	6de5c3449e	public/index.html aktualisiert All checks were successful continuous-integration/drone/push Build is passing Details Fix: svg -> png	2023-08-21 14:13:54 +02:00
Artem Anufrij	dacb62a9e8	public/index.html aktualisiert All checks were successful continuous-integration/drone/push Build is passing Details Add icons for apple devices	2023-08-21 14:02:41 +02:00
Artem Anufrij	a04cb74861	src/components/Player.vue aktualisiert All checks were successful continuous-integration/drone Build is passing Details Fix: Safari instand play	2023-08-21 13:47:42 +02:00
Artem Anufrij	42a4072a31	updated packages All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-20 11:03:19 +01:00
Artem Anufrij	19f221556a	* added 'icon' property for popups All checks were successful continuous-integration/drone/push Build is passing Details * show a popup after creating a share link for alum and box * set min width to 320 px for sharing dialog	2023-02-19 20:56:03 +01:00
Artem Anufrij	77e835e33e	smooth scrolling tracks All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-19 19:45:17 +01:00
Artem Anufrij	9e4e7d4697	* FadeOut for PopUp All checks were successful continuous-integration/drone/push Build is passing Details * FadeIn for Dialog fix #6	2023-02-19 19:06:17 +01:00
Artem Anufrij	926947e7c9	added popup control fix #3 All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-19 17:55:11 +01:00
Artem Anufrij	c3d74e782d	share: ui fixes All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-18 00:33:54 +01:00
Artem Anufrij	813b1c09fc	share: added background image All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-18 00:16:08 +01:00
Artem Anufrij	e61b1fac01	Merge pull request 'drone: exclude pr from docker build' (#5 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #5	2023-02-17 22:44:12 +01:00
Artem Anufrij	c89ed9e54e	drone: exclude pr from docker build All checks were successful continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is passing Details	2023-02-17 22:42:45 +01:00
Artem Anufrij	dd9ba6188c	Merge pull request 'added dialog for shared items fix #2 ' (#4 ) from dev into main All checks were successful continuous-integration/drone/push Build is passing Details Reviewed-on: #4	2023-02-17 22:14:54 +01:00
Artem Anufrij	eb98a8ce95	added dialog for shared items fix #2 Some checks failed continuous-integration/drone/push Build is passing Details continuous-integration/drone/pr Build is failing Details	2023-02-17 22:08:04 +01:00