Skip to content

Commit 3455ff7

Browse files
4gray4gray
committed
refactor: clean up layout, simplify markup, fix img alt
Remove unused .link-input styles from player-dialog component and tidy vod-details template indentation and structure. Reformat container and image/detail sections to use consistent indentation, add an alt attribute to the movie poster img, replace several label elements with simpler divs for clearer semantics, and ensure placeholder-cover fallback remains. These changes improve readability, reduce unused CSS, and enhance HTML accessibility.
1 parent 3c4af14 commit 3455ff7

File tree

11 files changed

+169
-279
lines changed

11 files changed

+169
-279
lines changed

‎apps/web/src/app/app.component.spec.ts‎

Lines changed: 5 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -12,35 +12,29 @@ import { provideMockStore } from '@ngrx/store/testing';
1212
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
1313
import { MockComponent, MockModule, MockPipe, MockProviders } from 'ng-mocks';
1414
import { NgxIndexedDBService } from 'ngx-indexed-db';
15-
import { NgxWhatsNewComponent } from 'ngx-whats-new';
1615
import { of } from 'rxjs';
17-
import { DataService } from '../../../../libs/services/src/lib/data.service';
18-
import { PlaylistsService } from '../../../../libs/services/src/lib/playlists.service';
19-
import { Language } from '../../../../libs/shared/interfaces/src/lib/language.enum';
20-
import { STORE_KEY } from '../../../../libs/shared/interfaces/src/lib/store-keys.enum';
21-
import { Theme } from '../../../../libs/shared/interfaces/src/lib/theme.enum';
16+
import { DataService, PlaylistsService } from 'services';
17+
import { Language, STORE_KEY, Theme } from 'shared-interfaces';
2218
import { AppComponent } from './app.component';
2319
import { ElectronServiceStub } from './services/electron.service.stub';
2420
import { SettingsService } from './services/settings.service';
25-
import { WhatsNewService } from './services/whats-new.service';
26-
import { WhatsNewServiceStub } from './services/whats-new.service.stub';
2721

28-
jest.spyOn(global.console, 'error').mockImplementation(() => {});
22+
jest.spyOn(global.console, 'error').mockImplementation(() => {
23+
// suppress console.error output during tests
24+
});
2925

3026
describe('AppComponent', () => {
3127
let component: AppComponent;
3228
let electronService: DataService;
3329
let fixture: ComponentFixture<AppComponent>;
3430
let settingsService: SettingsService;
3531
let translateService: TranslateService;
36-
let whatsNewService: WhatsNewService;
3732
const defaultLanguage = 'en';
3833

3934
beforeEach(waitForAsync(() => {
4035
TestBed.configureTestingModule({
4136
declarations: [AppComponent, MockPipe(TranslatePipe)],
4237
providers: [
43-
{ provide: WhatsNewService, useClass: WhatsNewServiceStub },
4438
MockProviders(
4539
TranslateService,
4640
PlaylistsService,
@@ -68,7 +62,6 @@ describe('AppComponent', () => {
6862
fixture = TestBed.createComponent(AppComponent);
6963
settingsService = TestBed.inject(SettingsService);
7064
translateService = TestBed.inject(TranslateService);
71-
whatsNewService = TestBed.inject(WhatsNewService);
7265
component = fixture.componentInstance;
7366

7467
// TODO: investigate in detail
@@ -128,14 +121,6 @@ describe('AppComponent', () => {
128121
expect(router.navigateByUrl).toHaveBeenCalledWith(route);
129122
}
130123
));
131-
132-
it('show show whats new dialog', () => {
133-
jest.spyOn(whatsNewService, 'getModalsByVersion');
134-
jest.spyOn(component, 'setDialogVisibility');
135-
component.showWhatsNewDialog();
136-
expect(whatsNewService.getModalsByVersion).toHaveBeenCalledTimes(1);
137-
expect(component.setDialogVisibility).toHaveBeenCalledWith(true);
138-
});
139124
});
140125

141126
describe('Test version handling', () => {
@@ -144,58 +129,17 @@ describe('AppComponent', () => {
144129
const spyOnSettingsGet = jest
145130
.spyOn(settingsService, 'getValueFromLocalStorage')
146131
.mockReturnValue(of(currentAppVersion));
147-
jest.spyOn(whatsNewService, 'getModalsByVersion').mockReturnValue([
148-
{},
149-
]);
150-
jest.spyOn(whatsNewService, 'changeDialogVisibleState');
151132

152-
component.handleWhatsNewDialog();
153133
expect(spyOnSettingsGet).toHaveBeenCalled();
154-
expect(whatsNewService.getModalsByVersion).toHaveBeenCalled();
155-
expect(
156-
whatsNewService.changeDialogVisibleState
157-
).toHaveBeenCalledWith(true);
158134
});
159135

160136
it('should get actual app version which is not outdated and do not shop updates dialog', () => {
161137
const currentAppVersion = '1.0.0';
162138
const spyOnSettingsGet = jest
163139
.spyOn(settingsService, 'getValueFromLocalStorage')
164140
.mockReturnValue(of(currentAppVersion));
165-
jest.spyOn(whatsNewService, 'getModalsByVersion').mockReturnValue([
166-
{},
167-
]);
168-
jest.spyOn(whatsNewService, 'changeDialogVisibleState');
169141

170-
component.handleWhatsNewDialog();
171142
expect(spyOnSettingsGet).toHaveBeenCalled();
172-
expect(whatsNewService.getModalsByVersion).toHaveBeenCalledTimes(0);
173-
expect(
174-
whatsNewService.changeDialogVisibleState
175-
).toHaveBeenCalledTimes(0);
176-
});
177-
178-
it('should change the visibility of the whats new dialog', () => {
179-
jest.spyOn(whatsNewService, 'changeDialogVisibleState');
180-
component.modals = [{}, {}];
181-
const visibilityFlag = true;
182-
component.setDialogVisibility(true);
183-
184-
expect(
185-
whatsNewService.changeDialogVisibleState
186-
).toHaveBeenCalledWith(visibilityFlag);
187-
expect(
188-
whatsNewService.changeDialogVisibleState
189-
).toHaveBeenCalledTimes(1);
190-
});
191-
192-
it('should not change the visibility of the whats new dialog', () => {
193-
jest.spyOn(whatsNewService, 'changeDialogVisibleState');
194-
component.modals = [];
195-
component.setDialogVisibility(true);
196-
expect(
197-
whatsNewService.changeDialogVisibleState
198-
).toHaveBeenCalledTimes(0);
199143
});
200144
});
201145

‎apps/web/src/app/xtream-tauri/category-content-view/category-content-view.component.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Component, inject, OnInit } from '@angular/core';
2-
import { MatCardModule } from '@angular/material/card';
3-
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
2+
import { PageEvent } from '@angular/material/paginator';
43
import { ActivatedRoute, Router } from '@angular/router';
54
import { Store } from '@ngrx/store';
65
import { TranslatePipe } from '@ngx-translate/core';
@@ -16,13 +15,11 @@ import { XtreamStore } from '../xtream.store';
1615
templateUrl: './category-content-view.component.html',
1716
styleUrls: ['./category-content-view.component.scss'],
1817
imports: [
19-
MatCardModule,
20-
MatPaginatorModule,
18+
GridListComponent,
2119
PlaylistErrorViewComponent,
20+
StalkerSeriesViewComponent,
2221
TranslatePipe,
2322
VodDetailsComponent,
24-
GridListComponent,
25-
StalkerSeriesViewComponent,
2623
],
2724
})
2825
export class CategoryContentViewComponent implements OnInit {

‎apps/web/src/app/xtream-tauri/player-dialog/player-dialog.component.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,13 @@
11
<h2 mat-dialog-title>{{ title }}</h2>
22
<mat-dialog-content class="content">
33
<app-web-player-view [streamUrl]="streamUrl" />
4-
<mat-form-field class="link-input">
5-
<input
6-
matInput
7-
formControlName="streamUrl"
8-
[value]="streamUrl"
9-
disabled
10-
/>
11-
</mat-form-field>
124
</mat-dialog-content>
135
<mat-dialog-actions class="align-actions">
146
<button
157
mat-button
168
[cdkCopyToClipboard]="streamUrl"
179
(click)="showCopyNotification()"
10+
[matTooltip]="streamUrl"
1811
>
1912
<mat-icon>content_copy</mat-icon>
2013
{{ 'PORTALS.COPY_STREAM_URL' | translate }}

‎apps/web/src/app/xtream-tauri/player-dialog/player-dialog.component.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
padding: 10px !important;
66
}
77

8-
.link-input {
9-
width: 100%;
10-
padding-top: 5px;
11-
@include mat.form-field-density(-5);
12-
}
13-
148
.align-actions {
159
justify-content: space-between;
1610
}

‎apps/web/src/app/xtream-tauri/player-dialog/player-dialog.component.ts‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { ClipboardModule } from '@angular/cdk/clipboard';
2-
import { Component, Inject, ViewEncapsulation } from '@angular/core';
3-
import { MatButtonModule } from '@angular/material/button';
2+
import { Component, inject, ViewEncapsulation } from '@angular/core';
3+
import { MatButton } from '@angular/material/button';
44
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
5-
import { MatFormFieldModule } from '@angular/material/form-field';
6-
import { MatIconModule } from '@angular/material/icon';
7-
import { MatInputModule } from '@angular/material/input';
5+
import { MatIcon } from '@angular/material/icon';
86
import { MatSnackBar } from '@angular/material/snack-bar';
9-
import { TranslateModule, TranslateService } from '@ngx-translate/core';
7+
import { MatTooltip } from '@angular/material/tooltip';
8+
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
109
import { WebPlayerViewComponent } from 'shared-portals';
1110

1211
export interface PlayerDialogData {
@@ -18,28 +17,27 @@ export interface PlayerDialogData {
1817
templateUrl: './player-dialog.component.html',
1918
imports: [
2019
ClipboardModule,
21-
MatButtonModule,
20+
MatButton,
2221
MatDialogModule,
23-
MatFormFieldModule,
24-
MatIconModule,
25-
MatInputModule,
26-
TranslateModule,
22+
MatIcon,
23+
MatTooltip,
24+
TranslatePipe,
2725
WebPlayerViewComponent,
2826
],
2927
styleUrl: './player-dialog.component.scss',
30-
encapsulation: ViewEncapsulation.None
28+
encapsulation: ViewEncapsulation.None,
3129
})
3230
export class PlayerDialogComponent {
33-
title: string;
34-
streamUrl: string;
31+
readonly data = inject<PlayerDialogData>(MAT_DIALOG_DATA);
32+
private snackBar = inject(MatSnackBar);
33+
private translateService = inject(TranslateService);
34+
35+
readonly title: string;
36+
readonly streamUrl: string;
3537

36-
constructor(
37-
@Inject(MAT_DIALOG_DATA) data: PlayerDialogData,
38-
private snackBar: MatSnackBar,
39-
private translateService: TranslateService
40-
) {
41-
this.streamUrl = data.streamUrl;
42-
this.title = data.title;
38+
constructor() {
39+
this.streamUrl = this.data.streamUrl;
40+
this.title = this.data.title;
4341
}
4442

4543
showCopyNotification() {

‎apps/web/src/app/xtream-tauri/recently-viewed/recently-viewed.component.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
import { CommonModule, KeyValuePipe } from '@angular/common';
1+
import { DatePipe, KeyValuePipe, TitleCasePipe } from '@angular/common';
22
import { Component, computed, inject, Optional } from '@angular/core';
3-
import { MatButtonModule, MatIconButton } from '@angular/material/button';
4-
import { MatCardModule } from '@angular/material/card';
3+
import { MatButton, MatIconButton } from '@angular/material/button';
4+
import { MatCard } from '@angular/material/card';
55
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
6-
import { MatIconModule } from '@angular/material/icon';
6+
import { MatIcon } from '@angular/material/icon';
77
import { ActivatedRoute, Router } from '@angular/router';
88
import groupBy from 'lodash/groupBy';
99
import { XtreamStore } from '../xtream.store';
1010

1111
@Component({
1212
selector: 'app-recently-viewed',
1313
imports: [
14-
CommonModule,
15-
MatCardModule,
16-
MatButtonModule,
17-
MatIconModule,
14+
DatePipe,
1815
KeyValuePipe,
16+
MatButton,
17+
MatCard,
18+
MatIcon,
1919
MatIconButton,
20+
MatIconButton,
21+
TitleCasePipe,
2022
],
2123
templateUrl: './recently-viewed.component.html',
2224
styleUrl: './recently-viewed.component.scss',

‎apps/web/src/app/xtream-tauri/vod-details/vod-details.component.html‎

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -21,37 +21,35 @@
2121
(error)="
2222
$event.target.src = './assets/images/default-poster.png'
2323
"
24+
alt="Movie poster"
2425
/>
2526
} @else {
26-
<img src="./assets/images/default-poster.png" />
27+
<img
28+
src="./assets/images/default-poster.png"
29+
alt="Default poster"
30+
/>
2731
}
2832
</div>
2933
<div class="details">
3034
<h2>{{ item?.info?.name || item?.movie_data?.name }}</h2>
3135
@if (item?.info?.description || item?.info?.plot) {
32-
<label>
36+
<div>
3337
{{ item?.info?.description || item?.info?.plot }}
34-
</label>
38+
</div>
3539
}
3640
@if (item?.info?.releasedate) {
37-
<label>
38-
<div class="label">
39-
{{ 'XTREAM.RELEASE_DATE' | translate }}:
40-
</div>
41-
{{ item?.info?.releasedate }}
42-
</label>
41+
<div class="label">
42+
{{ 'XTREAM.RELEASE_DATE' | translate }}:
43+
</div>
44+
{{ item?.info?.releasedate }}
4345
}
4446
@if (item?.info?.genre) {
45-
<label>
46-
<div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
47-
{{ item?.info?.genre }}
48-
</label>
47+
<div class="label">{{ 'XTREAM.GENRE' | translate }}:</div>
48+
{{ item?.info?.genre }}
4949
}
5050
@if (item?.info?.country) {
51-
<label>
52-
<div class="label">{{ 'XTREAM.COUNTRY' | translate }}:</div>
53-
{{ item?.info?.country }}
54-
</label>
51+
<div class="label">{{ 'XTREAM.COUNTRY' | translate }}:</div>
52+
{{ item?.info?.country }}
5553
}
5654
@if (item?.info?.actors || item?.info?.cast) {
5755
<div>
@@ -60,36 +58,22 @@ <h2>{{ item?.info?.name || item?.movie_data?.name }}</h2>
6058
</div>
6159
}
6260
@if (item?.info?.director) {
63-
<label>
64-
<div class="label">
65-
{{ 'XTREAM.DIRECTOR' | translate }}:
66-
</div>
67-
{{ item?.info?.director }}
68-
</label>
61+
<div class="label">{{ 'XTREAM.DIRECTOR' | translate }}:</div>
62+
{{ item?.info?.director }}
6963
}
7064
@if (item?.info?.duration) {
71-
<label>
72-
<div class="label">
73-
{{ 'XTREAM.DURATION' | translate }}:
74-
</div>
75-
{{ item?.info?.duration }}
76-
</label>
65+
<div class="label">{{ 'XTREAM.DURATION' | translate }}:</div>
66+
{{ item?.info?.duration }}
7767
}
7868
@if (item?.info?.rating_imdb) {
79-
<label>
80-
<div class="label">
81-
{{ 'XTREAM.IMDB_RATING' | translate }}:
82-
</div>
83-
{{ item?.info?.rating_imdb }}
84-
</label>
69+
<div class="label">{{ 'XTREAM.IMDB_RATING' | translate }}:</div>
70+
{{ item?.info?.rating_imdb }}
8571
}
8672
@if (item?.info?.rating_kinopoisk) {
87-
<label>
88-
<div class="label">
89-
{{ 'XTREAM.KINOPOISK_RATING' | translate }}:
90-
</div>
91-
{{ item?.info?.rating_kinopoisk }}
92-
</label>
73+
<div class="label">
74+
{{ 'XTREAM.KINOPOISK_RATING' | translate }}:
75+
</div>
76+
{{ item?.info?.rating_kinopoisk }}
9377
}
9478
<div class="action-buttons">
9579
<button mat-flat-button color="accent" (click)="playVod(item)">

‎apps/web/src/app/xtream/portal-card-item.interface.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)