feat(dgw): support multi-video recording #1271

irvingoujAtDevolution · 2025-03-13T20:30:26Z

This PR introduces support for multi-video recording playback in DGW.
It enables handling and synchronization of multiple recorded video streams.

buggy-multi-video-recorder.mp4

(cross file seeking will go to the wrong position, will be fixed in separate PR)

This is an initial implementation. Further improvements are required for full functionality, but the current state is sufficient for this PR's scope.

Issue: DGW-216

github-actions · 2025-03-13T20:30:39Z

Let maintainers know that an action is required on their side

Add the label release-required Please cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module) when you request a maintainer to cut a new release (Devolutions Gateway, Devolutions Agent, Jetsocat, PowerShell module)
Add the label release-blocker Follow-up is required before cutting a new release if a follow-up is required before cutting a new release
Add the label publish-required Please publish libraries (`Devolutions.Gateway.Utils`, OpenAPI clients, etc) when you request a maintainer to publish libraries (Devolutions.Gateway.Utils, OpenAPI clients, etc.)
Add the label publish-blocker Follow-up is required before publishing libraries if a follow-up is required before publishing libraries

Copilot

Pull Request Overview

This PR introduces multi-video recording playback support in DGW by updating the recording player context and integrating multi-stream support. Key changes include:

Creating a unified context (RecordingPlayerContext) to manage recording player state.
Integrating new components (RecordingPlayer, StreamingList, RecordingList, LeftPanel, RightPanel) to handle UI and playback.
Updating the API client, player logic, server-side file handling, and build configuration to support multi-video playback.

Reviewed Changes

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

Show a summary per file

File	Description
webapp/recording-player-tester/src/context/RecordingPlayerContext.tsx	Adds context and provider to manage recording player state.
webapp/recording-player-tester/src/components/RecordingPlayer.tsx	Implements the player component using iframe injection.
webapp/recording-player-tester/src/components/StreamingList.tsx	Lists and handles active streaming recordings.
webapp/recording-player-tester/src/components/RecordingList.tsx	Displays existing recordings with play functionality.
webapp/recording-player-tester/src/components/RightPanel.tsx	Manages view state for the player; contains a variable naming typo.
webapp/recording-player-tester/src/App.tsx	Wraps the application with the recording player provider.
webapp/recording-player-tester/src/components/LeftPanel.tsx	Provides navigation for active and existing recordings.
webapp/player-project/src/players/webm.ts	Updates multi-video player integration for webm files.
webapp/recording-player-tester/src/api-client.ts	Updates API client functions; renames and expands query parameters.
webapp/player-project/src/main.ts	Adjusts session details extraction logic with proper type conversion.
webapp/recording-player-tester/server/index.js	Revises file upload handling by converting a single handle into an array and updating usage.
webapp/player-project/vite.config.ts	Updates base configuration for the build process.

Comments suppressed due to low confidence (2)

webapp/recording-player-tester/src/components/RightPanel.tsx:6

The variable 'slectedRecording' appears to be misspelled. Rename it to 'selectedRecording' for clarity.

const { showPlayer, setShowPlayer, selectedRecording: slectedRecording } = useRecordingPlayerContext();

webapp/recording-player-tester/server/index.js:84

Since 'uploadedFileHandle' is now an array, referencing its property 'originalname' directly is invalid. Consider iterating or selecting the appropriate file object from the array.

else if (req.params.fileName === uploadedFileHandle.originalname) {

webapp/recording-player-tester/src/api-client.ts

webapp/video-player/src/__test__/util.test.ts

webapp/video-player/package.json

webapp/video-player/server.js

webapp/video-player/src/index.ts

webapp/video-player/src/video-player/player.ts

Copilot

Pull Request Overview

This pull request introduces multi-video recording playback support in DGW by integrating a custom multi-video web component and updating related configurations and player logic.

Documentation added for the new multi-video player in README
Updated player logic in webapp/player-project to use the multi-video player
Minor updates to CI, build configuration, and supporting modules

Reviewed Changes

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

Show a summary per file

File	Description
webapp/video-player/README.md	Added documentation for the multi-video player functionality
webapp/player-project/src/players/webm.ts	Updated player implementation to use the multi-video player
webapp/player-project/src/main.ts	Adjusted boolean conversion for the isActive parameter
.github/workflows/ci.yml	Added installation steps for video player dependencies
webapp/player-project/vite.config.ts	Modified base URL configuration
webapp/shadow-player/src/main.ts	Minor export syntax update
webapp/shadow-player/src/websocket.ts	Refactored import formatting
webapp/shadow-player/src/protocol.ts	Simplified export type declaration
webapp/shadow-player/src/streamer.ts	Updated attribute observation and source buffer callback formatting
webapp/shadow-player/vite.config.ts	Adjusted import ordering
webapp/shadow-player/src/sourceBuffer.ts	Code formatting improvements in the buffer append logic
webapp/shadow-player/demo-src/ui.ts & demo-src/play.ts	Minor adjustments to import ordering and file structure

Files not reviewed (7)

webapp/.node-version: Language not supported
webapp/biome.json: Language not supported
webapp/player-project/index.css: Language not supported
webapp/player-project/index.html: Language not supported
webapp/player-project/package.json: Language not supported
webapp/video-player/.env: Language not supported
webapp/video-player/.gitignore: Language not supported

webapp/video-player/README.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull Request Overview

This PR introduces support for multi-video recording playback in DGW by adding a new multi-video player web component and updating existing player implementations to leverage it. Key changes include updated documentation in the video player README, modifications to the webm player to use the new multi-video-player element, and various infrastructure improvements (CI, config, and minor refactorings across players).

Reviewed Changes

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

Show a summary per file

File	Description
webapp/video-player/README.md	Added comprehensive documentation for the new multi-video player.
webapp/player-project/src/players/webm.ts	Updated player to use the multi-video-player custom element.
webapp/player-project/src/main.ts	Improved boolean conversion for the isActive parameter.
webapp/player-project/vite.config.ts	Adjusted the base path configuration for proper asset loading.
.github/workflows/ci.yml	Added separate NPM dependency installation steps for each player.
webapp/shadow-player/src/websocket.ts	Refactored import order for cleaner code.
webapp/shadow-player/src/protocol.ts	Consolidated type exports to a single line.
webapp/shadow-player/src/main.ts	Fixed export syntax with a semicolon.
webapp/shadow-player/src/streamer.ts	Applied minor formatting and refactoring improvements.
webapp/shadow-player/vite.config.ts	Modified import order for consistency.
webapp/shadow-player/src/sourceBuffer.ts	Simplified code formatting and logical grouping in tryAppendBuffer.
webapp/shadow-player/demo-src/ui.ts	Removed extraneous lines for a cleaner demo.
webapp/shadow-player/demo-src/play.ts	Adjusted import ordering to align with project conventions.

Files not reviewed (7)

webapp/.node-version: Language not supported
webapp/biome.json: Language not supported
webapp/player-project/index.css: Language not supported
webapp/player-project/index.html: Language not supported
webapp/player-project/package.json: Language not supported
webapp/video-player/.env: Language not supported
webapp/video-player/.gitignore: Language not supported

Comments suppressed due to low confidence (1)

webapp/player-project/src/players/webm.ts:11

The 'width' attribute is set to '100%', but the README documentation uses numeric pixel values (e.g., width="800"). Consider ensuring consistency between usage and documentation for predictable rendering.

videoPlayer.setAttribute('width', '100%');

Copilot · 2025-03-18T15:08:10Z

webapp/player-project/src/players/webm.ts

-
-  videoPlayer.appendChild(videoSrcElement);
+  videoPlayer.setAttribute('width', '100%');
+  videoPlayer.setAttribute('height', '100%');


The 'height' attribute is set to '100%', whereas the README uses explicit numeric values (e.g., height="700"). Aligning these attribute values with the documented examples will help avoid potential layout inconsistencies.

Suggested change

videoPlayer.setAttribute('height', '100%');

videoPlayer.setAttribute('height', '700');

kristahouse

LGTM

CBenoit · 2025-03-19T06:50:02Z

@irvingoujAtDevolution Do I need to wait for a follow up before cutting a new release of the Gateway? Or it’s not yet part of the build?

irvingoujAtDevolution · 2025-03-19T15:07:14Z

@irvingoujAtDevolution Do I need to wait for a follow up before cutting a new release of the Gateway? Or it’s not yet part of the build?

Please wait a bit for the follow up PR, thank you!

CBenoit · 2025-03-19T23:55:33Z

@irvingoujAtDevolution I added the release-blocker label. We’ll remove it once the follow up is merged.

irvingoujAtDevolution changed the title ~~multi file video player~~ feat(dgw): multi video recording player Mar 13, 2025

feat(dgw):multi-video recording player

4a1dae4

irvingoujAtDevolution force-pushed the multi-file-video-player branch from 979e69e to 4a1dae4 Compare March 13, 2025 20:32

irvingoujAtDevolution changed the title ~~feat(dgw): multi video recording player~~ feat(dgw): support multi-video recording playback Mar 13, 2025

irvingoujAtDevolution requested review from CBenoit, Copilot and kristahouse March 13, 2025 20:34

Copilot AI reviewed Mar 13, 2025

View reviewed changes

webapp/recording-player-tester/src/api-client.ts Outdated Show resolved Hide resolved

CI

6f50b94

irvingoujAtDevolution requested review from a team as code owners March 13, 2025 20:38

irvingoujAtDevolution changed the title ~~feat(dgw): support multi-video recording playback~~ feat(dgw): support multi-video recording play Mar 13, 2025

irvingoujAtDevolution changed the title ~~feat(dgw): support multi-video recording play~~ feat(dgw): support multi-video recording Mar 13, 2025

irvingoujAtDevolution added 2 commits March 13, 2025 16:40

undo changes in another PR

de4551e

clean up

0c148c4

CBenoit reviewed Mar 14, 2025

View reviewed changes

webapp/video-player/src/__test__/util.test.ts Outdated Show resolved Hide resolved

CBenoit reviewed Mar 14, 2025

View reviewed changes

webapp/video-player/package.json Outdated Show resolved Hide resolved

CBenoit reviewed Mar 14, 2025

View reviewed changes

webapp/video-player/server.js Show resolved Hide resolved

CBenoit reviewed Mar 14, 2025

View reviewed changes

webapp/video-player/src/index.ts Show resolved Hide resolved

kristahouse reviewed Mar 17, 2025

View reviewed changes

webapp/video-player/src/video-player/player.ts Outdated Show resolved Hide resolved

clean up and review

5d172db

irvingoujAtDevolution requested review from CBenoit, Copilot and kristahouse March 18, 2025 15:03

Copilot AI reviewed Mar 18, 2025

View reviewed changes

webapp/video-player/README.md Outdated Show resolved Hide resolved

irvingoujAtDevolution requested a review from Copilot March 18, 2025 15:06

Update webapp/video-player/README.md

6b01d92

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot AI reviewed Mar 18, 2025

View reviewed changes

kristahouse approved these changes Mar 18, 2025

View reviewed changes

CBenoit enabled auto-merge (squash) March 19, 2025 06:44

CBenoit approved these changes Mar 19, 2025

View reviewed changes

CBenoit merged commit fbac3d2 into master Mar 19, 2025
39 checks passed

CBenoit deleted the multi-file-video-player branch March 19, 2025 06:45

CBenoit added the release-blocker Follow-up is required before cutting a new release label Mar 19, 2025

CBenoit mentioned this pull request May 15, 2025

chore(release): prepare for 2025.1.5 #1342

Merged

CBenoit removed the release-blocker Follow-up is required before cutting a new release label May 15, 2025

	videoPlayer.setAttribute('height', '100%');
	videoPlayer.setAttribute('height', '700');

feat(dgw): support multi-video recording #1271

feat(dgw): support multi-video recording #1271

Uh oh!

Conversation

irvingoujAtDevolution commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 13, 2025

Let maintainers know that an action is required on their side

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Mar 18, 2025

Choose a reason for hiding this comment

Uh oh!

kristahouse left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

CBenoit commented Mar 19, 2025

Uh oh!

irvingoujAtDevolution commented Mar 19, 2025

Uh oh!

CBenoit commented Mar 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

irvingoujAtDevolution commented Mar 13, 2025 •

edited

Loading

CBenoit commented Mar 19, 2025 •

edited

Loading