diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js index 7f34993e1c..61e2f25b13 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js @@ -3,18 +3,15 @@ tinymce.init({ plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '', uploadcare_filters: [ - { name: 'none' }, // No filter applied { name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris' - { name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade' + { name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris with inverted effect (amount -100), label reads 'Vintage' { name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base' { name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light' - { name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard' { name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense' - { name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost' - { name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus' - { name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast' - { name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch' - { name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood' + { name: 'galen', amount: 80, label: 'Soft' }, // Galen with softening effect (amount 80), label reads 'Soft' + { name: 'carris', amount: 120, label: 'Sharp' }, // Carris with high contrast (amount 120), label reads 'Sharp' + { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night' + { name: 'none' }, // No filter applied ], // Video configuration uploadcare_video_properties: { @@ -23,25 +20,24 @@ tinymce.init({ loop: false, muted: true, preload: 'metadata', - poster: 'https://placehold.co/600x400', - width: 640, - height: 360, - showLogo: false + posterOffset: "0:10", + showLogo: false, + fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare uploadcare-video | code preview", height: 700, content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } - h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } - h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } - p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } - p { line-height: 1.6; margin: 0; } - p + p { margin-top: 1rem; } - a { color: #2b70e3; } - blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } - figcaption {font-size: 0.875em;} - uc-video { display: block; margin: 1rem 0; } + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption { font-size: 0.875em; } + uc-video { display: block; margin: 1rem 0; width: 100%; } ` }); \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html index 49975197ab..fc96288c3b 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html @@ -1,36 +1,33 @@ \ No newline at end of file + +
beautiful kitchen interior design +
Designed by Freepik
+
+

Step inside, and you’ll find bright, open living spaces that blend seamlessly with the outdoors, creating a harmonious living environment that’s both relaxing and inspiring.

+

Owning a villa in Mallorca means more than just having a home—it means living a life of luxury and adventure. From exploring charming villages to dining at world-class restaurants and sailing the turquoise waters, every day is a new experience.

+

Make This Dream a Reality

+

Don’t miss the opportunity to own a piece of paradise. Contact us today to schedule a private tour of this exceptional villa and explore other exclusive properties on the island.

+ \ No newline at end of file diff --git a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js index 90d9ce8549..60a464ee53 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js @@ -15,32 +15,30 @@ tinymce.init({ { name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night' { name: 'none' }, // No filter applied ], - // Video configuration uploadcare_video_properties: { autoplay: false, controls: true, loop: false, muted: true, preload: 'metadata', - // poster: 'https://placehold.co/600x400', // Optional poster image URL - width: 640, - height: 360, - showLogo: false + posterOffset: "0:10", + showLogo: false, + fluid: true, }, a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview", height: 700, content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } - h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } - h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } - p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } - p { line-height: 1.6; margin: 0; } - p + p { margin-top: 1rem; } - a { color: #2b70e3; } - blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } - figcaption {font-size: 0.875em;} - uc-video { display: block; margin: 1rem 0; } + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption { font-size: 0.875em; } + uc-video { display: block; margin: 1rem 0; width: 100%; } ` }); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/example.js b/modules/ROOT/examples/live-demos/uploadcare-video/example.js index 2a9bad1c1f..55767f4ca5 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/example.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/example.js @@ -1,38 +1,32 @@ tinymce.init({ - selector: "textarea#uploadcare-video", - plugins: [ "uploadcare", "code", "link", "preview", "lists" ], - uploadcare_public_key: '', - // Video configuration - uploadcare_video_properties: { - autoplay: false, - controls: true, - loop: false, - muted: true, - preload: 'metadata', - // poster: 'https://placehold.co/600x400', // Optional poster image URL - width: 640, - height: 360, - showLogo: false - }, - a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", - height: 700, - content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } - h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } - h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } - p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } - p { line-height: 1.6; margin: 0; } - p + p { margin-top: 1rem; } - a { color: #2b70e3; } - blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } - figcaption {font-size: 0.875em;} - uc-video { - display: block; - margin: 1rem 0; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - ` - }); + selector: "textarea#uploadcare-video", + plugins: [ "uploadcare", "code", "link", "preview", "lists" ], + uploadcare_public_key: '', + // Video configuration + uploadcare_video_properties: { + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + posterOffset: "0:10", + showLogo: false, + fluid: true, +}, + a11y_advanced_options: true, + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview", + height: 700, + content_style: ` + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption { font-size: 0.875em; } + uc-video { display: block; margin: 1rem 0; width: 100%; } + ` +}); diff --git a/modules/ROOT/examples/live-demos/uploadcare-video/index.js b/modules/ROOT/examples/live-demos/uploadcare-video/index.js index ee7d6aea71..f38b7544e1 100644 --- a/modules/ROOT/examples/live-demos/uploadcare-video/index.js +++ b/modules/ROOT/examples/live-demos/uploadcare-video/index.js @@ -2,39 +2,32 @@ tinymce.init({ selector: "textarea#uploadcare-video", plugins: [ "uploadcare", "code", "link", "preview", "lists" ], uploadcare_public_key: '630992ad50fe2291c406', - uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', - uploadcare_store_type: 'temporary', - // Video configuration + uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com', + uploadcare_store_type: 'temporary', uploadcare_video_properties: { - autoplay: false, - controls: true, - loop: false, - muted: true, - preload: 'metadata', - // poster: 'https://placehold.co/600x400', // Optional poster image URL - width: 640, - height: 360, - showLogo: false - }, + autoplay: false, + controls: true, + loop: false, + muted: true, + preload: 'metadata', + posterOffset: "0:10", + showLogo: false, + fluid: true, +}, a11y_advanced_options: true, - toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview", + toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist | link uploadcare uploadcare-video | code preview", height: 700, content_style: ` - body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } - h1 { font-size: 1.5em; } - h2 { font-size: 1.17em; } - h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } - p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } - p { line-height: 1.6; margin: 0; } - p + p { margin-top: 1rem; } - a { color: #2b70e3; } - blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } - figcaption {font-size: 0.875em;} - uc-video { - display: block; - margin: 1rem 0; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } + body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; } + h1 { font-size: 1.5em; } + h2 { font-size: 1.17em; } + h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; } + p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; } + p { line-height: 1.6; margin: 0; } + p + p { margin-top: 1rem; } + a { color: #2b70e3; } + blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; } + figcaption {font-size: 0.875em;} + uc-video { display: block; margin: 1rem 0; width: 100%;} ` }); diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 1e899f2647..46505854a0 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -328,13 +328,13 @@ ***** xref:import-from-word-with-jwt-authentication-nodejs.adoc[Node.js] ***** xref:import-from-word-with-jwt-authentication-php.adoc[PHP] *** xref:editimage.adoc[Image Editing] -*** xref:uploadcare.adoc[Media Optimizer] -**** xref:uploadcare-image.adoc[Image] -**** xref:uploadcare-video.adoc[Video] *** xref:inline-css.adoc[Inline CSS] *** xref:linkchecker.adoc[Link Checker] *** xref:math.adoc[Math] *** xref:markdown.adoc[Markdown] +*** xref:uploadcare.adoc[Media Optimizer] +**** xref:uploadcare-image.adoc[Image] +**** xref:uploadcare-video.adoc[Video] *** xref:mentions.adoc[Mentions] *** xref:mergetags.adoc[Merge Tags] *** xref:moxiemanager.adoc[MoxieManager] @@ -426,6 +426,7 @@ **** xref:8.2.0-release-notes.adoc#accompanying-premium-plugin-changes[Accompanying Premium Plugin changes] **** xref:8.2.0-release-notes.adoc#improvements[Improvements] **** xref:8.2.0-release-notes.adoc#bug-fixes[Bug fixes] +**** xref:8.2.0-release-notes.adoc#known-issues[Known issues] *** {productname} 8.1.2 **** xref:8.1.2-release-notes.adoc#overview[Overview] **** xref:8.1.2-release-notes.adoc#bug-fix[Bug fix] diff --git a/modules/ROOT/pages/8.2.0-release-notes.adoc b/modules/ROOT/pages/8.2.0-release-notes.adoc index 85c6133f33..02b7cc28c0 100644 --- a/modules/ROOT/pages/8.2.0-release-notes.adoc +++ b/modules/ROOT/pages/8.2.0-release-notes.adoc @@ -16,6 +16,7 @@ include::partial$misc/admon-releasenotes-for-stable.adoc[] * xref:accompanying-premium-plugin-changes[Accompanying Premium plugin changes] * xref:improvements[Improvements] * xref:bug-fixes[Bug fixes] +* xref:known-issues[Known issues] [[accompanying-premium-plugin-changes]] @@ -210,4 +211,17 @@ For an example of using custom elements with block-level and inline-level compon In {productname} {release-version}, an issue was resolved where split buttons rendered narrower than in {productname} 7 and other toolbar buttons. This occurred because the main portion of the split button used a CSS rule that caused it to collapse to the icon size during initialization, resulting in an incorrect fixed width. This made split buttons appear visually inconsistent, reduced their clickability, and could cause text labels to be truncated. -{productname} {release-version} addresses this issue by adjusting the width behavior to inherit the correct `34px` for icons and auto for text—ensuring consistent sizing across the toolbar. \ No newline at end of file +{productname} {release-version} addresses this issue by adjusting the width behavior to inherit the correct `34px` for icons and auto for text—ensuring consistent sizing across the toolbar. + +== Known issues + +{productname} {release-version} also includes the following known issues: + +=== Uploadcare video audio continues playing after copying paused and muted video +// #TINY-13198 + +In certain edge cases, when a video is inserted, played, paused, and muted, then copied using **Ctrl+C** (or **Cmd+C** on Mac), the paused and muted video may begin playing audio. Once this occurs, the audio continues to play even after deleting the video from the editor. + +**Workaround:** None, the user must refresh the page to stop the unwanted audio which can result in the loss of any unsaved content. + +**Status:** Currently under investigation. \ No newline at end of file diff --git a/modules/ROOT/pages/uploadcare.adoc b/modules/ROOT/pages/uploadcare.adoc index a722cae1fd..5dae0c0290 100644 --- a/modules/ROOT/pages/uploadcare.adoc +++ b/modules/ROOT/pages/uploadcare.adoc @@ -24,7 +24,7 @@ The {pluginname} plugin extends {productname} with powerful media handling featu * Enterprise-ready cloud storage with global CDN delivery * Built-in security with malware protection and content detection -== Interactive example +== Full featured interactive example liveDemo::uploadcare-full-feature[] diff --git a/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc b/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc index 040b4c3dca..e87d349321 100644 --- a/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc +++ b/modules/ROOT/partials/configuration/uploadcare_video_properties.adoc @@ -12,15 +12,17 @@ Configures the video player properties and behavior for video elements. [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. +|`autoplay` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically starts video playback when the page loads. NOTE: Even if autoplay is enabled, modern browsers may delay or block playback until the user interacts with the page, depending on their autoplay policies. |`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. +|`disablePictureInPicture` | Boolean | `true`, `false`, `undefined` | `undefined` | Disables the Picture-in-Picture feature for the video player. When enabled, users cannot use Picture-in-Picture mode. |`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. |`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. +|`posterOffset` | String | Time format `"MM:SS"` or `"H:MM:SS"` | `undefined` | Sets the time offset for generating a poster image from the video. When `poster` is not specified, this value determines the frame to use as the poster. Format: `"0:10"` for 10 seconds, `"1:30"` for 1 minute 30 seconds. |`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. +|`showLogo` | Boolean | `true`, `false` | `false` | Displays the Uploadcare logo overlay on the video player. |`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"`. -|`showLogo` | Boolean | `true`, `false` | `true` | Displays the Uploadcare logo overlay on the video player. |=== @@ -40,6 +42,7 @@ tinymce.init({ muted: true, preload: 'metadata', poster: 'https://placehold.co/600x400', // Optional poster image URL + posterOffset: '0:10', // Time offset for poster generation width: 640, height: 360, showLogo: false diff --git a/modules/ROOT/partials/index-pages/premium-plugins.adoc b/modules/ROOT/partials/index-pages/premium-plugins.adoc index bc19c11484..8f1777535e 100644 --- a/modules/ROOT/partials/index-pages/premium-plugins.adoc +++ b/modules/ROOT/partials/index-pages/premium-plugins.adoc @@ -104,13 +104,6 @@ a| xref:editimage.adoc[Image Editing] Image Editing features for {productname}. - -a| -[.lead] -xref:uploadcare.adoc[Media Optimizer Powered by Uploadcare] - -Image and video optimization features for {productname}. - a| [.lead] xref:linkchecker.adoc[Link Checker] @@ -129,6 +122,12 @@ xref:markdown.adoc[Markdown] Enable conversion of pure markdown on paste. +a| +[.lead] +xref:uploadcare.adoc[Media Optimizer Powered by Uploadcare] + +Image and video optimization features for {productname}. + a| [.lead] xref:mentions.adoc[Mentions]