From b0c43e36dbdc2c964f6828a78b146faebfb75b21 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 29 Jun 2021 17:15:05 +0200 Subject: Create a dedicated component for video description --- .../+video-watch/video-description.component.html | 19 +++++ .../+video-watch/video-description.component.scss | 46 ++++++++++++ .../+video-watch/video-description.component.ts | 87 ++++++++++++++++++++++ .../+video-watch/video-watch.component.html | 20 +---- .../+video-watch/video-watch.component.scss | 51 +------------ .../+videos/+video-watch/video-watch.component.ts | 50 ------------- .../app/+videos/+video-watch/video-watch.module.ts | 2 + client/src/sass/include/_variables.scss | 3 + 8 files changed, 161 insertions(+), 117 deletions(-) create mode 100644 client/src/app/+videos/+video-watch/video-description.component.html create mode 100644 client/src/app/+videos/+video-watch/video-description.component.scss create mode 100644 client/src/app/+videos/+video-watch/video-description.component.ts (limited to 'client') diff --git a/client/src/app/+videos/+video-watch/video-description.component.html b/client/src/app/+videos/+video-watch/video-description.component.html new file mode 100644 index 000000000..57f682899 --- /dev/null +++ b/client/src/app/+videos/+video-watch/video-description.component.html @@ -0,0 +1,19 @@ +
+
+ +
+ Show more + + +
+ +
+ Show less + +
+
diff --git a/client/src/app/+videos/+video-watch/video-description.component.scss b/client/src/app/+videos/+video-watch/video-description.component.scss new file mode 100644 index 000000000..fc8b4574c --- /dev/null +++ b/client/src/app/+videos/+video-watch/video-description.component.scss @@ -0,0 +1,46 @@ +@use '_variables' as *; +@use '_mixins' as *; + +.video-info-description { + @include margin-left($video-watch-info-margin-left); + @include margin-right(0); + + margin-top: 20px; + margin-bottom: 20px; + font-size: 15px; + + .video-info-description-html { + @include peertube-word-wrap; + + ::ng-deep a { + text-decoration: none; + } + } + + .glyphicon, + .description-loading { + @include margin-left(3px); + } + + .description-loading { + display: inline-block; + } + + .video-info-description-more { + cursor: pointer; + font-weight: $font-semibold; + color: pvar(--greyForegroundColor); + font-size: 14px; + + .glyphicon { + position: relative; + top: 2px; + } + } +} + +@media screen and (max-width: 450px) { + .video-info-description { + font-size: 14px !important; + } +} diff --git a/client/src/app/+videos/+video-watch/video-description.component.ts b/client/src/app/+videos/+video-watch/video-description.component.ts new file mode 100644 index 000000000..2ea3b206f --- /dev/null +++ b/client/src/app/+videos/+video-watch/video-description.component.ts @@ -0,0 +1,87 @@ +import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, Output } from '@angular/core' +import { MarkdownService, Notifier } from '@app/core' +import { VideoDetails, VideoService } from '@app/shared/shared-main' + + +@Component({ + selector: 'my-video-description', + templateUrl: './video-description.component.html', + styleUrls: [ './video-description.component.scss' ] +}) +export class VideoDescriptionComponent implements OnChanges { + @Input() video: VideoDetails + + @Output() timestampClicked = new EventEmitter() + + descriptionLoading = false + completeDescriptionShown = false + completeVideoDescription: string + shortVideoDescription: string + videoHTMLDescription = '' + + constructor ( + private videoService: VideoService, + private notifier: Notifier, + private markdownService: MarkdownService, + @Inject(LOCALE_ID) private localeId: string + ) { } + + ngOnChanges () { + this.descriptionLoading = false + this.completeDescriptionShown = false + this.completeVideoDescription = undefined + + this.setVideoDescriptionHTML() + } + + showMoreDescription () { + if (this.completeVideoDescription === undefined) { + return this.loadCompleteDescription() + } + + this.updateVideoDescription(this.completeVideoDescription) + this.completeDescriptionShown = true + } + + showLessDescription () { + 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.descriptionLoading = false + this.notifier.error(error.message) + } + ) + } + + onTimestampClicked (timestamp: number) { + this.timestampClicked.emit(timestamp) + } + + private updateVideoDescription (description: string) { + this.video.description = description + this.setVideoDescriptionHTML() + .catch(err => console.error(err)) + } + + private async setVideoDescriptionHTML () { + const html = await this.markdownService.textMarkdownToHTML(this.video.description) + this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html) + } +} 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 a659a7db1..40efa7b35 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html @@ -186,25 +186,7 @@ -
-
- -
- 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 4d68504f5..f25f3bf31 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.scss +++ b/client/src/app/+videos/+video-watch/video-watch.component.scss @@ -4,15 +4,12 @@ @use '_bootstrap-variables'; @use '_miniature' as *; -$player-factor: math.div(16, 9); -$video-info-margin-left: 44px; - @function getPlayerHeight ($width) { - @return calc(#{$width} / #{$player-factor}); + @return calc(#{$width} / #{$video-watch-player-factor}); } @function getPlayerWidth ($height) { - @return calc(#{$height} * #{$player-factor}); + @return calc(#{$height} * #{$video-watch-player-factor}); } @mixin playlist-below-player { @@ -316,46 +313,8 @@ $video-info-margin-left: 44px; } } - .video-info-description { - @include margin-left($video-info-margin-left); - @include margin-right(0); - - margin-top: 20px; - margin-bottom: 20px; - font-size: 15px; - - .video-info-description-html { - @include peertube-word-wrap; - - ::ng-deep a { - text-decoration: none; - } - } - - .glyphicon, - .description-loading { - @include margin-left(3px); - } - - .description-loading { - display: inline-block; - } - - .video-info-description-more { - cursor: pointer; - font-weight: $font-semibold; - color: pvar(--greyForegroundColor); - font-size: 14px; - - .glyphicon { - position: relative; - top: 2px; - } - } - } - .video-attributes { - @include margin-left($video-info-margin-left); + @include margin-left($video-watch-info-margin-left); } .video-attributes .video-attribute { @@ -555,10 +514,6 @@ my-video-comments { margin-top: 10px; } } - - .video-info-description { - font-size: 14px !important; - } } } 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 e2fbf7524..e6b353220 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.ts +++ b/client/src/app/+videos/+video-watch/video-watch.component.ts @@ -8,7 +8,6 @@ import { AuthService, AuthUser, ConfirmService, - MarkdownService, MetaService, Notifier, PeerTubeSocket, @@ -139,7 +138,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { private serverService: ServerService, private restExtractor: RestExtractor, private notifier: Notifier, - private markdownService: MarkdownService, private zone: NgZone, private redirectService: RedirectService, private videoCaptionService: VideoCaptionService, @@ -228,20 +226,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.hotkeysService.remove(this.hotkeys) } - showMoreDescription () { - if (this.completeVideoDescription === undefined) { - return this.loadCompleteDescription() - } - - this.updateVideoDescription(this.completeVideoDescription) - this.completeDescriptionShown = true - } - - showLessDescription () { - this.updateVideoDescription(this.shortVideoDescription) - this.completeDescriptionShown = false - } - showDownloadModal () { this.videoDownloadModal.show(this.video, this.videoCaptions) } @@ -250,28 +234,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled && !this.video.isLive } - 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.descriptionLoading = false - this.notifier.error(error.message) - } - ) - } - showSupportModal () { this.supportModal.show() } @@ -492,17 +454,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { }) } - private updateVideoDescription (description: string) { - this.video.description = description - this.setVideoDescriptionHTML() - .catch(err => console.error(err)) - } - - private async setVideoDescriptionHTML () { - const html = await this.markdownService.textMarkdownToHTML(this.video.description) - this.videoHTMLDescription = this.markdownService.processVideoTimestamps(html) - } - private setVideoLikesBarTooltipText () { this.likesBarTooltipText = `${this.video.likes} likes / ${this.video.dislikes} dislikes` } @@ -552,7 +503,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy { this.buildPlayer(urlOptions) .catch(err => console.error('Cannot build the player', err)) - this.setVideoDescriptionHTML() this.setVideoLikesBarTooltipText() this.setOpenGraphTags() diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts index 57f36c723..93b143542 100644 --- a/client/src/app/+videos/+video-watch/video-watch.module.ts +++ b/client/src/app/+videos/+video-watch/video-watch.module.ts @@ -19,6 +19,7 @@ import { PlayerStylesComponent } from './player-styles.component' import { RecommendationsModule } from './recommendations/recommendations.module' import { TimestampRouteTransformerDirective } from './timestamp-route-transformer.directive' import { VideoAvatarChannelComponent } from './video-avatar-channel.component' +import { VideoDescriptionComponent } from './video-description.component' import { VideoRateComponent } from './video-rate.component' import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' import { VideoWatchRoutingModule } from './video-watch-routing.module' @@ -47,6 +48,7 @@ import { VideoWatchComponent } from './video-watch.component' VideoWatchComponent, VideoWatchPlaylistComponent, VideoRateComponent, + VideoDescriptionComponent, VideoCommentsComponent, VideoCommentAddComponent, diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 8f3d3c3b4..39e81f270 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -95,6 +95,9 @@ $activated-action-button-color: #000; $focus-box-shadow-form: 0 0 0 .2rem; +$video-watch-player-factor: math.div(16, 9); +$video-watch-info-margin-left: 44px; + /*** map theme ***/ // pass variables into a sass map, -- cgit v1.2.3