LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added ChannelClaimDisplay as subcomponent to ShowChannel

Browse source
This commit is contained in:
bill bittner 2018-01-31 16:00:11 -08:00
parent a5f383aff8
commit f7e50597e6
6 changed files with 188 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
controllers/serveController.js
View file

@ -1,6 +1,6 @@
const db = require('../models');
const logger = require('winston');
const { returnPaginatedChannelViewData } = require('../helpers/channelPagination.js');
const { returnPaginatedChannelClaims } = require('../helpers/channelPagination.js');
const NO_CHANNEL = 'NO_CHANNEL';
const NO_CLAIM = 'NO_CLAIM';
@ -53,7 +53,7 @@ module.exports = {
});
});
},
getChannelViewData (channelName, channelClaimId, page) {
getChannelData (channelName, channelClaimId, page) {
return new Promise((resolve, reject) => {
// 1. get the long channel Id (make sure channel exists)
db.Certificate.getLongChannelId(channelName, channelClaimId)
@ -62,14 +62,41 @@ module.exports = {
return [null, null, null];
}
// 2. get the short ID and all claims for that channel
return Promise.all([longChannelClaimId, db.Certificate.getShortChannelIdFromLongChannelId(longChannelClaimId, channelName), db.Claim.getAllChannelClaims(longChannelClaimId)]);
return Promise.all([longChannelClaimId, db.Certificate.getShortChannelIdFromLongChannelId(longChannelClaimId, channelName)]);
})
.then(([longChannelClaimId, shortChannelClaimId, channelClaimsArray]) => {
.then(([longChannelClaimId, shortChannelClaimId]) => {
if (!longChannelClaimId) {
return resolve(NO_CHANNEL);
}
// 3. return all the channel information
resolve({
channelName,
longChannelClaimId,
shortChannelClaimId,
});
})
.catch(error => {
reject(error);
});
});
},
getChannelClaims (channelName, channelClaimId, page) {
return new Promise((resolve, reject) => {
// 1. get the long channel Id (make sure channel exists)
db.Certificate.getLongChannelId(channelName, channelClaimId)
.then(longChannelClaimId => {
if (!longChannelClaimId) {
return [null, null, null];
}
// 2. get the short ID and all claims for that channel
return Promise.all([longChannelClaimId, db.Claim.getAllChannelClaims(longChannelClaimId)]);
})
.then(([longChannelClaimId, channelClaimsArray]) => {
if (!longChannelClaimId) {
return resolve(NO_CHANNEL);
}
// 3. format the data for the view, including pagination
let paginatedChannelViewData = returnPaginatedChannelViewData(channelName, longChannelClaimId, shortChannelClaimId, channelClaimsArray, page);
let paginatedChannelViewData = returnPaginatedChannelClaims(channelName, longChannelClaimId, channelClaimsArray, page);
// 4. return all the channel information and contents
resolve(paginatedChannelViewData);
})

23
helpers/channelPagination.js
View file

@ -1,19 +1,18 @@
const CLAIMS_PER_PAGE = 10;
const CLAIMS_PER_PAGE = 12;
module.exports = {
returnPaginatedChannelViewData (channelName, longChannelClaimId, shortChannelClaimId, claims, page) {
returnPaginatedChannelClaims (channelName, longChannelClaimId, claims, page) {
const totalPages = module.exports.determineTotalPages(claims);
const paginationPage = module.exports.getPageFromQuery(page);
const viewData = {
channelName : channelName,
longChannelClaimId : longChannelClaimId,
shortChannelClaimId: shortChannelClaimId,
claims : module.exports.extractPageFromClaims(claims, paginationPage),
previousPage : module.exports.determinePreviousPage(paginationPage),
currentPage : paginationPage,
nextPage : module.exports.determineNextPage(totalPages, paginationPage),
totalPages : totalPages,
totalResults : module.exports.determineTotalClaims(claims),
channelName : channelName,
longChannelClaimId: longChannelClaimId,
claims : module.exports.extractPageFromClaims(claims, paginationPage),
previousPage : module.exports.determinePreviousPage(paginationPage),
currentPage : paginationPage,
nextPage : module.exports.determineNextPage(totalPages, paginationPage),
totalPages : totalPages,
totalResults : module.exports.determineTotalClaims(claims),
};
return viewData;
},
@ -30,7 +29,7 @@ module.exports = {
// logger.debug('claims is array?', Array.isArray(claims));
// logger.debug(`pageNumber ${pageNumber} is number?`, Number.isInteger(pageNumber));
const claimStartIndex = (pageNumber - 1) * CLAIMS_PER_PAGE;
const claimEndIndex = claimStartIndex + 10;
const claimEndIndex = claimStartIndex + CLAIMS_PER_PAGE;
const pageOfClaims = claims.slice(claimStartIndex, claimEndIndex);
return pageOfClaims;
},

76
react/components/AssetPreview/index.js
View file

@ -1,52 +1,52 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Link } from 'react-router-dom'
const AssetPreview = ({ name, claimId, fileExt, contentType }) => {
const directSourceLink = `${claimId}/${name}.${fileExt}`;
const showUrlLink = `${claimId}/${name}`;
const previewHolderStyle = {
clear: 'both',
display: 'inline-block',
width: '31%',
padding: '0px',
margin: '1%',
clear : 'both',
display : 'inline-block',
width : '31%',
padding : '0px',
margin : '1%',
backgroundColor: 'black',
};
const assetStyle = {
width: '100%',
width : '100%',
padding: '0px',
margin: '0px',
margin : '0px',
};
switch (contentType) {
case 'image/jpeg':
case 'image/jpg':
case 'image/png':
return (
<div style={previewHolderStyle}>
<Link to={showUrlLink} >
<img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name} />
</Link>
</div>
);
case 'image/gif':
return (
<div style={previewHolderStyle}>
<img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name} />
</div>
);
case 'video/mp4':
return (
<div style={previewHolderStyle}>
<video style={assetStyle}>
<source src={directSourceLink} type={contentType} />
</video>
</div>
);
default:
return (
<p>unsupported file type</p>
);
}
return (
<div style={previewHolderStyle}>
<Link to={showUrlLink} >
{(() => {
switch (contentType) {
case 'image/jpeg':
case 'image/jpg':
case 'image/png':
return (
<img style={assetStyle} className={'asset-preview--image'} src={directSourceLink} alt={name}/>
);
case 'image/gif':
return (
<img style={assetStyle} className={'asset-preview--gif'} src={directSourceLink} alt={name}/>
);
case 'video/mp4':
return (
<video style={assetStyle}>
<source src={directSourceLink} type={contentType}/>
</video>
);
default:
return (
<p>unsupported file type</p>
);
}
})()}
</Link>
</div>
);
};
export default AssetPreview;

72
react/components/ChannelClaimsDisplay/index.js Normal file
View file

@ -0,0 +1,72 @@
import React from 'react';
import NavBar from 'containers/NavBar';
import AssetPreview from 'components/AssetPreview';
import request from 'utils/request';
class ChannelClaimsDisplay extends React.Component {
constructor (props) {
super(props);
this.state = {
error: null,
page : 1,
};
this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this);
}
componentDidMount () {
const channelName = this.props.channelName;
const channelClaimId = this.props.channelClaimId || 'none';
const page = this.state.page;
this.getAndStoreChannelClaims(channelName, channelClaimId, page);
}
getAndStoreChannelClaims (channelName, channelClaimId, page) {
const url = `/api/channel-claims/${channelName}/${channelClaimId}/${page}`;
const that = this;
return request(url)
.then(({ success, message, data }) => {
console.log('api/channel-claims response:', data);
if (!success) {
return that.setState({error: message});
}
that.setState({
claims : data.claims,
currentPage : data.currentPage,
nextPage : data.nextPage,
previousPage: data.previousPage,
totalPages : data.totalPages,
totalResults: data.totalResults,
});
})
.catch((error) => {
that.setState({error: error.message});
});
}
render () {
return (
<div>
{this.state.error ? (
<div className="row">
<div className="column column--10">
<p>{this.state.error}</p>
</div>
</div>
) : (
<div className="row row--tall">
<p># of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }</p>
{this.state.claims && this.state.claims.map((claim, index) => <AssetPreview
name={claim.name}
claimId={claim.claimId}
contentType={claim.contentType}
key={index}
/>)}
</div>
)}
</div>
);
}
};
// required props
// channelName
// channelClaimId
export default ChannelClaimsDisplay;

47
react/components/ShowChannel/index.js
View file

@ -1,49 +1,34 @@
import React from 'react';
import NavBar from 'containers/NavBar';
import AssetPreview from 'components/AssetPreview';
import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay';
import request from 'utils/request';
class ShowChannel extends React.Component {
constructor (props) {
super(props);
this.state = {
error : null,
channelName : null,
claims : null,
currentPage : null,
longChannelClaimId : null,
nextPage : null,
previousPage : null,
shortChannelClaimId: null,
totalPages : null,
totalResults : null,
error: null,
};
this.updateChannelData = this.updateChannelData.bind(this);
this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this);
}
componentDidMount () {
this.updateChannelData(1);
}
updateChannelData (page) {
const channelName = this.props.channelName;
const channelClaimId = this.props.channelClaimId || 'none';
const url = `/api/channel-get-content/${channelName}/${channelClaimId}/${page}`;
this.getAndStoreChannelData(channelName, channelClaimId);
}
getAndStoreChannelData (channelName, channelClaimId) {
const url = `/api/channel-data/${channelName}/${channelClaimId}`;
const that = this;
return request(url)
.then(({ success, message, data }) => {
console.log('get channel data response:', data);
console.log('api/channel-data response:', data);
if (!success) {
return that.setState({error: message});
}
that.setState({
channelName : data.channelName,
claims : data.claims,
currentPage : data.currentPage,
longChannelClaimId : data.longChannelClaimId,
nextPage : data.nextPage,
previousPage : data.previousPage,
shortChannelClaimId: data.shortChannelClaimId,
totalPages : data.totalPages,
totalResults : data.totalResults,
});
})
.catch((error) => {
@ -66,18 +51,14 @@ class ShowChannel extends React.Component {
<h2>channel name: {this.props.channelName}</h2>
<p>full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}</p>
<p>short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}</p>
<p># of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }</p>
</div>
<div className="column column--10">
<div>
{/* claims here */}
{this.state.claims && this.state.claims.map((claim, index) => <AssetPreview
name={claim.name}
claimId={claim.claimId}
contentType={claim.contentType}
key={index}
/>)}
</div>
{ (this.state.channelName && this.state.longChannelClaimId) &&
<ChannelClaimsDisplay
channelName={this.state.channelName}
channelClaimId={this.state.longChannelClaimId}
/>
}
</div>
</div>
)}

26
routes/api-routes.js
View file

@ -9,7 +9,7 @@ const { createPublishParams, parsePublishApiRequestBody, parsePublishApiRequestF
const errorHandlers = require('../helpers/errorHandlers.js');
const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js');
const { authenticateIfNoUserToken } = require('../auth/authentication.js');
const { getChannelViewData, getClaimId } = require('../controllers/serveController.js');
const { getChannelData, getChannelClaims, getClaimId } = require('../controllers/serveController.js');
const NO_CHANNEL = 'NO_CHANNEL';
const NO_CLAIM = 'NO_CLAIM';
@ -189,12 +189,28 @@ module.exports = (app) => {
errorHandlers.handleApiError(originalUrl, ip, error, res);
});
});
app.get('/api/channel-get-content/:name/:longId/:page', ({ ip, originalUrl, body, params }, res) => {
const channelName = params.name;
let channelClaimId = params.longId;
app.get('/api/channel-data/:channelName/:channelClaimId', ({ ip, originalUrl, body, params }, res) => {
const channelName = params.channelName;
let channelClaimId = params.channelClaimId;
if (channelClaimId === 'none') channelClaimId = null;
getChannelData(channelName, channelClaimId, 0) // getChannelViewData(channelName, channelId, 0)
.then(data => {
if (data === NO_CHANNEL) {
return res.status(200).json({success: false, message: 'No matching channel was found'});
}
res.status(200).json({success: true, data});
})
.catch(error => {
logger.error('api error getting channel contents', error);
errorHandlers.handleApiError(originalUrl, ip, error, res);
});
});
app.get('/api/channel-claims/:channelName/:channelClaimId/:page', ({ ip, originalUrl, body, params }, res) => {
const channelName = params.channelName;
let channelClaimId = params.channelClaimId;
if (channelClaimId === 'none') channelClaimId = null;
const page = params.page;
getChannelViewData(channelName, channelClaimId, page)
getChannelClaims(channelName, channelClaimId, page)// getChannelViewData(channelName, channelClaimId, page)
.then(data => {
if (data === NO_CHANNEL) {
return res.status(200).json({success: false, message: 'No matching channel was found'});