Add hover effect on video miniature

2 files changed, 36 insertions, 1 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 @@
 
   <div class="video-thumbnail-overlay">{{ video.durationLabel }}</div>
 
+  <div class="play-overlay"></div>
+
   <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
     <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
   </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 @@
 @import '_variables';
 @import '_mixins';
 
+$play-overlay-transition: 0.2s ease;
+$play-overlay-height: 26px;
+$play-overlay-width: 18px;
+
 .video-thumbnail {
+  @include disable-outline;
+
   display: inline-block;
   position: relative;
   border-radius: 3px;
@@ -9,12 +15,20 @@
   width: $video-thumbnail-width;
   height: $video-thumbnail-height;
   background-color: #ececec;
+  transition: filter $play-overlay-transition;
 
   &:hover {
     text-decoration: none !important;
+
+    filter: brightness(85%);
+
+    .play-overlay {
+      opacity: 1;
+
+      transform: translate(-50%, -50%) scale(1);
+    }
   }
 
-  @include disable-outline;
   &.focus-visible {
     box-shadow: 0 0 0 2px var(--mainColor);
   }
@@ -29,6 +43,25 @@
     }
   }
 
+  .play-overlay {
+    width: 0;
+    height: 0;
+
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.5);
+
+    transition: all $play-overlay-transition;
+
+    border-top: calc(#{$play-overlay-height} / 2) solid transparent;
+    border-bottom: calc(#{$play-overlay-height} / 2) solid transparent;
+
+    border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
+
+    opacity: 0;
+  }
+
   .progress-bar {
     height: 3px;
     width: 100%;