Merge pull request #1417 from Bilb/fix-recording-view

Fix recording view

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -81,7 +81,6 @@ interface State {
   message: string;
   showRecordingView: boolean;
 
-  mediaSetting: boolean | null;
   showEmojiPanel: boolean;
   voiceRecording?: Blob;
   ignoredLink?: string; // set the the ignored url when users closed the link preview
@@ -115,7 +114,6 @@ const getDefaultState = () => {
     message: '',
     voiceRecording: undefined,
     showRecordingView: false,
-    mediaSetting: null,
     showEmojiPanel: false,
     ignoredLink: undefined,
     stagedLinkPreview: undefined,
@@ -177,11 +175,6 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.fetchUsersForGroup = this.fetchUsersForGroup.bind(this);
   }
 
-  public async componentWillMount() {
-    const mediaSetting = await window.getSettingValue('media-permissions');
-    this.setState({ mediaSetting });
-  }
-
   public componentDidMount() {
     setTimeout(this.focusCompositionBox, 100);
   }
@@ -937,9 +930,9 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.onExitVoiceNoteView();
   }
 
-  private onLoadVoiceNoteView() {
+  private async onLoadVoiceNoteView() {
     // Do stuff for component, then run callback to SessionConversation
-    const { mediaSetting } = this.state;
+    const mediaSetting = await window.getSettingValue('media-permissions');
 
     if (mediaSetting) {
       this.setState({

ts/components/session/conversation/SessionRecording.tsx

@@ -382,7 +382,6 @@ class SessionRecordingInner extends React.Component<Props, State> {
         this.pauseAudio();
         return;
       }
-
       requestAnimationFrame(drawSweepingTimeline);
     };
 
@@ -497,7 +496,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
     processor.onaudioprocess = () => {
       const streamParams = { stream, media, input, processor };
       this.setState({ streamParams });
-      const { textColorSubtle } = this.props.theme.colors;
+      const { textColorSubtleNoOpacity } = this.props.theme.colors;
 
       const {
         width,
@@ -554,7 +553,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
           const offsetY = Math.ceil(height / 2 - barHeight / 2);
 
           if (canvasContext) {
-            canvasContext.fillStyle = textColorSubtle;
+            canvasContext.fillStyle = textColorSubtleNoOpacity;
             this.drawRoundedRect(canvasContext, offsetX, offsetY, barHeight);
           }
         }
@@ -612,7 +611,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
       minBarHeight,
     } = this.state.canvasParams;
 
-    const { textColorSubtle } = this.props.theme.colors;
+    const { textColorSubtleNoOpacity } = this.props.theme.colors;
 
     const numBars = width / (barPadding + barWidth);
 
@@ -668,7 +667,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
           const offsetX = Math.ceil(i * (barWidth + barPadding));
           const offsetY = Math.ceil(height / 2 - barHeight / 2);
 
-          canvasContext.fillStyle = textColorSubtle;
+          canvasContext.fillStyle = textColorSubtleNoOpacity;
 
           this.drawRoundedRect(canvasContext, offsetX, offsetY, barHeight);
         }

ts/state/ducks/SessionTheme.tsx

@@ -49,6 +49,7 @@ export const lightTheme: DefaultTheme = {
     // text
     textColor: black,
     textColorSubtle: `${black}99`,
+    textColorSubtleNoOpacity: '#52514f',
     textColorOpposite: white,
     textHighlight: `${black}33`,
     // inbox
@@ -103,6 +104,7 @@ export const darkTheme = {
     // text
     textColor: white,
     textColorSubtle: `${white}99`,
+    textColorSubtleNoOpacity: '#7f7d7d',
     textColorOpposite: black,
     textHighlight: `${accentDarkTheme}99`,
     // inbox

ts/styled.d.ts

@@ -35,6 +35,7 @@ declare module 'styled-components' {
       // text
       textColor: string;
       textColorSubtle: string;
+      textColorSubtleNoOpacity: string;
       textColorOpposite: string;
       textHighlight: string;
       // inbox