diff options
Diffstat (limited to 'client/src/app/shared')
7 files changed, 22 insertions, 12 deletions
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss index 2f7e848d5..e33aa8d24 100644 --- a/client/src/app/shared/buttons/action-dropdown.component.scss +++ b/client/src/app/shared/buttons/action-dropdown.component.scss | |||
@@ -34,7 +34,7 @@ | |||
34 | width: 21px; | 34 | width: 21px; |
35 | 35 | ||
36 | ::ng-deep { | 36 | ::ng-deep { |
37 | @include apply-svg-color(var(--mainForegroundColor)); | 37 | @include apply-svg-color(var(--actionButtonColor)); |
38 | } | 38 | } |
39 | } | 39 | } |
40 | 40 | ||
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index 23a7dbb1e..c6fd570b7 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html | |||
@@ -1,5 +1,5 @@ | |||
1 | <div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()"> | 1 | <div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()"> |
2 | <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail> | 2 | <my-video-thumbnail #thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail> |
3 | 3 | ||
4 | <div class="video-bottom"> | 4 | <div class="video-bottom"> |
5 | <div class="video-miniature-information"> | 5 | <div class="video-miniature-information"> |
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index ac83c5dfa..b63fd2989 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss | |||
@@ -74,10 +74,14 @@ $more-margin-right: 15px; | |||
74 | ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { | 74 | ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { |
75 | opacity: 1; | 75 | opacity: 1; |
76 | } | 76 | } |
77 | } | ||
78 | 77 | ||
79 | &:hover .video-actions ::ng-deep .dropdown-root { | 78 | ::ng-deep .more-icon { |
80 | opacity: 1; | 79 | opacity: .6; |
80 | |||
81 | &:hover { | ||
82 | opacity: 1; | ||
83 | } | ||
84 | } | ||
81 | } | 85 | } |
82 | 86 | ||
83 | @media screen and (max-width: $small-view) { | 87 | @media screen and (max-width: $small-view) { |
@@ -96,6 +100,11 @@ $more-margin-right: 15px; | |||
96 | } | 100 | } |
97 | } | 101 | } |
98 | 102 | ||
103 | &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay, | ||
104 | &:hover .video-bottom .video-actions ::ng-deep .dropdown-root { | ||
105 | opacity: 1; | ||
106 | } | ||
107 | |||
99 | &.display-as-row { | 108 | &.display-as-row { |
100 | flex-direction: row; | 109 | flex-direction: row; |
101 | margin-bottom: 0; | 110 | margin-bottom: 0; |
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts index 9fffc7ddb..ba65d33b6 100644 --- a/client/src/app/shared/video/video-miniature.component.ts +++ b/client/src/app/shared/video/video-miniature.component.ts | |||
@@ -1,4 +1,4 @@ | |||
1 | import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core' | 1 | import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core' |
2 | import { User } from '../users' | 2 | import { User } from '../users' |
3 | import { Video } from './video.model' | 3 | import { Video } from './video.model' |
4 | import { ServerService } from '@app/core' | 4 | import { ServerService } from '@app/core' |
@@ -6,6 +6,7 @@ import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared' | |||
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | 6 | import { I18n } from '@ngx-translate/i18n-polyfill' |
7 | import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' | 7 | import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' |
8 | import { ScreenService } from '@app/shared/misc/screen.service' | 8 | import { ScreenService } from '@app/shared/misc/screen.service' |
9 | import { VideoThumbnailComponent } from './video-thumbnail.component' | ||
9 | 10 | ||
10 | export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' | 11 | export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' |
11 | export type MiniatureDisplayOptions = { | 12 | export type MiniatureDisplayOptions = { |
@@ -46,6 +47,8 @@ export class VideoMiniatureComponent implements OnInit { | |||
46 | @Output() videoUnblacklisted = new EventEmitter() | 47 | @Output() videoUnblacklisted = new EventEmitter() |
47 | @Output() videoRemoved = new EventEmitter() | 48 | @Output() videoRemoved = new EventEmitter() |
48 | 49 | ||
50 | @ViewChild('thumbnail', { static: true }) thumbnail: VideoThumbnailComponent | ||
51 | |||
49 | videoActionsDisplayOptions: VideoActionsDisplayType = { | 52 | videoActionsDisplayOptions: VideoActionsDisplayType = { |
50 | playlist: true, | 53 | playlist: true, |
51 | download: false, | 54 | download: false, |
@@ -128,6 +131,7 @@ export class VideoMiniatureComponent implements OnInit { | |||
128 | 131 | ||
129 | loadActions () { | 132 | loadActions () { |
130 | if (this.displayVideoActions) this.showActions = true | 133 | if (this.displayVideoActions) this.showActions = true |
134 | this.thumbnail.load() | ||
131 | } | 135 | } |
132 | 136 | ||
133 | onVideoBlacklisted () { | 137 | onVideoBlacklisted () { |
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html index df15698c0..9679dfefb 100644 --- a/client/src/app/shared/video/video-thumbnail.component.html +++ b/client/src/app/shared/video/video-thumbnail.component.html | |||
@@ -1,7 +1,7 @@ | |||
1 | <a | 1 | <a |
2 | [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name" | 2 | [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name" |
3 | class="video-thumbnail" | 3 | class="video-thumbnail" |
4 | (mouseenter)="load()" | 4 | (mouseenter)="load()" (focus)="load()" |
5 | > | 5 | > |
6 | <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" /> | 6 | <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" /> |
7 | 7 | ||
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss index aac50fd1b..ad221d6ed 100644 --- a/client/src/app/shared/video/video-thumbnail.component.scss +++ b/client/src/app/shared/video/video-thumbnail.component.scss | |||
@@ -35,6 +35,7 @@ | |||
35 | bottom: 5px; | 35 | bottom: 5px; |
36 | } | 36 | } |
37 | 37 | ||
38 | &:focus, | ||
38 | &:hover { | 39 | &:hover { |
39 | .video-thumbnail-actions-overlay { | 40 | .video-thumbnail-actions-overlay { |
40 | opacity: 1; | 41 | opacity: 1; |
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts index 0f605e425..6f9292d52 100644 --- a/client/src/app/shared/video/video-thumbnail.component.ts +++ b/client/src/app/shared/video/video-thumbnail.component.ts | |||
@@ -3,12 +3,7 @@ import { Video } from './video.model' | |||
3 | import { ScreenService } from '@app/shared/misc/screen.service' | 3 | import { ScreenService } from '@app/shared/misc/screen.service' |
4 | import { AuthService, ThemeService } from '@app/core' | 4 | import { AuthService, ThemeService } from '@app/core' |
5 | import { VideoPlaylistService } from '../video-playlist/video-playlist.service' | 5 | import { VideoPlaylistService } from '../video-playlist/video-playlist.service' |
6 | import { VideoPlaylistType } from '@shared/models' | ||
7 | import { forkJoin } from 'rxjs' | ||
8 | import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model' | ||
9 | import { VideoPlaylist } from '../video-playlist/video-playlist.model' | ||
10 | import { VideoPlaylistElementCreate } from '../../../../../shared' | 6 | import { VideoPlaylistElementCreate } from '../../../../../shared' |
11 | import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model' | ||
12 | 7 | ||
13 | @Component({ | 8 | @Component({ |
14 | selector: 'my-video-thumbnail', | 9 | selector: 'my-video-thumbnail', |
@@ -36,6 +31,7 @@ export class VideoThumbnailComponent { | |||
36 | 31 | ||
37 | load () { | 32 | load () { |
38 | if (this.addedToWatchLater !== undefined) return | 33 | if (this.addedToWatchLater !== undefined) return |
34 | if (!this.isUserLoggedIn()) return | ||
39 | 35 | ||
40 | this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) | 36 | this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id) |
41 | .subscribe( | 37 | .subscribe( |