import React from 'react' ; import { observer } from 'mobx-react' ; import { player , editor } from '../core' ; import { Group } from './group' ; export interface Props { width : number ; height : number ; } @ observer export class LoopOverlay extends React . Component < Props > { render ( ) { const { width , height } = this . props ; const startX = ( width / editor . totalSixteenths ) * player . loopStart - 1 ; const endX = ( width / editor . totalSixteenths ) * player . loopEnd - 1 ; const loopOverlayStyle = { pointerEvents : 'none' as 'none' , } ; return ( < Group > < rect key = "loop-border-left" x = { 0 } y = { 0 } height = { height } width = { Math . max ( startX , 0 ) } fill = { 'black' } fillOpacity = { 0.1 } style = { loopOverlayStyle } / > < rect key = "loop-border-right" x = { endX } y = { 0 } height = { height } width = { Math . max ( width - endX , 0 ) } fill = { 'black' } fillOpacity = { 0.1 } style = { loopOverlayStyle } / > < /Group>); } }