Added showBitrateTags and showSearchButton options

Re-added executeCommand as read-only

src/components/TheSearchBar.vue

@@ -1,6 +1,6 @@
 <template>
-	<header id="search" aria-label="searchbar">
+	<header id="search" aria-label="searchbar" :class="{ showSearchButton }">
-		<div class="search__icon">
+		<div v-if="!showSearchButton" class="search__icon">
 			<i class="material-icons">search</i>
 		</div>
 
@@ -14,14 +14,22 @@
 			value=""
 			:placeholder="$t('searchbar')"
 			autofocus
-			@keyup="performSearch($event)"
+			@keyup="keyPerformSearch($event)"
 		/>
 		<!-- @keyup.enter.exact="onEnter"
 			@keyup.ctrl.enter="onCTRLEnter" -->
+		<a
+			href="#"
+			class="searchButton"
+			@contextmenu="rightClickPerformSearch"
+			@click="clickPerformSearch"
+			v-if="showSearchButton"
+		><i class="material-icons">search</i></a>
 	</header>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { defineComponent, ref } from '@vue/composition-api'
 import { isValidURL } from '@/utils/utils'
 import { sendAddToQueue } from '@/utils/downloads'
@@ -57,25 +65,48 @@ export default defineComponent({
 			document.removeEventListener('keyup', deleteSearchBarContent)
 		})
 	},
+	computed: {
+		...mapGetters({
+			showSearchButton: 'getShowSearchButton',
+		})
+	},
 	methods: {
-		async performSearch(keyEvent) {
+		async clickPerformSearch(ev) {
-			const isEnterPressed = keyEvent.keyCode === 13
+			ev.preventDefault()
+			const term = this.$refs.searchbar.value
+			const isEmptySearch = term === ''
+			if (isEmptySearch) return
 
+			await this.performSearch(term, false)
+		},
+		async rightClickPerformSearch(ev){
+			ev.preventDefault()
+			ev.stopPropagation()
+			const term = this.$refs.searchbar.value
+			const isEmptySearch = term === ''
+			if (isEmptySearch) return
+
+			await this.performSearch(term, true)
+		},
+		async keyPerformSearch(keyEvent) {
+			const isEnterPressed = keyEvent.keyCode === 13
 			if (!isEnterPressed) return
 
 			const term = this.$refs.searchbar.value
 			const isEmptySearch = term === ''
-
 			if (isEmptySearch) return
 
-			const isSearchingURL = isValidURL(term)
 			const isCtrlPressed = keyEvent.ctrlKey
+			await this.performSearch(term, isCtrlPressed)
+		},
+		async performSearch(term, modifierKey){
+			const isSearchingURL = isValidURL(term)
 			const isShowingAnalyzer = this.$route.name === 'Link Analyzer'
 			const isShowingSearch = this.$route.name === 'Search'
 			const isSameAsLastSearch = term === this.lastTextSearch
 
 			if (isSearchingURL) {
-				if (isCtrlPressed) {
+				if (modifierKey) {
 					this.$root.$emit('ContextMenu:searchbar', term)
 					return
 				}
@@ -153,6 +184,7 @@ input[type='search']::-webkit-search-cancel-button {
 	transition: border 200ms ease-in-out;
 	border-radius: 15px;
 	margin: 10px 10px 20px 10px;
+	overflow: hidden;
 
 	.search__icon {
 		width: $icon-dimension;
@@ -201,8 +233,33 @@ input[type='search']::-webkit-search-cancel-button {
 		}
 	}
 
+	.searchButton {
+		background-color: var(--primary-color);
+		color: var(--primary-text);
+		height: 100%;
+		width: 48px;
+		display: flex;
+		text-decoration: none;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0px 15px 15px 0px;
+		margin-left: 1em;
+
+		i {
+			font-size: $icon-dimension;
+
+			&::selection {
+				background: none;
+			}
+		}
+	}
+
 	&:focus-within {
 		border: 1px solid var(--foreground);
 	}
+
+	&.showSearchButton {
+		padding: 0 0 0 1em;
+	}
 }
 </style>

src/components/downloads/QueueItem.vue

@@ -3,7 +3,7 @@
 		<div class="download-info">
 			<div class="relative coverart rounded">
 				<img width="75px" :src="queueItem.cover" :alt="`Cover ${queueItem.title}`">
-				<span class="tag">{{ bitrateText }}</span>
+				<span v-if="showTags" class="tag">{{ bitrateText }}</span>
 			</div>
 
 			<div class="download-info-data">
@@ -55,7 +55,8 @@ export default {
 		queueItem: {
 			type: Object,
 			default: () => ({})
-		}
+		},
+		showTags: Boolean
 	},
 	data() {
 		return {

src/components/downloads/TheDownloadBar.vue

@@ -56,6 +56,7 @@
 				v-for="item in queueList"
 				:key="item.uuid"
 				:queue-item="item"
+				:show-tags="showTags"
 				@show-errors="showErrorsTab"
 				@remove-item="onRemoveItem"
 			/>
@@ -90,7 +91,8 @@ export default {
 	computed: {
 		...mapGetters({
 			clientMode: 'getClientMode',
-			isSlim: 'getSlimDownloads'
+			isSlim: 'getSlimDownloads',
+			showTags: 'getShowBitrateTags'
 		}),
 		finishedWithoutErrors() {
 			const isCompletedWithoutErrors = el => (el.status || '') === 'download finished' && el.errors.length === 0

src/components/pages/Settings.vue

@@ -133,6 +133,14 @@
 				<input v-model="modelSlimSidebar" type="checkbox" />
 				<span class="checkbox-text">{{ $t('settings.appearance.slimSidebar') }}</span>
 			</label>
+			<label class="mb-4 with-checkbox">
+				<input v-model="modelShowBitrateTags" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.appearance.bitrateTags') }}</span>
+			</label>
+			<label class="mb-4 with-checkbox">
+				<input v-model="modelShowSearchButton" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.appearance.searchButton') }}</span>
+			</label>
 		</BaseAccordion>
 
 		<BaseAccordion class="settings-group">
@@ -666,13 +674,12 @@
 				<span>{{ previewVolume }}%</span>
 			</div>
 
-			<!--
 			<div class="input-group">
 				<p class="input-group-text">{{ $t('settings.other.executeCommand.title') }}</p>
 				<p class="secondary-text">{{ $t('settings.other.executeCommand.description') }}</p>
-				<input v-model="settings.executeCommand" type="text" />
+				<p v-if="settings.executeCommand"> {{ settings.executeCommand }} </p>
+				<p v-else>{{ $t('globals.empty').capitalize() }}</p>
 			</div>
-			-->
 		</BaseAccordion>
 
 		<BaseAccordion class="settings-group">
@@ -781,7 +788,9 @@ export default {
 			clientMode: 'getClientMode',
 			previewVolume: 'getPreviewVolume',
 			hasSlimDownloads: 'getSlimDownloads',
-			hasSlimSidebar: 'getSlimSidebar'
+			hasSlimSidebar: 'getSlimSidebar',
+			showBitrateTags: 'getShowBitrateTags',
+			showSearchButton: 'getShowSearchButton',
 		}),
 		needToWait() {
 			return Object.keys(this.getSettings).length === 0
@@ -810,6 +819,22 @@ export default {
 				this.setSlimSidebar(wantSlimSidebar)
 			}
 		},
+		modelShowBitrateTags: {
+			get() {
+				return this.showBitrateTags
+			},
+			set(wantShowBitrateTags) {
+				this.setShowBitrateTags(wantShowBitrateTags)
+			}
+		},
+		modelShowSearchButton: {
+			get() {
+				return this.showSearchButton
+			},
+			set(wantShowSearchButton) {
+				this.setShowSearchButton(wantShowSearchButton)
+			}
+		},
 		pictureHref() {
 			// Default image: https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg
 			return `https://e-cdns-images.dzcdn.net/images/user/${this.user.picture}/125x125-000000-80-0-0.jpg`
@@ -865,6 +890,8 @@ export default {
 			setPreviewVolume: 'setPreviewVolume',
 			setSlimDownloads: 'setSlimDownloads',
 			setSlimSidebar: 'setSlimSidebar',
+			setShowBitrateTags: 'setShowBitrateTags',
+			setShowSearchButton: 'setShowSearchButton',
 			dispatchLogout: 'logout',
 			dispatchLogin: 'login',
 			setSpotifyUserId: 'setSpotifyUserId',

src/data/settings.js

@@ -41,3 +41,17 @@ export function checkInitialSlimDownloads() {
 export function checkInitialSlimSidebar() {
 	return localStorage.getItem('slimSidebar') === 'true'
 }
+
+/**
+ * @returns	{boolean}
+ */
+export function checkInitialShowBitrateTags() {
+	return localStorage.getItem('showBitrateTags') === 'true'
+}
+
+/**
+ * @returns	{boolean}
+ */
+export function checkInitialShowSearchButton() {
+	return localStorage.getItem('showSearchButton') === 'true'
+}

src/lang/en.js

@@ -43,7 +43,8 @@ const en = {
 			playlistN: '0 playlists | {n} playlist | {n} playlists'
 		},
 		yes: 'yes',
-		no: 'no'
+		no: 'no',
+		empty: 'empty'
 	},
 	about: {
 		appStatus: {
@@ -235,7 +236,9 @@ const en = {
 		appearance: {
 			title: 'Appearance',
 			slimDownloadTab: 'Slim download tab',
-			slimSidebar: 'Slim Sidebar'
+			slimSidebar: 'Slim Sidebar',
+			searchButton: 'Show search button',
+			bitrateTags: 'Show quality tag in download queue'
 		},
 		downloadPath: {
 			title: 'Download Path'

src/lang/it.js

@@ -43,7 +43,8 @@ const it = {
 			playlistN: '{n} playlist'
 		},
 		yes: 'sì',
-		no: 'no'
+		no: 'no',
+		empty: 'vuoto'
 	},
 	about: {
 		appStatus: {
@@ -235,7 +236,9 @@ const it = {
 		appearance: {
 			title: 'Aspetto',
 			slimDownloadTab: 'Tab dei download slim',
-			slimSidebar: 'Sidebar slim'
+			slimSidebar: 'Sidebar slim',
+			searchButton: 'Mostra bottone di ricerca',
+			bitrateTags: 'Mostra targhetta qualità nei download'
 		},
 		downloadPath: {
 			title: 'Cartella di download'

src/store/modules/appInfo.js

@@ -9,7 +9,13 @@
  * @property	{boolean}	hasSlimSidebar
  */
 
-import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSidebar } from '@/data/settings'
+import {
+	getInitialPreviewVolume,
+	checkInitialSlimDownloads,
+	checkInitialSlimSidebar,
+	checkInitialShowBitrateTags,
+	checkInitialShowSearchButton
+} from '@/data/settings'
 
 /**
  * @returns	{AppInfo}
@@ -21,7 +27,9 @@ const state = () => ({
 	deemixVersion: null,
 	previewVolume: getInitialPreviewVolume(),
 	hasSlimDownloads: checkInitialSlimDownloads(),
-	hasSlimSidebar: checkInitialSlimSidebar()
+	hasSlimSidebar: checkInitialSlimSidebar(),
+	showBitrateTags: checkInitialShowBitrateTags(),
+	showSearchButton: checkInitialShowSearchButton()
 })
 
 const actions = {
@@ -63,6 +71,22 @@ const actions = {
 		Array.from(document.getElementsByClassName('toastify')).forEach(toast => {
 			toast.style.transform = `translate(${payload ? '3rem' : '14rem'}, 0)`
 		})
+	},
+	/**
+	 * @param {any}													action
+	 * @param {AppInfo['showBitrateTags']}	payload
+	 */
+	setShowBitrateTags({ commit }, payload) {
+		commit('SET_SHOW_BITRATE_TAGS', payload)
+		localStorage.setItem('showBitrateTags', payload.toString())
+	},
+	/**
+	 * @param {any}													action
+	 * @param {AppInfo['showBitrateTags']}	payload
+	 */
+	setShowSearchButton({ commit }, payload) {
+		commit('SET_SHOW_SEARCH_BUTTON', payload)
+		localStorage.setItem('showSearchButton', payload.toString())
 	}
 }
 
@@ -86,7 +110,17 @@ const getters = {
 	 * @param		{AppInfo}										state
 	 * @returns	{AppInfo['hasSlimSidebar']}
 	 */
-	getSlimSidebar: state => state.hasSlimSidebar
+	getSlimSidebar: state => state.hasSlimSidebar,
+	/**
+	 * @param		{AppInfo}										state
+	 * @returns	{AppInfo['showBitrateTags']}
+	 */
+	getShowBitrateTags: state => state.showBitrateTags,
+	/**
+	 * @param		{AppInfo}										state
+	 * @returns	{AppInfo['showSearchButton']}
+	 */
+	getShowSearchButton: state => state.showSearchButton
 }
 
 const mutations = {
@@ -138,6 +172,20 @@ const mutations = {
 	 */
 	SET_SLIM_SIDEBAR(state, payload) {
 		state.hasSlimSidebar = payload
+	},
+	/**
+	 * @param {AppInfo} 									state
+	 * @param {AppInfo['showBitrateTags']}	payload
+	 */
+	SET_SHOW_BITRATE_TAGS(state, payload) {
+		state.showBitrateTags = payload
+	},
+	/**
+	 * @param {AppInfo} 									state
+	 * @param {AppInfo['showSearchButton']}	payload
+	 */
+	SET_SHOW_SEARCH_BUTTON(state, payload) {
+		state.showSearchButton = payload
 	}
 }