@scaleflex/widget-screen-capture 0.0.1

package/lib/SubmitButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Submit recorded video to filerobot. Enabled when file is available
+ */
+export default function SubmitButton(_ref) {
+  var recordedVideo = _ref.recordedVideo,
+    recording = _ref.recording,
+    onSubmit = _ref.onSubmit,
+    i18n = _ref.i18n;
+  if (recordedVideo && !recording) {
+    return /*#__PURE__*/_jsx("button", {
+      className: "filerobot-u-reset filerobot-c-btn filerobot-ScreenCapture-button filerobot-ScreenCapture-button--submit",
+      type: "button",
+      title: i18n('screenCaptureSubmitRecordedFileTitle'),
+      "aria-label": i18n('screenCaptureSubmitRecordedFileTitle'),
+      onClick: onSubmit,
+      "data-filerobot-super-focusable": true,
+      children: /*#__PURE__*/_jsxs("svg", {
+        "aria-hidden": "true",
+        focusable: "false",
+        className: "filerobot-c-icon",
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        children: [/*#__PURE__*/_jsx("path", {
+          d: "M0 0h48v48h-48z",
+          fill: "none"
+        }), /*#__PURE__*/_jsx("path", {
+          d: "M38.71 20.07c-1.36-6.88-7.43-12.07-14.71-12.07-5.78 0-10.79 3.28-13.3 8.07-6.01.65-10.7 5.74-10.7 11.93 0 6.63 5.37 12 12 12h26c5.52 0 10-4.48 10-10 0-5.28-4.11-9.56-9.29-9.93zm-10.71 5.93v8h-8v-8h-6l10-10 10 10h-6z"
+        })]
+      })
+    });
+  } else {
+    return null;
+  }
+}

package/lib/common.slice.js

@@ -0,0 +1,29 @@
+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); }
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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); }
+import { createSlice } from '@reduxjs/toolkit';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+var initialState = {
+  streamActive: false,
+  audioStreamActive: false,
+  recording: false,
+  recordedVideo: null
+};
+var commonSlice = createSlice({
+  name: PLUGINS_IDS.SCREEN_CAPTURE,
+  initialState: initialState,
+  reducers: {
+    screenCaptureCommonStateUpdated: function screenCaptureCommonStateUpdated(state, action) {
+      return _objectSpread(_objectSpread({}, state), action.payload);
+    }
+  }
+});
+var screenCaptureCommonStateUpdated = commonSlice.actions.screenCaptureCommonStateUpdated;
+export { screenCaptureCommonStateUpdated };
+export var selectScreenCaptureCommonState = function selectScreenCaptureCommonState(state) {
+  return state[PLUGINS_IDS.SCREEN_CAPTURE];
+};
+export default commonSlice.reducer;

package/lib/defaultLocale.js

@@ -0,0 +1,9 @@
+export default {
+  screenCaptureStartCapturingTitle: 'Begin screen capturing',
+  screenCaptureStopCapturingLabel: 'Stop screen capturing',
+  screenCaptureSubmitRecordedFileTitle: 'Submit captured video',
+  screenCaptureStreamActive: 'Stream active',
+  screenCaptureStreamPassiveTitle: 'Stream passive',
+  screenCaptureMicDisabledInfo: 'Microphone access denied by user',
+  screenCaptureRecordingText: 'Recording'
+};

package/lib/index.js

@@ -0,0 +1,438 @@
+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); }
+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; }
+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; }
+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; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+import { createElement } from 'react';
+import { Plugin } from '@scaleflex/widget-core';
+import Explorer from '@scaleflex/widget-explorer';
+import Translator from '@scaleflex/widget-utils/lib/Translator';
+import getFileTypeExtension from '@scaleflex/widget-utils/lib/getFileTypeExtension';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import defaultLocale from './defaultLocale';
+import ScreenRecIcon from './ScreenRecIcon';
+import CaptureScreen from './CaptureScreen';
+import screenCaptureReducer, { screenCaptureCommonStateUpdated } from './common.slice';
+// TODO: find a way to show version of the current plugin
+// why solution below isn't good?
+// first import doesn't work with webpack 5 as it was deprecated
+// second import fixes webpack 5 issue as it was mentioned in their docs
+// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
+// https://github.com/axelpale/genversion
+// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
+// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
+// import { version } from '../package.json'
+// import packageInfo from '../package.json'
+
+// Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+function getMediaDevices() {
+  // check if screen capturing is supported
+  /* eslint-disable */
+  if (navigator && navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia && window && window.MediaRecorder) {
+    return navigator.mediaDevices;
+  }
+  /* eslint-enable */
+
+  return null;
+}
+
+/**
+ * Screen capture
+ */
+var ScreenCapture = /*#__PURE__*/function (_Plugin) {
+  // static VERSION = packageInfo.version
+
+  function ScreenCapture(filerobot) {
+    var _this;
+    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, ScreenCapture);
+    _this = _callSuper(this, ScreenCapture, [filerobot, opts]);
+    _this.mediaDevices = getMediaDevices();
+    _this.protocol = location.protocol.match(/https/i) ? 'https' : 'http';
+    _this.id = PLUGINS_IDS.SCREEN_CAPTURE;
+    _this.title = _this.opts.title || 'Screen cast';
+    _this.type = 'acquirer';
+    _this.icon = ScreenRecIcon;
+    _this.defaultLocale = {
+      strings: defaultLocale
+    };
+
+    // set default options
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints
+    var defaultOptions = {
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#Properties_of_shared_screen_tracks
+      displayMediaConstraints: {
+        video: {
+          width: 1280,
+          height: 720,
+          frameRate: {
+            ideal: 3,
+            max: 5
+          },
+          cursor: 'motion',
+          displaySurface: 'monitor'
+        }
+      },
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
+      userMediaConstraints: {
+        audio: true
+      },
+      preferredVideoMimeType: 'video/webm'
+    };
+
+    // merge default options with the ones set by user
+    _this.opts = _objectSpread(_objectSpread({}, defaultOptions), opts);
+
+    // i18n
+    _this.translator = new Translator([_this.defaultLocale, _this.filerobot.locale, _this.opts.locale]);
+    _this.i18n = _this.translator.translate.bind(_this.translator);
+    _this.i18nArray = _this.translator.translateArray.bind(_this.translator);
+
+    // filerobot plugin class related
+    _this.install = _this.install.bind(_this);
+    _this.render = _this.render.bind(_this);
+
+    // screen capturer related
+    _this.start = _this.start.bind(_this);
+    _this.stop = _this.stop.bind(_this);
+    _this.startRecording = _this.startRecording.bind(_this);
+    _this.stopRecording = _this.stopRecording.bind(_this);
+    _this.submit = _this.submit.bind(_this);
+    _this.streamInterrupted = _this.streamInactivated.bind(_this);
+
+    // initialize
+    _this.captureActive = false;
+    _this.capturedMediaFile = null;
+    return _this;
+  }
+  _inherits(ScreenCapture, _Plugin);
+  return _createClass(ScreenCapture, [{
+    key: "install",
+    value: function install() {
+      // Return if browser doesn’t support getDisplayMedia and
+      if (!this.mediaDevices) {
+        this.filerobot.log('Screen recorder access is not supported', 'error');
+        return null;
+      }
+      if (Explorer) {
+        this.mount(Explorer, this);
+      }
+    }
+  }, {
+    key: "uninstall",
+    value: function uninstall() {
+      if (this.videoStream) {
+        this.stop();
+      }
+      this.unmount();
+    }
+  }, {
+    key: "setPluginCommonState",
+    value: function setPluginCommonState(update) {
+      this.dispatch(screenCaptureCommonStateUpdated(update));
+    }
+  }, {
+    key: "getPluginReducer",
+    value: function getPluginReducer() {
+      return screenCaptureReducer;
+    }
+  }, {
+    key: "start",
+    value: function start() {
+      var _this2 = this;
+      if (!this.mediaDevices) {
+        return Promise.reject(new Error('Screen recorder access not supported'));
+      }
+      this.captureActive = true;
+      this.selectAudioStreamSource();
+      this.selectVideoStreamSource().then(function (res) {
+        // something happened in start -> return
+        if (res === false) {
+          // Close the Explorer panel if plugin is installed
+          // into Explorer (could be other parent UI plugin)
+          if (_this2.parent && _this2.parent.hideAllPanelsAndShowAddFilesPanel) {
+            _this2.parent.hideAllPanelsAndShowAddFilesPanel();
+            _this2.captureActive = false;
+          }
+        }
+      });
+    }
+  }, {
+    key: "selectVideoStreamSource",
+    value: function selectVideoStreamSource() {
+      var _this3 = this;
+      // if active stream available, return it
+      if (this.videoStream) {
+        return new Promise(function (resolve) {
+          return resolve(_this3.videoStream);
+        });
+      }
+
+      // ask user to select source to record and get mediastream from that
+      return this.mediaDevices.getDisplayMedia(this.opts.displayMediaConstraints).then(function (videoStream) {
+        _this3.videoStream = videoStream;
+
+        // add event listener to stop recording if stream is interrupted
+        _this3.videoStream.addEventListener('inactive', function (event) {
+          _this3.streamInactivated();
+        });
+        _this3.setPluginCommonState({
+          streamActive: true
+        });
+        return videoStream;
+      })["catch"](function () {
+        var err = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        _this3.filerobot.info(err, 'error', 5000);
+        _this3.userDenied = true;
+        setTimeout(function () {
+          _this3.userDenied = false;
+        }, 1000);
+        return false;
+      });
+    }
+  }, {
+    key: "selectAudioStreamSource",
+    value: function selectAudioStreamSource() {
+      var _this4 = this;
+      // if active stream available, return it
+      if (this.audioStream) {
+        return new Promise(function (resolve) {
+          return resolve(_this4.audioStream);
+        });
+      }
+
+      // ask user to select source to record and get mediastream from that
+      return this.mediaDevices.getUserMedia(this.opts.userMediaConstraints).then(function (audioStream) {
+        _this4.audioStream = audioStream;
+        _this4.setPluginCommonState({
+          audioStreamActive: true
+        });
+        return audioStream;
+      })["catch"](function (err) {
+        if (err.name === 'NotAllowedError') {
+          _this4.filerobot.info(_this4.i18n('screenCaptureMicDisabledInfo'), 'error', 5000);
+        }
+        return false;
+      });
+    }
+  }, {
+    key: "startRecording",
+    value: function startRecording() {
+      var _this5 = this;
+      var options = {};
+      this.capturedMediaFile = null;
+      this.recordingChunks = [];
+      var preferredVideoMimeType = this.opts.preferredVideoMimeType;
+      this.selectVideoStreamSource().then(function (videoStream) {
+        // Attempt to use the passed preferredVideoMimeType (if any) during recording.
+        // If the browser doesn't support it, we'll fall back to the browser default instead
+        if (preferredVideoMimeType && MediaRecorder.isTypeSupported(preferredVideoMimeType) && getFileTypeExtension(preferredVideoMimeType)) {
+          options.mimeType = preferredVideoMimeType;
+        }
+
+        // prepare tracks
+        var tracks = [videoStream.getVideoTracks()[0]];
+
+        // merge audio if exits
+        if (_this5.audioStream) {
+          tracks.push(_this5.audioStream.getAudioTracks()[0]);
+        }
+
+        // create new stream from video and audio
+        _this5.outputStream = new MediaStream(tracks);
+
+        // initialize mediarecorder
+        _this5.recorder = new MediaRecorder(_this5.outputStream, options);
+
+        // push data to buffer when data available
+        _this5.recorder.addEventListener('dataavailable', function (event) {
+          _this5.recordingChunks.push(event.data);
+        });
+
+        // start recording
+        _this5.recorder.start();
+
+        // set plugin state to recording
+        _this5.setPluginCommonState({
+          recording: true
+        });
+      })["catch"](function (err) {
+        _this5.filerobot.log(err, 'error');
+      });
+    }
+  }, {
+    key: "streamInactivated",
+    value: function streamInactivated() {
+      // get screen recorder state
+      var recording = this.getPluginCommonState().recording; // recordedVideo
+
+      // commented because It is generating this bug https://scaleflexhq.atlassian.net/browse/FRA-1038
+      // TODO: delete this comment if a long time passed without issues related to this fix
+      // if (!recordedVideo && !recording) {
+      //   // Close the Explorer panel if plugin is installed
+      //   // into Explorer (could be other parent UI plugin)
+      //   if (this.parent && this.parent.hideAllPanelsAndShowAddFilesPanel) {
+      //     this.parent.hideAllPanelsAndShowAddFilesPanel()
+      //   }
+      // }
+      if (recording) {
+        // stop recorder if it is active
+        this.filerobot.log('Capture stream inactive — stop recording');
+        this.stopRecording();
+      }
+      this.videoStream = null;
+      this.audioStream = null;
+      this.setPluginCommonState({
+        streamActive: false,
+        audioStreamActive: false
+      });
+    }
+  }, {
+    key: "stopRecording",
+    value: function stopRecording() {
+      var _this6 = this;
+      var stopped = new Promise(function (resolve, reject) {
+        _this6.recorder.addEventListener('stop', function () {
+          resolve();
+        });
+        _this6.recorder.stop();
+      });
+      return stopped.then(function () {
+        // recording stopped
+        _this6.setPluginCommonState({
+          recording: false
+        });
+        // get video file after recorder stopped
+        return _this6.getVideo();
+      }).then(function (file) {
+        // store media file
+        _this6.capturedMediaFile = file;
+
+        // create object url for capture result preview
+        _this6.setPluginCommonState({
+          recordedVideo: URL.createObjectURL(file.data)
+        });
+      }).then(function () {
+        _this6.recordingChunks = null;
+        _this6.recorder = null;
+      }, function (error) {
+        _this6.recordingChunks = null;
+        _this6.recorder = null;
+        throw error;
+      });
+    }
+  }, {
+    key: "submit",
+    value: function submit() {
+      try {
+        // add recorded file to filerobot
+        if (this.capturedMediaFile) {
+          this.filerobot.addFile(this.capturedMediaFile);
+        }
+      } catch (err) {
+        // Logging the error, exept restrictions, which is handled in Core
+        if (!err.isRestriction) {
+          this.filerobot.log(err, 'error');
+        }
+      }
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      // flush video stream
+      if (this.videoStream) {
+        this.videoStream.getVideoTracks().forEach(function (track) {
+          track.stop();
+        });
+        this.videoStream.getAudioTracks().forEach(function (track) {
+          track.stop();
+        });
+        this.videoStream = null;
+      }
+
+      // flush audio stream
+      if (this.audioStream) {
+        this.audioStream.getAudioTracks().forEach(function (track) {
+          track.stop();
+        });
+        this.audioStream.getVideoTracks().forEach(function (track) {
+          track.stop();
+        });
+        this.audioStream = null;
+      }
+
+      // flush output stream
+      if (this.outputStream) {
+        this.outputStream.getAudioTracks().forEach(function (track) {
+          track.stop();
+        });
+        this.outputStream.getVideoTracks().forEach(function (track) {
+          track.stop();
+        });
+        this.outputStream = null;
+      }
+
+      // remove preview video
+      this.setPluginCommonState({
+        recordedVideo: null
+      });
+      if (this.getPluginCommonState().recording) {
+        this.setPluginCommonState({
+          recording: false
+        });
+      }
+      this.captureActive = false;
+    }
+  }, {
+    key: "getVideo",
+    value: function getVideo() {
+      var mimeType = this.recordingChunks[0].type;
+      var fileExtension = getFileTypeExtension(mimeType);
+      if (!fileExtension) {
+        return Promise.reject(new Error("Could not retrieve recording: Unsupported media type \"".concat(mimeType, "\"")));
+      }
+      var name = "screencap-".concat(Date.now(), ".").concat(fileExtension);
+      var blob = new Blob(this.recordingChunks, {
+        type: mimeType
+      });
+      var file = {
+        source: this.id,
+        name: name,
+        data: new Blob([blob], {
+          type: mimeType
+        }),
+        type: mimeType
+      };
+      return Promise.resolve(file);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      // get screen recorder state
+      var streamActive = this.getPluginCommonState().streamActive;
+      if (!streamActive && !this.captureActive && !this.userDenied) {
+        this.start();
+      }
+      return /*#__PURE__*/createElement(CaptureScreen, {
+        onStartRecording: this.startRecording,
+        onStopRecording: this.stopRecording,
+        onStop: this.stop,
+        onSubmit: this.submit,
+        i18n: this.i18n,
+        stream: this.videoStream
+      });
+    }
+  }]);
+}(Plugin);
+export { ScreenCapture as default };

package/lib/style.scss

@@ -0,0 +1,149 @@
+// packages/@scaleflex/widget-screen-capture/src/CaptureScreen.jsx
+@import '@scaleflex/widget-core/lib/_utils.scss';
+@import '@scaleflex/widget-core/lib/_variables.scss';
+
+.filerobot-ScreenCapture-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.filerobot-ScreenCapture-videoContainer {
+  width: 100%;
+  flex: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  background-color: $darkgrey;
+  text-align: center;
+  position: relative;
+
+  .filerobot-size--md & {
+    max-width: 100%;
+  }
+}
+
+.filerobot-ScreenCapture-video {
+  max-width: 100%;
+  max-height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  outline: none;
+}
+
+.filerobot-ScreenCapture-buttonContainer {
+  width: 100%;
+  height: 75px;
+  border-top: 1px solid $gray-200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  background-color: $white;
+
+  [data-filerobot-theme="dark"] & {
+    background-color: $gray-900;
+    border-top: 1px solid $gray-800;
+  }
+}
+
+.filerobot-ScreenCapture-button {
+  @include blue-border-focus;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  color: $white;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  [data-filerobot-theme="dark"] & {
+    @include blue-border-focus--dark;
+  }
+
+  .filerobot-size--md & {
+    width: 60px;
+    height: 60px;
+  }
+
+  &:hover {
+    background-color: darken($red, 5%);
+  }
+}
+
+.filerobot-ScreenCapture-button svg {
+  width: 30px;
+  height: 30px;
+  max-width: 100%;
+  max-height: 100%;
+  display: inline-block;
+  vertical-align: text-top;
+  overflow: hidden;
+  fill: currentColor;
+}
+
+.filerobot-ScreenCapture-button--submit {
+  background-color: $blue;
+  margin-left: 12px;
+
+  &:hover {
+    background-color: darken($blue, 5%);
+  }
+
+  &:disabled {
+    background-color: $gray-500;
+    cursor: default;
+  }
+
+  &:disabled:hover {
+    background-color: $gray-200;
+  }
+}
+
+.filerobot-ScreenCapture-title {
+  font-size: 22px;
+  line-height: 1.35;
+  font-weight: 400;
+  margin: 0;
+  margin-bottom: 5px;
+  padding: 0 15px;
+  max-width: 500px;
+  text-align: center;
+  color: $gray-800;
+}
+
+.filerobot-ScreenCapture-icon--stream {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 1rem;
+  z-index:1;
+
+  svg {
+    fill: $gray-500;
+  }
+}
+
+.filerobot-ScreenCapture-icon--streamActive svg {
+  animation: filerobot-ScreenCapture-icon--blink 1s cubic-bezier(0.47, 0, 0.75, 0.72) infinite;
+}
+
+  @keyframes filerobot-ScreenCapture-icon--blink {
+    0% { fill: $blue;}
+    50% { fill: $gray-500; }
+    100% { fill: $blue; }
+  }
+
+.filerobot-ScreenCapture-button--video {
+  color: $white;
+  background: $red;
+
+  &:hover {
+    background-color: darken($red, 10%);
+  }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@scaleflex/widget-screen-capture",
+  "description": "Scaleflex plugin that captures video from display or application.",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "style": "dist/style.min.css",
+  "types": "types/index.d.ts",
+  "dependencies": {
+    "@scaleflex/widget-utils": "^0.0.1"
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependencies": {
+    "@scaleflex/widget-core": "^0.0.0",
+    "@scaleflex/widget-explorer": "^0.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "/dist",
+    "/lib",
+    "/types"
+  ],
+  "gitHead": "64ea82e745b7deda36d6794863350e6671e9010d"
+}