diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html index b855b5a1b..3da06077e 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html @@ -9,25 +9,25 @@ -
- - - - - - - +
+
-
-
+
+
-
{{ video.durationLabel }}
-
+
{{ video.durationLabel }}
+
LIVE LIVE ENDED
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index 20b07f839..d664d638b 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -19,10 +19,10 @@ } } -.video-thumbnail-watch-later-overlay, -.video-thumbnail-label-overlay, -.video-thumbnail-duration-overlay, -.video-thumbnail-live-overlay { +.watch-icon-overlay, +.label-overlay, +.duration-overlay, +.live-overlay { border-radius: 3px; font-size: 12px; font-weight: $font-semibold; @@ -32,7 +32,7 @@ @include static-thumbnail-overlay; } -.video-thumbnail-label-overlay { +.label-overlay { position: absolute; padding: 0 5px; left: 5px; @@ -43,15 +43,15 @@ &.danger { background-color: #ff0000; } } -.video-thumbnail-duration-overlay, -.video-thumbnail-live-overlay { +.duration-overlay, +.live-overlay { position: absolute; padding: 0 3px; right: 5px; bottom: 5px; } -.video-thumbnail-live-overlay { +.live-overlay { font-weight: $font-semibold; color: #fff; @@ -60,7 +60,7 @@ } } -.video-thumbnail-actions-overlay { +.actions-overlay { position: absolute; display: flex; flex-direction: column; @@ -73,7 +73,7 @@ } } -.video-thumbnail-watch-later-overlay { +.watch-icon-overlay { padding: 3px; my-global-icon { diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts index f52390281..abcc67a75 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts @@ -1,10 +1,10 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core' +import { NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common' +import { Component, EventEmitter, Input, Output, ViewChild, viewChild } from '@angular/core' +import { RouterLink } from '@angular/router' import { ScreenService } from '@app/core' +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' import { VideoState } from '@peertube/peertube-models' import { GlobalIconComponent } from '../shared-icons/global-icon.component' -import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' -import { RouterLink } from '@angular/router' -import { NgIf, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common' import { Video } from '../shared-main/video/video.model' @Component({ @@ -15,6 +15,8 @@ import { Video } from '../shared-main/video/video.model' imports: [ NgIf, RouterLink, NgTemplateOutlet, NgClass, NgbTooltip, GlobalIconComponent, NgStyle ] }) export class VideoThumbnailComponent { + @ViewChild('watchLaterTooltip') watchLaterTooltip: NgbTooltip + @Input() video: Video @Input() nsfw = false @@ -31,11 +33,17 @@ export class VideoThumbnailComponent { @Output() watchLaterClick = new EventEmitter() addToWatchLaterText: string - addedToWatchLaterText: string + removeFromWatchLaterText: string constructor (private screenService: ScreenService) { this.addToWatchLaterText = $localize`Add to watch later` - this.addedToWatchLaterText = $localize`Remove from watch later` + this.removeFromWatchLaterText = $localize`Remove from watch later` + } + + getWatchIconText () { + if (this.inWatchLaterPlaylist) return this.removeFromWatchLaterText + + return this.addToWatchLaterText } isLiveEnded () { @@ -72,6 +80,8 @@ export class VideoThumbnailComponent { this.watchLaterClick.emit(this.inWatchLaterPlaylist) event.stopPropagation() + this.watchLaterTooltip.close() + return false } } diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 6cb865dce..bd2e46494 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -1,4 +1,4 @@ -
+