Giter Site home page Giter Site logo

paratii-video / paratii-portal Goto Github PK

View Code? Open in Web Editor NEW
12.0 8.0 5.0 94.75 MB

Component-based web-interface for uploading, browsing and organising content of Paratii's P2P network.

License: GNU General Public License v3.0

HTML 0.31% CSS 0.27% JavaScript 98.58% Shell 0.11% Dockerfile 0.73%

paratii-portal's Introduction

Follow

Lab.paratii portal

Your window to a new era for videos

A modular web-interface for uploading content into the peer-to-peer network behind Paratii, and to browse or organize it. The purpose here is to 1) populate Paratii's registries with real world data and files from creators; 2) expose widgets and forms of interaction with the paratii-js that other developers can leverage, or platform owners can implement; 3) battletest distributed curation concepts. Early iterations will focus on the uploader experience.

Prerequisites

  • nodejs >= 8.9.0
  • yarn
  • libssl1.1 (required by parity >= 1.8.7)
  • parity >= 1.9
  • Install parity (ethereum client):
    • bash <(curl https://get.parity.io -Lk)

If you are on a Mac, you may need to set the path to parity:

  • add the following to your .bash_profile: export PATH=/Applications/Parity\ Ethereum.app/Contents/MacOS:$PATH
  • $ source path/to/.bash_profile

Installing

$ git clone https://github.com/Paratii-Video/paratii-portal
$ cd paratii-portal
$ yarn

⚠️ If yarn is installing the wrong versions of any dependencies, run the following:

$ yarn cache clean
$ yarn

☝️ add the --pure-lockfile argument to yarn to ensure you install all dependencies exactly as specified in the current yarn.lock file.

Testing

To run unit tests:

$ yarn run unit-test

End-to-end tests that can be run by starting up the application in one window. The procedure at the moment is rather complex, but we are working on simplifying the dev environment.

First of all, you need to install paratii-db on your system.

You will need 4 different consoles, and you need to start the processes in the exact order given here:

  1. yarn run parity
  2. yarn run build:dev
  3. yarn run server:dev
  4. In the directory where you installed paratii-db, run yarn run dev

When all these process are are running, y the application should be available on http://localhost:8080/

Open yet another console to run the tests:

$ yarn run chimp-test

Or, when you are developing:

$ yarn run chimp-test:watch

Development

$ yarn run dev

This does three things, concurrently:

  • boots up the server
  • bundles client code with webpack
  • boots up parity

The client and server will recompile/restart on relevant file changes. In addition, the dev server is set up to support hot-module-replacement for react and redux.

To run these processes separately:

$ yarn run build:dev

$ yarn run server:dev

$ yarn run parity

The application can be visited at http://localhost:8080

Code Quality

eslint

$ yarn run lint:scripts

If you want the linter to try to fix errors automatically, you can run:

$ yarn run lint:scripts --fix

stylelint

$ yarn run lint:styles

Note: this is used for linting styles written in javascript strings for styled-components

flow

$ yarn run flow

Run all checks in sequence

$ yarn run quality

Build for Production

$ yarn run build

After this command completes, index.html and bundle.js will both reside in the build/ directory.

Troubleshooting

If you get the following error:

[1] Module build failed: Error: ENOENT: no such file or directory, scandir '.../paratii-portal/node_modules/node-sass/vendor'

Rebuilding node-sass may help:

yarn rebild node-sass

If yarn doesn't work, maybe it's because you have a node version > 9.0.0 To fix it downgrade node to version 8.9.0:

 $ sudo yarn cache clean -f
 $ sudo yarn global add n
 $ sudo n 8.9.0

or if you are using nvm:

 $ nvm install 8.9.0
 $ nvm alias default 8.9.0
 ```
This commands will set the default version that you will use to the 8.9.0

Then run `yarn` again.
___
If you get the following error:

$ [nodemon] Internal watch failed: watch .../paratii-portal/node_modules ENOSPC

Run the following code to fix the port issue:

  $ echo fs.inotify.max_user_watches=582222 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Explanation [here](https://stackoverflow.com/questions/34662574/node-js-getting-error-nodemon-internal-watch-failed-watch-enospc)

paratii-portal's People

Contributors

bent0b0x avatar eliawk avatar enricocicconi avatar fbrigalante avatar felipegaucho avatar geckoslair avatar hugomitsumori avatar jellegerbrandy avatar jrgarou avatar leeaandrob avatar lorenzo-dev1 avatar mrocha94 avatar pedrocasa avatar ya7ya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

paratii-portal's Issues

Design.Portal Upload and Manage videos

Upload Tool (and also a way to manage the videos that already have been uploaded)

Yesterday I tried to create a UX upload page for the portal that could join the function of uplodar a video with the managing of the videos that have already been uploaded in the past (like a page my videos).

The idea would be to keep on the same list the videos that are uploading and those that have already been uploaded. The user will edit them according to their needs.
I do not know how this idea can become confusing for the user so I ask everyone's help to analyse if it's possible

There's still a lot of work to do with this pages, but I think it would be nice if everyone can see the process stage

upload_flow.pdf

Investigate react SSR for SEO/embeds

Currently, the entire app is rendered client-side. To fully support google/search engine web crawlers, and have our pages/embeds appropriately scraped, we likely have to support server-side rendering as well. This is an issue to track a high-level investigation into this question.

migrate features/search.test.js

This file contains the test from the meteor app https://github.com/Paratii-Video/paratii-player/ and describes the video search functionality

https://github.com/Paratii-Video/paratii-portal/blob/dev/features/search.test.js

The work to be done is to migrate these tests one by one, or migrating the test to paratii-lib, or decidign to delete the test if it is not relevant anymore. And implement the corresponding functionality using paratii-lib.

paratii-lib does not have thse functions implemented yet - this issue needs to be resolved first:Paratii-Video/paratii-js#35

Rationalize global state

So the state of the app that is being kept is something that we need to agree on.

Does the following make sense as a first sketch?

{
    video : { // this is the "current' video: the video the user is watching, or editing, or uploading, whatever
       id: 'foo', 
      ipfsHash: '0x.... ', // where the transcoded video can be found on ipfs
      title: '...', // plus som emore info about the video
      status: 'transcoding', // an indiction of the state that the video is in
      progress: 23, // a numer in the range 0,100 giving at what point the status is
    },
   user: {
      address: 0x12345, // ethereum address of the user,
     name: 'something or other',
      balances: {
            'pti': 1224,
            'eth': 0,
      } 
   }
}

Pass configuration to the application

At the moment, the provider and the user's addresses are hardcoded in scripts/utils/ParatiiLib.js.

This will not do, of course: our test wil use different settings then the production app (i.e. the bundle that is created for distributing)

We need some way of passing in such configuration in the application, so that we can do things like:

$ startapp --config configfile.js

Or

$ webpack --config configfile.js

(Confession: I have no idea how to pass config to these tools)

clean up uploader state

if we agree on #61 , this means that the current state.uploader.video should be removed in favor of state.video

set up test fixtures

  • Ideally, the tests should run without any dependency on an outside service. All data used in the tests (the "fixtures") should be created in the setup code of the tests themselves.
  • This set up is not part of the user app, but part of the tests. (I.e. it is in the tests dir)
    The setup, will have calls like paratii.eth.deployContracts(), paratii.core.vids.create({id: 'foo'}) and paratii.ipfs.add( myverysmalltestvideofile), and is typically called in the before or beforeEach functions of the mocha specs
  • Then, in the tests, the only videos you'll have access to are the ones created in the setup. In this case, you could call vids.get('foo') to get the video info

the test fixtures contain an already transcoded file, let's say path/to/myfile. We can then in the test fixture do something like this:
let ipfsHash = paratii.ipfs.add('path/to/myfile')
paratii.core.vids.create({id:"foo", ipfsHash: ipfsHash})

configure CircleCI

  • linting
  • building
  • testing

See also #7 regarding directories and commands for player vs portal...

Design.Uploadertool first sketches

[migrated here from https://github.com/Paratii-Video/paratii-player/issues/371]

Hey guys,
I have designed the first sketches for the uploader tool
I know that there are a lot of steps missing but I think it's a good idea to share the kick-off with u. I'm focusing not only on the user editing the video settings but also in how he is supposed to edit multiple videos at the same time. ( if he needs to upload the videos that he already got from youtube and want to change the title, or just upload multiple files at once )

tell me what u think about it

web 1920 6
web 1920 7
web 1920 9

the main idea is that there are two boxes, one containing the files names where the user can select the video that he wants to edit or remove it if he doesn't wanna upload it anymore. And another that has all the options to edit the video as the user wants

Run etherum node in dev mode

If we are going to be communicating w/ the blockchain in dev mode, we need to run an ethereum node concurrently with the dev server. Sounds like we will want to use parity instead of testrpc.

We will need to point to this node in dev mode and point elsewhere in production.

migrate features/playlists.test.js

This file contains the test from the meteor app https://github.com/Paratii-Video/paratii-player/ and describes the video player integration.

https://github.com/Paratii-Video/paratii-portal/blob/dev/features/playlists.test.js

The work to be done is to migrate these tests one by one, or decidign to delete the test if it is not relevant anymore. (The latter is the case for some tests that are now tested (or should be) in paratii-mediaplayer) and implement the corresponding functionality using paratii-lib.

paratii-lib does not have thse functions implemented yet - this issue needs to be resolved first:Paratii-Video/paratii-js#34

Create a setup fixture to load when running in dev mode

If we run yarn dev, we should also load a fixture (add some data to the local blockchain, upload some data to ipfs)

  • create a yarn load-fixtures command and add it to the dev command (in package.json)
  • Have it load at least one video (upload to blockchain and ipfs)

Set up scaffolding

We need different directories for

/player
/portal
/assets (shared assets)

[elia does not agree with this ^^^]

We also need different build and test commands, probably along the lines of:

yarn testPlayer   (run tests in /player)
yarn testPortal (run tests for /portal
yarn test (run all tests)

And, similarly:

 yarn buildPlayer
 yarn buildPortal
 yarn build

@bent0b0x , does it make sense like this?

  • still need to separate build processes for embeddable player and portal

Create style constants file

Right now we are using hard-coded colors in our styled components. It would be best if all colors (and possibly some other commonly used style values) are abstracted into a new constants/SylteConstants.js module

January Sprint: checklist

Working on branch https://github.com/Paratii-Video/paratii-portal/tree/8-uploader

get upload tool working

  • Deploy contracts for registering vids to the blockchain and ipfs
  • integrate with paratii-lib
  • Pass configuration to portal: #51
  • wallet management to portal
  • Create pages and forms for upload in portal #8
  • testing and finetuning [<- big task]

implement throttling via tokens

https://github.com/Paratii-Video/wiki/wiki/Protocol-Description:-Upload-Video

  • setup a loan/gift system
  • write the contracts
  • integrate with paratii-lib
  • integrate with paratii-portal

erorr on build

I did a fresh clone of the repo, ran npm install.

Now, npm run dev gives me the following error:

[0] ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/styles/app.scss
[0] Module build failed: Error: ENOENT: no such file or directory, scandir '/media/data/projects/paratii/paratii-portal2/node_modules/node-sass/vendor'
[0]     at Object.fs.readdirSync (fs.js:904:18)
[0]     at Object.getInstalledBinaries (/media/data/projects/paratii/paratii-portal2/node_modules/node-sass/lib/extensions.js:128:13)
[0]     at foundBinariesList (/media/data/projects/paratii/paratii-portal2/node_modules/node-sass/lib/errors.js:20:15)
[0]     at foundBinaries (/media/data/projects/paratii/paratii-portal2/node_modules/node-sass/lib/errors.js:15:5)
[0]     at Object.module.exports.missingBinary (/media/data/projects/paratii/paratii-portal2/node_modules/node-sass/lib/errors.js:45:5)
[0]     at module.exports (/media/data/projects/paratii/paratii-portal2/node_modules/node-sass/lib/binding.js:15:30)
[0]     at Object.<anonymous> (/media/data/projects/paratii/paratii-portal2/node_modules/node-sass/lib/index.js:14:35)
[0]     at Module._compile (module.js:635:30)
[0]     at Object.Module._extensions..js (module.js:646:10)
[0]     at Module.load (module.js:554:32)
[0]     at tryModuleLoad (module.js:497:12)
[0]     at Function.Module._load (module.js:489:3)
[0]     at Module.require (module.js:579:17)
[0]     at require (internal/module.js:11:18)
[0]     at Object.<anonymous> (/media/data/projects/paratii/paratii-portal2/node_modules/sass-loader/lib/loader.js:3:14)
[0]     at Module._compile (module.js:635:30)
[0]     at Object.Module._extensions..js (module.js:646:10)
[0]     at Module.load (module.js:554:32)
[0]     at tryModuleLoad (module.js:497:12)
[0]     at Function.Module._load (module.js:489:3)
[0]     at Module.require (module.js:579:17)
[0]     at require (internal/module.js:11:18)
[0]     at loadLoader (/media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/loadLoader.js:13:17)
[0]     at iteratePitchingLoaders (/media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
[0]     at iteratePitchingLoaders (/media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
[0]     at /media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/LoaderRunner.js:173:18
[0]     at loadLoader (/media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/loadLoader.js:36:3)
[0]     at iteratePitchingLoaders (/media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
[0]     at iteratePitchingLoaders (/media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
[0]     at /media/data/projects/paratii/paratii-portal2/node_modules/loader-runner/lib/LoaderRunner.js:173:18
[0]  @ ./src/styles/app.scss 4:14-168 18:2-22:4 19:20-174
[0]  @ ./src/scripts/index.js
[0]  @ multi react-hot-loader/patch ./src/scripts/index.js webpack-hot-middleware/client?quiet=true

invalid RLP error

This error was fixed in paratii-lib by applying a patch to web3.
However, it is not fixed ehre, because the patch does not arrive at the es6-compiled code - paratii-portal used the virgin web3js.

Since our PR in web3 is merged, we probably only need to wait until the next release to fix this error. If that takes too long, we can apply the same patch as in paratii-lib

Devise mechanism for differentiating between dev/test and prod

There will be some configuration/functionality that needs to differ locally vs on production. This includes how we connect to the registry via paratt-lib, the registry address to connect to, and possibly other things we haven’t thought of yet. We should come up with a consistent approach to make this differentiation. I think weback’s define plugin might be the way to go.

migrate features/player.test.js

This file contains the test from the meteor app https://github.com/Paratii-Video/paratii-player/ and describes the video player integration.

https://github.com/Paratii-Video/paratii-portal/blob/dev/features/player.test.js

The work to be done is to migrate these tests one by one, or decidign to delete the test if it is not relevant anymore. (The latter is the case for some tests that are now tested (or should be) in paratii-mediaplayer) and implement the corresponding functionality using paratii-lib.

Do not build everything in a single bundle.js

At the moment, yarn build packages all data, including static assets like images, and source maps of code, etc, in a single bundle.js.

This is not scaleable and f*ks up caching, we need an output in which we can serve assets directly (bu apache/nginx) from a single static folder

In other words: I liked to output of react-scripts build much better (cf commit d56d82f)

Set up browser interaction tests

Problem
Currently this app does not have tests that actually interact with a browser to test functionality. It only has a unit-testing suite.

Work to be Done
Set up tests (similar to the chimp-tests in paratii-player).

use `standard` linting

Configure the linter to enforce the standard style

(currently does not: we have lots of lines ending with ;)

call `deployContracts` only in tests

https://github.com/Paratii-Video/paratii-portal/blob/16-player/src/scripts/utils/ParatiiLib.js called "deployContracts".

the "deplloyContrcts" function is really a kind of sysadmin utility. In normal usage, all contracts are deployed on the blockchain (by us), and clients use those given contracts. The only thing we give the client is the address of the ParatiiRegistry conract, which contains references to the address of all other contrcts.

In other words, the client should never call depoyContracts. This call to "deployContracts" should move to the tests setup.

Migrate features/profile.test.js

This fiel contains the test from the meteor app in meteor player and describes the flow of wallet handling/account creation.

The work to be done is to migrate these tests one by one (or decidign to delete the test if it is not relevant anymore) and implement the corresponding functionality using paratii-lib.

chimp-watch is not running tests

reproduce

Get latest dev version.

yarn chimp-watch gives the following output:

Ran 0 of 1 spec
0 specs, 0 failures
Finished in 0.038 seconds

expected that it would run the test, just like chimp-test does:

While yarn chimp-test does inded run (the single) test:

1 spec, 0 failures
Finished in 0.875 seconds

Done in 2.53s.

Investigate moving back to yarn

We had to switch to npm via #38 , because of issues installing certain dependencies (I think it was web3?) with yarn. However, I was on a very old version of yarn that may have explained the trouble. Will investigate if we can switch back.

Systems Architecture (discussion)

System Architecture

We have two consumer-facing apps:

  • portal
  • player

This may in the future be extended with other things, like a mobile application.

Both make use fo paratii-mediaplayer (for playing files from ipfs) and paratii-lib (does the heavy lifting)

We have a number of requirements for the system setup:

  • The setup should avoid duplication of code as much as possible.
  • Portal and player will share a certain amount of logic (how to save wallet info in the browser, how to create an account)
  • Portal and player share graphical design
  • We'd like both apps to share the same architecture stack (easier for developers and devops)
  • Both apps need a server side process to set the correct headers for our pages (it will also help with optimizing)
  • Incidentally, both apps will be deployed to the same domain and on the same machine something like paratii.video/play/1 for the portal and `paratii.video/embed/play/1' for the embeddde version - so it makes sense to have them even share the same server-side process.

Proposal:

-react/redux app

Open question:

  • To me it seems logical to develop the two apps in the same repo, but @bent0b0x does not seem to agree... will it be easer to develop the two apps in two different repo's, or in a single one? I cannot seem to find a good example of building different apps from a single code base.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.