From 0c406e904df52bb09f0b275433353ad1a53cc703 Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Thu, 18 Jan 2024 11:44:01 +0300
Subject: [PATCH] audopplayer-adapted

---
 .../Article/AudioPlayer/AudioPlayer.module.scss  |  1 +
 .../Article/AudioPlayer/PlayerPlaylist.tsx       | 16 ++--------------
 2 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/components/Article/AudioPlayer/AudioPlayer.module.scss b/src/components/Article/AudioPlayer/AudioPlayer.module.scss
index 09abe210..0a1f2293 100644
--- a/src/components/Article/AudioPlayer/AudioPlayer.module.scss
+++ b/src/components/Article/AudioPlayer/AudioPlayer.module.scss
@@ -255,6 +255,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
     text-overflow: ellipsis;
     padding: 0;
     margin: 0;
+    max-width: calc(50% - 16px);
     border: none;
 
     &:focus {
diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
index 5147e282..57bdaf2f 100644
--- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
+++ b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx
@@ -34,12 +34,6 @@ export const PlayerPlaylist = (props: Props) => {
   const handleMediaItemFieldChange = (field: keyof MediaItem, value: string) => {
     props.onMediaItemFieldChange(activeEditIndex(), field, value)
   }
-  const titleStyle = (mi: MediaItem) => {
-    let portion = 0
-    if (mi.artist) portion += 5
-    if (mi.title) portion += 5
-    return { 'max-width': `calc(${portion}0% - 16px)` }
-  }
   return (
     <ul class={styles.playlist}>
       <For each={props.media}>
@@ -59,14 +53,8 @@ export const PlayerPlaylist = (props: Props) => {
                   when={activeEditIndex() === index() && props.editorMode}
                   fallback={
                     <>
-                      <div class={styles.title} style={titleStyle(mi)}>
-                        {mi.title || index()}
-                      </div>
-                      <Show when={mi.artist}>
-                        <div class={styles.artist} style={titleStyle(mi)}>
-                          {mi.artist}
-                        </div>
-                      </Show>
+                      <div class={styles.title}>{mi.title || index()}</div>
+                      <div class={styles.artist}>{mi.artist || ''}</div>
                     </>
                   }
                 >