diff --git a/src/_variables.scss b/src/_variables.scss new file mode 100644 index 0000000..f20db47 --- /dev/null +++ b/src/_variables.scss @@ -0,0 +1,16 @@ +// Create your Sass color vars (will be available in all the project) +$primary: #ffffff; +$accent: #d33131; +$reverse: #000000; +$green: #4caf50; +$yellow: #ffeb3b; +$warn: yellow; + +//media query +$breakpoint-tablet: 768px; +$breakpoint-phone: 500px; +$background-color: #1c1c1c; +// $slide-background: #f90; +$slide-background: #cc7722; + +$backgroundhover: #ff0038b5; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8529e40..2b39857 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,9 +6,10 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { SlideComponent } from './slide/slide.component'; +import { InitComponent } from './init/init.component'; import { ClientService } from './client.service'; -import { InitComponent } from './init/init.component'; +import { PlayerService } from './player.service'; @NgModule({ declarations: [ @@ -23,7 +24,8 @@ import { InitComponent } from './init/init.component'; HttpClientModule ], providers: [ - ClientService + ClientService, + PlayerService, ], bootstrap: [AppComponent] }) diff --git a/src/app/init/init.component.html b/src/app/init/init.component.html index b2a3fa1..a032da3 100644 --- a/src/app/init/init.component.html +++ b/src/app/init/init.component.html @@ -1,5 +1,14 @@
-
+

Beire

+

Un propuesta de Maite Redondo y Luca Rullo

+ +

Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre

+
diff --git a/src/app/init/init.component.scss b/src/app/init/init.component.scss index 8246d94..cf8942e 100644 --- a/src/app/init/init.component.scss +++ b/src/app/init/init.component.scss @@ -1,9 +1,16 @@ +@import "../../_variables.scss"; + +h1 { + margin-top:0; + margin-bottom:0; +} + div.slide { - color:#fff; + color:$primary; width:100vw; height:100vh; background-size:cover; - background-color:#f90; + background-color:$slide-background; background-blend-mode: luminosity; display:flex; justify-content: center; @@ -19,18 +26,40 @@ div.element { text-align:center; } +div.logo img { + padding:10px; + max-height:40px; + max-width:100px; +} + div.round-button { + opacity:0.6; cursor:pointer; margin:auto; font-size:2em; - border:5px solid #fff; + /*border:5px solid #fff;*/ color:#fff; border-radius:100%; - width:10vw; - height:10vw; + width:5vw; + height:5vw; + background:$primary; transition:1s; + display:flex; + align-items:center; + text-align: center; + + animation-name: heartBeat; + -webkit-animation-name: heartBeat; + animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + animation-delay: 3; + -webkit-animation-delay: 3; } div.round-button:hover { - background:#fff; + background-color:$backgroundhover; + opacity:0.3; + //transform:rotate(-90deg); } diff --git a/src/app/init/init.component.ts b/src/app/init/init.component.ts index 0256e38..8ad2cb7 100644 --- a/src/app/init/init.component.ts +++ b/src/app/init/init.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { PlayerService } from '../player.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-init', @@ -7,9 +9,15 @@ import { Component, OnInit } from '@angular/core'; }) export class InitComponent implements OnInit { - constructor() { } + constructor( + private playerService:PlayerService + ) { } ngOnInit(): void { } + play() { + this.playerService.playUrl("https://www.soinumapa.net/wp-content/uploads/2015/11/oibar_merkatua.mp3") + } + } diff --git a/src/app/player.service.spec.ts b/src/app/player.service.spec.ts new file mode 100644 index 0000000..5355445 --- /dev/null +++ b/src/app/player.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { PlayerService } from './player.service'; + +describe('PlayerService', () => { + let service: PlayerService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(PlayerService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/player.service.ts b/src/app/player.service.ts new file mode 100644 index 0000000..6782329 --- /dev/null +++ b/src/app/player.service.ts @@ -0,0 +1,174 @@ +import { Injectable,OnInit } from '@angular/core'; +import { Subject,Observable } from 'rxjs'; +import { ClientService } from './client.service'; + +@Injectable({ + providedIn: 'root' +}) +export class PlayerService { + + audio:any; + audio_paused:boolean = true; + audio_stopped = true; + audio_status = "init"; + + /* Playing */ + private _audio_is_playing = new Subject(); + public audio_is_playing$ = this._audio_is_playing.asObservable(); + audio_buffered; + + /* Time */ + private _audio_current_time = new Subject(); + public audio_current_time$ = this._audio_current_time.asObservable(); + audio_duration; + audio_elapsed; + audio_position; + + /* Player App */ + private _init_app = new Subject(); + init_app$ = this._init_app.asObservable(); + audio_title; + audio_id; + audio_url; + + constructor( + private clientService:ClientService + ) { + this.audio = new Audio(); + this.audio_paused = true; //audio not playing + this._audio_is_playing.next(this.audio_paused); + this.audio_stopped = true; + } + + ngOnInit() { + // https://developers.google.com/web/updates/2017/09/autoplay-policy-changes + //end audio play + this.audio_status = "init" + this.audio.onended = this.handleEnded.bind(this); + this.audio.oncanplay= this.handledCanPlay.bind(this); + + //play updates + this.audio.ontimeupdate = this.handleTimeUpdate.bind(this); + this.audio.onwaiting = this.handleWaiting.bind(this); + this.audio.onloadedmetadata = this.handleLoadMetadata.bind(this); + } + + playUrl(url) { + this.audio.src = url; + this.audio.load(); + this.audio.ontimeupdate = this.handleTimeUpdate.bind(this); + this.audio.onloadstart = () => {this.audio_buffered = 0;} + this.audio.onended = (url) => { this.audio.playUrl(url); /* loop player */ }; + this.audio.onprogress = this.onProgress() + + this.audio.oncanplay = () => { + this._init_app.next(true); + + this.audio_paused=false; + this._audio_is_playing.next(this.audio_paused); + + this.canPlay(); + }; + } + + canPlay() { + this.audio_status = "canplay"; + var a = this.audio.play(); + try { + if (a!==undefined) { + a.then(_ => { + this.initPlayer(this.audio_title,this.audio_id); + }).catch(error=>{ + console.log(error) + console.log("not possible to play") + // show play button!!! + }); + } + } catch (e) { + /* firefox & old browsers not use Observale*/ + this.initPlayer(this.audio_title,this.audio_id); + } + } + + initPlayer(title,id) { + this.audio_title=title; + this.audio_stopped = false; + this.audio_paused = false; + this.audio_id = id; + } + + stop() { + this.audio.onloadstart = null; + this.audio.oncanplay = null + this.audio.onprogress = null; + this.audio.pause(); + this.audio_buffered=-1 + this.audio.currentTime = 0; + this.audio.removeAttribute('src'); + this.audio.load(); + this.audio_paused = true; + this.audio_stopped = true; + this.audio_id = 0; + this.audio_url=""; + } + + onProgress() { + var duration = this.audio.duration; + if (duration > 0) { + for (var i=0; i= 10) ? minutes : "0" + minutes; + seconds = Math.floor(seconds % 60); + seconds = (seconds >= 10) ? seconds : "0" + seconds; + return minutes + ":" + seconds; + } +} diff --git a/src/app/slide/slide.component.html b/src/app/slide/slide.component.html index 20ce459..ef34a37 100644 --- a/src/app/slide/slide.component.html +++ b/src/app/slide/slide.component.html @@ -2,7 +2,6 @@
-
diff --git a/src/app/slide/slide.component.scss b/src/app/slide/slide.component.scss index 80f7bec..1639369 100644 --- a/src/app/slide/slide.component.scss +++ b/src/app/slide/slide.component.scss @@ -1,15 +1,18 @@ +@import "../../_variables.scss"; + div.slide { - color:#fff; + color:$primary; width:100vw; height:100vh; background-size:cover; - background-color:#f90; + background-color:$slide-background; background-blend-mode: luminosity; + background-position: center center; display:flex; justify-content: center; align-items: center; text-align: center; - overflow:crosshair; + overflow:hidden; } div.element { @@ -19,14 +22,16 @@ div.element { } div.big-title { - font-family:"Staatliches",sans-serif; - font-size:10rem; + text-transform:uppercase; + font-weight: bold; + font-family:"Swiss Bold",sans-serif; + font-size:10vw; opacity:0.6; } div.second-title { - font-size:3rem; - font-family:"Reenie Beanie",serif; + font-size:3vw; + font-family:"Swiss Light",serif; } /* controls */ diff --git a/src/app/slide/slide.component.ts b/src/app/slide/slide.component.ts index 90183c3..0f6b6a4 100644 --- a/src/app/slide/slide.component.ts +++ b/src/app/slide/slide.component.ts @@ -3,9 +3,7 @@ import { ClientService } from '../client.service'; import { Observable } from 'rxjs'; import {environment} from '../../environments/environment'; import { ActivatedRoute, Router } from '@angular/router'; - - - +import { PlayerService } from '../player.service'; @Component({ selector: 'app-slide', @@ -20,6 +18,7 @@ export class SlideComponent implements OnInit { private clientService:ClientService, private route: ActivatedRoute, private router: Router, + private playerService:PlayerService, ) {} ngOnInit(): void { @@ -48,7 +47,7 @@ export class SlideComponent implements OnInit { //ArrowRight //ArrowUp //ArrowDown - console.log(e) + //console.log(e) switch (e.code) { case "ArrowLeft" : this.left(e); diff --git a/src/assets/font/swissboldcondensed.woff2 b/src/assets/font/swissboldcondensed.woff2 new file mode 100644 index 0000000..ce36a46 Binary files /dev/null and b/src/assets/font/swissboldcondensed.woff2 differ diff --git a/src/assets/font/swisslight.woff2 b/src/assets/font/swisslight.woff2 new file mode 100644 index 0000000..59219e4 Binary files /dev/null and b/src/assets/font/swisslight.woff2 differ diff --git a/src/assets/img/logoBeire.png b/src/assets/img/logoBeire.png new file mode 100644 index 0000000..82da841 Binary files /dev/null and b/src/assets/img/logoBeire.png differ diff --git a/src/assets/img/logoEscuelaMusicaOlite.jpg b/src/assets/img/logoEscuelaMusicaOlite.jpg new file mode 100644 index 0000000..9d06ab7 Binary files /dev/null and b/src/assets/img/logoEscuelaMusicaOlite.jpg differ diff --git a/src/assets/img/logoSoinumapa.png b/src/assets/img/logoSoinumapa.png new file mode 100644 index 0000000..c091e5e Binary files /dev/null and b/src/assets/img/logoSoinumapa.png differ diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..8cd1753 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,4 @@ export const environment = { - production: true + production: true, + uriAPI: "https://public.audio-lab.org/beireapi/" }; diff --git a/src/styles.scss b/src/styles.scss index f66c907..82100df 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,10 +1,101 @@ /* You can add global styles to this file, and also import other style files */ -@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap'); +//@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap'); +@import './_variables.scss'; + +@font-face{ + font-family:"Swiss Bold"; + src:url('assets/font/swissboldcondensed.woff2'); +} + +@font-face{ + font-family:"Swiss Light"; + src:url('assets/font/swisslight.woff2'); +} body { margin:0; padding:0; - background-color:#1c1c1c; - cursor:none; + background-color:$background-color; + cursor:crosshair; + font-family:"Swiss Light"; +} + +h1 { + // font-family:"Staatliches",sans-serif; + text-transform:uppercase; + font-family:"Swiss Bold"; + font-size:10vw; + opacity:0.6; +} + +h2 { + font-size:3vw; + font-family:"Swiss Light",serif; +} + +/* animations css */ + +@keyframes heartBeat { + 0% { + transform: scale(none); + -webkit-transform: scale(none); + } + + 20% { + transform: scale(1.2); + -webkit-transform: scale(1.2); + } + + 30% { + transform: scale(1.05); + -webkit-transform: scale(1.05); + } + + 45% { + transform: scale(1.25); + -webkit-transform: scale(1.25); + } + + 50% { + transform: scale(none); + -webkit-transform: scale(none); + } + + 100% { + transform: scale(none); + -webkit-transform: scale(none); + } +} + +@-webkit-keyframes heartBeat { + 0% { + transform: scale(none); + -webkit-transform: scale(none); + } + + 20% { + transform: scale(1.2); + -webkit-transform: scale(1.2); + } + + 30% { + transform: scale(1.05); + -webkit-transform: scale(1.05); + } + + 45% { + transform: scale(1.25); + -webkit-transform: scale(1.25); + } + + 50% { + transform: scale(none); + -webkit-transform: scale(none); + } + + 100% { + transform: scale(none); + -webkit-transform: scale(none); + } }