Fix presentation and captions buttons for new Meet UI changes

Author: ChrisRegado

browser-extension/event_handlers/aria_pressed_based_toggle_event_handler.js

@@ -4,11 +4,18 @@
  */
 class AriaPressedBasedToggleEventHandler extends ToggleEventHandler {
 
-  // Subclasses should set this to the `jsname` attribute value on the target toggle button in the Meet UI.
-  static ButtonJsName;
+  // Subclasses should set this to an array of `jsname` attribute value(s) on the target toggle button in the Meet UI.
+  // We'll check all of them and take the first result we find.
+  static ButtonJsNames;
 
   _controlElementSelector = () => {
-    return document.querySelector(`button[jsname="${this.constructor.ButtonJsName}"]`);
+    for (var i = 0; i < this.constructor.ButtonJsNames.length; i++) {
+      const button = document.querySelector(`button[jsname="${this.constructor.ButtonJsNames[i]}"]`);
+      if (button) {
+        return button;
+      }
+    }
+    return null;
   }
 
   _isElementMuted = (element) => {
@@ -26,7 +33,7 @@ class AriaPressedBasedToggleEventHandler extends ToggleEventHandler {
     for (const mutation of mutationsList) {
       if (mutation.type === "attributes" && mutation.attributeName === "aria-pressed") {
         const jsName = mutation.target.attributes["jsname"]?.value;
-        if (jsName === this.constructor.ButtonJsName) {
+        if (this.constructor.ButtonJsNames.includes(jsName)) {
           this._sendMuteState();
         }
       }

browser-extension/event_handlers/captions_event_handler.js

@@ -1,17 +1,22 @@
-class CaptionsEventHandler extends AriaPressedBasedToggleEventHandler {
+class CaptionsEventHandler extends IconBasedEventHandler {
 
-  static ButtonJsName = "r8qRAd";
+  /**
+   * When captions are off, we see:
+   *   <i class="quRWN-Bz112c google-symbols notranslate" aria-hidden="true" data-google-symbols-override="true">closed_caption_off</i>
+   * When captions are on, we see:
+   *   <i class="quRWN-Bz112c google-symbols notranslate" aria-hidden="true" data-google-symbols-override="true">closed_caption</i>
+   */
+  static MutedIconHTML = "closed_caption_off";
 
-  _sendMuteState = () => {
-    this._sendSimpleMuteStateUpdate("captionsMutedState");
-  }
+  static MuteStateUpdateEventName = "captionsMutedState";
+
+  static ToggleEventName = "toggleCaptions";
+
+  static GetMuteStateEventName = "getCaptionsState";
 
-  handleStreamDeckEvent = (message) => {
-    if (message.event === "toggleCaptions") {
-      this._toggleMute();
-    } else if (message.event === "getCaptionsState") {
-      this._sendMuteState();
-    }
+  _controlElementSelector = () => {
+    return document.querySelector('button[jsname="RrG0hf"]') // From approximately Feb 2026 onwards
+      || document.querySelector('button[jsname="r8qRAd"]');  // Before Feb 2026 redesign
   }
 
 }

browser-extension/event_handlers/hand_event_handler.js

@@ -1,6 +1,6 @@
 class HandEventHandler extends AriaPressedBasedToggleEventHandler {
 
-  static ButtonJsName = "FpSaz";
+  static ButtonJsNames = ["FpSaz"];
 
   _sendMuteState = () => {
     this._sendSimpleMuteStateUpdate("handMutedState");

browser-extension/event_handlers/icon_based_toggle_event_handler.js

@@ -0,0 +1,67 @@
+/**
+ * An abstract base class used for toggle controls in the Meet UI that indicate whether or not
+ * they're active using an icon that Meet puts in an <i> tag.
+ */
+class IconBasedEventHandler extends ToggleEventHandler {
+
+  // Subclasses should set this to the content of the <i> tag when the target is "off"/"muted".
+  static MutedIconHTML;
+
+  // Subclasses should set this to the name of the event from our Stream Deck plugin
+  // that's used to inform the plugin of the current mute state.
+  static MuteStateUpdateEventName;
+
+  // Subclasses should set this to the name of the event from our Stream Deck plugin
+  // that's used to instruct this browser extension to change the target button's state.
+  static ToggleEventName;
+
+  // Subclasses should set this to the name of the event from our Stream Deck plugin
+  // that's used by the plugin to request the current mute state.
+  static GetMuteStateEventName;
+
+  _isElementMuted = (element) => {
+    if (!element) {
+      return true;
+    }
+
+    const iTags = element.querySelectorAll('i');
+    for (var i = 0; i < iTags.length; i++) {
+      if (iTags[i].getHTML() == this.constructor.MutedIconHTML) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  _getControlElement = () => {
+    /**
+     * These buttons are not visible under all circumstances (e.g. in the preview before joining
+     * a call) so don't throw an error if the button is not found.
+     */
+    return this._controlElementSelector();
+  };
+
+  _sendMuteState = () => {
+    this._sendSimpleMuteStateUpdate(this.constructor.MuteStateUpdateEventName);
+  }
+
+  handleStreamDeckEvent = (message) => {
+    if (message.event === this.constructor.ToggleEventName) {
+      this._toggleMute();
+    } else if (message.event === this.constructor.GetMuteStateEventName) {
+      this._sendMuteState();
+    }
+  }
+
+  _registerMutationObserver = () => {
+    const observer = new MutationObserver(this._handleControlChange);
+    observer.observe(document.body, {
+      childList: false,
+      attributes: true,
+      attributeFilter: ["aria-label"],
+      attributeOldValue: true,
+      subtree: true,
+    });
+  }
+
+}

browser-extension/event_handlers/label_based_toggle_event_handler.js

@@ -1,4 +1,18 @@
-class PinPresentationEventHandler extends ToggleEventHandler {
+class PinPresentationEventHandler extends IconBasedEventHandler {
+
+  /**
+   * When the presentation is pinned, we see an Unpin icon:
+   *   <i class="google-material-icons VfPpkd-kBDsod" aria-hidden="true">keep_off</i>
+   * When the presentation is not pinned, we see a Pin icon:
+   *   <i class="google-material-icons VfPpkd-kBDsod" aria-hidden="true">keep_outline</i>
+   */
+  static MutedIconHTML = "keep_outline";
+
+  static MuteStateUpdateEventName = "pinPresentationMutedState";
+
+  static ToggleEventName = "togglePinPresentation";
+
+  static GetMuteStateEventName = "getPinPresentationState";
 
   _controlElementSelector = () => {
     /**
@@ -8,57 +22,4 @@ class PinPresentationEventHandler extends ToggleEventHandler {
     return document.querySelector('button[jsname="fniDcc"]');
   }
 
-  _isElementMuted = (element) => {
-    // "muted" means there's no pinned presentation.
-    if (!element) {
-      return true;
-    }
-
-    /**
-     * When the presentation is pinned, we see an Unpin icon:
-     *   <i class="google-material-icons VfPpkd-kBDsod" aria-hidden="true">keep_off</i>
-     * When the presentation is not pinned, we see a Pin icon:
-     *   <i class="google-material-icons VfPpkd-kBDsod" aria-hidden="true">keep_outline</i>
-     */
-    const iTags = element.querySelectorAll('i');
-    for (var i = 0; i < iTags.length; i++) {
-      if (iTags[i].getHTML().includes('keep_outline')) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  _getControlElement = () => {
-    /**
-     * Unlike most of our controls, the Pin Presentation button is _not_ expected
-     * to be available in all meetings. There might be no one presenting. So unlike
-     * for normal toggleables, don't throw an error here.
-     */
-    return this._controlElementSelector();
-  };
-
-  _sendMuteState = () => {
-    this._sendSimpleMuteStateUpdate("pinPresentationMutedState");
-  }
-
-  handleStreamDeckEvent = (message) => {
-    if (message.event === "togglePinPresentation") {
-      this._toggleMute();
-    } else if (message.event === "getPinPresentationState") {
-      this._sendMuteState();
-    }
-  }
-
-  _registerMutationObserver = () => {
-    const observer = new MutationObserver(this._handleControlChange);
-    observer.observe(document.body, {
-      childList: false,
-      attributes: true,
-      attributeFilter: ["data-requested-participant-id"],
-      attributeOldValue: true,
-      subtree: true,
-    });
-  }
-
-}
+}

browser-extension/event_handlers/pin_presentation_event_handler.js

@@ -15,8 +15,8 @@
       "js": [
         "event_handlers/base_event_handler.js",
         "event_handlers/toggle_event_handler.js",
-        "event_handlers/label_based_toggle_event_handler.js",
         "event_handlers/aria_pressed_based_toggle_event_handler.js",
+        "event_handlers/icon_based_toggle_event_handler.js",
         "event_handlers/side_panel_event_handler.js",
         "event_handlers/camera_event_handler.js",
         "event_handlers/chat_event_handler.js",