Playlist support in watch page

[github/Chocobozzz/PeerTube.git] / client / src / app / videos / +video-watch / video-watch.component.scss

diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index b03ed197d3fe932318d1c8addf6c12c051f369ef..e1cb249efcf77c5c0b4bb041722adcd80ca75cab 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -1,6 +1,7 @@
 @import '_variables';
 @import '_mixins';
 @import '_bootstrap-variables';
+@import '_miniature';
 
 $other-videos-width: 260px;
 
@@ -12,7 +13,7 @@ $other-videos-width: 260px;
   font-weight: $font-semibold;
 }
 
-#video-element-wrapper {
+#video-wrapper {
   background-color: #000;
   display: flex;
   justify-content: center;
@@ -39,9 +40,60 @@ $other-videos-width: 260px;
     }
   }
 
+  .playlist {
+    width: 400px;
+    height: 66vh;
+    background-color: #e4e4e4;
+    overflow-y: auto;
+
+    .playlist-info {
+      padding: 5px 30px;
+
+      .playlist-display-name {
+        font-size: 18px;
+        font-weight: $font-semibold;
+        margin-bottom: 5px;
+      }
+
+      .playlist-by-index {
+        color: $grey-foreground-color;
+        display: flex;
+
+        .playlist-by {
+          margin-right: 5px;
+        }
+
+        .playlist-index span:first-child::after {
+          content: '/';
+          margin: 0 3px;
+        }
+      }
+    }
+
+    my-video-playlist-element-miniature {
+      /deep/ {
+        .video {
+          .position {
+            margin-right: 0;
+          }
+
+          .video-info {
+            .video-info-name {
+              font-size: 15px;
+            }
+          }
+        }
+
+        my-video-thumbnail {
+          @include thumbnail-size-component(90px, 50px);
+        }
+      }
+    }
+  }
+
   /deep/ .video-js {
-    width: 888px;
-    height: 500px;
+    width: calc(66vh * 1.77);
+    height: 66vh;
 
     &.vjs-theater-enabled {
       height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
@@ -176,7 +228,7 @@ $other-videos-width: 260px;
           display: flex;
           align-items: center;
 
-          .action-button:not(:first-child), .action-more {
+          .action-button:not(:first-child), .action-dropdown {
             margin-left: 10px;
           }
 
@@ -212,24 +264,23 @@ $other-videos-width: 260px;
               }
             }
 
+            &.action-button-save {
+              my-global-icon {
+                top: 0 !important;
+                right: -1px;
+              }
+            }
+
             .icon-text {
               margin-left: 3px;
             }
           }
 
-          .action-more {
+          .action-dropdown {
             display: inline-block;
 
             .dropdown-menu .dropdown-item {
-              padding: 6px 24px;
-
-              my-global-icon {
-                width: 24px;
-
-                margin-right: 10px;
-                position: relative;
-                top: -2px;
-              }
+              @include dropdown-with-icon-item;
             }
           }
         }
@@ -286,7 +337,7 @@ $other-videos-width: 260px;
       margin-bottom: 12px;
 
       .video-attribute-label {
-        min-width: 91px;
+        min-width: 142px;
         padding-right: 5px;
         display: inline-block;
         color: $grey-foreground-color;