mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
## Summary
- add poster-first, tap-to-toggle animated avatars on profile surfaces
while preserving transparent/static behavior elsewhere
- align mobile DM headers, membership actions, and invisible agent
recipient addressing with established desktop semantics
- polish titled sheets and status editing, preserve native iOS sheet
corners, and batch relay reads to improve review-build responsiveness
## Snapshots
<table>
<tr>
<th>Profile avatar</th>
<th>Agent DM header and composer</th>
</tr>
<tr>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--profile-avatar.png"
width="360" alt="Mobile profile settings with animated avatar
surface"></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--agent-dm.png"
width="360" alt="Agent direct message with masked presence and normal
composer"></td>
</tr>
<tr>
<th>Members sheet</th>
<th>Status editor</th>
</tr>
<tr>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--members-sheet.png"
width="360" alt="Members bottom sheet with centered title and padded
content"></td>
<td><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--status-sheet.png"
width="360" alt="Status editor bottom sheet with duration and quick
statuses"></td>
</tr>
<tr>
<th colspan="2">Switch Community</th>
</tr>
<tr>
<td colspan="2" align="center"><img
src="https://raw.githubusercontent.com/block/buzz/e8de7495451dbe1a393ab43c5e204ca7425f2ba5/pr-5401--switch-community.png"
width="720" alt="Switch Community bottom sheet with centered title and
aligned Edit action"></td>
</tr>
</table>
## Validation
- `just mobile-check`
- `just mobile-test` (1,283 tests)
- installed and reviewed isolated debug builds on iPhone and Pixel
---------
Signed-off-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: Princess Donut <b238ea756dee4d98afa5883fc7f1de61eeabe65bf700e3a5a5a80db5e42e2c2b@buzz.block.builderlab.xyz>
Signed-off-by: Kenny Lopez <klopez4212@gmail.com>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Princess Donut <b238ea756dee4d98afa5883fc7f1de61eeabe65bf700e3a5a5a80db5e42e2c2b@buzz.block.builderlab.xyz>
Co-authored-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
101 lines
3.6 KiB
Dart
101 lines
3.6 KiB
Dart
import 'dart:convert';
|
|
|
|
import 'package:buzz/shared/widgets/avatar_image.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
|
|
void main() {
|
|
const svg =
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">'
|
|
'<text x="16" y="24" text-anchor="middle">🦝</text></svg>';
|
|
|
|
Widget subject(String? imageUrl, {Color? backgroundColor}) => ProviderScope(
|
|
child: MaterialApp(
|
|
home: AvatarImage(
|
|
imageUrl: imageUrl,
|
|
radius: 16,
|
|
backgroundColor: backgroundColor,
|
|
fallback: const Text('R'),
|
|
),
|
|
),
|
|
);
|
|
|
|
testWidgets('renders raccoon percent-encoded SVG data avatar', (
|
|
tester,
|
|
) async {
|
|
const raccoonAvatar =
|
|
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Crect%20width%3D%22512%22%20height%3D%22512%22%20rx%3D%22256%22%20fill%3D%22%233399FF%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2256%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20font-size%3D%22258%22%3E%F0%9F%A6%9D%3C%2Ftext%3E%3C%2Fsvg%3E';
|
|
await tester.pumpWidget(subject(raccoonAvatar));
|
|
await tester.pumpAndSettle();
|
|
|
|
final emoji = tester.widget<Text>(find.text('🦝'));
|
|
expect(emoji.style?.height, 1);
|
|
expect(find.byType(SvgPicture), findsNothing);
|
|
expect(find.text('R'), findsNothing);
|
|
expect(tester.takeException(), isNull);
|
|
});
|
|
|
|
testWidgets('renders base64 SVG data avatar', (tester) async {
|
|
await tester.pumpWidget(
|
|
subject('data:image/svg+xml;base64,${base64Encode(utf8.encode(svg))}'),
|
|
);
|
|
|
|
expect(find.byType(SvgPicture), findsOneWidget);
|
|
});
|
|
|
|
testWidgets('centers fallback when no avatar is configured', (tester) async {
|
|
await tester.pumpWidget(subject(null));
|
|
|
|
final avatarCenter = tester.getCenter(find.byType(CircleAvatar));
|
|
final fallbackCenter = tester.getCenter(find.text('R'));
|
|
expect(fallbackCenter, avatarCenter);
|
|
});
|
|
|
|
testWidgets('uses fallback for malformed image data', (tester) async {
|
|
await tester.pumpWidget(subject('data:image/svg+xml;base64,%%%'));
|
|
|
|
expect(find.text('R'), findsOneWidget);
|
|
});
|
|
|
|
testWidgets('renders animated-avatar posters without an opaque background', (
|
|
tester,
|
|
) async {
|
|
const posterUrl = 'https://relay.example/media/poster.png';
|
|
const animationUrl = 'https://relay.example/media/animation.png';
|
|
final animatedUrl =
|
|
'$posterUrl#buzz-anim=${Uri.encodeComponent(animationUrl)}';
|
|
|
|
await tester.pumpWidget(subject(animatedUrl, backgroundColor: Colors.red));
|
|
|
|
expect(
|
|
tester.widget<CircleAvatar>(find.byType(CircleAvatar)).backgroundColor,
|
|
Colors.transparent,
|
|
);
|
|
expect(
|
|
tester
|
|
.widget<AvatarImageContent>(find.byType(AvatarImageContent))
|
|
.imageUrl,
|
|
posterUrl,
|
|
);
|
|
});
|
|
|
|
testWidgets('reuses parsed raster bytes across parent rebuilds', (
|
|
tester,
|
|
) async {
|
|
const png =
|
|
'data:image/png;base64,'
|
|
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
|
|
await tester.pumpWidget(subject(png));
|
|
final firstBytes = tester.widget<Image>(find.byType(Image)).image;
|
|
|
|
await tester.pumpWidget(subject(png));
|
|
final rebuiltBytes = tester.widget<Image>(find.byType(Image)).image;
|
|
|
|
final firstMemory = firstBytes as MemoryImage;
|
|
final rebuiltMemory = rebuiltBytes as MemoryImage;
|
|
expect(rebuiltMemory.bytes, same(firstMemory.bytes));
|
|
});
|
|
}
|