diff options
author | Chocobozzz <me@florianbigard.com> | 2018-01-12 17:16:48 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-01-12 17:17:45 +0100 |
commit | 339632b4a3f94a6ebee3767054ef6c701858a785 (patch) | |
tree | e71fe304d9b4b732609724ee2402be97843d2332 /support/doc/development/client/code.md | |
parent | 0af3182bf77aac7fc0a122d559ccb1941e75db23 (diff) | |
download | PeerTube-339632b4a3f94a6ebee3767054ef6c701858a785.tar.gz PeerTube-339632b4a3f94a6ebee3767054ef6c701858a785.tar.zst PeerTube-339632b4a3f94a6ebee3767054ef6c701858a785.zip |
Fix changing video in watch page
Diffstat (limited to 'support/doc/development/client/code.md')
-rw-r--r-- | support/doc/development/client/code.md | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/support/doc/development/client/code.md b/support/doc/development/client/code.md new file mode 100644 index 000000000..ddd277e54 --- /dev/null +++ b/support/doc/development/client/code.md | |||
@@ -0,0 +1,72 @@ | |||
1 | # Client code documentation | ||
2 | |||
3 | The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/). | ||
4 | |||
5 | |||
6 | ## Technologies | ||
7 | |||
8 | * [TypeScript](https://www.typescriptlang.org/) -> Language | ||
9 | * [Angular](https://angular.io) -> JavaScript framework | ||
10 | * [SASS](http://sass-lang.com/) -> CSS framework | ||
11 | * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...) | ||
12 | * [Bootstrap](http://getbootstrap.com/) -> CSS framework | ||
13 | * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser | ||
14 | * [VideoJS](http://videojs.com/) -> JavaScript player framework | ||
15 | |||
16 | |||
17 | ## Files | ||
18 | |||
19 | The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`. | ||
20 | The client modules description are in the [client/package.json](https://github.com/Chocobozzz/PeerTube/blob/master/client/package.json). There are many modules that are used to compile the web application in development or production mode. | ||
21 | Here is the description of the useful `client` files directory: | ||
22 | |||
23 | tslint.json -> TypeScript linter rules | ||
24 | tsconfig.json -> TypeScript configuration for the compilation | ||
25 | .bootstraprc -> Bootstrap configuration file (which module we need) | ||
26 | config -> Webpack configuration files | ||
27 | src | ||
28 | |__ app -> TypeScript files for Angular application | ||
29 | |__ assets -> static files (images...) | ||
30 | |__ sass -> SASS files that are global for the application | ||
31 | |__ standalone -> files outside the Angular application (embed HTML page...) | ||
32 | |__ index.html -> root HTML file for our Angular application | ||
33 | |__ main.ts -> Main TypeScript file that boostraps our Angular application | ||
34 | |__ polyfills.ts -> Polyfills imports (ES 2015...) | ||
35 | |||
36 | Details of the Angular application file structure. It tries to follow [the official Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). | ||
37 | |||
38 | app | ||
39 | |__ +admin -> Admin components (followers, users...) | ||
40 | |__ account -> Account components (password change...) | ||
41 | |__ core -> Core components/services | ||
42 | |__ header -> Header components (logo, search...) | ||
43 | |__ login -> Login component | ||
44 | |__ menu -> Menu component (on the left) | ||
45 | |__ shared -> Shared components/services (search component, REST services...) | ||
46 | |__ signup -> Signup form | ||
47 | |__ videos -> Video components (list, watch, upload...) | ||
48 | |__ app.component.{html,scss,ts} -> Main application component | ||
49 | |__ app-routing.module.ts -> Main Angular routes | ||
50 | |__ app.module.ts -> Angular root module that imports all submodules we need | ||
51 | |||
52 | ## Conventions | ||
53 | |||
54 | Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). | ||
55 | |||
56 | ## Developing | ||
57 | |||
58 | * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies) | ||
59 | * Run `yarn install --pure-lockfile` at the root directory to install all the dependencies | ||
60 | * Run PostgreSQL and create the database `peertube_dev`. | ||
61 | * Run `npm run dev:client` to compile the client, run the server, watch client files modifications and reload modules on the fly (you don't need to refresh manually the web browser). The API listen on `localhost:9000` and the client on `localhost:3000`. | ||
62 | |||
63 | In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionally a SASS file. | ||
64 | If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html). | ||
65 | |||
66 | ## Components tree | ||
67 | |||
68 | ![Components tree](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/client/components-tree.png) | ||
69 | |||
70 | ## Newcomers | ||
71 | |||
72 | The main client component is `app.component.ts`. You can begin to look at this file. Then you could navigate in the different submodules to see how components are built. | ||