feat: Add support for Video type in View table to display videos

[mtrezza]

Summary by CodeRabbit

• New Features

  • Added video rendering capability in data views and tables, supporting custom dimensions, playback controls, and scale-to-fit content mode with built-in URL sanitization.

• Documentation

  • Updated guides with video component documentation, including configuration examples, styling information, and security considerations for video URLs.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[parse-github-assistant]

🚀 Thanks for opening this pull request!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds Video as a new view type to the dashboard. Updates README documentation with Video section detailing rendering with video tags, controls, sizing, and URL sanitization examples. Extends Views component to recognize and render Video-type values with sanitized URLs, optional width/height, object-fit scaling, and error handling.

Changes

Cohort / File(s)	Summary
Documentation README.md	Adds Video entry to table of contents, new Video section for info panels with JSON example payload and warnings about URL sanitization, and standalone Video item section in UI component guides with styling notes.
Video Rendering Support src/dashboard/Data/Views/Views.react.js	Extends value-type inference across multiple render paths to recognize Video as valid type. Implements video element rendering in table cells with URL sanitization, optional width/height attributes, object-fit containment styling, and error handling to hide on load failure. Updates normalization logic to classify Video values when constructing rows and columns.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Areas requiring attention:
  • Type inference logic updates across multiple render paths to ensure Video type is consistently recognized
  • URL sanitization implementation for video URLs and how it integrates with existing patterns for other media types
  • Width/height handling and object-fit styling to confirm proper sizing behavior in table cells
  • Error handling for video load failures and edge cases

Possibly related PRs

• feat: Add hyperlink support in Views table #2925: Modifies Views.react.js to add Link rendering with type inference and rendering logic similar to the Video addition pattern.
• feat: Add support for Image type in View table to display images #2952: Adds Image media-type renderer to Views.react.js with identical patterns for type detection, URL sanitization, sizing, and error handling.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No pull request description was provided; the template requires Issue Description, Approach, and TODOs sections to be completed.	Add a complete description following the template with Issue Description (referencing the related issue), Approach explaining the implementation, and relevant TODOs.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding support for a Video type in the View table to display videos.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[parseplatformorg]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/dashboard/Data/Views/Views.react.js (1)

497-533: Consider strengthening URL sanitization.

The current regex-based URL sanitization using url.match(/javascript/i) and url.match(/<script/i) can be bypassed with various encoding techniques (e.g., java\nscript:, HTML entities, URL encoding). While this matches the existing Image implementation, consider using a more robust approach for both.

A safer approach would be to validate the URL scheme explicitly:

-            if (
-              !url ||
-              url.match(/javascript/i) ||
-              url.match(/<script/i)
-            ) {
-              url = '#';
-            }
+            try {
+              const parsedUrl = new URL(url, window.location.origin);
+              if (!['http:', 'https:', 'data:'].includes(parsedUrl.protocol)) {
+                url = '#';
+              }
+            } catch {
+              url = '#';
+            }

This would apply to the Image type as well (lines 464-471) for consistency.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cd75c5a and 84633f0.

📒 Files selected for processing (2)

• README.md (2 hunks)
• src/dashboard/Data/Views/Views.react.js (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Docker linux/amd64

🔇 Additional comments (4)

src/dashboard/Data/Views/Views.react.js (2)

276-277: LGTM!

The Video type detection during column building follows the established pattern used for other types like Image and Link.

---

411-412: LGTM!

The Video type detection in row rendering mirrors the column-building logic, maintaining consistency.

README.md (2)

102-102: LGTM!

Table of contents entry correctly added for the new Video section.

---

1637-1654: LGTM!

Documentation is well-structured, follows the established pattern from the Image section, and includes appropriate security warnings. The JSON example clearly shows the expected structure with __type, url, width, and height properties.

[parseplatformorg]

🎉 This change has been released in version 8.2.0-alpha.4