aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-01-02 15:45:27 +0100
committerRigel Kent <sendmemail@rigelk.eu>2020-01-02 16:26:18 +0100
commit3fbba1d28a80b9e8bd97b422280a7465c5f7c89f (patch)
treec1f334ee1a4f6086947120ff7312d105783153c6 /client/src/app
parent29128b2f5ce00093ad81b4b72daae0e3444fd5a8 (diff)
downloadPeerTube-3fbba1d28a80b9e8bd97b422280a7465c5f7c89f.tar.gz
PeerTube-3fbba1d28a80b9e8bd97b422280a7465c5f7c89f.tar.zst
PeerTube-3fbba1d28a80b9e8bd97b422280a7465c5f7c89f.zip
Display all miniature actions on hover and focus
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.scss2
-rw-r--r--client/src/app/shared/video/video-miniature.component.html2
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss15
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts6
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.html2
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss1
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.ts6
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 @@
1import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core' 1import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core'
2import { User } from '../users' 2import { User } from '../users'
3import { Video } from './video.model' 3import { Video } from './video.model'
4import { ServerService } from '@app/core' 4import { ServerService } from '@app/core'
@@ -6,6 +6,7 @@ import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared'
6import { I18n } from '@ngx-translate/i18n-polyfill' 6import { I18n } from '@ngx-translate/i18n-polyfill'
7import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component' 7import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
8import { ScreenService } from '@app/shared/misc/screen.service' 8import { ScreenService } from '@app/shared/misc/screen.service'
9import { VideoThumbnailComponent } from './video-thumbnail.component'
9 10
10export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' 11export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
11export type MiniatureDisplayOptions = { 12export 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'
3import { ScreenService } from '@app/shared/misc/screen.service' 3import { ScreenService } from '@app/shared/misc/screen.service'
4import { AuthService, ThemeService } from '@app/core' 4import { AuthService, ThemeService } from '@app/core'
5import { VideoPlaylistService } from '../video-playlist/video-playlist.service' 5import { VideoPlaylistService } from '../video-playlist/video-playlist.service'
6import { VideoPlaylistType } from '@shared/models'
7import { forkJoin } from 'rxjs'
8import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
9import { VideoPlaylist } from '../video-playlist/video-playlist.model'
10import { VideoPlaylistElementCreate } from '../../../../../shared' 6import { VideoPlaylistElementCreate } from '../../../../../shared'
11import { 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(