From 339632b4a3f94a6ebee3767054ef6c701858a785 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 12 Jan 2018 17:16:48 +0100 Subject: [PATCH] Fix changing video in watch page --- .../comment/video-comments.component.ts | 27 ++++++++++++++---- .../+video-watch/video-watch.component.ts | 2 +- .../assets/player/peertube-videojs-plugin.ts | 24 +++++++++------- support/doc/{ => development}/client/code.md | 11 ++++--- .../client/components-tree.png | Bin support/doc/{ => development}/server/code.md | 2 +- .../{ => development}/server/upload-video.png | Bin 7 files changed, 44 insertions(+), 22 deletions(-) rename support/doc/{ => development}/client/code.md (89%) rename support/doc/{ => development}/client/components-tree.png (100%) rename support/doc/{ => development}/server/code.md (97%) rename support/doc/{ => development}/server/upload-video.png (100%) 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,16 +5,18 @@ import * as WebTorrent from 'webtorrent' import { VideoFile } from '../../../../shared/models/videos/video.model' import { renderVideo } from './video-renderer' -interface VideoJSComponentInterface { - _player: VideoJSPlayer - - new (player: VideoJSPlayer, options?: any) - - registerComponent (name: string, obj: any) +declare module 'video.js' { + interface Player { + peertube (): PeerTubePlugin + } } -interface VideoJSPlayer extends videojs.Player { - peertube (): PeerTubePlugin +interface VideoJSComponentInterface { + _player: videojs.Player + + new (player: videojs.Player, options?: any) + + registerComponent (name: string, obj: any) } type PeertubePluginOptions = { @@ -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/development/client/code.md similarity index 89% rename from support/doc/client/code.md rename to support/doc/development/client/code.md index 99298f21e..ddd277e54 100644 --- a/support/doc/client/code.md +++ b/support/doc/development/client/code.md @@ -32,18 +32,21 @@ Here is the description of the useful `client` files directory: |__ 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 @@ -53,11 +56,11 @@ Uses [TSLint](https://palantir.github.io/tslint/) for TypeScript linting and [An ## 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 diff --git a/support/doc/client/components-tree.png b/support/doc/development/client/components-tree.png similarity index 100% rename from support/doc/client/components-tree.png rename to support/doc/development/client/components-tree.png diff --git a/support/doc/server/code.md b/support/doc/development/server/code.md similarity index 97% rename from support/doc/server/code.md rename to support/doc/development/server/code.md index 7233eaf5b..d909b0c3d 100644 --- a/support/doc/server/code.md +++ b/support/doc/development/server/code.md @@ -26,7 +26,7 @@ All other server files are in the [server](https://github.com/Chocobozzz/PeerTub |__ 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...) diff --git a/support/doc/server/upload-video.png b/support/doc/development/server/upload-video.png similarity index 100% rename from support/doc/server/upload-video.png rename to support/doc/development/server/upload-video.png