From 33aead5e7599c460410b606f03c2d107fda47001 Mon Sep 17 00:00:00 2001
From: Yuri <yuri@readyplayer.me>
Date: Mon, 5 Aug 2024 12:08:20 +0300
Subject: [PATCH] feat(smartAvatar): ACT-761 add smartAvatar component

---
 .../SmartAvatar/SmartAvatar.component.tsx     | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/SmartAvatar/SmartAvatar.component.tsx

diff --git a/src/components/SmartAvatar/SmartAvatar.component.tsx b/src/components/SmartAvatar/SmartAvatar.component.tsx
new file mode 100644
index 00000000..c5fd44a3
--- /dev/null
+++ b/src/components/SmartAvatar/SmartAvatar.component.tsx
@@ -0,0 +1,35 @@
+import React, { FC, useMemo } from 'react';
+import { useDeviceDetector, DeviceDetectorHookProps } from 'src/hooks/useDeviceDetector/use-device-detector.hook';
+import qs from 'qs';
+import { Avatar, AvatarProps } from '../Avatar';
+
+export interface SmartAvatarProps extends AvatarProps, DeviceDetectorHookProps {}
+
+/**
+ * Detects the device performance and adjusts the avatar props accordingly
+ */
+
+const SmartAvatar: FC<SmartAvatarProps> = (props) => {
+  const deviceDetector = useDeviceDetector(props);
+
+  const updatedProps: AvatarProps = useMemo(() => {
+    if (props.modelSrc instanceof Blob) {
+      return props;
+    }
+    const [modelUrl, originalQueryParams] = props.modelSrc.split('?');
+
+    const queryStringParams = {
+      ...qs.parse(originalQueryParams),
+      ...qs.parse(deviceDetector?.toQueryString() || '')
+    };
+
+    return {
+      ...props,
+      modelSrc: `${modelUrl}?${qs.stringify(queryStringParams)}`
+    };
+  }, [props, deviceDetector]);
+
+  return <Avatar {...updatedProps} />;
+};
+
+export default SmartAvatar;