LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

more bug fixes and bugs

Browse source
This commit is contained in:
Jeremy Kauffman 2017-05-12 13:14:06 -04:00
parent c1161fc10b
commit 5605b10f54
14 changed files with 142 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/js/actions/content.js
View file

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

2
ui/js/actions/cost_info.js
View file

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

4
ui/js/component/filePrice/index.js
View file

@ -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)

44
ui/js/component/filePrice/view.jsx
View file

@ -3,19 +3,41 @@ import {
CreditAmount,
} from 'component/common'
const FilePrice = (props) => {
const {
costInfo,
look = 'indicator',
} = props
const isEstimate = costInfo ? !costInfo.includesData : null
if (!costInfo) {
return <span className={`credit-amount credit-amount--${look}`}>???</span>;
class FilePrice extends React.Component{
componentWillMount() {
this.fetchCost(this.props)
}
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

5
ui/js/component/video/view.jsx
View file

@ -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"

5
ui/js/lbryio.js
View file

@ -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};

4
ui/js/page/filePage/index.js
View file

@ -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)

162
ui/js/page/filePage/view.jsx
View file

@ -45,87 +45,105 @@ const FormatItem = (props) => {
)
}
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,
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,
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,
} = {},
},
uri,
isDownloaded,
fileInfo,
costInfo,
costInfo: {
cost,
includesData: costIncludesData,
} = {},
} = props
} = this.props
const outpoint = txid + ':' + nout;
const uriLookupComplete = !!claim && Object.keys(claim).length
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} />
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} />
// <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 (
<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>
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>
<div className="card__content card__subtext card__subtext card__subtext--allow-newlines">
{metadata.description}
</div>
</div>
{ metadata ?
{ metadata ?
<div className="card__content">
<FormatItem metadata={metadata} contentType={contentType} cost={cost} uri={uri} outpoint={outpoint}
costIncludesData={costIncludesData} />
</div> : '' }
<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>
)
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
</div>
</section>
</main>
)
}
}
export default FilePage;

2
ui/js/page/showPage/view.jsx
View file

@ -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>;
}

2
ui/js/selectors/cost_info.js
View file

@ -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(

1
ui/package.json
View file

@ -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",

16
ui/scss/_mediaelement.scss
View file

@ -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%;
}
}

2
ui/scss/all.scss
View file

@ -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";

48
ui/scss/page/_watch.scss
View file

@ -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;
}