adjust style for too long song title and artist in miniplayer and pla…

…ylist
listen1 · Oct 31, 2020 · 970b5b3 · 970b5b3
1 parent 4614d1b
commit 970b5b3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/components/track-row.component.js b/src/components/track-row.component.js
@@ -29,11 +29,13 @@ const PlaylistStatus = styled.TouchableOpacity`
 
 const PlaylistItemSongTitle = styled.Text`
   font-size: 14;
-  color: ${props => props.theme.primaryColor};
+  color: ${(props) => props.theme.primaryColor};
+  overflow: hidden;
 `;
 const PlaylistItemSongInfo = styled.Text`
   font-size: 12;
-  color: ${props => props.theme.secondaryColor};
+  color: ${(props) => props.theme.secondaryColor};
+  overflow: hidden;
 `;
 
 export class TrackRowClass extends React.PureComponent {
@@ -81,10 +83,10 @@ export class TrackRowClass extends React.PureComponent {
           </PlaylistStatus>
         ) : null}
         <PlaylistInfo>
-          <PlaylistItemSongTitle style={textStyle}>
+          <PlaylistItemSongTitle numberOfLines={1} style={textStyle}>
             {this.props.item.title}
           </PlaylistItemSongTitle>
-          <PlaylistItemSongInfo style={textStyle}>
+          <PlaylistItemSongInfo numberOfLines={1} style={textStyle}>
             {this.props.item.artist} - {this.props.item.album}
           </PlaylistItemSongInfo>
         </PlaylistInfo>

diff --git a/src/views/player/mini-player.screen.js b/src/views/player/mini-player.screen.js
@@ -13,7 +13,7 @@ const MiniBar = styled.View`
   width: 100%;
   height: ${miniPlayerSetting.height + miniPlayerSetting.paddingBottom};
   paddingBottom: ${miniPlayerSetting.paddingBottom}}
-  background-color: ${props => props.theme.windowColor};
+  background-color: ${(props) => props.theme.windowColor};
 `;
 const SongLogo = styled.Image`
   width: ${miniPlayerSetting.height};
@@ -28,12 +28,14 @@ const SongTitle = styled.Text`
   font-size: ${miniPlayerSetting.titleFontSize};
   text-align: center;
   margin-bottom: 3px;
-  color: ${props => props.theme.primaryColor};
+  color: ${(props) => props.theme.primaryColor};
+  overflow: hidden;
 `;
 const ArtistTitle = styled.Text`
   font-size: ${miniPlayerSetting.subtitleFontSize};
   text-align: center;
-  color: ${props => props.theme.secondaryColor};
+  color: ${(props) => props.theme.secondaryColor};
+  overflow: hidden;
 `;
 const PlayButton = styled.TouchableOpacity`
   width: ${miniPlayerSetting.height};
@@ -81,12 +83,12 @@ class MiniPlayer extends React.Component {
               }
             />
             <SongInfo>
-              <SongTitle>
+              <SongTitle numberOfLines={1}>
                 {noTrack
                   ? 'Listen 1'
                   : this.props.playerState.nowplayingTrack.title}
               </SongTitle>
-              <ArtistTitle>
+              <ArtistTitle numberOfLines={1}>
                 {noTrack
                   ? 'Artist'
                   : this.props.playerState.nowplayingTrack.artist}