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

**URL:** <https://devforum.zoom.us/t/component-view-sdk-not-updating-correctly-at-lower-all-hands-socket-message/59248>\
**Category:** Web\
**Created:** [October 22, 2021, 12:21pm UTC](https://devforum.zoom.us/t/component-view-sdk-not-updating-correctly-at-lower-all-hands-socket-message/59248 "2021-10-22T12:21:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![daniel2](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daniel2/32/8619_2.png) [@daniel2](https://devforum.zoom.us/u/daniel2)\
**Post date:** [October 22, 2021, 12:21pm UTC](https://devforum.zoom.us/t/component-view-sdk-not-updating-correctly-at-lower-all-hands-socket-message/59248/1 "2021-10-22T12:21:24Z")

</div>

**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**

```javascript
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**

1. Clean state (joined meeting)  

2. Component, websdk participant: Raise hand  

3. Component: Lower hand  

4. Host, native participant: Raise hand  

5. Host: Lower hand  

6. Component: Raise hand  

7. Host: Raise hand  

8. Host: **Lower All Hands**  

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

1. Component: Raise hand  

2. Host: **Lower All Hands**  

3. Host: Raise hand  

4. Host: Lower hand  

5. Component: Raise hand  

6. 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)

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [October 26, 2021, 1:43am UTC](https://devforum.zoom.us/t/component-view-sdk-not-updating-correctly-at-lower-all-hands-socket-message/59248/2 "2021-10-26T01:43:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [November 25, 2021, 11:44am UTC](https://devforum.zoom.us/t/component-view-sdk-not-updating-correctly-at-lower-all-hands-socket-message/59248/3 "2021-11-25T11:44:52Z")

</div>

Closed on November 25, 2021, 11:44am UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.