[DEV] better upload

This commit is contained in:
Edouard DUPIN 2022-07-15 15:09:08 +02:00
parent 9eb301731e
commit 14c10f4885
16 changed files with 255 additions and 206 deletions

View File

@ -46,7 +46,7 @@ ADD front/e2e \
ADD front/src /tmp/src
# generate build
RUN ng build --output-path=dist --configuration=production --base-href=/karideo/ --deploy-url=/karideo/
RUN ng build --output-path=dist --configuration=production --base-href=/karusic/ --deploy-url=/karusic/
######################################################################################
##
@ -70,10 +70,10 @@ RUN apk add --no-cache wget
ENV LANG=C.UTF-8
COPY --from=buildBack /tmp/out/maven/*.jar /application/application.jar
COPY --from=buildFront /tmp/dist /application/karideo/
COPY --from=buildFront /tmp/dist /application/karusic/
WORKDIR /application/
EXPOSE 17080
CMD ["java", "-Xms64M", "-Xmx1G", "-cp", "/application/application.jar", "org.kar.karideo.WebLauncher"]
CMD ["java", "-Xms64M", "-Xmx1G", "-cp", "/application/application.jar", "org.kar.karusic.WebLauncher"]

View File

@ -17,5 +17,5 @@ WORKDIR /application/
EXPOSE 18080
CMD ["java", "-Xms64M", "-Xmx1G", "-cp", "/application/application.jar", "org.kar.karideo.WebLauncher"]
CMD ["java", "-Xms64M", "-Xmx1G", "-cp", "/application/application.jar", "org.kar.karusic.WebLauncher"]

View File

@ -32,3 +32,11 @@ npx ng lint
```
build the local image:
docker build -t gitea.atria-soft.org/kangaroo-and-rabbit/karideo:latest .
docker login gitea.atria-soft.org
docker push gitea.atria-soft.org/kangaroo-and-rabbit/karideo:latest

View File

@ -1,8 +1,8 @@
<div class="bottom" *ngIf="mediaSource">
<div class="media" >
<div class="media-elem">
<audio src="{{mediaSource}}"
#audioPlayer
<video width="1" height="1" src="{{mediaSource}}"
#mediaPlayer
preload
(play)="changeStateToPlay()"
(pause)="changeStateToPause()"
@ -13,7 +13,7 @@
(ended)="onAudioEnded()"
><!-- controls > --> <!--preload="none"-->
<!--<p>Your browser does not support HTML5 media player. download media: <a href="{{mediaSource}}>link here</a>.</p>-->
</audio>
</video>
</div>
<div class="controls">
<button (click)="onPlay()" *ngIf="!isPlaying" ><i class="material-icons">play_arrow</i></button>
@ -37,8 +37,18 @@
<button (click)="onPlayMode()"><i class="material-icons">{{playMode}}</i></button>
<!--<button (click)="onMore()" ><i class="material-icons">more_vert</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>
</div>
<div class="volume" *ngIf="volume_displayMenu">
<div class="volume-menu">
<div class="slidecontainer">
<input type="range" min="0" max="100" class="slider"
[value]="volumeValue"
(input)="onVolume($event.target)">
</div>
<button (click)="onVolumeMute()" *ngIf="!mediaPlayer.muted"><i class="material-icons">volume_mute</i></button>
<button (click)="onVolumeUnMute()" *ngIf="mediaPlayer.muted"><i class="material-icons">volume_off</i></button>
</div>
</div>
</div>

View File

@ -27,13 +27,13 @@ export enum PlayMode {
styleUrls: [ './element-player-audio.less' ]
})
export class ElementPlayerAudioComponent implements OnInit {
audioPlayer: HTMLAudioElement;
mediaPlayer: HTMLVideoElement;
duration: number;
durationDisplay: string;
@ViewChild('audioPlayer')
@ViewChild('mediaPlayer')
set mainVideoEl(el: ElementRef) {
if(el !== null && el !== undefined) {
this.audioPlayer = el.nativeElement;
this.mediaPlayer = el.nativeElement;
}
}
public mediaSource: string = undefined;
@ -44,6 +44,10 @@ export class ElementPlayerAudioComponent implements OnInit {
public counttrack: number;
public covers: string[];
public volume_value: number = 100;
public volume_displayMenu: boolean = false;
playStream: boolean;
isPlaying: boolean;
currentTime: any;
@ -286,14 +290,14 @@ export class ElementPlayerAudioComponent implements OnInit {
} else if (this.playMode === PlayMode.PLAY_ALL) {
this.onNext();
} else if (this.playMode === PlayMode.PLAY_ONE_LOOP) {
this.audioPlayer.currentTime = 0;
this.mediaPlayer.currentTime = 0;
this.onPlay();
} else {
if (this.localIdStreaming == this.localListStreaming.length-1) {
this.localIdStreaming = 0;
this.updateMediaStreamed();
if (this.localListStreaming.length == 1) {
this.audioPlayer.currentTime = 0;
this.mediaPlayer.currentTime = 0;
this.onPlay();
}
} else {
@ -338,37 +342,37 @@ export class ElementPlayerAudioComponent implements OnInit {
changeTimeupdate(currentTime: any) {
// console.log("time change ");
// console.log(" ==> " + this.audioPlayer.currentTime);
this.currentTime = this.audioPlayer.currentTime;
this.currentTime = this.mediaPlayer.currentTime;
this.currentTimeDisplay = this.convertIndisplayTime(this.currentTime);
// console.log(" ==> " + this.currentTimeDisplay);
}
changeDurationchange(duration: any) {
console.log('duration change ');
console.log(` ==> ${ this.audioPlayer.duration}`);
this.duration = this.audioPlayer.duration;
console.log(` ==> ${ this.mediaPlayer.duration}`);
this.duration = this.mediaPlayer.duration;
this.durationDisplay = this.convertIndisplayTime(this.duration);
}
onPlay() {
console.log('play');
if(this.audioPlayer === null ||
this.audioPlayer === undefined) {
console.log(`error element: ${ this.audioPlayer}`);
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.audioPlayer.play();
this.mediaPlayer.play();
}
onPause() {
console.log('pause');
if(this.audioPlayer === null ||
this.audioPlayer === undefined) {
console.log(`error element: ${ this.audioPlayer}`);
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.audioPlayer.pause();
this.mediaPlayer.pause();
}
onPauseToggle() {
@ -383,13 +387,13 @@ export class ElementPlayerAudioComponent implements OnInit {
onStop() {
console.log('stop');
if(this.audioPlayer === null ||
this.audioPlayer === undefined) {
console.log(`error element: ${ this.audioPlayer}`);
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.audioPlayer.pause();
this.audioPlayer.currentTime = 0;
this.mediaPlayer.pause();
this.mediaPlayer.currentTime = 0;
}
onBefore() {
@ -417,45 +421,82 @@ export class ElementPlayerAudioComponent implements OnInit {
seek(newValue:any) {
console.log(`seek ${ newValue.value}`);
if(this.audioPlayer === null ||
this.audioPlayer === undefined) {
console.log(`error element: ${ this.audioPlayer}`);
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.audioPlayer.currentTime = newValue.value;
this.mediaPlayer.currentTime = newValue.value;
}
onRewind() {
console.log('rewind');
if(this.audioPlayer === null ||
this.audioPlayer === undefined) {
console.log(`error element: ${ this.audioPlayer}`);
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.audioPlayer.currentTime = this.currentTime - 10;
this.mediaPlayer.currentTime = this.currentTime - 10;
}
onForward() {
console.log('forward');
if(this.audioPlayer === null ||
this.audioPlayer === undefined) {
console.log(`error element: ${ this.audioPlayer}`);
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.audioPlayer.currentTime = this.currentTime + 10;
this.mediaPlayer.currentTime = this.currentTime + 10;
}
onMore() {
console.log('more');
if(this.audioPlayer === null ||
this.audioPlayer === undefined) {
console.log(`error element: ${ this.audioPlayer}`);
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
}
onVolumeMenu() {
this.volume_displayMenu = !this.volume_displayMenu;
//this.startHideTimer();
}
onVolume(newValue:any) {
console.log(`onVolume ${ newValue.value}`);
//this.startHideTimer();
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.volume_value = newValue.value;
this.mediaPlayer.volume = this.volume_value / 100;
this.mediaPlayer.muted = false;
}
onVolumeMute() {
//this.startHideTimer();
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.mediaPlayer.muted = true;
}
onVolumeUnMute() {
//this.startHideTimer();
if(this.mediaPlayer === null ||
this.mediaPlayer === undefined) {
console.log(`error element: ${ this.mediaPlayer}`);
return;
}
this.mediaPlayer.muted = false;
}
}

View File

@ -105,7 +105,7 @@
</div>
</button>
</div>
<div class="fill-all" *ngIf="login !== null && displayUserMenu === true" (click)="onOutUserProperty()">
<div class="fill-all" *ngIf="login && displayUserMenu === true" (click)="onOutUserProperty()">
<!-- (click)="onOutUserProperty()" -->
<div class="sub-menu user-menu color-menu-background">
<button class="item" disabled="disabled">

View File

@ -52,7 +52,7 @@
<input type="text"
placeholder="Genre of the Media"
[value]="globalGender"
(input)="onGenre($event.target.value)"
(input)="onGender($event.target.value)"
/>
</td>
</tr>
@ -60,7 +60,7 @@
<td class="left-colomn"></td>
<td class="right-colomn">
<select [ngModel]="genreId"
(ngModelChange)="onChangeGenre($event)">
(ngModelChange)="onChangeGender($event)">
<option *ngFor="let element of listGender" [ngValue]="element.value">{{element.label}}</option>
</select>
</td>

View File

@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { GenderService, PlaylistService, ArtistService, TrackService, ArianeService, AlbumService } from 'app/service';
import { NodeData } from 'common/model';
import { UploadProgress } from 'common/popin/upload-progress/upload-progress';
import { PopInService } from 'common/service';
@ -142,8 +143,9 @@ export class UploadScene implements OnInit {
}).catch((response2) => {
console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
});
this.genderService.getData()
.then((response2) => {
this.genderService.getOrder()
.then((response2: NodeData[]) => {
//console.error(`Keep gender : ${ JSON.stringify(response2, null, 2)} ==> ${response2.length}`);
for(let iii = 0; iii < response2.length; iii++) {
self.listGender.push({ value: response2[iii].id, label: response2[iii].name });
}
@ -182,6 +184,67 @@ export class UploadScene implements OnInit {
}
}
onGender(value: any): void {
this.globalGender = value;
let self = this;
if(this.globalGender !== '') {
this.genderService.getLike(this.globalGender)
.then((response: any[]) => {
console.log(`find element: ${ response.length}`);
for(let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`);
}
if(response.length === 0) {
self.genderId = null;
} else if(response.length === 1) {
self.genderId = response[0].id;
}
}).catch((response) => {
console.log('CAN NOT find element: ');
self.genderId = null;
});
}
this.updateNeedSend();
}
onChangeGender(value: any): void {
this.globalGender = value;
if(!(value === undefined || value === null)) {
for(let iii = 0; iii < this.listGender.length; iii++) {
if(this.listGender[iii].value === value) {
this.globalGender = this.listGender[iii].label;
break;
}
}
}
this.updateNeedSend();
}
onArtist(value: any): void {
this.globalArtist = value;
let self = this;
if(this.globalArtist !== '') {
this.artistService.getLike(this.globalArtist)
.then((response: any[]) => {
console.log(`find element: ${ response.length}`);
for(let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`);
}
if(response.length === 0) {
self.artistId = null;
} else if(response.length === 1) {
self.artistId = response[0].id;
}
self.updateListOfTrackToCheck();
}).catch((response) => {
console.log('CAN NOT find element: ');
self.artistId = null;
});
}
this.updateNeedSend();
}
onChangeArtist(value: any): void {
this.artistId = value;
if(!(value === undefined || value === null)) {
@ -217,40 +280,12 @@ export class UploadScene implements OnInit {
this.updateNeedSend();
}
onGender(value: any): void {
this.globalGender = value;
this.updateNeedSend();
}
onEpisode(data: FileParsedElement, value: any): void {
data.trackId = value;
// console.log("change episode ID: " + value + " ==> " + this.parseEpisode.toString());
this.updateNeedSend();
}
onArtist(value: any): void {
this.globalArtist = value;
let self = this;
if(this.globalArtist !== '') {
this.artistService.getLike(this.globalArtist)
.then((response: any[]) => {
console.log(`find element: ${ response.length}`);
for(let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`);
}
if(response.length === 0) {
self.artistId = null;
} else if(response.length === 1) {
self.artistId = response[0].id;
}
self.updateListOfTrackToCheck();
}).catch((response) => {
console.log('CAN NOT find element: ');
self.artistId = null;
});
}
this.updateNeedSend();
}
clearData() {
@ -264,7 +299,7 @@ export class UploadScene implements OnInit {
this.genderId = null;
this.artistId = null;
this.saisonId = null;
this.listGender = [ { value: null, label: '---' } ];
//this.listGender = [ { value: null, label: '---' } ];
this.listArtist = [ { value: null, label: '---' } ];
this.listAlbum = [ { value: null, label: '---' } ];
}
@ -291,14 +326,14 @@ export class UploadScene implements OnInit {
album = splitElement2[0];
tmpName = tmpName.substring(album.length+1);
}
console.log("ploppppp " + tmpName);
//console.log("ploppppp " + tmpName);
const splitElement3 = tmpName.split('-');
if(splitElement3.length > 1) {
trackIdNumber = parseInt(splitElement3[0], 10);
tmpName = tmpName.substring(splitElement3[0].length+1);
}
console.log("KKKppppp " + tmpName);
console.log(" ===> " + splitElement3[0]);
//console.log("KKKppppp " + tmpName);
//console.log(" ===> " + splitElement3[0]);
title = tmpName;
if(isNaN(trackIdNumber)) {
@ -327,7 +362,7 @@ export class UploadScene implements OnInit {
return;
}
// we verify fith the first value to remove all unknown ...
// clean different univers:
// clean different gender:
/*for(let iii = 1; iii < this.parsedElement.length; iii++) {
console.log(`check gender [${ iii + 1 }/${ this.parsedElement.length }] '${ this.parsedElement[0].gender } !== ${ this.parsedElement[iii].gender }'`);
if(this.parsedElement[0].gender !== this.parsedElement[iii].gender) {
@ -366,25 +401,7 @@ export class UploadScene implements OnInit {
this.artistId = null;
this.saisonId = null;
let self = this;
if(this.globalArtist !== '') {
this.artistService.getLike(this.globalArtist)
.then((response: any[]) => {
console.log(`find element: ${ response.length}`);
for(let iii = 0; iii < response.length; iii++) {
console.log(` - ${ JSON.stringify(response[iii])}`);
}
if(response.length === 0) {
self.artistId = null;
} else if(response.length === 1) {
let serieElem = response[0];
self.artistId = serieElem.id;
self.updateType(serieElem.parentId);
}
self.updateListOfTrackToCheck();
}).catch((response) => {
console.log('CAN NOT find element: ');
});
}
this.onArtist(this.globalArtist);
}

View File

@ -1,6 +1,6 @@
import { NodeData } from "common/model";
import { isNodeData, NodeData } from "common/model";
import { HttpWrapperService, BddService } from "common/service";
import { DataInterface, isNullOrUndefined, TypeCheck } from "common/utils";
import { DataInterface, isArrayOf, isNullOrUndefined, TypeCheck } from "common/utils";
export class GenericInterfaceModelDB {
@ -28,6 +28,48 @@ export class GenericInterfaceModelDB {
});
});
}
getLike(nameArtist:string):any {
let self = this;
return new Promise((resolve, reject) => {
self.bdd.get(self.serviceName)
.then((response:DataInterface) => {
let data = response.getNameLike(nameArtist);
if(data === null || data === undefined || data.length === 0) {
reject('Data does not exist in the local BDD');
return;
}
resolve(data);
return;
}).catch((response) => {
reject(response);
});
});
}
getOrder(): Promise<NodeData[]> {
let self = this;
return new Promise((resolve, reject) => {
self.bdd.get(self.serviceName)
.then((response: DataInterface) => {
let data = response.getsWhere([
{
check: TypeCheck.NOT_EQUAL,
key: 'id',
value: [undefined, null],
},
],
[ 'name', 'id' ]);
//data = response.gets();
if (isArrayOf(data, isNodeData)) {
resolve(data);
}
reject("The model is wrong ...");
}).catch((response) => {
console.log(`[E] ${ self.constructor.name }: can not retrive BDD values`);
reject(response);
});
});
}
get(id:number): Promise<NodeData> {
let self = this;
return new Promise((resolve, reject) => {

View File

@ -21,30 +21,6 @@ export class ArtistService extends GenericInterfaceModelDB {
super('artist', http, bdd);
}
getOrder(): Promise<NodeData[]> {
let self = this;
return new Promise((resolve, reject) => {
self.bdd.get(self.serviceName)
.then((response: DataInterface) => {
let data = response.getsWhere([
{
check: TypeCheck.NOT_EQUAL,
key: 'id',
value: [undefined, null],
},
],
[ 'name', 'id' ]);
//data = response.gets();
if (isArrayOf(data, isNodeData)) {
resolve(data);
}
reject("The model is wrong ...");
}).catch((response) => {
console.log(`[E] ${ self.constructor.name }: can not retrive BDD values`);
reject(response);
});
});
}
/**
* Get all the track for a specific artist
@ -143,22 +119,5 @@ export class ArtistService extends GenericInterfaceModelDB {
});
}
getLike(nameArtist:string):any {
let self = this;
return new Promise((resolve, reject) => {
self.bdd.get('artist')
.then((response:DataInterface) => {
let data = response.getNameLike(nameArtist);
if(data === null || data === undefined || data.length === 0) {
reject('Data does not exist in the local BDD');
return;
}
resolve(data);
return;
}).catch((response) => {
reject(response);
});
});
}
}

View File

@ -7,8 +7,8 @@
import { Injectable } from '@angular/core';
import { HttpWrapperService, BddService } from 'common/service';
import { DataInterface, isNullOrUndefined, TypeCheck } from 'common/utils';
import { NodeData } from 'common/model';
import { DataInterface, isArrayOf, isNullOrUndefined, TypeCheck } from 'common/utils';
import { isNodeData, NodeData } from 'common/model';
import { GenericInterfaceModelDB } from './GenericInterfaceModelDB';
export interface MessageLogIn {
@ -26,40 +26,6 @@ export class GenderService extends GenericInterfaceModelDB {
}
get(id:number): Promise<NodeData> {
let self = this;
return new Promise((resolve, reject) => {
self.bdd.get(self.serviceName)
.then((response: DataInterface) => {
let data = response.get(id);
if(isNullOrUndefined(data)) {
reject('Data does not exist in the local BDD');
return;
}
resolve(data);
}).catch((response) => {
reject(response);
});
});
}
getData(): Promise<NodeData[]> {
let self = this;
return new Promise((resolve, reject) => {
self.bdd.get(self.serviceName)
.then((response: DataInterface) => {
let data = response.gets();
resolve(data);
}).catch((response) => {
console.log(`[E] ${ self.constructor.name }: can not retrive BDD values`);
reject(response);
});
});
}
countTrack(id:number): Promise<number> {

View File

@ -49,8 +49,9 @@ export class PopInComponent implements OnInit, OnDestroy {
}
// open popIn
open(): void {
//console.log(`open pop-in: ${this.id}`);
this.displayPopIn = true;
// this.element.show();
//this.element.show();
}
// close popin
close(): void {

View File

@ -86,6 +86,7 @@ export class PopInUploadProgress implements OnInit {
}
ngOnChanges(changes: SimpleChanges) {
//console.log(`Upload progress event : ${JSON.stringify(changes)}`);
this.progress = Math.trunc(this.mediaUploaded * 100 / this.mediaSize);
this.uploadDisplay = this.convertInHuman(this.mediaUploaded);
this.sizeDisplay = this.convertInHuman(this.mediaSize);

View File

@ -30,11 +30,11 @@ export class PopInService {
}
open(_id: string) {
// console.log("Try to open pop-in: '" + _id + "'");
//console.log("Try to open pop-in: '" + _id + "'");
// open popin specified by id
for(let iii = 0; iii < this.popins.length; iii++) {
if(this.popins[iii].id === _id) {
// console.log(" ==>find it ...");
//console.log(" ==>find it ...");
this.popins[iii].open();
return;
}

View File

@ -3,6 +3,22 @@
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment_back_prod = {
production: false,
// URL of development API
applName: "karusic",
defaultServer: "karusic",
server: {
karusic: 'http://192.168.1.156/karusic/api',
karauth: 'http://192.168.1.156/karauth/api',
},
ssoSignIn: 'http://192.168.1.156/karso/signin/karusic-dev/',
ssoSignUp: 'http://192.168.1.156/karso/signup/karusic-dev/',
ssoSignOut: 'http://192.168.1.156/karso/signout/karusic-dev/',
frontBaseUrl: '',
apiMode: 'REWRITE'
};
export const environment_local = {
production: false,
// URL of development API

View File

@ -20,27 +20,15 @@ cd ../front
docker-compose up -d
```
TODO list:
==========
build the local image:
- API to add cover (media && group)
- GUI to add cover (media && group)
- GUI to add a media
- GUI to check if media already uploaded
- GUI to play the next episode
- GUI to do back on the view
- GUI corect the reload webPage
- API for univers
- GUI to change the name of a media
- GUI to change the group of the media
- GUI to change the saison of the media
- GUI to change the episode number of the media
- GUI to change the univers of the media
- GUI to add new univers, group, saison
- Application mode of the GUI
- Correct the problem of production mode
- API add OAuth model
- API add user specific last view and position in videos and series
- ...
docker build -t gitea.atria-soft.org/kangaroo-and-rabbit/karusic:latest .
docker login gitea.atria-soft.org
docker push gitea.atria-soft.org/kangaroo-and-rabbit/karusic:latest
convert in an angular application:
https://betterprogramming.pub/how-to-convert-your-angular-application-to-a-native-mobile-app-android-and-ios-c212b38976df