From 80958c78fdc733c02077a9d2200be0c3f5ee623e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 28 Nov 2017 15:40:53 +0100 Subject: Add loader when expanding long video description --- client/src/app/shared/misc/loader.component.html | 3 ++ client/src/app/shared/misc/loader.component.ts | 11 +++++ client/src/app/shared/shared.module.ts | 7 ++- .../+video-edit/shared/video-edit.component.scss | 56 ++++++++++++++++++++++ .../videos/+video-edit/shared/video-edit.module.ts | 33 +++++++++++++ .../app/videos/+video-edit/video-add.component.ts | 2 +- .../src/app/videos/+video-edit/video-add.module.ts | 5 +- .../videos/+video-edit/video-edit.component.scss | 56 ---------------------- .../app/videos/+video-edit/video-edit.module.ts | 33 ------------- .../videos/+video-edit/video-update.component.ts | 2 +- .../app/videos/+video-edit/video-update.module.ts | 5 +- .../videos/+video-watch/video-watch.component.html | 7 +-- .../videos/+video-watch/video-watch.component.scss | 4 ++ .../videos/+video-watch/video-watch.component.ts | 17 +++++-- client/src/app/videos/video-list/shared/index.ts | 1 - .../videos/video-list/shared/loader.component.html | 3 -- .../videos/video-list/shared/loader.component.ts | 11 ----- client/src/app/videos/videos.module.ts | 17 ++----- 18 files changed, 139 insertions(+), 134 deletions(-) create mode 100644 client/src/app/shared/misc/loader.component.html create mode 100644 client/src/app/shared/misc/loader.component.ts create mode 100644 client/src/app/videos/+video-edit/shared/video-edit.component.scss create mode 100644 client/src/app/videos/+video-edit/shared/video-edit.module.ts delete mode 100644 client/src/app/videos/+video-edit/video-edit.component.scss delete mode 100644 client/src/app/videos/+video-edit/video-edit.module.ts delete mode 100644 client/src/app/videos/video-list/shared/loader.component.html delete mode 100644 client/src/app/videos/video-list/shared/loader.component.ts (limited to 'client') diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html new file mode 100644 index 000000000..38d06950e --- /dev/null +++ b/client/src/app/shared/misc/loader.component.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/client/src/app/shared/misc/loader.component.ts b/client/src/app/shared/misc/loader.component.ts new file mode 100644 index 000000000..f37d70c85 --- /dev/null +++ b/client/src/app/shared/misc/loader.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core' + +@Component({ + selector: 'my-loader', + styleUrls: [ ], + templateUrl: './loader.component.html' +}) + +export class LoaderComponent { + @Input() loading: boolean +} 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/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss new file mode 100644 index 000000000..9ee0c520c --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -0,0 +1,56 @@ +.btn-file { + position: relative; + overflow: hidden; + display: block; +} + +.btn-file input[type=file] { + position: absolute; + top: 0; + right: 0; + min-width: 100%; + min-height: 100%; + font-size: 100px; + text-align: right; + filter: alpha(opacity=0); + opacity: 0; + outline: none; + background: white; + cursor: inherit; + display: block; +} + +.form-group { + margin-bottom: 10px; +} + +div.tags { + height: 40px; + font-size: 20px; + margin-top: 20px; + + .tag { + margin-right: 10px; + + .remove { + cursor: pointer; + } + } +} + +div.file-to-upload { + height: 40px; + + .glyphicon-remove { + cursor: pointer; + } +} + +.little-information { + font-size: 0.8em; + font-style: italic; +} + +.label-tags { + margin-bottom: 0; +} diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts new file mode 100644 index 000000000..c64cea920 --- /dev/null +++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts @@ -0,0 +1,33 @@ +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' + +@NgModule({ + imports: [ + TagInputModule, + TabsModule.forRoot(), + + SharedModule + ], + + declarations: [ + VideoDescriptionComponent + ], + + exports: [ + TagInputModule, + TabsModule, + + VideoDescriptionComponent + ], + + providers: [ + VideoService, + MarkdownService + ] +}) +export class VideoEditModule { } 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-edit.component.scss b/client/src/app/videos/+video-edit/video-edit.component.scss deleted file mode 100644 index 9ee0c520c..000000000 --- a/client/src/app/videos/+video-edit/video-edit.component.scss +++ /dev/null @@ -1,56 +0,0 @@ -.btn-file { - position: relative; - overflow: hidden; - display: block; -} - -.btn-file input[type=file] { - position: absolute; - top: 0; - right: 0; - min-width: 100%; - min-height: 100%; - font-size: 100px; - text-align: right; - filter: alpha(opacity=0); - opacity: 0; - outline: none; - background: white; - cursor: inherit; - display: block; -} - -.form-group { - margin-bottom: 10px; -} - -div.tags { - height: 40px; - font-size: 20px; - margin-top: 20px; - - .tag { - margin-right: 10px; - - .remove { - cursor: pointer; - } - } -} - -div.file-to-upload { - height: 40px; - - .glyphicon-remove { - cursor: pointer; - } -} - -.little-information { - font-size: 0.8em; - font-style: italic; -} - -.label-tags { - margin-bottom: 0; -} diff --git a/client/src/app/videos/+video-edit/video-edit.module.ts b/client/src/app/videos/+video-edit/video-edit.module.ts deleted file mode 100644 index 33f654960..000000000 --- a/client/src/app/videos/+video-edit/video-edit.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -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' - -@NgModule({ - imports: [ - TagInputModule, - TabsModule.forRoot(), - - SharedModule - ], - - declarations: [ - VideoDescriptionComponent - ], - - exports: [ - TagInputModule, - TabsModule, - - VideoDescriptionComponent - ], - - providers: [ - VideoService, - MarkdownService - ] -}) -export class VideoEditModule { } 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/video-list/shared/loader.component.html b/client/src/app/videos/video-list/shared/loader.component.html deleted file mode 100644 index 38d06950e..000000000 --- a/client/src/app/videos/video-list/shared/loader.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
diff --git a/client/src/app/videos/video-list/shared/loader.component.ts b/client/src/app/videos/video-list/shared/loader.component.ts deleted file mode 100644 index f37d70c85..000000000 --- a/client/src/app/videos/video-list/shared/loader.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component, Input } from '@angular/core' - -@Component({ - selector: 'my-loader', - styleUrls: [ ], - templateUrl: './loader.component.html' -}) - -export class LoaderComponent { - @Input() loading: boolean -} 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: [ -- cgit v1.2.3