kangaroo-and-rabbit/karusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

[DEV] continue migration to Angular17

Browse Source
This commit is contained in:
Edouard DUPIN 2024-02-23 00:37:47 +01:00
parent d37ce25621
commit 619973459a
25 changed files with 666 additions and 614 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/app/app.module.ts
View File

@ -22,7 +22,7 @@ import {
} from './scene';
import { GenderService, DataService, PlaylistService, ArtistService, AlbumService, TrackService, ArianeService, PlayerService } from './service';
import { UploadScene } from './scene/upload/upload';
import { ElementSeriesComponent, ElementTrackComponent, ElementSeasonComponent, ElementVideoComponent, ElementPlayerAudioComponent } from './component';
import { ElementSeriesComponent, ElementTrackComponent, ElementSeasonComponent, ElementVideoComponent, ElementPlayerAudioComponent, DescriptionAreaComponent } from './component';
import { common_module_declarations, common_module_imports, common_module_providers, common_module_exports } from 'common/module';
@NgModule({
@ -35,6 +35,7 @@ import { common_module_declarations, common_module_imports, common_module_provid
ElementSeasonComponent,
ElementVideoComponent,
ElementPlayerAudioComponent,
DescriptionAreaComponent,
PopInCreateType,
HomeScene,

42
front/src/app/component/description-area/description-area.html Normal file
View File

@ -0,0 +1,42 @@
<div class="fill-title">
<div class="description-area">
@if(title) {
<div class="shadow-text title">
{{title}}
</div>
}
@if(name) {
<div class="shadow-text sub-title-main">
{{name}}
</div>
}
@if(description) {
<div class="description">
{{description}}
</div>
}
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
<div style="flex:1;"></div>
</div>
</div>
@if (cover1 && cover1.length > 0) {
<div class="cover-area">
<div class="cover">
<img src="{{cover1[0]}}"/>
</div>
</div>
}
@if (cover2 && cover2.length > 0) {
<div class="cover-area">
<div class="cover">
<img src="{{cover2[0]}}"/>
</div>
</div>
}
</div>

0
front/src/app/component/description-area/description-area.less Normal file
View File

34
front/src/app/component/description-area/description-area.ts Normal file
View File

@ -0,0 +1,34 @@
/** @file
* @author Edouard DUPIN
* @copyright 2018, Edouard DUPIN, all right reserved
* @license PROPRIETARY (see license file)
*/
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { isArrayOf, isNullOrUndefined, isNumberFinite } from 'common/utils';
import { NodeData } from 'common/model';
import { GenderService, DataService } from 'app/service';
@Component({
selector: 'description-area',
templateUrl: './description-area.html',
styleUrls: ['./description-area.less']
})
export class DescriptionAreaComponent {
@Input() title: string;
@Input() name?: string;
@Input() description?: string;
@Input() cover1?: number[];
@Input() cover2?: number[];
@Output() play = new EventEmitter<void>();
@Output() shuffle = new EventEmitter<void>();
playShuffle(event: any): void {
this.shuffle.emit();
}
playAll(event: any): void {
this.play.emit();
}
}

13
front/src/app/component/element-player-audio/element-player-audio.html
View File

@ -1,4 +1,5 @@
<div *ngIf="mediaSource">
@if(mediaSource) {
<div>
<audio width="1" height="1" src="{{mediaSource}}"
#mediaPlayer
preload
@ -30,8 +31,12 @@
<label class="unselectable flex-row-last">{{durationDisplay}}</label>
</div>
<div class="control">
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
@if(!isPlaying) {
<button (click)="onPlay()"><i class="material-icons">play_arrow</i></button>
}
@else {
<button (click)="onPause()"><i class="material-icons">pause</i></button>
}
<button (click)="onStop()"><i class="material-icons">stop</i></button>
<div style="margin:auto"></div>
<button [disabled]="havePrevious" (click)="onBefore()"><i class="material-icons">navigate_before</i></button>
@ -43,3 +48,5 @@
</div>
</div>
</div>
</div>
}

52
front/src/app/component/element-season/element-season.html
View File

@ -1,41 +1,45 @@
<div class="imgContainer-small">
<div *ngIf="covers">
<!--<data-image id="{{cover}}"></data-image>-->
@if(covers && covers.length > 0) {
<div>
<img src="{{covers[0]}}"/>
</div>
<div *ngIf="!covers" class="noImage">
</div>
}
@else {
<div class="noImage"></div>
}
</div>
<div class="season-small">
{{prefixName}} {{numberAlbum}}
</div>
<div class="description-small" *ngIf="countSubType && (!count || count == 0)">
@if(countSubType) {
<div class="description-small">
@if(!count || count == 0) {
No {{countSubType}}
}
@else {
{{count}} {{countSubType}}{{count>1?"s":""}}
}
</div>
<div class="description-small" *ngIf="countSubType && count > 1">
{{count}} {{countSubType}}s
</div>
<div class="description-small" *ngIf="countSubType && count == 1">
{{count}} {{countSubType}}
</div>
}
<div class="description-small" *ngIf="countSubType2 && (!count2 || count2 == 0)">
@if(countSubType2) {
<div class="description-small">
@if(!count2 || count2 == 0) {
No {{countSubType2}}
}
@else {
{{count2}} {{countSubType2}}{{count2>1?"s":""}}
}
</div>
<div class="description-small" *ngIf="countSubType2 && count2 > 1">
{{count2}} {{countSubType2}}s
</div>
<div class="description-small" *ngIf="countSubType2 && count2 == 1">
{{count2}} {{countSubType2}}
</div>
<div class="description-small" *ngIf="subValueData">
}
@if(subValueData) {
<div class="description-small">
{{subValues}}: {{subValueData}}
</div>
<div class="description-small" *ngIf="!description">
}
@if(!description) {
<div class="description-small">
{{description}}
</div>
}

14
front/src/app/component/element-series/element-series.html
View File

@ -1,17 +1,21 @@
<div>
<div class="count-base">
<div class="count" *ngIf="counttrack">
@if(counttrack) {
<div class="count">
{{counttrack}}
</div>
}
</div>
<div class="imgContainer-small">
<div *ngIf="covers">
@if(covers && covers.length > 0) {
<div>
<!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/>
</div>
<div *ngIf="!covers" class="noImage">
</div>
}
@else {
<div class="noImage"></div>
}
</div>
<div class="title-small">
{{name}}

4
front/src/app/component/element-type/element-type.html
View File

@ -3,9 +3,11 @@
<span class="count">{{counttrack}}</span>
</div>
<div class="imgContainer-small">
<div *ngIf="covers">
@if(covers && covers.length > 0) {
<div>
<img src="{{covers[0]}}" class="miniature-small"/>
</div>
}
</div>
<div class="title-small">
{{name}}

10
front/src/app/component/element-video/element-video.html
View File

@ -1,12 +1,14 @@
<div>
<div class="videoImgContainer">
<div *ngIf="covers">
@if(covers && covers.length > 0) {
<div>
<!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/>
</div>
<div *ngIf="!covers" class="noImage">
</div>
}
@else {
<div class="noImage"></div>
}
</div>
<div class="title-small" *ngIf="data">
{{episodeDisplay}} {{name}}

2
front/src/app/component/index.ts
View File

@ -1,3 +1,4 @@
import { DescriptionAreaComponent } from "./description-area/description-area";
import { ElementPlayerAudioComponent } from "./element-player-audio/element-player-audio";
import { ElementSeasonComponent } from "./element-season/element-season";
import { ElementSeriesComponent } from "./element-series/element-series";
@ -12,5 +13,6 @@ export {
ElementSeasonComponent,
ElementPlayerAudioComponent,
ElementTrackComponent,
DescriptionAreaComponent,
};

49
front/src/app/scene/album/album.html
View File

@ -1,49 +1,22 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area">
<div class="title">
{{name}}
</div>
<div class="title">
{{albumName}}
</div>
<div class="description" *ngIf="albumDescription">
{{albumDescription}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
@if (artistCovers) {
<div class="cover-area">
<div class="cover">
<img src="{{artistCovers[0]}}"/>
</div>
</div>
}
@if (albumCovers) {
<div class="cover-area">
<div class="cover">
<img src="{{albumCovers[0]}}"/>
</div>
</div>
}
</div>
<description-area
[title]="name"
[name]="albumName"
[description]="albumDescription"
[cover1]="artistCovers"
[cover2]="albumCovers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
@if (tracks) {
<div class="fill-content colomn_single">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
@for (data of tracks; track data.id;) {
<app-element-track
[element]="data"
(click)="onSelectTrack($event, data.id)"
(auxclick)="onSelectTrack($event, data.id)"></app-element-track>
(auxclick)="onSelectTrack($event, data.id)"/>
} @empty {
Aucune piste accessible.
}

4
front/src/app/scene/album/album.ts
View File

@ -108,7 +108,7 @@ export class AlbumScene implements OnInit {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
}
}
playAll(event: any): void {
playAll(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);
@ -116,7 +116,7 @@ export class AlbumScene implements OnInit {
this.playerService.clear();
this.playerService.setNewPlaylist(elements);
}
playShuffle(event: any): void {
playShuffle(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);

49
front/src/app/scene/album/albums.html
View File

@ -1,30 +1,13 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area">
<div class="title">
{{name}}
</div>
<div class="description" *ngIf="description">
{{description}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
<div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<description-area
[title]="name"
[description]="description"
[cover1]="covers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="albums">
<div class="clear"></div>
<div class="title">Album<span *ngIf="albums.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div class="title">Album{{albums.length > 1?"s":""}}: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div *ngFor="let data of albums"
class="item-list"
(click)="onSelectAlbum($event, data.id)"
@ -35,20 +18,20 @@
countSubType="Track"
[countSubTypeCallBack]="countTrack"
subValues="Artist"
[subValuesCallBack]="getArtistsString"
></app-element-season>
[subValuesCallBack]="getArtistsString"/>
</div>
</div>
<div class="fill-content colomn_mutiple" *ngIf="tracks">
@if(tracks) {
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<div *ngFor="let data of tracks" class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
@for (data of tracks; track data.id;) {
<div class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-video
[element]="data"
></app-element-video>
[element]="data"/>
</div>
}
</div>
}
<div class="clear-end"></div>
</div>

6
front/src/app/scene/album/albums.ts
View File

@ -45,9 +45,9 @@ export class AlbumsScene implements OnInit {
return this.albumService.getArtists(albumId);
}
ngOnInit() {
const self = this;
this.getArtistsString = (id: number) => { return self.getArtistsStringCallback(id); };
this.countTrack = (id: number) => { return self.countTrackCallback(id); };
let self = this;
self.name = "All Albums";
self.description = "View all albums (no specific artist)";
@ -94,7 +94,7 @@ export class AlbumsScene implements OnInit {
this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 });
}
}
playAll(event: any): void {
playAll(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()
@ -109,7 +109,7 @@ export class AlbumsScene implements OnInit {
console.log(`error to get list o ftrack ...`)
});
}
playShuffle(event: any): void {
playShuffle(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()

47
front/src/app/scene/artist/artist-album.html
View File

@ -1,44 +1,23 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area">
<div class="shadow-text title">
{{name}}
</div>
<div class="shadow-text sub-title-main">
{{albumName}}
</div>
<div class="description" *ngIf="albumDescription">
{{albumDescription}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
<div class="cover-area" *ngIf="artistCovers" >
<div class="cover">
<img src="{{artistCovers[0]}}"/>
</div>
</div>
<div class="cover-area" *ngIf="albumCovers" >
<div class="cover">
<img src="{{albumCovers[0]}}"/>
</div>
</div>
</div>
<description-area
[title]="name"
[name]="albumName"
[description]="albumDescription"
[cover1]="artistCovers"
[cover2]="albumCovers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="tracks">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
@for (data of tracks; track data.id;) {
<app-element-track
*ngFor="let data of tracks"
[element]="data"
(click)="onSelectTrack($event, data.id)"
(auxclick)="onSelectTrack($event, data.id)"></app-element-track>
} @empty {
Aucune piste accessible.
}
</div>
<div class="clear-end"></div>
</div>

4
front/src/app/scene/artist/artist-album.ts
View File

@ -99,7 +99,7 @@ export class ArtistAlbumScene implements OnInit {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
}
}
playAll(event: any): void {
playAll(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);
@ -107,7 +107,7 @@ export class ArtistAlbumScene implements OnInit {
this.playerService.clear();
this.playerService.setNewPlaylist(elements);
}
playShuffle(event: any): void {
playShuffle(): void {
let elements: number[] = [];
for (let iii = 0; iii < this.tracks.length; iii++) {
elements.push(this.tracks[iii].id);

43
front/src/app/scene/artist/artist.html
View File

@ -1,31 +1,14 @@
<div class="generic-page">
<div class="fill-title">
<div class="description-area ">
<div class="shadow-text title">
{{name}}
</div>
<div class="description" *ngIf="description">
{{description}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
<div class="cover-area" *ngIf="covers" >
<div class="cover">
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<div class="fill-content colomn_single" *ngIf="albums">
<description-area
[title]="name"
[description]="description"
[cover1]="covers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
@if(albums) {
<div class="fill-content colomn_single">
<div class="clear"></div>
<div class="title" *ngIf="albums.length > 1">Albums:</div>
<div class="title" *ngIf="albums.length == 1">Album:</div>
<div class="title">Album{{albums.length > 1?"s":""}}:</div>
<div *ngFor="let data of albums" class="item-list" (click)="onSelectAlbum($event, data.id)" (auxclick)="onSelectAlbum($event, data.id)">
<app-element-season
[element]="data"
@ -34,15 +17,17 @@
></app-element-season>
</div>
</div>
<div class="fill-content colomn_mutiple" *ngIf="tracks">
}
@if(tracks) {
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div>
<div class="title">Track{{tracks.length > 1?"s":""}}:</div>
<div *ngFor="let data of tracks" class="item item-video" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-video
[element]="data"
></app-element-video>
</div>
</div>
}
<div class="clear-end"></div>
</div>

4
front/src/app/scene/artist/artist.ts
View File

@ -100,7 +100,7 @@ export class ArtistScene implements OnInit {
return this.albumService.getAllTracksForAlbums(elements);
}
playAll(event: any): void {
playAll(): void {
this.playerService.clear();
let self = this;
this.getAllTracksIds()
@ -111,7 +111,7 @@ export class ArtistScene implements OnInit {
console.log(`error to get list o ftrack ...`)
});
}
playShuffle(event: any): void {
playShuffle(): void {
this.playerService.clear();
let self = this;
this.getAllTracksIds()

35
front/src/app/scene/artist/artists.html
View File

@ -1,31 +1,15 @@
<div class="generic-page">
<div class="fill-title">
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="shadow-text title">
{{name}}
</div>
<div class="description" *ngIf="description">
{{description}}
</div>
<div class="button-area">
<button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i>
</button>
<button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i>
</button>
</div>
</div>
<div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<description-area
[title]="name"
[description]="description"
[cover1]="covers"
(play)="playAll()"
(shuffle)="playShuffle()"/>
<div class="fill-content colomn_single" *ngIf="artists">
<div class="clear"></div>
<div class="title">Artist<span *ngIf="artists.length > 1">s</span>: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
<div *ngFor="let data of artists" class="item-list" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<div class="title">Artist{{artists.length > 1?"s":""}}: <app-entry placeholder="Search..." (changeValue)="onSearch($event)"></app-entry></div>
@for (data of artists; track data.id;) {
<div class="item-list" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<app-element-season
[element]="data"
countSubType="Album"
@ -34,6 +18,7 @@
[countSubType2CallBack]="countTrack"
></app-element-season>
</div>
}
</div>
<div class="clear-end"></div>
</div>

4
front/src/app/scene/artist/artists.ts
View File

@ -71,7 +71,7 @@ export class ArtistsScene implements OnInit {
countAlbumCallback(artistId: number): Promise<Number> {
return this.artistService.countAlbum(artistId);
}
playAll(event: any): void {
playAll(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()
@ -86,7 +86,7 @@ export class ArtistsScene implements OnInit {
console.log(`error to get list o ftrack ...`)
});
}
playShuffle(event: any): void {
playShuffle(): void {
this.playerService.clear();
let self = this;
this.trackService.getData()

16
front/src/app/scene/gender/gender.html
View File

@ -1,9 +1,11 @@
<div class="generic-page">
<div class="fill-title colomn_mutiple">
<div class="cover-area">
<div class="cover" *ngIf="cover != null" >
@if (cover != null) {
<div class="cover">
<img src="{{cover}}"/>
</div>
}
</div>
<div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title">
@ -16,15 +18,19 @@
</div>
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div *ngFor="let data of artists" class="item" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<app-element-artist [element]="data"></app-element-artist>
@for (data of artists; track data.id;) {
<div class="item" (click)="onSelectArtist($event, data.id)" (auxclick)="onSelectArtist($event, data.id)">
<!--<app-element-artist [element]="data"/>-->
</div>
}
</div>
<div class="fill-content colomn_mutiple">
<div class="clear"></div>
<div *ngFor="let data of tracks" class="item item-track" (click)="onSelectMedia($event, data.id)" (auxclick)="onSelectMedia($event, data.id)">
<app-element-track [element]="data"></app-element-track>
@for (data of tracks; track data.id;) {
<div class="item item-track" (click)="onSelectTrack($event, data.id)" (auxclick)="onSelectTrack($event, data.id)">
<app-element-track [element]="data"/>
</div>
}
</div>
<div class="clear"></div>
</div>

4
front/src/app/scene/home/home.html
View File

@ -3,9 +3,11 @@
Karusic
</div>
<div class="fill-all colomn_mutiple">
<div *ngFor="let data of dataList" class="item-home" (click)="onSelectType($event, data.id)" (auxclick)="onSelectType($event, data.id)">
@for (data of dataList; track data.id) {
<div class="item-home" (click)="onSelectType($event, data.id)" (auxclick)="onSelectType($event, data.id)">
<app-element-type [element]="data"></app-element-type>
</div>
}
<div class="clear"></div>
</div>
</div>

4
front/src/app/scene/playlist/playlist.html
View File

@ -1,8 +1,10 @@
<div class="generic-page">
<div class="fill-all colomn_mutiple">
<div *ngFor="let data of tracks" class="item item-track" (click)="onSelectTrack($event, data)" (auxclick)="onSelectTrack($event, data)">
@for (data of tracks; track data.id) {
<div class="item item-track" (click)="onSelectTrack($event, data)" (auxclick)="onSelectTrack($event, data)">
<app-element-track [element]="data"></app-element-track>
</div>
}
<div class="clear"></div>
</div>
</div>

80
front/src/app/scene/track/track.html
View File

@ -12,44 +12,58 @@
Please wait.
</div>
</div>
<div class="fill-all" *ngIf="!mediaIsNotFound && !mediaIsLoading && !playTrack">
@if(!mediaIsNotFound && !mediaIsLoading && !playTrack) {
<div class="fill-all">
<div class="title">
{{name}}
</div>
<div class="cover-full">
<div class="cover">
<div class="cover-image" *ngIf="covers">
@if (covers && covers.length > 0) {
<div class="cover-image" *ngIf="">
<img src="{{covers[0]}}"/>
</div>
<div class="cover-no-image" *ngIf="covers"></div>
}
@else {
<div class="cover-no-image"></div>
}
<div class="cover-button">
<button (click)="onRequirePlay()">
<i class="material-icons big-button">play_circle_outline</i>
</button>
</div>
</div>
<div class="cover-button-next" *ngIf="haveNext !== null">
@if (haveNext !== null) {
<div class="cover-button-next">
<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
<i class="material-icons big-button">arrow_forward_ios</i>
</button>
</div>
<div class="cover-button-previous" *ngIf="havePrevious !== null">
}
@if (havePrevious !== null) {
<div class="cover-button-previous">
<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
<i class="material-icons big-button">arrow_back_ios</i>
</button>
</div>
}
</div>
<div class="clear"></div>
<div class="episode" *ngIf="artistName!=null">
@if (artistName!=null) {
<div class="episode">
<b>Artist:</b> {{artistName}}
</div>
<div class="episode" *ngIf="albumName!=null">
}
@if (albumName!=null) {
<div class="episode">
<b>Album:</b> {{albumName}}
</div>
<div class="episode" *ngIf="episode!=null">
}
@if (episode!=null) {
<div class="episode">
<b>Episode:</b> {{episode}}
</div>
}
<div class="episode">
<b>generatedName:</b> {{generatedName}}
</div>
@ -57,11 +71,13 @@
{{description}}
</div>
</div>
<div class="fill-all bg-black" *ngIf="playTrack">
}
@if (playTrack) {
<div class="fill-all bg-black">
<div class="track"
#globalVideoElement
(mousemove)="startHideTimer()"
(fullscreenchange)="onFullscreenChange($event)">
(fullscreenchange)="onFullscreenChange()">
<div class="track-elem">
<video src="{{trackSource}}"
#trackPlayer
@ -78,9 +94,14 @@
<!--<p>Your browser does not support HTML5 track player. download track: <a href="{{trackSource}}>link here</a>.</p>-->
</video>
</div>
<div class="controls" *ngIf="!displayNeedHide || !isPlaying">
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
<button (click)="onPause()" *ngIf="isPlaying" ><i class="material-icons">pause</i></button>
@if (!displayNeedHide || !isPlaying) {
<div class="controls">
@if (!isPlaying) {
<button (click)="onPlay()"><i class="material-icons">play_arrow</i></button>
}
@else {
<button (click)="onPause()"><i class="material-icons">pause</i></button>
}
<button (click)="onStop()" ><i class="material-icons">stop</i></button>
<div class="timer">
<div>
@ -98,15 +119,21 @@
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
<!--<button (click)="onNext()"><i class="material-icons">navigate_next</i></button>-->
<!--<button (click)="onMore()" ><i class="material-icons">more_vert</i></button>-->
<button (click)="onFullscreen()" *ngIf="!isFullScreen"><i class="material-icons">fullscreen</i></button>
<button (click)="onFullscreenExit()" *ngIf="isFullScreen"><i class="material-icons">fullscreen_exit</i></button>
@if (!isFullScreen) {
<button (click)="onFullscreen()"><i class="material-icons">fullscreen</i></button>
}
@else {
<button (click)="onFullscreenExit()"><i class="material-icons">fullscreen_exit</i></button>
}
<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</i></button>-->
<button (click)="onVolumeMenu()" ><i class="material-icons">volume_up</i></button>
<button class="bigPause" (click)="onPauseToggle()"><i *ngIf="!isPlaying" class="material-icons">play_circle_outline</i></button>
<button class="bigRewind" (click)="onRewind()"><i *ngIf="!isPlaying" class="material-icons">fast_rewind</i></button>
<button class="bigForward" (click)="onForward()"><i *ngIf="!isPlaying" class="material-icons">fast_forward</i></button>
@if (!isPlaying) {
<button class="bigPause" (click)="onPauseToggle()"><i class="material-icons">play_circle_outline</i></button>
<button class="bigRewind" (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button class="bigForward" (click)="onForward()"><i class="material-icons">fast_forward</i></button>
}
</div>
}
<div class="title-inline" *ngIf="!isFullScreen || !isPlaying">
{{generatedName}}
@ -116,18 +143,25 @@
<i class="material-icons big-button">highlight_off</i>
</button>
</div>
<div class="volume" *ngIf="displayVolumeMenu && (!displayNeedHide || !isPlaying)">
@if (displayVolumeMenu && (!displayNeedHide || !isPlaying)) {
<div class="volume">
<div class="volume-menu">
<div class="slidecontainer">
<input type="range" min="0" max="100" class="slider"
[value]="volumeValue"
(input)="onVolume($event.target)">
</div>
<button (click)="onVolumeMute()" *ngIf="!trackPlayer.muted"><i class="material-icons">volume_mute</i></button>
<button (click)="onVolumeUnMute()" *ngIf="trackPlayer.muted"><i class="material-icons">volume_off</i></button>
@if (!trackPlayer.muted) {
<button (click)="onVolumeMute()"><i class="material-icons">volume_mute</i></button>
}
@else {
<button (click)="onVolumeUnMute()"><i class="material-icons">volume_off</i></button>
}
</div>
</div>
}
</div>
</div>
}
<canvas #canvascreenshoot style="overflow:auto"></canvas>
</div>

21
front/src/app/scene/upload/upload.html
View File

@ -32,12 +32,14 @@
</tbody>
</table>
</div>
<div *ngIf="this.parsedElement.length !== 0" class="title">
@if(parsedElement.length !== 0) {
<div class="title">
Meta-data:
</div>
}
<div class="clear"><br/></div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all">
@if(parsedElement.length !== 0) {
<div class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
@ -59,8 +61,8 @@
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="genreId"
(ngModelChange)="onChangeGender($event)">
<!--<select [ngModel]="genreId"-->
<select (ngModelChange)="onChangeGender($event)">
<option *ngFor="let element of listGender" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
@ -111,8 +113,8 @@
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="albumId"
(ngModelChange)="onChangeAlbum($event)">
<select [ngModel]="albumId">
<!--(ngModelChange)="onChangeAlbum($event)">-->
<option *ngFor="let element of listAlbum" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
@ -207,7 +209,9 @@
</table>
</div>
</div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all">
}
@if(parsedElement.length !== 0) {
<div class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
@ -233,6 +237,7 @@
</table>
</div>
</div>
}
</div>
<upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize"