discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

audioplayer-title-autowidth

Browse Source
This commit is contained in:
Untone 2024-01-17 15:12:15 +03:00
parent 63f92c466c
commit 21b04ef9e9
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Article/AudioPlayer/PlayerPlaylist.tsx
View File

@ -34,7 +34,7 @@ export const PlayerPlaylist = (props: Props) => {
const handleMediaItemFieldChange = (field: keyof MediaItem, value: string) => { const handleMediaItemFieldChange = (field: keyof MediaItem, value: string) => {
props.onMediaItemFieldChange(activeEditIndex(), field, value) props.onMediaItemFieldChange(activeEditIndex(), field, value)
} }
const titleStyle = (mi: MediaItem) => ({ 'max-width': `calc(${mi.title ? 5 : 10}0% - 16px)` })
return ( return (
<ul class={styles.playlist}> <ul class={styles.playlist}>
<For each={props.media}> <For each={props.media}>
@ -54,9 +54,13 @@ export const PlayerPlaylist = (props: Props) => {
when={activeEditIndex() === index() && props.editorMode} when={activeEditIndex() === index() && props.editorMode}
fallback={ fallback={
<> <>
<div class={styles.title}>{mi.title || index()}</div> <div class={styles.title} style={titleStyle(mi)}>
{mi.title || index()}
</div>
<Show when={mi.artist}> <Show when={mi.artist}>
<div class={styles.artist}>{mi.artist}</div> <div class={styles.artist} style={titleStyle(mi)}>
{mi.artist}
</div>
</Show> </Show>
</> </>
} }