Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <StickerDragAndDropHandler>
- <>
- <div
- className={mergeClasses(classNames.recorderStep, disableWebGL && classNames.webGlDisabled)}
- ref={this.recorderStepContainer}
- >
- <div className={classNames.canvasWrapper}>
- {!this.state.mediaStream && !this.state.recorderError && (
- <div className={classNames.recorderInfo}>{t('recorderStep.loading')}</div>
- )}
- {this.state.recorderError && (
- <div className={classNames.recorderInfo}>{t('recorderStep.refreshPage')}</div>
- )}
- <VideoElement canvasScale={elementResizer.scale} mediaStream={this.state.mediaStream} />
- {!this.props.disableWebGL && (
- <div className={mergeClasses(classNames.canvasWrapper, classNames.innerWrapper)}>
- <FabricCanvas
- hoistFabricCanvas={(fabricCanvas: fabric.Canvas) => this.setState({ fabricCanvas })}
- elementResizer={elementResizer}
- />
- <BabylonCanvas
- canvasScale={elementResizer.scale}
- // eslint-disable-next-line react/no-unused-state
- hoistBabylonCanvas={(babylonCanvas: HTMLCanvasElement) => this.setState({ babylonCanvas })}
- fabricCanvas={this.state.fabricCanvas}
- />
- <div
- style={{
- width: '1280px',
- height: '720px',
- position: 'absolute',
- left: '50%',
- pointerEvents: 'none',
- top: '50%',
- transform: `translate(-50%, -50%) scale(${elementResizer.scale})`,
- }}
- >
- <div
- style={{
- width: '30%',
- height: '4px',
- position: 'absolute',
- backgroundColor: 'white',
- left: '0',
- bottom: '0',
- }}
- >put me in here pls</div>
- </div>
- </div>
- )}
- {!state.matches(RecorderStages.SETUP) && (
- <VideoTimer style={{ top: `calc(48.5% - ${elementResizer.height / 2 + timerTopMargin}px)` }} />
- )}
- </div>
- {state.matches(RecorderStages.COUNTING_DOWN) && <CountdownTimer />}
- {/*
- // TrashAnimation isn't TS yet and connect() is complaining here
- // @ts-ignore */}
- {trashAnimation && <TrashAnimation />}
- </div>
- </>
- </StickerDragAndDropHandler>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement