Skip to content

Fix some bugs and add animations to ProfileMusicView #1893

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fix some bugs and add animations to ProfileMusicView #1893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
74d66d0
Fix some bugs and add profile music view animations
Aghajari Sep 3, 2025
4118f7f
Revert ratingView positioning
Aghajari Sep 3, 2025
6d64da3
Improve music row update logic
Aghajari Sep 4, 2025
ec78581
Improve music row animations
Aghajari Sep 4, 2025
c536b90
Fix glitch when avatar is expanded
Aghajari Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions TMessagesProj/src/main/java/org/telegram/ui/Components/AudioPlayerAlert.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1675,6 +1675,9 @@ private void onSubItemClick(int id) {
saveToProfile(messageObject, false, () -> {
if (savedMusicList != null) {
savedMusicList.remove(messageObject);
}
}, () -> {
if (savedMusicList != null) {
if (savedMusicList.list.isEmpty()) {
MediaController.getInstance().cleanup();
dismiss();
Expand Down Expand Up @@ -2584,6 +2587,10 @@ public ArrayList<ThemeDescription> getThemeDescriptions() {
}

private void saveToProfile(MessageObject messageObject, boolean save, Runnable done, boolean triedFileRef) {
saveToProfile(messageObject, save, null, done, triedFileRef);
}

private void saveToProfile(MessageObject messageObject, boolean save, Runnable profileUpdater, Runnable done, boolean triedFileRef) {
final TLRPC.Document document = messageObject.getDocument();
if (document == null) {
return;
Expand Down Expand Up @@ -2691,8 +2698,13 @@ private void saveToProfile(MessageObject messageObject, boolean save, Runnable d
userInfo.flags2 &=~ TLObject.FLAG_21;
userInfo.saved_music = null;
}
if (profileUpdater != null) {
profileUpdater.run();
}
MessagesStorage.getInstance(currentAccount).updateUserInfo(userInfo, true);
NotificationCenter.getInstance(currentAccount).postNotificationName(NotificationCenter.profileMusicUpdated, selfId);
} else if (profileUpdater != null) {
profileUpdater.run();
}
if (done != null) {
done.run();
Expand Down
5 changes: 3 additions & 2 deletions TMessagesProj/src/main/java/org/telegram/ui/Components/ProfileGalleryBlurView.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -667,10 +667,11 @@ private void captureActionsBlurRenderNode(float width, ProfileActivity.AvatarIma
}
}
if (musicView != null) {
float dy = -size + dp(22) + (actionSize == 0 ? dp(4) : 0);
if (avatarImageView != null) {
musicView.drawingBlur(actionsBlurNode, avatarImageView, scale / openingScale, -size + dp(22));
musicView.drawingBlur(actionsBlurNode, avatarImageView, scale / openingScale, dy);
} else {
musicView.drawingBlur(actionsBlurNode, null, scale, -size + dp(22));
musicView.drawingBlur(actionsBlurNode, null, scale, dy);
}
}
}
Expand Down
138 changes: 112 additions & 26 deletions TMessagesProj/src/main/java/org/telegram/ui/Components/ProfileMusicView.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,8 @@

import org.telegram.messenger.AndroidUtilities;
import org.telegram.messenger.FileLoader;
import org.telegram.messenger.LocaleController;
import org.telegram.messenger.MessagesController;
import org.telegram.messenger.R;
import org.telegram.messenger.UserConfig;
import org.telegram.messenger.UserObject;
import org.telegram.tgnet.TLRPC;
import org.telegram.ui.ActionBar.Theme;
import org.telegram.ui.ProfileActivity;
Expand All @@ -37,15 +34,25 @@ public class ProfileMusicView extends View {

private final Theme.ResourcesProvider resourcesProvider;

private Text prevAuthor, prevTitle;
private Text author, title;
private final Paint iconPaint = new Paint();
private final Paint arrowPaint = new Paint();
private final Path arrowPath = new Path();
private final Drawable icon;
private boolean firstLoad;

private final AnimatedFloat switchMusicAnimator = new AnimatedFloat(this::invalidate, 380, CubicBezierInterpolator.DEFAULT);
private final AnimatedFloat isVisibleAnimator = new AnimatedFloat(this::onUpdateHeight, 380, CubicBezierInterpolator.EASE_OUT_QUINT);
private Runnable animationUpdateCallback;
private int height = 0;

public ProfileMusicView(Context context, Theme.ResourcesProvider resourcesProvider) {
super(context);
this.resourcesProvider = resourcesProvider;
isVisibleAnimator.set(true, true);
switchMusicAnimator.set(false, true);
height = getMaxViewHeight();

icon = context.getResources().getDrawable(R.drawable.files_music).mutate();
icon.setColorFilter(new PorterDuffColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN));
Expand All @@ -61,6 +68,7 @@ public ProfileMusicView(Context context, Theme.ResourcesProvider resourcesProvid

setColor(null);
setText("Author", " - Title");
firstLoad = true;
}

@Override
Expand All @@ -71,12 +79,59 @@ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
MeasureSpec.EXACTLY
),
MeasureSpec.makeMeasureSpec(
dp(22),
height,
MeasureSpec.EXACTLY
)
);
}

public void setAnimatedVisibility(boolean isVisible, Runnable animationUpdateCallback) {
if (isVisible && !isVisibleAnimator.isInProgress()) {
height = 0;
isVisibleAnimator.set(false, true);
switchMusicAnimator.set(false, true);
}
isVisibleAnimator.set(isVisible);
this.animationUpdateCallback = animationUpdateCallback;
}

public boolean isVisible() {
return isVisibleAnimator.getTargetValue() >= 1f;
}

public boolean isAnimating() {
return isVisibleAnimator.isInProgress();
}

private void onUpdateHeight() {
if (getLayoutParams() != null) {
height = getAnimatedHeight();
getLayoutParams().height = height;
requestLayout();
notifyLayoutUpdate();
}
}

private void notifyLayoutUpdate() {
if (animationUpdateCallback != null) {
animationUpdateCallback.run();
if (!isVisibleAnimator.isInProgress()) {
animationUpdateCallback = null;
}
}
}

private int getMaxViewHeight() {
return dp(22);
}

private int getAnimatedHeight() {
if (isVisibleAnimator.get() <= 0f && !isVisibleAnimator.isInProgress()) {
return 0;
}
return Math.max(1, (int) (getMaxViewHeight() * isVisibleAnimator.get()));
}

public void setColor(MessagesController.PeerColor peerColor) {
int color1, color2;
if (peerColor == null) {
Expand Down Expand Up @@ -151,8 +206,21 @@ public static CharSequence getAuthor(TLRPC.Document document) {
}

public void setText(CharSequence author, CharSequence title) {
this.author = new Text(author, 11, AndroidUtilities.bold());
this.title = new Text(title, 11);
Text newAuthor = new Text(author, 11, AndroidUtilities.bold());
Text newTitle = new Text(title, 11);

if (!firstLoad &&
((this.author != null && !this.author.getText().equals(newAuthor.getText())) ||
(this.title != null && !this.title.getText().equals(newTitle.getText())))) {
switchMusicAnimator.set(false, true);
switchMusicAnimator.set(true);
}

this.firstLoad = false;
this.prevAuthor = this.author;
this.prevTitle = this.title;
this.author = newAuthor;
this.title = newTitle;
}

private ProfileActivity.AvatarImageView avatarView;
Expand All @@ -179,11 +247,14 @@ public void drawingBlur(RenderNode renderNode, ProfileActivity.AvatarImageView a
invalidate();
}

private final long start = System.currentTimeMillis();
// private final long start = System.currentTimeMillis();

@Override
protected void onDraw(@NonNull Canvas canvas) {
if (this.author == null || this.title == null) return;
float visibleFactor = this.isVisibleAnimator.getValue();
if (!isVisibleAnimator.isInProgress()) notifyLayoutUpdate();
if (visibleFactor <= 0f) return;

if (!ignoreRect && renderNode != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q && canvas.isHardwareAccelerated()) {
canvas.save();
Expand All @@ -193,41 +264,56 @@ protected void onDraw(@NonNull Canvas canvas) {
canvas.restore();
}

// final long now = System.currentTimeMillis();
final float cy = getMaxViewHeight() / 2f; //, hh = dp(6), w = dp(2);

// final float h1 = lerp(0.1f, 1.0f, (float) Math.sin((now - start - 50) % 600 / 600f * Math.PI) / 2.0f + 0.5f);
// final float h2 = lerp(0.1f, 1.0f, (float) Math.sin((now - start - 250) % 600 / 600f * Math.PI) / 2.0f + 0.5f);
// final float h3 = lerp(0.1f, 1.0f, (float) Math.sin((now - start - 400) % 600 / 600f * Math.PI) / 2.0f + 0.5f);
// invalidate();
// canvas.drawRoundRect(0, cy - hh * h1, w, cy + hh * h1, w, w, iconPaint);
// canvas.drawRoundRect(dp(4), cy - hh * h2, dp(4) + w, cy + hh * h2, w, w, iconPaint);
// canvas.drawRoundRect(dp(8), cy - hh * h3, dp(8) + w, cy + hh * h3, w, w, iconPaint);

float switchAnimation = switchMusicAnimator.getValue();
if (!switchMusicAnimator.isInProgress()) {
prevTitle = prevAuthor = null;
}

if (prevAuthor != null && prevTitle != null) {
drawMusicDocument(canvas, this.author, this.title, lerp(cy - height, cy, switchAnimation));
drawMusicDocument(canvas, this.prevAuthor, this.prevTitle, lerp(cy, cy + height, switchAnimation));
} else {
drawMusicDocument(canvas, this.author, this.title, cy);
}
}

private void drawMusicDocument(Canvas canvas, Text author, Text title, float cy) {
canvas.save();
final int padding = dp(12);
final int maxWidth = getWidth() - padding * 2;

this.author.ellipsize((maxWidth - dp(35)) / 2f);
this.title.ellipsize(maxWidth - this.author.getWidth() - dp(35));
author.ellipsize((maxWidth - dp(35)) / 2f);
title.ellipsize(maxWidth - author.getWidth() - dp(35));

final float width = dp(16.6f) + this.author.getWidth() + this.title.getWidth() + dp(8);
final float width = dp(16.6f) + author.getWidth() + title.getWidth() + dp(8);

canvas.save();
canvas.translate((getWidth() - width) / 2f, 0);

final long now = System.currentTimeMillis();
final float cy = getHeight() / 2f, hh = dp(6), w = dp(2);

final int iconSz = dp(14);
icon.setBounds(0, (int) cy - iconSz / 2, iconSz, (int) cy + iconSz / 2);
icon.draw(canvas);
// final float h1 = lerp(0.1f, 1.0f, (float) Math.sin((now - start - 50) % 600 / 600f * Math.PI) / 2.0f + 0.5f);
// final float h2 = lerp(0.1f, 1.0f, (float) Math.sin((now - start - 250) % 600 / 600f * Math.PI) / 2.0f + 0.5f);
// final float h3 = lerp(0.1f, 1.0f, (float) Math.sin((now - start - 400) % 600 / 600f * Math.PI) / 2.0f + 0.5f);
// invalidate();
// canvas.drawRoundRect(0, cy - hh * h1, w, cy + hh * h1, w, w, iconPaint);
// canvas.drawRoundRect(dp(4), cy - hh * h2, dp(4) + w, cy + hh * h2, w, w, iconPaint);
// canvas.drawRoundRect(dp(8), cy - hh * h3, dp(8) + w, cy + hh * h3, w, w, iconPaint);

canvas.translate(dp(16.6f), 0);
this.author.draw(canvas, 0, cy, 0xFFFFFFFF, 1.0f);
canvas.translate(this.author.getWidth(), 0);
this.title.draw(canvas, 0, cy, 0xFFFFFFFF, 0.85f);
canvas.translate(this.title.getWidth(), 0);

author.draw(canvas, 0, cy, 0xFFFFFFFF, 1.0f);
canvas.translate(author.getWidth(), 0);
title.draw(canvas, 0, cy, 0xFFFFFFFF, 0.85f);
canvas.translate(title.getWidth(), 0);

arrowPaint.setStrokeWidth(dpf2(1.16f));
canvas.translate(dpf2(3.8f), cy);
canvas.drawPath(arrowPath, arrowPaint);

canvas.restore();
}
}
Loading