From 45533951f1cf6f0574c197257f6afb3ef41e5eb7 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 10 Feb 2022 23:22:45 +0100
Subject: [PATCH] style: visual improvements

---
 .stylelintrc.json                             |   6 +
 src/app/home/home.component.html              | 110 +++++++++---------
 src/app/home/home.component.scss              |  11 ++
 .../recent-playlists.component.scss           |   6 -
 .../html-video-player.component.scss          |   2 +-
 .../video-player/video-player.component.scss  |   1 +
 .../vjs-player/vjs-player.component.scss      |   2 +-
 src/styles.scss                               |  20 +++-
 8 files changed, 93 insertions(+), 65 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index 9fc41f136..8b181dae0 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -24,6 +24,12 @@
                 "ignoreAtRules": ["function", "if", "each", "include", "mixin"]
             }
         ],
+        "media-feature-name-no-unknown": [
+            true,
+            {
+              "ignoreMediaFeatureNames": ["display-mode"]
+            }
+        ],
         "value-keyword-case": null,
         "string-quotes": "single",
         "value-no-vendor-prefix": null,
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 204d4b8cb..83037ce8b 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,58 +1,56 @@
-<!-- Application header-->
-<app-header
-    fxLayout="row"
-    [title]="'HOME.TITLE' | translate"
-    [subtitle]="'HOME.SUBTITLE' | translate"
-></app-header>
+<div class="grid-container">
+    <!-- Application header-->
+    <app-header
+        [title]="'HOME.TITLE' | translate"
+        [subtitle]="'HOME.SUBTITLE' | translate"
+    ></app-header>
 
-<!-- Tab-based layout -->
-<div fxLayout="row" fxFlexAlign="start start">
-    <div fxFlex="100">
-        <mat-tab-group
-            [dynamicHeight]="true"
-            color="primary"
-            backgroundColor="primary"
-            mat-stretch-tabs
-        >
-            <mat-tab>
-                <ng-template mat-tab-label>
-                    <mat-icon class="tab-icon">list</mat-icon>
-                    {{ 'HOME.TABS.RECENTLY_ADDED' | translate }}
-                </ng-template>
-                <app-recent-playlists
-                    [playlists]="playlists"
-                    (playlistClicked)="getPlaylist($event)"
-                    (refreshClicked)="refreshPlaylist($event)"
-                    (removeClicked)="removeClicked($event)"
-                >
-                </app-recent-playlists>
-            </mat-tab>
-            <mat-tab>
-                <ng-template mat-tab-label>
-                    <mat-icon class="tab-icon">attach_file</mat-icon>
-                    {{ 'HOME.TABS.FILE_UPLOAD' | translate }}
-                </ng-template>
-                <ng-template matTabContent>
-                    <app-file-upload
-                        (fileRejected)="rejectFile($event)"
-                        (fileSelected)="handlePlaylist($event)"
-                    ></app-file-upload>
-                </ng-template>
-            </mat-tab>
-            <mat-tab>
-                <ng-template mat-tab-label>
-                    <mat-icon class="tab-icon">link</mat-icon>
-                    {{ 'HOME.TABS.URL_UPLOAD' | translate }}
-                </ng-template>
-                <ng-template matTabContent>
-                    <app-url-upload
-                        (urlAdded)="sendPlaylistsUrl($event)"
-                    ></app-url-upload>
-                </ng-template>
-            </mat-tab>
-        </mat-tab-group>
-    </div>
+    <!-- Tab-based layout -->
+    <mat-tab-group
+        [dynamicHeight]="true"
+        color="primary"
+        backgroundColor="primary"
+        mat-stretch-tabs
+    >
+        <mat-tab>
+            <ng-template mat-tab-label>
+                <mat-icon class="tab-icon">list</mat-icon>
+                {{ 'HOME.TABS.RECENTLY_ADDED' | translate }}
+            </ng-template>
+            <app-recent-playlists
+                class="recent-playlists"
+                [playlists]="playlists"
+                (playlistClicked)="getPlaylist($event)"
+                (refreshClicked)="refreshPlaylist($event)"
+                (removeClicked)="removeClicked($event)"
+            >
+            </app-recent-playlists>
+        </mat-tab>
+        <mat-tab>
+            <ng-template mat-tab-label>
+                <mat-icon class="tab-icon">attach_file</mat-icon>
+                {{ 'HOME.TABS.FILE_UPLOAD' | translate }}
+            </ng-template>
+            <ng-template matTabContent>
+                <app-file-upload
+                    (fileRejected)="rejectFile($event)"
+                    (fileSelected)="handlePlaylist($event)"
+                ></app-file-upload>
+            </ng-template>
+        </mat-tab>
+        <mat-tab>
+            <ng-template mat-tab-label>
+                <mat-icon class="tab-icon">link</mat-icon>
+                {{ 'HOME.TABS.URL_UPLOAD' | translate }}
+            </ng-template>
+            <ng-template matTabContent>
+                <app-url-upload
+                    (urlAdded)="sendPlaylistsUrl($event)"
+                ></app-url-upload>
+            </ng-template>
+        </mat-tab>
+    </mat-tab-group>
+
+    <!-- Loading spinner -->
+    <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
 </div>
-
-<!-- Loading spinner -->
-<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index f7719d9a8..9237bec28 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -7,3 +7,14 @@
         display: none;
     }
 }
+
+.playlists-container {
+    grid-area: playlists;
+}
+
+.recent-playlists {
+    height: calc(100vh - 152px);
+    overflow: auto;
+    width: 100%;
+    display: block;
+}
diff --git a/src/app/home/recent-playlists/recent-playlists.component.scss b/src/app/home/recent-playlists/recent-playlists.component.scss
index 07e347c71..6e110ab9c 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.scss
+++ b/src/app/home/recent-playlists/recent-playlists.component.scss
@@ -6,12 +6,6 @@ mat-list-item {
     padding-top: 0 !important;
 }
 
-mat-nav-list {
-    height: calc(100vh - 192px);
-    overflow: auto;
-    width: 100%;
-}
-
 .meta {
     font-size: 12px !important;
     color: #666;
diff --git a/src/app/player/components/html-video-player/html-video-player.component.scss b/src/app/player/components/html-video-player/html-video-player.component.scss
index 69a8cc455..4a78a8e86 100644
--- a/src/app/player/components/html-video-player/html-video-player.component.scss
+++ b/src/app/player/components/html-video-player/html-video-player.component.scss
@@ -1,4 +1,4 @@
 #video-player {
     width: 100%;
-    height: calc(100vh - 100px);
+    height: calc(100vh - 60px);
 }
diff --git a/src/app/player/components/video-player/video-player.component.scss b/src/app/player/components/video-player/video-player.component.scss
index 6e0533cae..32fea0b6a 100644
--- a/src/app/player/components/video-player/video-player.component.scss
+++ b/src/app/player/components/video-player/video-player.component.scss
@@ -8,6 +8,7 @@
 
 .mat-drawer-content {
     background: #000;
+    overflow: hidden;
 }
 
 .mat-drawer {
diff --git a/src/app/player/components/vjs-player/vjs-player.component.scss b/src/app/player/components/vjs-player/vjs-player.component.scss
index ebe555303..9f5638651 100644
--- a/src/app/player/components/vjs-player/vjs-player.component.scss
+++ b/src/app/player/components/vjs-player/vjs-player.component.scss
@@ -3,7 +3,7 @@
 .video-js {
     position: relative !important;
     width: 100% !important;
-    height: calc(100vh - 85px);
+    height: calc(100vh - 54px);
 }
 
 /* Hide the captions settings item from the captions menu. */
diff --git a/src/styles.scss b/src/styles.scss
index ea2647bb4..8279b60b7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -59,11 +59,12 @@ textarea,
 .dark-theme {
     ::-webkit-scrollbar {
         overflow-y: scroll;
-        background: rgb(100 100 100);
+        background: #1d1d1d;
     }
 
     ::-webkit-scrollbar-thumb {
         background-color: rgb(60 60 60);
+        border-radius: 10px;
     }
 }
 
@@ -78,3 +79,20 @@ textarea,
         color: #fff !important;
     }
 }
+
+.cet-container {
+    height: calc(100vh);
+
+    .video-js {
+        height: calc(100vh - 82px) !important;
+    }
+
+    #video-player {
+        width: 100%;
+        height: calc(100vh - 80px) !important;
+    }
+
+    .recent-playlists {
+        height: calc(100vh - 152px - 28px) !important;
+    }
+}