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,11 +3,32 @@ import {
   CreditAmount,
 } from 'component/common'
 
-const FilePrice = (props) => {
+class FilePrice extends React.Component{
+  componentWillMount() {
+    this.fetchCost(this.props)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.fetchCost(nextProps)
+  }
+
+  fetchCost(props) {
+    const {
+      costInfo,
+      fetchCostInfo,
+      uri
+    } = props
+
+    if (costInfo === undefined) {
+      fetchCostInfo(uri)
+    }
+  }
+
+  render() {
     const {
       costInfo,
       look = 'indicator',
-  } = props
+    } = this.props
 
     const isEstimate = costInfo ? !costInfo.includesData : null
 
@@ -16,6 +37,7 @@ const FilePrice = (props) => {
     }
 
     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() {
-  return new Promise((resolve, reject) => {
   const cached = getSession('exchangeRateCache');
+  if (!cached || Date.now() - cached.time > EXCHANGE_RATE_TIMEOUT) {
+
+  }
+  return new Promise((resolve, reject) => {
     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,7 +45,24 @@ const FormatItem = (props) => {
   )
 }
 
-const FilePage = (props) => {
+class FilePage extends React.Component{
+
+  componentWillMount() {
+    this.fetchFileInfo(this.props)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.fetchFileInfo(nextProps)
+  }
+
+  fetchFileInfo(props) {
+    if (!props.fileInfo) {
+      console.log('fetch file info')
+      props.fetchFileInfo()
+    }
+  }
+
+  render() {
     const {
       claim,
       navigate,
@@ -77,7 +94,7 @@ const FilePage = (props) => {
         cost,
         includesData: costIncludesData,
       } = {},
-  } = props
+    } = this.props
 
     const outpoint = txid + ':' + nout;
     const uriLookupComplete = !!claim && Object.keys(claim).length
@@ -102,8 +119,7 @@ const FilePage = (props) => {
             <div className="card__title-identity">
               {isDownloaded === false
                 ? <span style={{float: "right"}}><FilePrice uri={lbryuri.normalize(uri)} /></span>
-              : null}
-            <h1>{title}</h1>
+                : null}<h1>{title}</h1>
               <div className="card__subtitle">
                 { channelUri ?
                   <Link href={"?show=" + channelUri }>{uriIndicator}</Link> :
@@ -118,7 +134,8 @@ const FilePage = (props) => {
           </div>
           { metadata ?
             <div className="card__content">
-            <FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint} costIncludesData={costIncludesData}  />
+              <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" />
@@ -126,6 +143,7 @@ const FilePage = (props) => {
         </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;
-}