VIDSOL-34: Scroll/Zoom on ScreenShare

[cpettet]

What is this PR doing?

Subscribers should be able to Scroll and Zoom on Content Sharing.

How should this be manually tested?

Enter to the app and share screen. Then, open another tab with a subscriber so as to see the screen shared. You should see a zoom icon on the right down part of the screen sharing.

What are the relevant tickets?

A maintainer will add this ticket number.

Resolves VIDSOL-34

Checklist

[✅] Branch is based on develop (not main).
[ ] Resolves a Known Issue.
[ ] If yes, did you remove the item from the docs/KNOWN_ISSUES.md?
[ ] Resolves an item reported in Issues.
If yes, which issue? Issue Number?

[sonarqubecloud]

Quality Gate failed

Failed conditions
78.1% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

[Copilot]

Pull Request Overview

This PR implements scroll/zoom functionality for screenshare components by creating a dedicated screenshare video tile with zoom and pan capabilities. The implementation replaces conditional logic in the existing Subscriber component with a specialized ScreenshareVideoTile component.

• Creates new ScreenshareVideoTile component with mouse wheel zoom and drag-to-pan functionality
• Adds ZoomIndicator component to show current zoom level and provide reset functionality
• Refactors Subscriber component to use ScreenshareVideoTile for screenshare content

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

File	Description
frontend/src/components/Subscriber/Subscriber.tsx	Refactored to use ScreenshareVideoTile for screenshare content, removing conditional UI logic
frontend/src/components/MeetingRoom/ZoomIndicator/	New component displaying zoom level percentage and reset button
frontend/src/components/MeetingRoom/ScreenshareVideoTile/	New specialized video tile with zoom/pan capabilities for screenshare content

Comments suppressed due to low confidence (1)

frontend/src/components/Subscriber/Subscriber.tsx:1

• The isScreenshare prop is being removed from VideoTile but the line is still shown as removed. This suggests the prop may still be referenced in the VideoTile component definition and should be cleaned up there as well.

import { MouseEvent, ReactElement, useEffect, useRef, useState } from 'react';

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[VZaphod]

LGTM

[behei-vonage]

LGTM! 🚀

[dwivedisachin]

Tested the PR:

• Zoom not working on mobile (Safari iOS): Pinch and zoom is not working; suggest hiding the zoom icon on mobile.
• Misleading tooltip: Zoom icon tooltip says “Zoom in” but clicking does nothing; should reflect actual behavior (e.g., “Fit to screen” or “100% zoom”).
• Zoom icon interaction: When zoomed in, only the lens icon is clickable; the displayed zoom percentage is not interactive.
• Inconsistent gestures across browsers: On Safari, pinch and zoom is not working, and scroll up and down gestures zoom in/out inconsistently; Chrome works with pinch and zomm and scroll both.
• Lack of + / – controls: Users with a mouse cannot zoom easily; adding “+” and “–” buttons would improve usability.

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[behei-vonage]

LGTM! 🚀

[VZaphod]

LGTM

[rserebrennykov]

Tested on Chrome and Firefox browsers:
Chrome - LGTM
Firefox - doesn't have zoom button

[rserebrennykov]

LGTM