From 80958c78fdc733c02077a9d2200be0c3f5ee623e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 28 Nov 2017 15:40:53 +0100 Subject: [PATCH] Add loader when expanding long video description --- .../misc}/loader.component.html | 0 .../shared => shared/misc}/loader.component.ts | 0 client/src/app/shared/shared.module.ts | 7 +++++-- .../{ => shared}/video-edit.component.scss | 0 .../{ => shared}/video-edit.module.ts | 4 ++-- .../videos/+video-edit/video-add.component.ts | 2 +- .../app/videos/+video-edit/video-add.module.ts | 5 ++--- .../+video-edit/video-update.component.ts | 2 +- .../videos/+video-edit/video-update.module.ts | 5 ++--- .../+video-watch/video-watch.component.html | 7 ++++--- .../+video-watch/video-watch.component.scss | 4 ++++ .../+video-watch/video-watch.component.ts | 17 +++++++++++++---- .../src/app/videos/video-list/shared/index.ts | 1 - client/src/app/videos/videos.module.ts | 17 ++++------------- 14 files changed, 38 insertions(+), 33 deletions(-) rename client/src/app/{videos/video-list/shared => shared/misc}/loader.component.html (100%) rename client/src/app/{videos/video-list/shared => shared/misc}/loader.component.ts (100%) rename client/src/app/videos/+video-edit/{ => shared}/video-edit.component.scss (100%) rename client/src/app/videos/+video-edit/{ => shared}/video-edit.module.ts (88%) diff --git a/client/src/app/videos/video-list/shared/loader.component.html b/client/src/app/shared/misc/loader.component.html similarity index 100% rename from client/src/app/videos/video-list/shared/loader.component.html rename to client/src/app/shared/misc/loader.component.html diff --git a/client/src/app/videos/video-list/shared/loader.component.ts b/client/src/app/shared/misc/loader.component.ts similarity index 100% rename from client/src/app/videos/video-list/shared/loader.component.ts rename to client/src/app/shared/misc/loader.component.ts diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 47f651590..456ce851e 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -19,6 +19,7 @@ import { SearchComponent, SearchService } from './search' import { UserService } from './users' import { VideoAbuseService } from './video-abuse' import { VideoBlacklistService } from './video-blacklist' +import { LoaderComponent } from './misc/loader.component' @NgModule({ imports: [ @@ -40,7 +41,8 @@ import { VideoBlacklistService } from './video-blacklist' declarations: [ BytesPipe, KeysPipe, - SearchComponent + SearchComponent, + LoaderComponent ], exports: [ @@ -59,7 +61,8 @@ import { VideoBlacklistService } from './video-blacklist' BytesPipe, KeysPipe, - SearchComponent + SearchComponent, + LoaderComponent ], providers: [ diff --git a/client/src/app/videos/+video-edit/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss similarity index 100% rename from client/src/app/videos/+video-edit/video-edit.component.scss rename to client/src/app/videos/+video-edit/shared/video-edit.component.scss diff --git a/client/src/app/videos/+video-edit/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts similarity index 88% rename from client/src/app/videos/+video-edit/video-edit.module.ts rename to client/src/app/videos/+video-edit/shared/video-edit.module.ts index 33f654960..c64cea920 100644 --- a/client/src/app/videos/+video-edit/video-edit.module.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core' import { TagInputModule } from 'ngx-chips' import { TabsModule } from 'ngx-bootstrap/tabs' -import { VideoService, MarkdownService, VideoDescriptionComponent } from '../shared' -import { SharedModule } from '../../shared' +import { VideoService, MarkdownService, VideoDescriptionComponent } from '../../shared' +import { SharedModule } from '../../../shared' @NgModule({ imports: [ diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index c8094f792..1704cf486 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -23,7 +23,7 @@ import { HttpEventType, HttpResponse } from '@angular/common/http' @Component({ selector: 'my-videos-add', - styleUrls: [ './video-edit.component.scss' ], + styleUrls: [ './shared/video-edit.component.scss' ], templateUrl: './video-add.component.html' }) diff --git a/client/src/app/videos/+video-edit/video-add.module.ts b/client/src/app/videos/+video-edit/video-add.module.ts index 3d937b008..f58d12dac 100644 --- a/client/src/app/videos/+video-edit/video-add.module.ts +++ b/client/src/app/videos/+video-edit/video-add.module.ts @@ -1,9 +1,8 @@ import { NgModule } from '@angular/core' - +import { SharedModule } from '../../shared' +import { VideoEditModule } from './shared/video-edit.module' import { VideoAddRoutingModule } from './video-add-routing.module' import { VideoAddComponent } from './video-add.component' -import { VideoEditModule } from './video-edit.module' -import { SharedModule } from '../../shared' @NgModule({ imports: [ diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts index be663575f..0e966cb50 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts @@ -21,7 +21,7 @@ import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy. @Component({ selector: 'my-videos-update', - styleUrls: [ './video-edit.component.scss' ], + styleUrls: [ './shared/video-edit.component.scss' ], templateUrl: './video-update.component.html' }) diff --git a/client/src/app/videos/+video-edit/video-update.module.ts b/client/src/app/videos/+video-edit/video-update.module.ts index f7bd77c75..3b45c72a5 100644 --- a/client/src/app/videos/+video-edit/video-update.module.ts +++ b/client/src/app/videos/+video-edit/video-update.module.ts @@ -1,9 +1,8 @@ import { NgModule } from '@angular/core' - +import { SharedModule } from '../../shared' +import { VideoEditModule } from './shared/video-edit.module' import { VideoUpdateRoutingModule } from './video-update-routing.module' import { VideoUpdateComponent } from './video-update.component' -import { VideoEditModule } from './video-edit.module' -import { SharedModule } from '../../shared' @NgModule({ imports: [ diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index fd3ce2b84..f528d73c3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -130,14 +130,15 @@
-
+
Show more - + +
Show less - +
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index fcad7f7b0..cad21dd18 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -166,6 +166,10 @@ .video-details-date-description { padding-left: $video-watch-info-padding-left; + .description-loading { + display: inline-block; + } + .video-details-date { font-weight: bold; margin-bottom: 30px; 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 5e2486b9c..2a7290cbd 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -16,6 +16,7 @@ import { VideoReportComponent } from './video-report.component' import { VideoDetails, VideoService, MarkdownService } from '../shared' import { VideoBlacklistService } from '../../shared' import { UserVideoRateType, VideoRateType } from '../../../../../shared' +import { BehaviorSubject } from 'rxjs/BehaviorSubject' @Component({ selector: 'my-video-watch', @@ -38,6 +39,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { video: VideoDetails = null videoPlayerLoaded = false videoNotFound = false + descriptionLoading = false completeDescriptionShown = false completeVideoDescription: string @@ -159,32 +161,39 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } showMoreDescription () { - this.completeDescriptionShown = true - if (this.completeVideoDescription === undefined) { return this.loadCompleteDescription() } this.updateVideoDescription(this.completeVideoDescription) + this.completeDescriptionShown = true } showLessDescription () { - this.completeDescriptionShown = false this.updateVideoDescription(this.shortVideoDescription) + this.completeDescriptionShown = false } loadCompleteDescription () { + this.descriptionLoading = true + this.videoService.loadCompleteDescription(this.video.descriptionPath) .subscribe( description => { + this.completeDescriptionShown = true + this.descriptionLoading = false + this.shortVideoDescription = this.video.description this.completeVideoDescription = description this.updateVideoDescription(this.completeVideoDescription) }, - error => this.notificationsService.error('Error', error.text) + error => { + this.descriptionLoading = false + this.notificationsService.error('Error', error.text) + } ) } diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts index 2c9804e6d..d8f73bcda 100644 --- a/client/src/app/videos/video-list/shared/index.ts +++ b/client/src/app/videos/video-list/shared/index.ts @@ -1,4 +1,3 @@ export * from './abstract-video-list' -export * from './loader.component' export * from './video-miniature.component' export * from './video-sort.component' diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts index ecc351b65..4f3054c3a 100644 --- a/client/src/app/videos/videos.module.ts +++ b/client/src/app/videos/videos.module.ts @@ -1,16 +1,9 @@ import { NgModule } from '@angular/core' - +import { SharedModule } from '../shared' +import { VideoService } from './shared' +import { MyVideosComponent, VideoListComponent, VideoMiniatureComponent, VideoSortComponent } from './video-list' import { VideosRoutingModule } from './videos-routing.module' import { VideosComponent } from './videos.component' -import { - LoaderComponent, - VideoListComponent, - MyVideosComponent, - VideoMiniatureComponent, - VideoSortComponent -} from './video-list' -import { VideoService } from './shared' -import { SharedModule } from '../shared' @NgModule({ imports: [ @@ -24,9 +17,7 @@ import { SharedModule } from '../shared' VideoListComponent, MyVideosComponent, VideoMiniatureComponent, - VideoSortComponent, - - LoaderComponent + VideoSortComponent ], exports: [ -- 2.41.0