mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 17:06:15 -08:00
4gray
3bf328343b
Refactor the info-overlay template to introduce a structured EPG layout: replace the previous flat channel-logo + content structure with an .epg-layout wrapper that groups .channel-logo and a richer .content area. Split content into .content-header (separate program title and channel name), conditional program description rendering, and a program-timeline containing explicit start/end times and a progress track. Remove fixed image width attribute and rely on responsive CSS. Revamp component SCSS: import refined fonts, increase overlay max-height, add horizontal padding, and add new styles for .epg-layout, .channel-logo, .content, .content-header, .program-title and related elements. Add animations, improved image handling (object-fit + drop shadow), and layout spacing to support varying content lengths and improve visual hierarchy. These changes improve responsiveness, accessibility of EPG text display, and visual polish of the overlay.
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { NgStyle } from '@angular/common';
|
|
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
|
|
import { MomentDatePipe } from '@iptvnator/pipes';
|
|
import { TranslatePipe } from '@ngx-translate/core';
|
|
import moment from 'moment';
|
|
import { Channel, EpgProgram } from 'shared-interfaces';
|
|
|
|
@Component({
|
|
imports: [MomentDatePipe, NgStyle, TranslatePipe],
|
|
selector: 'app-info-overlay',
|
|
templateUrl: './info-overlay.component.html',
|
|
styleUrls: ['./info-overlay.component.scss'],
|
|
})
|
|
export class InfoOverlayComponent implements OnChanges {
|
|
/** Active channel */
|
|
@Input() channel: Channel | undefined;
|
|
|
|
/** Current EPG program */
|
|
@Input() epgProgram: EpgProgram | undefined;
|
|
|
|
/** Visibility flag of the overlay popup */
|
|
isVisible = false;
|
|
|
|
/** Program duration */
|
|
generalDuration!: number;
|
|
|
|
/** Finished duration */
|
|
finishedDuration!: number;
|
|
|
|
/** Program start time */
|
|
start: any | undefined;
|
|
|
|
/** Program end time */
|
|
stop: any | undefined;
|
|
|
|
/** Timeout for the overlay visibility */
|
|
private currentTimeout: any;
|
|
|
|
/**
|
|
* Calculates the necessary information for the visualization in the overview popup
|
|
* @param changes component input changes
|
|
*/
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (changes['channel'] && changes['channel'].currentValue) {
|
|
clearTimeout(this.currentTimeout);
|
|
this.isVisible = true;
|
|
this.currentTimeout = setTimeout(() => {
|
|
this.isVisible = false;
|
|
}, 10000);
|
|
}
|
|
if (changes['epgProgram'] && changes['epgProgram'].currentValue) {
|
|
const { stop, start } = changes['epgProgram'].currentValue;
|
|
this.setProgramDuration(start, stop);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Calculates and sets the duration of the program for the progress bar visualization
|
|
* @param start program start time
|
|
* @param stop program stop time
|
|
*/
|
|
setProgramDuration(start: number, stop: number): void {
|
|
this.stop = moment(stop, 'YYYYMMDDHHmm ZZ');
|
|
this.start = moment(start, 'YYYYMMDDHHmm ZZ');
|
|
const timeNow = moment(Date.now());
|
|
|
|
this.generalDuration = moment
|
|
.duration(this.stop.diff(this.start))
|
|
.asMilliseconds();
|
|
|
|
this.finishedDuration = moment
|
|
.duration(this.stop.diff(timeNow))
|
|
.asMilliseconds();
|
|
}
|
|
}
|