-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'
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
private videoCommentService: VideoCommentService
) {}
- ngOnInit () {
- if (this.video.commentsEnabled === true) {
- this.loadMoreComments()
+ ngOnChanges (changes: SimpleChanges) {
+ if (changes['video']) {
+ this.loadVideoComments()
}
}
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()
+ }
+ }
}
})
})
} else {
- (this.player as any).setVideoFiles(this.video.files)
+ this.player.peertube().setVideoFiles(this.video.files)
}
this.setVideoDescriptionHTML()
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
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)
class ResolutionMenuButton extends MenuButton {
label: HTMLElement
- constructor (player: VideoJSPlayer, options) {
+ constructor (player: videojs.Player, options) {
options.label = 'Quality'
super(player, options)
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
|__ 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
+ |__ +admin -> Admin components (followers, users...)
|__ account -> Account components (password change...)
- |__ admin -> Admin components (friends, users...)
|__ 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
## Developing
* Install [the dependencies](https://github.com/Chocobozzz/PeerTube#dependencies)
- * Run `yarn install` at the root directory to install all the 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 optionnaly a SASS file.
+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
|__ 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...)
+ |__ 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...)
projects / github / Chocobozzz / PeerTube.git / commitdiff
