fix: mic icon

.gitignore

@@ -1,6 +1,3 @@
-lib/
-dist/
-
 # Logs
 logs
 *.log

dist/style.css

@@ -0,0 +1,99 @@
+.uppy-Audio-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column; }
+
+.uppy-Audio-buttonContainer {
+  width: 100%;
+  height: 75px;
+  border-top: 1px solid #eaeaea;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px; }
+
+.uppy-Audio-button {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  background-color: #e32437;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s; }
+  .uppy-Audio-button:focus {
+    outline: none; }
+  .uppy-Audio-button::-moz-focus-inner {
+    border: 0; }
+  .uppy-Audio-button:focus {
+    box-shadow: 0 0 0 3px rgba(34, 117, 215, 0.5); }
+  [data-uppy-theme="dark"] .uppy-Audio-button:focus {
+    outline: none; }
+  [data-uppy-theme="dark"] .uppy-Audio-button::-moz-focus-inner {
+    border: 0; }
+  [data-uppy-theme="dark"] .uppy-Audio-button:focus {
+    box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85); }
+
+.uppy-Audio-button svg {
+  width: 30px;
+  height: 30px;
+  max-width: 100%;
+  max-height: 100%;
+  display: inline-block;
+  vertical-align: text-top;
+  overflow: hidden;
+  fill: currentColor; }
+
+.uppy-size--md .uppy-Audio-button {
+  width: 60px;
+  height: 60px; }
+
+.uppy-Audio-button:hover {
+  background-color: #d31b2d; }
+
+.uppy-Audio-button--picture {
+  margin-right: 12px; }
+
+.uppy-Audio-permissons {
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column wrap;
+  height: 100%;
+  flex: 1; }
+
+.uppy-Audio-permissons p {
+  max-width: 450px;
+  line-height: 1.3;
+  text-align: center;
+  line-height: 1.45;
+  color: #939393;
+  margin: 0; }
+
+.uppy-Audio-permissonsIcon svg {
+  width: 100px;
+  height: 75px;
+  color: #bbb;
+  margin-bottom: 30px; }
+
+.uppy-Audio-recordingLength {
+  position: absolute;
+  right: 20px;
+  color: #757575;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+
+.uppy-Audio-title {
+  font-size: 22px;
+  line-height: 1.35;
+  font-weight: 400;
+  margin: 0;
+  margin-bottom: 5px;
+  padding: 0 15px;
+  max-width: 500px;
+  text-align: center;
+  color: #333; }
+  [data-uppy-theme="dark"] .uppy-Audio-title {
+    color: #eaeaea; }

lib/MicrophoneIcon.js

@@ -0,0 +1,17 @@
+var _require = require('preact'),
+    h = _require.h;
+
+module.exports = function (props) {
+  // TODO: Replace this camera icon by a microphone
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    fill: "#0097DC",
+    width: "66",
+    height: "55",
+    viewBox: "0 0 66 55"
+  }, h("path", {
+    d: "M57.3 8.433c4.59 0 8.1 3.51 8.1 8.1v29.7c0 4.59-3.51 8.1-8.1 8.1H8.7c-4.59 0-8.1-3.51-8.1-8.1v-29.7c0-4.59 3.51-8.1 8.1-8.1h9.45l4.59-7.02c.54-.54 1.35-1.08 2.16-1.08h16.2c.81 0 1.62.54 2.16 1.08l4.59 7.02h9.45zM33 14.64c-8.62 0-15.393 6.773-15.393 15.393 0 8.62 6.773 15.393 15.393 15.393 8.62 0 15.393-6.773 15.393-15.393 0-8.62-6.773-15.393-15.393-15.393zM33 40c-5.648 0-9.966-4.319-9.966-9.967 0-5.647 4.318-9.966 9.966-9.966s9.966 4.319 9.966 9.966C42.966 35.681 38.648 40 33 40z",
+    "fill-rule": "evenodd"
+  }));
+};

lib/MicrophoneScreen.js

@@ -0,0 +1,41 @@
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+var _require = require('preact'),
+    h = _require.h,
+    Component = _require.Component;
+
+var RecordButton = require('./RecordButton');
+
+var RecordingLength = require('./RecordingLength');
+
+function isModeAvailable(modes, mode) {
+  return modes.indexOf(mode) !== -1;
+}
+
+var MicrophoneScreen = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(MicrophoneScreen, _Component);
+
+  function MicrophoneScreen() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  var _proto = MicrophoneScreen.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.props.onStop();
+  };
+
+  _proto.render = function render() {
+    var shouldShowRecordButton = this.props.supportsRecording;
+    var shouldShowRecordingLength = this.props.supportsRecording && this.props.showRecordingLength;
+    return h("div", {
+      "class": "uppy uppy-Audio-container"
+    }, h("div", {
+      "class": "uppy-Webcam-buttonContainer"
+    }, shouldShowRecordingLength ? RecordingLength(this.props) : null, ' ', shouldShowRecordButton ? RecordButton(this.props) : null));
+  };
+
+  return MicrophoneScreen;
+}(Component);
+
+module.exports = MicrophoneScreen;

lib/PermissionsScreen.js

@@ -0,0 +1,12 @@
+var _require = require('preact'),
+    h = _require.h;
+
+module.exports = function (props) {
+  return h("div", {
+    "class": "uppy-Audio-permissons"
+  }, h("div", {
+    "class": "uppy-Audio-permissonsIcon"
+  }, props.icon()), h("h1", {
+    "class": "uppy-Audio-title"
+  }, props.hasMicrophone ? props.i18n('allowAccessTitle') : props.i18n('noMicrophoneTitle')), h("p", null, props.hasMicrophone ? props.i18n('allowAccessDescription') : props.i18n('noMicrophoneDescription')));
+};

lib/RecordButton.js

@@ -0,0 +1,52 @@
+var _require = require('preact'),
+    h = _require.h;
+
+module.exports = function RecordButton(_ref) {
+  var recording = _ref.recording,
+      onStartRecording = _ref.onStartRecording,
+      onStopRecording = _ref.onStopRecording,
+      i18n = _ref.i18n;
+
+  if (recording) {
+    return h("button", {
+      "class": "uppy-u-reset uppy-c-btn uppy-Audio-button",
+      type: "button",
+      title: i18n('stopRecording'),
+      "aria-label": i18n('stopRecording'),
+      onclick: onStopRecording,
+      "data-uppy-super-focusable": true
+    }, h("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      "class": "uppy-c-icon",
+      width: "100",
+      height: "100",
+      viewBox: "0 0 100 100"
+    }, h("rect", {
+      x: "15",
+      y: "15",
+      width: "70",
+      height: "70"
+    })));
+  }
+
+  return h("button", {
+    "class": "uppy-u-reset uppy-c-btn uppy-Audio-button",
+    type: "button",
+    title: i18n('startRecording'),
+    "aria-label": i18n('startRecording'),
+    onclick: onStartRecording,
+    "data-uppy-super-focusable": true
+  }, h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    "class": "uppy-c-icon",
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100"
+  }, h("circle", {
+    cx: "50",
+    cy: "50",
+    r: "40"
+  })));
+};

lib/RecordingLength.js

@@ -0,0 +1,16 @@
+var _require = require('preact'),
+    h = _require.h;
+
+var formatSeconds = require('./formatSeconds');
+
+module.exports = function RecordingLength(_ref) {
+  var recordingLengthSeconds = _ref.recordingLengthSeconds,
+      i18n = _ref.i18n;
+  var formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds);
+  return h("div", {
+    "class": "uppy-Webcam-recordingLength",
+    "aria-label": i18n('recordingLength', {
+      recording_length: formattedRecordingLengthSeconds
+    })
+  }, formattedRecordingLengthSeconds);
+};

lib/formatSeconds.js

@@ -0,0 +1,10 @@
+/**
+ * Takes an Integer value of seconds (e.g. 83) and converts it into a human-readable formatted string (e.g. '1:23').
+ *
+ * @param {Integer} seconds
+ * @returns {string} the formatted seconds (e.g. '1:23' for 1 minute and 23 seconds)
+ *
+ */
+module.exports = function formatSeconds(seconds) {
+  return Math.floor(seconds / 60) + ":" + String(seconds % 60).padStart(2, 0);
+};

lib/getFileTypeExtension.js

@@ -0,0 +1,11 @@
+// Patched https://github.com/transloadit/uppy/blob/master/packages/%40uppy/utils/src/getFileTypeExtension.js
+// Adds wav support
+var mimeToExtensions = {
+  'audio/wav': 'wav'
+};
+
+module.exports = function getFileTypeExtension(mimeType) {
+  // Remove the ; bit in 'video/x-matroska;codecs=avc1'
+  mimeType = mimeType.replace(/;.*$/, '');
+  return mimeToExtensions[mimeType] || null;
+};