PromucFlow_constructor/app/client/src/widgets/CameraWidget/index.ts

30 lines
898 B
TypeScript
Raw Normal View History

feat: camera widget (#8069) * feat: Camera Widget -- Scaffold the basic structure of the widget * feat: Camera Widget -- Prototype a feature, taking picture * feat: Camera Widget -- Add types for MediaRecorder -- Define media capture status and action types -- Prototype basic video recording, playing features * feat: Camera Widget -- Implement video player -- Add timer for recording and playing video -- Add permission and error handling logic -- Add device selectors * feat: Camera Widget -- Place control buttons above device inputs layer -- Make the widget fully responsive * feat: Camera Widget -- Change the color of caret-down icon to white -- Remove overlaying of web cam and video player -- Add some padding for device inputs * feat: Camera Widget -- Add black background to the container of the widget * feat: Camera Widget -- Change the widget icon * feat: Camera Widget -- Implement the mute feature of a mic or a camera * feat: Camera Widget -- Check media device permissions before getting started * feat: Camera Widget -- Add a fullscreen control * feat: Camera Widget -- Set error text color to white -- Change the layout of control panel * feat: Camera Widget -- Apply layout change for control panel according to app layout change * feat: Camera Widget -- Add a new derived property, videoURL * feat: Switch Group Widget -- Adopt theme changes * feat: Camera Widget -- Make background grey in case of both error and disabled status * feat: Camera Widget -- Update npm dependencies * feat: Camera Widget -- Fix on #8788, using muted property * feat: Camera Widget -- Show off the microphone setting icon only if the current mode is video -- Set isMirrored property to true by default * feat: Camera Widget -- Add photo viewer * feat: Camera Widget -- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture * feat: Camera Widget -- Expose meta properties for the widget * feat: Camera Widget -- Fix on responsiveness issue * feat: Camera Widget -- Add type definitions for MediaStream recording * feat: Camera Widget -- Hide isMirroed property for video mode * feat: Camera Widget -- Wrap all the controls with TooltipComponent * feat: Camera Widget -- Implement enter, exit full screen feature * feat: Camera Widget -- Add a widget icon for entity explorer * feat: Camera Widget -- Fix on the typo for the label of onRecordingStop property * feat: Camera Widget -- Enable/disable media tracks * feat: Camera Widget -- Set the video's height to 100% in fullscreen mode * feat: Camera Widget -- Add overlayers on Webcam * feat: Camera Widget -- Set position to relative on fullscreen wrapper div -- Set the photo viewer's height to 100% * feat: Camera Widget -- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged * feat: Camera Widget -- Refactor code base, eliminating commented code blocks * feat: Camera Widget -- Revert all the changes needed for keeping status when the widget is dragged -- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
import { CameraModeTypes } from "./constants";
import IconSVG from "./icon.svg";
import Widget from "./widget";
feat: camera widget (#8069) * feat: Camera Widget -- Scaffold the basic structure of the widget * feat: Camera Widget -- Prototype a feature, taking picture * feat: Camera Widget -- Add types for MediaRecorder -- Define media capture status and action types -- Prototype basic video recording, playing features * feat: Camera Widget -- Implement video player -- Add timer for recording and playing video -- Add permission and error handling logic -- Add device selectors * feat: Camera Widget -- Place control buttons above device inputs layer -- Make the widget fully responsive * feat: Camera Widget -- Change the color of caret-down icon to white -- Remove overlaying of web cam and video player -- Add some padding for device inputs * feat: Camera Widget -- Add black background to the container of the widget * feat: Camera Widget -- Change the widget icon * feat: Camera Widget -- Implement the mute feature of a mic or a camera * feat: Camera Widget -- Check media device permissions before getting started * feat: Camera Widget -- Add a fullscreen control * feat: Camera Widget -- Set error text color to white -- Change the layout of control panel * feat: Camera Widget -- Apply layout change for control panel according to app layout change * feat: Camera Widget -- Add a new derived property, videoURL * feat: Switch Group Widget -- Adopt theme changes * feat: Camera Widget -- Make background grey in case of both error and disabled status * feat: Camera Widget -- Update npm dependencies * feat: Camera Widget -- Fix on #8788, using muted property * feat: Camera Widget -- Show off the microphone setting icon only if the current mode is video -- Set isMirrored property to true by default * feat: Camera Widget -- Add photo viewer * feat: Camera Widget -- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture * feat: Camera Widget -- Expose meta properties for the widget * feat: Camera Widget -- Fix on responsiveness issue * feat: Camera Widget -- Add type definitions for MediaStream recording * feat: Camera Widget -- Hide isMirroed property for video mode * feat: Camera Widget -- Wrap all the controls with TooltipComponent * feat: Camera Widget -- Implement enter, exit full screen feature * feat: Camera Widget -- Add a widget icon for entity explorer * feat: Camera Widget -- Fix on the typo for the label of onRecordingStop property * feat: Camera Widget -- Enable/disable media tracks * feat: Camera Widget -- Set the video's height to 100% in fullscreen mode * feat: Camera Widget -- Add overlayers on Webcam * feat: Camera Widget -- Set position to relative on fullscreen wrapper div -- Set the photo viewer's height to 100% * feat: Camera Widget -- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged * feat: Camera Widget -- Refactor code base, eliminating commented code blocks * feat: Camera Widget -- Revert all the changes needed for keeping status when the widget is dragged -- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
export const CONFIG = {
type: Widget.getWidgetType(),
name: "Camera", // The display name which will be made in uppercase and show in the widgets panel ( can have spaces )
iconSVG: IconSVG,
needsMeta: true, // Defines if this widget adds any meta properties
isCanvas: false, // Defines if this widget has a canvas within in which we can drop other widgets
defaults: {
widgetName: "Camera",
rows: 33,
columns: 25,
feat: camera widget (#8069) * feat: Camera Widget -- Scaffold the basic structure of the widget * feat: Camera Widget -- Prototype a feature, taking picture * feat: Camera Widget -- Add types for MediaRecorder -- Define media capture status and action types -- Prototype basic video recording, playing features * feat: Camera Widget -- Implement video player -- Add timer for recording and playing video -- Add permission and error handling logic -- Add device selectors * feat: Camera Widget -- Place control buttons above device inputs layer -- Make the widget fully responsive * feat: Camera Widget -- Change the color of caret-down icon to white -- Remove overlaying of web cam and video player -- Add some padding for device inputs * feat: Camera Widget -- Add black background to the container of the widget * feat: Camera Widget -- Change the widget icon * feat: Camera Widget -- Implement the mute feature of a mic or a camera * feat: Camera Widget -- Check media device permissions before getting started * feat: Camera Widget -- Add a fullscreen control * feat: Camera Widget -- Set error text color to white -- Change the layout of control panel * feat: Camera Widget -- Apply layout change for control panel according to app layout change * feat: Camera Widget -- Add a new derived property, videoURL * feat: Switch Group Widget -- Adopt theme changes * feat: Camera Widget -- Make background grey in case of both error and disabled status * feat: Camera Widget -- Update npm dependencies * feat: Camera Widget -- Fix on #8788, using muted property * feat: Camera Widget -- Show off the microphone setting icon only if the current mode is video -- Set isMirrored property to true by default * feat: Camera Widget -- Add photo viewer * feat: Camera Widget -- Add onImageCapture, onRecordingStart, onRecordingStop actions instead of onMediaCapture * feat: Camera Widget -- Expose meta properties for the widget * feat: Camera Widget -- Fix on responsiveness issue * feat: Camera Widget -- Add type definitions for MediaStream recording * feat: Camera Widget -- Hide isMirroed property for video mode * feat: Camera Widget -- Wrap all the controls with TooltipComponent * feat: Camera Widget -- Implement enter, exit full screen feature * feat: Camera Widget -- Add a widget icon for entity explorer * feat: Camera Widget -- Fix on the typo for the label of onRecordingStop property * feat: Camera Widget -- Enable/disable media tracks * feat: Camera Widget -- Set the video's height to 100% in fullscreen mode * feat: Camera Widget -- Add overlayers on Webcam * feat: Camera Widget -- Set position to relative on fullscreen wrapper div -- Set the photo viewer's height to 100% * feat: Camera Widget -- Add image, mediaCaptureStatus, timer meta properties to keep UI states when the widget is dragged * feat: Camera Widget -- Refactor code base, eliminating commented code blocks * feat: Camera Widget -- Revert all the changes needed for keeping status when the widget is dragged -- Set mirroed property to false for video mode
2021-12-24 14:06:59 +00:00
mode: CameraModeTypes.CAMERA,
isDisabled: false,
isVisible: true,
isMirrored: true,
version: 1,
},
properties: {
derived: Widget.getDerivedPropertiesMap(),
default: Widget.getDefaultPropertiesMap(),
meta: Widget.getMetaPropertiesMap(),
config: Widget.getPropertyPaneConfig(),
},
};
export default Widget;