Skip to content

Commit

Permalink
matt8707#505: Ability to hide media name
Browse files Browse the repository at this point in the history
  • Loading branch information
@semyonchetvertnyh
semyonchetvertnyh committed Nov 15, 2024
1 parent 25c374d commit 2343a73
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 108 deletions.
218 changes: 110 additions & 108 deletions src/lib/Main/ConditionalMedia.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}

Expand All @@ -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>
Expand Down
20 changes: 20 additions & 0 deletions src/lib/Modal/ConditionalMediaConfig.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions static/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@
"heating": "Heating",
"hidden": "Hidden",
"hide": "Hide",
"hide_name": "Hide name",
"high": "High",
"history": "History",
"home": "Home",
Expand Down

0 comments on commit 2343a73

Please sign in to comment.