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

[DEV] migration angular17 (not tested)

Browse Source
This commit is contained in:
Edouard DUPIN 2024-02-26 00:16:19 +01:00
parent 4b002aaee4
commit 48ad545da1
18 changed files with 10062 additions and 14566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22572
front/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

47
front/package.json
View File

@ -10,32 +10,35 @@
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"style": "prettier --write .", "style": "prettier --write .",
"e2e": "ng e2e" "e2e": "ng e2e",
"update_packages": "ncu --upgrade",
"install_dependency": "npm install"
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^14.2.10", "@angular/animations": "^17.2.0",
"@angular/cdk": "^14.2.7", "@angular/cdk": "^17.1.2",
"@angular/common": "^14.2.10", "@angular/common": "^17.2.0",
"@angular/compiler": "^14.2.10", "@angular/compiler": "^17.2.0",
"@angular/core": "^14.2.10", "@angular/core": "^17.2.0",
"@angular/forms": "^14.2.10", "@angular/forms": "^17.2.0",
"@angular/material": "^14.2.7", "@angular/material": "^17.1.2",
"@angular/platform-browser": "^14.2.10", "@angular/platform-browser": "^17.2.0",
"@angular/platform-browser-dynamic": "^14.2.10", "@angular/platform-browser-dynamic": "^17.2.0",
"@angular/router": "^14.2.10", "@angular/router": "^17.2.0",
"rxjs": "^7.5.7", "rxjs": "^7.8.1",
"zone.js": "^0.12.0" "zone.js": "^0.14.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^14.2.9", "@angular-devkit/build-angular": "^17.2.0",
"@angular-eslint/builder": "14.2.0", "@angular-eslint/builder": "17.2.1",
"@angular-eslint/eslint-plugin": "14.2.0", "@angular-eslint/eslint-plugin": "17.2.1",
"@angular-eslint/eslint-plugin-template": "14.2.0", "@angular-eslint/eslint-plugin-template": "17.2.1",
"@angular-eslint/schematics": "14.2.0", "@angular-eslint/schematics": "17.2.1",
"@angular-eslint/template-parser": "14.2.0", "@angular-eslint/template-parser": "17.2.1",
"@angular/cli": "^14.2.9", "@angular/cli": "^17.2.0",
"@angular/compiler-cli": "^14.2.10", "@angular/compiler-cli": "^17.2.0",
"@angular/language-service": "^14.2.10" "@angular/language-service": "^17.2.0",
"npm-check-updates": "^16.14.15"
} }
} }

12
front/src/app/app.component.html
View File

@ -2,14 +2,18 @@
<!-- Generig global menu --> <!-- Generig global menu -->
<app-top-menu [menu]="currentMenu" (callback)="eventOnMenu($event)"></app-top-menu> <app-top-menu [menu]="currentMenu" (callback)="eventOnMenu($event)"></app-top-menu>
<!-- all interfaced pages --> <!-- all interfaced pages -->
<div class="main-content" *ngIf="autoConnectedDone"> @if(autoConnectedDone) {
<div class="main-content">
<router-outlet ></router-outlet> <router-outlet ></router-outlet>
</div> </div>
<div class="main-content" *ngIf="!autoConnectedDone"> }
@else {
<div class="main-content">
<div class="generic-page"> <div class="generic-page">
<div class="fill-all colomn_mutiple"> <div class="fill-all colomn_mutiple">
<b style="color:red;">Auto-connection in progress</b> <b style="color:red;">Auto-connection in progress</b>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
</div> </div>
}

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

@ -1,19 +1,26 @@
<div class="imgContainer-small"> <div class="imgContainer-small">
<div *ngIf="covers"> @if(covers) {
<div>
<!--<data-image id="{{cover}}"></data-image>--> <!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}"/> <img src="{{covers[0]}}"/>
</div> </div>
<div *ngIf="!covers" class="noImage"> }
@else {
<div class="noImage">
</div> </div>
}
</div> </div>
<div class="season-small"> <div class="season-small">
Season {{numberSeason}} Season {{numberSeason}}
</div> </div>
<div class="description-small" *ngIf="count > 1"> @if(count > 0) {
{{count}} Episodes <div class="description-small">
</div> {{count}} épisode{{count > 1?"s":""}}
<div class="description-small" *ngIf="count == 1"> </div>
{{count}} Episode }
</div> @else {
<div class="description-small">
Aucun épisode
</div>
}

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

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

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

@ -1,18 +1,24 @@
<div> <div>
<div class="count-base"> <div class="count-base">
<span class="count" *ngIf="countvideo"> @if(countvideo) {
<span class="count">
{{countvideo}} {{countvideo}}
</span> </span>
}
</div> </div>
<div class="imgContainer-small"> <div class="imgContainer-small">
<div *ngIf="covers"> @if(covers) {
<div>
<img src="{{covers[0]}}" class="miniature-small"/> <img src="{{covers[0]}}" class="miniature-small"/>
</div> </div>
}
</div> </div>
<div class="title-small"> <div class="title-small">
{{name}} {{name}}
</div> </div>
<div class="description-small" *ngIf="description"> @if(description) {
<div class="description-small">
{{description}} {{description}}
</div> </div>
}
</div> </div>

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

@ -1,28 +1,31 @@
<div> <div>
<div class="count-base"> <div class="count-base">
<span class="views" *ngIf="advancement"> @if(advancement) {
<span class="views">
{{advancement.count}} {{advancement.count}}
</span> </span>
}
</div> </div>
<div class="videoImgContainer"> <div class="videoImgContainer">
<div *ngIf="covers"> @if(covers) {
<div>
<!--<data-image id="{{cover}}"></data-image>--> <!--<data-image id="{{cover}}"></data-image>-->
<img src="{{covers[0]}}" /> <img src="{{covers[0]}}" />
</div> </div>
<div *ngIf="!covers" class="noImage"> }
@else {
<div class="noImage">
</div> </div>
}
</div> </div>
<div class="view-progess" [ngStyle]="updateAdvancement()"></div> <div class="view-progess" [ngStyle]="updateAdvancement()"></div>
<div class="title-small" *ngIf="data"> <div class="title-small">
@if(data) {
{{episodeDisplay}} {{name}} {{episodeDisplay}} {{name}}
</div> }
<div class="title-small" *ngIf="!data"> @else {
Error media: {{element?.id}} Error media: {{element?.id}}
}
</div> </div>
<!--
<div class="description-small" *ngIf="description">
{{description}}
</div>
-->
</div> </div>

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

@ -3,9 +3,11 @@
Karideo Karideo
</div> </div>
<div class="fill-all colomn_mutiple"> <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> <app-element-type [element]="data"></app-element-type>
</div> </div>
}
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>

40
front/src/app/scene/season-edit/season-edit.html
View File

@ -2,21 +2,26 @@
<div class="title"> <div class="title">
Edit season Edit season
</div> </div>
<div class="fill-all" *ngIf="itemIsRemoved"> @if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The season has been removed The season has been removed
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsNotFound"> }
@else if (itemIsNotFound){
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The season does not exist The season does not exist
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsLoading"> }
@else if (itemIsLoading){
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
Loading ...<br/> Loading ...<br/>
@ -24,7 +29,9 @@
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> }
@else {
<div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Number: Number:
@ -54,10 +61,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- Cover section --------------------------------- --> <!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Covers Covers
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="hide-element"> <div class="hide-element">
<input type="file" <input type="file"
#fileInput #fileInput
@ -67,16 +74,18 @@
</div> </div>
<div class="request_raw"> <div class="request_raw">
<div class="input"> <div class="input">
<div class="cover" *ngFor="let element of coversDisplay"> @for (data of coversDisplay; track data.id;) {
<div class="cover" >
<div class="cover-image"> <div class="cover-image">
<img src="{{element.url}}"/> <img src="{{data.url}}"/>
</div> </div>
<div class="cover-button"> <div class="cover-button">
<button (click)="removeCover(element.id)"> <button (click)="removeCover(data.id)">
<i class="material-icons button-remove">highlight_off</i> <i class="material-icons button-remove">highlight_off</i>
</button> </button>
</div> </div>
</div> </div>
}
<div class="cover"> <div class="cover">
<div class="cover-no-image"> <div class="cover-no-image">
</div> </div>
@ -91,10 +100,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- ADMIN section --------------------------------- --> <!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Administration Administration
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
<i class="material-icons">data_usage</i> ID: <i class="material-icons">data_usage</i> ID:
@ -117,17 +126,22 @@
<div class="label"> <div class="label">
<i class="material-icons">delete_forever</i> Trash: <i class="material-icons">delete_forever</i> Trash:
</div> </div>
<div class="input" *ngIf="(videoCount == '0')"> @if(videoCount == '0') {
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit"> <button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove season <i class="material-icons">delete</i> Remove season
</button> </button>
</div> </div>
<div class="input" *ngIf="(videoCount != '0')"> }
@else {
<div class="input">
<i class="material-icons">new_releases</i> Can not remove season, video depending on it <i class="material-icons">new_releases</i> Can not remove season, video depending on it
</div> </div>
}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
}
</div> </div>
<upload-progress [mediaTitle]="upload.labelMediaTitle" <upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize" [mediaUploaded]="upload.mediaSendSize"

19
front/src/app/scene/season/season.html
View File

@ -1,29 +1,36 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title colomn_mutiple">
<div class="cover-area"> <div class="cover-area">
<div class="cover" *ngIf="cover != null" > @if(cover) {
<div class="cover">
<img src="{{cover}}"/> <img src="{{cover}}"/>
</div> </div>
}
</div> </div>
<div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'"> <div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div *ngIf="seriesName" class="title"> @if(seriesName) {
<div class="title">
{{seriesName}} {{seriesName}}
</div> </div>
}
<div class="sub-title-main"> <div class="sub-title-main">
Season {{name}} Season {{name}}
</div> </div>
<div class="description" *ngIf="description"> @if(description) {
<div class="description">
{{description}} {{description}}
</div> </div>
}
</div> </div>
</div> </div>
<div class="fill-content colomn_mutiple"> <div class="fill-content colomn_mutiple">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="videos.length > 1">Videos:</div> <div class="title">Video{{videos.length > 1?"s":""}}:</div>
<div class="title" *ngIf="videos.length == 1">Video:</div> @for (data of videos; track data.id;) {
<div *ngFor="let data of videos" class="item item-video" (click)="onSelectVideo($event, data.id)" (auxclick)="onSelectVideo($event, data.id)"> <div class="item item-video" (click)="onSelectVideo($event, data.id)" (auxclick)="onSelectVideo($event, data.id)">
<app-element-video [element]="data"></app-element-video> <app-element-video [element]="data"></app-element-video>
</div> </div>
}
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>

44
front/src/app/scene/series-edit/series-edit.html
View File

@ -2,21 +2,26 @@
<div class="title"> <div class="title">
Edit series Edit series
</div> </div>
<div class="fill-all" *ngIf="itemIsRemoved"> @if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The series has been removed The series has been removed
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsNotFound"> }
@else if(itemIsNotFound) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The series does not exist The series does not exist
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsLoading"> }
@else if(itemIsLoading) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
Loading ...<br/> Loading ...<br/>
@ -24,7 +29,9 @@
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> }
@else {
<div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Type: Type:
@ -32,7 +39,9 @@
<div class="input"> <div class="input">
<select [ngModel]="typeId" <select [ngModel]="typeId"
(ngModelChange)="onChangeType($event)"> (ngModelChange)="onChangeType($event)">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option> @for (data of listType; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select> </select>
</div> </div>
</div> </div>
@ -66,10 +75,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- Cover section --------------------------------- --> <!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Covers Covers
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="hide-element"> <div class="hide-element">
<input type="file" <input type="file"
#fileInput #fileInput
@ -79,16 +88,18 @@
</div> </div>
<div class="request_raw"> <div class="request_raw">
<div class="input"> <div class="input">
<div class="cover" *ngFor="let element of coversDisplay"> @for (data of coversDisplay; track data.id;) {
<div class="cover">
<div class="cover-image"> <div class="cover-image">
<img src="{{element.url}}"/> <img src="{{data.url}}"/>
</div> </div>
<div class="cover-button"> <div class="cover-button">
<button (click)="removeCover(element.id)"> <button (click)="removeCover(data.id)">
<i class="material-icons button-remove">highlight_off</i> <i class="material-icons button-remove">highlight_off</i>
</button> </button>
</div> </div>
</div> </div>
}
<div class="cover"> <div class="cover">
<div class="cover-no-image"> <div class="cover-no-image">
</div> </div>
@ -103,10 +114,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- ADMIN section --------------------------------- --> <!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Administration Administration
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
<i class="material-icons">data_usage</i> ID: <i class="material-icons">data_usage</i> ID:
@ -138,17 +149,22 @@
<div class="label"> <div class="label">
<i class="material-icons">delete_forever</i> Trash: <i class="material-icons">delete_forever</i> Trash:
</div> </div>
<div class="input" *ngIf="(videoCount == '0' && seasonsCount == '0')"> @if(videoCount == '0' && seasonsCount == '0') {
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit"> <button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove Series <i class="material-icons">delete</i> Remove Series
</button> </button>
</div> </div>
<div class="input" *ngIf="(videoCount != '0' || seasonsCount != '0')"> }
@else {
<div class="input">
<i class="material-icons">new_releases</i> Can not remove season or video depending on it <i class="material-icons">new_releases</i> Can not remove season or video depending on it
</div> </div>
}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
}
</div> </div>
<upload-progress [mediaTitle]="upload.labelMediaTitle" <upload-progress [mediaTitle]="upload.labelMediaTitle"

30
front/src/app/scene/series/series.html
View File

@ -1,34 +1,44 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title colomn_mutiple">
<div class="cover-area"> <div class="cover-area">
<div class="cover" *ngIf="cover != null" > @if(cover) {
<div class="cover" >
<img src="{{cover}}"/> <img src="{{cover}}"/>
</div> </div>
}
</div> </div>
<div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'"> <div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title"> <div class="title">
{{name}} {{name}}
</div> </div>
<div class="description" *ngIf="description"> @if(description) {
<div class="description">
{{description}} {{description}}
</div> </div>
}
</div> </div>
</div> </div>
<div class="fill-content colomn_mutiple" *ngIf="seasons.length != 0"> @if(seasons.length != 0) {
<div class="fill-content colomn_mutiple">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="seasons.length > 1">Seasons:</div> <div class="title">Season{{seasons.length > 1?"s":""}}:</div>
<div class="title" *ngIf="seasons.length == 1">Season:</div> @for (data of seasons; track data.id;) {
<div *ngFor="let data of seasons" class="item-list" (click)="onSelectSeason($event, data.id)" (auxclick)="onSelectSeason($event, data.id)"> <div class="item-list" (click)="onSelectSeason($event, data.id)" (auxclick)="onSelectSeason($event, data.id)">
<app-element-season [element]="data"></app-element-season> <app-element-season [element]="data"></app-element-season>
</div> </div>
}
</div> </div>
<div class="fill-content colomn_mutiple" *ngIf="videos.length != 0"> }
@if(videos.length != 0) {
<div class="fill-content colomn_mutiple">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="videos.length > 1">Videos:</div> <div class="title">Video{{videos.length > 1?"s":""}}:</div>
<div class="title" *ngIf="videos.length == 1">Video:</div> @for (data of videos; track data.id;) {
<div *ngFor="let data of videos" class="item item-video" (click)="onSelectVideo($event, data.id)" (auxclick)="onSelectVideo($event, data.id)"> <div class="item item-video" (click)="onSelectVideo($event, data.id)" (auxclick)="onSelectVideo($event, data.id)">
<app-element-video [element]="data"></app-element-video> <app-element-video [element]="data"></app-element-video>
</div> </div>
}
</div> </div>
}
<div class="clear"></div> <div class="clear"></div>
</div> </div>

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

@ -1,30 +1,38 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title colomn_mutiple">
<div class="cover-area"> <div class="cover-area">
<div class="cover" *ngIf="cover != null" > @if(cover) {
<div class="cover" >
<img src="{{cover}}"/> <img src="{{cover}}"/>
</div> </div>
}
</div> </div>
<div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'"> <div [className]="cover != null ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title"> <div class="title">
{{name}} {{name}}
</div> </div>
<div class="description" *ngIf="description"> @if(description) {
<div class="description">
{{description}} {{description}}
</div> </div>
}
</div> </div>
</div> </div>
<div class="fill-content colomn_mutiple"> <div class="fill-content colomn_mutiple">
<div class="clear"></div> <div class="clear"></div>
<div *ngFor="let data of series" class="item" (click)="onSelectSeries($event, data.id)" (auxclick)="onSelectSeries($event, data.id)"> @for (data of series; track data.id;) {
<div class="item" (click)="onSelectSeries($event, data.id)" (auxclick)="onSelectSeries($event, data.id)">
<app-element-series [element]="data"></app-element-series> <app-element-series [element]="data"></app-element-series>
</div> </div>
}
</div> </div>
<div class="fill-content colomn_mutiple"> <div class="fill-content colomn_mutiple">
<div class="clear"></div> <div class="clear"></div>
<div *ngFor="let data of videos" class="item item-video" (click)="onSelectVideo($event, data.id)" (auxclick)="onSelectVideo($event, data.id)"> @for (data of videos; track data.id;) {
<div class="item item-video" (click)="onSelectVideo($event, data.id)" (auxclick)="onSelectVideo($event, data.id)">
<app-element-video [element]="data"></app-element-video> <app-element-video [element]="data"></app-element-video>
</div> </div>
}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>

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

@ -32,12 +32,12 @@
</tbody> </tbody>
</table> </table>
</div> </div>
@if(parsedElement.length !== 0) {
<div *ngIf="this.parsedElement.length !== 0" class="title"> <div class="title">
Meta-data: Meta-data:
</div> </div>
<div class="clear"><br/></div> <div class="clear"><br/></div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all"> <div class="fill-all">
<div class="request_raw_table"> <div class="request_raw_table">
<table> <table>
<colgroup> <colgroup>
@ -52,7 +52,9 @@
<select [ngModel]="typeId" <select [ngModel]="typeId"
(ngModelChange)="onChangeType($event)" (ngModelChange)="onChangeType($event)"
[class.error]="typeId === undefined"> [class.error]="typeId === undefined">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option> @for (data of listType; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select> </select>
</td> </td>
</tr> </tr>
@ -71,7 +73,9 @@
<td class="right-colomn"> <td class="right-colomn">
<select [ngModel]="seriesId" <select [ngModel]="seriesId"
(ngModelChange)="onChangeSeries($event)"> (ngModelChange)="onChangeSeries($event)">
<option *ngFor="let element of listSeries" [ngValue]="element.value">{{element.label}}</option> @for (data of listSeries; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select> </select>
</td> </td>
<td class="tool-colomn"> <td class="tool-colomn">
@ -111,7 +115,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of this.parsedElement"> @for (data of parsedElement; track data.id;) {
<tr>
<td class="left-colomn"> <td class="left-colomn">
<input type="number" <input type="number"
pattern="[0-9]{0-4}" pattern="[0-9]{0-4}"
@ -128,9 +133,11 @@
(input)="onTitle(data, $event.target.value)" (input)="onTitle(data, $event.target.value)"
[class.error]="data.title === ''" [class.error]="data.title === ''"
/> />
<span *ngIf="data.nameDetected === true" class="error"> @if(data.nameDetected === true) {
<span class="error">
^^^This title already exist !!! ^^^This title already exist !!!
</span> </span>
}
</td> </td>
<td class="tool-colomn" > <td class="tool-colomn" >
<button class="button color-button-cancel color-shadow-black" <button class="button color-button-cancel color-shadow-black"
@ -141,6 +148,7 @@
</button> </button>
</td> </td>
</tr> </tr>
}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -154,7 +162,8 @@
</button> </button>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="request_raw_table" *ngIf="this.listFileInBdd !== undefined"> @if(listFileInBdd !== undefined) {
<div class="request_raw_table">
<table> <table>
<colgroup> <colgroup>
<col style="width:10%"> <col style="width:10%">
@ -168,15 +177,18 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of this.listFileInBdd"> @for (data of listFileInBdd; track data.id;) {
<tr>
<td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td> <td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td>
<td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td> <td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td>
</tr> </tr>
}
</tbody> </tbody>
</table> </table>
</div> </div>
}
</div> </div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all"> <div class="fill-all">
<div class="request_raw_table"> <div class="request_raw_table">
<table> <table>
<colgroup> <colgroup>
@ -184,24 +196,19 @@
<col style="width:80%"> <col style="width:80%">
</colgroup> </colgroup>
<tbody> <tbody>
<!-- no need @for (data of parsedFailedElement; track data.file;) {
<tr *ngFor="let data of this.parsedElement"> <tr>
<td class="left-colomn">Keep:</td>
<td class="right-colomn">
{{data.file.name}}
</td>
</tr>
-->
<tr *ngFor="let data of this.parsedFailedElement">
<td class="left-colomn">Rejected:</td> <td class="left-colomn">Rejected:</td>
<td class="right-colomn"> <td class="right-colomn">
{{data.file.name}}<br/> ==&gt; {{data.reason}} {{data.file.name}}<br/> ==&gt; {{data.reason}}
</td> </td>
</tr> </tr>
}
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
}
</div> </div>
<upload-progress [mediaTitle]="upload.labelMediaTitle" <upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize" [mediaUploaded]="upload.mediaSendSize"

215
front/src/app/scene/upload/upload.ts
View File

@ -23,6 +23,7 @@ export class FileParsedElement {
public nameDetected: boolean = false; public nameDetected: boolean = false;
public episodeDetected: boolean = false; public episodeDetected: boolean = false;
constructor( constructor(
public id: number,
public file: File, public file: File,
public series: string, public series: string,
public season: number, public season: number,
@ -42,7 +43,7 @@ export class FileFailParsedElement {
@Component({ @Component({
selector: 'app-video-edit', selector: 'app-video-edit',
templateUrl: './upload.html', templateUrl: './upload.html',
styleUrls: [ './upload.less' ] styleUrls: ['./upload.less']
}) })
export class UploadScene implements OnInit { export class UploadScene implements OnInit {
@ -55,11 +56,11 @@ export class UploadScene implements OnInit {
saisonId: number = null; saisonId: number = null;
needSend: boolean = false; needSend: boolean = false;
// list of all files already registered in the bdd to compare with the curent list of files. // list of all files already registered in the bdd to compare with the current list of files.
listFileInBdd: any = null; listFileInBdd: any = null;
// section tha define the upload value to display in the pop-in of upload // section tha define the upload value to display in the pop-in of upload
public upload:UploadProgress = new UploadProgress(); public upload: UploadProgress = new UploadProgress();
listType: ElementList[] = [ listType: ElementList[] = [
{ value: null, label: '---' }, { value: null, label: '---' },
@ -67,7 +68,7 @@ export class UploadScene implements OnInit {
listSeries: ElementList[] = [ listSeries: ElementList[] = [
{ value: null, label: '---' }, { value: null, label: '---' },
]; ];
listSeries2 = [ { id: null, description: '---' } ]; listSeries2 = [{ id: null, description: '---' }];
/* /*
config = { config = {
@ -81,7 +82,7 @@ export class UploadScene implements OnInit {
search: true, // true/false for the search functionlity defaults to false, search: true, // true/false for the search functionlity defaults to false,
height: 'auto', // height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear height: 'auto', // height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
placeholder: 'Select', // text to be displayed when no item is selected defaults to Select, placeholder: 'Select', // text to be displayed when no item is selected defaults to Select,
customComparator: () => {}, // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case, customComparator: () => { }, // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case,
limitTo: 10, // number thats limits the no of options displayed in the UI (if zero, options will not be limited) limitTo: 10, // number thats limits the no of options displayed in the UI (if zero, options will not be limited)
moreText: 'more', // text to be displayed whenmore than one items are selected like Option 1 + 5 more moreText: 'more', // text to be displayed whenmore than one items are selected like Option 1 + 5 more
noResultsFound: 'No results found!', // text to be displayed when no items are found while searching noResultsFound: 'No results found!', // text to be displayed when no items are found while searching
@ -102,17 +103,17 @@ export class UploadScene implements OnInit {
} }
updateNeedSend(): boolean { updateNeedSend(): boolean {
if(this.parsedElement.length === 0) { if (this.parsedElement.length === 0) {
this.needSend = false; this.needSend = false;
return; return;
} }
this.needSend = true; this.needSend = true;
for(let iii = 0; iii < this.parsedElement.length; iii++) { for (let iii = 0; iii < this.parsedElement.length; iii++) {
if(this.parsedElement[iii].title === undefined || this.parsedElement[iii].title === null || this.parsedElement[iii].title === '') { if (this.parsedElement[iii].title === undefined || this.parsedElement[iii].title === null || this.parsedElement[iii].title === '') {
this.needSend = false; this.needSend = false;
} }
} }
if(this.typeId === undefined || this.typeId === null) { if (this.typeId === undefined || this.typeId === null) {
this.needSend = false; this.needSend = false;
} }
return this.needSend; return this.needSend;
@ -120,16 +121,16 @@ export class UploadScene implements OnInit {
ngOnInit() { ngOnInit() {
let self = this; let self = this;
this.listType = [ { value: null, label: '---' } ]; this.listType = [{ value: null, label: '---' }];
this.listSeries = [ { value: null, label: '---' } ]; this.listSeries = [{ value: null, label: '---' }];
this.listSeason = [ { value: null, label: '---' } ]; this.listSeason = [{ value: null, label: '---' }];
this.typeService.getData() this.typeService.getData()
.then((response2) => { .then((response2) => {
for(let iii = 0; iii < response2.length; iii++) { for (let iii = 0; iii < response2.length; iii++) {
self.listType.push({ value: response2[iii].id, label: response2[iii].name }); self.listType.push({ value: response2[iii].id, label: response2[iii].name });
} }
}).catch((response2) => { }).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`); console.log(`get response22 : ${JSON.stringify(response2, null, 2)}`);
}); });
console.log(' END INIT '); console.log(' END INIT ');
} }
@ -140,34 +141,34 @@ export class UploadScene implements OnInit {
} }
private updateType(value: any): void { private updateType(value: any): void {
console.log(`Change requested of type ... ${ value}`); console.log(`Change requested of type ... ${value}`);
if(this.typeId === value) { if (this.typeId === value) {
return; return;
} }
this.typeId = value; this.typeId = value;
// this.data.series_id = null; // this.data.series_id = null;
// this.data.season_id = null; // this.data.season_id = null;
this.listSeries = [ { value: null, label: '---' } ]; this.listSeries = [{ value: null, label: '---' }];
this.listSeason = [ { value: null, label: '---' } ]; this.listSeason = [{ value: null, label: '---' }];
let self = this; let self = this;
this.updateNeedSend(); this.updateNeedSend();
if(this.typeId !== null) { if (this.typeId !== null) {
self.typeService.getSubSeries(this.typeId) self.typeService.getSubSeries(this.typeId)
.then((response2) => { .then((response2) => {
for(let iii = 0; iii < response2.length; iii++) { for (let iii = 0; iii < response2.length; iii++) {
self.listSeries.push({ value: response2[iii].id, label: response2[iii].name }); self.listSeries.push({ value: response2[iii].id, label: response2[iii].name });
} }
}).catch((response2) => { }).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`); console.log(`get response22 : ${JSON.stringify(response2, null, 2)}`);
}); });
} }
} }
onChangeSeries(value: any): void { onChangeSeries(value: any): void {
this.seriesId = value; this.seriesId = value;
if(!(value === undefined || value === null)) { if (!(value === undefined || value === null)) {
for(let iii = 0; iii < this.listSeries.length; iii++) { for (let iii = 0; iii < this.listSeries.length; iii++) {
if(this.listSeries[iii].value === value) { if (this.listSeries[iii].value === value) {
this.globalSeries = this.listSeries[iii].label; this.globalSeries = this.listSeries[iii].label;
break; break;
} }
@ -188,8 +189,8 @@ export class UploadScene implements OnInit {
this.updateNeedSend(); this.updateNeedSend();
} }
removeElmentFromList(data: FileParsedElement, value: any): void { removeElmentFromList(data: FileParsedElement, value: any): void {
for(let iii = 0; iii < this.parsedElement.length; iii++) { for (let iii = 0; iii < this.parsedElement.length; iii++) {
if(this.parsedElement[iii] === data) { if (this.parsedElement[iii] === data) {
this.parsedElement.splice(iii, 1); this.parsedElement.splice(iii, 1);
break; break;
} }
@ -207,16 +208,16 @@ export class UploadScene implements OnInit {
onSeries(value: any): void { onSeries(value: any): void {
this.globalSeries = value; this.globalSeries = value;
let self = this; let self = this;
if(this.globalSeries !== '') { if (this.globalSeries !== '') {
this.seriesService.getLike(this.globalSeries) this.seriesService.getLike(this.globalSeries)
.then((response: any[]) => { .then((response: any[]) => {
console.log(`find element: ${ response.length}`); console.log(`find element: ${response.length}`);
for(let iii = 0; iii < response.length; iii++) { for (let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`); console.log(` - ${JSON.stringify(response[iii])}`);
} }
if(response.length === 0) { if (response.length === 0) {
self.seriesId = null; self.seriesId = null;
} else if(response.length === 1) { } else if (response.length === 1) {
self.seriesId = response[0].id; self.seriesId = response[0].id;
} }
self.updateListOfVideoToCheck(); self.updateListOfVideoToCheck();
@ -239,8 +240,8 @@ export class UploadScene implements OnInit {
this.typeId = null; this.typeId = null;
this.seriesId = null; this.seriesId = null;
this.saisonId = null; this.saisonId = null;
this.listSeries = [ { value: null, label: '---' } ]; this.listSeries = [{ value: null, label: '---' }];
this.listSeason = [ { value: null, label: '---' } ]; this.listSeason = [{ value: null, label: '---' }];
} }
addFileWithMetaData(file: File) { addFileWithMetaData(file: File) {
@ -250,62 +251,62 @@ export class UploadScene implements OnInit {
let episode: number | null = null; let episode: number | null = null;
let title: string = ''; let title: string = '';
console.log(`select file ${ file.name}`); console.log(`select file ${file.name}`);
let tmpName = file.name.replace(/[ \t]*-[ \t]*/g, '-'); let tmpName = file.name.replace(/[ \t]*-[ \t]*/g, '-');
tmpName = tmpName.replace(/[Ss]([0-9]+)[- \t]+[Ee]([0-9]+)/g, '-s$1-e$2-'); tmpName = tmpName.replace(/[Ss]([0-9]+)[- \t]+[Ee]([0-9]+)/g, '-s$1-e$2-');
tmpName = tmpName.replace(/[Ee]([0-9]+)[- \t]+[Ss]([0-9]+)/g, '-s$2-e$1-'); tmpName = tmpName.replace(/[Ee]([0-9]+)[- \t]+[Ss]([0-9]+)/g, '-s$2-e$1-');
tmpName = tmpName.replace(/_/g, '-'); tmpName = tmpName.replace(/_/g, '-');
tmpName = tmpName.replace(/--/g, '-'); tmpName = tmpName.replace(/--/g, '-');
console.log(`select file ${ tmpName}`); console.log(`select file ${tmpName}`);
const splitElement = tmpName.split('-'); const splitElement = tmpName.split('-');
if(splitElement.length === 1) { if (splitElement.length === 1) {
title = splitElement[0]; title = splitElement[0];
} else { } else {
if(splitElement.length >= 2) { if (splitElement.length >= 2) {
series = splitElement[0]; series = splitElement[0];
} }
splitElement.splice(0, 1); splitElement.splice(0, 1);
if(splitElement.length === 1) { if (splitElement.length === 1) {
title = splitElement[0]; title = splitElement[0];
} else { } else {
while(splitElement.length > 0) { while (splitElement.length > 0) {
let element = splitElement[0]; let element = splitElement[0];
let find = false; let find = false;
if(season === null) { if (season === null) {
if(element.length >= 1 && (element[0] === 's' || element[0] === 'S')) { if (element.length >= 1 && (element[0] === 's' || element[0] === 'S')) {
element = element.substring(1); element = element.substring(1);
season = parseInt(element, 10); season = parseInt(element, 10);
find = true; find = true;
} }
} }
if(episode === null && find === false) { if (episode === null && find === false) {
if(element.length >= 1 && (element[0] === 'e' || element[0] === 'E')) { if (element.length >= 1 && (element[0] === 'e' || element[0] === 'E')) {
element = element.substring(1); element = element.substring(1);
episode = parseInt(element, 10); episode = parseInt(element, 10);
find = true; find = true;
} }
} }
if(find === false) { if (find === false) {
if(title === '') { if (title === '') {
title = element; title = element;
} else { } else {
title = `${title }-${ element}`; title = `${title}-${element}`;
} }
} }
splitElement.splice(0, 1); splitElement.splice(0, 1);
} }
} }
} }
if(isNaN(episode)) { if (isNaN(episode)) {
episode = null; episode = null;
} }
if(isNaN(season)) { if (isNaN(season)) {
season = null; season = null;
} }
// remove extention // remove extention
title = title.replace(new RegExp('\\.(mkv|MKV|Mkv|webm|WEBM|Webm|mp4)'), ''); title = title.replace(new RegExp('\\.(mkv|MKV|Mkv|webm|WEBM|Webm|mp4)'), '');
let tmp = new FileParsedElement(file, series, season, episode, title); let tmp = new FileParsedElement(this.parsedElement.length, file, series, season, episode, title);
console.log(`==>${ JSON.stringify(tmp)}`); console.log(`==>${JSON.stringify(tmp)}`);
// add it in the list. // add it in the list.
this.parsedElement.push(tmp); this.parsedElement.push(tmp);
} }
@ -316,30 +317,30 @@ export class UploadScene implements OnInit {
onChangeFile(value: any): void { onChangeFile(value: any): void {
this.clearData(); this.clearData();
for(let iii = 0; iii < value.files.length; iii++) { for (let iii = 0; iii < value.files.length; iii++) {
this.addFileWithMetaData(value.files[iii]); this.addFileWithMetaData(value.files[iii]);
} }
// check if all global parameters are generic: // check if all global parameters are generic:
if(this.parsedElement.length === 0) { if (this.parsedElement.length === 0) {
this.updateNeedSend(); this.updateNeedSend();
return; return;
} }
// clean different series: // clean different series:
for(let iii = 1; iii < this.parsedElement.length; iii++) { for (let iii = 1; iii < this.parsedElement.length; iii++) {
console.log(`check series [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[0].series } !== ${ this.parsedElement[iii].series }'`); console.log(`check series [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[0].series} !== ${this.parsedElement[iii].series}'`);
if(this.parsedElement[0].series !== this.parsedElement[iii].series) { if (this.parsedElement[0].series !== this.parsedElement[iii].series) {
this.parsedFailedElement.push(new FileFailParsedElement(this.parsedElement[iii].file, 'Remove from list due to wrong series value')); this.parsedFailedElement.push(new FileFailParsedElement(this.parsedElement[iii].file, 'Remove from list due to wrong series value'));
console.log(`Remove from list (!= series) : [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[iii].file.name }'`); console.log(`Remove from list (!= series) : [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[iii].file.name}'`);
this.parsedElement.splice(iii, 1); this.parsedElement.splice(iii, 1);
iii--; iii--;
} }
} }
// clean different season: // clean different season:
for(let iii = 1; iii < this.parsedElement.length; iii++) { for (let iii = 1; iii < this.parsedElement.length; iii++) {
console.log(`check season [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[0].season } !== ${ this.parsedElement[iii].season }'`); console.log(`check season [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[0].season} !== ${this.parsedElement[iii].season}'`);
if(this.parsedElement[0].season !== this.parsedElement[iii].season) { if (this.parsedElement[0].season !== this.parsedElement[iii].season) {
this.parsedFailedElement.push(new FileFailParsedElement(this.parsedElement[iii].file, 'Remove from list due to wrong season value')); this.parsedFailedElement.push(new FileFailParsedElement(this.parsedElement[iii].file, 'Remove from list due to wrong season value'));
console.log(`Remove from list (!= season) : [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[iii].file.name }'`); console.log(`Remove from list (!= season) : [${iii + 1}/${this.parsedElement.length}] '${this.parsedElement[iii].file.name}'`);
this.parsedElement.splice(iii, 1); this.parsedElement.splice(iii, 1);
iii--; iii--;
} }
@ -352,16 +353,16 @@ export class UploadScene implements OnInit {
this.seriesId = null; this.seriesId = null;
this.saisonId = null; this.saisonId = null;
let self = this; let self = this;
if(this.globalSeries !== '') { if (this.globalSeries !== '') {
this.seriesService.getLike(this.globalSeries) this.seriesService.getLike(this.globalSeries)
.then((response: any[]) => { .then((response: any[]) => {
console.log(`find element: ${ response.length}`); console.log(`find element: ${response.length}`);
for(let iii = 0; iii < response.length; iii++) { for (let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`); console.log(` - ${JSON.stringify(response[iii])}`);
} }
if(response.length === 0) { if (response.length === 0) {
self.seriesId = null; self.seriesId = null;
} else if(response.length === 1) { } else if (response.length === 1) {
let serieElem = response[0]; let serieElem = response[0];
self.seriesId = serieElem.id; self.seriesId = serieElem.id;
self.updateType(serieElem.parentId); self.updateType(serieElem.parentId);
@ -375,7 +376,7 @@ export class UploadScene implements OnInit {
sendFile(): void { sendFile(): void {
console.log(`Send file requested ... ${ this.parsedElement.length}`); console.log(`Send file requested ... ${this.parsedElement.length}`);
this.upload = new UploadProgress(); this.upload = new UploadProgress();
// display the upload pop-in // display the upload pop-in
this.popInService.open('popin-upload-progress'); this.popInService.open('popin-upload-progress');
@ -386,13 +387,13 @@ export class UploadScene implements OnInit {
let self = this; let self = this;
this.uploadFile(this.parsedElement[id], id, total, () => { this.uploadFile(this.parsedElement[id], id, total, () => {
let id2 = id + 1; let id2 = id + 1;
if(id2 < total) { if (id2 < total) {
self.globalUpLoad(id2, total); self.globalUpLoad(id2, total);
} else { } else {
self.upload.result = 'Media creation done'; self.upload.result = 'Media creation done';
} }
}, (value:string) => { }, (value: string) => {
self.upload.error = `Error in the upload of the data...${ value}`; self.upload.error = `Error in the upload of the data...${value}`;
}); });
} }
uploadFile(eleemnent: FileParsedElement, id: number, total: number, sendDone: any, errorOccured: any): void { uploadFile(eleemnent: FileParsedElement, id: number, total: number, sendDone: any, errorOccured: any): void {
@ -400,31 +401,31 @@ export class UploadScene implements OnInit {
self.upload.labelMediaTitle = ''; self.upload.labelMediaTitle = '';
// add series // add series
if(self.globalSeries !== null) { if (self.globalSeries !== null) {
if(self.upload.labelMediaTitle.length !== 0) { if (self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }:`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}:`;
} }
self.upload.labelMediaTitle = self.upload.labelMediaTitle + self.globalSeries; self.upload.labelMediaTitle = self.upload.labelMediaTitle + self.globalSeries;
} }
// add season // add season
if(self.globalSeason !== null && self.globalSeason !== undefined && self.globalSeason.toString().length !== 0) { if (self.globalSeason !== null && self.globalSeason !== undefined && self.globalSeason.toString().length !== 0) {
if(self.upload.labelMediaTitle.length !== 0) { if (self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }-`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
} }
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }s${ self.globalSeason.toString()}`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}s${self.globalSeason.toString()}`;
} }
// add episode ID // add episode ID
if(eleemnent.episode !== null && eleemnent.episode !== undefined && eleemnent.episode.toString().length !== 0) { if (eleemnent.episode !== null && eleemnent.episode !== undefined && eleemnent.episode.toString().length !== 0) {
if(self.upload.labelMediaTitle.length !== 0) { if (self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }-`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
} }
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }e${ eleemnent.episode.toString()}`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}e${eleemnent.episode.toString()}`;
} }
// add title // add title
if(self.upload.labelMediaTitle.length !== 0) { if (self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }-`; self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}-`;
} }
self.upload.labelMediaTitle = `[${ id + 1 }/${ total }]${ self.upload.labelMediaTitle }${eleemnent.title}`; self.upload.labelMediaTitle = `[${id + 1}/${total}]${self.upload.labelMediaTitle}${eleemnent.title}`;
self.videoService.uploadFile(eleemnent.file, self.videoService.uploadFile(eleemnent.file,
self.globalSeries, self.globalSeries,
@ -439,7 +440,7 @@ export class UploadScene implements OnInit {
self.upload.mediaSize = totalTmp; self.upload.mediaSize = totalTmp;
}) })
.then((response) => { .then((response) => {
console.log(`get response of video : ${ JSON.stringify(response, null, 2)}`); console.log(`get response of video : ${JSON.stringify(response, null, 2)}`);
sendDone(); sendDone();
}).catch((response) => { }).catch((response) => {
// self.error = "Can not get the data"; // self.error = "Can not get the data";
@ -448,46 +449,46 @@ export class UploadScene implements OnInit {
}); });
} }
public checkSimilarString(valueA:string, valueB:string): boolean { public checkSimilarString(valueA: string, valueB: string): boolean {
let valueAL = valueA.toLowerCase(); let valueAL = valueA.toLowerCase();
let valueBL = valueB.toLowerCase(); let valueBL = valueB.toLowerCase();
valueAL = valueAL.replace(/[ \t\n\r-_#~@]/g, ''); valueAL = valueAL.replace(/[ \t\n\r-_#~@]/g, '');
valueBL = valueBL.replace(/[ \t\n\r-_#~@]/g, ''); valueBL = valueBL.replace(/[ \t\n\r-_#~@]/g, '');
if(valueAL === valueBL) { if (valueAL === valueBL) {
return true; return true;
} }
if(valueAL.startsWith(valueBL)) { if (valueAL.startsWith(valueBL)) {
return true; return true;
} }
if(valueBL.startsWith(valueAL)) { if (valueBL.startsWith(valueAL)) {
return true; return true;
} }
return false; return false;
} }
checkConcordence():void { checkConcordence(): void {
if(this.parsedElement === null) { if (this.parsedElement === null) {
return; return;
} }
// ckear checker // ckear checker
for(let iii = 0; iii < this.parsedElement.length; iii++) { for (let iii = 0; iii < this.parsedElement.length; iii++) {
this.parsedElement[iii].nameDetected = false; this.parsedElement[iii].nameDetected = false;
this.parsedElement[iii].episodeDetected = false; this.parsedElement[iii].episodeDetected = false;
} }
if(this.listFileInBdd === null) { if (this.listFileInBdd === null) {
return; return;
} }
for(let iii = 0; iii < this.listFileInBdd.length; iii++) { for (let iii = 0; iii < this.listFileInBdd.length; iii++) {
this.listFileInBdd[iii].nameDetected = false; this.listFileInBdd[iii].nameDetected = false;
this.listFileInBdd[iii].episodeDetected = false; this.listFileInBdd[iii].episodeDetected = false;
} }
for(let iii = 0; iii < this.parsedElement.length; iii++) { for (let iii = 0; iii < this.parsedElement.length; iii++) {
for(let jjj = 0; jjj < this.listFileInBdd.length; jjj++) { for (let jjj = 0; jjj < this.listFileInBdd.length; jjj++) {
if(this.checkSimilarString(this.parsedElement[iii].title, this.listFileInBdd[jjj].name)) { if (this.checkSimilarString(this.parsedElement[iii].title, this.listFileInBdd[jjj].name)) {
this.parsedElement[iii].nameDetected = true; this.parsedElement[iii].nameDetected = true;
this.listFileInBdd[jjj].nameDetected = true; this.listFileInBdd[jjj].nameDetected = true;
} }
if(this.parsedElement[iii].episode === this.listFileInBdd[jjj].episode) { if (this.parsedElement[iii].episode === this.listFileInBdd[jjj].episode) {
this.parsedElement[iii].episodeDetected = true; this.parsedElement[iii].episodeDetected = true;
this.listFileInBdd[jjj].episodeDetected = true; this.listFileInBdd[jjj].episodeDetected = true;
} }
@ -497,13 +498,13 @@ export class UploadScene implements OnInit {
updateListOfVideoToCheck(): void { updateListOfVideoToCheck(): void {
// No series ID set ==> nothing to do. // No series ID set ==> nothing to do.
if(this.seriesId === null) { if (this.seriesId === null) {
this.listFileInBdd = null; this.listFileInBdd = null;
return; return;
} }
let self = this; let self = this;
// no season check only the series files. // no season check only the series files.
if(this.globalSeason === null) { if (this.globalSeason === null) {
self.seriesService.getVideo(self.seriesId) self.seriesService.getVideo(self.seriesId)
.then((response: any[]) => { .then((response: any[]) => {
self.listFileInBdd = response; self.listFileInBdd = response;
@ -523,14 +524,14 @@ export class UploadScene implements OnInit {
this.seriesService.getSeason(this.seriesId) this.seriesService.getSeason(this.seriesId)
.then((response: any[]) => { .then((response: any[]) => {
// console.log("find season: " + response.length); // console.log("find season: " + response.length);
for(let iii = 0; iii < response.length; iii++) { for (let iii = 0; iii < response.length; iii++) {
// console.log(" - " + JSON.stringify(response[iii]) + 'compare with : ' + JSON.stringify(self.globalSeason)); // console.log(" - " + JSON.stringify(response[iii]) + 'compare with : ' + JSON.stringify(self.globalSeason));
if(response[iii].name === `${self.globalSeason}`) { if (response[iii].name === `${self.globalSeason}`) {
self.saisonId = response[iii].id; self.saisonId = response[iii].id;
break; break;
} }
} }
if(self.saisonId === null) { if (self.saisonId === null) {
return; return;
} }
self.seasonService.getVideo(self.saisonId) self.seasonService.getVideo(self.saisonId)
@ -550,15 +551,15 @@ export class UploadScene implements OnInit {
} }
eventPopUpSeason(event: string): void { eventPopUpSeason(event: string): void {
console.log(`GET event: ${ event}`); console.log(`GET event: ${event}`);
this.popInService.close('popin-new-season'); this.popInService.close('popin-new-season');
} }
eventPopUpSeries(event: string): void { eventPopUpSeries(event: string): void {
console.log(`GET event: ${ event}`); console.log(`GET event: ${event}`);
this.popInService.close('popin-new-series'); this.popInService.close('popin-new-series');
} }
eventPopUpType(event: string): void { eventPopUpType(event: string): void {
console.log(`GET event: ${ event}`); console.log(`GET event: ${event}`);
this.popInService.close('popin-new-type'); this.popInService.close('popin-new-type');
} }

45
front/src/app/scene/video-edit/video-edit.html
View File

@ -2,21 +2,26 @@
<div class="title"> <div class="title">
Edit Media Edit Media
</div> </div>
<div class="fill-all" *ngIf="itemIsRemoved"> @if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The media has been removed The media has been removed
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsNotFound"> }
@else if(itemIsNotFound) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
The media does not exist The media does not exist
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="itemIsLoading"> }
@else if(itemIsLoading) {
<div class="fill-all">
<div class="message-big"> <div class="message-big">
<br/><br/><br/> <br/><br/><br/>
Loading ...<br/> Loading ...<br/>
@ -24,8 +29,9 @@
<br/><br/><br/> <br/><br/><br/>
</div> </div>
</div> </div>
}
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> @else {
<div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Title: Title:
@ -69,7 +75,9 @@
<div class="input"> <div class="input">
<select [ngModel]="data.typeId" <select [ngModel]="data.typeId"
(ngModelChange)="onChangeType($event)"> (ngModelChange)="onChangeType($event)">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option> @for (data of listType; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select> </select>
</div> </div>
<div class="input_add"> <div class="input_add">
@ -85,7 +93,9 @@
<div class="input"> <div class="input">
<select [ngModel]="data.seriesId" <select [ngModel]="data.seriesId"
(ngModelChange)="onChangeSeries($event)"> (ngModelChange)="onChangeSeries($event)">
<option *ngFor="let element of listSeries" [ngValue]="element.value">{{element.label}}</option> @for (data of listSeries; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select> </select>
</div> </div>
<div class="input_add"> <div class="input_add">
@ -101,7 +111,9 @@
<div class="input"> <div class="input">
<select [ngModel]="data.seasonId" <select [ngModel]="data.seasonId"
(ngModelChange)="onChangeSeason($event)"> (ngModelChange)="onChangeSeason($event)">
<option *ngFor="let element of listSeason" [ngValue]="element.value">{{element.label}}</option> @for (data of listSeason; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select> </select>
</div> </div>
<div class="input_add"> <div class="input_add">
@ -128,10 +140,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- Cover section --------------------------------- --> <!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Covers Covers
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="hide-element"> <div class="hide-element">
<input type="file" <input type="file"
#fileInput #fileInput
@ -141,16 +153,18 @@
</div> </div>
<div class="request_raw"> <div class="request_raw">
<div class="input"> <div class="input">
<div class="cover" *ngFor="let element of coversDisplay"> @for (data of coversDisplay; track data.id;) {
<div class="cover">
<div class="cover-image"> <div class="cover-image">
<img src="{{element.url}}"/> <img src="{{data.url}}"/>
</div> </div>
<div class="cover-button"> <div class="cover-button">
<button (click)="removeCover(element.id)"> <button (click)="removeCover(data.id)">
<i class="material-icons button-remove">highlight_off</i> <i class="material-icons button-remove">highlight_off</i>
</button> </button>
</div> </div>
</div> </div>
}
<div class="cover"> <div class="cover">
<div class="cover-no-image"> <div class="cover-no-image">
</div> </div>
@ -165,10 +179,10 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<!-- ------------------------- ADMIN section --------------------------------- --> <!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="title">
Administration Administration
</div> </div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading"> <div class="fill-all">
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
<i class="material-icons">data_usage</i> ID: <i class="material-icons">data_usage</i> ID:
@ -190,6 +204,7 @@
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
}
</div> </div>
<create-type ></create-type> <create-type ></create-type>

105
front/src/app/scene/video/video.html
View File

@ -1,69 +1,91 @@
<div class="main-reduce"> <div class="main-reduce">
<div class="fill-all" *ngIf="mediaIsNotFound"> @if(mediaIsNotFound) {
<div class="fill-all">
<div class="title"> <div class="title">
Play media<br /><br /><br /><br /><br /> Play media<br /><br /><br /><br /><br />
The media does not exist The media does not exist
</div> </div>
</div> </div>
<div class="fill-all" *ngIf="mediaIsLoading"> }
@else if(mediaIsLoading) {
<div class="fill-all">
<div class="title"> <div class="title">
Play media<br /><br /><br /><br /><br /> Play media<br /><br /><br /><br /><br />
Loading ...<br /> Loading ...<br />
Please wait. Please wait.
</div> </div>
</div> </div>
}
<div class="fill-all" *ngIf="!mediaIsNotFound && !mediaIsLoading && !playVideo"> @else if(!playVideo) {
<div class="fill-all">
<div class="title"> <div class="title">
{{name}} {{name}}
</div> </div>
<div class="cover-full"> <div class="cover-full">
<div class="cover"> <div class="cover">
<div class="cover-image" *ngIf="covers"> @if(covers) {
<div class="cover-image">
<img src="{{covers[0]}}" /> <img src="{{covers[0]}}" />
</div> </div>
<div class="cover-no-image" *ngIf="covers"></div> }
@else {
<div class="cover-no-image"></div>
}
<div class="cover-button"> <div class="cover-button">
<button (click)="onRequirePlay()"> <button (click)="onRequirePlay()">
<i class="material-icons big-button">play_circle_outline</i> <i class="material-icons big-button">play_circle_outline</i>
</button> </button>
</div> </div>
</div> </div>
<div class="cover-button-next" *ngIf="haveNext !== null"> @if(haveNext) {
<div class="cover-button-next">
<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)"> <button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
<i class="material-icons big-button">arrow_forward_ios</i> <i class="material-icons big-button">arrow_forward_ios</i>
</button> </button>
</div> </div>
<div class="cover-button-previous" *ngIf="havePrevious !== null"> }
@if(havePrevious) {
<div class="cover-button-previous">
<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)"> <button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
<i class="material-icons big-button">arrow_back_ios</i> <i class="material-icons big-button">arrow_back_ios</i>
</button> </button>
</div> </div>
}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="episode" *ngIf="seriesName!=null"> @if(seriesName) {
<div class="episode">
<b>Series:</b> {{seriesName}} <b>Series:</b> {{seriesName}}
</div> </div>
<div class="episode" *ngIf="seasonName!=null"> }
@if(seasonName) {
<div class="episode">
<b>Season:</b> {{seasonName}} <b>Season:</b> {{seasonName}}
</div> </div>
<div class="episode" *ngIf="episode!=null"> }
@if(episode) {
<div class="episode">
<b>Episode:</b> {{episode}} <b>Episode:</b> {{episode}}
</div> </div>
}
<div class="episode"> <div class="episode">
<b>generatedName:</b> {{generatedName}} <b>generatedName:</b> {{generatedName}}
</div> </div>
<div class="episode" *ngIf="userMetaData"> @if(userMetaData) {
<div class="episode">
<b>Number of view:</b> {{userMetaData.count}}<br /> <b>Number of view:</b> {{userMetaData.count}}<br />
<b>Position:</b> {{userMetaData.percentDisplay}} % ==> {{convertIndisplayTime(userMetaData.time)}} <b>Position:</b> {{userMetaData.percentDisplay}} % ==> {{convertIndisplayTime(userMetaData.time)}}
</div> </div>
}
<div class="description"> <div class="description">
{{description}} {{description}}
</div> </div>
</div> </div>
<div class="fill-all bg-black" *ngIf="playVideo"> }
@else {
<div class="fill-all bg-black">
<div class="video" #globalVideoElement (mousemove)="startHideTimer()" <div class="video" #globalVideoElement (mousemove)="startHideTimer()"
(fullscreenchange)="onFullscreenChange($event)"> (fullscreenchange)="onFullscreenChange()">
<div class="video-elem"> <div class="video-elem">
<video src="{{videoSource}}" #videoPlayer preload (play)="changeStateToPlay()" <video src="{{videoSource}}" #videoPlayer preload (play)="changeStateToPlay()"
(pause)="changeStateToPause()" (timeupdate)="changeTimeupdate($event.currentTime)" (pause)="changeStateToPause()" (timeupdate)="changeTimeupdate($event.currentTime)"
@ -73,9 +95,14 @@
<!--<p>Your browser does not support HTML5 video player. download video: <a href="{{videoSource}}>link here</a>.</p>--> <!--<p>Your browser does not support HTML5 video player. download video: <a href="{{videoSource}}>link here</a>.</p>-->
</video> </video>
</div> </div>
<div class="controls" *ngIf="!displayNeedHide || !isPlaying"> @if(!displayNeedHide || !isPlaying) {
<button (click)="onPlay()" *ngIf="!isPlaying"><i class="material-icons">play_arrow</i></button> <div class="controls">
<button (click)="onPause()" *ngIf="isPlaying"><i class="material-icons">pause</i></button> @if(isPlaying) {
<button (click)="onPause()"><i class="material-icons">pause</i></button>
}
@else {
<button (click)="onPlay()"><i class="material-icons">play_arrow</i></button>
}
<button (click)="onStop()"><i class="material-icons">stop</i></button> <button (click)="onStop()"><i class="material-icons">stop</i></button>
<div class="timer"> <div class="timer">
<div> <div>
@ -91,41 +118,51 @@
<button (click)="onForward()"><i class="material-icons">fast_forward</i></button> <button (click)="onForward()"><i class="material-icons">fast_forward</i></button>
<!--<button (click)="onNext()"><i class="material-icons">navigate_next</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)="onMore()" ><i class="material-icons">more_vert</i></button>-->
<button (click)="onFullscreen()" *ngIf="!isFullScreen"><i class="material-icons">fullscreen</i></button> @if(isFullScreen) {
<button (click)="onFullscreenExit()" *ngIf="isFullScreen"><i <button (click)="onFullscreenExit()"><i class="material-icons">fullscreen_exit</i></button>
class="material-icons">fullscreen_exit</i></button> }
@else {
<button (click)="onFullscreen()"><i class="material-icons">fullscreen</i></button>
}
<!--<button (click)="onTakeScreenShoot()"><i class="material-icons">add_a_photo</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 (click)="onVolumeMenu()"><i class="material-icons">volume_up</i></button>
@if(!isPlaying) {
<button class="bigPause" (click)="onPauseToggle()"><i *ngIf="!isPlaying" <button class="bigPause" (click)="onPauseToggle()"><i class="material-icons">play_circle_outline</i></button>
class="material-icons">play_circle_outline</i></button> <button class="bigRewind" (click)="onRewind()"><i class="material-icons">fast_rewind</i></button>
<button class="bigRewind" (click)="onRewind()"><i *ngIf="!isPlaying" <button class="bigForward" (click)="onForward()"><i class="material-icons">fast_forward</i></button>
class="material-icons">fast_rewind</i></button> }
<button class="bigForward" (click)="onForward()"><i *ngIf="!isPlaying"
class="material-icons">fast_forward</i></button>
</div> </div>
}
<div class="title-inline" *ngIf="!isFullScreen || !isPlaying"> @if(!isFullScreen || !isPlaying) {
<div class="title-inline">
{{generatedName}} {{generatedName}}
</div> </div>
<div class="video-button" *ngIf="!isFullScreen || !isPlaying"> <div class="video-button">
<button (click)="onRequireStop()"> <button (click)="onRequireStop()">
<i class="material-icons big-button">highlight_off</i> <i class="material-icons big-button">highlight_off</i>
</button> </button>
</div> </div>
<div class="volume" *ngIf="displayVolumeMenu && (!displayNeedHide || !isPlaying)"> }
@if(displayVolumeMenu && (!displayNeedHide || !isPlaying)) {
<div class="volume">
<div class="volume-menu"> <div class="volume-menu">
<div class="slidecontainer"> <div class="slidecontainer">
<input type="range" min="0" max="100" class="slider" [value]="volumeValue" <input type="range" min="0" max="100" class="slider" [value]="volumeValue"
(input)="onVolume($event.target)"> (input)="onVolume($event.target)">
</div> </div>
<button (click)="onVolumeMute()" *ngIf="!videoPlayer.muted"><i @if(videoPlayer.muted) {
class="material-icons">volume_mute</i></button> <button (click)="onVolumeUnMute()"><i
<button (click)="onVolumeUnMute()" *ngIf="videoPlayer.muted"><i
class="material-icons">volume_off</i></button> class="material-icons">volume_off</i></button>
}
@else {
<button (click)="onVolumeMute()"><i
class="material-icons">volume_mute</i></button>
}
</div> </div>
</div> </div>
}
</div> </div>
</div> </div>
}
<canvas #canvascreenshoot style="overflow:auto"></canvas> <canvas #canvascreenshoot style="overflow:auto"></canvas>
</div> </div>

2
front/src/common

@ -1 +1 @@
Subproject commit c3489422f2df7f16465b4358e868664af9cda81c Subproject commit 147a955b195eb7c90e445d404f043d9a363087ca