add support for project manifest

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 (
     <div className={classes.root}>
       <div className={classes.creator}>
-        <Avatar src="https://material-ui.com/static/images/avatar/1.jpg" />
-        <Typography className={classes.creatorName}>By Creator Name</Typography>
+        <Avatar src={manifest && manifest.avatar} />
+        <Typography className={classes.creatorName}>{manifest && `By ${manifest.creator}`}</Typography>
       </div>
       <div>
         <Typography className={classes.title} component="h2" gutterBottom>
-          Akira, The Linux Design Tool
+          {manifest && manifest.title}
         </Typography>
         <Typography className={classes.subTitle} component="h5" gutterBottom>
-          UX/UI Design application for Linux
+          {manifest && manifest.subtitle}
         </Typography>
       </div>
       <div className={classes.secondRow}>
-        <CardMedia
-          component="img"
-          alt="video"
-          className={classes.media}
-          src="https://images.pexels.com/photos/1464143/pexels-photo-1464143.jpeg?cs=srgb&dl=background-camera-close-up-1464143.jpg&fm=jpg"
-          title="media-description"
-        />
-
+        {mediaType
+        ? <ReactPlayer width="100%" height="100%" url={mediaUrl} playing={manifest.media.isPlaying} />
+        : <CardMedia
+            component="img"
+            alt="video"
+            className={classes.media}
+            src={mediaUrl}
+            title="media-description"
+        />}
         <div className={classes.infoBox}>
           <LinearProgress
             classes={{
@@ -188,13 +226,13 @@ function Project({ classes, match, profile, transfers, pledges, projectAddedEven
               barColorPrimary: classes.linearBarColorPrimary,
             }}
             variant="determinate"
-            value={30}
+            value={percentToGoal}
           />
           <div className={classes.infoBoxSection}>
             <span className={classes.raisedAmount}>
-              {`${amountsPledged[0][1]} ${amountsPledged[0][0]}`}
+              {`${totalPledged.toLocaleString()} ${amountsPledged[0] ? amountsPledged[0][0] : ''}`}
             </span>
-            <span className={classes.subtext}>pledged of $48,894 goal</span>
+            <span className={classes.subtext}>{manifest && `pledged of ${Number(manifest.goal).toLocaleString()} goal`}</span>
           </div>
           <div className={classes.infoBoxSection}>
             <span className={classes.infoText}>{numberOfBackers}</span>

app/utils/currencies.js

@@ -14,7 +14,7 @@ export const currencies = [
   },
   {
     value: SNT._address,
-    label: 'Status (SNT)',
+    label: 'SNT',
     img: sntIco,
     contract: SNT
   },

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)

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"

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"