Beatbump
Beatbump copied to clipboard
snuffyDev
Boxes around everything
Beatbump uses visible boxes for grouping elements and making sure they behave properly but the problem for me is that they make the website look bad, I'm not sure if there's a way these boxes can blend into the background or if they're not needed at all but I think it would be better without them ex: 
!!
Totally get what you mean. It’s leftover from way long ago that I haven’t touched really since, aside from tweaks and fixes.
Along with a code rewrite, a UI touch up/reworking was in the cards as well. So perfect timing you posted this.
although not finished with the design, I’ve pushed the beginnings of some minor UI changes to production
I’ll leave this open for any other related inquiries you may have!
Is getting rid of boxes around songs on artist's pages and the home page gonna be something for the UI overhaul? Also I think that using the space leftover from the boxes to make albums bigger would be a good idea since the albums on artists pages for the YouTube music app are big and I think it looks nice, also another UI improvement would be to get rid of the Grey lines between songs since I don't think it looks that good plus YouTube music doesn't have those lines (here's images of what I'm talking about)
![image]![image]
Keep up the great work though, I'm finishing my school's Java class and have been attempting to learn Svelte in my free time, so I'll be opening pull requests instead of issues when the rewrite is done :)
The main reason for the lines between songs was in case it helps someone with a visual impairment since it helps “separate the concerns”. I think the borders should stay for that reason since I do intend on making Beatbump as accessible as it can be.
I agree with you about that, and have deleted the comments I made about the album size, since I think it looks good now, but for a lot of albums, the name of the artist doesn't show up below each song in the album and this applies for desktop and mobile, the albums personally look a lot better with the artist name under each song
Unfortunately, at least directly from their API, it's hit or miss with albums/singles having an artist name attached to tracks.
For example, here's a song that has the artist name attached (path is musicResponsiveListItemRenderer.flexColumns[1]):
{
"trackingParams": "CNcCEMn0AhgAIhMImeyZmv6B9wIVCN-cCh1bgA77",
"overlay": {
"musicItemThumbnailOverlayRenderer": {
"background": {
"verticalGradient": {
"gradientLayerColors": [
"3422552064",
"3422552064"
]
}
},
"content": {
"musicPlayButtonRenderer": {
"playNavigationEndpoint": {
"clickTrackingParams": "COYCEMjeAiITCJnsmZr-gfcCFQjfnAodW4AO-w==",
"watchEndpoint": {
"videoId": "acfQ_o-wtHw",
"playlistId": "OLAK5uy_nvuWWEh7Q_pZtzq8IWD-csl0twDoTqc_A",
"loggingContext": {
"vssLoggingContext": {
"serializedContextData": "GilPTEFLNXV5X252dVdXRWg3UV9wWnR6cThJV0QtY3NsMHR3RG9UcWNfQQ%3D%3D"
}
},
"watchEndpointMusicSupportedConfigs": {
"watchEndpointMusicConfig": {
"musicVideoType": "MUSIC_VIDEO_TYPE_OMV"
}
}
}
},
"trackingParams": "COYCEMjeAiITCJnsmZr-gfcCFQjfnAodW4AO-w==",
"playIcon": {
"iconType": "PLAY_ARROW"
},
"pauseIcon": {
"iconType": "PAUSE"
},
"iconColor": 4294967295,
"backgroundColor": 0,
"activeBackgroundColor": 0,
"loadingIndicatorColor": 4294901760,
"playingIcon": {
"iconType": "VOLUME_UP"
},
"iconLoadingColor": 0,
"activeScaleFactor": 1,
"buttonSize": "MUSIC_PLAY_BUTTON_SIZE_SMALL",
"rippleTarget": "MUSIC_PLAY_BUTTON_RIPPLE_TARGET_SELF",
"accessibilityPlayData": {
"accessibilityData": {
"label": "Play Painting Pictures - Polo G"
}
},
"accessibilityPauseData": {
"accessibilityData": {
"label": "Pause Painting Pictures - Polo G"
}
}
}
},
"contentPosition": "MUSIC_ITEM_THUMBNAIL_OVERLAY_CONTENT_POSITION_CENTERED",
"displayStyle": "MUSIC_ITEM_THUMBNAIL_OVERLAY_DISPLAY_STYLE_PERSISTENT"
}
},
"flexColumns": [
{
"musicResponsiveListItemFlexColumnRenderer": {
"text": {
"runs": [
{
"text": "Painting Pictures",
"navigationEndpoint": {
"clickTrackingParams": "CNcCEMn0AhgAIhMImeyZmv6B9wIVCN-cCh1bgA77",
"watchEndpoint": {
"videoId": "acfQ_o-wtHw",
"playlistId": "OLAK5uy_nvuWWEh7Q_pZtzq8IWD-csl0twDoTqc_A",
"loggingContext": {
"vssLoggingContext": {
"serializedContextData": "GilPTEFLNXV5X252dVdXRWg3UV9wWnR6cThJV0QtY3NsMHR3RG9UcWNfQQ%3D%3D"
}
},
"watchEndpointMusicSupportedConfigs": {
"watchEndpointMusicConfig": {
"musicVideoType": "MUSIC_VIDEO_TYPE_OMV"
}
}
}
}
}
]
},
"displayPriority": "MUSIC_RESPONSIVE_LIST_ITEM_COLUMN_DISPLAY_PRIORITY_HIGH"
}
},
{
"musicResponsiveListItemFlexColumnRenderer": {
"text": {
"runs": [
{
"text": "Polo G",
"navigationEndpoint": {
"clickTrackingParams": "CNcCEMn0AhgAIhMImeyZmv6B9wIVCN-cCh1bgA77",
"browseEndpoint": {
"browseId": "UCBeXuLfTU8vI-BQKImvEK3Q",
"browseEndpointContextSupportedConfigs": {
"browseEndpointContextMusicConfig": {
"pageType": "MUSIC_PAGE_TYPE_ARTIST"
}
}
}
}
}
]
},
"displayPriority": "MUSIC_RESPONSIVE_LIST_ITEM_COLUMN_DISPLAY_PRIORITY_HIGH"
}
}
],
"fixedColumns": [
{
"musicResponsiveListItemFixedColumnRenderer": {
"text": {
"runs": [
{
"text": "2:18"
}
]
},
"displayPriority": "MUSIC_RESPONSIVE_LIST_ITEM_COLUMN_DISPLAY_PRIORITY_HIGH",
"size": "MUSIC_RESPONSIVE_LIST_ITEM_FIXED_COLUMN_SIZE_SMALL"
}
}
],
"menu": {
"menuRenderer": {
"items": [
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Start radio"
}
]
},
"icon": {
"iconType": "MIX"
},
"navigationEndpoint": {
"clickTrackingParams": "COUCEJvzBRgAIhMImeyZmv6B9wIVCN-cCh1bgA77",
"watchEndpoint": {
"videoId": "acfQ_o-wtHw",
"playlistId": "RDAMVMacfQ_o-wtHw",
"params": "wAEB",
"loggingContext": {
"vssLoggingContext": {
"serializedContextData": "GhFSREFNVk1hY2ZRX28td3RIdw%3D%3D"
}
},
"watchEndpointMusicSupportedConfigs": {
"watchEndpointMusicConfig": {
"musicVideoType": "MUSIC_VIDEO_TYPE_OMV"
}
}
}
},
"trackingParams": "COUCEJvzBRgAIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
},
{
"menuServiceItemRenderer": {
"text": {
"runs": [
{
"text": "Play next"
}
]
},
"icon": {
"iconType": "QUEUE_PLAY_NEXT"
},
"serviceEndpoint": {
"clickTrackingParams": "COMCEL7uBRgBIhMImeyZmv6B9wIVCN-cCh1bgA77",
"queueAddEndpoint": {
"queueTarget": {
"videoId": "acfQ_o-wtHw"
},
"queueInsertPosition": "INSERT_AFTER_CURRENT_VIDEO",
"commands": [
{
"clickTrackingParams": "COMCEL7uBRgBIhMImeyZmv6B9wIVCN-cCh1bgA77",
"addToToastAction": {
"item": {
"notificationTextRenderer": {
"successResponseText": {
"runs": [
{
"text": "Song will play next"
}
]
},
"trackingParams": "COQCEMrHAyITCJnsmZr-gfcCFQjfnAodW4AO-w=="
}
}
}
}
]
}
},
"trackingParams": "COMCEL7uBRgBIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
},
{
"menuServiceItemRenderer": {
"text": {
"runs": [
{
"text": "Add to queue"
}
]
},
"icon": {
"iconType": "ADD_TO_REMOTE_QUEUE"
},
"serviceEndpoint": {
"clickTrackingParams": "COECEPvvBRgCIhMImeyZmv6B9wIVCN-cCh1bgA77",
"queueAddEndpoint": {
"queueTarget": {
"videoId": "acfQ_o-wtHw"
},
"queueInsertPosition": "INSERT_AT_END",
"commands": [
{
"clickTrackingParams": "COECEPvvBRgCIhMImeyZmv6B9wIVCN-cCh1bgA77",
"addToToastAction": {
"item": {
"notificationTextRenderer": {
"successResponseText": {
"runs": [
{
"text": "Song added to queue"
}
]
},
"trackingParams": "COICEMrHAyITCJnsmZr-gfcCFQjfnAodW4AO-w=="
}
}
}
}
]
}
},
"trackingParams": "COECEPvvBRgCIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
},
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Add to playlist"
}
]
},
"icon": {
"iconType": "ADD_TO_PLAYLIST"
},
"navigationEndpoint": {
"clickTrackingParams": "CN8CEMOUBhgDIhMImeyZmv6B9wIVCN-cCh1bgA77",
"modalEndpoint": {
"modal": {
"modalWithTitleAndButtonRenderer": {
"title": {
"runs": [
{
"text": "Save this for later"
}
]
},
"content": {
"runs": [
{
"text": "Make playlists and share them after signing in"
}
]
},
"button": {
"buttonRenderer": {
"style": "STYLE_BLUE_TEXT",
"isDisabled": false,
"text": {
"runs": [
{
"text": "Sign in"
}
]
},
"navigationEndpoint": {
"clickTrackingParams": "COACEPBbIhMImeyZmv6B9wIVCN-cCh1bgA77",
"signInEndpoint": {
"hack": true
}
},
"trackingParams": "COACEPBbIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
}
}
}
}
},
"trackingParams": "CN8CEMOUBhgDIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
},
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Go to artist"
}
]
},
"icon": {
"iconType": "ARTIST"
},
"navigationEndpoint": {
"clickTrackingParams": "CN4CEJD7BRgEIhMImeyZmv6B9wIVCN-cCh1bgA77",
"browseEndpoint": {
"browseId": "UCBeXuLfTU8vI-BQKImvEK3Q",
"browseEndpointContextSupportedConfigs": {
"browseEndpointContextMusicConfig": {
"pageType": "MUSIC_PAGE_TYPE_ARTIST"
}
}
}
},
"trackingParams": "CN4CEJD7BRgEIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
},
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Share"
}
]
},
"icon": {
"iconType": "SHARE"
},
"navigationEndpoint": {
"clickTrackingParams": "CN0CEJH7BRgFIhMImeyZmv6B9wIVCN-cCh1bgA77",
"shareEntityEndpoint": {
"serializedShareEntity": "CgthY2ZRX28td3RIdw%3D%3D",
"sharePanelType": "SHARE_PANEL_TYPE_UNIFIED_SHARE_PANEL"
}
},
"trackingParams": "CN0CEJH7BRgFIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
}
],
"trackingParams": "CNkCEKc7IhMImeyZmv6B9wIVCN-cCh1bgA77",
"topLevelButtons": [
{
"likeButtonRenderer": {
"target": {
"videoId": "acfQ_o-wtHw"
},
"likeStatus": "INDIFFERENT",
"trackingParams": "CNoCEKVBGAYiEwiZ7Jma_oH3AhUI35wKHVuADvs=",
"likesAllowed": true,
"dislikeNavigationEndpoint": {
"clickTrackingParams": "CNoCEKVBGAYiEwiZ7Jma_oH3AhUI35wKHVuADvs=",
"modalEndpoint": {
"modal": {
"modalWithTitleAndButtonRenderer": {
"title": {
"runs": [
{
"text": "Not a fan?"
}
]
},
"content": {
"runs": [
{
"text": "Improve your recommendations after signing in"
}
]
},
"button": {
"buttonRenderer": {
"style": "STYLE_BLUE_TEXT",
"isDisabled": false,
"text": {
"runs": [
{
"text": "Sign in"
}
]
},
"navigationEndpoint": {
"clickTrackingParams": "CNwCEPBbIhMImeyZmv6B9wIVCN-cCh1bgA77",
"signInEndpoint": {
"hack": true
}
},
"trackingParams": "CNwCEPBbIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
}
}
}
}
},
"likeCommand": {
"clickTrackingParams": "CNoCEKVBGAYiEwiZ7Jma_oH3AhUI35wKHVuADvs=",
"modalEndpoint": {
"modal": {
"modalWithTitleAndButtonRenderer": {
"title": {
"runs": [
{
"text": "Like this song"
}
]
},
"content": {
"runs": [
{
"text": "Improve recommendations and save music after signing in"
}
]
},
"button": {
"buttonRenderer": {
"style": "STYLE_BLUE_TEXT",
"isDisabled": false,
"text": {
"runs": [
{
"text": "Sign in"
}
]
},
"navigationEndpoint": {
"clickTrackingParams": "CNsCEPBbIhMImeyZmv6B9wIVCN-cCh1bgA77",
"signInEndpoint": {
"hack": true
}
},
"trackingParams": "CNsCEPBbIhMImeyZmv6B9wIVCN-cCh1bgA77"
}
}
}
}
}
}
}
}
],
"accessibility": {
"accessibilityData": {
"label": "Action menu"
}
}
}
},
"badges": [
{
"musicInlineBadgeRenderer": {
"trackingParams": "CNgCEKHtAhgDIhMImeyZmv6B9wIVCN-cCh1bgA77",
"icon": {
"iconType": "MUSIC_EXPLICIT_BADGE"
},
"accessibilityData": {
"accessibilityData": {
"label": "Explicit"
}
}
}
}
],
"playlistItemData": {
"playlistSetVideoId": "7B3CE8E6D2E112BB",
"videoId": "acfQ_o-wtHw"
},
"itemHeight": "MUSIC_RESPONSIVE_LIST_ITEM_HEIGHT_MEDIUM",
"index": {
"runs": [
{
"text": "1"
}
]
}
}
(from https://beatbump.ml/release?type=MUSIC_PAGE_TYPE_ALBUM&id=MPREb_q2vvG8lGKg0)
The one above provides all of the information needed to display the artist name as well as link to their page when you click on their name.
Where as this one from a different release doesn't have any data under the path musicResponsiveListItemRenderer.flexColumns[1]:
{
"trackingParams": "CJcCEMn0AhgAIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"overlay": {
"musicItemThumbnailOverlayRenderer": {
"background": {
"verticalGradient": {
"gradientLayerColors": [
"3422552064",
"3422552064"
]
}
},
"content": {
"musicPlayButtonRenderer": {
"playNavigationEndpoint": {
"clickTrackingParams": "CKYCEMjeAiITCO6Pkc7_gfcCFcW9nAod8yUBpg==",
"watchEndpoint": {
"videoId": "-yIVRRN42oU",
"playlistId": "OLAK5uy_n7vCVDDMq2Sfr218X15QevGUHAsSYWTG8",
"loggingContext": {
"vssLoggingContext": {
"serializedContextData": "GilPTEFLNXV5X243dkNWRERNcTJTZnIyMThYMTVRZXZHVUhBc1NZV1RHOA%3D%3D"
}
},
"watchEndpointMusicSupportedConfigs": {
"watchEndpointMusicConfig": {
"musicVideoType": "MUSIC_VIDEO_TYPE_OMV"
}
}
}
},
"trackingParams": "CKYCEMjeAiITCO6Pkc7_gfcCFcW9nAod8yUBpg==",
"playIcon": {
"iconType": "PLAY_ARROW"
},
"pauseIcon": {
"iconType": "PAUSE"
},
"iconColor": 4294967295,
"backgroundColor": 0,
"activeBackgroundColor": 0,
"loadingIndicatorColor": 4294901760,
"playingIcon": {
"iconType": "VOLUME_UP"
},
"iconLoadingColor": 0,
"activeScaleFactor": 1,
"buttonSize": "MUSIC_PLAY_BUTTON_SIZE_SMALL",
"rippleTarget": "MUSIC_PLAY_BUTTON_RIPPLE_TARGET_SELF",
"accessibilityPlayData": {
"accessibilityData": {
"label": "Play Don't Believe The Hype - Polo G"
}
},
"accessibilityPauseData": {
"accessibilityData": {
"label": "Pause Don't Believe The Hype - Polo G"
}
}
}
},
"contentPosition": "MUSIC_ITEM_THUMBNAIL_OVERLAY_CONTENT_POSITION_CENTERED",
"displayStyle": "MUSIC_ITEM_THUMBNAIL_OVERLAY_DISPLAY_STYLE_PERSISTENT"
}
},
"flexColumns": [
{
"musicResponsiveListItemFlexColumnRenderer": {
"text": {
"runs": [
{
"text": "Don't Believe The Hype",
"navigationEndpoint": {
"clickTrackingParams": "CJcCEMn0AhgAIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"watchEndpoint": {
"videoId": "-yIVRRN42oU",
"playlistId": "OLAK5uy_n7vCVDDMq2Sfr218X15QevGUHAsSYWTG8",
"loggingContext": {
"vssLoggingContext": {
"serializedContextData": "GilPTEFLNXV5X243dkNWRERNcTJTZnIyMThYMTVRZXZHVUhBc1NZV1RHOA%3D%3D"
}
},
"watchEndpointMusicSupportedConfigs": {
"watchEndpointMusicConfig": {
"musicVideoType": "MUSIC_VIDEO_TYPE_OMV"
}
}
}
}
}
]
},
"displayPriority": "MUSIC_RESPONSIVE_LIST_ITEM_COLUMN_DISPLAY_PRIORITY_HIGH"
}
},
{
"musicResponsiveListItemFlexColumnRenderer": {
"text": {},
"displayPriority": "MUSIC_RESPONSIVE_LIST_ITEM_COLUMN_DISPLAY_PRIORITY_HIGH"
}
}
],
"fixedColumns": [
{
"musicResponsiveListItemFixedColumnRenderer": {
"text": {
"runs": [
{
"text": "2:55"
}
]
},
"displayPriority": "MUSIC_RESPONSIVE_LIST_ITEM_COLUMN_DISPLAY_PRIORITY_HIGH",
"size": "MUSIC_RESPONSIVE_LIST_ITEM_FIXED_COLUMN_SIZE_SMALL"
}
}
],
"menu": {
"menuRenderer": {
"items": [
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Start radio"
}
]
},
"icon": {
"iconType": "MIX"
},
"navigationEndpoint": {
"clickTrackingParams": "CKUCEJvzBRgAIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"watchEndpoint": {
"videoId": "-yIVRRN42oU",
"playlistId": "RDAMVM-yIVRRN42oU",
"params": "wAEB",
"loggingContext": {
"vssLoggingContext": {
"serializedContextData": "GhFSREFNVk0teUlWUlJONDJvVQ%3D%3D"
}
},
"watchEndpointMusicSupportedConfigs": {
"watchEndpointMusicConfig": {
"musicVideoType": "MUSIC_VIDEO_TYPE_OMV"
}
}
}
},
"trackingParams": "CKUCEJvzBRgAIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
},
{
"menuServiceItemRenderer": {
"text": {
"runs": [
{
"text": "Play next"
}
]
},
"icon": {
"iconType": "QUEUE_PLAY_NEXT"
},
"serviceEndpoint": {
"clickTrackingParams": "CKMCEL7uBRgBIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"queueAddEndpoint": {
"queueTarget": {
"videoId": "-yIVRRN42oU"
},
"queueInsertPosition": "INSERT_AFTER_CURRENT_VIDEO",
"commands": [
{
"clickTrackingParams": "CKMCEL7uBRgBIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"addToToastAction": {
"item": {
"notificationTextRenderer": {
"successResponseText": {
"runs": [
{
"text": "Song will play next"
}
]
},
"trackingParams": "CKQCEMrHAyITCO6Pkc7_gfcCFcW9nAod8yUBpg=="
}
}
}
}
]
}
},
"trackingParams": "CKMCEL7uBRgBIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
},
{
"menuServiceItemRenderer": {
"text": {
"runs": [
{
"text": "Add to queue"
}
]
},
"icon": {
"iconType": "ADD_TO_REMOTE_QUEUE"
},
"serviceEndpoint": {
"clickTrackingParams": "CKECEPvvBRgCIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"queueAddEndpoint": {
"queueTarget": {
"videoId": "-yIVRRN42oU"
},
"queueInsertPosition": "INSERT_AT_END",
"commands": [
{
"clickTrackingParams": "CKECEPvvBRgCIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"addToToastAction": {
"item": {
"notificationTextRenderer": {
"successResponseText": {
"runs": [
{
"text": "Song added to queue"
}
]
},
"trackingParams": "CKICEMrHAyITCO6Pkc7_gfcCFcW9nAod8yUBpg=="
}
}
}
}
]
}
},
"trackingParams": "CKECEPvvBRgCIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
},
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Add to playlist"
}
]
},
"icon": {
"iconType": "ADD_TO_PLAYLIST"
},
"navigationEndpoint": {
"clickTrackingParams": "CJ8CEMOUBhgDIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"modalEndpoint": {
"modal": {
"modalWithTitleAndButtonRenderer": {
"title": {
"runs": [
{
"text": "Save this for later"
}
]
},
"content": {
"runs": [
{
"text": "Make playlists and share them after signing in"
}
]
},
"button": {
"buttonRenderer": {
"style": "STYLE_BLUE_TEXT",
"isDisabled": false,
"text": {
"runs": [
{
"text": "Sign in"
}
]
},
"navigationEndpoint": {
"clickTrackingParams": "CKACEPBbIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"signInEndpoint": {
"hack": true
}
},
"trackingParams": "CKACEPBbIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
}
}
}
}
},
"trackingParams": "CJ8CEMOUBhgDIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
},
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Go to artist"
}
]
},
"icon": {
"iconType": "ARTIST"
},
"navigationEndpoint": {
"clickTrackingParams": "CJ4CEJD7BRgEIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"browseEndpoint": {
"browseId": "UCBeXuLfTU8vI-BQKImvEK3Q",
"browseEndpointContextSupportedConfigs": {
"browseEndpointContextMusicConfig": {
"pageType": "MUSIC_PAGE_TYPE_ARTIST"
}
}
}
},
"trackingParams": "CJ4CEJD7BRgEIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
},
{
"menuNavigationItemRenderer": {
"text": {
"runs": [
{
"text": "Share"
}
]
},
"icon": {
"iconType": "SHARE"
},
"navigationEndpoint": {
"clickTrackingParams": "CJ0CEJH7BRgFIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"shareEntityEndpoint": {
"serializedShareEntity": "CgsteUlWUlJONDJvVQ%3D%3D",
"sharePanelType": "SHARE_PANEL_TYPE_UNIFIED_SHARE_PANEL"
}
},
"trackingParams": "CJ0CEJH7BRgFIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
}
],
"trackingParams": "CJkCEKc7IhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"topLevelButtons": [
{
"likeButtonRenderer": {
"target": {
"videoId": "-yIVRRN42oU"
},
"likeStatus": "INDIFFERENT",
"trackingParams": "CJoCEKVBGAYiEwjuj5HO_4H3AhXFvZwKHfMlAaY=",
"likesAllowed": true,
"dislikeNavigationEndpoint": {
"clickTrackingParams": "CJoCEKVBGAYiEwjuj5HO_4H3AhXFvZwKHfMlAaY=",
"modalEndpoint": {
"modal": {
"modalWithTitleAndButtonRenderer": {
"title": {
"runs": [
{
"text": "Not a fan?"
}
]
},
"content": {
"runs": [
{
"text": "Improve your recommendations after signing in"
}
]
},
"button": {
"buttonRenderer": {
"style": "STYLE_BLUE_TEXT",
"isDisabled": false,
"text": {
"runs": [
{
"text": "Sign in"
}
]
},
"navigationEndpoint": {
"clickTrackingParams": "CJwCEPBbIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"signInEndpoint": {
"hack": true
}
},
"trackingParams": "CJwCEPBbIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
}
}
}
}
},
"likeCommand": {
"clickTrackingParams": "CJoCEKVBGAYiEwjuj5HO_4H3AhXFvZwKHfMlAaY=",
"modalEndpoint": {
"modal": {
"modalWithTitleAndButtonRenderer": {
"title": {
"runs": [
{
"text": "Like this song"
}
]
},
"content": {
"runs": [
{
"text": "Improve recommendations and save music after signing in"
}
]
},
"button": {
"buttonRenderer": {
"style": "STYLE_BLUE_TEXT",
"isDisabled": false,
"text": {
"runs": [
{
"text": "Sign in"
}
]
},
"navigationEndpoint": {
"clickTrackingParams": "CJsCEPBbIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"signInEndpoint": {
"hack": true
}
},
"trackingParams": "CJsCEPBbIhMI7o-Rzv-B9wIVxb2cCh3zJQGm"
}
}
}
}
}
}
}
}
],
"accessibility": {
"accessibilityData": {
"label": "Action menu"
}
}
}
},
"badges": [
{
"musicInlineBadgeRenderer": {
"trackingParams": "CJgCEKHtAhgDIhMI7o-Rzv-B9wIVxb2cCh3zJQGm",
"icon": {
"iconType": "MUSIC_EXPLICIT_BADGE"
},
"accessibilityData": {
"accessibilityData": {
"label": "Explicit"
}
}
}
}
],
"playlistItemData": {
"playlistSetVideoId": "95A164F87A797E96",
"videoId": "-yIVRRN42oU"
},
"itemHeight": "MUSIC_RESPONSIVE_LIST_ITEM_HEIGHT_MEDIUM",
"index": {
"runs": [
{
"text": "1"
}
]
}
}
(can be found here: https://beatbump.ml/release?type=MUSIC_PAGE_TYPE_ALBUM&id=MPREb_octN2WL2eqG)
While it'd be possible to mess around with the parser itself, or the ListItem component (since technically I already have all the needed data) -- I think it's unlikely to happen. The main reason why I think this is because if I mess with the parser, there'd be a lot more steps in the parsing process (which will affect each page) that could potentially break. But on the other hand if I mess with the component things, once again, could break. I'll see if there's any solution I can come up with once I start rewriting more towards that end of things, but I cannot guarantee that it'll be something I can easily implement
Music.YouTube.com has this problem, but the app doesn't, so this feature is possible to implement in a stable way, but don't feel like you need to sacrifice stability or speed to implement this, so only implement this when you believe it's ready :) also it'd be cool to add the song length after the artists name in albums and numbers before songs in albums (since numbers before songs in albums go away when the screen is smaller on Beatbump) like the YouTube music app does, since I think it looks good, but you don't need to add the the time of the song if the artist isn't found 
Also for the name of the artist in albums, could you get the name the same way you get the artists name for songs in custom playlists?