fluffychat/lib/widgets/avatar.dart

import 'package:flutter/material.dart';

import 'package:matrix/matrix.dart';

import 'package:fluffychat/pangea/bot/utils/bot_name.dart';
import 'package:fluffychat/pangea/bot/widgets/bot_face_svg.dart';
import 'package:fluffychat/pangea/common/widgets/url_image_widget.dart';
import 'package:fluffychat/utils/string_color.dart';
import 'package:fluffychat/widgets/mxc_image.dart';
import 'package:fluffychat/widgets/presence_builder.dart';

class Avatar extends StatelessWidget {
  final Uri? mxContent;
  final String? name;
  final double size;
  final void Function()? onTap;
  static const double defaultSize = 44;
  final Client? client;
  final String? presenceUserId;
  final Color? presenceBackgroundColor;
  final BorderRadius? borderRadius;
  final IconData? icon;
  final BorderSide? border;
  final Color? backgroundColor;
  final Color? textColor;
  // #Pangea
  final bool useRive;
  final bool showPresence;
  final String? userId;

  final double? presenceSize;
  final Offset? presenceOffset;
  final Widget? miniIcon;
  // Pangea#

  const Avatar({
    this.mxContent,
    this.name,
    this.size = defaultSize,
    this.onTap,
    this.client,
    this.presenceUserId,
    this.presenceBackgroundColor,
    this.borderRadius,
    this.border,
    this.icon,
    this.backgroundColor,
    this.textColor,
    // #Pangea
    this.useRive = false,
    this.showPresence = true,
    this.userId,
    this.presenceSize,
    this.presenceOffset,
    this.miniIcon,
    // Pangea#
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    final name = this.name;
    final fallbackLetters = name == null || name.isEmpty
        ? '@'
        : name.substring(0, 1);

    final noPic =
        mxContent == null ||
        mxContent.toString().isEmpty ||
        mxContent.toString() == 'null';
    final borderRadius = this.borderRadius ?? BorderRadius.circular(size / 2);
    final presenceUserId = this.presenceUserId;
    final container = Stack(
      children: [
        SizedBox(
          width: size,
          height: size,
          child: Material(
            color: theme.brightness == Brightness.light
                ? Colors.white
                : Colors.black,
            shape: RoundedRectangleBorder(
              borderRadius: borderRadius,
              side: border ?? BorderSide.none,
            ),
            clipBehavior: Clip.antiAlias,
            // child: MxcImage(
            child: (userId ?? presenceUserId) == BotName.byEnvironment
                ? BotFace(
                    width: size,
                    expression: BotExpression.idle,
                    useRive: useRive,
                  )
                // #Pangea
                : !(mxContent.toString().startsWith('mxc://'))
                ? ImageByUrl(
                    imageUrl: mxContent,
                    width: size,
                    replacement: Center(
                      child: Icon(
                        icon ?? Icons.person_2,
                        color: theme.colorScheme.tertiary,
                        size: size / 1.5,
                      ),
                    ),
                    borderRadius: borderRadius,
                  )
                // Pangea#
                : MxcImage(
                    // Pangea#
                    client: client,
                    borderRadius: borderRadius,
                    key: ValueKey(mxContent.toString()),
                    cacheKey: '${mxContent}_$size',
                    uri: mxContent,
                    fit: BoxFit.cover,
                    width: size,
                    height: size,
                    placeholder: (_) => noPic
                        ? Container(
                            decoration: BoxDecoration(
                              color: backgroundColor ?? name?.lightColorAvatar,
                            ),
                            alignment: Alignment.center,
                            child: Text(
                              fallbackLetters,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontFamily: 'RobotoMono',
                                color: textColor ?? Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: (size / 2.5).roundToDouble(),
                              ),
                            ),
                          )
                        : Center(
                            child: Icon(
                              Icons.person_2,
                              color: theme.colorScheme.tertiary,
                              size: size / 1.5,
                            ),
                          ),
                  ),
          ),
        ),
        // #Pangea
        // if (presenceUserId != null)
        if (miniIcon != null)
          Positioned(
            bottom: presenceOffset?.dy ?? -3,
            right: presenceOffset?.dx ?? -3,
            child: miniIcon!,
          )
        else if (presenceUserId != null && size >= 32.0 && showPresence)
          // Pangea#
          PresenceBuilder(
            client: client,
            userId: presenceUserId,
            builder: (context, presence) {
              if (presence == null ||
                  (presence.presence == PresenceType.offline &&
                      presence.lastActiveTimestamp == null)) {
                return const SizedBox.shrink();
              }
              final dotColor = presence.presence.isOnline
                  ? Colors.green
                  : presence.presence.isUnavailable
                  ? Colors.orange
                  : Colors.grey;
              return Positioned(
                // #Pangea
                // bottom: -3,
                // right: -3,
                bottom: presenceOffset?.dy ?? -3,
                right: presenceOffset?.dx ?? -3,
                // Pangea#
                child: Container(
                  // #Pangea
                  // width: 16,
                  // height: 16,
                  width: (presenceSize ?? 10) + 6,
                  height: (presenceSize ?? 10) + 6,
                  // Pangea#
                  decoration: BoxDecoration(
                    color: presenceBackgroundColor ?? theme.colorScheme.surface,
                    borderRadius: BorderRadius.circular(32),
                  ),
                  alignment: Alignment.center,
                  child: Container(
                    // #Pangea
                    // width: 10,
                    // height: 10,
                    width: (presenceSize ?? 10),
                    height: (presenceSize ?? 10),
                    // Pangea#
                    decoration: BoxDecoration(
                      color: dotColor,
                      borderRadius: BorderRadius.circular(16),
                      border: Border.all(
                        width: 1,
                        color: theme.colorScheme.surface,
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
      ],
    );
    if (onTap == null) return container;
    return MouseRegion(
      cursor: SystemMouseCursors.click,
      child: GestureDetector(onTap: onTap, child: container),
    );
  }
}