@100mslive/roomkit-react 0.1.7-alpha.0 → 0.1.8-alpha.0

package/src/VideoTile/StyledVideoTile.tsx

@@ -56,20 +56,9 @@ const Info = styled('div', {
 });
 
 const AttributeBox = styled('div', {
-  position: 'absolute',
-  color: '$on_primary_high',
-  w: '$12',
-  h: '$12',
-  bg: '$secondary_dim',
-  r: '$round',
-  ...flexCenter,
-});
-
-const AudioIndicator = styled('div', {
   position: 'absolute',
   top: '$4',
-  right: '$4',
-  color: '$on_primary_high',
+  color: '$on_secondary_high',
   bg: '$secondary_dim',
   borderRadius: '$round',
   width: '$14',
@@ -91,12 +80,19 @@ const AudioIndicator = styled('div', {
         height: '$13',
       },
     },
+    position: {
+      left: { left: '$4' },
+      right: { right: '$4' },
+    },
   },
   defaultVariants: {
     size: 'medium',
+    position: 'left',
   },
 });
 
+const AudioIndicator = styled(AttributeBox, { defaultVariants: { position: 'right' } });
+
 const FullScreenButton = styled('button', {
   width: '2.25rem',
   height: '2.25rem',
@@ -136,9 +132,9 @@ interface VideoTileType {
   Container: typeof Container;
   Overlay: typeof Overlay;
   Info: typeof Info;
-  AudioIndicator: typeof AudioIndicator;
   AvatarContainer: typeof AvatarContainer;
   AttributeBox: typeof AttributeBox;
+  AudioIndicator: typeof AudioIndicator;
   FullScreenButton: typeof FullScreenButton;
 }
 
@@ -147,8 +143,8 @@ export const StyledVideoTile: VideoTileType = {
   Container,
   Overlay,
   Info,
-  AudioIndicator,
   AvatarContainer,
   AttributeBox,
+  AudioIndicator,
   FullScreenButton,
 };