amazon-connect-reference-dialer 1.0.0 → 1.4.3

package/src/client/container/agentview/thirdparyconnection/upperBody.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import AgentStatusAndAudioLabel from './agentStatusAndAudioLabel';
+import AgentMutedLabel from './agentMutedLabel';
+import PeerAndAgentDuration from './peerAndAgentDuration';
+
+import { getColorSchema } from '../../../utils/agetStateMap';
+import sessionManager from './../../../api/sessionManager';
+import Error from '../../errors/index';
+
+class UpperBody extends Component {
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    const hasError = this.props.errorMessage && this.props.errorMessage.errorType;
+    const state = sessionManager.getCurrentStateString(this.props.currentState, false);
+
+    return (
+      <div className={`row`}
+        style={{ height: '182px', backgroundColor: getColorSchema(state), paddingTop: '5%' }}>
+        {!hasError &&
+                <AgentStatusAndAudioLabel currentState={state}
+                  muted={this.props.muted}/>}
+        {!hasError &&
+                <AgentMutedLabel muted={this.props.muted}/>}
+
+        {!hasError &&
+                <PeerAndAgentDuration currentState={state}
+                  remoteStream={this.props.remoteStream}/>}
+        {hasError &&
+                <Error errorMessage={this.props.errorMessage}/>}
+      </div>
+    );
+  }
+}
+
+UpperBody.propTypes = {
+  currentState: PropTypes.object,
+  muted: PropTypes.bool,
+  remoteStream: PropTypes.object,
+  errorMessage: PropTypes.object
+
+};
+const mapStateToProps = state => ({
+  currentState: state.acReducer.currentState,
+  muted: state.acReducer.muted,
+  remoteStream: state.acReducer.remoteStream,
+  errorMessage: state.acReducer.errorMessage
+});
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UpperBody);

package/src/client/container/audiolabelview/controller.js

@@ -0,0 +1,104 @@
+/*
+2c6873
+f2be45
+ef8336
+eb4358
+51b1ca
+*/
+
+const range = 60;
+const interval = range / 6;
+const sensitivity = 2;
+const min = 10;
+const max = 480;
+
+class AudioFrequencyMonitor {
+  constructor () {
+    this.id = undefined;
+    this.frequencyBar = [];
+    this.agentStateFn = undefined;
+
+    // audio
+    this.context = undefined;
+    this.analyser = undefined;
+    this.sourceNode = undefined;
+  }
+
+  register (bars = [], agentStateFn = undefined) {
+    this.frequencyBar = bars;
+    this.agentStateFn = agentStateFn;
+  }
+
+  visualize (analyser = undefined) {
+    let data = new Uint8Array(analyser.frequencyBinCount);
+
+    const render = () => {
+      if (analyser) {
+        analyser.getByteFrequencyData(data);
+        for (let channel = 1; channel < this.frequencyBar.length; channel += 1) {
+          const to = Math.floor(interval * channel);
+          const from = Math.ceil(to - interval);
+          const segment = data.slice(from, to);
+          const sum = segment.reduce((a, b) => a + b);
+
+          const average = sum / segment.length;
+          let height = sensitivity * average;
+          let translateY = -average * 0.8;
+
+          // scale down first and last channels to achieve an 'eyes' aesthetic
+          if (channel === 1 || channel === this.frequencyBar.length) {
+            translateY *= 0.2;
+            height *= 0.2;
+          }
+
+          height = Math.max(min, Math.min(max, height));
+          let bar = this.frequencyBar[channel];
+          // louder frequencies render with a greater height
+          bar.setAttribute(
+            'd',
+            `m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v ${height} c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0`
+          );
+          // louder frequencies are shifted down further
+          bar.setAttribute('transform', `translate(0, ${translateY})`);
+        }
+      }
+      this.id = window.requestAnimationFrame(render);
+    };
+    render();
+  }
+
+  renderStream (stream = undefined) {
+    // clear animation
+    this.dispose().then(_ => {
+      if (!stream) {
+        return;
+      }
+      this.context = new AudioContext();
+      this.analyser = this.context.createAnalyser();
+      this.analyser.fftSize = 1024;
+
+      this.sourceNode = this.context.createMediaStreamSource(stream);
+      this.sourceNode.connect(this.analyser);
+      this.visualize(this.analyser);
+    }).catch(err => {
+      console.error('~', err);
+    });
+  }
+
+  async dispose () {
+    // console.warn('~audiolabel.controller.dispose');
+    if (this.id) {
+      window.cancelAnimationFrame(this.id);
+      this.id = null;
+    }
+    if (this.context) {
+      await this.context.close();
+      this.context = undefined;
+      this.analyser = undefined;
+    }
+
+    this.sourceNode = undefined;
+  }
+}
+
+export default AudioFrequencyMonitor;

package/src/client/container/audiolabelview/localaudiolevel.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import mediaManager from './../../api/mediaManager';
+import sessionManager from './../../api/sessionManager';
+import AudioFrequencyMonitor from './controller';
+
+const style = {
+  fill: '#ffffff',
+  fillOpacity: 1,
+  fillRule: 'nonzero',
+  stroke: 'none'
+};
+
+const MEDIA_RETRY_INTERVAL_MS = 1 * 1000;
+const MAX_MEDIA_RETRY_COUNT = 60;
+
+class LocalAudiolevel extends React.Component {
+  constructor (props) {
+    super(props);
+    this.audioControler = new AudioFrequencyMonitor();
+    this.intervalId = undefined;
+    this.lastRetry = 0;
+  }
+
+  async _fetchMediaInternals (mediaRetryCount = 0) {
+    let now = (new Date()).getTime();
+    if (now - this.lastRetry < MEDIA_RETRY_INTERVAL_MS) {
+      throw new Error('Already trying to fetch media');
+    }
+    let selectedDevice = await mediaManager.getDefaultOrPreferredAudioInputDevice();
+    // console.warn('~fetchMedia', 'trying to fetch local media', mediaRetryCount, selectedDevice);
+    const localStream = await mediaManager.getUserMedia(selectedDevice);
+    this.lastRetry = (new Date()).getTime();
+    return localStream;
+  }
+
+  fetchMedia (mediaRetryCount = 0) {
+    this._fetchMediaInternals(mediaRetryCount).then(localStream => {
+      mediaManager.setLocalStream(localStream);
+      this.audioControler.renderStream(localStream);
+    }).catch(() => {
+      this.intervalId = setInterval(async () => {
+        try {
+          const localStream = await this._fetchMediaInternals(mediaRetryCount);
+          this.clearInterval();
+          this.audioControler.renderStream(localStream);
+        } catch (err) {
+          // console.warn('~fetchMedia', err);
+          if (mediaRetryCount < 1) {
+            // console.warn('maximum media recover count exceeded');
+            this.clearInterval();
+          }
+          mediaRetryCount -= 1;
+        }
+      }, MEDIA_RETRY_INTERVAL_MS);
+    });
+  }
+
+  componentDidMount () {
+    // console.warn('~componentDidMount');
+    const barList = [this.refs.bar1, this.refs.bar2, this.refs.bar3, this.refs.bar4, this.refs.bar5, this.refs.bar6, this.refs.bar7];
+    this.audioControler.register(barList, sessionManager.getPrimaryAgentState);
+    this.clearInterval();
+    mediaManager.dispose();
+  }
+
+  componentWillUnmount () {
+    // console.warn('~componentWillUnmount');
+    this.clearInterval();
+    mediaManager.dispose();
+    this.audioControler.dispose();
+  }
+
+  dummyClick (e) {
+    setTimeout(() => {
+      e && e.click();
+    }, 1000);
+  }
+
+  clearInterval () {
+    if (!this.intervalId) {
+      return;
+    }
+    clearInterval(this.intervalId);
+    this.intervalId = undefined;
+  }
+
+  render () {
+    const viewBox = this.props.viewBox || '0 200 1000 1000';
+    return (
+      <span ref={this.dummyClick} onClick={() => this.fetchMedia(MAX_MEDIA_RETRY_COUNT)}>
+        <svg xmlns="http://www.w3.org/2000/svg"
+          viewBox={viewBox}
+          x="0"
+          y="0"
+          width="100%"
+          height="100%">
+          <defs id="defs6">
+            <clipPath id="clipPath18">
+              <path id="path16" d="M 0,1211 H 1127 V 0 H 0 Z"/>
+            </clipPath>
+          </defs>
+          <g transform="translate(285.45 600)" id="g40">
+            <path ref="bar1"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(400.049 600)" id="g36">
+            <path ref="bar2"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(514.647 600)" id="g32">
+            <path ref="bar3"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(629.245 600)" id="g28">
+            <path ref="bar4"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(743.843 600)" id="g24">
+            <path ref="bar5"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(858.442 600)" id="g44">
+            <path ref="bar6"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+
+          <g transform="translate(973.041 600)" id="g45">
+            <path ref="bar7"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+        </svg>
+      </span>
+    );
+  }
+}
+
+LocalAudiolevel.propTypes = {
+  viewBox: PropTypes.string
+};
+
+export default LocalAudiolevel;

package/src/client/container/audiolabelview/noaudio.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import mediaManager from './../../api/mediaManager';
+import sessionManager from './../../api/sessionManager';
+import AudioFrequencyMonitor from './controller';
+
+const style = {
+  fill: '#ffffff',
+  fillOpacity: 1,
+  fillRule: 'nonzero',
+  stroke: 'none'
+};
+
+class NoAudio extends React.Component {
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    const viewBox = this.props.viewBox || '0 200 1000 1000';
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox}
+				 x="0"
+				 y="0"
+				 width="100%"
+				 height="100%">
+        <defs id="defs6">
+          <clipPath id="clipPath18">
+            <path id="path16" d="M 0,1211 H 1127 V 0 H 0 Z"/>
+          </clipPath>
+        </defs>
+        <g transform="translate(285.45 600)" id="g40">
+          <path ref="bar1"
+						  style={style}
+						  d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+          />
+        </g>
+        <g transform="translate(400.049 600)" id="g36">
+          <path ref="bar2"
+						  style={style}
+						  d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+          />
+        </g>
+        <g transform="translate(514.647 600)" id="g32">
+          <path ref="bar3"
+						  style={style}
+						  d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+          />
+        </g>
+        <g transform="translate(629.245 600)" id="g28">
+          <path ref="bar4"
+						  style={style}
+						  d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+          />
+        </g>
+        <g transform="translate(743.843 600)" id="g24">
+          <path ref="bar5"
+						  style={style}
+						  d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+          />
+        </g>
+        <g transform="translate(858.442 600)" id="g44">
+          <path ref="bar6"
+						  style={style}
+						  d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+          />
+        </g>
+
+        <g transform="translate(973.041 600)" id="g45">
+          <path ref="bar7"
+						  style={style}
+						  d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+          />
+        </g>
+      </svg>
+
+    );
+  }
+}
+
+NoAudio.propTypes = {
+  viewBox: PropTypes.string
+};
+
+export default NoAudio;

package/src/client/container/audiolabelview/remoteaudiolevel.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import mediaManager from './../../api/mediaManager';
+import sessionManager from './../../api/sessionManager';
+import AudioFrequencyMonitor from './controller';
+
+const style = {
+  fill: '#ffffff',
+  fillOpacity: 1,
+  fillRule: 'nonzero',
+  stroke: 'none'
+};
+const spanStyle = {
+  marginLeft: '-2.5em'
+};
+
+class RemoteAudioLevel extends React.Component {
+  constructor (props) {
+    super(props);
+    this.audioControler = new AudioFrequencyMonitor();
+  }
+
+  componentDidMount () {
+    // console.warn('~componentDidMount>remote');
+    const barList = [this.refs.bar1, this.refs.bar2, this.refs.bar3, this.refs.bar4, this.refs.bar5, this.refs.bar6, this.refs.bar7];
+    this.audioControler.register(barList, sessionManager.getPrimaryAgentState);
+  }
+
+  componentWillUnmount () {
+    // console.warn('~componentWillUnmount>remote');
+    this.audioControler.dispose();
+  }
+
+  dummyClick (e) {
+    setTimeout(() => {
+      e && e.click();
+    }, 1000);
+  }
+
+  render () {
+    const viewBox = this.props.viewBox || '0 200 1000 1000';
+    return (
+      <span ref={this.dummyClick} onClick={() => this.audioControler.renderStream(this.props.remoteStream)}
+        style={spanStyle}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox}
+          x="0"
+          y="0"
+          width="100%"
+          height="100%">
+          <defs id="defs6">
+            <clipPath id="clipPath18">
+              <path id="path16" d="M 0,1211 H 1127 V 0 H 0 Z"/>
+            </clipPath>
+          </defs>
+          <g transform="translate(285.45 600)" id="g40">
+            <path ref="bar1"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(400.049 600)" id="g36">
+            <path ref="bar2"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(514.647 600)" id="g32">
+            <path ref="bar3"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(629.245 600)" id="g28">
+            <path ref="bar4"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(743.843 600)" id="g24">
+            <path ref="bar5"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(858.442 600)" id="g44">
+            <path ref="bar6"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+
+          <g transform="translate(973.041 600)" id="g45">
+            <path ref="bar7"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+        </svg>
+      </span>
+    );
+  }
+}
+
+RemoteAudioLevel.propTypes = {
+  viewBox: PropTypes.string,
+  remoteStream: PropTypes.object
+};
+
+export default RemoteAudioLevel;

package/src/client/container/audiolabelview/settingpageaudiolevel.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import mediaManager from './../../api/mediaManager';
+import sessionManager from './../../api/sessionManager';
+import AudioFrequencyMonitor from './controller';
+
+const style = {
+  fill: 'rgba(0, 0, 0, 0.5)',
+  fillOpacity: 1,
+  fillRule: 'nonzero',
+  stroke: 'none'
+};
+
+const MEDIA_RETRY_INTERVAL_MS = 1.5 * 1000;
+const MAX_MEDIA_RETRY_COUNT = 60;
+
+class LocalAudiolevel extends React.Component {
+  constructor (props) {
+    super(props);
+    this.audioControler = new AudioFrequencyMonitor();
+    this.intervalId = undefined;
+    this.lastRetry = 0;
+  }
+
+  async _fetchMediaInternals (mediaRetryCount = 0) {
+    let now = (new Date()).getTime();
+    if (now - this.lastRetry < MEDIA_RETRY_INTERVAL_MS) {
+      throw new Error('Already trying to fetch media');
+    }
+    let selectedDevice = await mediaManager.getDefaultOrPreferredAudioInputDevice();
+    // console.warn('~fetchMedia', 'trying to fetch local media', mediaRetryCount, selectedDevice);
+    const localStream = await mediaManager.getUserMedia(selectedDevice);
+    this.lastRetry = (new Date()).getTime();
+    return localStream;
+  }
+
+  fetchMedia (mediaRetryCount = 0) {
+    this._fetchMediaInternals(mediaRetryCount).then(localStream => this.audioControler.renderStream(localStream)).catch(() => {
+      this.intervalId = setInterval(async () => {
+        try {
+          const localStream = await this._fetchMediaInternals(mediaRetryCount);
+          this.clearInterval();
+          this.audioControler.renderStream(localStream);
+        } catch (err) {
+          // console.warn('~fetchMedia', err);
+          if (mediaRetryCount < 1) {
+            // console.warn('maximum media recover count exceeded');
+            this.clearInterval();
+          }
+          mediaRetryCount -= 1;
+        }
+      }, MEDIA_RETRY_INTERVAL_MS);
+    });
+  }
+
+  componentDidMount () {
+    // console.warn('~componentDidMount');
+    const barList = [this.refs.bar1, this.refs.bar2, this.refs.bar3, this.refs.bar4, this.refs.bar5, this.refs.bar6, this.refs.bar7];
+    this.audioControler.register(barList, sessionManager.getPrimaryAgentState);
+    this.clearInterval();
+    mediaManager.dispose();
+  }
+
+  componentWillUnmount () {
+    // console.warn('~componentWillUnmount');
+    this.clearInterval();
+    mediaManager.dispose();
+    this.audioControler.dispose();
+  }
+
+  dummyClick (e) {
+    setTimeout(() => {
+      e && e.click();
+    }, 1000);
+  }
+
+  clearInterval () {
+    if (!this.intervalId) {
+      return;
+    }
+    clearInterval(this.intervalId);
+    this.intervalId = undefined;
+  }
+
+  render () {
+    const viewBox = this.props.viewBox || '0 200 1000 1000';
+    return (
+      <span ref={this.dummyClick} onClick={() => this.fetchMedia(MAX_MEDIA_RETRY_COUNT)}>
+        <svg xmlns="http://www.w3.org/2000/svg"
+          viewBox={viewBox}
+          x="0"
+          y="0"
+          width="100%"
+          height="100%">
+          <defs id="defs6">
+            <clipPath id="clipPath18">
+              <path id="path16" d="M 0,1211 H 1127 V 0 H 0 Z"/>
+            </clipPath>
+          </defs>
+          <g transform="translate(285.45 600)" id="g40">
+            <path ref="bar1"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(400.049 600)" id="g36">
+            <path ref="bar2"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(514.647 600)" id="g32">
+            <path ref="bar3"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(629.245 600)" id="g28">
+            <path ref="bar4"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(743.843 600)" id="g24">
+            <path ref="bar5"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+          <g transform="translate(858.442 600)" id="g44">
+            <path ref="bar6"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+
+          <g transform="translate(973.041 600)" id="g45">
+            <path ref="bar7"
+              style={style}
+              d="m 0,0 h -11.941 c -14.938,0 -27.048,12.11 -27.048,27.048 v 10 c 0,14.938 12.11,27.048 27.048,27.048 H 0 c 14.938,0 27.048,-12.11 27.048,-27.048 V 27.048 C 27.048,12.11 14.938,0 0,0"
+            />
+          </g>
+        </svg>
+      </span>
+    );
+  }
+}
+
+LocalAudiolevel.propTypes = {
+  viewBox: PropTypes.string
+};
+
+export default LocalAudiolevel;