рабочий-код

src/components/Article/AudioPlayer/AudioPlayer.module.scss

@@ -252,7 +252,6 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
     @include font-size(1.6rem);
 
     overflow: hidden;
-    max-width: calc(50% - 16px);
     text-overflow: ellipsis;
     padding: 0;
     margin: 0;

src/components/Article/AudioPlayer/PlayerPlaylist.tsx

@@ -34,7 +34,12 @@ export const PlayerPlaylist = (props: Props) => {
   const handleMediaItemFieldChange = (field: keyof MediaItem, value: string) => {
     props.onMediaItemFieldChange(activeEditIndex(), field, value)
   }
-  const titleStyle = (mi: MediaItem) => ({ 'max-width': `calc(${mi.title ? 5 : 10}0% - 16px)` })
+  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}>

src/utils/getImageUrl.ts

@@ -15,11 +15,13 @@ const getSizeUrlPart = (options: { width?: number; height?: number } = {}) => {
 
 export const getImageUrl = (src: string, options: { width?: number; height?: number } = {}) => {
   const sizeUrlPart = getSizeUrlPart(options)
-  const sourceUrl = src.replace(thumborUrl, '').replace('/unsafe', '')
-  return (
-    'https://' +
-    `${thumborUrl}/unsafe/${sizeUrlPart}${sourceUrl}`.replace('https://', '').replace('//', '/')
-  )
+
+  if (src.startsWith(thumborPrefix)) {
+    const thumborKey = src.replace(thumborPrefix, '')
+    return `${thumborUrl}/unsafe/${sizeUrlPart}${thumborKey}`
+  }
+
+  return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
 }
 
 export const getOpenGraphImageUrl = (