Zoom Component View not setting default view as gallery, no errors. Opens in ribbon view

linzblue5 · March 4, 2023, 7:44pm

I will start by saying I do have the shared array buffer working, I can set it to gallery view by clicking and changing it, but I would like for it to open in gallery view by default.

Here is the relevant code:

function initZoomMeeting(signature) {
  
  const meetingSDKElement = document.getElementById('meetingSDKElement')
  const meetingSDKChatElement = document.getElementById('meetingSDKChatElement')
  const userName = document.getElementById('userName').value
  const meetingNumber = document.getElementById('meetingNumber').value
  const passWord = document.getElementById('passWord').value
  const client = ZoomMtgEmbedded.createClient()

  client.init({
    zoomAppRoot: meetingSDKElement,
    language: 'en-US',
    customize: {
      video: {
        defaultViewType: 'gallery',
        isResizable: true,
        viewSizes: {
          default: {
            width: 640,
            height: 360
          },
          ribbon: {
            width: 800,
            height: 60
          },
          gallery: {
            width: 640,
            height: 360
          }
        }
      },
      chat: {
        anchorElement: meetingSDKChatElement,
        placement: 'top'
      },
    }
  })

Will say this also, I was on 2.9.7 but I upodated, and changed all the packages to use 2.10.1, and still same issue.

These are the only warnings I get:

If you do need the full code, I can include it. Everything works correctly just not opening as gallery view.
Device (please complete the following information):

OS: Windows 10
Browser: Chrome
Browser Version: Latest

freelancer.nak · March 5, 2023, 2:50pm

@linzblue5 Hope you will be fine.

There is no API available to switch b/w Video Layouts. But you can use the below trick

client.on('connection-change', (e) => {
                    if (e.state == 'Connected') {
                        return new Promise((resolve, reject) => {
                            let ribbon = document.querySelector('button[title="Ribbon"]');

                            if (ribbon) {
                                ribbon.click();
                                console.log('-- switching to speak view --');

                                return resolve(true);
                            }

                            return reject(true);
                        }).then((r) => {
                            var xpath = "//span[text()='Active']";
                            var speakView = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

                            if (speakView && speakView.singleNodeValue) {
                                speakView.singleNodeValue.click();
                            }
                        }).catch((error) => {
                            console.log('--- error when switching to speak view --> ', error);
                        });
                    }
                });

linzblue5 · March 7, 2023, 7:23am

Awesome I appreciate you, yeah in the update I think a week ago the api is supposed to allow us to set the default view, but thank you I was able to get the following code to work based off the example you gave if anybody needs the “actual” (this is the solution), but the solution for the gallery view in particular I’ll include my code:

  client.on('connection-change', (e) => {
    if (e.state == 'Connected') {
      return new Promise((resolve, reject) => {
        let ribbon = document.querySelector('button[title="Ribbon"]');
  
        if (ribbon) {
          ribbon.click();
          console.log('-- switching to galleryview --');
  
          return resolve(true);
        }
  
        return reject(true);
      }).then((r) => {
        let xpath = "//span[text()='Gallery']";
        let galleryView = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
  
        if (galleryView && galleryView.singleNodeValue) {
          galleryView.singleNodeValue.click();
        }
      }).catch((error) => {
        console.log('--- error when switching to gallery view --> ', error);
      });
    }
  });}

MaxM · March 8, 2023, 1:07am

@linzblue5 I was able to get this feature working by casting the ‘gallery’ string to a SuspensionViewType.

When I don’t do that I see the following error:

Type '"gallery"' is not assignable to type 'SuspensionViewType | undefined'.  TS2322

    70 |       customize: {
    71 |         video: {
  > 72 |           defaultViewType: 'gallery',
       |           ^
    73 |           viewSizes: {
    74 |             default: {
    75 |               height: 1024,

Similarly, when I use the SuspensionViewType.Gallery directly I see the following errors in the console:

index.tsx:72 Uncaught TypeError: Cannot read properties of undefined (reading 'Gallery')
    at Module.<anonymous> (index.tsx:72:1)
    at ./src/index.tsx (index.tsx:110:1)
    at __webpack_require__ (bootstrap:851:1)
    at fn (bootstrap:150:1)
    at 1 (index.tsx:110:1)
    at __webpack_require__ (bootstrap:851:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:95

VM235:2 Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)

I’m working with our Meeting SDK team to see if there is a better way to use this parameter or if there is a change we can make to the SDK to make this more intuitive. I’ll be sure to keep you posted.

linzblue5 · March 8, 2023, 6:26am

Okay awesome, I’ll give this a try for speed sakes even though you can’t tell the magic is happening in the background., also as I am still working on this project for a client so I will make sure let yall know If I encounter any other properties that don’t work as intended.

Thanks for the response and glad to hear you guys are checking it out, are we only able to use this if we are are using TypeScript?

Edit found another issue, with the current code it doesn’t adjust the videoSizes, also tried putting it into a popper, and still wouldn’t work am I doing something wrong, as well as the placement isn’t working, do I need to be using TypeScript for the majority of these things to work

(Keep in mind I am using just regular js, no typescript.
Code:

    customize: {
      video: {
        isResizable: false,
        videoSizes: {
          default: {
            height: 1440,
            width: 720
          }
        },
        popper: {
          disableDraggable: true
        }
      },
      chat: {
        popper: {
          disableDraggable: true,
          placement: 'right-start' ** Doesn't work (Also tried PlacementType(I think is what it was called), and also didnt work in and outside popper) **
        }
      },
    }
  })

MaxM · March 8, 2023, 5:45pm

Thie parameter name that you will want to use is viewSizes instead of videoSizes. I would make sure to set the ribbon parameter as well. You can confirm this with our documentation:

My mistake, I didn’t realize that you were using vanilla JS.

For anyone else that comes across this post, our team will work to fix the issues for TS the next release.

linzblue5 · March 9, 2023, 1:44am

Oh my mistake, I will give that a try and update this post once I begin working on it if I still have issues.

Is there a section in the documentation that explains what is able to be used with vanilla js?
(Seems like its about half and half)

MaxM · March 9, 2023, 3:03am

Typescript is really just a type system that sits on top of Javascript. Because of that, everything in the documentation is available with Javascript. The only real difference is that you don’t have to worry about types with Javascript.

For example, you are able to just use the 'gallery' string but with Typescript, I have to make sure that it satisfies the SuspensionViewType enumeration type that is used.

In other words, you can follow the reference with vanilla javascript and shouldn’t run into any issues.

linzblue5 · March 9, 2023, 4:29am

Ah okay I see I have never used Typescript though I have heard about it, I haven’t been using JS in the past few years as I’ve been working mostly with python but got some work that I needed to use JS, so but just to confirm something isn’t working right, like the code I had previously did seem correct?

MaxM · March 9, 2023, 10:43pm

Yes, the defaultViewType parameter that you provided was set correctly. I just tested this with our Sample Web App component view except with JS instead of TS and saw that field worked as expected.

Are you seeing any errors in the console?

logidotselearning · March 10, 2023, 6:23am

This issue seems to exist for me in SDK version 2.9.7. Passing defaultViewType as gallery does nothing to the rendered view. It would be nice if we don’t have to resort to techniques like this

pct196 · March 14, 2023, 5:37am

Hi,
I’m using the latest library, vanilla JS and having this issue. My config is:

{
  "language": "en-US",
  "zoomAppRoot": «HTMLElement»,
  "customize": {
    "video": {
      "isResizable": false,
      "popper": {
        "disableDraggable": true
      },
      "viewSizes": {
        "default": {
          "height": 480,
          "width": 960
        }
      },
      "defaultViewType": "gallery"
    }
  }
}

Paul

system · April 13, 2023, 3:37pm

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