feat(mobile): vertical layout on mobile screens

src/app/player/components/channel-list-container/channel-list-container.component.scss

@@ -64,7 +64,7 @@ mat-nav-list {
     height: calc(100vh - 120px);
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 599px) {
     .channel-name {
         max-width: 100px;
     }
@@ -76,4 +76,8 @@ mat-nav-list {
     .tab-icon {
         display: block;
     }
+
+    .scroll-viewport {
+        min-height: calc(50vh - 159px);
+    }
 }

src/app/player/components/html-video-player/html-video-player.component.scss

@@ -2,3 +2,11 @@
     width: 100%;
     height: calc(100vh - 60px);
 }
+
+
+@media only screen and (max-width: 599px) {
+    #video-player {
+        width: 100%;
+        height: calc(50vh - 60px) !important;
+    }
+}

src/app/player/components/video-player/sidebar/sidebar.component.html

@@ -1,24 +1,27 @@
 <div id="playlists-navigation">
     <div class="current-playlist">
-        <button mat-icon-button matTooltip="Back" (click)="goBack()">
-            <mat-icon>arrow_back_ios</mat-icon>
-        </button>
-        <div class="playlist-info">
-            <div class="name">
-                @if (sidebarView === 'CHANNELS') {
-                    {{ playlistTitle$ | async }}
-                } @else {
-                    {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
-                }
-            </div>
-            <div class="channels-count">
-                {{
-                    sidebarView === 'CHANNELS'
-                        ? channels?.length +
-                          ' ' +
-                          ('HOME.PLAYLISTS.CHANNELS' | translate)
-                        : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE' | translate)
-                }}
+        <div class="left">
+            <button mat-icon-button matTooltip="Back" (click)="goBack()">
+                <mat-icon>arrow_back_ios</mat-icon>
+            </button>
+            <div class="playlist-info">
+                <div class="name">
+                    @if (sidebarView === 'CHANNELS') {
+                        {{ playlistTitle$ | async }}
+                    } @else {
+                        {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
+                    }
+                </div>
+                <div class="channels-count">
+                    {{
+                        sidebarView === 'CHANNELS'
+                            ? channels?.length +
+                              ' ' +
+                              ('HOME.PLAYLISTS.CHANNELS' | translate)
+                            : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE'
+                              | translate)
+                    }}
+                </div>
             </div>
         </div>
 

src/app/player/components/video-player/sidebar/sidebar.component.scss

@@ -4,12 +4,19 @@
         display: flex;
         align-items: center;
         padding: 8px;
+        justify-content: space-between;
+
+        .left {
+            display: flex;
+            gap: 5px;
+        }
     }
 
     .playlist-info {
         flex: 1;
         max-width: 300px;
 
+
         .name {
             font-size: 1.1em;
             overflow: hidden;

src/app/player/components/video-player/sidebar/sidebar.component.ts

@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { Channel } from '../../../../../../shared/channel.interface';
@@ -29,6 +29,7 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch
         NgIf,
         RecentPlaylistsComponent,
         TranslateModule,
+        RouterLink,
     ],
 })
 export class SidebarComponent {

src/app/player/components/video-player/toolbar/toolbar.component.html

@@ -3,6 +3,7 @@
         mat-icon-button
         (click)="toggleLeftDrawerClicked.emit()"
         [matTooltip]="'TOP_MENU.OPEN_CHANNELS_LIST' | translate"
+        class="sidenav-toggle-button"
     >
         <mat-icon>menu</mat-icon>
     </button>

src/app/player/components/video-player/toolbar/toolbar.component.scss

@@ -1,3 +1,9 @@
 .spacer {
     flex: 1 1 auto;
 }
+
+@media only screen and (max-width: 599px) {
+    .sidenav-toggle-button {
+        display: none;
+    }
+}

src/app/player/components/video-player/video-player.component.html

@@ -1,6 +1,6 @@
 <mat-drawer-container class="main-container">
     <!-- sidebar content -->
-    <mat-drawer #drawer mode="side" opened disableClose>
+    <mat-drawer #drawer mode="side" opened disableClose class="mat-drawer">
         @defer {
             <app-sidebar [channels]="channels$ | async" />
         } @loading {
@@ -9,7 +9,7 @@
             <p>Loading...</p>
         }
     </mat-drawer>
-    <mat-drawer-content>
+    <mat-drawer-content class="drawer-content">
         <ng-container *ngIf="activeChannel$ | async as activeChannel">
             <!-- toolbar with drawer icon -->
             <app-toolbar
@@ -34,9 +34,9 @@
                                 src:
                                     activeChannel?.url +
                                     activeChannel?.epgParams,
-                                type: 'application/x-mpegURL'
-                            }
-                        ]
+                                type: 'application/x-mpegURL',
+                            },
+                        ],
                     }"
                     [class.hide-captions]="!playerSettings.showCaptions"
                 ></app-vjs-player>

src/app/player/components/video-player/video-player.component.scss

@@ -21,11 +21,23 @@
     padding: 20px;
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 599px) {
+    .main-container {
+        display: flex;
+        flex-direction: column-reverse; 
+    }
+
     .mat-drawer {
-        width: 200px;
-        min-width: 200px;
+        height: 50vh; 
+        width: 100%; 
+        position: unset;
+    }
+
+    .drawer-content {
+        height: 50vh;
+        margin-left: 0 !important; 
     }
+
 }
 
 @media (prefers-color-scheme: dark) {

src/app/player/components/vjs-player/vjs-player.component.scss

@@ -12,3 +12,10 @@
         display: none;
     }
 }
+
+
+@media only screen and (max-width: 599px) {
+    .video-js {
+        height: calc(50vh - 65px) !important;
+    }
+}

src/styles.scss

@@ -19,6 +19,7 @@ html {
 
 .mat-toolbar.mat-primary {
     background: #000;
+    color: #b8b8b8;
 }
 
 .full-width {
@@ -114,3 +115,20 @@ textarea,
 .mat-drawer-inner-container {
     overflow: hidden !important;
 }
+
+@media only screen and (max-width: 599px) {
+    .cet-container {
+        .video-js {
+            height: calc(50vh - 70px) !important;
+        }
+
+        #video-player {
+            height: calc(50vh - 80px) !important;
+        }
+
+        .scroll-viewport {
+            min-height: calc(50vh - 159px) !important
+        }
+    }
+
+}