{"size": 1353, "ext": "js", "max_stars_repo_path": "src/components/RoomInfo.js", "max_stars_repo_name": "vulongphan/auxify-frontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/RoomInfo.js", "max_issues_repo_name": "vulongphan/auxify-frontend", "max_issues_repo_issues_event_min_datetime": "2021-01-25T22:13:42.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-03T17:22:16.000Z", "max_forks_repo_path": "src/components/RoomInfo.js", "max_forks_repo_name": "vulongphan/auxify-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 28.7872340426, "max_line_length": 84, "alphanum_fraction": 0.4427198817}
import React from 'react';

class RoomInfo extends React.Component {
    render() {
        const hostInfo = this.props.hostInfo;
        return (
            <div className="room-info media text_style highlight">
                <div className="media__img">
                    <img alt="" src={hostInfo.profileImage} />
                </div>
                <div className="media__bd">
                    <div className="room_header">
                        <span id = "room_id" >
                            Room ID: {this.props.room_id}
                        </span>
                    </div>
                    <div className="host">
                        <p>Hosted by: {hostInfo.name}</p>
                    </div>
                </div>
                <DefaultPlaylist playlist={this.props.playlist} />
            </div>
        )
    }
}

const DefaultPlaylist = (props) => {
    const playlist = props.playlist;
    if (playlist) {
        return (
            <div className="display-playlist">
                <span>
                    <span>Playlist: </span>
                    <span className="display-playlist__name"> {playlist.name}</span>
                </span>
            </div>
        )
    }
    else {
        return (
            <div className="display-playlist"></div>
        )
    }
}


export default RoomInfo;