lbry-desktop/ui/js/page/filePage/view.jsx

import React from 'react';
import lbry from 'lbry.js';
import lighthouse from 'lighthouse.js';
import lbryuri from 'lbryuri.js';
import Video from 'component/video'
import {
  TruncatedText,
  Thumbnail,
  BusyMessage,
} from 'component/common';
import FilePrice from 'component/filePrice'
import FileActions from 'component/fileActions';
import Link from 'component/link';
import UriIndicator from 'component/uriIndicator';

const FormatItem = (props) => {
  const {
    contentType,
    metadata: {
      author,
      language,
      license,
    }
  } = props

  const mediaType = lbry.getMediaType(contentType);

  return (
    <table className="table-standard">
      <tbody>
        <tr>
          <td>Content-Type</td><td>{mediaType}</td>
        </tr>
        <tr>
          <td>Author</td><td>{author}</td>
        </tr>
        <tr>
          <td>Language</td><td>{language}</td>
        </tr>
        <tr>
          <td>License</td><td>{license}</td>
        </tr>
      </tbody>
    </table>
  )
}

const FilePage = (props) => {
  const {
    claim,
    navigate,
    claim: {
      txid,
      nout,
      has_signature: hasSignature,
      signature_is_valid: signatureIsValid,
      value,
      value: {
        stream,
        stream: {
          metadata,
          source,
          metadata: {
            title,
          } = {},
          source: {
            contentType,
          } = {},
        } = {},
      } = {},
    },
    uri,
    isDownloaded,
    fileInfo,
    costInfo,
    costInfo: {
      cost,
      includesData: costIncludesData,
    } = {},
  } = props

  const outpoint = txid + ':' + nout;
  const uriLookupComplete = !!claim && Object.keys(claim).length

  const channelUriObj = lbryuri.parse(uri)
  delete channelUriObj.path;
  delete channelUriObj.contentName;
  const channelUri = signatureIsValid && hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null;
  const uriIndicator = <UriIndicator uri={uri} />

  return (
    <main className="main--single-column">
      <section className="show-page-media">
        { contentType && contentType.startsWith('video/') ?
          <Video className="video-embedded" uri={uri} metadata={metadata} outpoint={outpoint} /> :
          (Object.keys(metadata).length > 0 ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
      </section>
      <section className="card">
        <div className="card__inner">
          <div className="card__title-identity">
            {isDownloaded === false
              ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} /></span>
              : null}
            <h1>{title}</h1>
            <div className="card__subtitle">
              { channelUri ?
                <Link href={"?show=" + channelUri }>{uriIndicator}</Link> :
                uriIndicator}
           </div>
            <div className="card__actions">
              <FileActions uri={uri} /></div>
          </div>
          <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
            {metadata.description}
          </div>
        </div>
        { metadata ?
          <div className="card__content">
            <FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint} costIncludesData={costIncludesData}  />
          </div> : '' }
        <div className="card__content">
          <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
        </div>
      </section>
    </main>
  )
}

export default FilePage;