feat: Add support for Video type in View table to display videos (#3061)

Author: mtrezza

README.md

@@ -99,6 +99,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
       - [Pointer](#pointer)
       - [Link](#link)
       - [Image](#image)
+      - [Video](#video)
 - [Contributing](#contributing)
 
 # Getting Started
@@ -1633,6 +1634,24 @@ Example:
 > [!Warning]
 > The URL will be directly invoked by the browser when trying to display the image. For security reasons, make sure you either control the full URL, including the image file name, or sanitize the URL before returning it to the dashboard. URLs containing `javascript:` or `<script` will be blocked automatically and replaced with a placeholder.
 
+#### Video
+
+Videos are rendered directly in the output table with a `<video>` tag that includes playback controls. The content mode is always "scale to fit", meaning that the video maintains its aspect ratio within the specified dimensions.
+
+Example:
+
+```json
+{
+  "__type": "Video",
+  "url": "https://example.com/video.mp4",
+  "width": "320",
+  "height": "240"
+}
+```
+
+> [!Warning]
+> The URL will be directly invoked by the browser when trying to display the video. For security reasons, make sure you either control the full URL, including the video file name, or sanitize the URL before returning it to the dashboard. URLs containing `javascript:` or `<script` will be blocked automatically and replaced with a placeholder.
+
 # Contributing
 
 We really want Parse to be yours, to see it grow and thrive in the open source community. Please see the [Contributing to Parse Dashboard guide](CONTRIBUTING.md).

src/dashboard/Data/Views/Views.react.js

@@ -273,6 +273,8 @@ class Views extends TableView {
                 type = 'Link';
               } else if (val.__type === 'Image') {
                 type = 'Image';
+              } else if (val.__type === 'Video') {
+                type = 'Video';
               } else {
                 type = 'Object';
               }
@@ -406,6 +408,8 @@ class Views extends TableView {
               type = 'Link';
             } else if (value.__type === 'Image') {
               type = 'Image';
+            } else if (value.__type === 'Video') {
+              type = 'Video';
             } else {
               type = 'Object';
             }
@@ -490,6 +494,43 @@ class Views extends TableView {
                 }}
               />
             );
+          } else if (type === 'Video') {
+            // Sanitize URL
+            let url = value.url;
+            if (
+              !url ||
+              url.match(/javascript/i) ||
+              url.match(/<script/i)
+            ) {
+              url = '#';
+            }
+
+            // Parse dimensions, ensuring they are positive numbers
+            const width = value.width && parseInt(value.width, 10) > 0 ? parseInt(value.width, 10) : null;
+            const height = value.height && parseInt(value.height, 10) > 0 ? parseInt(value.height, 10) : null;
+
+            // Create style object for scale-to-fit behavior
+            const videoStyle = {
+              maxWidth: width ? `${width}px` : '100%',
+              maxHeight: height ? `${height}px` : '100%',
+              objectFit: 'contain', // This ensures scale-to-fit behavior maintaining aspect ratio
+              display: 'block'
+            };
+
+            content = (
+              <video
+                src={url}
+                controls
+                style={videoStyle}
+                onError={(e) => {
+                  if (e.target && e.target.style) {
+                    e.target.style.display = 'none';
+                  }
+                }}
+              >
+                Your browser does not support the video tag.
+              </video>
+            );
           } else if (value === undefined) {
             content = '';
           } else {