Switch TruncatedText component to use clamp.js

dist/index.html

@@ -23,6 +23,7 @@
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/Clamp.js/0.5.1/clamp.min.js"></script>
       <script src="./js/mediaelement/jquery.js"></script>
       <script src="./js/mediaelement/mediaelement-and-player.min.js"></script>
       <script src="./js/lbry.js?i=0"></script>

js/component/common.js

@@ -13,17 +13,27 @@ var Icon = React.createClass({
 
 var TruncatedText = React.createClass({
   propTypes: {
-    limit: React.PropTypes.number,
+    lines: React.PropTypes.number,
+    height: React.PropTypes.string,
+    auto: React.PropTypes.bool,
   },
   getDefaultProps: function() {
     return {
-      limit: 250,
+      lines: null,
+      height: null,
+      auto: true,
     }
   },
+  componentDidMount: function() {
+    console.log('span is', this.refs.span);
+    console.log('type of lines is', typeof this.props.lines)
+    $clamp(this.refs.span, {
+      clamp: this.props.lines || this.props.height || 'auto',
+    });
+  },
   render: function() {
     var text = this.props.children;
-    var limit = this.props.limit;
-    return <span>{text.slice(0, limit) + (text.length > limit ? ' ...' : '')}</span>;
+    return <span ref="span">{text}</span>;
   }
 });
 

js/page/discover.js

@@ -122,7 +122,7 @@ var SearchResultRow = React.createClass({
             <div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
             <h3 style={titleStyle}>
               <a href={'/?show=' + this.props.name}>
-                <TruncatedText {...this.props.compact ? {limit: 50} : {}}>
+                <TruncatedText lines={3}>
                   {this.props.title}
                 </TruncatedText>
               </a>
@@ -132,7 +132,7 @@ var SearchResultRow = React.createClass({
               <DownloadLink streamName={this.props.name} button="text" />
             </div>
             <p style={searchRowDescriptionStyle}>
-              <TruncatedText {... this.props.compact ? {limit: 123} : {}}>
+              <TruncatedText lines={3}>
                 {this.props.description}
               </TruncatedText>
             </p>