@scaleflex/widget-screen-capture 0.0.1
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 +6755 -0
- package/LICENSE +21 -0
- package/README.md +156 -0
- package/dist/style.css +126 -0
- package/dist/style.min.css +1 -0
- package/lib/CaptureScreen.js +77 -0
- package/lib/RecordButton.js +55 -0
- package/lib/ScreenRecIcon.js +41 -0
- package/lib/StopWatch.js +105 -0
- package/lib/StreamStatus.js +56 -0
- package/lib/SubmitButton.js +36 -0
- package/lib/common.slice.js +29 -0
- package/lib/defaultLocale.js +9 -0
- package/lib/index.js +438 -0
- package/lib/style.scss +149 -0
- package/package.json +31 -0
- package/types/index.d.ts +25 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2019 scaleflex
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
# `@scaleflex/widget-screen-capture`
|
|
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://cdn.scaleflex.com/plugins/filerobot-widget/assets/filerobot_widget_logo_with_fire.png?vh=b2ff09" width="140"/>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
The screen capture records the device's screen with processing the recorded video for uploading 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-screen-capture
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### YARN
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
yarn add @scaleflex/widget-screen-capture
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
then
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
import ScreenCapture from '@scaleflex/widget-screen-capture'
|
|
35
|
+
...
|
|
36
|
+
...
|
|
37
|
+
...
|
|
38
|
+
scaleflexWidget.use(ScreenCapture, propertiesObject)
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### CDN
|
|
42
|
+
|
|
43
|
+
The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ScreenCapture`
|
|
44
|
+
|
|
45
|
+
```js
|
|
46
|
+
const ScreenCapture = window.ScaleflexWidget.ScreenCapture
|
|
47
|
+
...
|
|
48
|
+
...
|
|
49
|
+
...
|
|
50
|
+
scaleflexWidget.use(ScreenCapture, propertiesObject)
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Plugin's styles
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
import '@scaleflex/widget-core/dist/style.css'
|
|
57
|
+
import '@scaleflex/widget-screen-capture/dist/style.css'
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
or if you prefer the minified version
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
import '@scaleflex/widget-core/dist/style.min.css'
|
|
64
|
+
import '@scaleflex/widget-screen-capture/dist/style.min.css'
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
> 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.
|
|
68
|
+
|
|
69
|
+
## Properties
|
|
70
|
+
|
|
71
|
+
### `title`
|
|
72
|
+
|
|
73
|
+
<u>Type:</u> `string`.
|
|
74
|
+
|
|
75
|
+
<u>Default:</u> `'Screen cast'`
|
|
76
|
+
|
|
77
|
+
The title shown in the top bar of the panel.
|
|
78
|
+
|
|
79
|
+
### `preferredVideoMimeType`
|
|
80
|
+
|
|
81
|
+
<u>Type:</u> `string`.
|
|
82
|
+
|
|
83
|
+
<u>Default:</u> `null`
|
|
84
|
+
|
|
85
|
+
The mime type for the recorded video to be saved with if you provided un-supported mime type then the browser's default would be used, if you left it `null` then if found any suitable type inside [`allowedFileTypes`](../core/README.md/#restrictions) it would be used.
|
|
86
|
+
|
|
87
|
+
### `displayMediaConstraints`
|
|
88
|
+
|
|
89
|
+
<u>Type:</u> `object`.
|
|
90
|
+
|
|
91
|
+
<u>Default:</u>
|
|
92
|
+
|
|
93
|
+
```js
|
|
94
|
+
video: {
|
|
95
|
+
width: 1280,
|
|
96
|
+
height: 720,
|
|
97
|
+
frameRate: {
|
|
98
|
+
ideal: 3,
|
|
99
|
+
max: 5
|
|
100
|
+
},
|
|
101
|
+
cursor: 'motion',
|
|
102
|
+
displaySurface: 'monitor'
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
The options being passed for [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) method of [`navigator.mediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices). Check the available options/properties from [`MDN Docs`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#properties_of_shared_screen_tracks) Whether to show the video's recording length or not while it is in progress.
|
|
107
|
+
|
|
108
|
+
### `userMediaConstraints`
|
|
109
|
+
|
|
110
|
+
<u>Type:</u> `object`.
|
|
111
|
+
|
|
112
|
+
<u>Default:</u>
|
|
113
|
+
|
|
114
|
+
```js
|
|
115
|
+
{
|
|
116
|
+
audio: true
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
The options being passed for [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method of [`navigator.mediaDevices`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices). Check the available options/properties from [`MDN Docs`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio) Whether to show the video's recording length or not while it is in progress.
|
|
121
|
+
|
|
122
|
+
### `locale`
|
|
123
|
+
|
|
124
|
+
<u>Type:</u> `object`.
|
|
125
|
+
|
|
126
|
+
<u>Default:</u>
|
|
127
|
+
|
|
128
|
+
```js
|
|
129
|
+
strings: {
|
|
130
|
+
startCapturing: 'Begin screen capturing',
|
|
131
|
+
stopCapturing: 'Stop screen capturing',
|
|
132
|
+
submitRecordedFile: 'Submit captured video',
|
|
133
|
+
streamActive: 'Stream active',
|
|
134
|
+
streamPassive: 'Stream passive',
|
|
135
|
+
micDisabled: 'Microphone access denied by user',
|
|
136
|
+
recording: 'Recording'
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Customizing some of the translations or the language's strings and replace the default locale.
|
|
141
|
+
|
|
142
|
+
<!-- Variables -->
|
|
143
|
+
|
|
144
|
+
[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-screen-capture
|
|
145
|
+
[license-url]: https://opensource.org/licenses/MIT
|
|
146
|
+
[sfx-url]: https://www.scaleflex.com/
|
|
147
|
+
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-screen-capture
|
|
148
|
+
[codeSandbox-url]: https://codesandbox.io/s/filerobot-widget-v3-c5l9th
|
|
149
|
+
|
|
150
|
+
[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
|
|
151
|
+
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
|
|
152
|
+
[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
|
|
153
|
+
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
|
|
154
|
+
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
|
|
155
|
+
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-screen-capture?label=Version&style=for-the-badge&logo=npm
|
|
156
|
+
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox
|
package/dist/style.css
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
|
|
2
|
+
.filerobot-ScreenCapture-container {
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
display: flex;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
align-items: center;
|
|
8
|
+
flex-direction: column; }
|
|
9
|
+
|
|
10
|
+
.filerobot-ScreenCapture-videoContainer {
|
|
11
|
+
width: 100%;
|
|
12
|
+
flex: 1;
|
|
13
|
+
flex-grow: 1;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
background-color: #37414B;
|
|
16
|
+
text-align: center;
|
|
17
|
+
position: relative; }
|
|
18
|
+
.filerobot-size--md .filerobot-ScreenCapture-videoContainer {
|
|
19
|
+
max-width: 100%; }
|
|
20
|
+
|
|
21
|
+
.filerobot-ScreenCapture-video {
|
|
22
|
+
max-width: 100%;
|
|
23
|
+
max-height: 100%;
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: 0;
|
|
26
|
+
right: 0;
|
|
27
|
+
bottom: 0;
|
|
28
|
+
left: 0;
|
|
29
|
+
margin: auto;
|
|
30
|
+
outline: none; }
|
|
31
|
+
|
|
32
|
+
.filerobot-ScreenCapture-buttonContainer {
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 75px;
|
|
35
|
+
border-top: 1px solid #eaeaea;
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
padding: 0 20px;
|
|
40
|
+
background-color: #fff; }
|
|
41
|
+
[data-filerobot-theme="dark"] .filerobot-ScreenCapture-buttonContainer {
|
|
42
|
+
background-color: #1f1f1f;
|
|
43
|
+
border-top: 1px solid #333; }
|
|
44
|
+
|
|
45
|
+
.filerobot-ScreenCapture-button {
|
|
46
|
+
width: 45px;
|
|
47
|
+
height: 45px;
|
|
48
|
+
border-radius: 50%;
|
|
49
|
+
color: #fff;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
transition: all 0.3s; }
|
|
52
|
+
.filerobot-ScreenCapture-button:focus {
|
|
53
|
+
outline: none; }
|
|
54
|
+
.filerobot-ScreenCapture-button::-moz-focus-inner {
|
|
55
|
+
border: 0; }
|
|
56
|
+
.filerobot-ScreenCapture-button:focus {
|
|
57
|
+
box-shadow: 0 0 0 3px rgba(82, 130, 219, 0.5); }
|
|
58
|
+
[data-filerobot-theme="dark"] .filerobot-ScreenCapture-button:focus {
|
|
59
|
+
outline: none; }
|
|
60
|
+
[data-filerobot-theme="dark"] .filerobot-ScreenCapture-button::-moz-focus-inner {
|
|
61
|
+
border: 0; }
|
|
62
|
+
[data-filerobot-theme="dark"] .filerobot-ScreenCapture-button:focus {
|
|
63
|
+
box-shadow: 0 0 0 2px rgba(170, 225, 255, 0.85); }
|
|
64
|
+
.filerobot-size--md .filerobot-ScreenCapture-button {
|
|
65
|
+
width: 60px;
|
|
66
|
+
height: 60px; }
|
|
67
|
+
.filerobot-ScreenCapture-button:hover {
|
|
68
|
+
background-color: #d31b2d; }
|
|
69
|
+
|
|
70
|
+
.filerobot-ScreenCapture-button svg {
|
|
71
|
+
width: 30px;
|
|
72
|
+
height: 30px;
|
|
73
|
+
max-width: 100%;
|
|
74
|
+
max-height: 100%;
|
|
75
|
+
display: inline-block;
|
|
76
|
+
vertical-align: text-top;
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
fill: currentColor; }
|
|
79
|
+
|
|
80
|
+
.filerobot-ScreenCapture-button--submit {
|
|
81
|
+
background-color: #5282DB;
|
|
82
|
+
margin-left: 12px; }
|
|
83
|
+
.filerobot-ScreenCapture-button--submit:hover {
|
|
84
|
+
background-color: #3d73d7; }
|
|
85
|
+
.filerobot-ScreenCapture-button--submit:disabled {
|
|
86
|
+
background-color: #939393;
|
|
87
|
+
cursor: default; }
|
|
88
|
+
.filerobot-ScreenCapture-button--submit:disabled:hover {
|
|
89
|
+
background-color: #eaeaea; }
|
|
90
|
+
|
|
91
|
+
.filerobot-ScreenCapture-title {
|
|
92
|
+
font-size: 22px;
|
|
93
|
+
line-height: 1.35;
|
|
94
|
+
font-weight: 400;
|
|
95
|
+
margin: 0;
|
|
96
|
+
margin-bottom: 5px;
|
|
97
|
+
padding: 0 15px;
|
|
98
|
+
max-width: 500px;
|
|
99
|
+
text-align: center;
|
|
100
|
+
color: #333; }
|
|
101
|
+
|
|
102
|
+
.filerobot-ScreenCapture-icon--stream {
|
|
103
|
+
position: absolute;
|
|
104
|
+
right: 0;
|
|
105
|
+
top: 0;
|
|
106
|
+
margin: 1rem;
|
|
107
|
+
z-index: 1; }
|
|
108
|
+
.filerobot-ScreenCapture-icon--stream svg {
|
|
109
|
+
fill: #939393; }
|
|
110
|
+
|
|
111
|
+
.filerobot-ScreenCapture-icon--streamActive svg {
|
|
112
|
+
animation: filerobot-ScreenCapture-icon--blink 1s cubic-bezier(0.47, 0, 0.75, 0.72) infinite; }
|
|
113
|
+
|
|
114
|
+
@keyframes filerobot-ScreenCapture-icon--blink {
|
|
115
|
+
0% {
|
|
116
|
+
fill: #5282DB; }
|
|
117
|
+
50% {
|
|
118
|
+
fill: #939393; }
|
|
119
|
+
100% {
|
|
120
|
+
fill: #5282DB; } }
|
|
121
|
+
|
|
122
|
+
.filerobot-ScreenCapture-button--video {
|
|
123
|
+
color: #fff;
|
|
124
|
+
background: #e32437; }
|
|
125
|
+
.filerobot-ScreenCapture-button--video:hover {
|
|
126
|
+
background-color: #bc1828; }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");.filerobot-ScreenCapture-container{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.filerobot-ScreenCapture-videoContainer{background-color:#37414b;flex:1;flex-grow:1;overflow:hidden;position:relative;text-align:center;width:100%}.filerobot-size--md .filerobot-ScreenCapture-videoContainer{max-width:100%}.filerobot-ScreenCapture-video{bottom:0;left:0;margin:auto;max-height:100%;max-width:100%;outline:none;position:absolute;right:0;top:0}.filerobot-ScreenCapture-buttonContainer{align-items:center;background-color:#fff;border-top:1px solid #eaeaea;display:flex;height:75px;justify-content:center;padding:0 20px;width:100%}[data-filerobot-theme=dark] .filerobot-ScreenCapture-buttonContainer{background-color:#1f1f1f;border-top:1px solid #333}.filerobot-ScreenCapture-button{border-radius:50%;color:#fff;cursor:pointer;height:45px;transition:all .3s;width:45px}.filerobot-ScreenCapture-button:focus{outline:none}.filerobot-ScreenCapture-button::-moz-focus-inner{border:0}.filerobot-ScreenCapture-button:focus{box-shadow:0 0 0 3px rgba(82,130,219,.5)}[data-filerobot-theme=dark] .filerobot-ScreenCapture-button:focus{outline:none}[data-filerobot-theme=dark] .filerobot-ScreenCapture-button::-moz-focus-inner{border:0}[data-filerobot-theme=dark] .filerobot-ScreenCapture-button:focus{box-shadow:0 0 0 2px rgba(170,225,255,.85)}.filerobot-size--md .filerobot-ScreenCapture-button{height:60px;width:60px}.filerobot-ScreenCapture-button:hover{background-color:#d31b2d}.filerobot-ScreenCapture-button svg{display:inline-block;height:30px;max-height:100%;max-width:100%;overflow:hidden;vertical-align:text-top;width:30px;fill:currentColor}.filerobot-ScreenCapture-button--submit{background-color:#5282db;margin-left:12px}.filerobot-ScreenCapture-button--submit:hover{background-color:#3d73d7}.filerobot-ScreenCapture-button--submit:disabled{background-color:#939393;cursor:default}.filerobot-ScreenCapture-button--submit:disabled:hover{background-color:#eaeaea}.filerobot-ScreenCapture-title{color:#333;font-size:22px;font-weight:400;line-height:1.35;margin:0 0 5px;max-width:500px;padding:0 15px;text-align:center}.filerobot-ScreenCapture-icon--stream{margin:1rem;position:absolute;right:0;top:0;z-index:1}.filerobot-ScreenCapture-icon--stream svg{fill:#939393}.filerobot-ScreenCapture-icon--streamActive svg{animation:filerobot-ScreenCapture-icon--blink 1s cubic-bezier(.47,0,.75,.72) infinite}@keyframes filerobot-ScreenCapture-icon--blink{0%{fill:#5282db}50%{fill:#939393}to{fill:#5282db}}.filerobot-ScreenCapture-button--video{background:#e32437;color:#fff}.filerobot-ScreenCapture-button--video:hover{background-color:#bc1828}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import RecordButton from './RecordButton';
|
|
3
|
+
import SubmitButton from './SubmitButton';
|
|
4
|
+
import StopWatch from './StopWatch';
|
|
5
|
+
import StreamStatus from './StreamStatus';
|
|
6
|
+
import { useSelector } from 'react-redux';
|
|
7
|
+
import { selectScreenCaptureCommonState } from './common.slice';
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
var RecorderScreen = function RecorderScreen(_ref) {
|
|
10
|
+
var onStartRecording = _ref.onStartRecording,
|
|
11
|
+
onStopRecording = _ref.onStopRecording,
|
|
12
|
+
onStop = _ref.onStop,
|
|
13
|
+
onSubmit = _ref.onSubmit,
|
|
14
|
+
i18n = _ref.i18n,
|
|
15
|
+
videoStream = _ref.stream;
|
|
16
|
+
var recordedVideo = useSelector(function (state) {
|
|
17
|
+
return selectScreenCaptureCommonState(state).recordedVideo;
|
|
18
|
+
});
|
|
19
|
+
var recording = useSelector(function (state) {
|
|
20
|
+
return selectScreenCaptureCommonState(state).recording;
|
|
21
|
+
});
|
|
22
|
+
var videoElementRef = useRef();
|
|
23
|
+
var videoElement = videoElementRef === null || videoElementRef === void 0 ? void 0 : videoElementRef.current;
|
|
24
|
+
useEffect(function () {
|
|
25
|
+
return function () {
|
|
26
|
+
onStop();
|
|
27
|
+
};
|
|
28
|
+
}, []);
|
|
29
|
+
if (videoElement) {
|
|
30
|
+
// show stream
|
|
31
|
+
if (recording || !recordedVideo && !recording) {
|
|
32
|
+
videoElement.muted = true;
|
|
33
|
+
videoElement.autoPlay = true;
|
|
34
|
+
videoElement.srcObject = videoStream;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// show preview
|
|
38
|
+
if (recordedVideo && !recording) {
|
|
39
|
+
videoElement.muted = false;
|
|
40
|
+
videoElement.controls = true;
|
|
41
|
+
videoElement.src = recordedVideo;
|
|
42
|
+
|
|
43
|
+
// reset srcObject in dom. If not resetted, stream sticks in element
|
|
44
|
+
videoElement.srcObject = undefined;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
48
|
+
className: "filerobot filerobot-ScreenCapture-container",
|
|
49
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
50
|
+
className: "filerobot-ScreenCapture-videoContainer",
|
|
51
|
+
children: [/*#__PURE__*/_jsx(StreamStatus, {
|
|
52
|
+
i18n: i18n
|
|
53
|
+
}), /*#__PURE__*/_jsx("video", {
|
|
54
|
+
ref: videoElementRef,
|
|
55
|
+
className: "filerobot-ScreenCapture-video",
|
|
56
|
+
playsInline: true,
|
|
57
|
+
autoPlay: true
|
|
58
|
+
}), /*#__PURE__*/_jsx(StopWatch, {
|
|
59
|
+
i18n: i18n
|
|
60
|
+
})]
|
|
61
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
62
|
+
className: "filerobot-ScreenCapture-buttonContainer",
|
|
63
|
+
children: [/*#__PURE__*/_jsx(RecordButton, {
|
|
64
|
+
recording: recording,
|
|
65
|
+
onStartRecording: onStartRecording,
|
|
66
|
+
onStopRecording: onStopRecording,
|
|
67
|
+
i18n: i18n
|
|
68
|
+
}), /*#__PURE__*/_jsx(SubmitButton, {
|
|
69
|
+
recording: recording,
|
|
70
|
+
recordedVideo: recordedVideo,
|
|
71
|
+
onSubmit: onSubmit,
|
|
72
|
+
i18n: i18n
|
|
73
|
+
})]
|
|
74
|
+
})]
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
export default RecorderScreen;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* Control screen capture recording. Will show record or stop button.
|
|
4
|
+
*/
|
|
5
|
+
export default function RecordButton(_ref) {
|
|
6
|
+
var recording = _ref.recording,
|
|
7
|
+
onStartRecording = _ref.onStartRecording,
|
|
8
|
+
onStopRecording = _ref.onStopRecording,
|
|
9
|
+
i18n = _ref.i18n;
|
|
10
|
+
if (recording) {
|
|
11
|
+
return /*#__PURE__*/_jsx("button", {
|
|
12
|
+
className: "filerobot-u-reset filerobot-c-btn filerobot-ScreenCapture-button filerobot-ScreenCapture-button--video filerobot-ScreenCapture-button--stop-rec",
|
|
13
|
+
type: "button",
|
|
14
|
+
title: i18n('webcamStopRecordingTitle'),
|
|
15
|
+
"aria-label": i18n('webcamStopRecordingTitle'),
|
|
16
|
+
onClick: onStopRecording,
|
|
17
|
+
"data-filerobot-super-focusable": true,
|
|
18
|
+
children: /*#__PURE__*/_jsx("svg", {
|
|
19
|
+
"aria-hidden": "true",
|
|
20
|
+
focusable: "false",
|
|
21
|
+
className: "filerobot-c-icon",
|
|
22
|
+
width: "100",
|
|
23
|
+
height: "100",
|
|
24
|
+
viewBox: "0 0 100 100",
|
|
25
|
+
children: /*#__PURE__*/_jsx("rect", {
|
|
26
|
+
x: "15",
|
|
27
|
+
y: "15",
|
|
28
|
+
width: "70",
|
|
29
|
+
height: "70"
|
|
30
|
+
})
|
|
31
|
+
})
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
return /*#__PURE__*/_jsx("button", {
|
|
35
|
+
className: "filerobot-u-reset filerobot-c-btn filerobot-ScreenCapture-button filerobot-ScreenCapture-button--video",
|
|
36
|
+
type: "button",
|
|
37
|
+
title: i18n('screenCaptureStartCapturingTitle'),
|
|
38
|
+
"aria-label": i18n('screenCaptureStopCapturingLabel'),
|
|
39
|
+
onClick: onStartRecording,
|
|
40
|
+
"data-filerobot-super-focusable": true,
|
|
41
|
+
children: /*#__PURE__*/_jsx("svg", {
|
|
42
|
+
"aria-hidden": "true",
|
|
43
|
+
focusable: "false",
|
|
44
|
+
className: "filerobot-c-icon",
|
|
45
|
+
width: "100",
|
|
46
|
+
height: "100",
|
|
47
|
+
viewBox: "0 0 100 100",
|
|
48
|
+
children: /*#__PURE__*/_jsx("circle", {
|
|
49
|
+
cx: "50",
|
|
50
|
+
cy: "50",
|
|
51
|
+
r: "40"
|
|
52
|
+
})
|
|
53
|
+
})
|
|
54
|
+
});
|
|
55
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
|
|
9
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
10
|
+
var ScreenRecIcon = function ScreenRecIcon() {
|
|
11
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
12
|
+
props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
13
|
+
return /*#__PURE__*/_jsx("svg", _objectSpread(_objectSpread({
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
focusable: "false",
|
|
16
|
+
width: "32",
|
|
17
|
+
height: "32",
|
|
18
|
+
viewBox: "0 0 32 32"
|
|
19
|
+
}, props), {}, {
|
|
20
|
+
children: /*#__PURE__*/_jsxs("g", {
|
|
21
|
+
fill: "none",
|
|
22
|
+
fillRule: "evenodd",
|
|
23
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
24
|
+
fill: "#2C3E50",
|
|
25
|
+
width: "32",
|
|
26
|
+
height: "32",
|
|
27
|
+
rx: "16"
|
|
28
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
29
|
+
d: "M24.182 9H7.818C6.81 9 6 9.742 6 10.667v10c0 .916.81 1.666 1.818 1.666h4.546V24h7.272v-1.667h4.546c1 0 1.809-.75 1.809-1.666l.009-10C26 9.742 25.182 9 24.182 9zM24 21H8V11h16v10z",
|
|
30
|
+
fill: "#FFF",
|
|
31
|
+
fillRule: "nonzero"
|
|
32
|
+
}), /*#__PURE__*/_jsx("circle", {
|
|
33
|
+
fill: "#FFF",
|
|
34
|
+
cx: "16",
|
|
35
|
+
cy: "16",
|
|
36
|
+
r: "2"
|
|
37
|
+
})]
|
|
38
|
+
})
|
|
39
|
+
}));
|
|
40
|
+
};
|
|
41
|
+
export default ScreenRecIcon;
|
package/lib/StopWatch.js
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
4
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
7
|
+
import { useRef, useState } from 'react';
|
|
8
|
+
import { useSelector } from 'react-redux';
|
|
9
|
+
import { selectScreenCaptureCommonState } from './common.slice';
|
|
10
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
+
var wrapperStyle = {
|
|
12
|
+
width: '100%',
|
|
13
|
+
height: '100%',
|
|
14
|
+
display: 'flex'
|
|
15
|
+
};
|
|
16
|
+
var overlayStyle = {
|
|
17
|
+
position: 'absolute',
|
|
18
|
+
width: '100%',
|
|
19
|
+
height: '100%',
|
|
20
|
+
background: 'black',
|
|
21
|
+
opacity: 0.7
|
|
22
|
+
};
|
|
23
|
+
var infoContainerStyle = {
|
|
24
|
+
marginLeft: 'auto',
|
|
25
|
+
marginRight: 'auto',
|
|
26
|
+
marginTop: 'auto',
|
|
27
|
+
marginBottom: 'auto',
|
|
28
|
+
zIndex: 1,
|
|
29
|
+
color: 'white'
|
|
30
|
+
};
|
|
31
|
+
var infotextStyle = {
|
|
32
|
+
marginLeft: 'auto',
|
|
33
|
+
marginRight: 'auto',
|
|
34
|
+
marginBottom: '1rem',
|
|
35
|
+
fontSize: '1.5rem'
|
|
36
|
+
};
|
|
37
|
+
var timeStyle = {
|
|
38
|
+
display: 'block',
|
|
39
|
+
fontWeight: 'bold',
|
|
40
|
+
marginLeft: 'auto',
|
|
41
|
+
marginRight: 'auto',
|
|
42
|
+
fontSize: '3rem',
|
|
43
|
+
fontFamily: 'Courier New'
|
|
44
|
+
};
|
|
45
|
+
var StopWatch = function StopWatch(_ref) {
|
|
46
|
+
var i18n = _ref.i18n;
|
|
47
|
+
var recording = useSelector(function (state) {
|
|
48
|
+
return selectScreenCaptureCommonState(state).recording;
|
|
49
|
+
});
|
|
50
|
+
var _useState = useState(0),
|
|
51
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
52
|
+
elapsedTime = _useState2[0],
|
|
53
|
+
setElapsedTime = _useState2[1];
|
|
54
|
+
var timerRef = useRef(null);
|
|
55
|
+
var isTimerRunning = useRef(false);
|
|
56
|
+
var startTimer = function startTimer() {
|
|
57
|
+
_timerTick();
|
|
58
|
+
isTimerRunning.current = true;
|
|
59
|
+
};
|
|
60
|
+
var resetTimer = function resetTimer() {
|
|
61
|
+
clearTimeout(timerRef.current);
|
|
62
|
+
setElapsedTime(0);
|
|
63
|
+
isTimerRunning.current = false;
|
|
64
|
+
};
|
|
65
|
+
var _timerTick = function timerTick() {
|
|
66
|
+
timerRef.current = setTimeout(function () {
|
|
67
|
+
setElapsedTime(function (elapsedTime) {
|
|
68
|
+
return elapsedTime + 1;
|
|
69
|
+
});
|
|
70
|
+
_timerTick();
|
|
71
|
+
}, 1000);
|
|
72
|
+
};
|
|
73
|
+
var fmtMSS = function fmtMSS(s) {
|
|
74
|
+
return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s;
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
// second to minutes and seconds
|
|
78
|
+
var minAndSec = fmtMSS(elapsedTime);
|
|
79
|
+
if (recording && !(isTimerRunning !== null && isTimerRunning !== void 0 && isTimerRunning.current)) {
|
|
80
|
+
startTimer();
|
|
81
|
+
}
|
|
82
|
+
if (!recording && isTimerRunning !== null && isTimerRunning !== void 0 && isTimerRunning.current) {
|
|
83
|
+
resetTimer();
|
|
84
|
+
}
|
|
85
|
+
if (recording) {
|
|
86
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
87
|
+
style: wrapperStyle,
|
|
88
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
89
|
+
style: overlayStyle
|
|
90
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
91
|
+
style: infoContainerStyle,
|
|
92
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
93
|
+
style: infotextStyle,
|
|
94
|
+
children: i18n('screenCaptureRecordingText')
|
|
95
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
96
|
+
style: timeStyle,
|
|
97
|
+
children: minAndSec
|
|
98
|
+
})]
|
|
99
|
+
})]
|
|
100
|
+
});
|
|
101
|
+
} else {
|
|
102
|
+
return null;
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
export default StopWatch;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { useSelector } from 'react-redux';
|
|
2
|
+
import { selectScreenCaptureCommonState } from './common.slice';
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
export default (function (_ref) {
|
|
5
|
+
var i18n = _ref.i18n;
|
|
6
|
+
var streamActive = useSelector(function (state) {
|
|
7
|
+
return selectScreenCaptureCommonState(state).streamActive;
|
|
8
|
+
});
|
|
9
|
+
if (streamActive) {
|
|
10
|
+
return /*#__PURE__*/_jsx("div", {
|
|
11
|
+
title: i18n('screenCaptureStreamActive'),
|
|
12
|
+
"aria-label": i18n('screenCaptureStreamActive'),
|
|
13
|
+
className: "filerobot-ScreenCapture-icon--stream filerobot-ScreenCapture-icon--streamActive",
|
|
14
|
+
children: /*#__PURE__*/_jsxs("svg", {
|
|
15
|
+
"aria-hidden": "true",
|
|
16
|
+
focusable: "false",
|
|
17
|
+
width: "24",
|
|
18
|
+
height: "24",
|
|
19
|
+
viewBox: "0 0 24 24",
|
|
20
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
21
|
+
d: "M0 0h24v24H0z",
|
|
22
|
+
opacity: ".1",
|
|
23
|
+
fill: "none"
|
|
24
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
25
|
+
d: "M0 0h24v24H0z",
|
|
26
|
+
fill: "none"
|
|
27
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
28
|
+
d: "M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
|
29
|
+
})]
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
} else {
|
|
33
|
+
return /*#__PURE__*/_jsx("div", {
|
|
34
|
+
title: i18n('screenCaptureStreamPassiveTitle'),
|
|
35
|
+
"aria-label": i18n('screenCaptureStreamPassiveTitle'),
|
|
36
|
+
className: "filerobot-ScreenCapture-icon--stream",
|
|
37
|
+
children: /*#__PURE__*/_jsxs("svg", {
|
|
38
|
+
"aria-hidden": "true",
|
|
39
|
+
focusable: "false",
|
|
40
|
+
width: "24",
|
|
41
|
+
height: "24",
|
|
42
|
+
viewBox: "0 0 24 24",
|
|
43
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
44
|
+
d: "M0 0h24v24H0z",
|
|
45
|
+
opacity: ".1",
|
|
46
|
+
fill: "none"
|
|
47
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
48
|
+
d: "M0 0h24v24H0z",
|
|
49
|
+
fill: "none"
|
|
50
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
51
|
+
d: "M21 3H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11z"
|
|
52
|
+
})]
|
|
53
|
+
})
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
});
|