width: 21px;
::ng-deep {
- @include apply-svg-color(var(--mainForegroundColor));
+ @include apply-svg-color(var(--actionButtonColor));
}
}
<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
- <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
+ <my-video-thumbnail #thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
<div class="video-bottom">
<div class="video-miniature-information">
::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
opacity: 1;
}
- }
- &:hover .video-actions ::ng-deep .dropdown-root {
- opacity: 1;
+ ::ng-deep .more-icon {
+ opacity: .6;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
}
@media screen and (max-width: $small-view) {
}
}
+ &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
+ &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
+ opacity: 1;
+ }
+
&.display-as-row {
flex-direction: row;
margin-bottom: 0;
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core'
import { User } from '../users'
import { Video } from './video.model'
import { ServerService } from '@app/core'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
import { ScreenService } from '@app/shared/misc/screen.service'
+import { VideoThumbnailComponent } from './video-thumbnail.component'
export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
export type MiniatureDisplayOptions = {
@Output() videoUnblacklisted = new EventEmitter()
@Output() videoRemoved = new EventEmitter()
+ @ViewChild('thumbnail', { static: true }) thumbnail: VideoThumbnailComponent
+
videoActionsDisplayOptions: VideoActionsDisplayType = {
playlist: true,
download: false,
loadActions () {
if (this.displayVideoActions) this.showActions = true
+ this.thumbnail.load()
}
onVideoBlacklisted () {
<a
[routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
class="video-thumbnail"
- (mouseenter)="load()"
+ (mouseenter)="load()" (focus)="load()"
>
<img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
bottom: 5px;
}
+ &:focus,
&:hover {
.video-thumbnail-actions-overlay {
opacity: 1;
import { ScreenService } from '@app/shared/misc/screen.service'
import { AuthService, ThemeService } from '@app/core'
import { VideoPlaylistService } from '../video-playlist/video-playlist.service'
-import { VideoPlaylistType } from '@shared/models'
-import { forkJoin } from 'rxjs'
-import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
-import { VideoPlaylist } from '../video-playlist/video-playlist.model'
import { VideoPlaylistElementCreate } from '../../../../../shared'
-import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
@Component({
selector: 'my-video-thumbnail',
load () {
if (this.addedToWatchLater !== undefined) return
+ if (!this.isUserLoggedIn()) return
this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
.subscribe(