Add bug report button after voip calls

modules/tchap-translations/tchap_translations.json

@@ -713,5 +713,13 @@
  "widget|error_need_kick_permission": {
  "en": "You need to be able to kick users to do that.",
  "fr": "Vous devez avoir l’autorisation de retirer des utilisateurs pour faire ceci."
+ },
+ "Report a problem": {
+ "en": "Report a problem",
+ "fr": "Signaler un problème"
+ },
+ "tchap_voip_bug_report_prefill": {
+ "en": "I had a problem during a Tchap call.\nDetails: ...",
+ "fr": "J'ai eu un problème pendant un appel Tchap.\nDétails : ..."
  }
 }

patches/bug-reporting/matrix-react-sdk+3.92.0.patch

@@ -1,16 +1,17 @@
 diff --git a/node_modules/matrix-react-sdk/src/components/views/dialogs/BugReportDialog.tsx b/node_modules/matrix-react-sdk/src/components/views/dialogs/BugReportDialog.tsx
-index 5d826f2..5163137 100644
+index 5d826f2..51baf28 100644
 --- a/node_modules/matrix-react-sdk/src/components/views/dialogs/BugReportDialog.tsx
 +++ b/node_modules/matrix-react-sdk/src/components/views/dialogs/BugReportDialog.tsx
-@@ -32,6 +32,7 @@ import DialogButtons from "../elements/DialogButtons";
+@@ -32,6 +32,8 @@ import DialogButtons from "../elements/DialogButtons";
  import { sendSentryReport } from "../../../sentry";
  import defaultDispatcher from "../../../dispatcher/dispatcher";
  import { Action } from "../../../dispatcher/actions";
 +import { MatrixClientPeg } from '../../../MatrixClientPeg'; // :TCHAP:
++import TchapUtils from "../../../../../../src/tchap/util/TchapUtils"; // :TCHAP:
 
  interface IProps {
  onFinished: (success: boolean) => void;
-@@ -96,12 +97,21 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
+@@ -96,12 +98,21 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
  };
 
  private onSubmit = (): void => {
@@ -32,7 +33,7 @@ index 5d826f2..5163137 100644
 
  const userText =
  (this.state.text.length > 0 ? this.state.text + "\n\n" : "") +
-@@ -111,11 +121,24 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
+@@ -111,11 +122,34 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
  this.setState({ busy: true, progress: null, err: null });
  this.sendProgressCallback(_t("bug_reporting|preparing_logs"));
 
@@ -43,13 +44,23 @@ index 5d826f2..5163137 100644
 - labels: this.props.label ? [this.props.label] : [],
 + // :TCHAP: customise report : add email, prefix with "tchap-web"
 + const client = MatrixClientPeg.get();
++ const customFields = {};
 + client.getThreePids().then(result => {
-+ const customFields = {};
 + result.threepids.forEach(threepid => {
 + return customFields[threepid.medium] = threepid.address;
 + });
 + return customFields;
 + }).then(customFields => {
++ // is this a voip report ? Add it in "context" field
++ if (this.props.label === "voip-feedback") {
++ customFields.context = "voip";
++ }
++
++ return TchapUtils.isCurrentlyUsingBluetooth().then(isCurrentlyUsingBluetooth => {
++ customFields.audio_input = isCurrentlyUsingBluetooth ? "headset_bluetooth" : "device";
++ return customFields;
++ })
++ }).then(customFields => {
 + return sendBugReport(SdkConfig.get().bug_report_endpoint_url, {
 + userText,
 + sendLogs: true,
@@ -62,15 +73,15 @@ index 5d826f2..5163137 100644
  }).then(
  () => {
  if (!this.unmounted) {
-@@ -150,6 +173,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
+@@ -150,6 +184,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
  sendLogs: true,
  progressCallback: this.downloadProgressCallback,
  labels: this.props.label ? [this.props.label] : [],
 + customApp: 'tchap-web', // :TCHAP: we don't add email here. You know your own email already.
  });
 
  this.setState({
-@@ -214,6 +238,53 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
+@@ -214,6 +249,53 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
  );
  }
 
@@ -124,7 +135,7 @@ index 5d826f2..5163137 100644
  return (
  <BaseDialog
  className="mx_BugReportDialog"
-@@ -281,5 +352,6 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
+@@ -281,5 +363,6 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
  />
  </BaseDialog>
  );
@@ -144,6 +155,55 @@ index 1eb0379..90955dd 100644
  };
 
  /**
+diff --git a/node_modules/matrix-react-sdk/src/components/views/messages/LegacyCallEvent.tsx b/node_modules/matrix-react-sdk/src/components/views/messages/LegacyCallEvent.tsx
+index 3c8241d..cdd9a83 100644
+--- a/node_modules/matrix-react-sdk/src/components/views/messages/LegacyCallEvent.tsx
++++ b/node_modules/matrix-react-sdk/src/components/views/messages/LegacyCallEvent.tsx
+@@ -28,6 +28,10 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+ import { formatPreciseDuration } from "../../../DateUtils";
+ import Clock from "../audio_messages/Clock";
+
++import Modal from "matrix-react-sdk/src/Modal"; // :TCHAP:
++import BugReportDialog from "matrix-react-sdk/src/components/views/dialogs/BugReportDialog"; // :TCHAP:
++import "../../../../../../res/css/views/messages/TchapLegacyCallEvent.pcss"; // :TCHAP:
++
+ const MAX_NON_NARROW_WIDTH = (450 / 70) * 100;
+
+ interface IProps {
+@@ -192,6 +196,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
+ return (
+ <div className="mx_LegacyCallEvent_content">
+ {text}
++ {this.renderBugReportButton()}
+ {this.props.timestamp}
+ </div>
+ );
+@@ -264,6 +269,25 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
+ );
+ }
+
++ private onReportBugClick = (): void => {
++ Modal.createDialog(BugReportDialog, {
++ initialText: _t("tchap_voip_bug_report_prefill"),
++ label: "voip-feedback",
++ });
++ };
++
++ private renderBugReportButton(): JSX.Element {
++ return (
++ <AccessibleButton
++ className="mx_LegacyCallEvent_content_button mx_LegacyCallEvent_content_button_reportBug"
++ onClick={this.onReportBugClick}
++ kind="primary"
++ >
++ <span> {_t("Report a problem")} </span>
++ </AccessibleButton>
++ );
++ }
++
+ public render(): React.ReactNode {
+ const event = this.props.mxEvent;
+ const sender = event.sender ? event.sender.name : event.getSender();
 diff --git a/node_modules/matrix-react-sdk/src/rageshake/submit-rageshake.ts b/node_modules/matrix-react-sdk/src/rageshake/submit-rageshake.ts
 index d15f3d9..7c7f6d8 100644
 --- a/node_modules/matrix-react-sdk/src/rageshake/submit-rageshake.ts

patches/patches.json

@@ -17,12 +17,13 @@
  },
  "bug-reporting": {
  "package": "matrix-react-sdk",
- "github-issue":"https://github.com/tchapgouv/tchap-web-v4/issues/527, https://github.com/tchapgouv/tchap-web-v4/issues/526",
- "comments" : "add email in rageshake",
+ "github-issue":"https://github.com/tchapgouv/tchap-web-v4/issues/527, https://github.com/tchapgouv/tchap-web-v4/issues/526, https://github.com/tchapgouv/tchap-product/issues/267",
+ "comments" : "add email in rageshake + voip",
  "files": [
  "src/components/views/dialogs/BugReportDialog.tsx",
  "src/rageshake/submit-rageshake.ts",
- "src/components/views/elements/AccessibleButton.tsx"
+ "src/components/views/elements/AccessibleButton.tsx",
+ "src/components/views/messages/LegacyCallEvent.tsx"
  ]
  },
  "content-scanner": {

res/css/views/messages/TchapLegacyCallEvent.pcss

@@ -0,0 +1,9 @@
+.mx_LegacyCallEvent_wrapper {
+ .mx_LegacyCallEvent {
+ &.mx_LegacyCallEvent_voice {
+ .mx_LegacyCallEvent_content_button_reportBug span::before {
+ mask-image: url("~matrix-react-sdk/res/img/element-icons/warning-badge.svg");
+ }
+ }
+ }
+}

src/tchap/util/TchapUtils.ts

@@ -238,4 +238,37 @@ export default class TchapUtils {
  }
  return false;
  }
+
+ /**
+ * Whether the user is currently using a bluetooth audio input (bluetooth headset for example).
+ * In Chrome we can get the information sometimes, and in Firefox and Edge we don't know.
+ * @returns true if we are sure user is currently using a bluetooth audio input. False if no blutooth, or we don't know.
+ */
+ static async isCurrentlyUsingBluetooth(): Promise<boolean> {
+ if (!navigator.mediaDevices?.enumerateDevices) {
+ console.log("enumerateDevices() not supported. Cannot know if there is a bluetooth device.");
+ return false;
+ } else {
+ // List cameras and microphones.
+ return navigator.mediaDevices
+ .enumerateDevices()
+ .then((devices) => {
+ let hasBluetooth = false;
+ devices.forEach((device) => {
+ console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
+ if (device.kind === "audioinput") {
+ if (device.label.toLowerCase().includes("bluetooth")) {
+ hasBluetooth = true;
+ }
+ }
+ });
+ return hasBluetooth;
+ })
+ .catch((err) => {
+ console.error(`${err.name}: ${err.message}`);
+ return false;
+ });
+ }
+ }
+
 }