From b70dce4be4c6d942b728efeb5c620c5892a8f504 Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Wed, 13 Feb 2019 16:02:43 -0500 Subject: [PATCH] add support for project manifest --- app/components/projects/Project.jsx | 76 +++++++++++++++++++++-------- app/utils/currencies.js | 2 +- app/utils/ipfs.js | 2 +- package.json | 1 + yarn.lock | 14 ++++++ 5 files changed, 74 insertions(+), 21 deletions(-) diff --git a/app/components/projects/Project.jsx b/app/components/projects/Project.jsx index e90bbbe..b8222c7 100644 --- a/app/components/projects/Project.jsx +++ b/app/components/projects/Project.jsx @@ -13,6 +13,7 @@ import CardActions from '@material-ui/core/CardActions' import CardActionArea from '@material-ui/core/CardActionArea' import LinearProgress from '@material-ui/core/LinearProgress' import Avatar from '@material-ui/core/Avatar' +import ReactPlayer from 'react-player' import { uniqBy, length } from 'ramda' import { withStyles } from '@material-ui/core/styles' import PropTypes from 'prop-types' @@ -131,7 +132,9 @@ async function getProjectAge(id, events, setState){ } async function getProjectAssets(hash, setState){ - getFiles(hash) + console.log({hash}) + const CID = hash.split('/').slice(-1)[0] + getFiles(CID) .then((files) => { setState(files) const manifest = files[2] @@ -140,6 +143,32 @@ async function getProjectAssets(hash, setState){ .catch(console.log) } +const getProjectManifest = assets => assets ? JSON.parse(assets.find(a => a.name.toLowerCase() === 'manifest.json').content) : null + +const formatMedia = content => { + const blob = new Blob([content], {type : 'video/mp4'}) + return URL.createObjectURL(blob) +} + +const getMediaType = assets => { + if (!assets) return false + const { media } = getProjectManifest(assets) + if (media.type.toLowerCase().includes('video')) return true +} + +const getMediaSrc = assets => { + if (!assets) return null + const { media } = getProjectManifest(assets) + if (media.type.includes('video')) { + if (media.url) return media.url + if (media.file) { + return formatMedia( + assets.find(a => a.name === media.file).content + ) + } + } +} + function Project({ classes, match, profile, transfers, pledges, projectAddedEvents }) { const projectId = match.params.id const [projectAge, setAge] = useState(null) @@ -150,37 +179,46 @@ function Project({ classes, match, profile, transfers, pledges, projectAddedEven }, [projectAge]) useEffect(() => { - getProjectAssets('QmZbFULchk4wKdYoHv13jkTs2Wf4NYYJ38aCFG97g97DNn', setAssets) - }, []) + getProjectAssets(profile[0].url, setAssets) + }, [profile]) const received = useMemo(() => getReceivedAmount(projectId, transfers), [projectId, transfers]) const withdrawn = useMemo(() => getWithdrawnAmount(projectId, transfers), [projectId, transfers]) const amountsPledged = useMemo(() => getAmountsPledged(pledges), [pledges]) const numberOfBackers = useMemo(() => getNumberOfBackers(pledges), [pledges]) - console.log({profile, projectAssets}) + const mediaType = useMemo(() => getMediaType(projectAssets), [projectAssets]) + const mediaUrl = useMemo(() => getMediaSrc(projectAssets), [projectAssets]) + const manifest = useMemo(() => getProjectManifest(projectAssets), [projectAssets]) + const totalPledged = amountsPledged[0] ? amountsPledged[0][1] : 0 + const percentToGoal = manifest ? Math.min( + (Number(totalPledged) / Number(manifest.goal)) * 100, + 100 + ) : 0 + console.log({profile, projectAssets, mediaUrl, mediaType, amountsPledged}) return (
- - By Creator Name + + {manifest && `By ${manifest.creator}`}
- Akira, The Linux Design Tool + {manifest && manifest.title} - UX/UI Design application for Linux + {manifest && manifest.subtitle}
- - + {mediaType + ? + : }
- {`${amountsPledged[0][1]} ${amountsPledged[0][0]}`} + {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`} - pledged of $48,894 goal + {manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`}
{numberOfBackers} diff --git a/app/utils/currencies.js b/app/utils/currencies.js index 6ea0023..73ca003 100644 --- a/app/utils/currencies.js +++ b/app/utils/currencies.js @@ -14,7 +14,7 @@ export const currencies = [ }, { value: SNT._address, - label: 'Status (SNT)', + label: 'SNT', img: sntIco, contract: SNT }, diff --git a/app/utils/ipfs.js b/app/utils/ipfs.js index cb3b2db..0d492d3 100644 --- a/app/utils/ipfs.js +++ b/app/utils/ipfs.js @@ -49,7 +49,7 @@ const saveToIpfs = (files, cb, imgCb) => { export const getImageFromIpfs = async (hash, cb) => { const res = await getFromIpfs(hash) cb(res) -}; +} export const getFromIpfs = async hash => { const files = await getFiles(hash) diff --git a/package.json b/package.json index 0552a41..d07e7f6 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "react-chartjs-2": "^2.7.4", "react-cytoscapejs": "^1.1.0", "react-dom": "^16.8.0", + "react-player": "^1.9.3", "react-router-dom": "^4.3.1", "react-spinners": "^0.5.1", "reselect": "^4.0.0" diff --git a/yarn.lock b/yarn.lock index 01f2c30..b37c86d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6862,6 +6862,11 @@ load-json-file@^4.0.0: pify "^3.0.0" strip-bom "^3.0.0" +load-script@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" + integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ= + loader-utils@^1.0.0: version "1.2.3" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" @@ -8961,6 +8966,15 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-player@^1.9.3: + version "1.9.3" + resolved "https://registry.yarnpkg.com/react-player/-/react-player-1.9.3.tgz#ad74d4c3bf62f2d66ce7c79636642486a6ad7711" + integrity sha512-EruSLtMcnTrwy9F99hG1dAVVSg0ZNQDB4Df6CnKLkFcCppOCZrQAPq+abZOcuXun7VRaXPGpkOqhLCdiLfZZfw== + dependencies: + deepmerge "^3.0.0" + load-script "^1.0.0" + prop-types "^15.5.6" + react-router-dom@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"