From 0f7068f175110c96cd8e9334e59090ab8242d572 Mon Sep 17 00:00:00 2001 From: Luca Rullo Date: Tue, 31 Oct 2023 19:41:11 +0100 Subject: [PATCH] Test: Audio Player using Element audio HTML --- Dockerfile | 19 +++++-------------- Dockerfile.nginx | 24 ++++++++++++++++++++++++ inc/src/app/app.component.html | 5 ++--- inc/src/app/app.component.ts | 9 +++++---- inc/src/app/player.service.ts | 31 ++++++++++++++++++++++++++----- 5 files changed, 62 insertions(+), 26 deletions(-) create mode 100644 Dockerfile.nginx diff --git a/Dockerfile b/Dockerfile index 1a027f6..08d7944 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,6 +1,8 @@ +## ANGULAR THEME BUILD + FROM node:16-alpine as angular -WORKDIR app +WORKDIR angular COPY inc ./ @@ -8,17 +10,6 @@ RUN npm install -g @angular/cli RUN ng config -g cli.warnings.versionMismatch false RUN npm install -RUN ng build +RUN npm run build:ssr --prod --proxy-config -# nginx base image -FROM nginx:1.16.0-alpine - -RUN chmod 777 /var/cache/nginx /var/run - -# copy static contents of project to nginx html -RUN rm -rf /usr/share/nginx/html/* -COPY --from=angular /app/dist/cear-rio/browser /usr/share/nginx/html - -EXPOSE 8080 - -CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file +CMD npm run serve:ssr -c production --proxy-config \ No newline at end of file diff --git a/Dockerfile.nginx b/Dockerfile.nginx new file mode 100644 index 0000000..1a027f6 --- /dev/null +++ b/Dockerfile.nginx @@ -0,0 +1,24 @@ +FROM node:16-alpine as angular + +WORKDIR app + +COPY inc ./ + +RUN npm install -g @angular/cli +RUN ng config -g cli.warnings.versionMismatch false +RUN npm install + +RUN ng build + +# nginx base image +FROM nginx:1.16.0-alpine + +RUN chmod 777 /var/cache/nginx /var/run + +# copy static contents of project to nginx html +RUN rm -rf /usr/share/nginx/html/* +COPY --from=angular /app/dist/cear-rio/browser /usr/share/nginx/html + +EXPOSE 8080 + +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/inc/src/app/app.component.html b/inc/src/app/app.component.html index 6ff32d1..8af3350 100644 --- a/inc/src/app/app.component.html +++ b/inc/src/app/app.component.html @@ -24,13 +24,13 @@ -
+
@@ -56,7 +56,6 @@
-

Gracias a las personas que han hecho posible la elaboración de este podcast desde la delegación de CEAR Navarra.

Este programa contó con la colaboración de Audio Laborategia elkartea para la realización de la pieza sonora a través de talleres de escucha y de creación colectiva.

En la realización sonora: Xabier Erkizia, Luca Rullo, Iñigo Telletxea y Juan Arnal.

El guion ha sido escrito colaborativamente junto a las mismas personas que han puesto su voz en la narración.

diff --git a/inc/src/app/app.component.ts b/inc/src/app/app.component.ts index 608376c..5c0dc45 100644 --- a/inc/src/app/app.component.ts +++ b/inc/src/app/app.component.ts @@ -6,7 +6,9 @@ import { PlayerService } from './player.service'; templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent implements OnInit{ + +export class AppComponent implements OnInit { + title = 'cear-rio'; start:boolean = false; randomPos:number = 0; @@ -34,9 +36,8 @@ export class AppComponent implements OnInit{ randomPosition():number { let seed = Math.random(); - let max=100 - let min=-100 - // return (Math.floor(seed * 100)*(-1*Math.floor(seed*2))); + let max=200 + let min=-200 return Math.floor(Math.random() * (max - min + 1) + min) } } diff --git a/inc/src/app/player.service.ts b/inc/src/app/player.service.ts index 53bf3de..b4c7b79 100644 --- a/inc/src/app/player.service.ts +++ b/inc/src/app/player.service.ts @@ -1,4 +1,5 @@ -import { Injectable, OnInit } from '@angular/core'; +import { ElementRef, Injectable, OnInit, Inject } from '@angular/core'; +import { DOCUMENT, Location } from '@angular/common'; import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse} from '@angular/common/http'; import { Subject,Observable } from 'rxjs'; import {environment} from '../environments/environment'; @@ -21,6 +22,8 @@ export class PlayerService implements OnInit { audio_buffered:number=-1; public audio_icy="loading data..." + audio_player:HTMLAudioElement = this.document.createElement('audio'); + metadataTimeout?:any; public player_minimized:boolean = false; @@ -29,6 +32,11 @@ export class PlayerService implements OnInit { private _init_app = new Subject(); init_app$ = this._init_app.asObservable(); + /* Player Created */ + private _player_element = new Subject(); + player_element$ = this._player_element.asObservable(); + + /* Metadata */ private _icy_metadata = new Subject(); icy_metadata$ = this._icy_metadata.asObservable(); @@ -48,11 +56,15 @@ export class PlayerService implements OnInit { constructor( public http:HttpClient, + @Inject(DOCUMENT) private document: Document ) { - this.audio = new Audio(); + // this.audio = new Audio(); // not working on SSR + this.audio = this.audio_player; + this.audio_paused = true; //audio not playing this._audio_is_playing.next(this.audio_paused); this.audio_stopped = true; + } ngOnInit() { @@ -67,17 +79,26 @@ export class PlayerService implements OnInit { this.audio.onloadedmetadata = this.handleLoadMetadata.bind(this); } + setPlayerElement(player:ElementRef) { + // this.audio_player = player.nativeElement; + // console.log(this.audio_player) + // let a = document.createElement('audio'); + // console.log(a) + } + load(url:string) { this.audio.src = url; + this.audio_player.src = url; + this.audio.load(); + this.audio_player.load(); + this.audio.ontimeupdate = this.handleTimeUpdate.bind(this); this.audio.onloadstart = () => {this.audio_buffered = 0;}; this.audio.onended = () => { this.play(environment.urlStream) }; this.audio.onprogress = () => { this.onProgress() }; - - console.log(environment.urlStream) - + this.audio.oncanplay = () => { // init player this._init_app.next(true);