Component View SDK not updating correctly at "Lower all hands" socket message

[daniel2 (Daniel)]

Description
When the host lowers all hands, the new Component View doesn’t update according to that event. Only the Component View participant’s hand gets lowered (in the user interface).

If everyone lowers their own hand one by one it’s no problem, but if the host clicks on “Lower all hands” then only the Component View user’s hand gets lowered, but nothing happens to the other participant’s hands, in the Component View participant list and gallery view.

In the native Zoom meeting client I can see that all hands are lowered, but they remain raised in the new Component View interface.

Browser Console Error
There is no browser console error logged, however I have taken screenshots of the websocket event history each time I clicked a button, as detailed below in the Screenshots section.

Which Web Meeting SDK version?
2.0.0

Meeting SDK Code Snippets

import { useRef } from 'react'

import logo from './logo.svg';
import './App.css';

// I manually added an "embedded.js" file in "node_modules/@zoomus/websdk/"
// to fix the import issue in 2.0.0
import ZoomMtgEmbedded from '@zoomus/websdk/embedded'

const client = ZoomMtgEmbedded.createClient()

function App() {
  const meetingSDKElement = useRef(null)
 
  function initClient () {
    if (meetingSDKElement.current) {
      client.init({
        assetPath: require('path').resolve('node_modules/@zoomus/websdk/dist/lib/av'),
        debug: true,
        zoomAppRoot: meetingSDKElement.current,
        language: 'en-US',
        customize: {
          meetingInfo: ['topic', 'host', 'mn', 'participant', 'dc'],
          toolbar: {
            buttons: [
              {
                text: 'Count participants',
                className: 'Count',
                onClick: () => {
                  const list = client.getAttendeeslist()
                  console.log(`Here are the ${ list.length } participants:`)

                  console.log(list)
                }
              },
              {
                text: 'Count raised hands',
                className: 'CountHands',
                onClick: () => {
                  console.log('Counting hands')
                  const list = client.getAttendeeslist()
                  const count = list.filter(att => att.bRaiseHand === true).length

                  console.log(`${ count } participants have raised their hand`)
                }
              },
            ]
          }
        }
      }).then(res => {
        console.log('Initialized!', res)
      }).catch(err => {
        console.error('Failed to init client', err)
      })
    }
  }
  
  function joinMeeting () {
    const meetingNumber = '/* MEETING_ID */'
    
    fetch('/* SIGNATURE_URL */', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        meetingNumber,
        role: 0
      })
    }).then(res => res.json())
    .then(signatureRes => {
      client.join({
        apiKey: '/* API_KEY */',
        signature: signatureRes.signature,
        meetingNumber,
        password: '/* MEETING_PASSWORD */',
        userName: 'Component View App',
        success: (r) => {
          console.log('Meeting joined!', r)
        },
        error: (err) => {
          console.error('Failed to join meeting!', err)
        }
      }).then(res => {
        console.log('Joined!', res)
      }).catch(err => {
        console.error('Join failed!', err)
      })
    })
  }
  
  function leaveMeeting () {
    client.leaveMeeting()
  }
  
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/app.jsx</code> and tap.... on the play button.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <button type='button' onClick={() => { initClient() }}>Init client</button>
        <button type='button' onClick={() => { joinMeeting() }}>Join meeting</button>
        <button type='button' onClick={() => { leaveMeeting() }}>Leave meeting</button>
        <br />
        <button type='button' onClick={() => { console.log(client.getAttendeeslist().filter(par => par.bRaiseHand === true).length, 'hands') }}>Count hands!</button>
        <div id="meetingSDKElement" ref={meetingSDKElement} />
      </header>
    </div>
  )
}

export default App;

To Reproduce(If applicable)
Steps to reproduce the behavior:

Screenshots

0. Clean state (joined meeting)
   

   

1. Component, websdk participant: Raise hand
   

   

2. Component: Lower hand
   

   

3. Host, native participant: Raise hand
   

   

4. Host: Lower hand
   

   

5. Component: Raise hand
   

   

6. Host: Raise hand
   

   

7. Host: Lower All Hands
   

   

(Step 7: Notice how only the Component participant’s hand gets lowered in the WebSDK Component View interface.)

8. Component: Raise hand
   

   

9. Host: Lower All Hands
   

   

10. Host: Raise hand
    

    

11. Host: Lower hand
    

    

12. Component: Raise hand
    

    

13. Host: Lower All Hands
    

    

Device (please complete the following information):

• Device: iMac
• OS: macOS 11.6
• Browser: Vivaldi
• Browser Version 4.3.2439.56 (Stable channel) (x86_64)

[MaxM]

Hey @daniel2,

Thank you for reaching out to the Zoom Developer Forum. I’ve been able to reproduce this issue and have since reached out to our engineering team. I’ll be sure to update you here as soon as I have more information.

(ZOOM-318845)

Thanks,
Max