Avatar video on the map (#812)

Resolves #795 

## What has been done:
- Added autoplay video support for `KonvaVideo` component
- Brought back video avatar on map

## Testing:
- [ ] Check if account with avatar image loads its image to the map pin
- [ ] Check if account with avatar video loads its video to the map pin
(example address `0xab7375daf14bc661a0c9aff8800d49a34b037a98`)
- [ ] Check if account with no avatar loads default image to the map pin

src/shared/components/KonvaVideo.tsx

@@ -33,13 +33,25 @@ export default function KonvaVideo({
     return element
   }, [src, loop])
 
-  // use Konva.Animation to redraw a layer
   useEffect(() => {
     if (!imageRef.current) return () => {}
 
-    videoElement.play()
+    // Source: https://stackoverflow.com/a/68128950
+    const handleVideoPLay = async () => {
+      const playPromise = videoElement.play()
+
+      if (playPromise !== undefined) {
+        playPromise.catch(() => {
+          videoElement.muted = true
+          videoElement.play()
+        })
+      }
+    }
+
+    handleVideoPLay()
     const imageLayer = imageRef.current.getLayer()
 
+    // use Konva.Animation to redraw a layer
     const animation = new Konva.Animation(() => {}, imageLayer)
     animation.start()
 

src/ui/Island/IslandRealmsDetails/RealmPin.tsx

@@ -10,8 +10,7 @@ import {
 } from "redux-state"
 import { FIGMA_FACTOR, getRealmMapData } from "shared/constants"
 import { getPinShift } from "shared/utils"
-// import KonvaVideo from "shared/components/KonvaVideo"
-import portraitImg from "shared/assets/portrait.png"
+import KonvaVideo from "shared/components/KonvaVideo"
 
 type RealmPinAvatarProps = {
   x: number
@@ -23,25 +22,23 @@ function RealmPinAvatar({ x, y }: RealmPinAvatarProps) {
   const avatarType = useDappSelector(selectWalletAvatarType)
 
   const [avatarImage] = useImage(avatar)
-  const [portrait] = useImage(portraitImg)
 
-  // TODO: implement video avatar support
-  // if (avatarType === "video/mp4") {
-  //   return (
-  //     <KonvaVideo
-  //       src={avatar}
-  //       x={x + 32}
-  //       y={y + 28}
-  //       height={58 * FIGMA_FACTOR.Y}
-  //       width={58 * FIGMA_FACTOR.X}
-  //       videoProps={{ cornerRadius: 100 }}
-  //     />
-  //   )
-  // }
+  if (avatarType === "video/mp4") {
+    return (
+      <KonvaVideo
+        src={avatar}
+        x={x + 32}
+        y={y + 28}
+        height={58 * FIGMA_FACTOR.Y}
+        width={58 * FIGMA_FACTOR.X}
+        videoProps={{ cornerRadius: 100 }}
+      />
+    )
+  }
 
   return (
     <Image
-      image={avatarType === "video/mp4" ? portrait : avatarImage}
+      image={avatarImage}
       x={x + 32}
       y={y + 28}
       height={58 * FIGMA_FACTOR.Y}