{"size": 1516, "ext": "js", "max_stars_repo_path": "src/components/MenuBar/FullscreenButton.js", "max_stars_repo_name": "JohannC/react-web-media-player", "max_stars_repo_stars_event_min_datetime": "2019-03-22T09:07:13.000Z", "max_stars_repo_stars_event_max_datetime": "2019-10-20T16:08:33.000Z", "max_issues_repo_path": "src/components/MenuBar/FullscreenButton.js", "max_issues_repo_name": "JohannC/react-web-media-player", "max_issues_repo_issues_event_min_datetime": "2020-05-15T10:29:06.000Z", "max_issues_repo_issues_event_max_datetime": "2021-06-20T12:40:54.000Z", "max_forks_repo_path": "src/components/MenuBar/FullscreenButton.js", "max_forks_repo_name": "JohannC/react-web-media-player", "max_forks_repo_forks_event_min_datetime": "2019-03-22T09:32:36.000Z", "max_forks_repo_forks_event_max_datetime": "2019-09-04T14:11:45.000Z"}
{"max_stars_count": 19, "max_issues_count": 6, "max_forks_count": 5, "avg_line_length": 32.9565217391, "max_line_length": 147, "alphanum_fraction": 0.6233509235}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import './Button.css';

const fullscreenLogo =
    <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 24 24" className="fullscreen-logo">
        <path d="M0 0h24v24H0z" fill="none" />
        <path className="wmp-tool-button-logo" fill="#e4e5e8" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
    </svg>

const fullscreenExitLogo =
    <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 24 24" className="fullscreen-exit-logo">
        <path d="M0 0h24v24H0z" fill="none" />
        <path className="wmp-tool-button-logo" fill="#e4e5e8" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
    </svg>

class FullscreenButton extends Component {

    handleClick = (e) => {
        e.stopPropagation();
        this.props.dispatch({ type: 'SWITCH_FULLSCREEN_STATE' });
        this.props.dispatch({ type: 'USER_ACTIVE' });
    }

    render = () => {
        let button;
        if (this.props.isFullscreen)
            button = fullscreenExitLogo;
        else
            button = fullscreenLogo;

        return (
            <div className="wmp-tool-button" onClick={this.handleClick}>
                {button}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        isFullscreen: state.isFullscreen
    };
};

export default connect(mapStateToProps)(FullscreenButton);