mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-16 14:16:16 -08:00
4gray
698668f3e3
- Refactored StalkerLiveStreamLayoutComponent to improve channel selection and playback handling. - Introduced new methods for building external playback headers and handling cross-origin streams. - Updated EPG preview logic to use a more structured approach with EpgProgram type. - Improved styling for channel list items, including hover effects and active states. - Enhanced EPG view with a more responsive layout and improved item display. - Updated video player components to ensure proper sizing and overflow handling. - Added fallback handling for channel logos and improved action button visibility.
112 lines
1.8 KiB
SCSS
112 lines
1.8 KiB
SCSS
@use '@angular/material' as mat;
|
|
|
|
:host {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar {
|
|
// Width controlled by resizable directive
|
|
width: 400px; // Default, will be overridden by directive
|
|
min-width: 250px;
|
|
max-width: 600px;
|
|
border-right: 1px solid var(--mat-sys-outline-variant);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
app-portal-channels-list {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
app-category-view {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.content-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
.video-player {
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
.epg {
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-player > app-web-player-view {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.epg-content {
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.epg-content > app-epg-view {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.sidebar-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
app-region: drag;
|
|
|
|
button {
|
|
@include mat.form-field-density(-5);
|
|
app-region: no-drag;
|
|
}
|
|
}
|
|
|
|
.category-title {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.no-channel-selected {
|
|
padding: 16px;
|
|
margin: 0;
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
::ng-deep {
|
|
.video-player
|
|
> app-web-player-view
|
|
> app-art-player
|
|
> .artplayer-container {
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
}
|