aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-02-20 14:56:18 +0100
committerChocobozzz <me@florianbigard.com>2019-02-20 14:56:18 +0100
commit1aabcae7e36bb113c2887bd7180dad2916ecaaf2 (patch)
tree85dca23b4cfae152f7dc25e170fdcf1e1f6145a6
parente5fc7811ae0b0513470add9dbe237755bec7cceb (diff)
downloadPeerTube-1aabcae7e36bb113c2887bd7180dad2916ecaaf2.tar.gz
PeerTube-1aabcae7e36bb113c2887bd7180dad2916ecaaf2.tar.zst
PeerTube-1aabcae7e36bb113c2887bd7180dad2916ecaaf2.zip
Add hover effect on video miniature
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.html2
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss35
-rw-r--r--client/src/app/videos/video-list/video-trending.component.ts4
3 files changed, 38 insertions, 3 deletions
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index d25666916..a15df725e 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -6,6 +6,8 @@
6 6
7 <div class="video-thumbnail-overlay">{{ video.durationLabel }}</div> 7 <div class="video-thumbnail-overlay">{{ video.durationLabel }}</div>
8 8
9 <div class="play-overlay"></div>
10
9 <div class="progress-bar" *ngIf="video.userHistory?.currentTime"> 11 <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
10 <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div> 12 <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
11 </div> 13 </div>
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 97a0e72ed..e57baba5c 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -1,7 +1,13 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4$play-overlay-transition: 0.2s ease;
5$play-overlay-height: 26px;
6$play-overlay-width: 18px;
7
4.video-thumbnail { 8.video-thumbnail {
9 @include disable-outline;
10
5 display: inline-block; 11 display: inline-block;
6 position: relative; 12 position: relative;
7 border-radius: 3px; 13 border-radius: 3px;
@@ -9,12 +15,20 @@
9 width: $video-thumbnail-width; 15 width: $video-thumbnail-width;
10 height: $video-thumbnail-height; 16 height: $video-thumbnail-height;
11 background-color: #ececec; 17 background-color: #ececec;
18 transition: filter $play-overlay-transition;
12 19
13 &:hover { 20 &:hover {
14 text-decoration: none !important; 21 text-decoration: none !important;
22
23 filter: brightness(85%);
24
25 .play-overlay {
26 opacity: 1;
27
28 transform: translate(-50%, -50%) scale(1);
29 }
15 } 30 }
16 31
17 @include disable-outline;
18 &.focus-visible { 32 &.focus-visible {
19 box-shadow: 0 0 0 2px var(--mainColor); 33 box-shadow: 0 0 0 2px var(--mainColor);
20 } 34 }
@@ -29,6 +43,25 @@
29 } 43 }
30 } 44 }
31 45
46 .play-overlay {
47 width: 0;
48 height: 0;
49
50 position: absolute;
51 left: 50%;
52 top: 50%;
53 transform: translate(-50%, -50%) scale(0.5);
54
55 transition: all $play-overlay-transition;
56
57 border-top: calc(#{$play-overlay-height} / 2) solid transparent;
58 border-bottom: calc(#{$play-overlay-height} / 2) solid transparent;
59
60 border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
61
62 opacity: 0;
63 }
64
32 .progress-bar { 65 .progress-bar {
33 height: 3px; 66 height: 3px;
34 width: 100%; 67 width: 100%;
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index 6fd74e67a..a66a0f97c 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -45,11 +45,11 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
45 45
46 if (trendingDays === 1) { 46 if (trendingDays === 1) {
47 this.titlePage = this.i18n('Trending for the last 24 hours') 47 this.titlePage = this.i18n('Trending for the last 24 hours')
48 this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours.') 48 this.titleTooltip = this.i18n('Trending videos are those totalizing the greatest number of views during the last 24 hours')
49 } else { 49 } else {
50 this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays }) 50 this.titlePage = this.i18n('Trending for the last {{days}} days', { days: trendingDays })
51 this.titleTooltip = this.i18n( 51 this.titleTooltip = this.i18n(
52 'Trending videos are those totalizing the greatest number of views during the last {{days}} days.', 52 'Trending videos are those totalizing the greatest number of views during the last {{days}} days',
53 { days: trendingDays } 53 { days: trendingDays }
54 ) 54 )
55 } 55 }