<commit_before>var formatItemStyle = {
  fontSize: '0.95em',
  marginTop: '10px',
  maxHeight: '220px'
}, formatItemImgStyle = {
  maxWidth: '100%',
  maxHeight: '100%',
  display: 'block',
  marginLeft: 'auto',
  marginRight: 'auto',
  marginTop: '5px',
}, formatHeaderStyle = {
  fontWeight: 'bold',
  marginBottom: '5px'
}, formatSubheaderStyle = {
  marginBottom: '10px',
  fontSize: '0.9em'
}, formatItemDescriptionStyle = {
  color: '#444',
  marginBottom: '5px',
  fontSize: '0.9em',
}, formatItemMetadataStyle = {
  color: '#444',
  marginBottom: '5px',
  fontSize: '0.9em',
}, formatItemCostStyle = {
  float: 'right'
};

var FormatItem = React.createClass({
  propTypes: {
    metadata: React.PropTypes.object,
    name: React.PropTypes.string,
    amount: React.PropTypes.double,
  },
  render: function() {
    return (
      <div className="row-fluid" style={formatItemStyle}>
        <div className="span4">
          <img src={this.props.metadata.thumbnail} alt={'Photo for ' + this.props.metadata.title} style={formatItemImgStyle} />
        </div>
        <div className="span8">
          <h4 style={formatHeaderStyle}>{this.props.metadata.title}</h4>
          <div style={formatSubheaderStyle}>
            <div style={formatItemCostStyle}><CreditAmount amount={this.props.amount} isEstimate={true}/></div>
            <WatchLink streamName={this.props.name} />
            &nbsp;&nbsp;&nbsp;
            <DownloadLink streamName={this.props.name} />
          </div>
          <p style={formatItemDescriptionStyle}>{this.props.metadata.description}</p>
          <div>
            <span style={formatItemMetadataStyle}>Author: {this.props.metadata.author}</span><br />
            <span style={formatItemMetadataStyle}>Language: {this.props.metadata.language}</span><br />
            <span style={formatItemMetadataStyle}>License: {this.props.metadata.license}</span><br />
          </div>
        </div>
      </div>
      );
  }
});

var FormatsSection = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
  },
  getInitialState: function() {
    return {
      metadata: null,
      amount: 0.0,
    };
  },
  componentWillMount: function() {
    lbry.resolveName(this.props.name, (metadata) => {
      this.setState({
        metadata: metadata,
      })
    });
    lbry.search(this.props.name, (results) => {
      this.setState({
        amount: (results ? results[0].cost_est : 0.0)
      });
    });
  },
  render: function() {
    if (this.state.metadata == null) {
      // Still waiting for metadata
      return null;
    }

    var format = this.state.metadata;

    return (
      <div>
        <h1>{this.props.name}</h1>
      {/* In future, anticipate multiple formats, just a guess at what it could look like
      // var formats = metadata.formats
      // return (<tbody>{formats.map(function(format,i){ */}
          <FormatItem metadata={format} amount={this.state.amount} name={this.props.name}/>
      {/*  })}</tbody>); */}
      </div>);
  }
});

var DetailPage = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
  },
  render: function() {<commit_msg>Design audit, need to add entry to show file type<commit_after>var formatItemStyle = {
  fontSize: '0.95em',
  marginTop: '10px',
  maxHeight: '220px'
}, formatItemImgStyle = {
  maxWidth: '100%',
  maxHeight: '100%',
  display: 'block',
  marginLeft: 'auto',
  marginRight: 'auto',
  marginTop: '5px',
}, formatHeaderStyle = {
  fontWeight: 'bold',
  marginBottom: '5px'
}, formatSubheaderStyle = {
  marginBottom: '10px',
  fontSize: '0.9em'
}, formatItemDescriptionStyle = {
  color: '#444',
  marginBottom: '5px',
  fontSize: '1.2em',
}, formatItemMetadataStyle = {
  color: '#444',
  marginBottom: '5px',
  fontSize: '0.9em',
}, formatItemCostStyle = {
  float: 'right'
};

var FormatItem = React.createClass({
  propTypes: {
    metadata: React.PropTypes.object,
    name: React.PropTypes.string,
    amount: React.PropTypes.double,
  },
  render: function() {
    return (
      <div className="row-fluid" style={formatItemStyle}>
        <div className="span4">
          <img src={this.props.metadata.thumbnail} alt={'Photo for ' + this.props.metadata.title} style={formatItemImgStyle} />
        </div>
        <div className="span8">
          <h4 style={formatItemMetadataStyle}><b>Address:</b> {this.props.name}</h4>
          <div style={formatSubheaderStyle}>
            <div style={formatItemCostStyle}><CreditAmount amount={this.props.amount} isEstimate={true}/></div>
            <WatchLink streamName={this.props.name} />
            &nbsp;&nbsp;&nbsp;
            <DownloadLink streamName={this.props.name} />
          </div>
          <p style={formatItemDescriptionStyle}>{this.props.metadata.description}</p>
          <div>
            <span style={formatItemMetadataStyle}><b>Author:</b> {this.props.metadata.author}</span><br />
            <span style={formatItemMetadataStyle}><b>Language:</b> {this.props.metadata.language}</span><br />
            <span style={formatItemMetadataStyle}><b>License:</b> {this.props.metadata.license}</span><br />
          </div>
        </div>
      </div>
      );
  }
});

var FormatsSection = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
  },
  getInitialState: function() {
    return {
      metadata: null,
      amount: 0.0,
    };
  },
  componentWillMount: function() {
    lbry.resolveName(this.props.name, (metadata) => {
      this.setState({
        metadata: metadata,
      })
    });
    lbry.search(this.props.name, (results) => {
      this.setState({
        amount: (results ? results[0].cost_est : 0.0)
      });
    });
  },
  render: function() {
    if (this.state.metadata == null) {
      // Still waiting for metadata
      return null;
    }

    var format = this.state.metadata;

    return (
      <div>
        <h1 style={formatHeaderStyle}>{this.state.metadata.title}</h1>
      {/* In future, anticipate multiple formats, just a guess at what it could look like
      // var formats = metadata.formats
      // return (<tbody>{formats.map(function(format,i){ */}
          <FormatItem metadata={format} amount={this.state.amount} name={this.props.name}/>
      {/*  })}</tbody>); */}
      </div>);
  }
});

var DetailPage = React.createClass({
  propTypes: {
    name: React.PropTypes.string,
  },
  render: function() {
{'fraction_non_alphanumeric': 0.16559611467961774, 'fraction_numerical': 0.013473288422371926, 'mean_word_length': 2.864406779661017, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 87, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '713995', 'n_tokens_mistral': 2062, 'n_tokens_neox': 2021, 'n_words': 373}