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

61
front/package.json
View File

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

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

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

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

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

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

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

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

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

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

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

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

@ -3,9 +3,11 @@
Karideo
</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)">
<app-element-type [element]="data"></app-element-type>
</div>
@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>

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

@ -2,132 +2,146 @@
<div class="title">
Edit season
</div>
<div class="fill-all" *ngIf="itemIsRemoved">
<div class="message-big">
<br/><br/><br/>
The season has been removed
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="itemIsNotFound">
<div class="message-big">
<br/><br/><br/>
The season does not exist
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="itemIsLoading">
<div class="message-big">
<br/><br/><br/>
Loading ...<br/>
Please wait.
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="request_raw">
<div class="label">
Number:
</div>
<div class="input">
<input type="number"
placeholder="Id of the season"
[value]="numberVal"
(input)="onNumber($event.target.value)"
/>
@if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The season has been removed
<br/><br/><br/>
</div>
</div>
<div class="request_raw">
<div class="label">
Description:
</div>
<div class="input">
<input type="text"
placeholder="Description of the Media"
[value]="description"
(input)="onDescription($event.target.value)"/>
}
@else if (itemIsNotFound){
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The season does not exist
<br/><br/><br/>
</div>
</div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
}
@else if (itemIsLoading){
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
Loading ...<br/>
Please wait.
<br/><br/><br/>
</div>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
Covers
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
<div class="cover" *ngFor="let element of coversDisplay">
<div class="cover-image">
<img src="{{element.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(element.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
}
@else {
<div class="fill-all">
<div class="request_raw">
<div class="label">
Number:
</div>
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
<div class="input">
<input type="number"
placeholder="Id of the season"
[value]="numberVal"
(input)="onNumber($event.target.value)"
/>
</div>
</div>
<div class="request_raw">
<div class="label">
Description:
</div>
<div class="input">
<input type="text"
placeholder="Description of the Media"
[value]="description"
(input)="onDescription($event.target.value)"/>
</div>
</div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title">
Covers
</div>
<div class="fill-all">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
@for (data of coversDisplay; track data.id;) {
<div class="cover" >
<div class="cover-image">
<img src="{{data.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(data.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
</div>
}
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
Administration
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="request_raw">
<div class="label">
<i class="material-icons">data_usage</i> ID:
</div>
<div class="input">
{{idSeason}}
</div>
<!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title">
Administration
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
Videos:
<div class="fill-all">
<div class="request_raw">
<div class="label">
<i class="material-icons">data_usage</i> ID:
</div>
<div class="input">
{{idSeason}}
</div>
</div>
<div class="input">
{{videoCount}}
<div class="clear"></div>
<div class="request_raw">
<div class="label">
Videos:
</div>
<div class="input">
{{videoCount}}
</div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
<i class="material-icons">delete_forever</i> Trash:
</div>
@if(videoCount == '0') {
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove season
</button>
</div>
}
@else {
<div class="input">
<i class="material-icons">new_releases</i> Can not remove season, video depending on it
</div>
}
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
<i class="material-icons">delete_forever</i> Trash:
</div>
<div class="input" *ngIf="(videoCount == '0')">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove season
</button>
</div>
<div class="input" *ngIf="(videoCount != '0')">
<i class="material-icons">new_releases</i> Can not remove season, video depending on it
</div>
</div>
<div class="clear"></div>
</div>
}
</div>
<upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize"

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

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

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

@ -2,153 +2,169 @@
<div class="title">
Edit series
</div>
<div class="fill-all" *ngIf="itemIsRemoved">
<div class="message-big">
<br/><br/><br/>
The series has been removed
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="itemIsNotFound">
<div class="message-big">
<br/><br/><br/>
The series does not exist
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="itemIsLoading">
<div class="message-big">
<br/><br/><br/>
Loading ...<br/>
Please wait.
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="request_raw">
<div class="label">
Type:
</div>
<div class="input">
<select [ngModel]="typeId"
(ngModelChange)="onChangeType($event)">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option>
</select>
@if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The series has been removed
<br/><br/><br/>
</div>
</div>
<div class="request_raw">
<div class="label">
Name:
</div>
<div class="input">
<input type="text"
placeholder="Name of the Series"
[value]="name"
(input)="onName($event.target.value)"
/>
}
@else if(itemIsNotFound) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The series does not exist
<br/><br/><br/>
</div>
</div>
<div class="request_raw">
<div class="label">
Description:
</div>
<div class="input">
<input type="text"
placeholder="Description of the Media"
[value]="description"
(input)="onDescription($event.target.value)"/>
}
@else if(itemIsLoading) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
Loading ...<br/>
Please wait.
<br/><br/><br/>
</div>
</div>
<div class="clear"></div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
Covers
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
<div class="cover" *ngFor="let element of coversDisplay">
<div class="cover-image">
<img src="{{element.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(element.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
}
@else {
<div class="fill-all">
<div class="request_raw">
<div class="label">
Type:
</div>
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
<div class="input">
<select [ngModel]="typeId"
(ngModelChange)="onChangeType($event)">
@for (data of listType; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select>
</div>
</div>
<div class="request_raw">
<div class="label">
Name:
</div>
<div class="input">
<input type="text"
placeholder="Name of the Series"
[value]="name"
(input)="onName($event.target.value)"
/>
</div>
</div>
<div class="request_raw">
<div class="label">
Description:
</div>
<div class="input">
<input type="text"
placeholder="Description of the Media"
[value]="description"
(input)="onDescription($event.target.value)"/>
</div>
</div>
<div class="clear"></div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title">
Covers
</div>
<div class="fill-all">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
@for (data of coversDisplay; track data.id;) {
<div class="cover">
<div class="cover-image">
<img src="{{data.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(data.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
</div>
}
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
Administration
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="request_raw">
<div class="label">
<i class="material-icons">data_usage</i> ID:
</div>
<div class="input">
{{idSeries}}
</div>
<!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title">
Administration
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
Seasons:
<div class="fill-all">
<div class="request_raw">
<div class="label">
<i class="material-icons">data_usage</i> ID:
</div>
<div class="input">
{{idSeries}}
</div>
</div>
<div class="input">
{{seasonsCount}}
<div class="clear"></div>
<div class="request_raw">
<div class="label">
Seasons:
</div>
<div class="input">
{{seasonsCount}}
</div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
Videos:
</div>
<div class="input">
{{videoCount}}
</div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
<i class="material-icons">delete_forever</i> Trash:
</div>
@if(videoCount == '0' && seasonsCount == '0') {
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove Series
</button>
</div>
}
@else {
<div class="input">
<i class="material-icons">new_releases</i> Can not remove season or video depending on it
</div>
}
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
Videos:
</div>
<div class="input">
{{videoCount}}
</div>
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
<i class="material-icons">delete_forever</i> Trash:
</div>
<div class="input" *ngIf="(videoCount == '0' && seasonsCount == '0')">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove Series
</button>
</div>
<div class="input" *ngIf="(videoCount != '0' || seasonsCount != '0')">
<i class="material-icons">new_releases</i> Can not remove season or video depending on it
</div>
</div>
<div class="clear"></div>
</div>
}
</div>
<upload-progress [mediaTitle]="upload.labelMediaTitle"

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

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

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

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

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

@ -32,176 +32,183 @@
</tbody>
</table>
</div>
<div *ngIf="this.parsedElement.length !== 0" class="title">
Meta-data:
</div>
<div class="clear"><br/></div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<tbody>
<tr>
<td class="left-colomn">Type:</td>
<td class="right-colomn">
<select [ngModel]="typeId"
(ngModelChange)="onChangeType($event)"
[class.error]="typeId === undefined">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
</tr>
<tr>
<td class="left-colomn">Series:</td>
<td class="right-colomn">
<input type="text"
placeholder="Series of the Media"
[value]="globalSeries"
(input)="onSeries($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="seriesId"
(ngModelChange)="onChangeSeries($event)">
<option *ngFor="let element of listSeries" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newSeries()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
<tr>
<td class="left-colomn">Season:</td>
<td class="right-colomn">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="season of the Media"
[value]="globalSeason"
(input)="onSeason($event.target.value)"
/>
</td>
</tr>
</tbody>
</table>
@if(parsedElement.length !== 0) {
<div class="title">
Meta-data:
</div>
<div class="clear"></div>
<div class="request_raw_table">
<table>
<colgroup>
<div class="clear"><br/></div>
<div class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Episode ID:</th>
<th>Episode Title:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of this.parsedElement">
<td class="left-colomn">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="e?"
[value]="data.episode"
(input)="onEpisode(data, $event.target.value)"
[class.error]="data.episodeDetected === true"
/>
</td>
<td class="right-colomn" >
<input type="text"
placeholder="Name of the Media"
[value]="data.title"
(input)="onTitle(data, $event.target.value)"
[class.error]="data.title === ''"
/>
<span *ngIf="data.nameDetected === true" class="error">
^^^This title already exist !!!
</span>
</td>
<td class="tool-colomn" >
<button class="button color-button-cancel color-shadow-black"
(click)="removeElmentFromList(data, $event.target.value)"
type="submit"
alt="Delete">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
</tbody>
</table>
</colgroup>
<tbody>
<tr>
<td class="left-colomn">Type:</td>
<td class="right-colomn">
<select [ngModel]="typeId"
(ngModelChange)="onChangeType($event)"
[class.error]="typeId === undefined">
@for (data of listType; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select>
</td>
</tr>
<tr>
<td class="left-colomn">Series:</td>
<td class="right-colomn">
<input type="text"
placeholder="Series of the Media"
[value]="globalSeries"
(input)="onSeries($event.target.value)"
/>
</td>
</tr>
<tr>
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="seriesId"
(ngModelChange)="onChangeSeries($event)">
@for (data of listSeries; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select>
</td>
<td class="tool-colomn">
<!--
<button class="button color-button-normal color-shadow-black" (click)="newSeries()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
-->
</td>
</tr>
<tr>
<td class="left-colomn">Season:</td>
<td class="right-colomn">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="season of the Media"
[value]="globalSeason"
(input)="onSeason($event.target.value)"
/>
</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Episode ID:</th>
<th>Episode Title:</th>
</tr>
</thead>
<tbody>
@for (data of parsedElement; track data.id;) {
<tr>
<td class="left-colomn">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="e?"
[value]="data.episode"
(input)="onEpisode(data, $event.target.value)"
[class.error]="data.episodeDetected === true"
/>
</td>
<td class="right-colomn" >
<input type="text"
placeholder="Name of the Media"
[value]="data.title"
(input)="onTitle(data, $event.target.value)"
[class.error]="data.title === ''"
/>
@if(data.nameDetected === true) {
<span class="error">
^^^This title already exist !!!
</span>
}
</td>
<td class="tool-colomn" >
<button class="button color-button-cancel color-shadow-black"
(click)="removeElmentFromList(data, $event.target.value)"
type="submit"
alt="Delete">
<i class="material-icons">delete</i>
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="clear"></div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black"
[disabled]="!needSend"
(click)="sendFile()"
type="submit">
<i class="material-icons">cloud_upload</i> Upload
</button>
</div>
<div class="clear"></div>
@if(listFileInBdd !== undefined) {
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Episode ID:</th>
<th>Episode Title:</th>
</tr>
</thead>
<tbody>
@for (data of listFileInBdd; track data.id;) {
<tr>
<td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td>
<td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
<div class="clear"></div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black"
[disabled]="!needSend"
(click)="sendFile()"
type="submit">
<i class="material-icons">cloud_upload</i> Upload
</button>
</div>
<div class="clear"></div>
<div class="request_raw_table" *ngIf="this.listFileInBdd !== undefined">
<table>
<colgroup>
<div class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:70%">
<col style="width:10%">
</colgroup>
<thead>
<tr>
<th>Episode ID:</th>
<th>Episode Title:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of this.listFileInBdd">
<td class="left-colomn" [class.error]="data.episodeDetected === true">{{data.episode}}</td>
<td class="right-colomn" [class.error]="data.nameDetected === true">{{data.name}}</td>
</tr>
</tbody>
</table>
<col style="width:80%">
</colgroup>
<tbody>
@for (data of parsedFailedElement; track data.file;) {
<tr>
<td class="left-colomn">Rejected:</td>
<td class="right-colomn">
{{data.file.name}}<br/> ==&gt; {{data.reason}}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
<div *ngIf="this.parsedElement.length !== 0" class="fill-all">
<div class="request_raw_table">
<table>
<colgroup>
<col style="width:10%">
<col style="width:80%">
</colgroup>
<tbody>
<!-- no need
<tr *ngFor="let data of this.parsedElement">
<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="right-colomn">
{{data.file.name}}<br/> ==&gt; {{data.reason}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
}
</div>
<upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="upload.mediaSendSize"

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

@ -23,6 +23,7 @@ export class FileParsedElement {
public nameDetected: boolean = false;
public episodeDetected: boolean = false;
constructor(
public id: number,
public file: File,
public series: string,
public season: number,
@ -42,7 +43,7 @@ export class FileFailParsedElement {
@Component({
selector: 'app-video-edit',
templateUrl: './upload.html',
styleUrls: [ './upload.less' ]
styleUrls: ['./upload.less']
})
export class UploadScene implements OnInit {
@ -55,11 +56,11 @@ export class UploadScene implements OnInit {
saisonId: number = null;
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;
// 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[] = [
{ value: null, label: '---' },
@ -67,13 +68,13 @@ export class UploadScene implements OnInit {
listSeries: ElementList[] = [
{ value: null, label: '---' },
];
listSeries2 = [ { id: null, description: '---' } ];
listSeries2 = [{ id: null, description: '---' }];
/*
config = {
displayKey: "label", // if objects array passed which key to be displayed defaults to description
search: true,
limitTo: 3,
displayKey: "label", // if objects array passed which key to be displayed defaults to description
search: true,
limitTo: 3,
};
*/
config = {
@ -81,7 +82,7 @@ export class UploadScene implements OnInit {
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
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)
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
@ -102,17 +103,17 @@ export class UploadScene implements OnInit {
}
updateNeedSend(): boolean {
if(this.parsedElement.length === 0) {
if (this.parsedElement.length === 0) {
this.needSend = false;
return;
}
this.needSend = true;
for(let iii = 0; iii < this.parsedElement.length; iii++) {
if(this.parsedElement[iii].title === undefined || this.parsedElement[iii].title === null || this.parsedElement[iii].title === '') {
for (let iii = 0; iii < this.parsedElement.length; iii++) {
if (this.parsedElement[iii].title === undefined || this.parsedElement[iii].title === null || this.parsedElement[iii].title === '') {
this.needSend = false;
}
}
if(this.typeId === undefined || this.typeId === null) {
if (this.typeId === undefined || this.typeId === null) {
this.needSend = false;
}
return this.needSend;
@ -120,16 +121,16 @@ export class UploadScene implements OnInit {
ngOnInit() {
let self = this;
this.listType = [ { value: null, label: '---' } ];
this.listSeries = [ { value: null, label: '---' } ];
this.listSeason = [ { value: null, label: '---' } ];
this.listType = [{ value: null, label: '---' }];
this.listSeries = [{ value: null, label: '---' }];
this.listSeason = [{ value: null, label: '---' }];
this.typeService.getData()
.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 });
}
}).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
console.log(`get response22 : ${JSON.stringify(response2, null, 2)}`);
});
console.log(' END INIT ');
}
@ -140,34 +141,34 @@ export class UploadScene implements OnInit {
}
private updateType(value: any): void {
console.log(`Change requested of type ... ${ value}`);
if(this.typeId === value) {
console.log(`Change requested of type ... ${value}`);
if (this.typeId === value) {
return;
}
this.typeId = value;
// this.data.series_id = null;
// this.data.season_id = null;
this.listSeries = [ { value: null, label: '---' } ];
this.listSeason = [ { value: null, label: '---' } ];
this.listSeries = [{ value: null, label: '---' }];
this.listSeason = [{ value: null, label: '---' }];
let self = this;
this.updateNeedSend();
if(this.typeId !== null) {
if (this.typeId !== null) {
self.typeService.getSubSeries(this.typeId)
.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 });
}
}).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
console.log(`get response22 : ${JSON.stringify(response2, null, 2)}`);
});
}
}
onChangeSeries(value: any): void {
this.seriesId = value;
if(!(value === undefined || value === null)) {
for(let iii = 0; iii < this.listSeries.length; iii++) {
if(this.listSeries[iii].value === value) {
if (!(value === undefined || value === null)) {
for (let iii = 0; iii < this.listSeries.length; iii++) {
if (this.listSeries[iii].value === value) {
this.globalSeries = this.listSeries[iii].label;
break;
}
@ -188,8 +189,8 @@ export class UploadScene implements OnInit {
this.updateNeedSend();
}
removeElmentFromList(data: FileParsedElement, value: any): void {
for(let iii = 0; iii < this.parsedElement.length; iii++) {
if(this.parsedElement[iii] === data) {
for (let iii = 0; iii < this.parsedElement.length; iii++) {
if (this.parsedElement[iii] === data) {
this.parsedElement.splice(iii, 1);
break;
}
@ -207,16 +208,16 @@ export class UploadScene implements OnInit {
onSeries(value: any): void {
this.globalSeries = value;
let self = this;
if(this.globalSeries !== '') {
if (this.globalSeries !== '') {
this.seriesService.getLike(this.globalSeries)
.then((response: any[]) => {
console.log(`find element: ${ response.length}`);
for(let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`);
console.log(`find element: ${response.length}`);
for (let iii = 0; iii < response.length; iii++) {
console.log(` - ${JSON.stringify(response[iii])}`);
}
if(response.length === 0) {
if (response.length === 0) {
self.seriesId = null;
} else if(response.length === 1) {
} else if (response.length === 1) {
self.seriesId = response[0].id;
}
self.updateListOfVideoToCheck();
@ -239,8 +240,8 @@ export class UploadScene implements OnInit {
this.typeId = null;
this.seriesId = null;
this.saisonId = null;
this.listSeries = [ { value: null, label: '---' } ];
this.listSeason = [ { value: null, label: '---' } ];
this.listSeries = [{ value: null, label: '---' }];
this.listSeason = [{ value: null, label: '---' }];
}
addFileWithMetaData(file: File) {
@ -250,62 +251,62 @@ export class UploadScene implements OnInit {
let episode: number | null = null;
let title: string = '';
console.log(`select file ${ file.name}`);
console.log(`select file ${file.name}`);
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(/[Ee]([0-9]+)[- \t]+[Ss]([0-9]+)/g, '-s$2-e$1-');
tmpName = tmpName.replace(/_/g, '-');
tmpName = tmpName.replace(/--/g, '-');
console.log(`select file ${ tmpName}`);
console.log(`select file ${tmpName}`);
const splitElement = tmpName.split('-');
if(splitElement.length === 1) {
if (splitElement.length === 1) {
title = splitElement[0];
} else {
if(splitElement.length >= 2) {
if (splitElement.length >= 2) {
series = splitElement[0];
}
splitElement.splice(0, 1);
if(splitElement.length === 1) {
if (splitElement.length === 1) {
title = splitElement[0];
} else {
while(splitElement.length > 0) {
while (splitElement.length > 0) {
let element = splitElement[0];
let find = false;
if(season === null) {
if(element.length >= 1 && (element[0] === 's' || element[0] === 'S')) {
if (season === null) {
if (element.length >= 1 && (element[0] === 's' || element[0] === 'S')) {
element = element.substring(1);
season = parseInt(element, 10);
find = true;
}
}
if(episode === null && find === false) {
if(element.length >= 1 && (element[0] === 'e' || element[0] === 'E')) {
if (episode === null && find === false) {
if (element.length >= 1 && (element[0] === 'e' || element[0] === 'E')) {
element = element.substring(1);
episode = parseInt(element, 10);
find = true;
}
}
if(find === false) {
if(title === '') {
if (find === false) {
if (title === '') {
title = element;
} else {
title = `${title }-${ element}`;
title = `${title}-${element}`;
}
}
splitElement.splice(0, 1);
}
}
}
if(isNaN(episode)) {
if (isNaN(episode)) {
episode = null;
}
if(isNaN(season)) {
if (isNaN(season)) {
season = null;
}
// remove extention
title = title.replace(new RegExp('\\.(mkv|MKV|Mkv|webm|WEBM|Webm|mp4)'), '');
let tmp = new FileParsedElement(file, series, season, episode, title);
console.log(`==>${ JSON.stringify(tmp)}`);
let tmp = new FileParsedElement(this.parsedElement.length, file, series, season, episode, title);
console.log(`==>${JSON.stringify(tmp)}`);
// add it in the list.
this.parsedElement.push(tmp);
}
@ -316,30 +317,30 @@ export class UploadScene implements OnInit {
onChangeFile(value: any): void {
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]);
}
// check if all global parameters are generic:
if(this.parsedElement.length === 0) {
if (this.parsedElement.length === 0) {
this.updateNeedSend();
return;
}
// clean different series:
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 }'`);
if(this.parsedElement[0].series !== this.parsedElement[iii].series) {
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}'`);
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'));
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);
iii--;
}
}
// clean different season:
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 }'`);
if(this.parsedElement[0].season !== this.parsedElement[iii].season) {
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}'`);
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'));
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);
iii--;
}
@ -352,16 +353,16 @@ export class UploadScene implements OnInit {
this.seriesId = null;
this.saisonId = null;
let self = this;
if(this.globalSeries !== '') {
if (this.globalSeries !== '') {
this.seriesService.getLike(this.globalSeries)
.then((response: any[]) => {
console.log(`find element: ${ response.length}`);
for(let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`);
console.log(`find element: ${response.length}`);
for (let iii = 0; iii < response.length; iii++) {
console.log(` - ${JSON.stringify(response[iii])}`);
}
if(response.length === 0) {
if (response.length === 0) {
self.seriesId = null;
} else if(response.length === 1) {
} else if (response.length === 1) {
let serieElem = response[0];
self.seriesId = serieElem.id;
self.updateType(serieElem.parentId);
@ -375,7 +376,7 @@ export class UploadScene implements OnInit {
sendFile(): void {
console.log(`Send file requested ... ${ this.parsedElement.length}`);
console.log(`Send file requested ... ${this.parsedElement.length}`);
this.upload = new UploadProgress();
// display the upload pop-in
this.popInService.open('popin-upload-progress');
@ -386,13 +387,13 @@ export class UploadScene implements OnInit {
let self = this;
this.uploadFile(this.parsedElement[id], id, total, () => {
let id2 = id + 1;
if(id2 < total) {
if (id2 < total) {
self.globalUpLoad(id2, total);
} else {
self.upload.result = 'Media creation done';
}
}, (value:string) => {
self.upload.error = `Error in the upload of the data...${ value}`;
}, (value: string) => {
self.upload.error = `Error in the upload of the data...${value}`;
});
}
uploadFile(eleemnent: FileParsedElement, id: number, total: number, sendDone: any, errorOccured: any): void {
@ -400,31 +401,31 @@ export class UploadScene implements OnInit {
self.upload.labelMediaTitle = '';
// add series
if(self.globalSeries !== null) {
if(self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }:`;
if (self.globalSeries !== null) {
if (self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle}:`;
}
self.upload.labelMediaTitle = self.upload.labelMediaTitle + self.globalSeries;
}
// add season
if(self.globalSeason !== null && self.globalSeason !== undefined && self.globalSeason.toString().length !== 0) {
if(self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }-`;
if (self.globalSeason !== null && self.globalSeason !== undefined && self.globalSeason.toString().length !== 0) {
if (self.upload.labelMediaTitle.length !== 0) {
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
if(eleemnent.episode !== null && eleemnent.episode !== undefined && eleemnent.episode.toString().length !== 0) {
if(self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }-`;
if (eleemnent.episode !== null && eleemnent.episode !== undefined && eleemnent.episode.toString().length !== 0) {
if (self.upload.labelMediaTitle.length !== 0) {
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
if(self.upload.labelMediaTitle.length !== 0) {
self.upload.labelMediaTitle = `${self.upload.labelMediaTitle }-`;
if (self.upload.labelMediaTitle.length !== 0) {
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.globalSeries,
@ -434,60 +435,60 @@ export class UploadScene implements OnInit {
eleemnent.title,
self.typeId,
(count, totalTmp) => {
// console.log("upload : " + count*100/totalTmp);
// console.log("upload : " + count*100/totalTmp);
self.upload.mediaSendSize = count;
self.upload.mediaSize = totalTmp;
})
.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();
}).catch((response) => {
// self.error = "Can not get the data";
// self.error = "Can not get the data";
console.log('Can not add the data in the system...');
errorOccured(JSON.stringify(response, null, 2));
});
}
public checkSimilarString(valueA:string, valueB:string): boolean {
public checkSimilarString(valueA: string, valueB: string): boolean {
let valueAL = valueA.toLowerCase();
let valueBL = valueB.toLowerCase();
valueAL = valueAL.replace(/[ \t\n\r-_#~@]/g, '');
valueBL = valueBL.replace(/[ \t\n\r-_#~@]/g, '');
if(valueAL === valueBL) {
if (valueAL === valueBL) {
return true;
}
if(valueAL.startsWith(valueBL)) {
if (valueAL.startsWith(valueBL)) {
return true;
}
if(valueBL.startsWith(valueAL)) {
if (valueBL.startsWith(valueAL)) {
return true;
}
return false;
}
checkConcordence():void {
if(this.parsedElement === null) {
checkConcordence(): void {
if (this.parsedElement === null) {
return;
}
// 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].episodeDetected = false;
}
if(this.listFileInBdd === null) {
if (this.listFileInBdd === null) {
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].episodeDetected = false;
}
for(let iii = 0; iii < this.parsedElement.length; iii++) {
for(let jjj = 0; jjj < this.listFileInBdd.length; jjj++) {
if(this.checkSimilarString(this.parsedElement[iii].title, this.listFileInBdd[jjj].name)) {
for (let iii = 0; iii < this.parsedElement.length; iii++) {
for (let jjj = 0; jjj < this.listFileInBdd.length; jjj++) {
if (this.checkSimilarString(this.parsedElement[iii].title, this.listFileInBdd[jjj].name)) {
this.parsedElement[iii].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.listFileInBdd[jjj].episodeDetected = true;
}
@ -497,13 +498,13 @@ export class UploadScene implements OnInit {
updateListOfVideoToCheck(): void {
// No series ID set ==> nothing to do.
if(this.seriesId === null) {
if (this.seriesId === null) {
this.listFileInBdd = null;
return;
}
let self = this;
// no season check only the series files.
if(this.globalSeason === null) {
if (this.globalSeason === null) {
self.seriesService.getVideo(self.seriesId)
.then((response: any[]) => {
self.listFileInBdd = response;
@ -523,14 +524,14 @@ export class UploadScene implements OnInit {
this.seriesService.getSeason(this.seriesId)
.then((response: any[]) => {
// 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));
if(response[iii].name === `${self.globalSeason}`) {
if (response[iii].name === `${self.globalSeason}`) {
self.saisonId = response[iii].id;
break;
}
}
if(self.saisonId === null) {
if (self.saisonId === null) {
return;
}
self.seasonService.getVideo(self.saisonId)
@ -550,15 +551,15 @@ export class UploadScene implements OnInit {
}
eventPopUpSeason(event: string): void {
console.log(`GET event: ${ event}`);
console.log(`GET event: ${event}`);
this.popInService.close('popin-new-season');
}
eventPopUpSeries(event: string): void {
console.log(`GET event: ${ event}`);
console.log(`GET event: ${event}`);
this.popInService.close('popin-new-series');
}
eventPopUpType(event: string): void {
console.log(`GET event: ${ event}`);
console.log(`GET event: ${event}`);
this.popInService.close('popin-new-type');
}

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

@ -2,194 +2,209 @@
<div class="title">
Edit Media
</div>
<div class="fill-all" *ngIf="itemIsRemoved">
<div class="message-big">
<br/><br/><br/>
The media has been removed
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="itemIsNotFound">
<div class="message-big">
<br/><br/><br/>
The media does not exist
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="itemIsLoading">
<div class="message-big">
<br/><br/><br/>
Loading ...<br/>
Please wait.
<br/><br/><br/>
</div>
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="request_raw">
<div class="label">
Title:
</div>
<div class="input">
<input type="text"
placeholder="Name of the Media"
[value]="data.name"
(input)="onName($event.target.value)"
/>
@if(itemIsRemoved) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The media has been removed
<br/><br/><br/>
</div>
</div>
<div class="request_raw2">
<div class="label">
<i class="material-icons">description</i> Description:
</div>
<div class="input">
<textarea (input)="onDescription($event.target.value)" placeholder="Description of the Media" rows=6>{{data.description}}</textarea>
<!--<input type="text"
placeholder="Description of the Media"
[value]="data.description"
(input)="onDescription($event.target.value)"/>-->
}
@else if(itemIsNotFound) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
The media does not exist
<br/><br/><br/>
</div>
</div>
<div class="request_raw">
<div class="label">
<i class="material-icons">date_range</i> Date:
</div>
<div class="input">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="2112"
[value]="data.time"
(input)="onDate($event.target)"/>
}
@else if(itemIsLoading) {
<div class="fill-all">
<div class="message-big">
<br/><br/><br/>
Loading ...<br/>
Please wait.
<br/><br/><br/>
</div>
</div>
<div class="request_raw">
<div class="label">
Type:
</div>
<div class="input">
<select [ngModel]="data.typeId"
(ngModelChange)="onChangeType($event)">
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option>
</select>
</div>
<div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newType()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
</div>
</div>
<div class="request_raw">
<div class="label">
Series:
</div>
<div class="input">
<select [ngModel]="data.seriesId"
(ngModelChange)="onChangeSeries($event)">
<option *ngFor="let element of listSeries" [ngValue]="element.value">{{element.label}}</option>
</select>
</div>
<div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newSeries()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
</div>
</div>
<div class="request_raw">
<div class="label">
Season:
</div>
<div class="input">
<select [ngModel]="data.seasonId"
(ngModelChange)="onChangeSeason($event)">
<option *ngFor="let element of listSeason" [ngValue]="element.value">{{element.label}}</option>
</select>
</div>
<div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newSeason()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
</div>
</div>
<div class="request_raw">
<div class="label">
Episode:
</div>
<div class="input">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="5"
[value]="data.episode"
(input)="onEpisode($event.target)"/>
</div>
</div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" [disabled]="!needSend" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
Covers
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
<div class="cover" *ngFor="let element of coversDisplay">
<div class="cover-image">
<img src="{{element.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(element.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
}
@else {
<div class="fill-all">
<div class="request_raw">
<div class="label">
Title:
</div>
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
<div class="input">
<input type="text"
placeholder="Name of the Media"
[value]="data.name"
(input)="onName($event.target.value)"
/>
</div>
</div>
<div class="request_raw2">
<div class="label">
<i class="material-icons">description</i> Description:
</div>
<div class="input">
<textarea (input)="onDescription($event.target.value)" placeholder="Description of the Media" rows=6>{{data.description}}</textarea>
<!--<input type="text"
placeholder="Description of the Media"
[value]="data.description"
(input)="onDescription($event.target.value)"/>-->
</div>
</div>
<div class="request_raw">
<div class="label">
<i class="material-icons">date_range</i> Date:
</div>
<div class="input">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="2112"
[value]="data.time"
(input)="onDate($event.target)"/>
</div>
</div>
<div class="request_raw">
<div class="label">
Type:
</div>
<div class="input">
<select [ngModel]="data.typeId"
(ngModelChange)="onChangeType($event)">
@for (data of listType; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select>
</div>
<div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newType()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
</div>
</div>
<div class="request_raw">
<div class="label">
Series:
</div>
<div class="input">
<select [ngModel]="data.seriesId"
(ngModelChange)="onChangeSeries($event)">
@for (data of listSeries; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select>
</div>
<div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newSeries()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
</div>
</div>
<div class="request_raw">
<div class="label">
Season:
</div>
<div class="input">
<select [ngModel]="data.seasonId"
(ngModelChange)="onChangeSeason($event)">
@for (data of listSeason; track data.value;) {
<option [ngValue]="data.value">{{data.label}}</option>
}
</select>
</div>
<div class="input_add">
<button class="button color-button-normal color-shadow-black" (click)="newSeason()" type="submit">
<i class="material-icons">add_circle_outline</i>
</button>
</div>
</div>
<div class="request_raw">
<div class="label">
Episode:
</div>
<div class="input">
<input type="number"
pattern="[0-9]{0-4}"
placeholder="5"
[value]="data.episode"
(input)="onEpisode($event.target)"/>
</div>
</div>
<div class="send_value">
<button class="button fill-x color-button-validate color-shadow-black" [disabled]="!needSend" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- Cover section --------------------------------- -->
<div class="title">
Covers
</div>
<div class="fill-all">
<div class="hide-element">
<input type="file"
#fileInput
(change)="onChangeCover($event.target)"
placeholder="Select a cover file"
accept=".png,.jpg,.jpeg,.webp"/>
</div>
<div class="request_raw">
<div class="input">
@for (data of coversDisplay; track data.id;) {
<div class="cover">
<div class="cover-image">
<img src="{{data.url}}"/>
</div>
<div class="cover-button">
<button (click)="removeCover(data.id)">
<i class="material-icons button-remove">highlight_off</i>
</button>
</div>
</div>
}
<div class="cover">
<div class="cover-no-image">
</div>
<div class="cover-button">
<button (click)="fileInput.click()">
<i class="material-icons button-add">add_circle_outline</i>
</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
Administration
</div>
<div class="fill-all" *ngIf="!itemIsRemoved && !itemIsNotFound && !itemIsLoading">
<div class="request_raw">
<div class="label">
<i class="material-icons">data_usage</i> ID:
</div>
<div class="input">
{{data.dataId}}
</div>
<!-- ------------------------- ADMIN section --------------------------------- -->
<div class="title">
Administration
</div>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
<i class="material-icons">delete_forever</i> Trash:
<div class="fill-all">
<div class="request_raw">
<div class="label">
<i class="material-icons">data_usage</i> ID:
</div>
<div class="input">
{{data.dataId}}
</div>
</div>
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove Media
</button>
<div class="clear"></div>
<div class="request_raw">
<div class="label">
<i class="material-icons">delete_forever</i> Trash:
</div>
<div class="input">
<button class="button color-button-cancel color-shadow-black" (click)="removeItem()" type="submit">
<i class="material-icons">delete</i> Remove Media
</button>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
}
</div>
<create-type ></create-type>

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

@ -1,131 +1,168 @@
<div class="main-reduce">
<div class="fill-all" *ngIf="mediaIsNotFound">
<div class="title">
Play media<br /><br /><br /><br /><br />
The media does not exist
</div>
</div>
<div class="fill-all" *ngIf="mediaIsLoading">
<div class="title">
Play media<br /><br /><br /><br /><br />
Loading ...<br />
Please wait.
</div>
</div>
<div class="fill-all" *ngIf="!mediaIsNotFound && !mediaIsLoading && !playVideo">
<div class="title">
{{name}}
</div>
<div class="cover-full">
<div class="cover">
<div class="cover-image" *ngIf="covers">
<img src="{{covers[0]}}" />
</div>
<div class="cover-no-image" *ngIf="covers"></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">
<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">
<button (click)="onRequirePrevious($event)" (auxclick)="onRequirePrevious($event)">
<i class="material-icons big-button">arrow_back_ios</i>
</button>
@if(mediaIsNotFound) {
<div class="fill-all">
<div class="title">
Play media<br /><br /><br /><br /><br />
The media does not exist
</div>
</div>
<div class="clear"></div>
<div class="episode" *ngIf="seriesName!=null">
<b>Series:</b> {{seriesName}}
</div>
<div class="episode" *ngIf="seasonName!=null">
<b>Season:</b> {{seasonName}}
</div>
<div class="episode" *ngIf="episode!=null">
<b>Episode:</b> {{episode}}
</div>
<div class="episode">
<b>generatedName:</b> {{generatedName}}
</div>
<div class="episode" *ngIf="userMetaData">
<b>Number of view:</b> {{userMetaData.count}}<br />
<b>Position:</b> {{userMetaData.percentDisplay}} % ==> {{convertIndisplayTime(userMetaData.time)}}
</div>
<div class="description">
{{description}}
</div>
</div>
<div class="fill-all bg-black" *ngIf="playVideo">
<div class="video" #globalVideoElement (mousemove)="startHideTimer()"
(fullscreenchange)="onFullscreenChange($event)">
<div class="video-elem">
<video src="{{videoSource}}" #videoPlayer preload (play)="changeStateToPlay()"
(pause)="changeStateToPause()" (timeupdate)="changeTimeupdate($event.currentTime)"
(durationchange)="changeDurationchange($event.duration)" (loadedmetadata)="changeMetadata()"
(audioTracks)="audioTracks($event)" autoplay (ended)="onVideoEnded()"><!-- controls > -->
<!--preload="none"-->
<!--<p>Your browser does not support HTML5 video player. download video: <a href="{{videoSource}}>link here</a>.</p>-->
</video>
}
@else if(mediaIsLoading) {
<div class="fill-all">
<div class="title">
Play media<br /><br /><br /><br /><br />
Loading ...<br />
Please wait.
</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>
<button (click)="onStop()"><i class="material-icons">stop</i></button>
<div class="timer">
<div>
<input type="range" min="0" class="slider" [value]="currentTime" [max]="duration"
(input)="seek($event.target)">
</div>
<div class="timer-text">
<label class="unselectable">{{currentTimeDisplay}} / {{durationDisplay}}</label>
</div>
}
@else if(!playVideo) {
<div class="fill-all">
<div class="title">
{{name}}
</div>
<div class="cover-full">
<div class="cover">
@if(covers) {
<div class="cover-image">
<img src="{{covers[0]}}" />
</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>
<!--<button (click)="onBefore()"><i class="material-icons">navigate_before</i></button>-->
<button (click)="onRewind()"><i class="material-icons">fast_rewind</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)="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>
<!--<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>
</div>
<div class="title-inline" *ngIf="!isFullScreen || !isPlaying">
{{generatedName}}
</div>
<div class="video-button" *ngIf="!isFullScreen || !isPlaying">
<button (click)="onRequireStop()">
<i class="material-icons big-button">highlight_off</i>
</button>
</div>
<div class="volume" *ngIf="displayVolumeMenu && (!displayNeedHide || !isPlaying)">
<div class="volume-menu">
<div class="slidecontainer">
<input type="range" min="0" max="100" class="slider" [value]="volumeValue"
(input)="onVolume($event.target)">
@if(haveNext) {
<div class="cover-button-next">
<button (click)="onRequireNext($event)" (auxclick)="onRequireNext($event)">
<i class="material-icons big-button">arrow_forward_ios</i>
</button>
</div>
<button (click)="onVolumeMute()" *ngIf="!videoPlayer.muted"><i
class="material-icons">volume_mute</i></button>
<button (click)="onVolumeUnMute()" *ngIf="videoPlayer.muted"><i
class="material-icons">volume_off</i></button>
}
@if(havePrevious) {
<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>
@if(seriesName) {
<div class="episode">
<b>Series:</b> {{seriesName}}
</div>
}
@if(seasonName) {
<div class="episode">
<b>Season:</b> {{seasonName}}
</div>
}
@if(episode) {
<div class="episode">
<b>Episode:</b> {{episode}}
</div>
}
<div class="episode">
<b>generatedName:</b> {{generatedName}}
</div>
@if(userMetaData) {
<div class="episode">
<b>Number of view:</b> {{userMetaData.count}}<br />
<b>Position:</b> {{userMetaData.percentDisplay}} % ==> {{convertIndisplayTime(userMetaData.time)}}
</div>
}
<div class="description">
{{description}}
</div>
</div>
</div>
}
@else {
<div class="fill-all bg-black">
<div class="video" #globalVideoElement (mousemove)="startHideTimer()"
(fullscreenchange)="onFullscreenChange()">
<div class="video-elem">
<video src="{{videoSource}}" #videoPlayer preload (play)="changeStateToPlay()"
(pause)="changeStateToPause()" (timeupdate)="changeTimeupdate($event.currentTime)"
(durationchange)="changeDurationchange($event.duration)" (loadedmetadata)="changeMetadata()"
(audioTracks)="audioTracks($event)" autoplay (ended)="onVideoEnded()"><!-- controls > -->
<!--preload="none"-->
<!--<p>Your browser does not support HTML5 video player. download video: <a href="{{videoSource}}>link here</a>.</p>-->
</video>
</div>
@if(!displayNeedHide || !isPlaying) {
<div class="controls">
@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>
<div class="timer">
<div>
<input type="range" min="0" class="slider" [value]="currentTime" [max]="duration"
(input)="seek($event.target)">
</div>
<div class="timer-text">
<label class="unselectable">{{currentTimeDisplay}} / {{durationDisplay}}</label>
</div>
</div>
<!--<button (click)="onBefore()"><i class="material-icons">navigate_before</i></button>-->
<button (click)="onRewind()"><i class="material-icons">fast_rewind</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)="onMore()" ><i class="material-icons">more_vert</i></button>-->
@if(isFullScreen) {
<button (click)="onFullscreenExit()"><i 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)="onVolumeMenu()"><i class="material-icons">volume_up</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>
}
@if(!isFullScreen || !isPlaying) {
<div class="title-inline">
{{generatedName}}
</div>
<div class="video-button">
<button (click)="onRequireStop()">
<i class="material-icons big-button">highlight_off</i>
</button>
</div>
}
@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>
@if(videoPlayer.muted) {
<button (click)="onVolumeUnMute()"><i
class="material-icons">volume_off</i></button>
}
@else {
<button (click)="onVolumeMute()"><i
class="material-icons">volume_mute</i></button>
}
</div>
</div>
}
</div>
</div>
}
<canvas #canvascreenshoot style="overflow:auto"></canvas>
</div>

2
front/src/common

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