Merge pull request #1834 from warrickct/recording-ui

Recording UI

ts/components/session/conversation/SessionRecording.tsx

@@ -33,21 +33,20 @@ function getTimestamp(asInt = false) {
   return asInt ? Math.floor(timestamp) : timestamp;
 }
 
-export interface StyledFlexWrapperProps {
+interface StyledFlexWrapperProps {
-  flexDirection: 'row' | 'column';
   marginHorizontal: string;
 }
 
 /**
  * Generic wrapper for quickly passing in theme constant values.
  */
-export const StyledFlexWrapper = styled.div`
+const StyledFlexWrapper = styled.div<StyledFlexWrapperProps>`
   display: flex;
-  flex-direction: ${(props: StyledFlexWrapperProps) => props.flexDirection};
+  flex-direction: row;
   align-items: center;
 
   .session-button {
-    margin: ${(props: StyledFlexWrapperProps) => props.marginHorizontal};
+    margin: ${props => props.marginHorizontal};
   }
 `;
 
@@ -126,12 +125,8 @@ class SessionRecordingInner extends React.Component<Props, State> {
 
     return (
       <div role="main" className="session-recording" tabIndex={0} onKeyDown={this.onKeyDown}>
-        <div
+        <div className="session-recording--actions">
-          className="session-recording--actions"
+          <StyledFlexWrapper marginHorizontal={Constants.UI.SPACING.marginXs}>
-          onMouseEnter={this.handleHoverActions}
-          onMouseLeave={this.handleUnhoverActions}
-        >
-          <StyledFlexWrapper flexDirection="row" marginHorizontal={Constants.UI.SPACING.marginXs}>
             {isRecording && (
               <SessionIconButton
                 iconType={SessionIconType.Pause}
@@ -203,14 +198,6 @@ class SessionRecordingInner extends React.Component<Props, State> {
     );
   }
 
-  private handleHoverActions() {
-    if (this.state.isRecording && !this.state.actionHover) {
-      this.setState({
-        actionHover: true,
-      });
-    }
-  }
-
   private async timerUpdate() {
     const { nowTimestamp, startTimestamp } = this.state;
     const elapsedTime = nowTimestamp - startTimestamp;
@@ -225,14 +212,6 @@ class SessionRecordingInner extends React.Component<Props, State> {
     });
   }
 
-  private handleUnhoverActions() {
-    if (this.state.isRecording && this.state.actionHover) {
-      this.setState({
-        actionHover: false,
-      });
-    }
-  }
-
   private stopRecordingState() {
     this.setState({
       isRecording: false,