fix(CallPopUp): Enable call pop up when user is out of active call chat

[lgmarchi]

What this PR does 📖

This pull request includes significant updates to the VideoPreview component in the calling module. The changes involve enhancing the video preview functionality, improving the user interface, and fixing the visibility toggle for the call screen.

Enhancements to VideoPreview functionality:

• src/lib/components/calling/VideoPreview.svelte: Replaced the show variable with showVideoPreview to control the visibility of the video preview, and added logic to sort and filter users based on their audio status.
• src/lib/components/calling/VideoPreview.svelte: Implemented a new attachStream function to handle the attachment of video streams to video elements.

User interface improvements:

• src/lib/components/calling/VideoPreview.svelte: Updated the video preview container to use a grid layout for displaying multiple video streams, and added styles to improve the appearance and layout of video elements. [1] [2]

Visibility toggle fix:

• src/lib/media/Voice.ts: Moved the callScreenVisible.set(false) statement to ensure the call screen visibility is correctly toggled when leaving a call. [1] [2]

Re-enabling the VideoPreview component:

• src/routes/+layout.svelte: Re-enabled the VideoPreview component in the layout by removing the comment that was disabling it.

Special notes for QAs 🧪

• It will just show 3 users in Video Preview, even if call has 10 users on it. But, if last user in call, start to speak, he will be changed to the first place in the list, and will appear on Video Preview.

  Video

  Screen.Recording.2024-11-14.at.16.25.54.mov

• When user leave a call, should update video preview immediately.

  Video

  Screen.Recording.2024-11-14.at.16.44.05.mov

• It works with video enabled too.

  Image

  

Which issue(s) this PR fixes 🔨

• Resolve bug(Calling): PopOut viewer is missing  #854

Special notes for reviewers 🗒️

Additional comments 🎤

[github-actions]

Download the app installers for this pull request:

• build-macos.zip
• build-windows.zip
• build-ubuntu.zip
• build-android.zip

[lgmarchi]

@stavares843 and @phillsatellite I think it has a problem yet, when we test with user that didn't do the call.

[lgmarchi]

• Add feedback when waiting other users to join

• Now showing quantity of users active in call

[github-actions]

Automated tests execution is complete! You can find the Playwright test report here and the Allure Test Report here

[stavares843]

so i tested with @phillsatellite and both on group and also on 1:1 and i had the following bug

Gravacao.do.ecra.2024-11-19.as.22.15.52.mov

then both @phillsatellite and i had the following bug

290390209.mov

also no image when i activate video but worked for @phillsatellite - works on dev

browser - chrome

[lgmarchi]

so i tested with @phillsatellite and both on group and also on 1:1 and i had the following bug

Gravacao.do.ecra.2024-11-19.as.22.15.52.mov
then both @phillsatellite and i had the following bug

290390209.mov
also no image when i activate video but worked for @phillsatellite - works on dev

browser - chrome

Very interesting, I will do more tests and try to improve this code.

[lgmarchi]

so i tested with @phillsatellite and both on group and also on 1:1 and i had the following bug

Gravacao.do.ecra.2024-11-19.as.22.15.52.mov
then both @phillsatellite and i had the following bug

290390209.mov
also no image when i activate video but worked for @phillsatellite - works on dev

browser - chrome

I did a commit for it.