MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-29 00:23:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1497 from chme/web/next

Browse Source 
Update web interface
This commit is contained in:
Christian Meffert 2022-06-16 10:43:08 +02:00 committed by GitHub
commit 2da9bc9b13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
78 changed files with 739 additions and 611 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
htdocs/assets/index.js
View File

File diff suppressed because one or more lines are too long

328
web-src/package-lock.json generated
View File

@ -20,9 +20,9 @@
"reconnectingwebsocket": "^1.0.0", "reconnectingwebsocket": "^1.0.0",
"spotify-web-api-js": "^1.5.2", "spotify-web-api-js": "^1.5.2",
"string-to-color": "^2.2.2", "string-to-color": "^2.2.2",
"vue": "^3.2.36", "vue": "^3.2.37",
"vue-i18n": "^9.1.10", "vue-i18n": "^9.1.10",
"vue-router": "^4.0.15", "vue-router": "^4.0.16",
"vue-scrollto": "^2.20.0", "vue-scrollto": "^2.20.0",
"vue3-click-away": "^1.2.4", "vue3-click-away": "^1.2.4",
"vue3-lazyload": "^0.3.4", "vue3-lazyload": "^0.3.4",
@ -32,12 +32,12 @@
"devDependencies": { "devDependencies": {
"@intlify/vite-plugin-vue-i18n": "^3.4.0", "@intlify/vite-plugin-vue-i18n": "^3.4.0",
"@vitejs/plugin-vue": "^2.3.3", "@vitejs/plugin-vue": "^2.3.3",
"eslint": "^8.16.0", "eslint": "^8.17.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.1.0", "eslint-plugin-vue": "^9.1.1",
"prettier": "2.6.2", "prettier": "2.7.0",
"sass": "^1.52.2", "sass": "^1.52.3",
"vite": "^2.9.9" "vite": "^2.9.12"
} }
}, },
"node_modules/@aacassandra/vue3-progressbar": { "node_modules/@aacassandra/vue3-progressbar": {
@ -50,9 +50,9 @@
} }
}, },
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.18.4", "version": "7.18.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.4.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
"integrity": "sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==", "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==",
"bin": { "bin": {
"parser": "bin/babel-parser.js" "parser": "bin/babel-parser.js"
}, },
@ -311,36 +311,36 @@
} }
}, },
"node_modules/@vue/compiler-core": { "node_modules/@vue/compiler-core": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
"integrity": "sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==", "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.16.4",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"source-map": "^0.6.1" "source-map": "^0.6.1"
} }
}, },
"node_modules/@vue/compiler-dom": { "node_modules/@vue/compiler-dom": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
"integrity": "sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==", "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
"dependencies": { "dependencies": {
"@vue/compiler-core": "3.2.36", "@vue/compiler-core": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"node_modules/@vue/compiler-sfc": { "node_modules/@vue/compiler-sfc": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
"integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==", "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.36", "@vue/compiler-core": "3.2.37",
"@vue/compiler-dom": "3.2.36", "@vue/compiler-dom": "3.2.37",
"@vue/compiler-ssr": "3.2.36", "@vue/compiler-ssr": "3.2.37",
"@vue/reactivity-transform": "3.2.36", "@vue/reactivity-transform": "3.2.37",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.25.7", "magic-string": "^0.25.7",
"postcss": "^8.1.10", "postcss": "^8.1.10",
@ -348,12 +348,12 @@
} }
}, },
"node_modules/@vue/compiler-ssr": { "node_modules/@vue/compiler-ssr": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
"integrity": "sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==", "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.2.36", "@vue/compiler-dom": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"node_modules/@vue/devtools-api": { "node_modules/@vue/devtools-api": {
@ -362,60 +362,60 @@
"integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==" "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
}, },
"node_modules/@vue/reactivity": { "node_modules/@vue/reactivity": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
"integrity": "sha512-c2qvopo0crh9A4GXi2/2kfGYMxsJW4tVILrqRPydVGZHhq0fnzy6qmclWOhBFckEhmyxmpHpdJtIRYGeKcuhnA==", "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
"dependencies": { "dependencies": {
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"node_modules/@vue/reactivity-transform": { "node_modules/@vue/reactivity-transform": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
"integrity": "sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==", "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.36", "@vue/compiler-core": "3.2.37",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.25.7" "magic-string": "^0.25.7"
} }
}, },
"node_modules/@vue/runtime-core": { "node_modules/@vue/runtime-core": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
"integrity": "sha512-PTWBD+Lub+1U3/KhbCExrfxyS14hstLX+cBboxVHaz+kXoiDLNDEYAovPtxeTutbqtClIXtft+wcGdC+FUQ9qQ==", "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
"dependencies": { "dependencies": {
"@vue/reactivity": "3.2.36", "@vue/reactivity": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"node_modules/@vue/runtime-dom": { "node_modules/@vue/runtime-dom": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
"integrity": "sha512-gYPYblm7QXHVuBohqNRRT7Wez0f2Mx2D40rb4fleehrJU9CnkjG0phhcGEZFfGwCmHZRqBCRgbFWE98bPULqkg==", "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
"dependencies": { "dependencies": {
"@vue/runtime-core": "3.2.36", "@vue/runtime-core": "3.2.37",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"csstype": "^2.6.8" "csstype": "^2.6.8"
} }
}, },
"node_modules/@vue/server-renderer": { "node_modules/@vue/server-renderer": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
"integrity": "sha512-uZE0+jfye6yYXWvAQYeHZv+f50sRryvy16uiqzk3jn8hEY8zTjI+rzlmZSGoE915k+W/Ol9XSw6vxOUD8dGkUg==", "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
"dependencies": { "dependencies": {
"@vue/compiler-ssr": "3.2.36", "@vue/compiler-ssr": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "3.2.36" "vue": "3.2.37"
} }
}, },
"node_modules/@vue/shared": { "node_modules/@vue/shared": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
"integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ==" "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
}, },
"node_modules/@vueform/slider": { "node_modules/@vueform/slider": {
"version": "2.0.9", "version": "2.0.9",
@ -1131,9 +1131,9 @@
} }
}, },
"node_modules/eslint": { "node_modules/eslint": {
"version": "8.16.0", "version": "8.17.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.16.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.17.0.tgz",
"integrity": "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==", "integrity": "sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@eslint/eslintrc": "^1.3.0", "@eslint/eslintrc": "^1.3.0",
@ -1195,9 +1195,9 @@
} }
}, },
"node_modules/eslint-plugin-vue": { "node_modules/eslint-plugin-vue": {
"version": "9.1.0", "version": "9.1.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz",
"integrity": "sha512-EPCeInPicQ/YyfOWJDr1yfEeSNoFCMzUus107lZyYi37xejdOolNzS5MXGXp8+9bkoKZMdv/1AcZzQebME6r+g==", "integrity": "sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"eslint-utils": "^3.0.0", "eslint-utils": "^3.0.0",
@ -2083,9 +2083,9 @@
} }
}, },
"node_modules/prettier": { "node_modules/prettier": {
"version": "2.6.2", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.0.tgz",
"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==", "integrity": "sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==",
"dev": true, "dev": true,
"bin": { "bin": {
"prettier": "bin-prettier.js" "prettier": "bin-prettier.js"
@ -2253,9 +2253,9 @@
} }
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.52.2", "version": "1.52.3",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.2.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.3.tgz",
"integrity": "sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ==", "integrity": "sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@ -2461,9 +2461,9 @@
"dev": true "dev": true
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "2.9.9", "version": "2.9.12",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.12.tgz",
"integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==", "integrity": "sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.14.27", "esbuild": "^0.14.27",
@ -2498,15 +2498,15 @@
} }
}, },
"node_modules/vue": { "node_modules/vue": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.36.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
"integrity": "sha512-5yTXmrE6gW8IQgttzHW5bfBiFA6mx35ZXHjGLDmKYzW6MMmYvCwuKybANRepwkMYeXw2v1buGg3/lPICY5YlZw==", "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.2.36", "@vue/compiler-dom": "3.2.37",
"@vue/compiler-sfc": "3.2.36", "@vue/compiler-sfc": "3.2.37",
"@vue/runtime-dom": "3.2.36", "@vue/runtime-dom": "3.2.37",
"@vue/server-renderer": "3.2.36", "@vue/server-renderer": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"node_modules/vue-eslint-parser": { "node_modules/vue-eslint-parser": {
@ -2551,9 +2551,9 @@
} }
}, },
"node_modules/vue-router": { "node_modules/vue-router": {
"version": "4.0.15", "version": "4.0.16",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.15.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.16.tgz",
"integrity": "sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==", "integrity": "sha512-JcO7cb8QJLBWE+DfxGUL3xUDOae/8nhM1KVdnudadTAORbuxIC/xAydC5Zr/VLHUDQi1ppuTF5/rjBGzgzrJNA==",
"dependencies": { "dependencies": {
"@vue/devtools-api": "^6.0.0" "@vue/devtools-api": "^6.0.0"
}, },
@ -2727,9 +2727,9 @@
} }
}, },
"@babel/parser": { "@babel/parser": {
"version": "7.18.4", "version": "7.18.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.4.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
"integrity": "sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow==" "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw=="
}, },
"@eslint/eslintrc": { "@eslint/eslintrc": {
"version": "1.3.0", "version": "1.3.0",
@ -2910,36 +2910,36 @@
"requires": {} "requires": {}
}, },
"@vue/compiler-core": { "@vue/compiler-core": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
"integrity": "sha512-bbyZM5hvBicv0PW3KUfVi+x3ylHnfKG7DOn5wM+f2OztTzTjLEyBb/5yrarIYpmnGitVGbjZqDbODyW4iK8hqw==", "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
"requires": { "requires": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.16.4",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"source-map": "^0.6.1" "source-map": "^0.6.1"
} }
}, },
"@vue/compiler-dom": { "@vue/compiler-dom": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
"integrity": "sha512-tcOTAOiW4s24QLnq+ON6J+GRONXJ+A/mqKCORi0LSlIh8XQlNnlm24y8xIL8la+ZDgkdbjarQ9ZqYSvEja6gVA==", "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
"requires": { "requires": {
"@vue/compiler-core": "3.2.36", "@vue/compiler-core": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"@vue/compiler-sfc": { "@vue/compiler-sfc": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
"integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==", "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
"requires": { "requires": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.36", "@vue/compiler-core": "3.2.37",
"@vue/compiler-dom": "3.2.36", "@vue/compiler-dom": "3.2.37",
"@vue/compiler-ssr": "3.2.36", "@vue/compiler-ssr": "3.2.37",
"@vue/reactivity-transform": "3.2.36", "@vue/reactivity-transform": "3.2.37",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.25.7", "magic-string": "^0.25.7",
"postcss": "^8.1.10", "postcss": "^8.1.10",
@ -2947,12 +2947,12 @@
} }
}, },
"@vue/compiler-ssr": { "@vue/compiler-ssr": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
"integrity": "sha512-+KugInUFRvOxEdLkZwE+W43BqHyhBh0jpYXhmqw1xGq2dmE6J9eZ8UUSOKNhdHtQ/iNLWWeK/wPZkVLUf3YGaw==", "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
"requires": { "requires": {
"@vue/compiler-dom": "3.2.36", "@vue/compiler-dom": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"@vue/devtools-api": { "@vue/devtools-api": {
@ -2961,57 +2961,57 @@
"integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==" "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
}, },
"@vue/reactivity": { "@vue/reactivity": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
"integrity": "sha512-c2qvopo0crh9A4GXi2/2kfGYMxsJW4tVILrqRPydVGZHhq0fnzy6qmclWOhBFckEhmyxmpHpdJtIRYGeKcuhnA==", "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
"requires": { "requires": {
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"@vue/reactivity-transform": { "@vue/reactivity-transform": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
"integrity": "sha512-Jk5o2BhpODC9XTA7o4EL8hSJ4JyrFWErLtClG3NH8wDS7ri9jBDWxI7/549T7JY9uilKsaNM+4pJASLj5dtRwA==", "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
"requires": { "requires": {
"@babel/parser": "^7.16.4", "@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.36", "@vue/compiler-core": "3.2.37",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.25.7" "magic-string": "^0.25.7"
} }
}, },
"@vue/runtime-core": { "@vue/runtime-core": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
"integrity": "sha512-PTWBD+Lub+1U3/KhbCExrfxyS14hstLX+cBboxVHaz+kXoiDLNDEYAovPtxeTutbqtClIXtft+wcGdC+FUQ9qQ==", "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
"requires": { "requires": {
"@vue/reactivity": "3.2.36", "@vue/reactivity": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"@vue/runtime-dom": { "@vue/runtime-dom": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
"integrity": "sha512-gYPYblm7QXHVuBohqNRRT7Wez0f2Mx2D40rb4fleehrJU9CnkjG0phhcGEZFfGwCmHZRqBCRgbFWE98bPULqkg==", "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
"requires": { "requires": {
"@vue/runtime-core": "3.2.36", "@vue/runtime-core": "3.2.37",
"@vue/shared": "3.2.36", "@vue/shared": "3.2.37",
"csstype": "^2.6.8" "csstype": "^2.6.8"
} }
}, },
"@vue/server-renderer": { "@vue/server-renderer": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
"integrity": "sha512-uZE0+jfye6yYXWvAQYeHZv+f50sRryvy16uiqzk3jn8hEY8zTjI+rzlmZSGoE915k+W/Ol9XSw6vxOUD8dGkUg==", "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
"requires": { "requires": {
"@vue/compiler-ssr": "3.2.36", "@vue/compiler-ssr": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"@vue/shared": { "@vue/shared": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
"integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ==" "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
}, },
"@vueform/slider": { "@vueform/slider": {
"version": "git+ssh://git@github.com/chme/slider.git#faff83ed8a77f2cdbcb7252505ef734301efd139", "version": "git+ssh://git@github.com/chme/slider.git#faff83ed8a77f2cdbcb7252505ef734301efd139",
@ -3448,9 +3448,9 @@
"dev": true "dev": true
}, },
"eslint": { "eslint": {
"version": "8.16.0", "version": "8.17.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.16.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.17.0.tgz",
"integrity": "sha512-MBndsoXY/PeVTDJeWsYj7kLZ5hQpJOfMYLsF6LicLHQWbRDG19lK5jOix4DPl8yY4SUFcE3txy86OzFLWT+yoA==", "integrity": "sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@eslint/eslintrc": "^1.3.0", "@eslint/eslintrc": "^1.3.0",
@ -3498,9 +3498,9 @@
"requires": {} "requires": {}
}, },
"eslint-plugin-vue": { "eslint-plugin-vue": {
"version": "9.1.0", "version": "9.1.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.0.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz",
"integrity": "sha512-EPCeInPicQ/YyfOWJDr1yfEeSNoFCMzUus107lZyYi37xejdOolNzS5MXGXp8+9bkoKZMdv/1AcZzQebME6r+g==", "integrity": "sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==",
"dev": true, "dev": true,
"requires": { "requires": {
"eslint-utils": "^3.0.0", "eslint-utils": "^3.0.0",
@ -4156,9 +4156,9 @@
"dev": true "dev": true
}, },
"prettier": { "prettier": {
"version": "2.6.2", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.0.tgz",
"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==", "integrity": "sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==",
"dev": true "dev": true
}, },
"punycode": { "punycode": {
@ -4249,9 +4249,9 @@
} }
}, },
"sass": { "sass": {
"version": "1.52.2", "version": "1.52.3",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.52.2.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.52.3.tgz",
"integrity": "sha512-mfHB2VSeFS7sZlPv9YohB9GB7yWIgQNTGniQwfQ04EoQN0wsQEv7SwpCwy/x48Af+Z3vDeFXz+iuXM3HK/phZQ==", "integrity": "sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@ -4403,9 +4403,9 @@
"dev": true "dev": true
}, },
"vite": { "vite": {
"version": "2.9.9", "version": "2.9.12",
"resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.12.tgz",
"integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==", "integrity": "sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==",
"dev": true, "dev": true,
"requires": { "requires": {
"esbuild": "^0.14.27", "esbuild": "^0.14.27",
@ -4416,15 +4416,15 @@
} }
}, },
"vue": { "vue": {
"version": "3.2.36", "version": "3.2.37",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.36.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
"integrity": "sha512-5yTXmrE6gW8IQgttzHW5bfBiFA6mx35ZXHjGLDmKYzW6MMmYvCwuKybANRepwkMYeXw2v1buGg3/lPICY5YlZw==", "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
"requires": { "requires": {
"@vue/compiler-dom": "3.2.36", "@vue/compiler-dom": "3.2.37",
"@vue/compiler-sfc": "3.2.36", "@vue/compiler-sfc": "3.2.37",
"@vue/runtime-dom": "3.2.36", "@vue/runtime-dom": "3.2.37",
"@vue/server-renderer": "3.2.36", "@vue/server-renderer": "3.2.37",
"@vue/shared": "3.2.36" "@vue/shared": "3.2.37"
} }
}, },
"vue-eslint-parser": { "vue-eslint-parser": {
@ -4454,9 +4454,9 @@
} }
}, },
"vue-router": { "vue-router": {
"version": "4.0.15", "version": "4.0.16",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.15.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.16.tgz",
"integrity": "sha512-xa+pIN9ZqORdIW1MkN2+d9Ui2pCM1b/UMgwYUCZOiFYHAvz/slKKBDha8DLrh5aCG/RibtrpyhKjKOZ85tYyWg==", "integrity": "sha512-JcO7cb8QJLBWE+DfxGUL3xUDOae/8nhM1KVdnudadTAORbuxIC/xAydC5Zr/VLHUDQi1ppuTF5/rjBGzgzrJNA==",
"requires": { "requires": {
"@vue/devtools-api": "^6.0.0" "@vue/devtools-api": "^6.0.0"
} }

14
web-src/package.json
View File

@ -23,9 +23,9 @@
"reconnectingwebsocket": "^1.0.0", "reconnectingwebsocket": "^1.0.0",
"spotify-web-api-js": "^1.5.2", "spotify-web-api-js": "^1.5.2",
"string-to-color": "^2.2.2", "string-to-color": "^2.2.2",
"vue": "^3.2.36", "vue": "^3.2.37",
"vue-i18n": "^9.1.10", "vue-i18n": "^9.1.10",
"vue-router": "^4.0.15", "vue-router": "^4.0.16",
"vue-scrollto": "^2.20.0", "vue-scrollto": "^2.20.0",
"vue3-click-away": "^1.2.4", "vue3-click-away": "^1.2.4",
"vue3-lazyload": "^0.3.4", "vue3-lazyload": "^0.3.4",
@ -35,11 +35,11 @@
"devDependencies": { "devDependencies": {
"@intlify/vite-plugin-vue-i18n": "^3.4.0", "@intlify/vite-plugin-vue-i18n": "^3.4.0",
"@vitejs/plugin-vue": "^2.3.3", "@vitejs/plugin-vue": "^2.3.3",
"eslint": "^8.16.0", "eslint": "^8.17.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.1.0", "eslint-plugin-vue": "^9.1.1",
"prettier": "2.6.2", "prettier": "2.7.0",
"sass": "^1.52.2", "sass": "^1.52.3",
"vite": "^2.9.9" "vite": "^2.9.12"
} }
} }

2
web-src/src/components/DropdownMenu.vue
View File

@ -12,7 +12,7 @@
@click="is_active = !is_active" @click="is_active = !is_active"
> >
<span v-text="option.name" /> <span v-text="option.name" />
<mdicon class="icon" name="chevron-down" size="16" /> <span class="icon"><mdicon name="chevron-down" size="16" /></span>
</button> </button>
</div> </div>
<div id="dropdown-menu" class="dropdown-menu" role="menu"> <div id="dropdown-menu" class="dropdown-menu" role="menu">

4
web-src/src/components/ListAlbums.vue
View File

@ -38,7 +38,9 @@
</div> </div>
<div class="media-right" style="padding-top: 0.7rem"> <div class="media-right" style="padding-top: 0.7rem">
<a @click.prevent.stop="open_dialog(album.item)"> <a @click.prevent.stop="open_dialog(album.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</div> </div>
</div> </div>

4
web-src/src/components/ListArtists.vue
View File

@ -19,7 +19,9 @@
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(artist.item)"> <a @click.prevent.stop="open_dialog(artist.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</div> </div>
</div> </div>

6
web-src/src/components/ListComposers.vue
View File

@ -19,7 +19,9 @@
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(composer.item)"> <a @click.prevent.stop="open_dialog(composer.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</div> </div>
</div> </div>
@ -61,7 +63,7 @@ export default {
open_composer: function (composer) { open_composer: function (composer) {
this.selected_composer = composer this.selected_composer = composer
this.$router.push({ this.$router.push({
name: 'ComposerTracks', name: 'ComposerAlbums',
params: { composer: composer.name } params: { composer: composer.name }
}) })
}, },

12
web-src/src/components/ListDirectories.vue
View File

@ -5,7 +5,9 @@
@click="open_parent_directory()" @click="open_parent_directory()"
> >
<figure class="media-left fd-has-action"> <figure class="media-left fd-has-action">
<mdicon class="icon" name="subdirectory-arrow-left" size="16" /> <span class="icon"
><mdicon name="subdirectory-arrow-left" size="16"
/></span>
</figure> </figure>
<div class="media-content fd-has-action is-clipped"> <div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">..</h1> <h1 class="title is-6">..</h1>
@ -17,7 +19,7 @@
<template v-for="directory in directories" :key="directory.path"> <template v-for="directory in directories" :key="directory.path">
<div class="media" @click="open_directory(directory)"> <div class="media" @click="open_directory(directory)">
<figure class="media-left fd-has-action"> <figure class="media-left fd-has-action">
<mdicon class="icon" name="folder" size="16" /> <span class="icon"><mdicon name="folder" size="16" /></span>
</figure> </figure>
<div class="media-content fd-has-action is-clipped"> <div class="media-content fd-has-action is-clipped">
<h1 <h1
@ -28,7 +30,9 @@
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(directory)"> <a @click.prevent.stop="open_dialog(directory)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</div> </div>
</div> </div>
@ -36,7 +40,7 @@
<teleport to="#app"> <teleport to="#app">
<modal-dialog-directory <modal-dialog-directory
:show="show_details_modal" :show="show_details_modal"
:directory="selected_directory" :directory="selected_directory.path"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>

4
web-src/src/components/ListGenres.vue
View File

@ -15,7 +15,9 @@
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(genre.item)"> <a @click.prevent.stop="open_dialog(genre.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</div> </div>
</div> </div>

8
web-src/src/components/ListItemQueueItem.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div v-if="is_next || !show_only_next_items" class="media"> <div v-if="is_next || !show_only_next_items" class="media">
<div v-if="edit_mode" class="media-left"> <div v-if="edit_mode" class="media-left">
<mdicon <span class="icon has-text-grey fd-is-movable handle"
class="icon has-text-grey fd-is-movable handle" ><mdicon name="drag-horizontal" size="16"
name="drag-horizontal" /></span>
size="16"
/>
</div> </div>
<div class="media-content fd-has-action is-clipped" @click="play"> <div class="media-content fd-has-action is-clipped" @click="play">
<h1 <h1

8
web-src/src/components/ListPlaylists.vue
View File

@ -7,14 +7,18 @@
@click="open_playlist(playlist.item)" @click="open_playlist(playlist.item)"
> >
<figure class="media-left fd-has-action"> <figure class="media-left fd-has-action">
<mdicon class="icon" :name="icon_name(playlist.item)" size="16" /> <span class="icon"
><mdicon :name="icon_name(playlist.item)" size="16"
/></span>
</figure> </figure>
<div class="media-content fd-has-action is-clipped"> <div class="media-content fd-has-action is-clipped">
<h1 class="title is-6" v-text="playlist.item.name" /> <h1 class="title is-6" v-text="playlist.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(playlist.item)"> <a @click.prevent.stop="open_dialog(playlist.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</div> </div>
</div> </div>

6
web-src/src/components/ListTracks.vue
View File

@ -8,7 +8,7 @@
@click="play_track(index, track)" @click="play_track(index, track)"
> >
<figure v-if="show_icon" class="media-left fd-has-action"> <figure v-if="show_icon" class="media-left fd-has-action">
<mdicon class="icon" name="file-outline" size="16" /> <span class="icon"><mdicon name="file-outline" size="16" /></span>
</figure> </figure>
<div class="media-content fd-has-action is-clipped"> <div class="media-content fd-has-action is-clipped">
<h1 <h1
@ -29,7 +29,9 @@
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(track)"> <a @click.prevent.stop="open_dialog(track)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</div> </div>
</div> </div>

6
web-src/src/components/ModalDialog.vue
View File

@ -11,7 +11,7 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="$emit('close')"> <a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" /> <span class="icon"><mdicon name="cancel" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="close_action ? close_action : t('dialog.cancel')" v-text="close_action ? close_action : t('dialog.cancel')"
@ -22,7 +22,7 @@
class="card-footer-item has-background-danger has-text-white has-text-weight-bold" class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
@click="$emit('delete')" @click="$emit('delete')"
> >
<mdicon class="icon" name="delete" size="16" /> <span class="icon"><mdicon name="delete" size="16" /></span>
<span class="is-size-7" v-text="delete_action" /> <span class="is-size-7" v-text="delete_action" />
</a> </a>
<a <a
@ -30,7 +30,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="$emit('ok')" @click="$emit('ok')"
> >
<mdicon class="icon" name="check" size="16" /> <span class="icon"><mdicon name="check" size="16" /></span>
<span class="is-size-7" v-text="ok_action" /> <span class="is-size-7" v-text="ok_action" />
</a> </a>
</footer> </footer>

12
web-src/src/components/ModalDialogAddRss.vue
View File

@ -18,7 +18,9 @@
:placeholder="$t('dialog.add.rss.placeholder')" :placeholder="$t('dialog.add.rss.placeholder')"
:disabled="loading" :disabled="loading"
/> />
<mdicon class="icon is-left" name="rss" size="16" /> <span class="icon is-left"
><mdicon name="rss" size="16"
/></span>
</p> </p>
<p class="help" v-text="$t('dialog.add.rss.help')" /> <p class="help" v-text="$t('dialog.add.rss.help')" />
</div> </div>
@ -26,7 +28,7 @@
</div> </div>
<footer v-if="loading" class="card-footer"> <footer v-if="loading" class="card-footer">
<a class="card-footer-item button is-loading"> <a class="card-footer-item button is-loading">
<mdicon class="icon" name="web" size="16" /> <span class="icon"><mdicon name="web" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.add.rss.processing')" v-text="$t('dialog.add.rss.processing')"
@ -38,14 +40,16 @@
class="card-footer-item has-text-danger" class="card-footer-item has-text-danger"
@click="$emit('close')" @click="$emit('close')"
> >
<mdicon class="icon" name="cancel" size="16" /> <span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" /> <span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a> </a>
<a <a
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream" @click="add_stream"
> >
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.add.rss.add')" /> <span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
</a> </a>
</footer> </footer>

14
web-src/src/components/ModalDialogAddUrlStream.vue
View File

@ -18,14 +18,16 @@
:placeholder="$t('dialog.add.stream.placeholder')" :placeholder="$t('dialog.add.stream.placeholder')"
:disabled="loading" :disabled="loading"
/> />
<mdicon class="icon is-left" name="web" size="16" /> <span class="icon is-left"
><mdicon name="web" size="16"
/></span>
</p> </p>
</div> </div>
</form> </form>
</div> </div>
<footer v-if="loading" class="card-footer"> <footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark"> <a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" /> <span class="icon"><mdicon name="web" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.add.stream.loading')" v-text="$t('dialog.add.stream.loading')"
@ -37,21 +39,23 @@
class="card-footer-item has-text-danger" class="card-footer-item has-text-danger"
@click="$emit('close')" @click="$emit('close')"
> >
<mdicon class="icon" name="cancel" size="16" /> <span class="icon"><mdicon name="cancel" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.add.stream.cancel')" v-text="$t('dialog.add.stream.cancel')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="add_stream"> <a class="card-footer-item has-text-dark" @click="add_stream">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" /> <span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a> </a>
<a <a
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play" @click="play"
> >
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" /> <span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
</a> </a>
</footer> </footer>

14
web-src/src/components/ModalDialogAlbum.vue
View File

@ -71,8 +71,8 @@
class="title is-6" class="title is-6"
v-text=" v-text="
[ [
t('media.kind.' + album.media_kind), $t('media.kind.' + album.media_kind),
t('data.kind.' + album.data_kind) $t('data.kind.' + album.data_kind)
].join(' - ') ].join(' - ')
" "
/> />
@ -88,15 +88,19 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.album.add')" /> <span class="is-size-7" v-text="$t('dialog.album.add')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.album.add-next')" /> <span class="is-size-7" v-text="$t('dialog.album.add-next')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.album.play')" /> <span class="is-size-7" v-text="$t('dialog.album.play')" />
</a> </a>
</footer> </footer>

10
web-src/src/components/ModalDialogArtist.vue
View File

@ -40,15 +40,19 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.artist.add')" /> <span class="is-size-7" v-text="$t('dialog.artist.add')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.artist.add-next')" /> <span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.artist.play')" /> <span class="is-size-7" v-text="$t('dialog.artist.play')" />
</a> </a>
</footer> </footer>

10
web-src/src/components/ModalDialogComposer.vue
View File

@ -39,18 +39,22 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.composer.add')" /> <span class="is-size-7" v-text="$t('dialog.composer.add')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.composer.add-next')" v-text="$t('dialog.composer.add-next')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.composer.play')" /> <span class="is-size-7" v-text="$t('dialog.composer.play')" />
</a> </a>
</footer> </footer>

12
web-src/src/components/ModalDialogDirectory.vue
View File

@ -6,22 +6,26 @@
<div class="modal-content fd-modal-card"> <div class="modal-content fd-modal-card">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4" v-text="directory.path" /> <p class="title is-4" v-text="directory" />
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.directory.add')" /> <span class="is-size-7" v-text="$t('dialog.directory.add')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.directory.add-next')" v-text="$t('dialog.directory.add-next')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.directory.play')" /> <span class="is-size-7" v-text="$t('dialog.directory.play')" />
</a> </a>
</footer> </footer>

10
web-src/src/components/ModalDialogGenre.vue
View File

@ -33,15 +33,19 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.genre.add')" /> <span class="is-size-7" v-text="$t('dialog.genre.add')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.genre.add-next')" /> <span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.genre.play')" /> <span class="is-size-7" v-text="$t('dialog.genre.play')" />
</a> </a>
</footer> </footer>

10
web-src/src/components/ModalDialogPlaylist.vue
View File

@ -33,18 +33,22 @@
</div> </div>
<footer v-if="!playlist.folder" class="card-footer"> <footer v-if="!playlist.folder" class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.playlist.add')" /> <span class="is-size-7" v-text="$t('dialog.playlist.add')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.playlist.add-next')" v-text="$t('dialog.playlist.add-next')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.playlist.play')" /> <span class="is-size-7" v-text="$t('dialog.playlist.play')" />
</a> </a>
</footer> </footer>

12
web-src/src/components/ModalDialogPlaylistSave.vue
View File

@ -18,14 +18,16 @@
placeholder="Playlist name" placeholder="Playlist name"
:disabled="loading" :disabled="loading"
/> />
<mdicon class="icon is-left" name="file-music" size="16" /> <span class="icon is-left"
><mdicon name="file-music" size="16"
/></span>
</p> </p>
</div> </div>
</form> </form>
</div> </div>
<footer v-if="loading" class="card-footer"> <footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark"> <a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" /> <span class="icon"><mdicon name="web" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.playlist.save.saving')" v-text="$t('dialog.playlist.save.saving')"
@ -37,7 +39,7 @@
class="card-footer-item has-text-danger" class="card-footer-item has-text-danger"
@click="$emit('close')" @click="$emit('close')"
> >
<mdicon class="icon" name="cancel" size="16" /> <span class="icon"><mdicon name="cancel" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.playlist.save.cancel')" v-text="$t('dialog.playlist.save.cancel')"
@ -47,7 +49,9 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="save" @click="save"
> >
<mdicon class="icon" name="content-save" size="16" /> <span class="icon"
><mdicon name="content-save" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.playlist.save.save')" v-text="$t('dialog.playlist.save.save')"

4
web-src/src/components/ModalDialogQueueItem.vue
View File

@ -137,14 +137,14 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="remove"> <a class="card-footer-item has-text-dark" @click="remove">
<mdicon class="icon" name="delete" size="16" /> <span class="icon"><mdicon name="delete" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.queue-item.remove')" v-text="$t('dialog.queue-item.remove')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.queue-item.play')" /> <span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
</a> </a>
</footer> </footer>

4
web-src/src/components/ModalDialogRemotePairing.vue
View File

@ -30,7 +30,7 @@
class="card-footer-item has-text-danger" class="card-footer-item has-text-danger"
@click="$emit('close')" @click="$emit('close')"
> >
<mdicon class="icon" name="cancel" size="16" /> <span class="icon"><mdicon name="cancel" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.remote-pairing.cancel')" v-text="$t('dialog.remote-pairing.cancel')"
@ -40,7 +40,7 @@
class="card-footer-item has-background-info has-text-white has-text-weight-bold" class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="kickoff_pairing" @click="kickoff_pairing"
> >
<mdicon class="icon" name="cellphone" size="16" /> <span class="icon"><mdicon name="cellphone" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.remote-pairing.pair')" v-text="$t('dialog.remote-pairing.pair')"

17
web-src/src/components/ModalDialogTrack.vue
View File

@ -92,7 +92,12 @@
<span class="heading" v-text="$t('dialog.track.type')" /> <span class="heading" v-text="$t('dialog.track.type')" />
<span class="title is-6"> <span class="title is-6">
<span <span
v-text="[track.media_kind, track.data_kind].join(' - ')" v-text="
[
$t('media.kind.' + track.media_kind),
$t('data.kind.' + track.data_kind)
].join(' - ')
"
/> />
<span <span
v-if="track.data_kind === 'spotify'" v-if="track.data_kind === 'spotify'"
@ -163,15 +168,19 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.track.add')" /> <span class="is-size-7" v-text="$t('dialog.track.add')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7" v-text="$t('dialog.track.add-next')" /> <span class="is-size-7" v-text="$t('dialog.track.add-next')" />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play_track"> <a class="card-footer-item has-text-dark" @click="play_track">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7" v-text="$t('dialog.track.play')" /> <span class="is-size-7" v-text="$t('dialog.track.play')" />
</a> </a>
</footer> </footer>

51
web-src/src/components/NavbarBottom.vue
View File

@ -12,7 +12,7 @@
<div class="navbar-brand fd-expanded"> <div class="navbar-brand fd-expanded">
<!-- Link to queue --> <!-- Link to queue -->
<navbar-item-link to="/" exact> <navbar-item-link to="/" exact>
<mdicon class="icon" name="playlist-play" size="24" /> <span class="icon"><mdicon name="playlist-play" size="24" /></span>
</navbar-item-link> </navbar-item-link>
<!-- Now playing artist/title (not visible on "now playing" page) --> <!-- Now playing artist/title (not visible on "now playing" page) -->
<router-link <router-link
@ -71,11 +71,11 @@
class="navbar-item fd-margin-left-auto is-hidden-desktop" class="navbar-item fd-margin-left-auto is-hidden-desktop"
@click="show_player_menu = !show_player_menu" @click="show_player_menu = !show_player_menu"
> >
<mdicon <span class="icon"
class="icon" ><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'" :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18" size="18"
/> /></span>
</a> </a>
<!-- Player menu dropup menu (only visible on desktop) --> <!-- Player menu dropup menu (only visible on desktop) -->
<div <div
@ -86,11 +86,11 @@
class="navbar-link is-arrowless" class="navbar-link is-arrowless"
@click="show_player_menu = !show_player_menu" @click="show_player_menu = !show_player_menu"
> >
<mdicon <span class="icon"
class="icon" ><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'" :name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18" size="18"
/> /></span>
</a> </a>
<div <div
class="navbar-dropdown is-right is-boxed" class="navbar-dropdown is-right is-boxed"
@ -105,11 +105,11 @@
class="button is-white is-small" class="button is-white is-small"
@click="toggle_mute_volume" @click="toggle_mute_volume"
> >
<mdicon <span class="icon"
class="icon" ><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'" :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18" size="18"
/> /></span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item fd-expanded">
@ -145,17 +145,15 @@
<a <a
class="button is-white is-small" class="button is-white is-small"
:class="{ 'is-loading': loading }" :class="{ 'is-loading': loading }"
> ><span
<span
class="icon fd-has-action" class="icon fd-has-action"
:class="{ :class="{
'has-text-grey-light': !playing && !loading, 'has-text-grey-light': !playing && !loading,
'is-loading': loading 'is-loading': loading
}" }"
@click="togglePlay" @click="togglePlay"
> ><mdicon name="broadcast" size="18"
<mdicon name="broadcast" size="18" /> /></span>
</span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item fd-expanded">
@ -169,13 +167,12 @@
href="stream.mp3" href="stream.mp3"
style="margin-left: 5px" style="margin-left: 5px"
target="_blank" target="_blank"
> ><span class="icon"
<mdicon ><mdicon
class="icon"
name="open-in-new" name="open-in-new"
size="16" size="16"
style="vertical-align: middle" style="vertical-align: middle"
/> /></span>
</a> </a>
</p> </p>
<Slider <Slider
@ -231,11 +228,11 @@
<div class="level-left fd-expanded"> <div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0"> <div class="level-item" style="flex-grow: 0">
<a class="button is-white is-small" @click="toggle_mute_volume"> <a class="button is-white is-small" @click="toggle_mute_volume">
<mdicon <span class="icon"
class="icon" ><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'" :name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18" size="18"
/> /></span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item fd-expanded">
@ -278,8 +275,7 @@
'is-loading': loading 'is-loading': loading
}" }"
@click="togglePlay" @click="togglePlay"
> ><mdicon name="radio-tower" size="16" />
<mdicon name="broadcast" size="16" />
</span> </span>
</a> </a>
</div> </div>
@ -294,13 +290,12 @@
href="stream.mp3" href="stream.mp3"
style="margin-left: 5px" style="margin-left: 5px"
target="_blank" target="_blank"
> ><span class="icon"
<mdicon ><mdicon
class="icon"
name="open-in-new" name="open-in-new"
size="16" size="16"
style="vertical-align: middle" style="vertical-align: middle"
/> /></span>
</a> </a>
</p> </p>
<Slider <Slider

5
web-src/src/components/NavbarItemOutput.vue
View File

@ -8,9 +8,8 @@
class="icon fd-has-action" class="icon fd-has-action"
:class="{ 'has-text-grey-light': !output.selected }" :class="{ 'has-text-grey-light': !output.selected }"
@click="set_enabled" @click="set_enabled"
> ><mdicon :name="type_class" size="18" :title="output.type"
<mdicon :name="type_class" size="18" :title="output.type" /> /></span>
</span>
</a> </a>
</div> </div>
<div class="level-item fd-expanded"> <div class="level-item fd-expanded">

47
web-src/src/components/NavbarTop.vue
View File

@ -7,25 +7,25 @@
> >
<div class="navbar-brand"> <div class="navbar-brand">
<navbar-item-link v-if="is_visible_playlists" to="/playlists"> <navbar-item-link v-if="is_visible_playlists" to="/playlists">
<mdicon class="icon" name="music-box-multiple" size="16" /> <span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
</navbar-item-link> </navbar-item-link>
<navbar-item-link v-if="is_visible_music" to="/music"> <navbar-item-link v-if="is_visible_music" to="/music">
<mdicon class="icon" name="music" size="16" /> <span class="icon"><mdicon name="music" size="16" /></span>
</navbar-item-link> </navbar-item-link>
<navbar-item-link v-if="is_visible_podcasts" to="/podcasts"> <navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
<mdicon class="icon" name="podcast" size="16" /> <span class="icon"><mdicon name="microphone" size="16" /></span>
</navbar-item-link> </navbar-item-link>
<navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks"> <navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
<mdicon class="icon" name="book-open-variant" size="16" /> <span class="icon"><mdicon name="book-open-variant" size="16" /></span>
</navbar-item-link> </navbar-item-link>
<navbar-item-link v-if="is_visible_radio" to="/radio"> <navbar-item-link v-if="is_visible_radio" to="/radio">
<mdicon class="icon" name="radio-tower" size="16" /> <span class="icon"><mdicon name="radio" size="16" /></span>
</navbar-item-link> </navbar-item-link>
<navbar-item-link v-if="is_visible_files" to="/files"> <navbar-item-link v-if="is_visible_files" to="/files">
<mdicon class="icon" name="folder-open" size="16" /> <span class="icon"><mdicon name="folder-open" size="16" /></span>
</navbar-item-link> </navbar-item-link>
<navbar-item-link v-if="is_visible_search" to="/search"> <navbar-item-link v-if="is_visible_search" to="/search">
<mdicon class="icon" name="magnify" size="16" /> <span class="icon"><mdicon name="magnify" size="16" /></span>
</navbar-item-link> </navbar-item-link>
<div <div
class="navbar-burger" class="navbar-burger"
@ -47,7 +47,9 @@
@click="on_click_outside_settings" @click="on_click_outside_settings"
> >
<a class="navbar-link is-arrowless"> <a class="navbar-link is-arrowless">
<mdicon class="icon is-hidden-touch" name="menu" size="24" /> <span class="icon is-hidden-touch"
><mdicon name="menu" size="24"
/></span>
<span <span
class="is-hidden-desktop has-text-weight-bold" class="is-hidden-desktop has-text-weight-bold"
v-text="$t('navigation.title')" v-text="$t('navigation.title')"
@ -55,11 +57,13 @@
</a> </a>
<div class="navbar-dropdown is-right"> <div class="navbar-dropdown is-right">
<navbar-item-link to="/playlists"> <navbar-item-link to="/playlists">
<mdicon class="icon" name="music-box-multiple" size="16" /> <span class="icon"
><mdicon name="music-box-multiple" size="16"
/></span>
<b v-text="$t('navigation.playlists')" /> <b v-text="$t('navigation.playlists')" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link to="/music" exact> <navbar-item-link to="/music" exact>
<mdicon class="icon" name="music" size="16" /> <span class="icon"><mdicon name="music" size="16" /></span>
<b v-text="$t('navigation.music')" /> <b v-text="$t('navigation.music')" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link to="/music/artists"> <navbar-item-link to="/music/artists">
@ -87,36 +91,39 @@
/> />
</navbar-item-link> </navbar-item-link>
<navbar-item-link to="/podcasts"> <navbar-item-link to="/podcasts">
<mdicon class="icon" name="podcast" size="16" /> <span class="icon"><mdicon name="microphone" size="16" /></span>
<b v-text="$t('navigation.podcasts')" /> <b v-text="$t('navigation.podcasts')" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link to="/audiobooks"> <navbar-item-link to="/audiobooks">
<mdicon class="icon" name="book-open-variant" size="16" /> <span class="icon"
><mdicon name="book-open-variant" size="16"
/></span>
<b v-text="$t('navigation.audiobooks')" /> <b v-text="$t('navigation.audiobooks')" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link to="/radio"> <navbar-item-link to="/radio">
<mdicon class="icon" name="radio-tower" size="16" /> <span class="icon"><mdicon name="radio" size="16" /></span>
<b v-text="$t('navigation.radio')" /> <b v-text="$t('navigation.radio')" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link to="/files"> <navbar-item-link to="/files">
<mdicon class="icon" name="folder-open" size="16" /> <span class="icon"><mdicon name="folder-open" size="16" /></span>
<b v-text="$t('navigation.files')" /> <b v-text="$t('navigation.files')" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link to="/search"> <navbar-item-link to="/search">
<mdicon class="icon" name="magnify" size="16" /> <span class="icon"><mdicon name="magnify" size="16" /></span>
<b v-text="$t('navigation.search')" /> <b v-text="$t('navigation.search')" />
</navbar-item-link> </navbar-item-link>
<hr class="fd-navbar-divider" /> <hr class="fd-navbar-divider" />
<navbar-item-link <navbar-item-link to="/settings/webinterface">{{
to="/settings/webinterface" $t('navigation.settings')
v-text="$t('navigation.settings')" }}</navbar-item-link>
/>
<a <a
class="navbar-item" class="navbar-item"
@click.stop.prevent="open_update_dialog()" @click.stop.prevent="open_update_dialog()"
v-text="$t('navigation.update-library')" v-text="$t('navigation.update-library')"
/> />
<navbar-item-link to="/about" v-text="$t('navigation.about')" /> <navbar-item-link to="/about">{{
$t('navigation.about')
}}</navbar-item-link>
<div <div
class="navbar-item is-hidden-desktop" class="navbar-item is-hidden-desktop"
style="margin-bottom: 2.5rem" style="margin-bottom: 2.5rem"

2
web-src/src/components/PlayerButtonConsume.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode"> <a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode">
<mdicon class="icon" name="fire" :size="icon_size" /> <span class="icon"><mdicon name="fire" :size="icon_size" /></span>
</a> </a>
</template> </template>

2
web-src/src/components/PlayerButtonNext.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a :disabled="disabled" @click="play_next"> <a :disabled="disabled" @click="play_next">
<mdicon class="icon" name="skip-forward" :size="icon_size" /> <span class="icon"><mdicon name="skip-forward" :size="icon_size" /></span>
</a> </a>
</template> </template>

2
web-src/src/components/PlayerButtonPlayPause.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a :disabled="disabled" @click="toggle_play_pause"> <a :disabled="disabled" @click="toggle_play_pause">
<mdicon class="icon" :name="icon_name" :size="icon_size" /> <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a> </a>
</template> </template>

2
web-src/src/components/PlayerButtonPrevious.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a :disabled="disabled" @click="play_previous"> <a :disabled="disabled" @click="play_previous">
<mdicon class="icon" name="skip-backward" :size="icon_size" /> <span class="icon"><mdicon name="skip-backward" :size="icon_size" /></span>
</a> </a>
</template> </template>

2
web-src/src/components/PlayerButtonRepeat.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode"> <a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode">
<mdicon class="icon" :name="icon_name" :size="icon_size" /> <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a> </a>
</template> </template>

2
web-src/src/components/PlayerButtonSeekBack.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a v-if="visible" :disabled="disabled" @click="seek"> <a v-if="visible" :disabled="disabled" @click="seek">
<mdicon class="icon" name="rewind" :size="icon_size" /> <span class="icon"><mdicon name="rewind" :size="icon_size" /></span>
</a> </a>
</template> </template>

2
web-src/src/components/PlayerButtonSeekForward.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a v-if="visible" :disabled="disabled" @click="seek"> <a v-if="visible" :disabled="disabled" @click="seek">
<mdicon class="icon" name="fast-forward" :size="icon_size" /> <span class="icon"><mdicon name="fast-forward" :size="icon_size" /></span>
</a> </a>
</template> </template>

2
web-src/src/components/PlayerButtonShuffle.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode"> <a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode">
<mdicon class="icon" :name="icon_name" :size="icon_size" /> <span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
</a> </a>
</template> </template>

10
web-src/src/components/SpotifyModalDialogAlbum.vue
View File

@ -57,21 +57,25 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.album.add')" v-text="$t('dialog.spotify.album.add')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.album.add-next')" v-text="$t('dialog.spotify.album.add-next')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.album.play')" v-text="$t('dialog.spotify.album.play')"

10
web-src/src/components/SpotifyModalDialogArtist.vue
View File

@ -37,21 +37,25 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.artist.add')" v-text="$t('dialog.spotify.artist.add')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.artist.add-next')" v-text="$t('dialog.spotify.artist.add-next')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.artist.play')" v-text="$t('dialog.spotify.artist.play')"

10
web-src/src/components/SpotifyModalDialogPlaylist.vue
View File

@ -42,21 +42,25 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.playlist.add')" v-text="$t('dialog.spotify.playlist.add')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.playlist.add-next')" v-text="$t('dialog.spotify.playlist.add-next')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.playlist.play')" v-text="$t('dialog.spotify.playlist.play')"

10
web-src/src/components/SpotifyModalDialogTrack.vue
View File

@ -72,21 +72,25 @@
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.track.add')" v-text="$t('dialog.spotify.track.add')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="queue_add_next"> <a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" /> <span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.track.add-next')" v-text="$t('dialog.spotify.track.add-next')"
/> />
</a> </a>
<a class="card-footer-item has-text-dark" @click="play"> <a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span <span
class="is-size-7" class="is-size-7"
v-text="$t('dialog.spotify.track.play')" v-text="$t('dialog.spotify.track.play')"

16
web-src/src/components/TabsAudiobooks.vue
View File

@ -12,12 +12,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon <span class="icon is-small"
class="icon is-small" ><mdicon name="account-music" size="16"
name="account-music" /></span>
size="16" <span v-text="$t('page.audiobooks.tabs.authors')" />
/>
<span v-text="$t('tabs.audiobooks.authors')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -28,8 +26,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="album" size="16" /> <span class="icon is-small"
<span v-text="$t('tabs.audiobooks.audiobooks')" /> ><mdicon name="album" size="16"
/></span>
<span v-text="$t('page.audiobooks.tabs.audiobooks')" />
</a> </a>
</li> </li>
</router-link> </router-link>

44
web-src/src/components/TabsMusic.vue
View File

@ -12,8 +12,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="web" size="16" /> <span class="icon is-small"
<span v-text="$t('page.settings.tabs.music.browse')" /> ><mdicon name="web" size="16"
/></span>
<span v-text="$t('page.browse.tabs.browse')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -24,12 +26,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon <span class="icon is-small"
class="icon is-small" ><mdicon name="account-music" size="16"
name="account-music" /></span>
size="16" <span v-text="$t('page.browse.tabs.artists')" />
/>
<span v-text="$t('page.settings.tabs.music.artists')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -40,8 +40,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="album" size="16" /> <span class="icon is-small"
<span v-text="$t('page.settings.tabs.music.albums')" /> ><mdicon name="album" size="16"
/></span>
<span v-text="$t('page.browse.tabs.albums')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -52,8 +54,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="speaker" size="16" /> <span class="icon is-small"
<span v-text="$t('page.settings.tabs.music.genres')" /> ><mdicon name="speaker" size="16"
/></span>
<span v-text="$t('page.browse.tabs.genres')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -64,12 +68,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon <span class="icon is-small"
class="icon is-small" ><mdicon name="book-open-page-variant" size="16"
name="book-open-page-variant" /></span>
size="16" <span v-text="$t('page.browse.tabs.composers')" />
/>
<span v-text="$t('page.settings.tabs.music.composers')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -81,8 +83,10 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<mdicon class="icon is-small" name="spotify" size="16" /> <span class="icon is-small"
<span v-text="$t('page.settings.tabs.music.spotify')" /> ><mdicon name="spotify" size="16"
/></span>
<span v-text="$t('page.browse.tabs.spotify')" />
</a> </a>
</li> </li>
</router-link> </router-link>

12
web-src/src/components/TabsSearch.vue
View File

@ -11,8 +11,10 @@
}" }"
> >
<a @click="search_library"> <a @click="search_library">
<mdicon class="icon is-small" name="bookshelf" size="16" /> <span class="icon is-small"
<span v-text="$t('tabs.search.library')" /> ><mdicon name="bookshelf" size="16"
/></span>
<span v-text="$t('page.search.tabs.library')" />
</a> </a>
</li> </li>
<li <li
@ -21,8 +23,10 @@
}" }"
> >
<a @click="search_spotify"> <a @click="search_spotify">
<mdicon class="icon is-small" name="spotify" size="16" /> <span class="icon is-small"
<span v-text="$t('tabs.search.spotify')" /> ><mdicon name="spotify" size="16"
/></span>
<span v-text="$t('page.search.tabs.spotify')" />
</a> </a>
</li> </li>
</ul> </ul>

12
web-src/src/components/TabsSettings.vue
View File

@ -12,7 +12,7 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<span v-text="$t('page.settings.tabs.settings.general')" /> <span v-text="$t('page.settings.tabs.general')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -24,9 +24,7 @@
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<span <span
v-text=" v-text="$t('page.settings.tabs.remotes-and-outputs')"
$t('page.settings.tabs.settings.remotes-and-outputs')
"
/> />
</a> </a>
</li> </li>
@ -38,7 +36,7 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<span v-text="$t('page.settings.tabs.settings.artwork')" /> <span v-text="$t('page.settings.tabs.artwork')" />
</a> </a>
</li> </li>
</router-link> </router-link>
@ -49,9 +47,7 @@
> >
<li :class="{ 'is-active': isActive }"> <li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate"> <a @click="navigate" @keypress.enter="navigate">
<span <span v-text="$t('page.settings.tabs.online-services')" />
v-text="$t('page.settings.tabs.settings.online-services')"
/>
</a> </a>
</li> </li>
</router-link> </router-link>

4
web-src/src/i18n.js
View File

@ -9,7 +9,9 @@ import messages from '@intlify/vite-plugin-vue-i18n/messages'
export default createI18n({ export default createI18n({
legacy: false, legacy: false,
globalInjection: true, globalInjection: true,
locale: 'en', locale: navigator.language,
fallbackLocale: 'en', fallbackLocale: 'en',
fallbackWarn: false,
missingWarn: false,
messages messages
}) })

6
web-src/src/icons.js
View File

@ -27,6 +27,7 @@ import {
mdiFolderOpen, mdiFolderOpen,
mdiMagnify, mdiMagnify,
mdiMenu, mdiMenu,
mdiMicrophone,
mdiMusic, mdiMusic,
mdiMusicBoxMultiple, mdiMusicBoxMultiple,
mdiOpenInNew, mdiOpenInNew,
@ -36,7 +37,7 @@ import {
mdiPlay, mdiPlay,
mdiPlaylistPlay, mdiPlaylistPlay,
mdiPlaylistPlus, mdiPlaylistPlus,
mdiPodcast, mdiRadio,
mdiRadioTower, mdiRadioTower,
mdiRefresh, mdiRefresh,
mdiRepeat, mdiRepeat,
@ -87,6 +88,7 @@ export const icons = {
mdiFolderOpen, mdiFolderOpen,
mdiMagnify, mdiMagnify,
mdiMenu, mdiMenu,
mdiMicrophone,
mdiMusic, mdiMusic,
mdiMusicBoxMultiple, mdiMusicBoxMultiple,
mdiOpenInNew, mdiOpenInNew,
@ -96,7 +98,7 @@ export const icons = {
mdiPlay, mdiPlay,
mdiPlaylistPlay, mdiPlaylistPlay,
mdiPlaylistPlus, mdiPlaylistPlus,
mdiPodcast, mdiRadio,
mdiRadioTower, mdiRadioTower,
mdiRefresh, mdiRefresh,
mdiRepeat, mdiRepeat,

4
web-src/src/lib/GroupByList.js
View File

@ -148,7 +148,9 @@ export class GroupByList {
groupIndex groupIndex
) )
*/ */
if (groupIndex >= this.indexList.length) { if (this.isEmpty()) {
return { done: true }
} else if (groupIndex >= this.indexList.length) {
// We reached the end of all groups and items // We reached the end of all groups and items
// //
// This should never happen, as the we already // This should never happen, as the we already

53
web-src/src/locales/en.json
View File

@ -263,7 +263,7 @@
} }
}, },
"artist": { "artist": {
"album-count": "{count} albums {'|'} ", "album-count": "{count} albums",
"shuffle": "Shuffle", "shuffle": "Shuffle",
"track-count": "{count} tracks", "track-count": "{count} tracks",
"sort-by": { "sort-by": {
@ -302,6 +302,10 @@
"artists": { "artists": {
"count": "{count} authors", "count": "{count} authors",
"title": "Authors" "title": "Authors"
},
"tabs": {
"authors": "Authors",
"audiobooks": "Audiobooks"
} }
}, },
"browse": { "browse": {
@ -315,17 +319,20 @@
"recently-played": { "recently-played": {
"title": "Recently played", "title": "Recently played",
"tracks": "tracks" "tracks": "tracks"
},
"tabs": {
"albums": "Albums",
"artists": "Artists",
"browse": "Browse",
"composers": "Composers",
"genres": "Genres",
"spotify": "Spotify"
} }
}, },
"composer": { "composer": {
"album-count": "{count} albums {'|'}",
"shuffle": "Shuffle",
"track-count": "{count} tracks",
"tracks": {
"album-count": "{count} albums", "album-count": "{count} albums",
"track-count": " {'|'} {count} tracks", "shuffle": "Shuffle",
"shuffle": "Shuffle" "track-count": "{count} tracks"
}
}, },
"composers": { "composers": {
"count": "{count} composers", "count": "{count} composers",
@ -336,13 +343,9 @@
"title": "Files" "title": "Files"
}, },
"genre": { "genre": {
"album-count": "{count} albums {'|'} ", "album-count": "{count} albums",
"shuffle": "Shuffle", "shuffle": "Shuffle",
"tracks": { "track-count": "{count} tracks"
"album-count": "{count} albums {'|'} ",
"count": " {count} tracks",
"shuffle": "Shuffle"
}
}, },
"genres": { "genres": {
"count": "{count} genres", "count": "{count} genres",
@ -392,7 +395,7 @@
"artists": "Artists", "artists": "Artists",
"audiobooks": "Audiobooks", "audiobooks": "Audiobooks",
"composers": "Composers", "composers": "Composers",
"help": "Tip: you can search by a smart playlist query language <a href=\"https://github.com/owntone/owntone-server/blob/master/README_SMARTPL.md\" target=\"_blank\">expression</a> if you prefix it with <code>query:</code>.", "help": "Tip: you can search by a smart playlist query language <a href=\"https://owntone.github.io/owntone-server/smart-playlists/\" target=\"_blank\">expression</a> if you prefix it with <code>query:</code>.",
"no-albums": "No albums found", "no-albums": "No albums found",
"no-artists": "No artists found", "no-artists": "No artists found",
"no-audiobooks": "No audiobooks found", "no-audiobooks": "No audiobooks found",
@ -409,7 +412,11 @@
"show-playlists": "Show all {count} playlists", "show-playlists": "Show all {count} playlists",
"show-podcasts": "Show all {count} podcasts", "show-podcasts": "Show all {count} podcasts",
"show-tracks": "Show all {count} tracks", "show-tracks": "Show all {count} tracks",
"tracks": "Tracks" "tracks": "Tracks",
"tabs": {
"library": "Library",
"spotify": "Spotify"
}
}, },
"settings": { "settings": {
"artwork": { "artwork": {
@ -481,25 +488,11 @@
"logout": "Logout" "logout": "Logout"
}, },
"tabs": { "tabs": {
"music": {
"albums": "Albums",
"artists": "Artists",
"browse": "Browse",
"composers": "Composers",
"genres": "Genres",
"spotify": "Spotify"
},
"search": {
"library": "Library",
"spotify": "Spotify"
},
"settings": {
"artwork": "Artwork", "artwork": "Artwork",
"general": "General", "general": "General",
"online-services": "Online Services", "online-services": "Online Services",
"remotes-and-outputs": "Remotes and Outputs" "remotes-and-outputs": "Remotes and Outputs"
} }
}
}, },
"spotify": { "spotify": {
"album": { "album": {

71
web-src/src/locales/fr.json
View File

@ -37,7 +37,7 @@
"play": "Lire", "play": "Lire",
"release-date": "Date de sortie", "release-date": "Date de sortie",
"remove-podcast": "Supprimer le podcast", "remove-podcast": "Supprimer le podcast",
"pistes": "Pistes", "tracks": "Pistes",
"type": "Type", "type": "Type",
"year": "Année" "year": "Année"
}, },
@ -47,7 +47,7 @@
"added-on": "Ajouté le", "added-on": "Ajouté le",
"albums": "Albums", "albums": "Albums",
"play": "Lire", "play": "Lire",
"pistes": "Pistes", "tracks": "Pistes",
"type": "Type" "type": "Type"
}, },
"composer": { "composer": {
@ -56,7 +56,7 @@
"albums": "Albums", "albums": "Albums",
"duration": "Durée", "duration": "Durée",
"play": "Lire", "play": "Lire",
"pistes": "Pistes" "tracks": "Pistes"
}, },
"directory": { "directory": {
"add-next": "Ajouter ensuite", "add-next": "Ajouter ensuite",
@ -69,7 +69,7 @@
"albums": "Albums", "albums": "Albums",
"duration": "Durée", "duration": "Durée",
"play": "Lire", "play": "Lire",
"pistes": "Pistes" "tracks": "Pistes"
}, },
"playlist": { "playlist": {
"add-next": "Ajouter ensuite", "add-next": "Ajouter ensuite",
@ -130,7 +130,7 @@
"owner": "Propriéataire", "owner": "Propriéataire",
"path": "Emplacement", "path": "Emplacement",
"play": "Lire", "play": "Lire",
"pistes": "Pistes" "tracks": "Pistes"
}, },
"track": { "track": {
"add-next": "Ajouter ensuite", "add-next": "Ajouter ensuite",
@ -236,7 +236,7 @@
"compiled-with": "Compilé avec les options {options}.", "compiled-with": "Compilé avec les options {options}.",
"library": "Bibliothèque", "library": "Bibliothèque",
"total-playtime": "Durée totale de lecture", "total-playtime": "Durée totale de lecture",
"pistes": "Pistes", "tracks": "Pistes",
"update": "Actualiser", "update": "Actualiser",
"updated-on": "il y a {time}", "updated-on": "il y a {time}",
"updated": "Mis à jour", "updated": "Mis à jour",
@ -263,7 +263,7 @@
} }
}, },
"artist": { "artist": {
"album-count": "{count} albums {'|'} ", "album-count": "{count} albums",
"shuffle": "Lecture aléatoire", "shuffle": "Lecture aléatoire",
"track-count": "{count} pistes", "track-count": "{count} pistes",
"sort-by": { "sort-by": {
@ -302,30 +302,37 @@
"artists": { "artists": {
"count": "{count} auteurs", "count": "{count} auteurs",
"title": "Auteurs" "title": "Auteurs"
},
"tabs": {
"authors": "Auteurs",
"audiobooks": "Livres audio"
} }
}, },
"browse": { "browse": {
"albums": "albums", "albums": "albums",
"show-more": "Afficher plus", "show-more": "Afficher plus",
"pistes": "pistes", "tracks": "pistes",
"recently-added": { "recently-added": {
"albums": "albums", "albums": "albums",
"title": "Ajouts récents" "title": "Ajouts récents"
}, },
"recently-played": { "recently-played": {
"title": "Lectures récentes", "title": "Lectures récentes",
"pistes": "pistes" "tracks": "pistes"
},
"tabs": {
"albums": "Albums",
"artists": "Artistes",
"browse": "Parcourir",
"composers": "Compositeurs",
"genres": "Genres",
"spotify": "Spotify"
} }
}, },
"composer": { "composer": {
"album-count": "{count} albums {'|'}",
"shuffle": "Lecture aléatoire",
"track-count": "{count} pistes",
"pistes": {
"album-count": "{count} albums", "album-count": "{count} albums",
"track-count": " {'|'} {count} pistes", "shuffle": "Lecture aléatoire",
"shuffle": "Lecture aléatoire" "track-count": "{count} pistes"
}
}, },
"composers": { "composers": {
"count": "{count} compositeurs", "count": "{count} compositeurs",
@ -336,13 +343,9 @@
"title": "Fichiers" "title": "Fichiers"
}, },
"genre": { "genre": {
"album-count": "{count} albums {'|'} ", "album-count": "{count} albums",
"shuffle": "Lecture aléatoire", "shuffle": "Lecture aléatoire",
"pistes": { "track-count": "{count} pistes"
"album-count": "{count} albums {'|'} ",
"count": " {count} pistes",
"shuffle": "Lecture aléatoire"
}
}, },
"genres": { "genres": {
"count": "{count} genres", "count": "{count} genres",
@ -392,7 +395,7 @@
"artists": "Artistes", "artists": "Artistes",
"audiobooks": "Livres audio", "audiobooks": "Livres audio",
"composers": "Compositeurs", "composers": "Compositeurs",
"help": "Astuce : en préfixant votre requête avec <code>query:</code>, vous pouvez effectuer une recherche avec une <a href=\"https://github.com/owntone/owntone-server/blob/master/README_SMARTPL.md\" target=\"_blank\">expression</a> du langage de requête de liste de lecture intelligente.", "help": "Astuce : en préfixant votre requête avec <code>query:</code>, vous pouvez effectuer une recherche avec une <a href=\"https://owntone.github.io/owntone-server/smart-playlists/\" target=\"_blank\">expression</a> du langage de requête de liste de lecture intelligente.",
"no-albums": "Aucun album trouvé", "no-albums": "Aucun album trouvé",
"no-artists": "Aucun artiste trouvé", "no-artists": "Aucun artiste trouvé",
"no-audiobooks": "Aucun livre audio trouvé", "no-audiobooks": "Aucun livre audio trouvé",
@ -409,7 +412,11 @@
"show-playlists": "Afficher les {count} listes de lecture", "show-playlists": "Afficher les {count} listes de lecture",
"show-podcasts": "Afficher les {count} podcasts", "show-podcasts": "Afficher les {count} podcasts",
"show-tracks": "Afficher les {count} pistes", "show-tracks": "Afficher les {count} pistes",
"pistes": "Pistes" "tracks": "Pistes",
"tabs": {
"library": "Bibliothèque",
"spotify": "Spotify"
}
}, },
"settings": { "settings": {
"artwork": { "artwork": {
@ -481,25 +488,11 @@
"logout": "Se déconnecter" "logout": "Se déconnecter"
}, },
"tabs": { "tabs": {
"music": {
"albums": "Albums",
"artists": "Artistes",
"browse": "Parcourir",
"composers": "Compositeurs",
"genres": "Genres",
"spotify": "Spotify"
},
"search": {
"library": "Library",
"spotify": "Spotify"
},
"settings": {
"artwork": "Illustrations", "artwork": "Illustrations",
"general": "Général", "general": "Général",
"online-services": "Services en ligne", "online-services": "Services en ligne",
"remotes-and-outputs": "Télécommandes et sorties" "remotes-and-outputs": "Télécommandes et sorties"
} }
}
}, },
"spotify": { "spotify": {
"album": { "album": {
@ -531,7 +524,7 @@
"show-all-artists": "Afficher les {count} artistes", "show-all-artists": "Afficher les {count} artistes",
"show-all-playlists": "Afficher les {count} listes de lecture", "show-all-playlists": "Afficher les {count} listes de lecture",
"show-all-tracks": "Afficher les {count} pistes", "show-all-tracks": "Afficher les {count} pistes",
"pistes": "Pistes" "tracks": "Pistes"
} }
} }
}, },

35
web-src/src/pages/PageAbout.vue
View File

@ -41,28 +41,40 @@
<table class="table"> <table class="table">
<tbody> <tbody>
<tr> <tr>
<th class="has-text-left" v-text="$t('page.about.artists')" /> <th
class="has-text-left"
v-text="$t('page.about.artists')"
/>
<td <td
class="has-text-right" class="has-text-right"
v-text="$filters.number(library.artists)" v-text="$filters.number(library.artists)"
/> />
</tr> </tr>
<tr> <tr>
<th class="has-text-left" v-text="$t('page.about.albums')" /> <th
class="has-text-left"
v-text="$t('page.about.albums')"
/>
<td <td
class="has-text-right" class="has-text-right"
v-text="$filters.number(library.albums)" v-text="$filters.number(library.albums)"
/> />
</tr> </tr>
<tr> <tr>
<th class="has-text-left" v-text="$t('page.about.tracks')" /> <th
class="has-text-left"
v-text="$t('page.about.tracks')"
/>
<td <td
class="has-text-right" class="has-text-right"
v-text="$filters.number(library.songs)" v-text="$filters.number(library.songs)"
/> />
</tr> </tr>
<tr> <tr>
<th class="has-text-left" v-text="$t('page.about.total-playtime')" /> <th
class="has-text-left"
v-text="$t('page.about.total-playtime')"
/>
<td <td
class="has-text-right" class="has-text-right"
v-text=" v-text="
@ -71,7 +83,10 @@
/> />
</tr> </tr>
<tr> <tr>
<th class="has-text-left" v-text="$t('page.about.updated')" /> <th
class="has-text-left"
v-text="$t('page.about.updated')"
/>
<td class="has-text-right"> <td class="has-text-right">
<span <span
v-text=" v-text="
@ -87,7 +102,10 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<th class="has-text-left" v-text="$t('page.about.uptime')" /> <th
class="has-text-left"
v-text="$t('page.about.uptime')"
/>
<td class="has-text-right"> <td class="has-text-right">
<span <span
v-text="$filters.timeFromNow(library.started_at, true)" v-text="$filters.timeFromNow(library.started_at, true)"
@ -110,7 +128,10 @@
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-four-fifths"> <div class="column is-four-fifths">
<div class="content has-text-centered-mobile"> <div class="content has-text-centered-mobile">
<p class="is-size-7" v-text="$t('page.about.version', { version: config.version })" /> <p
class="is-size-7"
v-text="$t('page.about.version', { version: config.version })"
/>
<p <p
class="is-size-7" class="is-size-7"
v-text=" v-text="

4
web-src/src/pages/PageAlbum.vue
View File

@ -7,14 +7,14 @@
</h2> </h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top"> <div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.album.shuffle')" /> <span v-text="$t('page.album.shuffle')" />
</a> </a>
<a <a
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_album_details_modal = true" @click="show_album_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
</div> </div>
</template> </template>

7
web-src/src/pages/PageArtist.vue
View File

@ -24,10 +24,10 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true" @click="show_artist_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.artist.shuffle')" /> <span v-text="$t('page.artist.shuffle')" />
</a> </a>
</div> </div>
@ -37,6 +37,7 @@
<span <span
v-text="$t('page.artist.album-count', { count: artist.album_count })" v-text="$t('page.artist.album-count', { count: artist.album_count })"
/> />
<span>&nbsp;|&nbsp;</span>
<a <a
class="has-text-link" class="has-text-link"
@click="open_tracks" @click="open_tracks"
@ -127,7 +128,7 @@ export default {
computed: { computed: {
albums() { albums() {
const groupBy = this.groupby_options.find( const groupBy = this.groupby_options.find(
(o) => o.name === this.selected_groupby_option_id (o) => o.id === this.selected_groupby_option_id
) )
this.albums_list.group(groupBy.options) this.albums_list.group(groupBy.options)

17
web-src/src/pages/PageArtistTracks.vue
View File

@ -13,10 +13,12 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true" @click="show_artist_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.artist.shuffle')" /> <span v-text="$t('page.artist.shuffle')" />
</a> </a>
</div> </div>
@ -27,10 +29,13 @@
class="has-text-link" class="has-text-link"
@click="open_artist" @click="open_artist"
v-text=" v-text="
$t('page.artist.track-count', { $t('page.artist.album-count', { count: artist.album_count })
albums: artist.album_count, "
tracks: artist.track_count />
}) <span>&nbsp;|&nbsp;</span>
<span
v-text="
$t('page.artist.track-count', { count: artist.track_count })
" "
/> />
</p> </p>

4
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -7,14 +7,14 @@
</h2> </h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top"> <div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span v-text="$t('page.audiobooks.album.play')" /> <span v-text="$t('page.audiobooks.album.play')" />
</a> </a>
<a <a
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_album_details_modal = true" @click="show_album_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
</div> </div>
</template> </template>

4
web-src/src/pages/PageAudiobooksArtist.vue
View File

@ -9,10 +9,10 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true" @click="show_artist_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span v-text="$t('page.audiobooks.artist.shuffle')" /> <span v-text="$t('page.audiobooks.artist.shuffle')" />
</a> </a>
</div> </div>

2
web-src/src/pages/PageAudiobooksArtists.vue
View File

@ -9,7 +9,7 @@
<p class="title is-4" v-text="$t('page.audiobooks.artists.title')" /> <p class="title is-4" v-text="$t('page.audiobooks.artists.title')" />
<p <p
class="heading" class="heading"
v-text="$t('page.audiobooks.artists.count', { count: tists.count })" v-text="$t('page.audiobooks.artists.count', { count: artists.count })"
/> />
</template> </template>
<template #heading-right /> <template #heading-right />

4
web-src/src/pages/PageBrowseRecentlyPlayed.vue
View File

@ -5,9 +5,9 @@
<template #heading-left> <template #heading-left>
<p <p
class="title is-4" class="title is-4"
v-text="$t('page.browse.recently.played.title')" v-text="$t('page.browse.recently-played.title')"
/> />
<p class="heading" v-text="$t('page.browse.recently.played.tracks')" /> <p class="heading" v-text="$t('page.browse.recently-played.tracks')" />
</template> </template>
<template #content> <template #content>
<list-tracks :tracks="recently_played.items" /> <list-tracks :tracks="recently_played.items" />

7
web-src/src/pages/PageComposer.vue
View File

@ -10,10 +10,12 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_composer_details_modal = true" @click="show_composer_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.composer.shuffle')" /> <span v-text="$t('page.composer.shuffle')" />
</a> </a>
</div> </div>
@ -25,6 +27,7 @@
$t('page.composer.album-count', { count: composer.album_count }) $t('page.composer.album-count', { count: composer.album_count })
" "
/> />
<span>&nbsp;|&nbsp;</span>
<a <a
class="has-text-link" class="has-text-link"
@click="open_tracks" @click="open_tracks"

11
web-src/src/pages/PageComposerTracks.vue
View File

@ -10,11 +10,13 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_composer_details_modal = true" @click="show_composer_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.composer.tracks.shuffle')" /> <span v-text="$t('page.composer.shuffle')" />
</a> </a>
</div> </div>
</template> </template>
@ -24,11 +26,12 @@
class="has-text-link" class="has-text-link"
@click="open_albums" @click="open_albums"
v-text=" v-text="
$t('page.composer.tracks.album-count', { $t('page.composer.album-count', {
count: composer.album_count count: composer.album_count
}) })
" "
/> />
<span>&nbsp;|&nbsp;</span>
<span <span
v-text=" v-text="
$t('page.composer.track-count', { count: composer.track_count }) $t('page.composer.track-count', { count: composer.track_count })

26
web-src/src/pages/PageFiles.vue
View File

@ -9,28 +9,30 @@
<div class="buttons is-centered"> <div class="buttons is-centered">
<a <a
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="open_directory_dialog({ path: current_directory })" @click="show_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span v-text="$t('page.files.play')" /> <span v-text="$t('page.files.play')" />
</a> </a>
</div> </div>
</template> </template>
<template #content> <template #content>
<list-directories :directories="files.directories" /> <list-directories :directories="files.directories" />
<list-playlists :playlists="files.playlists.items" /> <list-playlists :playlists="playlists_list" />
<list-tracks <list-tracks
:tracks="files.tracks.items" :tracks="files.tracks.items"
:expression="play_expression" :expression="play_expression"
:show_icon="true" :show_icon="true"
/> />
<modal-dialog-directory <modal-dialog-directory
:show="show_directory_details_modal" :show="show_details_modal"
:directory="selected_directory" :directory="current_directory"
@close="show_directory_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>
</content-with-heading> </content-with-heading>
@ -42,7 +44,9 @@ import ContentWithHeading from '@/templates/ContentWithHeading.vue'
import ListDirectories from '@/components/ListDirectories.vue' import ListDirectories from '@/components/ListDirectories.vue'
import ListPlaylists from '@/components/ListPlaylists.vue' import ListPlaylists from '@/components/ListPlaylists.vue'
import ListTracks from '@/components/ListTracks.vue' import ListTracks from '@/components/ListTracks.vue'
import ModalDialogDirectory from '@/components/ModalDialogDirectory.vue'
import webapi from '@/webapi' import webapi from '@/webapi'
import { GroupByList } from '@/lib/GroupByList'
const dataObject = { const dataObject = {
load: function (to) { load: function (to) {
@ -55,6 +59,7 @@ const dataObject = {
set: function (vm, response) { set: function (vm, response) {
if (response) { if (response) {
vm.files = response.data vm.files = response.data
vm.playlists_list = new GroupByList(response.data.playlists)
} else { } else {
vm.files = { vm.files = {
directories: vm.$store.state.config.directories.map((dir) => { directories: vm.$store.state.config.directories.map((dir) => {
@ -73,7 +78,8 @@ export default {
ContentWithHeading, ContentWithHeading,
ListDirectories, ListDirectories,
ListPlaylists, ListPlaylists,
ListTracks ListTracks,
ModalDialogDirectory
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
@ -95,7 +101,9 @@ export default {
directories: [], directories: [],
tracks: { items: [] }, tracks: { items: [] },
playlists: { items: [] } playlists: { items: [] }
} },
playlists_list: new GroupByList(),
show_details_modal: false
} }
}, },

7
web-src/src/pages/PageGenre.vue
View File

@ -13,10 +13,12 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_genre_details_modal = true" @click="show_genre_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.genre.shuffle')" /> <span v-text="$t('page.genre.shuffle')" />
</a> </a>
</div> </div>
@ -26,6 +28,7 @@
<span <span
v-text="$t('page.genre.album-count', { count: genre.album_count })" v-text="$t('page.genre.album-count', { count: genre.album_count })"
/> />
<span>&nbsp;|&nbsp;</span>
<a <a
class="has-text-link" class="has-text-link"
@click="open_tracks" @click="open_tracks"

15
web-src/src/pages/PageGenreTracks.vue
View File

@ -13,11 +13,13 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_genre_details_modal = true" @click="show_genre_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"
><mdicon name="dots-horizontal" size="16"
/></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.genre.tracks.shuffle')" /> <span v-text="$t('page.genre.shuffle')" />
</a> </a>
</div> </div>
</template> </template>
@ -26,12 +28,11 @@
<a <a
class="has-text-link" class="has-text-link"
@click="open_genre" @click="open_genre"
v-text=" v-text="$t('page.genre.album-count', { count: genre.album_count })"
$t('page.genre.tracks.album-count', { count: genre.album_count })
"
/> />
<span>&nbsp;|&nbsp;</span>
<span <span
v-text="$t('page.genre.tracks.count', { count: genre.track_count })" v-text="$t('page.genre.track-count', { count: genre.track_count })"
/> />
</p> </p>
<list-tracks :tracks="tracks.items" :expression="expression" /> <list-tracks :tracks="tracks.items" :expression="expression" />

4
web-src/src/pages/PagePlaylist.vue
View File

@ -9,10 +9,10 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true" @click="show_playlist_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.playlist.shuffle')" /> <span v-text="$t('page.playlist.shuffle')" />
</a> </a>
</div> </div>

4
web-src/src/pages/PagePodcast.vue
View File

@ -9,10 +9,10 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_album_details_modal = true" @click="show_album_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" /> <span class="icon"><mdicon name="play" size="16" /></span>
<span v-text="$t('page.podcast.play')" /> <span v-text="$t('page.podcast.play')" />
</a> </a>
</div> </div>

6
web-src/src/pages/PagePodcasts.vue
View File

@ -7,7 +7,7 @@
<template #heading-right> <template #heading-right>
<div class="buttons is-centered"> <div class="buttons is-centered">
<a class="button is-small" @click="mark_all_played"> <a class="button is-small" @click="mark_all_played">
<mdicon class="icon" name="pencil" size="16" /> <span class="icon"><mdicon name="pencil" size="16" /></span>
<span v-text="$t('page.podcasts.mark-all-played')" /> <span v-text="$t('page.podcasts.mark-all-played')" />
</a> </a>
</div> </div>
@ -31,11 +31,11 @@
<template #heading-right> <template #heading-right>
<div class="buttons is-centered"> <div class="buttons is-centered">
<a v-if="rss.tracks > 0" class="button is-small" @click="update_rss"> <a v-if="rss.tracks > 0" class="button is-small" @click="update_rss">
<mdicon class="icon" name="refresh" size="16" /> <span class="icon"><mdicon name="refresh" size="16" /></span>
<span v-text="$t('page.podcasts.update')" /> <span v-text="$t('page.podcasts.update')" />
</a> </a>
<a class="button is-small" @click="open_add_podcast_dialog"> <a class="button is-small" @click="open_add_podcast_dialog">
<mdicon class="icon" name="rss" size="16" /> <span class="icon"><mdicon name="rss" size="16" /></span>
<span v-text="$t('page.podcasts.add')" /> <span v-text="$t('page.podcasts.add')" />
</a> </a>
</div> </div>

24
web-src/src/pages/PageQueue.vue
View File

@ -14,11 +14,13 @@
:class="{ 'is-info': show_only_next_items }" :class="{ 'is-info': show_only_next_items }"
@click="update_show_next_items" @click="update_show_next_items"
> >
<mdicon class="icon" name="arrow-collapse-down" size="16" /> <span class="icon"
><mdicon name="arrow-collapse-down" size="16"
/></span>
<span v-text="$t('page.queue.hide-previous')" /> <span v-text="$t('page.queue.hide-previous')" />
</a> </a>
<a class="button is-small" @click="open_add_stream_dialog"> <a class="button is-small" @click="open_add_stream_dialog">
<mdicon class="icon" name="web" size="16" /> <span class="icon"><mdicon name="web" size="16" /></span>
<span v-text="$t('page.queue.add-stream')" /> <span v-text="$t('page.queue.add-stream')" />
</a> </a>
<a <a
@ -26,11 +28,11 @@
:class="{ 'is-info': edit_mode }" :class="{ 'is-info': edit_mode }"
@click="edit_mode = !edit_mode" @click="edit_mode = !edit_mode"
> >
<mdicon class="icon" name="pencil" size="16" /> <span class="icon"><mdicon name="pencil" size="16" /></span>
<span v-text="$t('page.queue.edit')" /> <span v-text="$t('page.queue.edit')" />
</a> </a>
<a class="button is-small" @click="queue_clear"> <a class="button is-small" @click="queue_clear">
<mdicon class="icon" name="delete-empty" size="16" /> <span class="icon"><mdicon name="delete-empty" size="16" /></span>
<span v-text="$t('page.queue.clear')" /> <span v-text="$t('page.queue.clear')" />
</a> </a>
<a <a
@ -39,7 +41,7 @@
:disabled="queue_items.length === 0" :disabled="queue_items.length === 0"
@click="save_dialog" @click="save_dialog"
> >
<mdicon class="icon" name="content-save" size="16" /> <span class="icon"><mdicon name="content-save" size="16" /></span>
<span v-text="$t('page.queue.save')" /> <span v-text="$t('page.queue.save')" />
</a> </a>
</div> </div>
@ -61,17 +63,17 @@
> >
<template #actions> <template #actions>
<a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)"> <a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
<a <a
v-if="element.id !== state.item_id && edit_mode" v-if="element.id !== state.item_id && edit_mode"
@click.prevent.stop="remove(element)" @click.prevent.stop="remove(element)"
> >
<mdicon class="icon has-text-grey" name="delete" size="18" /> <span class="icon has-text-grey"
><mdicon name="delete" size="18"
/></span>
</a> </a>
</template> </template>
</list-item-queue-item> </list-item-queue-item>

30
web-src/src/pages/PageSearch.vue
View File

@ -16,7 +16,9 @@
placeholder="Search" placeholder="Search"
autocomplete="off" autocomplete="off"
/> />
<mdicon class="icon is-left" name="magnify" size="16" /> <span class="icon is-left"
><mdicon name="magnify" size="16"
/></span>
</p> </p>
<p class="help has-text-centered"> <p class="help has-text-centered">
<span v-html="$t('page.search.help')" /> <span v-html="$t('page.search.help')" />
@ -52,8 +54,8 @@
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
@click="open_search_tracks" @click="open_search_tracks"
v-text=" v-text="
$t('page.search.show.tracks', { $t('page.search.show-tracks', {
count: tracks.total.toLocaleString() count: tracks.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -81,8 +83,8 @@
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
@click="open_search_artists" @click="open_search_artists"
v-text=" v-text="
$t('page.search.show.artists', { $t('page.search.show-artists', {
count: artists.total.toLocaleString() count: artists.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -111,7 +113,7 @@
@click="open_search_albums" @click="open_search_albums"
v-text=" v-text="
$t('page.search.show-albums', { $t('page.search.show-albums', {
count: albums.total.toLocaleString() count: albums.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -139,8 +141,8 @@
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
@click="open_search_composers" @click="open_search_composers"
v-text=" v-text="
$t('page.search.show.composers', { $t('page.search.show-composers', {
count: composers.total.toLocaleString() count: composers.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -168,8 +170,8 @@
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
@click="open_search_playlists" @click="open_search_playlists"
v-text=" v-text="
$t('page.search.show.playlists', { $t('page.search.show-playlists', {
count: playlists.total.toLocaleString() count: playlists.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -197,8 +199,8 @@
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
@click="open_search_podcasts" @click="open_search_podcasts"
v-text=" v-text="
$t('page.search.show.podcasts', { $t('page.search.show-podcasts', {
count: podcasts.total.toLocaleString() count: podcasts.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -227,8 +229,8 @@
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
@click="open_search_audiobooks" @click="open_search_audiobooks"
v-text=" v-text="
$t('page.search.show.audiobooks', { $t('page.search.show-audiobooks', {
count: audiobooks.total.toLocaleString() count: audiobooks.total.toLocaleString($i18n.locale)
}) })
" "
/> />

6
web-src/src/pages/SettingsPageArtwork.vue
View File

@ -22,7 +22,7 @@
<template #label> <template #label>
<span v-text="$t('page.settings.artwork.spotify')" /> <span v-text="$t('page.settings.artwork.spotify')" />
<a href="https://www.spotify.com/" target="_blank"> <a href="https://www.spotify.com/" target="_blank">
<mdicon class="icon" name="open-in-new" size="16" /> <span class="icon"><mdicon name="open-in-new" size="16" /></span>
</a> </a>
</template> </template>
</settings-checkbox> </settings-checkbox>
@ -33,7 +33,7 @@
<template #label> <template #label>
<span v-text="$t('page.settings.artwork.discogs')" /> <span v-text="$t('page.settings.artwork.discogs')" />
<a href="https://www.discogs.com/" target="_blank"> <a href="https://www.discogs.com/" target="_blank">
<mdicon class="icon" name="open-in-new" size="16" /> <span class="icon"><mdicon name="open-in-new" size="16" /></span>
</a> </a>
</template> </template>
</settings-checkbox> </settings-checkbox>
@ -44,7 +44,7 @@
<template #label> <template #label>
<span v-text="$t('page.settings.artwork.coverartarchive')" /> <span v-text="$t('page.settings.artwork.coverartarchive')" />
<a href="https://coverartarchive.org/" target="_blank"> <a href="https://coverartarchive.org/" target="_blank">
<mdicon class="icon" name="open-in-new" size="16" /> <span class="icon"><mdicon name="open-in-new" size="16" /></span>
</a> </a>
</template> </template>
</settings-checkbox> </settings-checkbox>

4
web-src/src/pages/SettingsPageOnlineServices.vue
View File

@ -14,7 +14,7 @@
</div> </div>
<div v-if="spotify.spotify_installed"> <div v-if="spotify.spotify_installed">
<div class="notification is-size-7"> <div class="notification is-size-7">
<b v-text="$t('page.settings.services.spotify.requirements')" /> <span v-text="$t('page.settings.services.spotify.requirements')" />
<span <span
v-if="use_libspotity" v-if="use_libspotity"
v-text="$t('page.settings.services.spotify.help')" v-text="$t('page.settings.services.spotify.help')"
@ -49,7 +49,7 @@
</div> </div>
<p class="help"> <p class="help">
<span v-text="$t('page.settings.services.spotify.scopes')" /> <span v-text="$t('page.settings.services.spotify.scopes')" />
<code v-text="spotify_required_scope.join()" /> <code v-text="spotify_required_scope.join(', ')" />
</p> </p>
<div <div
v-if="spotify.webapi_token_valid" v-if="spotify.webapi_token_valid"

11
web-src/src/pages/SettingsPageWebinterface.vue
View File

@ -194,7 +194,16 @@ export default {
}, },
locale: { locale: {
get() { get() {
return this.$i18n.locale let languages = this.$i18n.availableLocales
let locale = languages.find(lang => lang === this.$i18n.locale)
let partial = this.$i18n.locale.split('-')[0]
if (!locale) {
locale = languages.find(lang => lang === partial)
}
if (!locale) {
locale = languages.forEach(lang => lang.split('-')[0] === partial)
}
return locale
}, },
set(locale) { set(locale) {
this.$i18n.locale = locale this.$i18n.locale = locale

8
web-src/src/pages/SpotifyPageAlbum.vue
View File

@ -11,14 +11,14 @@
</h2> </h2>
<div class="buttons fd-is-centered-mobile fd-has-margin-top"> <div class="buttons fd-is-centered-mobile fd-has-margin-top">
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.spotify.album.shuffle')" /> <span v-text="$t('page.spotify.album.shuffle')" />
</a> </a>
<a <a
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_album_details_modal = true" @click="show_album_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
</div> </div>
</template> </template>
@ -49,7 +49,9 @@
> >
<template #actions> <template #actions>
<a @click.prevent.stop="open_track_dialog(track)"> <a @click.prevent.stop="open_track_dialog(track)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</template> </template>
</spotify-list-item-track> </spotify-list-item-track>

8
web-src/src/pages/SpotifyPageArtist.vue
View File

@ -9,10 +9,10 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_artist_details_modal = true" @click="show_artist_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.spotify.artist.shuffle')" /> <span v-text="$t('page.spotify.artist.shuffle')" />
</a> </a>
</div> </div>
@ -41,7 +41,9 @@
</template> </template>
<template #actions> <template #actions>
<a @click.prevent.stop="open_dialog(album)"> <a @click.prevent.stop="open_dialog(album)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</template> </template>
</spotify-list-item-album> </spotify-list-item-album>

24
web-src/src/pages/SpotifyPageBrowse.vue
View File

@ -26,11 +26,9 @@
</template> </template>
<template #actions> <template #actions>
<a @click.prevent.stop="open_album_dialog(album)"> <a @click.prevent.stop="open_album_dialog(album)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-album> </spotify-list-item-album>
@ -46,8 +44,8 @@
<router-link <router-link
to="/music/spotify/new-releases" to="/music/spotify/new-releases"
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
v-text="$t('page.spotify.browse.show-more')" >{{ $t('page.spotify.browse.show-more') }}</router-link
/> >
</p> </p>
</nav> </nav>
</template> </template>
@ -68,11 +66,9 @@
> >
<template #actions> <template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)"> <a @click.prevent.stop="open_playlist_dialog(playlist)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-playlist> </spotify-list-item-playlist>
@ -88,8 +84,8 @@
<router-link <router-link
to="/music/spotify/featured-playlists" to="/music/spotify/featured-playlists"
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
v-text="$t('page.spotify.browse.show-more')" >{{ $t('page.spotify.browse.show-more') }}</router-link
/> >
</p> </p>
</nav> </nav>
</template> </template>

8
web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
View File

@ -13,11 +13,9 @@
> >
<template #actions> <template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)"> <a @click.prevent.stop="open_playlist_dialog(playlist)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-playlist> </spotify-list-item-playlist>

8
web-src/src/pages/SpotifyPageBrowseNewReleases.vue
View File

@ -25,11 +25,9 @@
</template> </template>
<template #actions> <template #actions>
<a @click.prevent.stop="open_album_dialog(album)"> <a @click.prevent.stop="open_album_dialog(album)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-album> </spotify-list-item-album>

8
web-src/src/pages/SpotifyPagePlaylist.vue
View File

@ -9,10 +9,10 @@
class="button is-small is-light is-rounded" class="button is-small is-light is-rounded"
@click="show_playlist_details_modal = true" @click="show_playlist_details_modal = true"
> >
<mdicon class="icon" name="dots-horizontal" size="16" /> <span class="icon"><mdicon name="dots-horizontal" size="16" /></span>
</a> </a>
<a class="button is-small is-dark is-rounded" @click="play"> <a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" /> <span class="icon"><mdicon name="shuffle" size="16" /></span>
<span v-text="$t('page.spotify.playlist.shuffle')" /> <span v-text="$t('page.spotify.playlist.shuffle')" />
</a> </a>
</div> </div>
@ -34,7 +34,9 @@
> >
<template #actions> <template #actions>
<a @click.prevent.stop="open_track_dialog(item.track)"> <a @click.prevent.stop="open_track_dialog(item.track)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
</a> </a>
</template> </template>
</spotify-list-item-track> </spotify-list-item-track>

44
web-src/src/pages/SpotifyPageSearch.vue
View File

@ -16,7 +16,9 @@
placeholder="Search" placeholder="Search"
autocomplete="off" autocomplete="off"
/> />
<mdicon class="icon is-left" name="magnify" size="16" /> <span class="icon is-left"
><mdicon name="magnify" size="16"
/></span>
</p> </p>
</div> </div>
</form> </form>
@ -50,11 +52,9 @@
> >
<template #actions> <template #actions>
<a @click.prevent.stop="open_track_dialog(track)"> <a @click.prevent.stop="open_track_dialog(track)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-track> </spotify-list-item-track>
@ -79,7 +79,7 @@
@click="open_search_tracks" @click="open_search_tracks"
v-text=" v-text="
$t('page.spotify.search.show-all-tracks', { $t('page.spotify.search.show-all-tracks', {
count: tracks.total.toLocaleString() count: tracks.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -105,11 +105,9 @@
> >
<template #actions> <template #actions>
<a @click.prevent.stop="open_artist_dialog(artist)"> <a @click.prevent.stop="open_artist_dialog(artist)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-artist> </spotify-list-item-artist>
@ -133,7 +131,7 @@
@click="open_search_artists" @click="open_search_artists"
v-text=" v-text="
$t('page.spotify.search.show-all-artists', { $t('page.spotify.search.show-all-artists', {
count: artists.total.toLocaleString() count: artists.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -171,11 +169,9 @@
</template> </template>
<template #actions> <template #actions>
<a @click.prevent.stop="open_album_dialog(album)"> <a @click.prevent.stop="open_album_dialog(album)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-album> </spotify-list-item-album>
@ -199,7 +195,7 @@
@click="open_search_albums" @click="open_search_albums"
v-text=" v-text="
$t('page.spotify.search.show-all-albums', { $t('page.spotify.search.show-all-albums', {
count: albums.total.toLocaleString() count: albums.total.toLocaleString($i18n.locale)
}) })
" "
/> />
@ -225,11 +221,9 @@
> >
<template #actions> <template #actions>
<a @click.prevent.stop="open_playlist_dialog(playlist)"> <a @click.prevent.stop="open_playlist_dialog(playlist)">
<mdicon <span class="icon has-text-dark"
class="icon has-text-dark" ><mdicon name="dots-vertical" size="16"
name="dots-vertical" /></span>
size="16"
/>
</a> </a>
</template> </template>
</spotify-list-item-playlist> </spotify-list-item-playlist>
@ -253,7 +247,7 @@
@click="open_search_playlists" @click="open_search_playlists"
v-text=" v-text="
$t('page.spotify.search.show-all-playlists', { $t('page.spotify.search.show-all-playlists', {
count: playlists.total.toLocaleString() count: playlists.total.toLocaleString($i18n.locale)
}) })
" "
/> />

8
web-src/src/templates/ContentWithHeading.vue
View File

@ -15,14 +15,18 @@
class="button is-small is-white" class="button is-small is-white"
@click="scroll_to_top" @click="scroll_to_top"
> >
<mdicon class="icon is-small" name="chevron-down" size="16" /> <span class="icon is-small"
><mdicon name="chevron-down" size="16"
/></span>
</a> </a>
<a <a
v-else v-else
class="button is-small is-white" class="button is-small is-white"
@click="scroll_to_content" @click="scroll_to_content"
> >
<mdicon class="icon is-small" name="chevron-up" size="16" /> <span class="icon is-small"
><mdicon name="chevron-up" size="16"
/></span>
</a> </a>
</nav> </nav>
</section> </section>