Playlist videos component

3 files changed, 29 insertions, 11 deletions

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 36d4e84d3..25a024aac 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -28,15 +28,15 @@ $play-overlay-transition: 0.2s ease;
 $play-overlay-height: 26px;
 $play-overlay-width: 18px;
 
-@mixin miniature-thumbnail {
+@mixin miniature-thumbnail($width: $video-thumbnail-width, $height: $video-thumbnail-height) {
   @include disable-outline;
 
   display: inline-block;
   position: relative;
   border-radius: 3px;
   overflow: hidden;
-  width: $video-thumbnail-width;
-  height: $video-thumbnail-height;
+  width: $width;
+  height: $height;
   background-color: #ececec;
   transition: filter $play-overlay-transition;
 
@@ -45,8 +45,8 @@ $play-overlay-width: 18px;
     right: 0;
     bottom: 0;
 
-    width: $video-thumbnail-width;
-    height: $video-thumbnail-height;
+    width: inherit;
+    height: inherit;
     opacity: 0;
     background-color: rgba(0, 0, 0, 0.7);
 
@@ -87,8 +87,8 @@ $play-overlay-width: 18px;
   }
 
   img {
-    width: $video-thumbnail-width;
-    height: $video-thumbnail-height;
+    width: inherit;
+    height: inherit;
 
     &.blur-filter {
       filter: blur(5px);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 3eefdb6fb..7faeec6bd 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -515,3 +515,15 @@
     align-items: center;
   }
 }
+
+@mixin dropdown-with-icon-item {
+  padding: 6px 24px;
+
+  my-global-icon {
+    width: 24px;
+
+    margin-right: 10px;
+    position: relative;
+    top: -2px;
+  }
+}
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 6e502b028..6de145379 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -62,11 +62,9 @@ p-table {
     tr {
       &:hover {
         background-color: var(--submenuColor) !important;
-      }
 
-      &:not(:hover) {
-        .action-cell * {
-          display: none !important;
+        .action-cell .dropdown-root {
+          display: block !important;
         }
       }
 
@@ -140,6 +138,14 @@ p-table {
     padding: 0 !important;
     text-align: center;
 
+    .dropdown-root {
+      display: none !important;
+
+      &.show {
+        display: block !important;
+      }
+    }
+
     my-edit-button + my-delete-button {
       margin-left: 5px;
     }