Skip to content

Commit 4416dc2

Browse files
committed
DOC-3314: Update demo and add missing options from table.
1 parent 9be9edb commit 4416dc2

File tree

7 files changed

+102
-110
lines changed

7 files changed

+102
-110
lines changed

modules/ROOT/examples/live-demos/uploadcare-full-feature/example.js

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,15 @@ tinymce.init({
33
plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
44
uploadcare_public_key: '<your-public-key>',
55
uploadcare_filters: [
6-
{ name: 'none' }, // No filter applied
76
{ name: 'adaris', amount: -100 }, // Adaris with inverted effect (amount -100), label defaults to 'adaris'
8-
{ name: 'adaris', amount: -100, label: 'Vintage Fade' }, // Adaris with inverted effect (amount -100), label reads 'Vintage Fade'
7+
{ name: 'adaris', amount: -100, label: 'Vintage' }, // Adaris with inverted effect (amount -100), label reads 'Vintage'
98
{ name: 'adaris', amount: 0, label: 'Base' }, // Adaris with neutral effect (amount 0), label reads 'Base'
109
{ name: 'adaris', amount: 50, label: 'Light' }, // Adaris with light effect (amount 50), label reads 'Light'
11-
{ name: 'adaris', amount: 100, label: 'Standard' }, // Adaris with standard effect (amount 100), label reads 'Standard'
1210
{ name: 'adaris', amount: 200, label: 'Intense' }, // Adaris with intense effect (amount 200), label reads 'Intense'
13-
{ name: 'zevcen', amount: 200, label: 'Glow Boost' }, // Zevcen with intense effect (amount 200), label reads 'Glow Boost'
14-
{ name: 'galen', amount: 80, label: 'Soft Focus' }, // Galen with softening effect (amount 80), label reads 'Soft Focus'
15-
{ name: 'carris', amount: 120, label: 'Sharp Contrast' }, // Carris with high contrast (amount 120), label reads 'Sharp Contrast'
16-
{ name: 'ferand', amount: 60, label: 'Light Touch' }, // Ferand with light enhancement (amount 60), label reads 'Light Touch'
17-
{ name: 'sorahel', amount: -50, label: 'Night Mood' } // Sorahel with darkened effect (amount -50), label reads 'Night Mood'
11+
{ name: 'galen', amount: 80, label: 'Soft' }, // Galen with softening effect (amount 80), label reads 'Soft'
12+
{ name: 'carris', amount: 120, label: 'Sharp' }, // Carris with high contrast (amount 120), label reads 'Sharp'
13+
{ name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night'
14+
{ name: 'none' }, // No filter applied
1815
],
1916
// Video configuration
2017
uploadcare_video_properties: {
@@ -24,22 +21,23 @@ tinymce.init({
2421
muted: true,
2522
preload: 'metadata',
2623
posterOffset: "0:10",
27-
showLogo: false
24+
showLogo: false,
25+
fluid: true,
2826
},
2927
a11y_advanced_options: true,
30-
toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview",
28+
toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview",
3129
height: 700,
3230
content_style: `
33-
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
34-
h1 { font-size: 1.5em; }
35-
h2 { font-size: 1.17em; }
36-
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
37-
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
38-
p { line-height: 1.6; margin: 0; }
39-
p + p { margin-top: 1rem; }
40-
a { color: #2b70e3; }
41-
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
42-
figcaption {font-size: 0.875em;}
43-
uc-video { display: block; margin: 1rem 0; }
31+
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38#
32+
h1 { font-size: 1.5em; }
33+
h2 { font-size: 1.17em; }
34+
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
35+
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
36+
p { line-height: 1.6; margin: 0; }
37+
p + p { margin-top: 1rem; }
38+
a { color: #2b70e3; }
39+
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
40+
figcaption {font-size: 0.875em;}
41+
uc-video { display: block; margin: 1rem 0; width: 100%;}
4442
`
4543
});

modules/ROOT/examples/live-demos/uploadcare-full-feature/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ <h1>Discover Your Dream Home on Mallorca: Where Paradise Meets Investment</h1>
1010
<h2>Experience Mallorca in Motion</h2>
1111
<p class="p1">Before we explore the island&rsquo;s most exclusive properties, take a moment to experience the allure of Mallorca itself.</p>
1212
<p class="p1">Feel the warmth of the Mediterranean sun, hear the gentle rhythm of the waves, and imagine life surrounded by timeless beauty and tranquility. Watch this captivating video that brings the island&rsquo;s lifestyle and charm to life:</p>
13-
<uc-video uuid="b77df399-8066-4b19-8e9b-d659ea8cedd2" class="tox-uc-video" autoplay="false" controls="true" height="518" loop="false" muted="true" preload="metadata" width="920" posteroffset="0:10" showlogo="false"></uc-video>
13+
<uc-video uuid="be94d5d8-330e-4503-b886-ef096ee8751c" class="tox-uc-video" autoplay="false" controls="true" height="368" loop="false" muted="true" preload="metadata" width="653" posteroffset="0:10" showlogo="false"></uc-video>
1414
<h2 class="p1">Explore Our Featured Villa: The Epitome of Luxury&nbsp;</h2>
1515
<p>Located in one of Mallorca&rsquo;s most exclusive areas, this exquisite villa offers breathtaking views and modern design. Every detail has been meticulously crafted to provide the ultimate in comfort and elegance.</p>
1616
<figure class="image"><img style="width: min(2048px, 100%); aspect-ratio: 2048 / 1148;" src="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/" sizes="(min-width: 2048px) 2048px, 100vw" srcset="https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/100x/ 100w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/200x/ 200w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/300x/ 300w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/500x/ 500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/750x/ 750w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/resize/2000x/ 2000w,https://tiny.ucarecdn.com/6e215038-158f-48d1-a94d-d1a74f4f6275/-/preview/ 2048w" alt="luxury wooden house interior">
1717
<figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>
1818
</figure>
1919
<ul>
20-
<li><strong>5 luxurious bedrooms</strong> with private en-suite bathrooms</li>
21-
<li><strong>Infinity pool</strong> with panoramic Mediterranean views</li>
22-
<li><strong>Spacious terrace</strong> for outdoor dining and entertainment</li>
23-
<li><strong>Private garden</strong> with lush landscaping</li>
24-
<li><strong>Cutting-edge smart home system&nbsp;</strong><strong>&nbsp;</strong></li>
20+
<li><strong>5 luxurious bedrooms</strong> with private en-suite bathrooms</li>
21+
<li><strong>Infinity pool</strong> with panoramic Mediterranean views</li>
22+
<li><strong>Spacious terrace</strong> for outdoor dining and entertainment</li>
23+
<li><strong>Private garden</strong> with lush landscaping</li>
24+
<li><strong>Cutting-edge smart home system&nbsp;</strong><strong>&nbsp;</strong></li>
2525
</ul>
2626
<figure class="image"><img style="width: min(2000px, 100%); aspect-ratio: 2000 / 1121;" src="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/" sizes="(min-width: 2000px) 2000px, 100vw" srcset="https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/100x/ 100w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/200x/ 200w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/300x/ 300w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/500x/ 500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/750x/ 750w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/f5cf612d-98a4-4159-a153-ae0aa7bb74a5/-/preview/ 2000w" alt="beautiful kitchen interior design">
2727
<figcaption>Designed by <a href="https://www.freepik.com/">Freepik</a></figcaption>

modules/ROOT/examples/live-demos/uploadcare-full-feature/index.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,30 +15,30 @@ tinymce.init({
1515
{ name: 'sorahel', amount: -50, label: 'Night' }, // Sorahel with darkened effect (amount -50), label reads 'Night'
1616
{ name: 'none' }, // No filter applied
1717
],
18-
// Video configuration
1918
uploadcare_video_properties: {
2019
autoplay: false,
2120
controls: true,
2221
loop: false,
2322
muted: true,
2423
preload: 'metadata',
2524
posterOffset: "0:10",
26-
showLogo: false
25+
showLogo: false,
26+
fluid: true,
2727
},
2828
a11y_advanced_options: true,
29-
toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview",
29+
toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview",
3030
height: 700,
3131
content_style: `
32-
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
33-
h1 { font-size: 1.5em; }
34-
h2 { font-size: 1.17em; }
35-
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
36-
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
37-
p { line-height: 1.6; margin: 0; }
38-
p + p { margin-top: 1rem; }
39-
a { color: #2b70e3; }
40-
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
41-
figcaption {font-size: 0.875em;}
42-
uc-video { display: block; margin: 1rem 0; }
43-
`
32+
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38#
33+
h1 { font-size: 1.5em; }
34+
h2 { font-size: 1.17em; }
35+
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
36+
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
37+
p { line-height: 1.6; margin: 0; }
38+
p + p { margin-top: 1rem; }
39+
a { color: #2b70e3; }
40+
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
41+
figcaption {font-size: 0.875em;}
42+
uc-video { display: block; margin: 1rem 0; width: 100%;}
43+
`
4444
});
Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
11
tinymce.init({
2-
selector: "textarea#uploadcare-video",
3-
plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
4-
uploadcare_public_key: '<your-public-key>',
5-
// Video configuration
6-
uploadcare_video_properties: {
7-
autoplay: false,
8-
controls: true,
9-
loop: false,
10-
muted: true,
11-
preload: 'metadata',
12-
posterOffset: "0:10",
13-
showLogo: false
14-
},
15-
a11y_advanced_options: true,
16-
toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview",
17-
height: 700,
18-
content_style: `
19-
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
20-
h1 { font-size: 1.5em; }
21-
h2 { font-size: 1.17em; }
22-
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
23-
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
24-
p { line-height: 1.6; margin: 0; }
25-
p + p { margin-top: 1rem; }
26-
a { color: #2b70e3; }
27-
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
28-
figcaption {font-size: 0.875em;}
29-
uc-video {
30-
display: block;
31-
margin: 1rem 0;
32-
border-radius: 8px;
33-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
34-
}
35-
`
36-
});
2+
selector: "textarea#uploadcare-video",
3+
plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
4+
uploadcare_public_key: '<your-public-key>',
5+
// Video configuration
6+
uploadcare_video_properties: {
7+
autoplay: false,
8+
controls: true,
9+
loop: false,
10+
muted: true,
11+
preload: 'metadata',
12+
posterOffset: "0:10",
13+
showLogo: false,
14+
fluid: true,
15+
},
16+
a11y_advanced_options: true,
17+
toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview",
18+
height: 700,
19+
content_style: `
20+
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38#
21+
h1 { font-size: 1.5em; }
22+
h2 { font-size: 1.17em; }
23+
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
24+
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
25+
p { line-height: 1.6; margin: 0; }
26+
p + p { margin-top: 1rem; }
27+
a { color: #2b70e3; }
28+
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
29+
figcaption {font-size: 0.875em;}
30+
uc-video { display: block; margin: 1rem 0; width: 100%;}
31+
`
32+
});
Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,33 @@
11
tinymce.init({
2-
selector: "textarea#uploadcare-video",
2+
selector: "textarea",
33
plugins: [ "uploadcare", "code", "link", "preview", "lists" ],
44
uploadcare_public_key: '630992ad50fe2291c406',
5-
uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com',
6-
uploadcare_store_type: 'temporary',
7-
// Video configuration
5+
uploadcare_cdn_base_url: 'https://tiny.ucarecdn.com',
6+
uploadcare_store_type: 'temporary',
87
uploadcare_video_properties: {
9-
autoplay: false,
10-
controls: true,
11-
loop: false,
12-
muted: true,
13-
preload: 'metadata',
14-
posterOffset: "0:10",
15-
showLogo: false
16-
},
8+
autoplay: false,
9+
controls: true,
10+
loop: false,
11+
muted: true,
12+
preload: 'metadata',
13+
posterOffset: "0:10",
14+
showLogo: false,
15+
fluid: true,
16+
},
1717
a11y_advanced_options: true,
18-
toolbar: "undo redo | uploadcare uploadcare-video | styles | bold italic underline | forecolor | bullist numlist| link | code preview",
18+
toolbar: "undo redo | styles | bold italic underline | forecolor | bullist numlist| link uploadcare | code preview",
1919
height: 700,
2020
content_style: `
21-
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }
22-
h1 { font-size: 1.5em; }
23-
h2 { font-size: 1.17em; }
24-
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
25-
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
26-
p { line-height: 1.6; margin: 0; }
27-
p + p { margin-top: 1rem; }
28-
a { color: #2b70e3; }
29-
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
30-
figcaption {font-size: 0.875em;}
31-
uc-video {
32-
display: block;
33-
margin: 1rem 0;
34-
border-radius: 8px;
35-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
36-
}
37-
`
21+
body { max-width: 920px; margin: 1.5rem auto; padding: 0 2vw; }https://fiddle.tiny.cloud/5HPetOu0b2/38#
22+
h1 { font-size: 1.5em; }
23+
h2 { font-size: 1.17em; }
24+
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0 0 0.75rem; }
25+
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 2rem; }
26+
p { line-height: 1.6; margin: 0; }
27+
p + p { margin-top: 1rem; }
28+
a { color: #2b70e3; }
29+
blockquote { color: #4e5c73; font-weight: 200; font-size: 1.3rem; margin: 1rem 2rem; padding: 0 0 0 1rem; border-left: 2px solid #2b70e3 !important; }
30+
figcaption {font-size: 0.875em;}
31+
uc-video { display: block; margin: 1rem 0; width: 100%;}
32+
`
3833
});

modules/ROOT/pages/uploadcare.adoc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ The {pluginname} plugin extends {productname} with powerful media handling featu
2424
* Enterprise-ready cloud storage with global CDN delivery
2525
* Built-in security with malware protection and content detection
2626

27-
== Interactive example
27+
== Full featured interactive example
2828

2929
liveDemo::uploadcare-full-feature[]
3030

modules/ROOT/partials/configuration/uploadcare_video_properties.adoc

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,17 @@ Configures the video player properties and behavior for video elements.
1212
[cols="1,1,2,1,2"]
1313
|===
1414
|Property | Type | Valid Values | Default | Description
15-
|`autoplay` | Boolean | `true`, `false`, `undefined` | `undefined` | Automatically starts video playback when the page loads.
15+
|`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.
1616
|`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.
17+
|`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.
1718
|`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"`.
1819
|`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.
1920
|`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.
2021
|`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.
22+
|`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.
2123
|`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.
24+
|`showLogo` | Boolean | `true`, `false` | `false` | Displays the Uploadcare logo overlay on the video player.
2225
|`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"`.
23-
|`showLogo` | Boolean | `true`, `false` | `true` | Displays the Uploadcare logo overlay on the video player.
2426
|===
2527

2628

@@ -40,6 +42,7 @@ tinymce.init({
4042
muted: true,
4143
preload: 'metadata',
4244
poster: 'https://placehold.co/600x400', // Optional poster image URL
45+
posterOffset: '0:10', // Time offset for poster generation
4346
width: 640,
4447
height: 360,
4548
showLogo: false

0 commit comments

Comments
 (0)