From: Chocobozzz Date: Fri, 12 Jan 2018 16:16:48 +0000 (+0100) Subject: Fix changing video in watch page X-Git-Tag: v0.0.1-alpha~8 X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=339632b4a3f94a6ebee3767054ef6c701858a785;p=oweals%2Fpeertube.git Fix changing video in watch page --- diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts index 030dee9af..6025256de 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core' +import { Component, Input, OnChanges, SimpleChanges } from '@angular/core' import { ConfirmService } from '@app/core' import { NotificationsService } from 'angular2-notifications' import { VideoComment as VideoCommentInterface, VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model' @@ -15,7 +15,7 @@ import { VideoCommentService } from './video-comment.service' templateUrl: './video-comments.component.html', styleUrls: ['./video-comments.component.scss'] }) -export class VideoCommentsComponent implements OnInit { +export class VideoCommentsComponent implements OnChanges { @Input() video: VideoDetails @Input() user: User @@ -37,9 +37,9 @@ export class VideoCommentsComponent implements OnInit { private videoCommentService: VideoCommentService ) {} - ngOnInit () { - if (this.video.commentsEnabled === true) { - this.loadMoreComments() + ngOnChanges (changes: SimpleChanges) { + if (changes['video']) { + this.loadVideoComments() } } @@ -152,4 +152,21 @@ export class VideoCommentsComponent implements OnInit { this.deleteLocalCommentThread(commentChild, commentToDelete) } } + + private loadVideoComments () { + if (this.video.commentsEnabled === true) { + // Reset all our fields + this.comments = [] + this.threadComments = {} + this.threadLoading = {} + this.inReplyToCommentId = undefined + this.componentPagination = { + currentPage: 1, + itemsPerPage: 10, + totalItems: null + } + + this.loadMoreComments() + } + } } diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 1c2317c52..c9bdd4dfc 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -347,7 +347,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }) }) } else { - (this.player as any).setVideoFiles(this.video.files) + this.player.peertube().setVideoFiles(this.video.files) } this.setVideoDescriptionHTML() diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 34c993f3c..0a7651a81 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -5,18 +5,20 @@ import * as WebTorrent from 'webtorrent' import { VideoFile } from '../../../../shared/models/videos/video.model' import { renderVideo } from './video-renderer' +declare module 'video.js' { + interface Player { + peertube (): PeerTubePlugin + } +} + interface VideoJSComponentInterface { - _player: VideoJSPlayer + _player: videojs.Player - new (player: VideoJSPlayer, options?: any) + new (player: videojs.Player, options?: any) registerComponent (name: string, obj: any) } -interface VideoJSPlayer extends videojs.Player { - peertube (): PeerTubePlugin -} - type PeertubePluginOptions = { videoFiles: VideoFile[] playerElement: HTMLVideoElement @@ -45,7 +47,7 @@ const webtorrent = new WebTorrent({ dht: false }) const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem') class ResolutionMenuItem extends MenuItem { - constructor (player: VideoJSPlayer, options) { + constructor (player: videojs.Player, options) { options.selectable = true super(player, options) @@ -64,7 +66,7 @@ const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuB class ResolutionMenuButton extends MenuButton { label: HTMLElement - constructor (player: VideoJSPlayer, options) { + constructor (player: videojs.Player, options) { options.label = 'Quality' super(player, options) @@ -215,7 +217,7 @@ class PeerTubePlugin extends Plugin { private videoFiles: VideoFile[] private torrent: WebTorrent.Torrent - constructor (player: VideoJSPlayer, options: PeertubePluginOptions) { + constructor (player: videojs.Player, options: PeertubePluginOptions) { super(player, options) this.videoFiles = options.videoFiles diff --git a/support/doc/client/code.md b/support/doc/client/code.md deleted file mode 100644 index 99298f21e..000000000 --- a/support/doc/client/code.md +++ /dev/null @@ -1,69 +0,0 @@ -# Client code documentation - -The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/). - - -## Technologies - - * [TypeScript](https://www.typescriptlang.org/) -> Language - * [Angular](https://angular.io) -> JavaScript framework - * [SASS](http://sass-lang.com/) -> CSS framework - * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...) - * [Bootstrap](http://getbootstrap.com/) -> CSS framework - * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser - * [VideoJS](http://videojs.com/) -> JavaScript player framework - - -## Files - -The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`. -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. -Here is the description of the useful `client` files directory: - - tslint.json -> TypeScript linter rules - tsconfig.json -> TypeScript configuration for the compilation - .bootstraprc -> Bootstrap configuration file (which module we need) - config -> Webpack configuration files - src - |__ app -> TypeScript files for Angular application - |__ assets -> static files (images...) - |__ sass -> SASS files that are global for the application - |__ standalone -> files outside the Angular application (embed HTML page...) - |__ index.html -> root HTML file for our Angular application - |__ main.ts -> Main TypeScript file that boostraps our Angular application - |__ polyfills.ts -> Polyfills imports (ES 2015...) - |__ vendor.ts -> Vendor imports (Angular, Bootstrap...) - -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). - - app - |__ account -> Account components (password change...) - |__ admin -> Admin components (friends, users...) - |__ core -> Core components/services - |__ login -> Login component - |__ shared -> Shared components/services (search component, REST services...) - |__ videos -> Video components (list, watch, upload...) - |__ app.component.{html,scss,ts} -> Main application component - |__ app.module.ts -> Angular root module that imports all submodules we need - -## Conventions - -Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). - -## Developing - - * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies) - * Run `yarn install` at the root directory to install all the dependencies - * Run PostgreSQL and create the database `peertube_dev`. - * 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`. - -In a Angular application, we create components that we put together. Each component is defined by an HTML structure, a TypeScript file and optionnaly a SASS file. -If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html). - -## Components tree - -![Components tree](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/client/components-tree.png) - -## Newcomers - -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. diff --git a/support/doc/client/components-tree.png b/support/doc/client/components-tree.png deleted file mode 100644 index cd89aa02b..000000000 Binary files a/support/doc/client/components-tree.png and /dev/null differ 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 @@ +# Client code documentation + +The client is a HTML/CSS/JavaScript web application (single page application -> SPA) developed with [TypeScript](https://www.typescriptlang.org/)/[Angular](https://angular.io/). + + +## Technologies + + * [TypeScript](https://www.typescriptlang.org/) -> Language + * [Angular](https://angular.io) -> JavaScript framework + * [SASS](http://sass-lang.com/) -> CSS framework + * [Webpack](https://webpack.js.org/) -> Source builder (compile TypeScript, SASS files, bundle them...) + * [Bootstrap](http://getbootstrap.com/) -> CSS framework + * [WebTorrent](https://webtorrent.io/) -> JavaScript library to make P2P in the browser + * [VideoJS](http://videojs.com/) -> JavaScript player framework + + +## Files + +The client files are in the `client` directory. The Webpack 2 configurations files are in `client/config` and the source files in `client/src`. +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. +Here is the description of the useful `client` files directory: + + tslint.json -> TypeScript linter rules + tsconfig.json -> TypeScript configuration for the compilation + .bootstraprc -> Bootstrap configuration file (which module we need) + config -> Webpack configuration files + src + |__ app -> TypeScript files for Angular application + |__ assets -> static files (images...) + |__ sass -> SASS files that are global for the application + |__ standalone -> files outside the Angular application (embed HTML page...) + |__ index.html -> root HTML file for our Angular application + |__ main.ts -> Main TypeScript file that boostraps our Angular application + |__ polyfills.ts -> Polyfills imports (ES 2015...) + +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). + + app + |__ +admin -> Admin components (followers, users...) + |__ account -> Account components (password change...) + |__ core -> Core components/services + |__ header -> Header components (logo, search...) + |__ login -> Login component + |__ menu -> Menu component (on the left) + |__ shared -> Shared components/services (search component, REST services...) + |__ signup -> Signup form + |__ videos -> Video components (list, watch, upload...) + |__ app.component.{html,scss,ts} -> Main application component + |__ app-routing.module.ts -> Main Angular routes + |__ app.module.ts -> Angular root module that imports all submodules we need + +## Conventions + +Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [Angular styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html). + +## Developing + + * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies) + * Run `yarn install --pure-lockfile` at the root directory to install all the dependencies + * Run PostgreSQL and create the database `peertube_dev`. + * 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`. + +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. +If you are not familiar with Angular I recommend you to read the [quickstart guide](https://angular.io/docs/ts/latest/quickstart.html). + +## Components tree + +![Components tree](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/client/components-tree.png) + +## Newcomers + +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. diff --git a/support/doc/development/client/components-tree.png b/support/doc/development/client/components-tree.png new file mode 100644 index 000000000..cd89aa02b Binary files /dev/null and b/support/doc/development/client/components-tree.png differ diff --git a/support/doc/development/server/code.md b/support/doc/development/server/code.md new file mode 100644 index 000000000..d909b0c3d --- /dev/null +++ b/support/doc/development/server/code.md @@ -0,0 +1,72 @@ +# Server code documentation + +The server is a web server developed with [TypeScript](https://www.typescriptlang.org/)/[Express](http://expressjs.com). + + +## Technologies + + * [TypeScript](https://www.typescriptlang.org/) -> Language + * [PostgreSQL](https://www.postgresql.org/) -> Database + * [Express](http://expressjs.com) -> Web server framework + * [Sequelize](http://docs.sequelizejs.com/en/v3/) -> SQL ORM + * [WebTorrent](https://webtorrent.io/) -> BitTorrent tracker and torrent creation + * [Mocha](https://mochajs.org/) -> Test framework + + +## Files + +The server main file is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts). +The server modules description are in the [package.json](https://github.com/Chocobozzz/PeerTube/blob/master/package.json) at the project root. +All other server files are in the [server](https://github.com/Chocobozzz/PeerTube/tree/master/server) directory: + + server.ts -> app initilization, main routes configuration (static routes...) + config -> server YAML configurations (for tests, production...) + scripts -> Scripts files for npm run + server + |__ controllers -> API routes/controllers files + |__ helpers -> functions used by different part of the project (logger, utils...) + |__ initializers -> functions used at the server startup (installer, database, constants...) + |__ lib -> library function (WebTorrent, OAuth2, ActivityPub...) + |__ middlewares -> middlewares for controllers (requests validators, requests pagination...) + |__ models -> Sequelize models for each SQL tables (videos, users, accounts...) + |__ tests -> API tests and real world simulations (to test the decentralized feature...) + + +## Conventions + +Uses [JavaScript Standard Style](http://standardjs.com/). + + +## Developing + + * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies) + * Run `yarn install` at the root directory to install all the dependencies + * Run PostgreSQL and create the database `peertube_dev`. + * Run `npm run dev:server` to run the server, watch server files modifications and restart it automatically. The server (API + client) listen on `localhost:9000`. + +The `NODE_ENV=test` is set to speed up communications between instances (see [constants.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server/initializers/constants.ts)). + +`npm run help` gives you all available commands. + +If you want to test the decentralization feature, you can easily run 3 instances by running `npm run play`. The instances password are `test1`, `test2` and `test3`. + + +## Architecture + +The server is composed by: + + * a REST API (Express framework) + * a WebTorrent Tracker + +A video is seeded by the server with the [WebSeed](http://www.bittorrent.org/beps/bep_0019.html) protocol (HTTP). + +![Architecture scheme](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/server/upload-video.png) + +When a user uploads a video, the rest API create the torrent file and then adds it to its database. + +If a user wants to watch the video, the tracker will indicate all other users that are watching the video + the HTTP url for the WebSeed. + +## Newcomers + +The server entrypoint is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts). You can begin to look at this file. +Then you can try to understand the [controllers](https://github.com/Chocobozzz/PeerTube/tree/master/server/controllers): they are the entrypoint of each API request. diff --git a/support/doc/development/server/upload-video.png b/support/doc/development/server/upload-video.png new file mode 100644 index 000000000..730e68cc4 Binary files /dev/null and b/support/doc/development/server/upload-video.png differ diff --git a/support/doc/server/code.md b/support/doc/server/code.md deleted file mode 100644 index 7233eaf5b..000000000 --- a/support/doc/server/code.md +++ /dev/null @@ -1,72 +0,0 @@ -# Server code documentation - -The server is a web server developed with [TypeScript](https://www.typescriptlang.org/)/[Express](http://expressjs.com). - - -## Technologies - - * [TypeScript](https://www.typescriptlang.org/) -> Language - * [PostgreSQL](https://www.postgresql.org/) -> Database - * [Express](http://expressjs.com) -> Web server framework - * [Sequelize](http://docs.sequelizejs.com/en/v3/) -> SQL ORM - * [WebTorrent](https://webtorrent.io/) -> BitTorrent tracker and torrent creation - * [Mocha](https://mochajs.org/) -> Test framework - - -## Files - -The server main file is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts). -The server modules description are in the [package.json](https://github.com/Chocobozzz/PeerTube/blob/master/package.json) at the project root. -All other server files are in the [server](https://github.com/Chocobozzz/PeerTube/tree/master/server) directory: - - server.ts -> app initilization, main routes configuration (static routes...) - config -> server YAML configurations (for tests, production...) - scripts -> Scripts files for npm run - server - |__ controllers -> API routes/controllers files - |__ helpers -> functions used by different part of the project (logger, utils...) - |__ initializers -> functions used at the server startup (installer, database, constants...) - |__ lib -> library function (WebTorrent, OAuth2, friends logic...) - |__ middlewares -> middlewares for controllers (requests validators, requests pagination...) - |__ models -> Sequelize models for each SQL tables (videos, users, accounts...) - |__ tests -> API tests and real world simulations (to test the decentralized feature...) - - -## Conventions - -Uses [JavaScript Standard Style](http://standardjs.com/). - - -## Developing - - * Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies) - * Run `yarn install` at the root directory to install all the dependencies - * Run PostgreSQL and create the database `peertube_dev`. - * Run `npm run dev:server` to run the server, watch server files modifications and restart it automatically. The server (API + client) listen on `localhost:9000`. - -The `NODE_ENV=test` is set to speed up communications between instances (see [constants.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server/initializers/constants.ts)). - -`npm run help` gives you all available commands. - -If you want to test the decentralization feature, you can easily run 3 instances by running `npm run play`. The instances password are `test1`, `test2` and `test3`. - - -## Architecture - -The server is composed by: - - * a REST API (Express framework) - * a WebTorrent Tracker - -A video is seeded by the server with the [WebSeed](http://www.bittorrent.org/beps/bep_0019.html) protocol (HTTP). - -![Architecture scheme](https://github.com/Chocobozzz/PeerTube/blob/master/support/doc/server/upload-video.png) - -When a user uploads a video, the rest API create the torrent file and then adds it to its database. - -If a user wants to watch the video, the tracker will indicate all other users that are watching the video + the HTTP url for the WebSeed. - -## Newcomers - -The server entrypoint is [server.ts](https://github.com/Chocobozzz/PeerTube/blob/master/server.ts). You can begin to look at this file. -Then you can try to understand the [controllers](https://github.com/Chocobozzz/PeerTube/tree/master/server/controllers): they are the entrypoint of each API request. diff --git a/support/doc/server/upload-video.png b/support/doc/server/upload-video.png deleted file mode 100644 index 730e68cc4..000000000 Binary files a/support/doc/server/upload-video.png and /dev/null differ