{"size": 682, "ext": "js", "max_stars_repo_path": "frontend/app/components/Session/IOSPlayer/ScreenWithLoaders.js", "max_stars_repo_name": "nogamenofun98/openreplay", "max_stars_repo_stars_event_min_datetime": "2021-05-22T08:23:31.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T19:46:01.000Z", "max_issues_repo_path": "frontend/app/components/Session/IOSPlayer/ScreenWithLoaders.js", "max_issues_repo_name": "tares003/openreplay", "max_issues_repo_issues_event_min_datetime": "2021-05-25T14:49:35.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-30T22:15:28.000Z", "max_forks_repo_path": "frontend/app/components/Session/IOSPlayer/ScreenWithLoaders.js", "max_forks_repo_name": "tares003/openreplay", "max_forks_repo_forks_event_min_datetime": "2021-05-22T07:57:17.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-29T00:37:31.000Z"}
{"max_stars_count": 3614, "max_issues_count": 245, "max_forks_count": 151, "avg_line_length": 26.2307692308, "max_line_length": 84, "alphanum_fraction": 0.6143695015}
import { observer } from 'mobx-react-lite';
import cn from 'classnames';

import { Loader, CircularLoader } from 'UI';


function ScreenWithLoaders({ player, screenId, className }) {
	return (
		<div className={ className } id={screenId}>
      <div className={ 
        cn("absolute inset-0", { 
          "opacity-75 bg-gray-light": player.loading || player.buffering, 
          "bg-transparent": !(player.loading || player.buffering),
        })}
      >
        <Loader loading={ player.loading }>
          <CircularLoader loading={ player.buffering } inline={false} size="large"/>
        </Loader>
      </div>
    </div>
	);
}


export default observer(ScreenWithLoaders);
