[web] Add page for miscellaneous settings

web-src/src/components/TabsSettings.vue

@@ -51,6 +51,17 @@
                   </a>
                 </li>
               </router-link>
+              <router-link
+                v-slot="{ navigate, isActive }"
+                :to="{ name: 'settings-miscellaneous' }"
+                custom
+              >
+                <li :class="{ 'is-active': isActive }">
+                  <a @click="navigate" @keypress.enter="navigate">
+                    <span v-text="$t('page.settings.tabs.miscellaneous')" />
+                  </a>
+                </li>
+              </router-link>
             </ul>
           </div>
         </div>

web-src/src/i18n/en.json

@@ -484,6 +484,12 @@
         "show-coverart": "Show cover artwork in album list",
         "show-path": "Show filepath on the \"Now playing\" page"
       },
+      "miscellaneous": {
+        "streaming": {
+          "title": "Streaming",
+          "ignore": "Ignore artwork served by radio stations"
+        }
+      },
       "services": {
         "lastfm": {
           "grant-access": "Login with your Last.fm username and password to enable scrobbling",
@@ -510,6 +516,7 @@
       "tabs": {
         "artwork": "Artwork",
         "general": "General",
+        "miscellaneous": "Miscellaneous",
         "online-services": "Online Services",
         "remotes-and-outputs": "Remotes and Outputs"
       }

web-src/src/pages/PageSettingsMiscellaneous.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="fd-page-with-tabs">
+    <tabs-settings />
+    <content-with-heading>
+      <template #heading-left>
+        <div
+          class="title is-4"
+          v-text="$t('page.settings.miscellaneous.streaming.title')"
+        />
+      </template>
+      <template #content>
+        <settings-checkbox category="misc" name="streamurl_ignore">
+          <template #label>
+            <span v-text="$t('page.settings.miscellaneous.streaming.ignore')" />
+          </template>
+        </settings-checkbox>
+        <settings-textfield
+          category="misc"
+          name="streamurl_keywords_artwork_url"
+          :placeholder="$t('page.settings.miscellaneous.streaming.keywords')"
+        >
+          <template #label>
+            <span
+              v-text="$t('page.settings.miscellaneous.streaming.keywords')"
+            />
+          </template>
+        </settings-textfield>
+        <settings-textfield
+          category="misc"
+          name="streamurl_keywords_length"
+          :placeholder="$t('page.settings.miscellaneous.streaming.keywords-length')"
+        >
+          <template #label>
+            <span
+              v-text="$t('page.settings.miscellaneous.streaming.keywords-length')"
+            />
+          </template>
+        </settings-textfield>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import SettingsCheckbox from '@/components/SettingsCheckbox.vue'
+import SettingsTextfield from '../components/SettingsTextfield.vue'
+import TabsSettings from '@/components/TabsSettings.vue'
+import { useServicesStore } from '@/stores/services'
+
+export default {
+  name: 'PageSettingsMiscellaneous',
+  components: {
+    ContentWithHeading,
+    SettingsCheckbox,
+    SettingsTextfield,
+    TabsSettings
+  },
+
+  setup() {
+    return { servicesStore: useServicesStore() }
+  },
+
+  computed: {
+    spotify() {
+      return this.servicesStore.spotify
+    }
+  }
+}
+</script>

web-src/src/router/index.js

@@ -36,6 +36,7 @@ import PageRadioStreams from '@/pages/PageRadioStreams.vue'
 import PageSearchLibrary from '@/pages/PageSearchLibrary.vue'
 import PageSearchSpotify from '@/pages/PageSearchSpotify.vue'
 import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
+import PageSettingsMiscellaneous from '@/pages/PageSettingsMiscellaneous.vue'
 import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
 import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
 import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
@@ -287,6 +288,11 @@ export const router = createRouter({
       name: 'settings-artwork',
       path: '/settings/artwork'
     },
+    {
+      component: PageSettingsMiscellaneous,
+      name: 'settings-miscellaneous',
+      path: '/settings/miscellaneous'
+    },
     {
       component: PageSettingsOnlineServices,
       name: 'settings-online-services',