DOC-3223: Add missing uploadcare_resources option, cleanup of unsupported video_props.

Author: kemister85

modules/ROOT/pages/uploadcare-video.adoc

@@ -47,6 +47,8 @@ tinymce.init({
 [NOTE]
 ====
 The {pluginname} plugin uses the same plugin code `+uploadcare+` as the Media Optimizer plugin. Video functionality is automatically enabled when video files are uploaded.
+
+When bundling {productname} with webpack or similar tools, the xref:uploadcare.adoc#uploadcare-resources[uploadcare_resources] option is required for video functionality to work properly, as it tells the plugin where to find the additional JavaScript resources needed for video playback.
 ====
 
 == Video Operations
@@ -68,48 +70,38 @@ Below is an overview of the features provided by the Video Optimizer plugin:
 
 Below are the video player control options that are available to the video element:
 
-[cols="1,1,4",options="header"]
+[cols="2,4",options="header"]
 |===
-| Operation | Icon | Description
+| Operation | Description
 
 | Play
-|
 | Customize video player controls and behavior
 
 | Mute
-| 
 | Mute the video
 
 | Unmute
-| 
 | Unmute the video
 
 | Slider
-| 
 | Shows the progress of the video and allows users to move the slider to seek to a specific time in the video
 
 | Resize
-| image:icons/resize.svg[resize.svg]
 | Changes the size of the video (when enabled)
 
 | Remaining Time
-| 
 | Shows the remaining time of the video
 
 | Picture-in-Picture
-| 
 | Enables picture-in-picture mode for the video
 
 | Settings
-| 
 | Opens the video settings menu
 
 | Fullscreen
-| 
 | Enables fullscreen mode for the video
 
 | UC Logo
-| 
 | Shows the Uploadcare logo
 |===
 
@@ -137,14 +129,11 @@ The plugin creates a custom `+<uc-video>+` element that replaces the standard HT
   autoplay="false"
   loop="false"
   muted="false"
-  playsinline="true"
   preload="metadata"
   width="640"
   height="360"
   poster="https://example.com/poster.jpg"
-  crossorigin="anonymous"
   showlogo="false"
-  posteroffset="5s">
 </uc-video>
 ----
 

modules/ROOT/pages/uploadcare.adoc

@@ -41,6 +41,7 @@ tinymce.init({
   plugins: 'uploadcare',
   toolbar: 'uploadcare uploadcare-video',
   uploadcare_public_key: '<your-public-key>', // Required for Uploadcare integration
+  uploadcare_resources: 'uploadcare/uploadcare', // Required when Media Optimizer addon is bundled with TinyMCE
   // uploadcare_signed_upload_auth_provider: (_publicKey) => Promise.resolve({
   //   signature: 'sig',
   //   expire: 123
@@ -83,6 +84,8 @@ include::partial$configuration/uploadcare_cdn_base_url.adoc[leveloffset=+1]
 
 include::partial$configuration/uploadcare_store_type.adoc[leveloffset=+1]
 
+include::partial$configuration/uploadcare_resources.adoc[leveloffset=+1]
+
 :includedSection: uploadcarePlugin
 include::partial$configuration/a11y_advanced_options.adoc[leveloffset=+1]
 :!includedSection:

modules/ROOT/partials/configuration/uploadcare_resources.adoc

@@ -0,0 +1,82 @@
+[[uploadcare-resources]]
+== `uploadcare_resources`
+
+Specifies the base path where the Uploadcare plugin resources are served from. This option is primarily used when bundling {productname} with webpack or other bundlers, where the plugin needs to know where to load additional resources such as the `ucvideo.min.js` file for video functionality.
+
+When {productname} is bundled, the Uploadcare plugin cannot automatically determine where its additional resources are located. This option tells the plugin where to find these resources by specifying the root path to the Uploadcare plugin directory.
+
+*Type:* `+String+`
+
+*Default:* `+undefined+`
+
+*Possible values:* A string that points to the root path of the Uploadcare plugin directory.
+
+[NOTE]
+This option is only required when using the **Media Optimizer** as a paid "addon" and bundling {productname} with webpack or similar bundling tools.
+
+.Example: Setting `uploadcare_resources`
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  plugins: 'uploadcare',
+  toolbar: 'uploadcare uploadcare-video',
+  uploadcare_public_key: '<your-public-key>',
+  uploadcare_resources: 'uploadcare/uploadcare', // Points to the uploadcare plugin directory
+  license_key: '<your-license-key>'
+});
+----
+
+=== Complete Bundled Setup Example
+
+For a complete example of setting up {productname} with the Uploadcare addon, see the bundled setup example:
+
+[source,html]
+----
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TinyMCE with Uploadcare Addon</title>
+    <script src="path/to/tinymce/tinymce.min.js"></script> <!-- points to the tinymce.min.js file in your project -->
+    <script src="path/to/uploadcare/uploadcare/plugin.min.js"></script> <!-- points to the uploadcare plugin.min.js file in your project -->
+</head>
+<body>
+    <textarea>Welcome to TinyMCE with Uploadcare!</textarea>
+    <script>
+        tinymce.init({
+          selector: 'textarea',
+          plugins: [
+            "uploadcare"
+          ],
+          toolbar: "uploadcare uploadcare-video",
+          uploadcare_resources: 'path/to/uploadcare/uploadcare', // points to the uploadcare plugin directory
+          uploadcare_public_key: '<your-public-key>', 
+          license_key: '<your-license-key>'
+        });
+    </script>
+</body>
+</html>
+----
+
+=== Resource Structure
+
+When using `uploadcare_resources`, ensure your directory structure follows this pattern:
+
+.Example directory structure:
+[source,text]
+----
+project/
+├── uploadcare/
+│  └── uploadcare/
+│     ├── js/
+│     │   └── ucvideo.min.js
+│     ├── css/
+│     │   └── uc-video.css
+│     └── plugin.min.js
+└── tinymce/
+    └── tinymce.min.js
+----
+
+The plugin will automatically append the necessary subpaths (e.g., `/js/ucvideo.min.js`) to the base path you specify.

modules/ROOT/partials/configuration/uploadcare_video_properties.adoc

@@ -9,24 +9,18 @@ Configures the video player properties and behavior for video elements.
 
 === Properties
 
-[cols="2,1,2,1,2"]
+[cols="1,1,2,1,2"]
 |===
 |Property | Type | Valid Values | Default | Description
 |`autoplay` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically starts video playback when the page loads.
 |`controls` | Boolean | `true`, `false` | `true` | Displays the video player controls (play/pause, volume, timeline, fullscreen, etc.). When disabled, users can still control playback through keyboard shortcuts or programmatic methods.
-|`controlsList` | String | `nodownload`, `nofullscreen`, `noremoteplayback` (space-separated) | `undefined` | Specifies which controls to hide from the video player interface. Use space-separated values to disable multiple controls (e.g., `"nodownload nofullscreen"`).
-|`disablePictureInPicture` | Boolean | `true`, `false`, `undefined` | `undefined` | Prevents the video from entering picture-in-picture mode, which allows users to continue watching while using other applications or tabs.
-|`disableRemotePlayback` | Boolean | `true`, `false`, `undefined` | `undefined` | Disables the ability to cast or stream the video to external devices like Chromecast or AirPlay.
 |`height` | Number or String | Pixels or CSS value | `undefined` | Sets the video player height. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vh"`, or `"auto"`.
 |`loop` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically restarts video playback from the beginning when it reaches the end. Useful for background videos or continuous content loops.
 |`muted` | Boolean | `true`, `false`, `undefined` | `undefined` | Mutes the video audio by default. Often used in combination with autoplay since most browsers require muted videos for autoplay to function.
-|`playsInline` | Boolean | `true`, `false`, `undefined` | `undefined` | Forces the video to play inline within the page instead of opening in fullscreen mode on mobile devices. Essential for preventing unwanted fullscreen behavior on iOS Safari. Without this attribute, iOS devices will automatically enter fullscreen mode when video playback begins, which can disrupt the user experience in web applications or when videos are part of a larger content layout.
 |`poster` | String | Valid URL | `undefined` | Sets a poster image (thumbnail) that displays before video playback begins. The image should match the video's aspect ratio for best results.
 |`preload` | String | `auto`, `metadata`, `none` | `undefined` | Controls how much video data to preload: `auto` loads the entire video, `metadata` loads only basic information, `none` loads nothing until playback starts. Performance considerations: use `metadata` for better page load times and bandwidth conservation, `auto` for immediate playback without buffering delays, and `none` for maximum bandwidth savings when videos may not be played.
 |`width` | Number or String | Pixels or CSS value | `undefined` | Sets the video player width. Accepts numeric values (interpreted as pixels) or CSS values like `"100%"`, `"50vw"`, or `"auto"`.
-|`crossOrigin` | String | `anonymous`, `use-credentials` | `undefined` | Configures CORS (Cross-Origin Resource Sharing) for the video element. Use `anonymous` for basic cross-origin requests or `use-credentials` when cookies/credentials are needed.
 |`showLogo` | Boolean | `true`, `false` | `true` | Displays the Uploadcare logo overlay on the video player.
-|`posterOffset` | String | Time string (e.g., `5s`) | `undefined` | Sets a specific time offset (in seconds) for the poster image generation.
 |===