commit 023f2633619467aad6d5c3362754b858a0d8721a Author: Joris Bertomeu Date: Thu Sep 26 11:34:18 2024 +0200 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3f48e08 --- /dev/null +++ b/.gitignore @@ -0,0 +1,50 @@ +# Use yarn.lock instead +package-lock.json + +# Environment variables +#.env + +# Logs +logs +*.log +npm-debug.log* + +# Documentation +docs + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules +jspm_packages + +# Optional npm cache directory +.npm + +# Optional REPL history +.node_repl_history + +[Uu]ploads/ +dist/ +.angular diff --git a/README.md b/README.md new file mode 100644 index 0000000..2d9cf47 --- /dev/null +++ b/README.md @@ -0,0 +1,27 @@ +# Crawlflix + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.5. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. diff --git a/angular.json b/angular.json new file mode 100644 index 0000000..355d08e --- /dev/null +++ b/angular.json @@ -0,0 +1,96 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "crawlflix": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:application", + "options": { + "outputPath": "dist/crawlflix", + "index": "src/index.html", + "browser": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kB", + "maximumError": "1MB" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kB", + "maximumError": "4kB" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "crawlflix:build:production" + }, + "development": { + "buildTarget": "crawlflix:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n" + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + { + "glob": "**/*", + "input": "public" + } + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..dce16b4 --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "crawlflix", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "^18.2.0", + "@angular/common": "^18.2.0", + "@angular/compiler": "^18.2.0", + "@angular/core": "^18.2.0", + "@angular/forms": "^18.2.0", + "@angular/platform-browser": "^18.2.0", + "@angular/platform-browser-dynamic": "^18.2.0", + "@angular/router": "^18.2.0", + "moment": "^2.30.1", + "ngx-moment": "^6.0.2", + "ngx-order-pipe": "^3.0.0", + "rxjs": "~7.8.0", + "tslib": "^2.3.0", + "zone.js": "~0.14.10" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^18.2.5", + "@angular/cli": "^18.2.5", + "@angular/compiler-cli": "^18.2.0", + "@types/jasmine": "~5.1.0", + "jasmine-core": "~5.2.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.5.2" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..57614f9 Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/app/app.component.css b/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 0000000..4a51a56 --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,100 @@ +
+
+
+
+

CrawlFlix

+ Paramount+ / Max HBO / Netflix / Disney+ / Amazon Prime / Canal+ +
+
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+ +
+ + +
+
+
+
+
+
+ Jobs Queue ({{jobs.length}}) +
+
+
+
+ +
+
+
+
+
+ {{job.data.mp4Filename}}
+
+
+ {{job.data.wantedResolution || '1080p'}} +
+
+

Job ID: {{ job.id }}

+
+
+

Status: {{ job.state }}

+
+
+

Added {{ job.addedOn | amTimeAgo }}

+
+
+

Finished {{ job.finishedOn | amTimeAgo }}

+
+
+

Duration: {{ ((job.finishedOn - job.processedOn)/1000) | amDuration:'seconds' }}

+
+
+
+ {{job.failedReason}} +
+
+ {{job.returnValue?.message}}
+ +
+
+
{{job.progress}}%
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts new file mode 100644 index 0000000..da988d4 --- /dev/null +++ b/src/app/app.component.spec.ts @@ -0,0 +1,29 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AppComponent], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have the 'crawlflix' title`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('crawlflix'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('h1')?.textContent).toContain('Hello, crawlflix'); + }); +}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 0000000..a2ba128 --- /dev/null +++ b/src/app/app.component.ts @@ -0,0 +1,127 @@ +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { VideoProcessingService } from './video-processing.service'; +import { MomentModule } from 'ngx-moment'; +import { OrderModule } from 'ngx-order-pipe'; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [CommonModule, ReactiveFormsModule, MomentModule, OrderModule], + templateUrl: './app.component.html', + styles: [] +}) +export class AppComponent implements OnInit { + processingForm: FormGroup; + jobId: string | null = null; + jobStatus: string | null = null; + jobProgress: number = 0; + jobs: Array = []; + + initForm() { + this.processingForm = this.fb.group({ + mp4Filename: ['', Validators.required], + mpdUrl: ['', Validators.required], + keys: ['', Validators.required], + wantedResolution: ['1080p', Validators.required] + }); + } + + constructor(private fb: FormBuilder, + private videoProcessingService: VideoProcessingService) { + this.processingForm = this.fb.group({ + mp4Filename: ['', Validators.required], + mpdUrl: ['', Validators.required], + keys: ['', Validators.required], + wantedResolution: ['1080p', Validators.required] + }); + } + + ngOnInit(): void { + this.startPollingJobsStatus(); + } + + downloadFileFromAPI(filePath: string, filename: string, job: any) { + job.isDownloading = true; + this.videoProcessingService.downloadFile(filePath).subscribe({ + next: (response) => { + const blob = new Blob([response], { type: 'video/mp4' }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + a.click(); + window.URL.revokeObjectURL(url); + job.isDownloading = false; + }, + error: (error) => { + console.error('Error downloading file:', error); + job.isDownloading = false; + } + }); + } + + onSubmit() { + if (this.processingForm.valid) { + const formData = this.processingForm.value; + + this.videoProcessingService.startProcess(Object.assign(formData, { + keys: this.parseKeys(formData.keys) + })).subscribe({ + next: (response) => { + //this.jobId = response.jobId; + }, + error: (error) => { + console.error('Error starting process:', error); + } + }); + this.initForm(); + } + } + + parseKeys(keysString: string): { key: string, value: string }[] { + console.log('KS =', keysString); + return keysString.split('\n').map(line => line.trim()) + .filter(line => line.includes(':')) + .map(line => { + const [key, value] = line.split(':').map(part => part.trim()); + return { key, value }; + }); + } + + // startPollingJobsStatus() { + // const interval = setInterval(() => { + // this.videoProcessingService.getJobsStatus(this.jobId!).subscribe({ + // next: (response) => { + // this.jobStatus = response.state; + // this.jobProgress = response.progress; + // if (['completed', 'failed'].includes(response.state)) { + // clearInterval(interval); + // } + // }, + // error: (error) => { + // console.error('Error fetching job status:', error); + // clearInterval(interval); + // } + // }); + // }, 1000); + // } + + startPollingJobsStatus() { + const interval = setInterval(() => { + this.videoProcessingService.getJobsStatus().subscribe({ + next: (response) => { + this.jobs = response; + // if (['completed', 'failed'].includes(response.state)) { + // clearInterval(interval); + // } + }, + error: (error) => { + console.error('Error fetching job status:', error); + //clearInterval(interval); + } + }); + }, 1000); + } +} \ No newline at end of file diff --git a/src/app/app.config.ts b/src/app/app.config.ts new file mode 100644 index 0000000..bc81ee5 --- /dev/null +++ b/src/app/app.config.ts @@ -0,0 +1,16 @@ +import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; +import { provideRouter } from '@angular/router'; +import { provideHttpClient } from '@angular/common/http'; +import { importProvidersFrom } from '@angular/core'; // Importe cette fonction +import { MomentModule } from 'ngx-moment'; + +import { routes } from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + provideHttpClient(), + importProvidersFrom(MomentModule) // Utilise importProvidersFrom pour intégrer le module + ] +}; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts new file mode 100644 index 0000000..dc39edb --- /dev/null +++ b/src/app/app.routes.ts @@ -0,0 +1,3 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = []; diff --git a/src/app/video-processing.service.ts b/src/app/video-processing.service.ts new file mode 100644 index 0000000..e6333aa --- /dev/null +++ b/src/app/video-processing.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class VideoProcessingService { + private apiUrl = 'http://localhost:3000'; + + constructor(private http: HttpClient) { } + + startProcess(data: any): Observable<{ jobId: string }> { + return this.http.post<{ jobId: string }>(`${this.apiUrl}/start-process`, data); + } + + getJobsStatus(): Observable> { + return this.http.get>(`${this.apiUrl}/jobs-status`); + } + + downloadFile(filePath: string): Observable { + return this.http.get(`${this.apiUrl}/download/${filePath}`, { responseType: 'blob' }); + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..afc04f9 --- /dev/null +++ b/src/index.html @@ -0,0 +1,15 @@ + + + + + Crawlflix + + + + + + + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..35b00f3 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,6 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { appConfig } from './app/app.config'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, appConfig) + .catch((err) => console.error(err)); diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/src/styles.css @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..3775b37 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a8bb65b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,33 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "isolatedModules": true, + "esModuleInterop": true, + "sourceMap": true, + "declaration": false, + "experimentalDecorators": true, + "moduleResolution": "bundler", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 0000000..5fb748d --- /dev/null +++ b/tsconfig.spec.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +}