mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-16 14:16:16 -08:00
feat(multi-epg): only show channels from current playlist in multi-epg view
This commit is contained in:
4gray committed
1 parent
fb650b2bdd
commit
4193a67db3
4 files changed
+344
-203
No files matched your search
@@ -24,24 +24,34 @@
|
||||
<div class="today-date">
|
||||
{{ today | momentDate: 'YYYYMMDD' : 'MMMM Do, dddd' }}
|
||||
</div>
|
||||
<button mat-icon-button (click)="zoomIn()" [disabled]="hourWidth >= 800">
|
||||
<button mat-icon-button (click)="zoomIn()" [disabled]="(hourWidth$ | async) >= 800">
|
||||
<mat-icon>zoom_in</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button [disabled]="hourWidth <= 50" (click)="zoomOut()">
|
||||
<button mat-icon-button [disabled]="(hourWidth$ | async) <= 50" (click)="zoomOut()">
|
||||
<mat-icon>zoom_out</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
[disabled]="channelsLowerRange === 0"
|
||||
(click)="previousChannels()"
|
||||
>
|
||||
Previous channels
|
||||
</button>
|
||||
<button mat-button (click)="nextChannels()">Next channels</button>
|
||||
<div class="navigation-buttons">
|
||||
<button
|
||||
mat-button
|
||||
(click)="previousChannels()"
|
||||
[disabled]="channelsLowerRange === 0"
|
||||
matTooltip="Previous channels"
|
||||
>
|
||||
<mat-icon>keyboard_arrow_up</mat-icon> Previous channels
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
(click)="nextChannels()"
|
||||
[disabled]="isLastPage"
|
||||
matTooltip="Next channels"
|
||||
>
|
||||
<mat-icon>keyboard_arrow_down</mat-icon> Next channels
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parent" #epgContainer>
|
||||
<svg id="channels-column">
|
||||
<g *ngFor="let item of channels; let i = index">
|
||||
<g *ngFor="let item of channels$ | async; let i = index; trackBy: trackByIndex">
|
||||
<!-- channel name -->
|
||||
<g class="channel">
|
||||
<rect
|
||||
@@ -49,96 +59,78 @@
|
||||
[attr.height]="barHeight"
|
||||
[attr.y]="barHeight * i + barHeight"
|
||||
stroke="black"
|
||||
></rect>
|
||||
@if (item.icon) {
|
||||
<image
|
||||
[attr.y]="barHeight * i + barHeight + 1"
|
||||
[attr.href]="item.icon"
|
||||
[attr.height]="barHeight - 2"
|
||||
width="100"
|
||||
[matTooltip]="item.name"
|
||||
></image>
|
||||
}
|
||||
@if (!item.icon) {
|
||||
<foreignObject
|
||||
[attr.y]="barHeight * i + barHeight"
|
||||
width="100"
|
||||
[attr.height]="barHeight"
|
||||
>
|
||||
<div class="channel-name">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</foreignObject>
|
||||
}
|
||||
/>
|
||||
<foreignObject
|
||||
width="100"
|
||||
[attr.height]="barHeight"
|
||||
[attr.y]="barHeight * i + barHeight"
|
||||
>
|
||||
<div class="channel-name">
|
||||
<img
|
||||
*ngIf="item.icon"
|
||||
[src]="item.icon"
|
||||
[alt]="item.name"
|
||||
style="height: 20px; width: 20px; margin-right: 8px;"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div id="epg-container">
|
||||
<svg [attr.width]="24 * hourWidth" height="100%" id="epg-svg">
|
||||
<svg [attr.width]="(hourWidth$ | async) * 24" height="100%" id="epg-svg">
|
||||
<!-- time headline -->
|
||||
<g *ngFor="let a of timeHeader; let i = index">
|
||||
<g *ngFor="let hour of timeHeader; trackBy: trackByIndex">
|
||||
<rect
|
||||
[matTooltip]="i + ':00'"
|
||||
[attr.width]="hourWidth"
|
||||
[matTooltip]="hour + ':00'"
|
||||
[attr.width]="hourWidth$ | async"
|
||||
[attr.height]="barHeight"
|
||||
[attr.x]="i * hourWidth"
|
||||
[attr.x]="hour * (hourWidth$ | async)"
|
||||
fill="#000"
|
||||
></rect>
|
||||
<text
|
||||
[attr.x]="i * hourWidth"
|
||||
[attr.x]="hour * (hourWidth$ | async)"
|
||||
y="10"
|
||||
font-size="14"
|
||||
fill="white"
|
||||
transform="translate(20,20)"
|
||||
>
|
||||
{{ i }}:00
|
||||
{{ hour }}:00
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- epg channels with programs -->
|
||||
<g *ngFor="let item of channels; let i = index">
|
||||
<g *ngFor="let item of channels$ | async; let i = index; trackBy: trackByIndex">
|
||||
<g
|
||||
*ngFor="let program of item.programs; let a = index"
|
||||
[matTooltip]="program.title"
|
||||
class="program-item"
|
||||
*ngFor="let program of item.programs; trackBy: trackByProgram"
|
||||
[attr.transform]="'translate(' + program.startPosition + ',' + (barHeight * i + barHeight) + ')'"
|
||||
class="program"
|
||||
(click)="showDescription(program)"
|
||||
>
|
||||
<!-- program item -->
|
||||
<rect
|
||||
[attr.width]="program.width"
|
||||
[attr.height]="barHeight"
|
||||
[attr.x]="program.startPosition"
|
||||
[attr.y]="barHeight * i + barHeight"
|
||||
fill="#000"
|
||||
[matTooltip]="program.title"
|
||||
></rect>
|
||||
<foreignObject
|
||||
(click)="showDescription(program)"
|
||||
[attr.width]="program.width"
|
||||
[attr.height]="barHeight"
|
||||
[attr.y]="barHeight * i + barHeight"
|
||||
[attr.x]="program.startPosition"
|
||||
>
|
||||
<div
|
||||
[innerHtml]="program.title"
|
||||
class="program-name"
|
||||
></div>
|
||||
<div class="program-title">{{ program.title }}</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
<line
|
||||
[attr.x1]="0"
|
||||
[attr.y1]="barHeight * i + barHeight"
|
||||
[attr.x2]="24 * hourWidth"
|
||||
[attr.y2]="barHeight * i + barHeight"
|
||||
stroke="#676767"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- current time line -->
|
||||
<line
|
||||
[attr.x1]="currentTimeLine"
|
||||
[attr.y1]="barHeight"
|
||||
y1="0"
|
||||
[attr.x2]="currentTimeLine"
|
||||
id="current-time-line"
|
||||
y2="1000"
|
||||
stroke="black"
|
||||
/>
|
||||
[attr.y2]="(channels$ | async)?.length * barHeight + barHeight"
|
||||
stroke="red"
|
||||
stroke-width="2"
|
||||
></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
Reference in new issue
Block a user