@scaleflex/widget-preupload-processors 4.8.4 → 4.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7850 -7833
- package/LICENSE +0 -0
- package/README.md +155 -155
- package/package.json +6 -6
- package/lib/DEFAULT_VIDEO_TRANSCODING.js +0 -15
- package/lib/common.slice.js +0 -30
- package/lib/components/ImageAndPdfProcessor.js +0 -94
- package/lib/components/PreProcessor.styled.js +0 -80
- package/lib/components/ProcessSelect.js +0 -33
- package/lib/components/ProcessorToggle.js +0 -37
- package/lib/components/ProcessorsUI.js +0 -63
- package/lib/components/ResumableUploaderProcessor.js +0 -59
- package/lib/components/VideoProcessor.js +0 -95
- package/lib/defaultLocale.js +0 -27
- package/lib/index.js +0 -175
package/LICENSE
CHANGED
|
File without changes
|
package/README.md
CHANGED
|
@@ -1,155 +1,155 @@
|
|
|
1
|
-
# `@scaleflex/widget-preupload-processors`
|
|
2
|
-
|
|
3
|
-
[![Plugins][plugins-image]](#plugins)
|
|
4
|
-
[![Website][filerobot-image]][sfx-url]
|
|
5
|
-
[![Version][filerobot-version]][version-url]
|
|
6
|
-
[![Scaleflex team][made-by-image]][sfx-url]
|
|
7
|
-
[![License][license-image]][license-url]
|
|
8
|
-
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<div align='center'>
|
|
12
|
-
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
A processor which applies some functionalities for the images before uploading process in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).
|
|
16
|
-
|
|
17
|
-
## Usage
|
|
18
|
-
|
|
19
|
-
### NPM
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm install --save @scaleflex/widget-preupload-processors
|
|
23
|
-
```
|
|
24
|
-
### YARN
|
|
25
|
-
|
|
26
|
-
```bash
|
|
27
|
-
yarn add @scaleflex/widget-preupload-processors
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
then
|
|
31
|
-
|
|
32
|
-
```js
|
|
33
|
-
import PreUploadProcessors from '@scaleflex/widget-preupload-processors'
|
|
34
|
-
...
|
|
35
|
-
...
|
|
36
|
-
...
|
|
37
|
-
scaleflexWidget.use(PreUploadProcessors, propertiesObject)
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### CDN
|
|
41
|
-
|
|
42
|
-
The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.PreUploadProcessors`
|
|
43
|
-
|
|
44
|
-
```js
|
|
45
|
-
const PreUploadProcessors = window.ScaleflexWidget.PreUploadProcessors
|
|
46
|
-
...
|
|
47
|
-
...
|
|
48
|
-
...
|
|
49
|
-
scaleflexWidget.use(PreUploadProcessors, propertiesObject)
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### Plugin's styles
|
|
53
|
-
|
|
54
|
-
```js
|
|
55
|
-
import '@scaleflex/widget-core/dist/style.css'
|
|
56
|
-
import '@scaleflex/widget-preupload-processors/dist/style.css'
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
or if you prefer the minified version
|
|
60
|
-
|
|
61
|
-
```js
|
|
62
|
-
import '@scaleflex/widget-core/dist/style.min.css'
|
|
63
|
-
import '@scaleflex/widget-preupload-processors/dist/style.min.css'
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
## Properties
|
|
70
|
-
|
|
71
|
-
### `imageProcessorByDefault`
|
|
72
|
-
|
|
73
|
-
<u>Type:</u> `boolean`
|
|
74
|
-
|
|
75
|
-
<u>Default:</u> `false`
|
|
76
|
-
|
|
77
|
-
If `true` the processing of image before upload checkbox would be default checked in the upload settings of uploading panel if there are any images selected, otherwise the checkbox will be default un-checked.
|
|
78
|
-
|
|
79
|
-
### `isUserAllowedToOptimize`
|
|
80
|
-
|
|
81
|
-
<u>Type:</u> `boolean`
|
|
82
|
-
|
|
83
|
-
<u>Default:</u> `true`
|
|
84
|
-
|
|
85
|
-
If `false` the processing of image before upload will be disabled if there are any images selected, otherwise the processing will be enabled.
|
|
86
|
-
|
|
87
|
-
### `videoProcessorByDefault`
|
|
88
|
-
|
|
89
|
-
<u>Type:</u> `boolean`
|
|
90
|
-
|
|
91
|
-
<u>Default:</u> `false`
|
|
92
|
-
|
|
93
|
-
If `true` the processing of video before upload checkbox would be default checked in the upload settings of uploading panel if there are any videos selected, otherwise the checkbox will be default un-checked.
|
|
94
|
-
|
|
95
|
-
### `imageOperations`
|
|
96
|
-
|
|
97
|
-
<u>Type:</u> `object`
|
|
98
|
-
|
|
99
|
-
<u>Default:</u> `null`
|
|
100
|
-
|
|
101
|
-
The operations to be available to the user as options to choose from which to apply on the images before uploading, till now the supported operations:
|
|
102
|
-
- #### `resize` - (*object* - required): Show user inputs for the user to choose the width & height of resizing, with respecting the passed values in `width, height` properties which refers to the max. width & max. height respectively, *show following example*.
|
|
103
|
-
|
|
104
|
-
example,
|
|
105
|
-
|
|
106
|
-
```js
|
|
107
|
-
{
|
|
108
|
-
resize: {
|
|
109
|
-
width: 2000, // max width the user could reach
|
|
110
|
-
height: 2000 // max height the user could reach
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### `videoTranscodingOptions`
|
|
116
|
-
|
|
117
|
-
<u>Type:</u> `object`
|
|
118
|
-
|
|
119
|
-
<u>Default:</u>
|
|
120
|
-
|
|
121
|
-
```js
|
|
122
|
-
{
|
|
123
|
-
resolutions: ['auto', 'hq', 'desktop', 'tablet', 'mobile', 'sample'],
|
|
124
|
-
protocols: ['HLS', 'DASH'],
|
|
125
|
-
defaultResolution: 'auto',
|
|
126
|
-
defaultProtocol: 'HLS'
|
|
127
|
-
}
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
The options available for video transcoding shown in the UI controls with its default options.
|
|
131
|
-
|
|
132
|
-
### `locale`
|
|
133
|
-
|
|
134
|
-
<u>Type:</u> `object`
|
|
135
|
-
|
|
136
|
-
<u>Default:</u> default locales inside `lib/defaultLocale.js`.
|
|
137
|
-
|
|
138
|
-
Customizing some of the translations or the language's strings and replace the default locale.
|
|
139
|
-
|
|
140
|
-
<!-- Variables -->
|
|
141
|
-
|
|
142
|
-
[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-preupload-processors
|
|
143
|
-
[license-url]: https://opensource.org/licenses/MIT
|
|
144
|
-
[sfx-url]: https://www.scaleflex.com/
|
|
145
|
-
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-preupload-processors
|
|
146
|
-
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
|
|
150
|
-
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
|
|
151
|
-
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
|
|
152
|
-
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
|
|
153
|
-
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
|
|
154
|
-
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-preupload-processors?label=Version&style=for-the-badge&logo=npm
|
|
155
|
-
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox
|
|
1
|
+
# `@scaleflex/widget-preupload-processors`
|
|
2
|
+
|
|
3
|
+
[![Plugins][plugins-image]](#plugins)
|
|
4
|
+
[![Website][filerobot-image]][sfx-url]
|
|
5
|
+
[![Version][filerobot-version]][version-url]
|
|
6
|
+
[![Scaleflex team][made-by-image]][sfx-url]
|
|
7
|
+
[![License][license-image]][license-url]
|
|
8
|
+
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<div align='center'>
|
|
12
|
+
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
A processor which applies some functionalities for the images before uploading process in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
### NPM
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install --save @scaleflex/widget-preupload-processors
|
|
23
|
+
```
|
|
24
|
+
### YARN
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
yarn add @scaleflex/widget-preupload-processors
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
then
|
|
31
|
+
|
|
32
|
+
```js
|
|
33
|
+
import PreUploadProcessors from '@scaleflex/widget-preupload-processors'
|
|
34
|
+
...
|
|
35
|
+
...
|
|
36
|
+
...
|
|
37
|
+
scaleflexWidget.use(PreUploadProcessors, propertiesObject)
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### CDN
|
|
41
|
+
|
|
42
|
+
The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.PreUploadProcessors`
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
const PreUploadProcessors = window.ScaleflexWidget.PreUploadProcessors
|
|
46
|
+
...
|
|
47
|
+
...
|
|
48
|
+
...
|
|
49
|
+
scaleflexWidget.use(PreUploadProcessors, propertiesObject)
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Plugin's styles
|
|
53
|
+
|
|
54
|
+
```js
|
|
55
|
+
import '@scaleflex/widget-core/dist/style.css'
|
|
56
|
+
import '@scaleflex/widget-preupload-processors/dist/style.css'
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
or if you prefer the minified version
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
import '@scaleflex/widget-core/dist/style.min.css'
|
|
63
|
+
import '@scaleflex/widget-preupload-processors/dist/style.min.css'
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
## Properties
|
|
70
|
+
|
|
71
|
+
### `imageProcessorByDefault`
|
|
72
|
+
|
|
73
|
+
<u>Type:</u> `boolean`
|
|
74
|
+
|
|
75
|
+
<u>Default:</u> `false`
|
|
76
|
+
|
|
77
|
+
If `true` the processing of image before upload checkbox would be default checked in the upload settings of uploading panel if there are any images selected, otherwise the checkbox will be default un-checked.
|
|
78
|
+
|
|
79
|
+
### `isUserAllowedToOptimize`
|
|
80
|
+
|
|
81
|
+
<u>Type:</u> `boolean`
|
|
82
|
+
|
|
83
|
+
<u>Default:</u> `true`
|
|
84
|
+
|
|
85
|
+
If `false` the processing of image before upload will be disabled if there are any images selected, otherwise the processing will be enabled.
|
|
86
|
+
|
|
87
|
+
### `videoProcessorByDefault`
|
|
88
|
+
|
|
89
|
+
<u>Type:</u> `boolean`
|
|
90
|
+
|
|
91
|
+
<u>Default:</u> `false`
|
|
92
|
+
|
|
93
|
+
If `true` the processing of video before upload checkbox would be default checked in the upload settings of uploading panel if there are any videos selected, otherwise the checkbox will be default un-checked.
|
|
94
|
+
|
|
95
|
+
### `imageOperations`
|
|
96
|
+
|
|
97
|
+
<u>Type:</u> `object`
|
|
98
|
+
|
|
99
|
+
<u>Default:</u> `null`
|
|
100
|
+
|
|
101
|
+
The operations to be available to the user as options to choose from which to apply on the images before uploading, till now the supported operations:
|
|
102
|
+
- #### `resize` - (*object* - required): Show user inputs for the user to choose the width & height of resizing, with respecting the passed values in `width, height` properties which refers to the max. width & max. height respectively, *show following example*.
|
|
103
|
+
|
|
104
|
+
example,
|
|
105
|
+
|
|
106
|
+
```js
|
|
107
|
+
{
|
|
108
|
+
resize: {
|
|
109
|
+
width: 2000, // max width the user could reach
|
|
110
|
+
height: 2000 // max height the user could reach
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### `videoTranscodingOptions`
|
|
116
|
+
|
|
117
|
+
<u>Type:</u> `object`
|
|
118
|
+
|
|
119
|
+
<u>Default:</u>
|
|
120
|
+
|
|
121
|
+
```js
|
|
122
|
+
{
|
|
123
|
+
resolutions: ['auto', 'hq', 'desktop', 'tablet', 'mobile', 'sample'],
|
|
124
|
+
protocols: ['HLS', 'DASH'],
|
|
125
|
+
defaultResolution: 'auto',
|
|
126
|
+
defaultProtocol: 'HLS'
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
The options available for video transcoding shown in the UI controls with its default options.
|
|
131
|
+
|
|
132
|
+
### `locale`
|
|
133
|
+
|
|
134
|
+
<u>Type:</u> `object`
|
|
135
|
+
|
|
136
|
+
<u>Default:</u> default locales inside `lib/defaultLocale.js`.
|
|
137
|
+
|
|
138
|
+
Customizing some of the translations or the language's strings and replace the default locale.
|
|
139
|
+
|
|
140
|
+
<!-- Variables -->
|
|
141
|
+
|
|
142
|
+
[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-preupload-processors
|
|
143
|
+
[license-url]: https://opensource.org/licenses/MIT
|
|
144
|
+
[sfx-url]: https://www.scaleflex.com/
|
|
145
|
+
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-preupload-processors
|
|
146
|
+
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
|
|
150
|
+
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
|
|
151
|
+
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
|
|
152
|
+
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
|
|
153
|
+
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
|
|
154
|
+
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-preupload-processors?label=Version&style=for-the-badge&logo=npm
|
|
155
|
+
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scaleflex/widget-preupload-processors",
|
|
3
|
-
"version": "4.8.
|
|
3
|
+
"version": "4.8.6",
|
|
4
4
|
"description": "Scaleflex preupload-processors module.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "types/index.d.ts",
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@scaleflex/icons": "^3.0.0-beta.11",
|
|
17
17
|
"@scaleflex/ui": "^3.0.0-beta.11",
|
|
18
|
-
"@scaleflex/widget-common": "^4.8.
|
|
19
|
-
"@scaleflex/widget-icons": "^4.8.
|
|
20
|
-
"@scaleflex/widget-tus": "^4.8.
|
|
21
|
-
"@scaleflex/widget-utils": "^4.8.
|
|
18
|
+
"@scaleflex/widget-common": "^4.8.6",
|
|
19
|
+
"@scaleflex/widget-icons": "^4.8.6",
|
|
20
|
+
"@scaleflex/widget-tus": "^4.8.6",
|
|
21
|
+
"@scaleflex/widget-utils": "^4.8.6"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"react": "^19.0.0",
|
|
@@ -30,5 +30,5 @@
|
|
|
30
30
|
"react-dom": ">=19.0.0"
|
|
31
31
|
},
|
|
32
32
|
"license": "MIT",
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "cbb232cc92583c3888556df91ff90b4654e64790"
|
|
34
34
|
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
var VIDEO_TRANSCODING = {
|
|
2
|
-
resolutions: ['auto', 'hq', 'desktop', 'tablet', 'mobile', 'sample'],
|
|
3
|
-
protocols: [{
|
|
4
|
-
label: 'HLS',
|
|
5
|
-
value: 'hls'
|
|
6
|
-
}
|
|
7
|
-
// commented because DASH transcoding is not working, task: https://scaleflexhq.atlassian.net/browse/FRA-5131
|
|
8
|
-
// TODO: uncomment when issue is fixed
|
|
9
|
-
// { label: 'DASH', value: 'dash' },
|
|
10
|
-
// { label: 'HLS & DASH', value: 'hls,dash' }
|
|
11
|
-
],
|
|
12
|
-
defaultResolution: 'auto',
|
|
13
|
-
defaultProtocol: 'hls'
|
|
14
|
-
};
|
|
15
|
-
export default VIDEO_TRANSCODING;
|
package/lib/common.slice.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
5
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
6
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
|
|
8
|
-
import { createSlice } from '@reduxjs/toolkit';
|
|
9
|
-
var initialState = {
|
|
10
|
-
videoTranscoding: {},
|
|
11
|
-
isUserAllowedToOptimize: false,
|
|
12
|
-
isVideoProcessActive: false,
|
|
13
|
-
imageOperation: {},
|
|
14
|
-
isImageProcessActive: false
|
|
15
|
-
};
|
|
16
|
-
var commonSlice = createSlice({
|
|
17
|
-
name: PLUGINS_IDS.PREUPLOAD_PROCESSORS,
|
|
18
|
-
initialState: initialState,
|
|
19
|
-
reducers: {
|
|
20
|
-
preUpProcessorsCommonStateUpdated: function preUpProcessorsCommonStateUpdated(state, action) {
|
|
21
|
-
return _objectSpread(_objectSpread({}, state), action.payload);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
var preUpProcessorsCommonStateUpdated = commonSlice.actions.preUpProcessorsCommonStateUpdated;
|
|
26
|
-
export { preUpProcessorsCommonStateUpdated };
|
|
27
|
-
export var selectPreUpProcessorsCommonState = function selectPreUpProcessorsCommonState(state) {
|
|
28
|
-
return state[PLUGINS_IDS.PREUPLOAD_PROCESSORS];
|
|
29
|
-
};
|
|
30
|
-
export default commonSlice.reducer;
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
5
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
6
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
import { Fragment } from 'react';
|
|
8
|
-
import { useDispatch, useSelector } from 'react-redux';
|
|
9
|
-
import Styled from './PreProcessor.styled';
|
|
10
|
-
import { preUpProcessorsCommonStateUpdated, selectPreUpProcessorsCommonState } from '../common.slice';
|
|
11
|
-
import ProcessorToggle from './ProcessorToggle';
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
-
var MIN_DIMENSION = 0;
|
|
14
|
-
var ImageAndPdfProcessor = function ImageAndPdfProcessor(_ref) {
|
|
15
|
-
var i18n = _ref.i18n,
|
|
16
|
-
pluginOpts = _ref.pluginOpts;
|
|
17
|
-
var dispatch = useDispatch();
|
|
18
|
-
var imageOperation = useSelector(function (state) {
|
|
19
|
-
return selectPreUpProcessorsCommonState(state).imageOperation;
|
|
20
|
-
});
|
|
21
|
-
var isImageProcessActive = useSelector(function (state) {
|
|
22
|
-
return selectPreUpProcessorsCommonState(state).isImageProcessActive;
|
|
23
|
-
});
|
|
24
|
-
var isUserAllowedToOptimize = useSelector(function (state) {
|
|
25
|
-
return selectPreUpProcessorsCommonState(state).isUserAllowedToOptimize || false;
|
|
26
|
-
});
|
|
27
|
-
var imageOperations = pluginOpts.imageOperations;
|
|
28
|
-
var imageDimension = {
|
|
29
|
-
width: i18n('preuploadMaxWidth'),
|
|
30
|
-
height: i18n('preuploadMaxHeight')
|
|
31
|
-
};
|
|
32
|
-
var toggleImageProcessor = function toggleImageProcessor(e) {
|
|
33
|
-
dispatch(preUpProcessorsCommonStateUpdated({
|
|
34
|
-
isImageProcessActive: e.target.checked
|
|
35
|
-
}));
|
|
36
|
-
};
|
|
37
|
-
var updateImageOperation = function updateImageOperation(newState) {
|
|
38
|
-
dispatch(preUpProcessorsCommonStateUpdated({
|
|
39
|
-
imageOperation: _objectSpread(_objectSpread({}, imageOperation), newState)
|
|
40
|
-
}));
|
|
41
|
-
};
|
|
42
|
-
var updateImageOperationVals = function updateImageOperationVals(newState) {
|
|
43
|
-
return updateImageOperation({
|
|
44
|
-
values: _objectSpread(_objectSpread({}, imageOperation.values), newState)
|
|
45
|
-
});
|
|
46
|
-
};
|
|
47
|
-
var changeWidthOrHeight = function changeWidthOrHeight(key, value) {
|
|
48
|
-
var nextValues = _defineProperty({}, key, value >= MIN_DIMENSION ? +value : MIN_DIMENSION);
|
|
49
|
-
updateImageOperationVals(nextValues);
|
|
50
|
-
};
|
|
51
|
-
var renderOperationOption = function renderOperationOption(optionName) {
|
|
52
|
-
var _imageOperation$value;
|
|
53
|
-
var _onChange = function onChange(value) {
|
|
54
|
-
return ['width', 'height'].includes(optionName) ? changeWidthOrHeight(optionName, value) : updateImageOperation(_defineProperty({}, optionName, value));
|
|
55
|
-
};
|
|
56
|
-
var optionValue = imageOperations[imageOperation.name][optionName];
|
|
57
|
-
return /*#__PURE__*/_jsx(Styled.OperationOptionWrapper, {
|
|
58
|
-
children: /*#__PURE__*/_jsx(Fragment, {
|
|
59
|
-
children: /*#__PURE__*/_jsx(Styled.InputGroup, {
|
|
60
|
-
disabled: !isImageProcessActive || !isUserAllowedToOptimize,
|
|
61
|
-
label: imageDimension[optionName],
|
|
62
|
-
iconEnd: "px",
|
|
63
|
-
inputProps: {
|
|
64
|
-
type: 'number',
|
|
65
|
-
min: 0
|
|
66
|
-
},
|
|
67
|
-
value: ((_imageOperation$value = imageOperation.values[optionName]) !== null && _imageOperation$value !== void 0 ? _imageOperation$value : optionValue).toString(),
|
|
68
|
-
onChange: function onChange(_ref2) {
|
|
69
|
-
var target = _ref2.target;
|
|
70
|
-
return _onChange(target.value);
|
|
71
|
-
}
|
|
72
|
-
})
|
|
73
|
-
}, optionName)
|
|
74
|
-
}, optionName);
|
|
75
|
-
};
|
|
76
|
-
return /*#__PURE__*/_jsx(_Fragment, {
|
|
77
|
-
children: /*#__PURE__*/_jsxs(Styled.SettingsContainer, {
|
|
78
|
-
children: [/*#__PURE__*/_jsx(Styled.UploadProcessorTitle, {
|
|
79
|
-
children: i18n('preuploadOptimizeImagesTitle')
|
|
80
|
-
}), /*#__PURE__*/_jsx(ProcessorToggle, {
|
|
81
|
-
toggleText: i18n('preuploadOptimizeImagesSubTitle'),
|
|
82
|
-
tooltipText: i18n('preuploadQuickUploadModeHint'),
|
|
83
|
-
isProcessActive: isImageProcessActive,
|
|
84
|
-
isProcessEnabled: isUserAllowedToOptimize,
|
|
85
|
-
toggleProcessor: toggleImageProcessor
|
|
86
|
-
}), /*#__PURE__*/_jsx(Styled.OperationsContainer, {
|
|
87
|
-
children: /*#__PURE__*/_jsx(Styled.Operation, {
|
|
88
|
-
children: Object.keys(imageOperations[imageOperation.name]).map(renderOperationOption)
|
|
89
|
-
})
|
|
90
|
-
})]
|
|
91
|
-
})
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
|
-
export default ImageAndPdfProcessor;
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
2
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
|
|
3
|
-
import { FV, PC, PSH } from '@scaleflex/widget-common';
|
|
4
|
-
import styled, { css } from 'styled-components';
|
|
5
|
-
import { TooltipV2, RadioGroup, StatusLabel as SfxLabel, InputGroup as SfxInputGroup } from '@scaleflex/ui/core';
|
|
6
|
-
import { InfoOutline } from '@scaleflex/icons';
|
|
7
|
-
var UploadSettingsContainer = styled.div(function (_ref) {
|
|
8
|
-
var _ref$theme = _ref.theme,
|
|
9
|
-
palette = _ref$theme.palette,
|
|
10
|
-
breakpoints = _ref$theme.breakpoints,
|
|
11
|
-
shadows = _ref$theme.shadows;
|
|
12
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n background: ", ";\n box-shadow: ", ";\n height: 100%;\n padding: 24px 24px 8px 24px;\n width: 302px;\n overflow-y: auto;\n\n ", " {\n padding: 24px 24px 8px 24px;\n }\n\n ", " {\n padding: 24px 24px 8px 24px;\n }\n "])), palette[PC.TextPrimary], palette[PC.BackgroundStateless], shadows[PSH.LeftPanelMd], breakpoints.between('lg', 'xxxl'), breakpoints.down('lg'));
|
|
13
|
-
});
|
|
14
|
-
var UploadSettingsTitle = styled.div(function (_ref2) {
|
|
15
|
-
var palette = _ref2.theme.palette;
|
|
16
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n font-style: normal;\n font-weight: 500;\n font-size: 18px;\n line-height: 27px;\n width: 100%;\n margin-bottom: 16px;\n border-bottom: 1px solid ", ";\n padding-bottom: 16px;\n align-items: center;\n width: 100%;\n "])), palette[PC.BordersSecondary]);
|
|
17
|
-
});
|
|
18
|
-
var UploadProcessorTitle = styled.div(function (_ref3) {
|
|
19
|
-
var palette = _ref3.theme.palette;
|
|
20
|
-
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n font-weight: 500;\n font-size: 16px;\n line-height: 24px;\n "])), palette[PC.TextPrimary]);
|
|
21
|
-
});
|
|
22
|
-
var UploadProcessorSubTitle = styled.div(function (_ref4) {
|
|
23
|
-
var _ref4$theme = _ref4.theme,
|
|
24
|
-
palette = _ref4$theme.palette,
|
|
25
|
-
typography = _ref4$theme.typography,
|
|
26
|
-
paddingTop = _ref4.paddingTop;
|
|
27
|
-
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n color: ", ";\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 0;\n ", "\n width: 100%;\n > label {\n display: flex;\n align-items: center;\n }\n "])), typography.font[FV.InputLg], palette[PC.TextPrimary], paddingTop && 'padding-top: 24px;');
|
|
28
|
-
});
|
|
29
|
-
var UploadOptionLabel = styled.div(function (_ref5) {
|
|
30
|
-
var palette = _ref5.theme.palette,
|
|
31
|
-
disabled = _ref5.disabled;
|
|
32
|
-
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n line-height: 16px;\n "])), palette[disabled ? PC.ButtonDisabledText : PC.TextSecondary]);
|
|
33
|
-
});
|
|
34
|
-
var SettingsContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: 100%;\n &:nth-child(3) {\n margin-top: 40px;\n margin-bottom: 12px;\n }\n "])));
|
|
35
|
-
var OperationOptionWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n &:last-child {\n margin-left: 12px;\n }\n "])));
|
|
36
|
-
var InputGroup = styled(SfxInputGroup)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 121px;\n padding: 11px 16px;\n max-width: 100%;\n"])));
|
|
37
|
-
var ProcessSelect = styled.div(function (_ref6) {
|
|
38
|
-
var palette = _ref6.theme.palette,
|
|
39
|
-
disabled = _ref6.disabled;
|
|
40
|
-
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n margin-bottom: 16px;\n\n > label {\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n font-size: 14px;\n color: ", ";\n line-height: 16px;\n }\n "])), palette[disabled ? PC.ButtonDisabledText : PC.TextSecondary]);
|
|
41
|
-
});
|
|
42
|
-
var ProtocolsRadio = styled(RadioGroup)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n padding-bottom: 12px;\n"])));
|
|
43
|
-
var Protocols = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: 12px;\n"])));
|
|
44
|
-
var ProtocolWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin-right: 16px;\n"])));
|
|
45
|
-
var OperationsContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n font-size: 14px;\n"])));
|
|
46
|
-
var Operation = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
47
|
-
var InfoOutlined = styled(InfoOutline)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n margin-left: 4px;\n color: ", ";\n"])), function (_ref7) {
|
|
48
|
-
var palette = _ref7.theme.palette;
|
|
49
|
-
return palette[PC.IconsPrimary];
|
|
50
|
-
});
|
|
51
|
-
var ResumableUploadWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n width: 100%;\n"])));
|
|
52
|
-
var Label = styled(SfxLabel)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n margin-left: 8px;\n background-color: ", ";\n border-radius: 4px;\n font-size: 12px;\n height: 18px;\n width: 32px;\n\n .SfxStatusLabel-Label {\n height: 14px;\n width: 25px;\n }\n\n &:hover {\n background: ", ";\n }\n"])), function (_ref8) {
|
|
53
|
-
var palette = _ref8.theme.palette;
|
|
54
|
-
return palette[PC.Success];
|
|
55
|
-
}, function (_ref9) {
|
|
56
|
-
var palette = _ref9.theme.palette;
|
|
57
|
-
return palette[PC.SuccessHover];
|
|
58
|
-
});
|
|
59
|
-
var ShowMoreTooltip = styled(TooltipV2)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n overflow-wrap: anywhere;\n"])));
|
|
60
|
-
var Styled = {
|
|
61
|
-
UploadSettingsContainer: UploadSettingsContainer,
|
|
62
|
-
UploadSettingsTitle: UploadSettingsTitle,
|
|
63
|
-
UploadProcessorTitle: UploadProcessorTitle,
|
|
64
|
-
UploadProcessorSubTitle: UploadProcessorSubTitle,
|
|
65
|
-
UploadOptionLabel: UploadOptionLabel,
|
|
66
|
-
SettingsContainer: SettingsContainer,
|
|
67
|
-
OperationOptionWrapper: OperationOptionWrapper,
|
|
68
|
-
InputGroup: InputGroup,
|
|
69
|
-
ProcessSelect: ProcessSelect,
|
|
70
|
-
Protocols: Protocols,
|
|
71
|
-
ProtocolWrapper: ProtocolWrapper,
|
|
72
|
-
Operation: Operation,
|
|
73
|
-
OperationsContainer: OperationsContainer,
|
|
74
|
-
ProtocolsRadio: ProtocolsRadio,
|
|
75
|
-
InfoOutlined: InfoOutlined,
|
|
76
|
-
ResumableUploadWrapper: ResumableUploadWrapper,
|
|
77
|
-
Label: Label,
|
|
78
|
-
ShowMoreTooltip: ShowMoreTooltip
|
|
79
|
-
};
|
|
80
|
-
export default Styled;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { Select, MenuItem } from '@scaleflex/ui/core';
|
|
2
|
-
import capitalizeFirstLetter from '@scaleflex/widget-utils/lib/capitalizeFirstLetter';
|
|
3
|
-
import Styled from './PreProcessor.styled';
|
|
4
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
-
var ProcessSelect = function ProcessSelect(_ref) {
|
|
6
|
-
var title = _ref.title,
|
|
7
|
-
options = _ref.options,
|
|
8
|
-
value = _ref.value,
|
|
9
|
-
onChange = _ref.onChange,
|
|
10
|
-
description = _ref.description,
|
|
11
|
-
style = _ref.style,
|
|
12
|
-
disabled = _ref.disabled;
|
|
13
|
-
return /*#__PURE__*/_jsxs(Styled.ProcessSelect, {
|
|
14
|
-
disabled: disabled,
|
|
15
|
-
children: [/*#__PURE__*/_jsx("label", {
|
|
16
|
-
children: title
|
|
17
|
-
}), /*#__PURE__*/_jsx(Select, {
|
|
18
|
-
disabled: disabled,
|
|
19
|
-
value: value,
|
|
20
|
-
onChange: onChange,
|
|
21
|
-
children: options.map(function (option) {
|
|
22
|
-
var _option$value, _option$value2, _ref2, _option$label, _ref3, _option$label2;
|
|
23
|
-
return /*#__PURE__*/_jsx(MenuItem, {
|
|
24
|
-
active: disabled,
|
|
25
|
-
value: (_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : option,
|
|
26
|
-
primary: (_ref2 = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.value) !== null && _ref2 !== void 0 ? _ref2 : option,
|
|
27
|
-
children: capitalizeFirstLetter((_ref3 = (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.value) !== null && _ref3 !== void 0 ? _ref3 : option)
|
|
28
|
-
}, (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : option);
|
|
29
|
-
})
|
|
30
|
-
})]
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
export default ProcessSelect;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { TooltipV2, Switcher } from '@scaleflex/ui/core';
|
|
2
|
-
import Styled from './PreProcessor.styled';
|
|
3
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
-
var ProcessorToggle = function ProcessorToggle(_ref) {
|
|
5
|
-
var _ref$paddingTop = _ref.paddingTop,
|
|
6
|
-
paddingTop = _ref$paddingTop === void 0 ? null : _ref$paddingTop,
|
|
7
|
-
toggleText = _ref.toggleText,
|
|
8
|
-
tooltipText = _ref.tooltipText,
|
|
9
|
-
isProcessActive = _ref.isProcessActive,
|
|
10
|
-
_ref$isProcessEnabled = _ref.isProcessEnabled,
|
|
11
|
-
isProcessEnabled = _ref$isProcessEnabled === void 0 ? true : _ref$isProcessEnabled,
|
|
12
|
-
_ref$toggleProcessor = _ref.toggleProcessor,
|
|
13
|
-
toggleProcessor = _ref$toggleProcessor === void 0 ? function () {} : _ref$toggleProcessor,
|
|
14
|
-
_ref$tooltipContent = _ref.tooltipContent,
|
|
15
|
-
tooltipContent = _ref$tooltipContent === void 0 ? null : _ref$tooltipContent;
|
|
16
|
-
return /*#__PURE__*/_jsxs(Styled.UploadProcessorSubTitle, {
|
|
17
|
-
paddingTop: paddingTop,
|
|
18
|
-
children: [/*#__PURE__*/_jsxs("label", {
|
|
19
|
-
children: [toggleText, /*#__PURE__*/_jsx(TooltipV2, {
|
|
20
|
-
arrow: true,
|
|
21
|
-
position: "top",
|
|
22
|
-
size: "sm",
|
|
23
|
-
title: tooltipText,
|
|
24
|
-
children: tooltipContent || /*#__PURE__*/_jsx(Styled.InfoOutlined, {
|
|
25
|
-
size: 14
|
|
26
|
-
})
|
|
27
|
-
})]
|
|
28
|
-
}), /*#__PURE__*/_jsx(Switcher, {
|
|
29
|
-
size: "md",
|
|
30
|
-
checked: isProcessActive,
|
|
31
|
-
disabled: !isProcessEnabled,
|
|
32
|
-
readOnly: !isProcessEnabled,
|
|
33
|
-
onChange: toggleProcessor
|
|
34
|
-
})]
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
export default ProcessorToggle;
|