Merge pull request #1472 from robintown/invert-buttons

Invert the microphone and video button states

public/locales/en-GB/app.json

@@ -66,6 +66,7 @@
   "Microphone off": "Microphone off",
   "Microphone on": "Microphone on",
   "More": "More",
+  "Mute microphone": "Mute microphone",
   "No": "No",
   "Not encrypted": "Not encrypted",
   "Not now, return to home screen": "Not now, return to home screen",
@@ -96,6 +97,8 @@
   "Sign out": "Sign out",
   "Speaker": "Speaker",
   "Spotlight": "Spotlight",
+  "Start video": "Start video",
+  "Stop video": "Stop video",
   "Submit": "Submit",
   "Submit feedback": "Submit feedback",
   "Submitting…": "Submitting…",
@@ -104,14 +107,13 @@
   "Thanks!": "Thanks!",
   "This call already exists, would you like to join?": "This call already exists, would you like to join?",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
+  "Unmute microphone": "Unmute microphone",
   "User menu": "User menu",
   "Username": "Username",
   "Version: {{version}}": "Version: {{version}}",
   "Video": "Video",
   "Video call": "Video call",
   "Video call name": "Video call name",
-  "Video off": "Video off",
-  "Video on": "Video on",
   "Waiting for other participants…": "Waiting for other participants…",
   "Walkie-talkie call": "Walkie-talkie call",
   "Walkie-talkie call name": "Walkie-talkie call name",

src/button/Button.tsx

@@ -145,11 +145,11 @@ export function MicButton({
 }) {
   const { t } = useTranslation();
   const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
-  const label = muted ? t("Microphone off") : t("Microphone on");
+  const label = muted ? t("Unmute microphone") : t("Mute microphone");
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={!muted}>
+      <Button variant="toolbar" {...rest} on={muted}>
         <Icon aria-label={label} />
       </Button>
     </Tooltip>
@@ -166,11 +166,11 @@ export function VideoButton({
 }) {
   const { t } = useTranslation();
   const Icon = muted ? VideoCallOffIcon : VideoCallIcon;
-  const label = muted ? t("Video off") : t("Video on");
+  const label = muted ? t("Start video") : t("Stop video");
 
   return (
     <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={!muted}>
+      <Button variant="toolbar" {...rest} on={muted}>
         <Icon aria-label={label} />
       </Button>
     </Tooltip>