merge next

src/widgets/audio-player.jsx

@@ -0,0 +1,265 @@
+// Audio recorder widget.
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { secondsToTime } from '../lib/strformat';
+import { base64ToIntArray } from '../lib/blob-helpers';
+
+// Make canvas bigger than the element size to reduce blurring.
+const CANVAS_UPSCALING = 2.0;
+// Thickness of a visualization bar.
+const LINE_WIDTH = 3 * CANVAS_UPSCALING;
+// Spacing between two visualization bars.
+const SPACING = 2 * CANVAS_UPSCALING;
+// Color of histogram bars.
+const BAR_COLOR = '#bbb';
+const BAR_COLOR_DARK = '#888';
+const THUMB_COLOR = '#666';
+// Minimum number of amplitude bars to draw.
+const MIN_PREVIEW_LENGTH = 16;
+
+export default class AudioPlayer extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    let preview = base64ToIntArray(this.props.preview);
+    if (Array.isArray(preview) && preview.length < MIN_PREVIEW_LENGTH) {
+      preview = null;
+    }
+
+    this.state = {
+      canPlay: false,
+      playing: false,
+      currentTime: '0:00',
+      duration: this.props.duration > 0 ? secondsToTime(this.props.duration / 1000) : '-:--',
+      longMin: this.props.duration >= 600000,
+      preview: preview
+    };
+
+    this.initAudio = this.initAudio.bind(this);
+    this.initCanvas = this.initCanvas.bind(this);
+    this.resampleBars = this.resampleBars.bind(this);
+    this.visualize = this.visualize.bind(this);
+
+    this.handlePlay = this.handlePlay.bind(this);
+    this.handleSeek = this.handleSeek.bind(this);
+    this.handleError = this.handleError.bind(this);
+
+    this.audioPlayer = null;
+
+    this.viewBuffer = [];
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    if (this.props.src) {
+      this.initAudio();
+    }
+
+    if (this.state.preview) {
+      this.initCanvas();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.audioPlayer) {
+      this.audioPlayer.oncanplay = null;
+      this.audioPlayer.ontimeupdate = null;
+      this.audioPlayer.onended = null;
+      this.audioPlayer.pause();
+      this.audioPlayer = null;
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.src != prevProps.src) {
+      this.initAudio();
+    }
+
+    if (this.props.preview != prevProps.preview) {
+      let preview = base64ToIntArray(this.props.preview);
+      if (Array.isArray(preview) && preview.length < MIN_PREVIEW_LENGTH) {
+        preview = null;
+      }
+      this.setState({preview: preview}, this.initCanvas);
+    }
+  }
+
+  initAudio() {
+    this.audioPlayer = new Audio(this.props.src);
+    this.audioPlayer.oncanplay = _ => this.setState({canPlay: true});
+    this.audioPlayer.ontimeupdate = _ => this.setState({
+      currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)
+    });
+    this.audioPlayer.onended = _ => {
+      this.audioPlayer.currentTime = 0;
+      this.setState({playing: false, currentTime: secondsToTime(0, this.state.longMin)})
+    }
+  }
+
+  initCanvas() {
+    // Force canvas aspect ration to match one of the element + upscale canvas to reduce blurring.
+    this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
+    this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
+
+    this.canvasContext = this.canvasRef.current.getContext('2d');
+    this.canvasContext.lineCap = 'round';
+
+    this.viewBuffer = this.resampleBars(this.state.preview);
+    this.visualize();
+  }
+
+  // Draw amplitude of sound.
+  visualize() {
+    if (!this.canvasRef.current) {
+      return;
+    }
+
+    const width = this.effectiveWidth;
+    const height = this.canvasRef.current.height;
+
+    this.canvasContext.lineWidth = LINE_WIDTH;
+
+    const drawFrame = () => {
+      if (!this.canvasRef.current) {
+        // The component is unmounted.
+        return;
+      }
+
+      this.canvasContext.clearRect(0, 0, this.canvasRef.current.width, height);
+
+      if (this.viewBuffer) {
+        if (this.state.playing) {
+          window.requestAnimationFrame(drawFrame);
+        }
+
+        // Current pplayback position.
+        const thumbAt = this.props.duration ?
+          Math.max(0, Math.min(this.audioPlayer.currentTime * 1000 / this.props.duration, 1)) * (width - LINE_WIDTH * 2) : -1;
+
+        // Draw amplitude bars.
+        this.canvasContext.beginPath();
+        this.canvasContext.strokeStyle = BAR_COLOR_DARK;
+        for (let i = 0; i < this.viewBuffer.length; i++) {
+          let x = 1 + i * (LINE_WIDTH + SPACING) + LINE_WIDTH * 0.5;
+          let y = this.viewBuffer[i] * height * 0.9;
+
+          const color = x < thumbAt ? BAR_COLOR_DARK : BAR_COLOR;
+          if (this.canvasContext.strokeStyle != color) {
+            this.canvasContext.stroke();
+            this.canvasContext.beginPath();
+            this.canvasContext.strokeStyle = color;
+          }
+
+          this.canvasContext.moveTo(x, (height - y) * 0.5);
+          this.canvasContext.lineTo(x, height * 0.5 + y * 0.5);
+        }
+        // Actually draw the bars on canvas.
+        this.canvasContext.stroke();
+
+        // Draw thumb.
+        if (this.props.duration) {
+          this.canvasContext.beginPath();
+          this.canvasContext.arc(thumbAt + LINE_WIDTH * 2, height * 0.5, LINE_WIDTH * 2, 0, 2 * Math.PI);
+          this.canvasContext.fillStyle = THUMB_COLOR;
+          this.canvasContext.fill();
+        }
+      }
+    }
+
+    drawFrame();
+  }
+
+  // Quick and dirty downsampling of the original preview bars into a smaller (or equal) number of bars we can display here.
+  resampleBars(original) {
+    const barCount = Math.min(original.length, ((this.canvasRef.current.width - SPACING) / (LINE_WIDTH + SPACING)) | 0);
+    const factor = original.length / barCount;
+    let amps = [];
+    let max = -1;
+    for (let i=0;i<barCount;i++) {
+      let lo = (i * factor) | 0; // low bound;
+      let hi = ((i + 1) * factor) | 0; // high bound;
+      let amp = 0.0;
+      for (let j=lo; j<hi; j++) {
+        amp += original[j]
+      }
+      amps[i] = Math.max(0, amp / (hi - lo));
+      max = Math.max(amps[i], max);
+    }
+
+    if (max > 0) {
+      // Remove extra padding on the right due to fractional bar which is not drawn.
+      this.effectiveWidth = barCount * (LINE_WIDTH + SPACING) + SPACING;
+      return amps.map(a => a / max);
+    }
+    return null;
+  }
+
+  handlePlay(e) {
+    e.preventDefault();
+    if (!this.state.canPlay) {
+      return;
+    }
+    if (this.state.playing) {
+      this.audioPlayer.pause();
+      this.setState({playing: false});
+    } else {
+      this.audioPlayer.play();
+      this.setState({playing: true}, this.visualize);
+    }
+  }
+
+  handleError(err) {
+    console.log(err);
+  }
+
+  handleSeek(e) {
+    e.preventDefault();
+    if (e.target && this.props.duration) {
+      const rect = e.target.getBoundingClientRect();
+      const offset = (e.clientX - rect.left) / this.effectiveWidth * CANVAS_UPSCALING;
+      this.audioPlayer.currentTime = this.props.duration * offset / 1000;
+      this.setState({currentTime: secondsToTime(this.audioPlayer.currentTime, this.state.longMin)});
+      if (!this.state.playing && this.state.preview) {
+        this.visualize();
+      }
+    }
+  }
+
+  render() {
+    const playClass = 'material-icons' +
+      (this.props.short ? '' : ' large') +
+      (this.state.canPlay ? '' : ' disabled');
+    const play = (<a href="#" onClick={this.handlePlay} title="Play">
+        <i className={playClass}>{this.state.playing ? 'pause_circle' :
+          (this.state.canPlay ? 'play_circle' : 'not_interested')}</i>
+      </a>);
+    return (<div className="audio-player">{this.props.short ?
+      <>
+        <div>
+          {this.state.preview ?
+            <canvas className="playback" ref={this.canvasRef} onClick={this.handleSeek} /> :
+            <div className="playback"> - </div>
+          }
+        </div>
+        {play}
+      </>
+    :
+      <>
+        {play}
+        <div>
+          {this.state.preview ?
+            <canvas className="playback" ref={this.canvasRef} onClick={this.handleSeek} /> :
+            <div className="playback">
+              <FormattedMessage
+                id="preview_unavailable" defaultMessage="unavailable" description="Message shown when media preview is not available" />
+            </div>
+          }
+          <div className="timer">{this.state.currentTime}/{this.state.duration}</div>
+        </div>
+      </>
+    }
+    </div>);
+  }
+}

src/widgets/audio-recorder.jsx

@@ -0,0 +1,349 @@
+// Audio recorder widget.
+
+import React from 'react';
+
+import AudioPlayer from './audio-player.jsx';
+// Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=642012
+import fixWebmDuration from 'fix-webm-duration';
+
+import { intArrayToBase64 } from '../lib/blob-helpers.js'
+import { secondsToTime } from '../lib/strformat';
+
+// FFT resolution.
+const BUFFER_SIZE = 256;
+// Make canvas bigger than the element size to reduce blurring.
+const CANVAS_UPSCALING = 2.0;
+// Thickness of a visualization bar.
+const LINE_WIDTH = 3 * CANVAS_UPSCALING;
+// Spacing between two visualization bars.
+const SPACING = 2 * CANVAS_UPSCALING;
+// Duration represented by one visualization bar.
+const MILLIS_PER_BAR = 100;
+// Color of histogram bars
+const BAR_COLOR = '#bbb';
+// Vertical scaling for visualization bars.
+const BAR_SCALE = 64.0;
+// Minimum duration of a recording in milliseconds.
+const MIN_DURATION = 200;
+// Maximum duration of a recording in milliseconds (10 min).
+const MAX_DURATION = 600000;
+// Number of bars in preview.
+const VISUALIZATION_BARS = 96;
+// Maximum number of samples per bar.
+const MAX_SAMPLES_PER_BAR = 10;
+
+// Recording format.
+const AUDIO_MIME_TYPE = 'audio/webm';
+
+export default class AudioRecorder extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      enabled: true,
+      audioRecord: null,
+      recording: true,
+      paused: false,
+      duration: '0:00',
+      blobUrl: null,
+      preview: null
+    };
+
+    this.visualize = this.visualize.bind(this);
+    this.initMediaRecording = this.initMediaRecording.bind(this);
+    this.initCanvas = this.initCanvas.bind(this);
+    this.getRecording = this.getRecording.bind(this);
+    this.cleanUp = this.cleanUp.bind(this);
+
+    this.handleResume = this.handleResume.bind(this);
+    this.handlePause = this.handlePause.bind(this);
+    this.handleDelete = this.handleDelete.bind(this);
+    this.handleDone = this.handleDone.bind(this);
+
+    this.durationMillis = 0;
+    this.startedOn = null;
+    this.viewBuffer = [];
+    this.canvasRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.stream = null;
+    this.mediaRecorder = null;
+    this.audioContext = null;
+    this.audioInput = null;
+    this.analyser = null;
+
+    this.audioChunks = [];
+
+    // Start recorder right away.
+    try {
+      navigator.mediaDevices.getUserMedia({audio: true, video: false}).then(this.initMediaRecording, this.props.onError);
+    } catch (err) {
+      this.props.onError(err);
+    }
+  }
+
+  componentWillUnmount() {
+    this.startedOn = null;
+    if (this.stream) {
+      this.cleanUp();
+    }
+  }
+
+  // Draw amplitude of sound.
+  visualize() {
+    this.initCanvas();
+
+    const pcmData = new Uint8Array(this.analyser.frequencyBinCount);
+    const width = this.canvasWidth;
+    const height = this.canvasHeight;
+    // Number of bars.
+    const viewLength = (width / (LINE_WIDTH + SPACING)) | 0;
+    // Duration of audio which fits onto the screen.
+    const viewDuration = MILLIS_PER_BAR * viewLength;
+
+    this.canvasContext.lineWidth = LINE_WIDTH;
+    this.canvasContext.strokeStyle = BAR_COLOR;
+
+    let prevBarCount = 0;
+    let volume = 0.0;
+    let countPerBar = 0;
+    const drawFrame = () => {
+      if (!this.startedOn) {
+        return;
+      }
+      window.requestAnimationFrame(drawFrame);
+
+      const duration = this.durationMillis + (Date.now() - this.startedOn);
+      // Update record length timer.
+      this.setState({duration: secondsToTime(duration / 1000)});
+
+      // Check if record is too long.
+      if (duration > MAX_DURATION) {
+        this.startedOn = null;
+        this.mediaRecorder.pause();
+        this.durationMillis += Date.now() - this.startedOn;
+        this.setState({enabled: false, recording: false, duration: secondsToTime(this.durationMillis / 1000)});
+      }
+
+      // Draw histogram.
+
+      // Get current waveform and calculate its amplitude.
+      this.analyser.getByteTimeDomainData(pcmData);
+      let amp = 0.0;
+      for (const amplitude of pcmData) {
+        amp += (amplitude - 127) ** 2;
+      }
+
+      // Sum the amplitude.
+      volume += Math.sqrt(amp/pcmData.length);
+      countPerBar ++;
+
+      let barCount = (duration / MILLIS_PER_BAR) | 0;
+      // Shift of the histogram along x-axis to make scrolling smooth. No need to shift if recording is too short.
+      const dx = viewDuration > duration ? 0 :
+        (duration - MILLIS_PER_BAR * barCount) / MILLIS_PER_BAR * (LINE_WIDTH + SPACING);
+
+      if (prevBarCount != barCount) {
+        prevBarCount = barCount;
+        // Add new amplitude visualization bar.
+        this.viewBuffer.push(volume/countPerBar);
+        volume = 0.0;
+        countPerBar = 0;
+        if (this.viewBuffer.length > viewLength) {
+          // Keep at most 'viewLength' amplitude bars.
+          this.viewBuffer.shift();
+        }
+      }
+
+      // Clear canvas.
+      this.canvasContext.clearRect(0, 0, width, height);
+
+      // Draw amplitude bars.
+      this.canvasContext.beginPath();
+      for (let i = 0; i < this.viewBuffer.length; i++) {
+        let x = i * (LINE_WIDTH + SPACING) - dx;
+        let y = Math.min(this.viewBuffer[i] / BAR_SCALE, 0.9) * height;
+
+        this.canvasContext.moveTo(x, (height - y) * 0.5);
+        this.canvasContext.lineTo(x, height * 0.5 + y * 0.5);
+      }
+      // Actually draw the bars on canvas.
+      this.canvasContext.stroke();
+    }
+
+    drawFrame();
+  }
+
+  handlePause(e) {
+    e.preventDefault();
+    this.mediaRecorder.pause();
+    this.mediaRecorder.requestData();
+    this.durationMillis += Date.now() - this.startedOn;
+    this.startedOn = null;
+    this.setState({recording: false});
+  }
+
+  handleResume(e) {
+    e.preventDefault();
+    if (this.state.enabled) {
+      this.startedOn = Date.now();
+      this.mediaRecorder.resume();
+      this.setState({recording: true}, this.visualize);
+    }
+  }
+
+  handleDelete(e) {
+    e.preventDefault();
+    this.durationMillis = 0;
+    this.startedOn = null;
+    this.mediaRecorder.stop();
+    this.cleanUp();
+    this.setState({recording: false});
+  }
+
+  handleDone(e) {
+    e.preventDefault();
+    this.setState({recording: false});
+    if (this.startedOn) {
+      this.durationMillis += Date.now() - this.startedOn;
+      this.startedOn = null;
+    }
+    // Stop recording and return data.
+    if (this.mediaRecorder) {
+      this.mediaRecorder.stop();
+    }
+  }
+
+  initCanvas() {
+    this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
+    this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
+
+    this.canvasContext = this.canvasRef.current.getContext('2d');
+    this.canvasContext.lineCap = 'round';
+    // To reduce line blurring.
+    this.canvasContext.translate(0.5, 0.5);
+    this.canvasWidth = this.canvasRef.current.width;
+    this.canvasHeight = this.canvasRef.current.height;
+  }
+
+  initMediaRecording(stream) {
+    this.stream = stream;
+    this.mediaRecorder = new MediaRecorder(stream, {mimeType: AUDIO_MIME_TYPE});
+
+    // The following code is needed for visualization.
+    this.audioContext = new AudioContext();
+    this.audioInput = this.audioContext.createMediaStreamSource(stream);
+    this.analyser = this.audioContext.createAnalyser();
+    this.analyser.fftSize = BUFFER_SIZE;
+    this.audioInput.connect(this.analyser);
+
+    this.mediaRecorder.onstop = _ => {
+      if (this.durationMillis > MIN_DURATION) {
+        this.getRecording(this.mediaRecorder.mimeType, this.durationMillis)
+          .then(result => this.props.onFinished(result.url, result.preview, this.durationMillis));
+      } else {
+        this.props.onDeleted();
+      }
+      this.cleanUp();
+    }
+
+    this.mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) {
+        this.audioChunks.push(e.data);
+      }
+
+      if (this.mediaRecorder.state != 'inactive') {
+        this.getRecording(this.mediaRecorder.mimeType).then(result => {
+          this.setState({
+            blobUrl: result.url,
+            preview: result.preview
+          });
+        });
+      }
+    }
+
+    this.durationMillis = 0;
+    this.startedOn = Date.now();
+    this.mediaRecorder.start();
+    this.visualize();
+  }
+
+  // Obtain data in a form sutable for sending or playing back.
+  // If duration is valid, apply fix for Chrome's WebM duration bug.
+  getRecording(mimeType, duration) {
+    let blob = new Blob(this.audioChunks, {type: mimeType || AUDIO_MIME_TYPE});
+    return (duration > 0 ? fixWebmDuration(blob, duration, {logger: false}) : Promise.resolve(blob))
+      .then(fixedBlob => { blob = fixedBlob; return fixedBlob.arrayBuffer(); })
+      .then(arrayBuff => this.audioContext.decodeAudioData(arrayBuff))
+      .then(decoded => this.createPreview(decoded))
+      .then(preview => ({url: window.URL.createObjectURL(blob), preview: intArrayToBase64(preview)}));
+  }
+
+  // Preview must be calculated at the source: Chrome does not allow background AudioContext.
+  createPreview(audio) {
+    const data = audio.getChannelData(0);
+    // Number of amplitude bars in preview.
+    const viewLength = Math.min(data.length, VISUALIZATION_BARS);
+    // The number of samples in each bar.
+    const totalSPB = (data.length / viewLength) | 0;
+    // Distance between samples: we are going to take just a fracton of samples.
+    const samplingRate = Math.max(1, (totalSPB / MAX_SAMPLES_PER_BAR) | 0);
+
+    let buffer = [];
+    let max = -1;
+    for (let i = 0; i < viewLength; i++) {
+      let amplitude = 0;
+      let count = 0;
+      for (let j = 0; j < totalSPB; j += samplingRate) {
+        amplitude += data[totalSPB * i + j] ** 2;
+        count ++;
+      }
+      const val = Math.sqrt(amplitude / count);
+      buffer.push(val);
+      max = Math.max(max, val);
+    }
+    // Normalize amplitude to 0..100.
+    if (max > 0) {
+      buffer = buffer.map(a => (100 * a / max) | 0);
+    }
+    return buffer;
+  }
+
+  cleanUp() {
+    this.audioInput.disconnect();
+    this.stream.getTracks().forEach(track => track.stop());
+  }
+
+  render() {
+    const resumeClass = 'material-icons ' + (this.state.enabled ? 'red' : 'gray');
+    return (
+      <div className="audio">
+        <a href="#" onClick={this.handleDelete} title="Delete">
+          <i className="material-icons gray">delete_outline</i>
+        </a>
+        {this.state.recording ?
+          <canvas ref={this.canvasRef} />
+          :
+          <AudioPlayer
+            src={this.state.blobUrl}
+            preview={this.state.preview}
+            duration={this.durationMillis}
+            short={true} />
+        }
+        <div className="duration">{this.state.duration}</div>
+        {this.state.recording ?
+          <a href="#" onClick={this.handlePause} title="Pause">
+            <i className="material-icons">pause_circle_outline</i>
+          </a> :
+          <a href="#" onClick={this.handleResume} title="Resume">
+            <i className={resumeClass}>radio_button_checked</i>
+          </a>
+        }
+        <a href="#" onClick={this.handleDone} title="Send">
+          <i className="material-icons">send</i>
+        </a>
+      </div>
+    );
+  }
+}

src/widgets/avatar-upload.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import LetterTile from './letter-tile.jsx';
 import LoadSpinner from './load-spinner.jsx';
 
-import { sanitizeImageUrl } from '../lib/utils.js';
+import { sanitizeUrlForMime } from '../lib/utils.js';
 
 import { AVATAR_SIZE } from '../config.js';
 
@@ -44,7 +44,7 @@ export default class AvatarUpload extends React.Component {
             <i className="material-icons">clear</i>
           </a>}
         {this.state.source ?
-          <img src={this.props.tinode.authorizeURL(sanitizeImageUrl(this.state.source))} className="preview" /> :
+          <img src={this.props.tinode.authorizeURL(sanitizeUrlForMime(this.state.source, 'image'))} className="preview" /> :
           this.props.readOnly && this.props.uid ?
             <div className="avatar-box">
               <LetterTile

src/widgets/chat-message.jsx

@@ -1,8 +1,9 @@
-// Single message, sent or received.
+// Single chat message bubble, sent or received.
+
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import FormattedDuration from 'react-intl-formatted-duration';
-import { Drafty } from 'tinode-sdk';
+import { Drafty, Tinode } from 'tinode-sdk';
 
 import Attachment from './attachment.jsx';
 import LetterTile from './letter-tile.jsx';
@@ -111,11 +112,10 @@ class BaseChatMessage extends React.PureComponent {
   }
 
   render() {
-    const sideClass = this.props.deleted ? 'center' :
-      (this.props.sequence + ' ' + (this.props.response ? 'left' : 'right'));
+    const sideClass = this.props.sequence + ' ' + (this.props.response ? 'left' : 'right');
     const bubbleClass = (this.props.sequence == 'single' || this.props.sequence == 'last') ? 'bubble tip' : 'bubble';
-    const avatar = this.props.deleted ? null : (this.props.userAvatar || true);
-    const fullDisplay = (this.props.isGroup && this.props.response && !this.props.deleted &&
+    const avatar = this.props.userAvatar || true;
+    const fullDisplay = (this.props.isGroup && this.props.response &&
       (this.props.sequence == 'single' || this.props.sequence == 'last'));
 
     let content = this.props.content;
@@ -193,13 +193,12 @@ class BaseChatMessage extends React.PureComponent {
                   received={this.props.received} />
                 : null}
             </div>
-            {this.props.deleted || !this.props.showContextMenu ?
-              null :
+            {this.props.showContextMenu ?
               <span className="menuTrigger">
                 <a href="#" onClick={this.handleContextClick}>
                   <i className="material-icons">expand_more</i>
                 </a>
-              </span>
+              </span> : null
             }
           </div>
           {fullDisplay ?

src/widgets/contact-list.jsx

@@ -3,8 +3,7 @@
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { Drafty } from 'tinode-sdk';
-import Tinode from 'tinode-sdk';
+import { Drafty, Tinode } from 'tinode-sdk';
 
 import Contact from './contact.jsx';
 import ContactAction from './contact-action.jsx';
@@ -122,6 +121,7 @@ class ContactList extends React.Component {
               isVerified={c.trusted && c.trusted.verified}
               isStaff={c.trusted && c.trusted.staff}
               isDangerous={c.trusted && c.trusted.danger}
+              deleted={c._deleted}
               item={key}
               index={contactNodes.length}
               key={key} />

src/widgets/contact.jsx

@@ -4,7 +4,6 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 
 import ContactBadges from './contact-badges.jsx';
 import LetterTile from './letter-tile.jsx';
-import ReceivedMarker from './received-marker.jsx'
 import UnreadBadge from './unread-badge.jsx';
 
 import { Drafty } from 'tinode-sdk';
@@ -90,6 +89,7 @@ class Contact extends React.Component {
     const icon = deliveryMarker(this.props.received);
     const marker = icon ? <i className={'material-icons small space-right' +
       (icon.color ? ' ' + icon.color : '')}>{icon.name}</i> : null;
+    const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
 
     return (
       <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
@@ -98,16 +98,19 @@ class Contact extends React.Component {
             tinode={this.props.tinode}
             avatar={avatar}
             title={this.props.title}
-            topic={this.props.item} />
-          {this.props.showOnline ? <span className={online} /> :
-            (this.props.showCheckmark && this.props.selected ?
+            topic={this.props.item}
+            deleted={this.props.deleted} />
+          {this.props.deleted ? <i className="deleted material-icons">cancel</i> :
+            this.props.showOnline ? <span className={online} /> :
+            (this.props.showCheckmark && this.props.selected) ?
             <i className="checkmark material-icons">check_circle</i>
-            : null)}
+            : null}
         </div>
         <div className="text-box">
-          <div><span className="contact-title">{title}</span>
+          <div><span className={titleClass}>{title}</span>
             {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
-            <ContactBadges badges={icon_badges} /><UnreadBadge count={this.props.unread} />
+            <ContactBadges badges={icon_badges} />
+            {!this.props.deleted ? <UnreadBadge count={this.props.unread} /> : null}
           </div>
           {this.props.showMode ?
             <span><ContactBadges badges={badges} /></span> :

src/widgets/context-menu.jsx

@@ -237,7 +237,7 @@ class ContextMenu extends React.Component {
             (() => {
               const topic = this.props.tinode.getTopic(params.topicName);
               if (!topic) {
-                console.log("Topic not found: ", params.topicName);
+                console.warn("Topic not found: ", params.topicName);
                 return;
               }
               return topic.delTopic(true).catch((err) => {
@@ -258,7 +258,7 @@ class ContextMenu extends React.Component {
         handler: (params, errorHandler) => {
           const topic = this.props.tinode.getTopic(params.topicName);
           if (!topic) {
-            console.log("Topic not found: ", params.topicName);
+            console.warn("Topic not found: ", params.topicName);
             return;
           }
           return topic.archive(true).catch((err) => {
@@ -274,7 +274,7 @@ class ContextMenu extends React.Component {
         handler: (params, errorHandler) => {
           const topic = this.props.tinode.getTopic(params.topicName);
           if (!topic) {
-            console.log("Topic not found: ", params.topicName);
+            console.warn("Topic not found: ", params.topicName);
             return;
           }
           return topic.archive(false).catch((err) => {
@@ -296,7 +296,7 @@ class ContextMenu extends React.Component {
         handler: (params, errorHandler) => {
           const topic = this.props.tinode.getTopic(params.topicName);
           if (!topic || !params.user) {
-            console.log("Topic or user not found: '" + params.topicName + "', '" + params.user + "'");
+            console.warn("Topic or user not found: '" + params.topicName + "', '" + params.user + "'");
             return;
           }
           return topic.delSubscription(params.user).catch((err) => {
@@ -378,7 +378,7 @@ class ContextMenu extends React.Component {
   deleteMessages(all, hard, params, errorHandler) {
     const topic = this.props.tinode.getTopic(params.topicName);
     if (!topic) {
-      console.log("Topic not found: ", params.topicName);
+      console.warn("Topic not found: ", params.topicName);
       return;
     }
 
@@ -420,7 +420,7 @@ class ContextMenu extends React.Component {
   topicPermissionSetter(mode, params, errorHandler) {
     const topic = this.props.tinode.getTopic(params.topicName);
     if (!topic) {
-      console.log("Topic not found", params.topicName);
+      console.warn("Topic not found", params.topicName);
       return;
     }
 

src/widgets/forward-dialog.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Tinode from 'tinode-sdk';
+import { Tinode } from 'tinode-sdk';
 
 import ContactList from './contact-list.jsx';
 import SearchContacts from './search-contacts.jsx';

src/widgets/letter-tile.jsx

@@ -1,29 +1,29 @@
 import React from 'react';
 
-import Tinode from 'tinode-sdk';
+import { Tinode } from 'tinode-sdk';
 
 import { idToColorClass } from '../lib/strformat.js';
-import { sanitizeImageUrl } from '../lib/utils.js';
+import { sanitizeUrlForMime } from '../lib/utils.js';
 
 export default class LetterTile extends React.PureComponent {
   render() {
     let avatar;
     if (this.props.avatar === true) {
-      const isGroup = (Tinode.topicType(this.props.topic) == 'grp');
+      const isGroup = Tinode.isGroupTopicName(this.props.topic);
       const iconColor = idToColorClass(this.props.topic, isGroup);
       if (this.props.topic && this.props.title && this.props.title.trim()) {
         const letter = this.props.title.trim().charAt(0);
-        const className = 'lettertile ' + iconColor;
+        const className = 'lettertile ' + iconColor + (this.props.deleted ? ' disabled' : '');
         avatar = (<div className={className}><div>{letter}</div></div>)
       } else {
-        const className = 'material-icons ' + iconColor;
-        avatar = isGroup ?
-          <i className={className}>group</i> : <i className={className}>person</i>;
+        const className = 'material-icons ' + iconColor + (this.props.deleted ? ' disabled' : '');
+        avatar = isGroup ? <i className={className}>group</i> : <i className={className}>person</i>;
       }
     } else if (this.props.avatar) {
-      const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
+      const url = this.props.tinode.authorizeURL(sanitizeUrlForMime(this.props.avatar, 'image'));
       // If avatar image is invalid, show a placeholder.
-      avatar = <img className="avatar" alt="avatar" src={url}
+      const className = 'avatar' + (this.props.deleted ? ' deleted' : '');
+      avatar = <img className={className} alt="avatar" src={url}
         onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
     } else {
       avatar = null;

src/widgets/meta-message.jsx

@@ -0,0 +1,41 @@
+// Message bubble with non-payload content, such as an indicator of deleted content or a date stamp.
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default class MetaMessage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let content = null;
+    let bubbleClass = 'bubble';
+    if (this.props.deleted) {
+      // Message represents a range of deleted messages.
+      content = <><i className="material-icons gray">block</i> <i className="gray">
+        <FormattedMessage id="deleted_content"
+          defaultMessage="content deleted" description="Shown when messages are deleted" />
+      </i></>
+      bubbleClass += ' deleted';
+    } else if (this.props.date) {
+      // A date badge.
+      content = <>{this.props.date}</>
+      bubbleClass += ' date';
+    }
+
+    if (!content) {
+      return <>{null}</>
+    }
+
+    return (
+      <li className="meta">
+        <div className={bubbleClass}>
+          <div className="message-content">
+            {content}
+          </div>
+        </div>
+      </li>
+    );
+  }
+};

src/widgets/received-marker.jsx

@@ -2,9 +2,8 @@
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import Tinode from 'tinode-sdk';
+import { Tinode } from 'tinode-sdk';
 
-import { shortDateFormat } from '../lib/strformat.js';
 import { deliveryMarker } from '../lib/utils.js';
 
 const messages = defineMessages({
@@ -29,7 +28,7 @@ class ReceivedMarker extends React.PureComponent {
     } else if (this.props.received == Tinode.MESSAGE_STATUS_FAILED) {
       timestamp = formatMessage(messages.message_sending_failed);
     } else {
-      timestamp = shortDateFormat(this.props.timestamp, this.props.intl.locale);
+      timestamp = this.props.timestamp.toLocaleTimeString(this.props.intl.locale, { timeStyle: 'short' });
     }
 
     const icon = deliveryMarker(this.props.received);

src/widgets/search-contacts.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Tinode from 'tinode-sdk';
+import { Tinode } from 'tinode-sdk';
 
 export default class SearchContacts extends React.PureComponent {
   constructor(props) {

src/widgets/send-message.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Drafty } from 'tinode-sdk';
 
+import AudioRecorder from './audio-recorder.jsx';
+
 import { KEYPRESS_DELAY } from '../config.js';
 import { filePasted } from '../lib/blob-helpers.js';
 import { replyFormatter } from '../lib/formatters.js';
@@ -42,6 +44,8 @@ class SendMessage extends React.PureComponent {
     this.state = {
       quote: null,
       message: '',
+      audioRec: false,
+      audioAvailable: !!navigator.mediaDevices.getUserMedia,
       // Make initial keypress time as if it happened 5001 milliseconds in the past.
       keypressTimestamp: new Date().getTime() - KEYPRESS_DELAY - 1
     };
@@ -49,6 +53,7 @@ class SendMessage extends React.PureComponent {
     this.handlePasteEvent = this.handlePasteEvent.bind(this);
     this.handleAttachImage = this.handleAttachImage.bind(this);
     this.handleAttachFile = this.handleAttachFile.bind(this);
+    this.handleAttachAudio = this.handleAttachAudio.bind(this);
     this.handleSend = this.handleSend.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleMessageTyping = this.handleMessageTyping.bind(this);
@@ -77,7 +82,9 @@ class SendMessage extends React.PureComponent {
       this.messageEditArea.focus();
     }
 
-    if (prevProps.reply != this.props.reply) {
+    if (prevProps.topicName != this.props.topicName) {
+      this.setState({message: '', audioRec: false, quote: null});
+    } else if (prevProps.reply != this.props.reply) {
       this.setState({quote: this.formatReply()});
     }
   }
@@ -118,7 +125,6 @@ class SendMessage extends React.PureComponent {
   }
 
   handleAttachFile(e) {
-    const {formatMessage} = this.props.intl;
     if (e.target.files && e.target.files.length > 0) {
       this.props.onAttachFile(e.target.files[0]);
     }
@@ -126,6 +132,11 @@ class SendMessage extends React.PureComponent {
     e.target.value = '';
   }
 
+  handleAttachAudio(url, preview, duration) {
+    this.setState({audioRec: false});
+    this.props.onAttachAudio(url, preview, duration);
+  }
+
   handleSend(e) {
     e.preventDefault();
     const message = this.state.message.trim();
@@ -137,6 +148,13 @@ class SendMessage extends React.PureComponent {
 
   /* Send on Enter key */
   handleKeyPress(e) {
+    if (this.state.audioRec) {
+      // Ignore key presses while audio is being recorded.
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
     // Remove this if you don't want Enter to trigger send
     if (e.key === 'Enter') {
       // Have Shift-Enter insert a line break instead
@@ -185,14 +203,14 @@ class SendMessage extends React.PureComponent {
         </div>
         {this.state.quote}
       </div>);
-
+    const audioEnabled = this.state.audioAvailable && this.props.onAttachAudio;
     return (
       <div id="send-message-wrapper">
         {this.state.quote && !this.props.noInput ? quote : null}
         <div id="send-message-panel">
           {!this.props.disabled ?
             <>
-              {this.props.onAttachFile ?
+              {this.props.onAttachFile && !this.state.audioRec ?
                 <>
                   <a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
                     <i className="material-icons secondary">photo</i>
@@ -205,14 +223,25 @@ class SendMessage extends React.PureComponent {
                 null}
               {this.props.noInput ?
                 (this.state.quote ? quote : <div className="hr thin" />) :
-                <textarea id="sendMessage" placeholder={prompt}
-                  value={this.state.message} onChange={this.handleMessageTyping}
-                  onKeyPress={this.handleKeyPress}
-                  ref={(ref) => {this.messageEditArea = ref;}}
-                  autoFocus />}
-              <a href="#" onClick={this.handleSend} title="Send">
-                <i className="material-icons">send</i>
-              </a>
+                (this.state.audioRec ?
+                  <AudioRecorder
+                    onDeleted={_ => this.setState({audioRec: false})}
+                    onFinished={this.handleAttachAudio}/> :
+                  <textarea id="sendMessage" placeholder={prompt}
+                    value={this.state.message} onChange={this.handleMessageTyping}
+                    onKeyPress={this.handleKeyPress}
+                    ref={(ref) => {this.messageEditArea = ref;}}
+                    autoFocus />)}
+              {this.state.message || !audioEnabled ?
+                <a href="#" onClick={this.handleSend} title="Send">
+                  <i className="material-icons">send</i>
+                </a> :
+                !this.state.audioRec ?
+                  <a href="#" onClick={e => {e.preventDefault(); this.setState({audioRec: true})}} title="Voice">
+                    <i className="material-icons">mic</i>
+                  </a> :
+                  null
+              }
               <input type="file" ref={(ref) => {this.attachFile = ref;}}
                 onChange={this.handleAttachFile} style={{display: 'none'}} />
               <input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"

src/widgets/side-navbar.jsx

@@ -6,7 +6,7 @@ import ContactBadges from './contact-badges.jsx';
 import MenuContacts from './menu-contacts.jsx';
 import MenuStart from './menu-start.jsx';
 
-import { sanitizeImageUrl } from '../lib/utils.js';
+import { sanitizeUrlForMime } from '../lib/utils.js';
 
 export default class SideNavbar extends React.PureComponent {
   render() {
@@ -18,7 +18,7 @@ export default class SideNavbar extends React.PureComponent {
     }
     let avatar = null;
     if (this.props.tinode) {
-      avatar = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
+      avatar = this.props.tinode.authorizeURL(sanitizeUrlForMime(this.props.avatar, 'image'));
     }
     return (
       <div id="side-caption-panel" className="caption-panel">

src/widgets/topic-desc-edit.jsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Tinode from 'tinode-sdk';
+import { Tinode } from 'tinode-sdk';
 
 import AvatarCrop from './avatar-crop.jsx';
 import AvatarUpload from './avatar-upload.jsx';
@@ -109,7 +109,7 @@ export default class TopicDescEdit extends React.Component {
   // for uploading it to the server out of band.
   uploadAvatar(mime, blob, width, height) {
     const readyToUpload = (image) => {
-      let {mime, blob, width, height} = image;
+      let {mime, blob} = image;
       if (blob.size > MAX_AVATAR_BYTES) {
         // Too large to send inband - uploading out of band and sending as a link.
         const uploader = this.props.tinode.getLargeFileHelper();