From 2343a7314a9eb0dccbf62afcba3f798a5f226b2a Mon Sep 17 00:00:00 2001
From: Semyon Chetvertnyh <semyon.chetvertnyh@exness.com>
Date: Fri, 15 Nov 2024 13:53:24 +0200
Subject: [PATCH] #505: Ability to hide media name

---
 src/lib/Main/ConditionalMedia.svelte        | 218 ++++++++++----------
 src/lib/Modal/ConditionalMediaConfig.svelte |  20 ++
 static/translations/en.json                 |   1 +
 3 files changed, 131 insertions(+), 108 deletions(-)

diff --git a/src/lib/Main/ConditionalMedia.svelte b/src/lib/Main/ConditionalMedia.svelte
index 296681ee..2152e745 100644
--- a/src/lib/Main/ConditionalMedia.svelte
+++ b/src/lib/Main/ConditionalMedia.svelte
@@ -329,76 +329,45 @@
 		</div>
 	{/if}
 
-	<div
-		class="background"
-		style:background-color={!backgroundImage ? 'none' : 'rgba(0, 0, 0, 0.25)'}
-		style:backdrop-filter={!backgroundImage ? 'none' : 'blur(1rem)'}
-		style:-webkit-backdrop-filter={!backgroundImage ? 'none' : 'blur(1rem)'}
-	>
-		<div class="left">
-			<div class="icon">
-				<!-- activePlayer -->
+	{#if !sel?.hide_name}
+		<div
+			class="background"
+			style:background-color={!backgroundImage ? 'none' : 'rgba(0, 0, 0, 0.25)'}
+			style:backdrop-filter={!backgroundImage ? 'none' : 'blur(1rem)'}
+			style:-webkit-backdrop-filter={!backgroundImage ? 'none' : 'blur(1rem)'}
+		>
+			<div class="left">
+				<div class="icon">
+					<!-- activePlayer -->
+
+					{#if active}
+						{#if currentAttr?.icon}
+							<Icon icon={currentAttr?.icon} height="auto" width="100%" />
+						{:else if current_media_player}
+							<ComputeIcon entity_id={current_media_player?.entity_id} skipEntityPicture={true} />
+						{/if}
 
-				{#if active}
-					{#if currentAttr?.icon}
-						<Icon icon={currentAttr?.icon} height="auto" width="100%" />
-					{:else if current_media_player}
-						<ComputeIcon entity_id={current_media_player?.entity_id} skipEntityPicture={true} />
+						<!-- nothing_playing -->
+					{:else if sel?.icon || entity?.attributes?.icon}
+						<Icon icon={sel?.icon || entity?.attributes?.icon} height="auto" width="100%" />
+					{:else if sel?.entity_id}
+						<ComputeIcon entity_id={sel?.entity_id} skipEntityPicture={true} />
+					{:else}
+						<Icon icon="ooui:help-ltr" height="auto" width="100%" />
 					{/if}
-
-					<!-- nothing_playing -->
-				{:else if sel?.icon || entity?.attributes?.icon}
-					<Icon icon={sel?.icon || entity?.attributes?.icon} height="auto" width="100%" />
-				{:else if sel?.entity_id}
-					<ComputeIcon entity_id={sel?.entity_id} skipEntityPicture={true} />
-				{:else}
-					<Icon icon="ooui:help-ltr" height="auto" width="100%" />
-				{/if}
+				</div>
 			</div>
-		</div>
-
-		<div class="right">
-			{#if active}
-				<!-- activePlayer -->
 
-				<div class="name">
-					{getName(undefined, current_media_player)}
-				</div>
+			<div class="right">
+				{#if active}
+					<!-- activePlayer -->
 
-				<div class="state">
-					<div class="measure" bind:clientWidth={contentWidth}>
-						<!-- snippet -->
-						{#if media_artist && media_title}
-							{media_artist} - {media_title}
-						{:else if media_artist && !media_title}
-							{media_artist}
-						{:else if !media_artist && media_title}
-							{media_title}
-						{:else}
-							<StateLogic entity_id={current_media_player?.entity_id} selected={undefined} />
-						{/if}
+					<div class="name">
+						{getName(undefined, current_media_player)}
 					</div>
 
-					<div style="overflow: hidden; text-overflow: ellipsis;">
-						{#if sel?.marquee === true && contentWidth && contentWidth > 394 && !$editMode}
-							{#await import('$lib/Components/Marquee.svelte')}
-								loading
-							{:then Marquee}
-								<svelte:component this={Marquee.default}>
-									<!-- snippet -->
-									{#if media_artist && media_title}
-										{media_artist} - {media_title}
-									{:else if media_artist && !media_title}
-										{media_artist}
-									{:else if !media_artist && media_title}
-										{media_title}
-									{:else}
-										<StateLogic entity_id={current_media_player?.entity_id} selected={undefined} />
-									{/if}
-									{@html '&nbsp;'.repeat(4)}
-								</svelte:component>
-							{/await}
-						{:else}
+					<div class="state">
+						<div class="measure" bind:clientWidth={contentWidth}>
 							<!-- snippet -->
 							{#if media_artist && media_title}
 								{media_artist} - {media_title}
@@ -409,52 +378,51 @@
 							{:else}
 								<StateLogic entity_id={current_media_player?.entity_id} selected={undefined} />
 							{/if}
-						{/if}
+						</div>
+
+						<div style="overflow: hidden; text-overflow: ellipsis;">
+							{#if sel?.marquee === true && contentWidth && contentWidth > 394 && !$editMode}
+								{#await import('$lib/Components/Marquee.svelte')}
+									loading
+								{:then Marquee}
+									<svelte:component this={Marquee.default}>
+										<!-- snippet -->
+										{#if media_artist && media_title}
+											{media_artist} - {media_title}
+										{:else if media_artist && !media_title}
+											{media_artist}
+										{:else if !media_artist && media_title}
+											{media_title}
+										{:else}
+											<StateLogic entity_id={current_media_player?.entity_id} selected={undefined} />
+										{/if}
+										{@html '&nbsp;'.repeat(4)}
+									</svelte:component>
+								{/await}
+							{:else}
+								<!-- snippet -->
+								{#if media_artist && media_title}
+									{media_artist} - {media_title}
+								{:else if media_artist && !media_title}
+									{media_artist}
+								{:else if !media_artist && media_title}
+									{media_title}
+								{:else}
+									<StateLogic entity_id={current_media_player?.entity_id} selected={undefined} />
+								{/if}
+							{/if}
+						</div>
 					</div>
-				</div>
-			{:else}
-				<!-- nothing_playing -->
-
-				<div class="name">
-					{sel?.name || getName(undefined, entity) || $lang('nothing_playing')}
-				</div>
-
-				<div class="state">
-					<div class="measure" bind:clientWidth={contentWidth}>
-						<!-- snippet -->
-						{#if entity_data?.title}
-							{entity_data?.title}
+				{:else}
+					<!-- nothing_playing -->
 
-							{#if entity_data?.aired}
-								({entity_data?.aired?.split('-')?.[0]})
-							{/if}
-						{:else}
-							<StateLogic entity_id={sel?.entity_id} selected={sel} />
-						{/if}
+					<div class="name">
+						{sel?.name || getName(undefined, entity) || $lang('nothing_playing')}
 					</div>
 
-					<div style="overflow: hidden; text-overflow: ellipsis;">
-						{#if sel?.marquee === true && contentWidth && contentWidth > 394 && !$editMode}
-							{#await import('$lib/Components/Marquee.svelte')}
-								loading
-							{:then Marquee}
-								<svelte:component this={Marquee.default}>
-									<!-- snippet -->
-									{#if entity_data?.title}
-										{entity_data?.title}
-
-										{#if entity_data?.aired}
-											({entity_data?.aired?.split('-')?.[0]})
-										{/if}
-									{:else}
-										<StateLogic entity_id={sel?.entity_id} selected={sel} />
-									{/if}
-									{@html '&nbsp;'.repeat(4)}
-								</svelte:component>
-							{/await}
-						{:else}
+					<div class="state">
+						<div class="measure" bind:clientWidth={contentWidth}>
 							<!-- snippet -->
-
 							{#if entity_data?.title}
 								{entity_data?.title}
 
@@ -464,12 +432,46 @@
 							{:else}
 								<StateLogic entity_id={sel?.entity_id} selected={sel} />
 							{/if}
-						{/if}
+						</div>
+
+						<div style="overflow: hidden; text-overflow: ellipsis;">
+							{#if sel?.marquee === true && contentWidth && contentWidth > 394 && !$editMode}
+								{#await import('$lib/Components/Marquee.svelte')}
+									loading
+								{:then Marquee}
+									<svelte:component this={Marquee.default}>
+										<!-- snippet -->
+										{#if entity_data?.title}
+											{entity_data?.title}
+
+											{#if entity_data?.aired}
+												({entity_data?.aired?.split('-')?.[0]})
+											{/if}
+										{:else}
+											<StateLogic entity_id={sel?.entity_id} selected={sel} />
+										{/if}
+										{@html '&nbsp;'.repeat(4)}
+									</svelte:component>
+								{/await}
+							{:else}
+								<!-- snippet -->
+
+								{#if entity_data?.title}
+									{entity_data?.title}
+
+									{#if entity_data?.aired}
+										({entity_data?.aired?.split('-')?.[0]})
+									{/if}
+								{:else}
+									<StateLogic entity_id={sel?.entity_id} selected={sel} />
+								{/if}
+							{/if}
+						</div>
 					</div>
-				</div>
-			{/if}
+				{/if}
+			</div>
 		</div>
-	</div>
+	{/if}
 </div>
 
 <style>
diff --git a/src/lib/Modal/ConditionalMediaConfig.svelte b/src/lib/Modal/ConditionalMediaConfig.svelte
index ae318c42..7c03a3e0 100644
--- a/src/lib/Modal/ConditionalMediaConfig.svelte
+++ b/src/lib/Modal/ConditionalMediaConfig.svelte
@@ -207,6 +207,26 @@
 			/>
 		</InputClear>
 
+		<h2>{$lang('hide_name')}</h2>
+
+		<div class="button-container">
+			<button
+				class:selected={sel?.hide_name}
+				on:click={() => set('hide_name', true)}
+				use:Ripple={$ripple}
+			>
+				{$lang('yes')}
+			</button>
+
+			<button
+				class:selected={!sel?.hide_name}
+				on:click={() => set('hide_name', false)}
+				use:Ripple={$ripple}
+			>
+				{$lang('no')}
+			</button>
+		</div>
+
 		<h2>{$lang('show_area')?.replace('{area}', $lang('time')?.toLocaleLowerCase())}</h2>
 
 		<div class="button-container">
diff --git a/static/translations/en.json b/static/translations/en.json
index 9b470abe..d420a593 100644
--- a/static/translations/en.json
+++ b/static/translations/en.json
@@ -149,6 +149,7 @@
 	"heating": "Heating",
 	"hidden": "Hidden",
 	"hide": "Hide",
+	"hide_name": "Hide name",
 	"high": "High",
 	"history": "History",
 	"home": "Home",