Advertisement
quantumSkill

Untitled

Jul 6th, 2022
1,060
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  <StickerDragAndDropHandler>
  2.         <>
  3.           <div
  4.             className={mergeClasses(classNames.recorderStep, disableWebGL && classNames.webGlDisabled)}
  5.             ref={this.recorderStepContainer}
  6.           >
  7.             <div className={classNames.canvasWrapper}>
  8.               {!this.state.mediaStream && !this.state.recorderError && (
  9.                 <div className={classNames.recorderInfo}>{t('recorderStep.loading')}</div>
  10.               )}
  11.  
  12.               {this.state.recorderError && (
  13.                 <div className={classNames.recorderInfo}>{t('recorderStep.refreshPage')}</div>
  14.               )}
  15.  
  16.               <VideoElement canvasScale={elementResizer.scale} mediaStream={this.state.mediaStream} />
  17.  
  18.               {!this.props.disableWebGL && (
  19.                 <div className={mergeClasses(classNames.canvasWrapper, classNames.innerWrapper)}>
  20.                   <FabricCanvas
  21.                     hoistFabricCanvas={(fabricCanvas: fabric.Canvas) => this.setState({ fabricCanvas })}
  22.                     elementResizer={elementResizer}
  23.                   />
  24.                   <BabylonCanvas
  25.                     canvasScale={elementResizer.scale}
  26.                     // eslint-disable-next-line react/no-unused-state
  27.                     hoistBabylonCanvas={(babylonCanvas: HTMLCanvasElement) => this.setState({ babylonCanvas })}
  28.                     fabricCanvas={this.state.fabricCanvas}
  29.                   />
  30.                   <div
  31.                     style={{
  32.                       width: '1280px',
  33.                       height: '720px',
  34.                       position: 'absolute',
  35.                       left: '50%',
  36.                       pointerEvents: 'none',
  37.                       top: '50%',
  38.                       transform: `translate(-50%, -50%) scale(${elementResizer.scale})`,
  39.                     }}
  40.                   >
  41.                     <div
  42.                       style={{
  43.                         width: '30%',
  44.                         height: '4px',
  45.                         position: 'absolute',
  46.                         backgroundColor: 'white',
  47.                         left: '0',
  48.                         bottom: '0',
  49.                       }}
  50.                     >put me in here pls</div>
  51.                   </div>
  52.                 </div>
  53.               )}
  54.               {!state.matches(RecorderStages.SETUP) && (
  55.                 <VideoTimer style={{ top: `calc(48.5% - ${elementResizer.height / 2 + timerTopMargin}px)` }} />
  56.               )}
  57.             </div>
  58.  
  59.             {state.matches(RecorderStages.COUNTING_DOWN) && <CountdownTimer />}
  60.  
  61.             {/*
  62.           // TrashAnimation isn't TS yet and connect() is complaining here
  63.           // @ts-ignore */}
  64.             {trashAnimation && <TrashAnimation />}
  65.           </div>
  66.         </>
  67.       </StickerDragAndDropHandler>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement