react/components/AssetInfo/index.js

@@ -1,12 +1,173 @@
 import React from 'react';
 
-const AssetTitle = ({claimId}) => {
-  return (
-    <div>
-      <p>Show asset info here</p>
-      <p>claimId: {claimId}</p>
-    </div>
-  );
+class AssetInfo extends React.Component {
+  constructor (props) {
+    super(props);
+    this.toggleSection = this.toggleSection.bind(this);
+    this.copyToClipboard = this.copyToClipboard.bind(this);
+  }
+  toggleSection (event) {
+    var dataSet = event.target.dataset;
+    var status = dataSet.status;
+    var toggle = document.getElementById('show-details-toggle');
+    var details = document.getElementById('show-details');
+    if (status === 'closed') {
+      details.hidden = false;
+      toggle.innerText = '[less]';
+      toggle.dataset.status = 'open';
+    } else {
+      details.hidden = true;
+      toggle.innerText = '[more]';
+      toggle.dataset.status = 'closed';
+    }
+  }
+  copyToClipboard (event) {
+    var elementToCopy = event.target.dataset.elementtocopy;
+    var element = document.getElementById(elementToCopy);
+    element.select();
+    try {
+      document.execCommand('copy');
+    } catch (err) {
+      this.setState({error: 'Oops, unable to copy'});
+    }
+  }
+  render () {
+    return (
+      <div>
+        {this.props.channelName &&
+        <div className="row row--padded row--wide row--no-top">
+          <div className="column column--2 column--med-10">
+            <span className="text">Channel:</span>
+          </div>
+          <div className="column column--8 column--med-10">
+            <span className="text"><a href={`/${this.props.channelName}:${this.props.certificateId}`}>{this.props.channelName}</a></span>
+          </div>
+        </div>
+        }
+
+        {this.props.description &&
+        <div className="row row--padded row--wide row--no-top">
+          <span className="text">{this.props.description}</span>
+        </div>
+        }
+
+        <div className="row row--padded row--wide row--no-top">
+          <div id="show-short-link">
+            <div className="column column--2 column--med-10">
+              <a className="link--primary" href={`/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}><span
+                className="text">Link:</span></a>
+            </div>
+            <div className="column column--8 column--med-10">
+              <div className="row row--short row--wide">
+                <div className="column column--7">
+                  <div className="input-error" id="input-error-copy-short-link" hidden="true">error here</div>
+                  <input type="text" id="short-link" className="input-disabled input-text--full-width" readOnly
+                         spellCheck="false"
+                         value={`${this.props.host}/${this.props.shortId}/${this.props.name}.${this.props.fileExt}`}
+                         onClick={this.select}/>
+                </div>
+                <div className="column column--1"> </div>
+                <div className="column column--2">
+                  <button className="button--primary" data-elementtocopy="short-link"
+                          onClick={this.copyToClipboard}>copy
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="show-embed-code">
+            <div className="column column--2 column--med-10">
+              <span className="text">Embed:</span>
+            </div>
+            <div className="column column--8 column--med-10">
+              <div className="row row--short row--wide">
+                <div className="column column--7">
+                  <div className="input-error" id="input-error-copy-embed-text" hidden="true">error here</div>
+                  {(this.props.contentType === 'video/mp4') ? (
+                    <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
+                           onClick={this.select} spellCheck="false"
+                           value={`<video width="100%" controls poster="${this.props.thumbnail}" src="${this.props.host}/{claimInfo.claimId}/${this.props.name}.${this.props.fileExt}"/></video>`}/>
+                  ) : (
+                    <input type="text" id="embed-text" className="input-disabled input-text--full-width" readOnly
+                           onClick={this.select} spellCheck="false"
+                           value={`<img src="${this.props.host}/${this.props.claimId}/${this.props.name}.${this.props.fileExt}"/>`}
+                    />
+                  )}
+                </div>
+                <div className="column column--1"> </div>
+                <div className="column column--2">
+                  <button className="button--primary" data-elementtocopy="embed-text"
+                          onClick={this.copyToClipboard}>copy
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="show-share-buttons">
+          <div className="row row--padded row--wide row--no-top">
+            <div className="column column--2 column--med-10">
+              <span className="text">Share:</span>
+            </div>
+            <div className="column column--7 column--med-10">
+              <div
+                className="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
+                <a className="link--primary" target="_blank"
+                   href={`https://twitter.com/intent/tweet?text=${this.props.host}/${this.props.shortId}/${this.props.name}`}>twitter</a>
+                <a className="link--primary" target="_blank"
+                   href={`https://www.facebook.com/sharer/sharer.php?u=${this.props.host}/${this.props.shortId}/${this.props.name}`}>facebook</a>
+                <a className="link--primary" target="_blank"
+                   href={`http://tumblr.com/widgets/share/tool?canonicalUrl=${this.props.host}/${this.props.shortId}/${this.props.name}`}>tumblr</a>
+                <a className="link--primary" target="_blank"
+                   href={`https://www.reddit.com/submit?url=${this.props.host}/${this.props.shortId}/${this.props.name}&title=${this.props.name}`}>reddit</a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="show-details" className="row--padded row--wide row--no-top" hidden="true">
+          <div id="show-claim-name">
+            <div className="column column--2 column--med-10">
+              <span className="text">Claim Name:</span>
+            </div>
+            <div className="column column--8 column--med-10">
+              {this.props.name}
+            </div>
+          </div>
+          <div id="show-claim-id">
+            <div className="column column--2 column--med-10">
+              <span className="text">Claim Id:</span>
+            </div>
+            <div className="column column--8 column--med-10">
+              {this.props.claimId}
+            </div>
+          </div>
+          <div id="show-claim-id">
+            <div className="column column--2 column--med-10">
+              <span className="text">File Type:</span>
+            </div>
+            <div className="column column--8 column--med-10">
+              {this.props.contentType ? `${this.props.contentType}` : 'unknown'}
+            </div>
+          </div>
+          <div id="show-claim-id">
+            <div className="column column--10">
+              <a target="_blank" href="https://lbry.io/dmca">Report</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="row row--wide">
+          <a className="text link--primary" id="show-details-toggle" href="#" onClick={this.toggleSection}
+             data-status="closed">[more]</a>
+        </div>
+      </div>
+    );
+  }
 };
 
-export default AssetTitle;
+// required props
+// {channelName, certificateId, description, shortId, name, fileExt, claimId, contentType, thumbnail, host}
+
+export default AssetInfo;

react/components/ChannelClaimsDisplay/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import NavBar from 'containers/NavBar';
 import AssetPreview from 'components/AssetPreview';
 import request from 'utils/request';