more bug fixes and bugs

ui/js/actions/content.js

@@ -47,8 +47,6 @@ export function doResolveUri(uri) {
           certificate,
         }
       })
-
-      dispatch(doFetchCostInfoForUri(uri))
     })
   }
 }

ui/js/actions/cost_info.js

@@ -26,7 +26,7 @@ export function doFetchCostInfoForUri(uri) {
         type: types.FETCH_COST_INFO_COMPLETED,
         data: {
           uri,
-          costInfo: {}
+          costInfo: null
         }
       })
     })

ui/js/component/filePrice/index.js

@@ -2,6 +2,9 @@ import React from 'react'
 import {
   connect,
 } from 'react-redux'
+import {
+  doFetchCostInfoForUri,
+} from 'actions/cost_info'
 import {
   makeSelectCostInfoForUri,
 } from 'selectors/cost_info'
@@ -17,6 +20,7 @@ const makeSelect = () => {
 }
 
 const perform = (dispatch) => ({
+  fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri))
 })
 
 export default connect(makeSelect, perform)(FilePrice)

ui/js/component/filePrice/view.jsx

@@ -3,19 +3,41 @@ import {
   CreditAmount,
 } from 'component/common'
 
-const FilePrice = (props) => {
+class FilePrice extends React.Component{
-  const {
+  componentWillMount() {
-    costInfo,
+    this.fetchCost(this.props)
-    look = 'indicator',
-  } = props
-
-  const isEstimate = costInfo ? !costInfo.includesData : null
-
-  if (!costInfo) {
-    return <span className={`credit-amount credit-amount--${look}`}>???</span>;
   }
 
-  return <CreditAmount label={false} amount={costInfo.cost} isEstimate={isEstimate} showFree={true} />
+  componentWillReceiveProps(nextProps) {
+    this.fetchCost(nextProps)
+  }
+
+  fetchCost(props) {
+    const {
+      costInfo,
+      fetchCostInfo,
+      uri
+    } = props
+
+    if (costInfo === undefined) {
+      fetchCostInfo(uri)
+    }
+  }
+
+  render() {
+    const {
+      costInfo,
+      look = 'indicator',
+    } = this.props
+
+    const isEstimate = costInfo ? !costInfo.includesData : null
+
+    if (!costInfo) {
+      return <span className={`credit-amount credit-amount--${look}`}>???</span>;
+    }
+
+    return <CreditAmount label={false} amount={costInfo.cost} isEstimate={isEstimate} showFree={true} />
+  }
 }
 
 export default FilePrice

ui/js/component/video/view.jsx

@@ -32,9 +32,12 @@ class WatchLink extends React.Component {
       fileInfo,
     } = this.props
 
+    console.log('watch link render')
+    console.log(fileInfo)
+
     return (<div>
       <Link button={ button ? button : null }
-            disabled={isLoading || costInfo.cost == undefined || fileInfo === undefined}
+            disabled={isLoading || !costInfo || costInfo.cost == undefined || fileInfo === undefined}
             label={label ? label : ""}
             className="video__play-button"
             icon="icon-play"

ui/js/lbryio.js

@@ -14,8 +14,11 @@ const CONNECTION_STRING =  'https://api.lbry.io/';
 const EXCHANGE_RATE_TIMEOUT = 20 * 60 * 1000;
 
 lbryio.getExchangeRates = function() {
+  const cached = getSession('exchangeRateCache');
+  if (!cached || Date.now() - cached.time > EXCHANGE_RATE_TIMEOUT) {
+
+  }
   return new Promise((resolve, reject) => {
-    const cached = getSession('exchangeRateCache');
     if (!cached || Date.now() - cached.time > EXCHANGE_RATE_TIMEOUT) {
       lbryio.call('lbc', 'exchange_rate', {}, 'get', true).then(({lbc_usd, lbc_btc, btc_usd}) => {
         const rates = {lbc_usd, lbc_btc, btc_usd};

ui/js/page/filePage/index.js

@@ -2,6 +2,9 @@ import React from 'react'
 import {
   connect
 } from 'react-redux'
+import {
+  doFetchCurrentUriFileInfo
+} from 'actions/file_info'
 import {
   selectCurrentUri,
 } from 'selectors/app'
@@ -26,6 +29,7 @@ const select = (state) => ({
 })
 
 const perform = (dispatch) => ({
+  fetchFileInfo: () => dispatch(doFetchCurrentUriFileInfo())
 })
 
 export default connect(select, perform)(FilePage)

ui/js/page/filePage/view.jsx

@@ -45,87 +45,105 @@ const FormatItem = (props) => {
   )
 }
 
-const FilePage = (props) => {
+class FilePage extends React.Component{
-  const {
+
-    claim,
+  componentWillMount() {
-    navigate,
+    this.fetchFileInfo(this.props)
-    claim: {
+  }
-      txid,
+
-      nout,
+  componentWillReceiveProps(nextProps) {
-      has_signature: hasSignature,
+    this.fetchFileInfo(nextProps)
-      signature_is_valid: signatureIsValid,
+  }
-      value,
+
-      value: {
+  fetchFileInfo(props) {
-        stream,
+    if (!props.fileInfo) {
-        stream: {
+      console.log('fetch file info')
-          metadata,
+      props.fetchFileInfo()
-          source,
+    }
-          metadata: {
+  }
-            title,
+
-          } = {},
+  render() {
-          source: {
+    const {
-            contentType,
+      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,
       } = {},
-    },
+    } = this.props
-    uri,
-    isDownloaded,
-    fileInfo,
-    costInfo,
-    costInfo: {
-      cost,
-      includesData: costIncludesData,
-    } = {},
-  } = props
 
-  const outpoint = txid + ':' + nout;
+    const outpoint = txid + ':' + nout;
-  const uriLookupComplete = !!claim && Object.keys(claim).length
+    const uriLookupComplete = !!claim && Object.keys(claim).length
 
-  const channelUriObj = lbryuri.parse(uri)
+    const channelUriObj = lbryuri.parse(uri)
-  delete channelUriObj.path;
+    delete channelUriObj.path;
-  delete channelUriObj.contentName;
+    delete channelUriObj.contentName;
-  const channelUri = signatureIsValid && hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null;
+    const channelUri = signatureIsValid && hasSignature && channelUriObj.isChannel ? lbryuri.build(channelUriObj, false) : null;
-  const uriIndicator = <UriIndicator uri={uri} />
+    const uriIndicator = <UriIndicator uri={uri} />
 
-  //            <p>This location is not yet in use. { ' ' }<Link onClick={() => navigate('/publish')} label="Put something here" />.</p>
+    //            <p>This location is not yet in use. { ' ' }<Link onClick={() => navigate('/publish')} label="Put something here" />.</p>
 
-  return (
+    return (
-    <main className="main--single-column">
+      <main className="main--single-column">
-      <section className="show-page-media">
+        <section className="show-page-media">
-        { contentType && contentType.startsWith('video/') ?
+          { contentType && contentType.startsWith('video/') ?
-          <Video className="video-embedded" uri={uri} metadata={metadata} outpoint={outpoint} /> :
+            <Video className="video-embedded" uri={uri} metadata={metadata} outpoint={outpoint} /> :
-          (Object.keys(metadata).length > 0 ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
+            (Object.keys(metadata).length > 0 ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
-      </section>
+        </section>
-      <section className="card">
+        <section className="card">
-        <div className="card__inner">
+          <div className="card__inner">
-          <div className="card__title-identity">
+            <div className="card__title-identity">
-            {isDownloaded === false
+              {isDownloaded === false
-              ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} /></span>
+                ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} /></span>
-              : null}
+                : null}<h1>{title}</h1>
-            <h1>{title}</h1>
+              <div className="card__subtitle">
-            <div className="card__subtitle">
+                { channelUri ?
-              { channelUri ?
+                  <Link href={"?show=" + channelUri }>{uriIndicator}</Link> :
-                <Link href={"?show=" + channelUri }>{uriIndicator}</Link> :
+                  uriIndicator}
-                uriIndicator}
+              </div>
-           </div>
+              <div className="card__actions">
-            <div className="card__actions">
+                <FileActions uri={uri} /></div>
-              <FileActions uri={uri} /></div>
+            </div>
+            <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
+              {metadata.description}
+            </div>
           </div>
-          <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
+          { metadata ?
-            {metadata.description}
+            <div className="card__content">
-          </div>
+              <FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint}
-        </div>
+                          costIncludesData={costIncludesData} />
-        { metadata ?
+            </div> : '' }
           <div className="card__content">
-            <FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint} costIncludesData={costIncludesData}  />
+            <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
-          </div> : '' }
+          </div>
-        <div className="card__content">
+        </section>
-          <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
+      </main>
-        </div>
+    )
-      </section>
+  }
-    </main>
-  )
 }
 
 export default FilePage;

ui/js/page/showPage/view.jsx

@@ -41,7 +41,7 @@ class ShowPage extends React.Component{
           <div className="card__title-identity"><h1>{uri}</h1></div>
         </div>
         <div className="card__content">
-          <BusyMessage message="Loading magic decentralized data..." /> :
+          <BusyMessage message="Loading magic decentralized data..." />
         </div>
       </section>;
     }

ui/js/selectors/cost_info.js

@@ -14,7 +14,7 @@ export const selectAllCostInfoByUri = createSelector(
 export const selectCurrentUriCostInfo = createSelector(
   selectCurrentUri,
   selectAllCostInfoByUri,
-  (uri, byUri) => byUri[uri] || {}
+  (uri, byUri) => byUri[uri]
 )
 
 export const selectFetchingCostInfo = createSelector(

ui/package.json

@@ -22,7 +22,6 @@
     "babel-cli": "^6.11.4",
     "babel-preset-es2015": "^6.13.2",
     "babel-preset-react": "^6.11.1",
-    "mediaelement": "^2.23.4",
     "node-sass": "^3.8.0",
     "plyr": "^2.0.12",
     "rc-progress": "^2.0.6",

ui/scss/_mediaelement.scss

@@ -1,16 +0,0 @@
-@import "global";
-
-.mejs-container, .mejs-overlay, .mejs-mediaelement {
-  width: 100%;
-  height: 100%;
-}
-
-.me-plugin {
-  width: 100%;
-  height: 100%;
-
-  > embed {
-    width: 100%;
-    height: 100%;
-  }
-}

ui/scss/all.scss

@@ -1,6 +1,5 @@
 @import "_reset";
 @import "_icons";
-@import "_mediaelement";
 @import "_gui";
 @import "component/_table";
 @import "component/_button.scss";
@@ -19,6 +18,5 @@
 @import "component/_snack-bar.scss";
 @import "component/_video.scss";
 @import "page/_developer.scss";
-@import "page/_watch.scss";
 @import "page/_reward.scss";
 @import "page/_show.scss";

ui/scss/page/_watch.scss

@@ -1,48 +0,0 @@
-
-.video__overlay {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  color: #fff;
-  z-index: 1;
-}
-
-.video__back {
-  margin-top: 30px;
-  margin-left: 50px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.video__back-link {
-  font-size: 50px;
-}
-
-.video__back-label {
-  opacity: 0.5;
-  transition: opacity 100ms ease-in;
-}
-
-.video__back-link:hover + .video__back-label {
-  opacity: 1;
-}
-
-$video-back-background: #333;
-$video-back-size: 20px;
-
-.video__back-label-arrow {
-  color: $video-back-background;
-  font-size: $video-back-size;
-}
-
-.video__back-label-content {
-  display: inline-block;
-  margin-left: -2px;
-  font-size: $video-back-size;
-  padding: $spacing-vertical / 2;
-  border-radius: 3px;
-  background-color: $video-back-background;
-  color: #fff;
-  pointer-events: none;
-}