Compare commits
No commits in common. "0bcd5861ec688af584e65300d2b628fac63aed7b" and "695751627a51efebe6f738d0789c8e9974f41022" have entirely different histories.
0bcd5861ec
...
695751627a
@ -25,8 +25,7 @@
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets",
|
||||
"src/manifest.json"
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
|
783
package-lock.json
generated
23
package.json
@ -11,23 +11,22 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~10.2.1",
|
||||
"@angular/common": "~10.2.1",
|
||||
"@angular/compiler": "~10.2.1",
|
||||
"@angular/core": "~10.2.1",
|
||||
"@angular/forms": "~10.2.1",
|
||||
"@angular/platform-browser": "~10.2.1",
|
||||
"@angular/platform-browser-dynamic": "~10.2.1",
|
||||
"@angular/router": "~10.2.1",
|
||||
"@vimeo/player": "^2.14.1",
|
||||
"@angular/animations": "~10.2.0",
|
||||
"@angular/common": "~10.2.0",
|
||||
"@angular/compiler": "~10.2.0",
|
||||
"@angular/core": "~10.2.0",
|
||||
"@angular/forms": "~10.2.0",
|
||||
"@angular/platform-browser": "~10.2.0",
|
||||
"@angular/platform-browser-dynamic": "~10.2.0",
|
||||
"@angular/router": "~10.2.0",
|
||||
"rxjs": "~6.6.3",
|
||||
"tslib": "^2.0.0",
|
||||
"zone.js": "~0.10.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1002.0",
|
||||
"@angular/cli": "~10.2.0",
|
||||
"@angular/compiler-cli": "~10.2.1",
|
||||
"@angular-devkit/build-angular": "~0.1001.7",
|
||||
"@angular/cli": "~10.1.7",
|
||||
"@angular/compiler-cli": "~10.2.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"@types/jasmine": "~3.5.0",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
|
@ -1,16 +0,0 @@
|
||||
// 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: #090501;
|
||||
|
||||
$backgroundhover: #ff0038b5;
|
@ -6,8 +6,7 @@ import { InitComponent} from './init/init.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: ':name', component: SlideComponent },
|
||||
{ path: '', redirectTo: '/home', pathMatch: 'full'}
|
||||
// { path: '', component: InitComponent }
|
||||
{ path: '', component: InitComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div class="router" [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
|
||||
<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
|
||||
<router-outlet #o="outlet"></router-outlet>
|
||||
</div>
|
||||
|
||||
|
@ -1 +0,0 @@
|
||||
div.router { overflow:hidden;}
|
@ -1,4 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
import {
|
||||
transition,
|
||||
@ -27,21 +27,4 @@ import {
|
||||
|
||||
export class AppComponent {
|
||||
title = 'beire-frontend';
|
||||
|
||||
ngOnInit() {
|
||||
// var $ = document.getElementById.bind(document);
|
||||
//
|
||||
// var orientKey = 'orientation';
|
||||
// if ('mozOrientation' in screen) {
|
||||
// orientKey = 'mozOrientation';
|
||||
// } else if ('msOrientation' in screen) {
|
||||
// orientKey = 'msOrientation';
|
||||
// }
|
||||
//
|
||||
// var promise = null;
|
||||
// if (screen[orientKey].lock) { promise = screen[orientKey].lock('landscape-primary'); }
|
||||
// lockedAllowed = window.screen.lockOrientation(orientation);
|
||||
|
||||
// document.documentElement.requestFullscreen();
|
||||
}
|
||||
}
|
||||
|
@ -6,10 +6,9 @@ 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 { PlayerService } from './player.service';
|
||||
import { InitComponent } from './init/init.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -24,8 +23,7 @@ import { PlayerService } from './player.service';
|
||||
HttpClientModule
|
||||
],
|
||||
providers: [
|
||||
ClientService,
|
||||
PlayerService,
|
||||
ClientService
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
@ -1,14 +1,5 @@
|
||||
<div class="slide" routerLink="home" style="background-image:url('/assets/img/trailer.gif');">
|
||||
<div class="slide">
|
||||
<div class="element">
|
||||
<!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
|
||||
<!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
|
||||
<!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
|
||||
<!-- <h3>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 </h3> -->
|
||||
<div class="element logo">
|
||||
<img src="assets/img/landarte_logo.png"/>
|
||||
<img src="assets/img/logoCK.png"/>
|
||||
<img src="assets/img/logoBeire.png"/>
|
||||
<img src="assets/img/logoSoinumapa.png"/>
|
||||
</div>
|
||||
<div class="round-button" title="Pulsa para iniciar" routerLink="home"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,16 +1,9 @@
|
||||
@import "../../_variables.scss";
|
||||
|
||||
h1 {
|
||||
margin-top:0;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
div.slide {
|
||||
color:$primary;
|
||||
color:#fff;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
background-size:cover;
|
||||
background-color:#ccc;
|
||||
background-color:#f90;
|
||||
background-blend-mode: luminosity;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
@ -26,40 +19,18 @@ 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:5vw;
|
||||
height:5vw;
|
||||
background:$primary;
|
||||
width:10vw;
|
||||
height:10vw;
|
||||
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-color:$backgroundhover;
|
||||
opacity:0.3;
|
||||
//transform:rotate(-90deg);
|
||||
background:#fff;
|
||||
}
|
||||
|
@ -1,6 +1,4 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { PlayerService } from '../player.service';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-init',
|
||||
@ -9,15 +7,9 @@ import { Observable } from 'rxjs';
|
||||
})
|
||||
export class InitComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private playerService:PlayerService
|
||||
) { }
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
// //document.documentElement.requestFullscreen();
|
||||
// screen.orientation.lock('landscape').then(null, function(error) {
|
||||
// console.error('orientation')
|
||||
// });
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,16 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
@ -1,219 +0,0 @@
|
||||
import { Injectable,OnInit } from '@angular/core';
|
||||
import { Subject,Observable } from 'rxjs';
|
||||
import { ClientService } from './client.service';
|
||||
import { HttpClient,HttpResponse } from '@angular/common/http';
|
||||
import {environment} from '../environments/environment';
|
||||
|
||||
|
||||
|
||||
@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;
|
||||
|
||||
/* Playlist */
|
||||
ListURL = environment.ListURL;
|
||||
ListIndex = 0;
|
||||
|
||||
/* 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();
|
||||
|
||||
/* Title */
|
||||
private _audio_title = new Subject();
|
||||
public audio_title$ = this._audio_title.asObservable();
|
||||
|
||||
audio_title;
|
||||
audio_id;
|
||||
audio_url;
|
||||
|
||||
constructor(
|
||||
private clientService:ClientService,
|
||||
private http:HttpClient
|
||||
) {
|
||||
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);
|
||||
}
|
||||
|
||||
// JSON playlist environment config
|
||||
playList() {
|
||||
this.http.get<any>(this.ListURL).
|
||||
subscribe(
|
||||
(r) => {
|
||||
let data = r.data;
|
||||
if (data.length <= 0) { return }
|
||||
this.ListIndex = this.getRandomInt(data.length);
|
||||
if (this.ListIndex >= data.length) { this.ListIndex = 0 }
|
||||
if (!data[this.ListIndex]["title"]) {this.audio_title = "desde Beire"}
|
||||
else {this.audio_title = data[this.ListIndex]["title"]}
|
||||
this.playUrl(data[this.ListIndex]["url"],this.audio_title)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
playUrl(url,title) {
|
||||
|
||||
//if (title==this.audio_title) this.playList();
|
||||
|
||||
this.audio.src = url;
|
||||
this.audio_title = title;
|
||||
this.audio.load();
|
||||
this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
|
||||
this.audio.onloadstart = () => {this.audio_buffered = 0;}
|
||||
this.audio.onended = (url) => { this.ListIndex++; this.playList(); /* 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._audio_title.next(this.audio_title);
|
||||
|
||||
|
||||
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="";
|
||||
}
|
||||
|
||||
mute() {
|
||||
if (this.audio.muted) { this.audio.muted=false } else { this.audio.muted=true}
|
||||
}
|
||||
|
||||
onProgress() {
|
||||
var duration = this.audio.duration;
|
||||
if (duration > 0) {
|
||||
for (var i=0; i<this.audio.buffered.length; i++) {
|
||||
if (this.audio.buffered.start(this.audio.buffered.length - 1 - i) < this.audio.currentTime) {
|
||||
this.audio_buffered = this.audio.buffered.end(this.audio.buffered.length-1);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//handleEvents
|
||||
handleStop() {
|
||||
this.stop();
|
||||
}
|
||||
|
||||
handleEnded(e) {
|
||||
this.stop();
|
||||
this.audio_status = "finish";
|
||||
}
|
||||
|
||||
handleTimeUpdate(e) {
|
||||
this.audio_status = "playing";
|
||||
let elapsed = this.audio.currentTime;
|
||||
let duration = this.audio.duration;
|
||||
|
||||
/* para pinchar un streaming */
|
||||
//if (duration == NaN || duration == Infinity || this.audio.src === environment.urlStream) duration=0;
|
||||
|
||||
if (elapsed) {
|
||||
this.audio_position = elapsed / duration;
|
||||
this.audio_elapsed = this.formatTime(elapsed);
|
||||
this.audio_duration = this.formatTime(duration);
|
||||
this._audio_current_time.next({currentTime: this.formatTime(elapsed), duration: this.formatTime(duration)});
|
||||
}
|
||||
}
|
||||
|
||||
handledCanPlay(e) {
|
||||
console.log(e)
|
||||
//play
|
||||
}
|
||||
|
||||
handleWaiting() {
|
||||
this.audio_status = "waiting";
|
||||
}
|
||||
|
||||
handleLoadMetadata(e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
/* utils */
|
||||
private formatTime(seconds) {
|
||||
let minutes:any = Math.floor(seconds / 60);
|
||||
minutes = (minutes >= 10) ? minutes : "0" + minutes;
|
||||
seconds = Math.floor(seconds % 60);
|
||||
seconds = (seconds >= 10) ? seconds : "0" + seconds;
|
||||
return minutes + ":" + seconds;
|
||||
}
|
||||
|
||||
private getRandomInt(max) {
|
||||
return Math.floor(Math.random() * Math.floor(max));
|
||||
}
|
||||
}
|
@ -1,59 +1,14 @@
|
||||
<ng-container *ngIf="!showInit">
|
||||
|
||||
<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()">
|
||||
<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}">
|
||||
<div class="content">
|
||||
<div class="element logo" *ngIf="slide.name=='about'">
|
||||
<a href="http://www.landarte.es/"><img style="max-height:60px;" src="assets/img/landarte_logo.png"/></a>
|
||||
</div>
|
||||
<div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div>
|
||||
<div class="element big-title" *ngIf="audio_title==slide.title && currentTime && duration!='00:00'" (click)="play()">{{currentTime}}</div>
|
||||
<div class="element big-title" [innerHTML]="slide.title"></div>
|
||||
<div class="element second-title" [innerHTML]="slide.content"></div>
|
||||
<div class="element logo" *ngIf="slide.name=='about'">
|
||||
<a href="http://www.culturanavarra.es/"><img src="assets/img/logoCK.png"/></a>
|
||||
<a href="http://www.navarra.es/"><img src="assets/img/navarra.png"/></a>
|
||||
</div>
|
||||
<div class="element logo" *ngIf="slide.name=='about'">
|
||||
<a href="https://www.beire.es/"><img src="assets/img/logoBeire.png"/></a>
|
||||
<a href="http://soinumapa.net"><img src="assets/img/logoSoinumapa.png" style="max-width:80px;"/></a>
|
||||
</div>
|
||||
<div class="element logo" *ngIf="slide.name=='home'"><img style="padding-top:30px;max-width:100px;" src="assets/img/landarte_logo.png"/></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls" *ngIf="slide">
|
||||
<div *ngIf="slide.o" class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
|
||||
<div *ngIf="slide.e" class="right control end"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
|
||||
<div *ngIf="slide.n" class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
|
||||
<div *ngIf="slide.s" class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
<h1 routerLink="/home">Beire </h1>
|
||||
</div>
|
||||
|
||||
<div class="header menu">
|
||||
<h1 routerLink="/about" *ngIf="slide && slide.name!='about'">+</h1>
|
||||
</div>
|
||||
|
||||
<div class="footer player">
|
||||
<span class="mute" (click)="mute()" [ngClass]="{'muted': muted}">mute</span>
|
||||
<span class="audioElement audioTimer" *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
|
||||
</div>
|
||||
|
||||
<div class="footer right">
|
||||
<span class="audioElement"[innerHTML]="'Escuchando '+audio_title"></span>
|
||||
</div>
|
||||
|
||||
<div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
|
||||
<div id="video-player-content" (click)="stopVideo()"></div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="showInit" class="slide init-slide" style="background-image:url('/assets/img/trailer.gif');" (click)="forcePlay()">
|
||||
<div class="element">
|
||||
<!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
|
||||
<!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
|
||||
<!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
|
||||
<!-- <h3>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 </h3> -->
|
||||
</div>
|
||||
<div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
|
||||
<div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
|
||||
<div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
|
||||
<div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
|
||||
</div>
|
||||
|
@ -1,141 +1,48 @@
|
||||
@import "../../_variables.scss";
|
||||
|
||||
div.slide {
|
||||
color:$primary;
|
||||
color:#fff;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
background-size:cover;
|
||||
background-color:$slide-background;
|
||||
// background-blend-mode: luminosity;
|
||||
filter:grayscale(1);
|
||||
background-position: center center;
|
||||
background-color:#f90;
|
||||
background-blend-mode: luminosity;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
div.slide.init-slide {
|
||||
background-size:cover;
|
||||
background-position:center center;
|
||||
position:absolute;
|
||||
background-repeat: no-repeat;
|
||||
z-index:2000;
|
||||
top:0;
|
||||
left:0;
|
||||
filter:none;
|
||||
overflow:crosshair;
|
||||
}
|
||||
|
||||
div.element {
|
||||
width:50vw;
|
||||
margin:auto;
|
||||
text-align:justify;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
div.big-title {
|
||||
font-weight: bold;
|
||||
font-family:"Helvetica Bold",sans-serif;
|
||||
// font-size:2vw;
|
||||
font-size:calc(12px + 2vw);
|
||||
color:$primary;
|
||||
opacity:1;
|
||||
max-width: 100px;
|
||||
cursor:pointer;
|
||||
font-family:"Staatliches",sans-serif;
|
||||
font-size:10rem;
|
||||
opacity:0.6;
|
||||
}
|
||||
|
||||
div.second-title {
|
||||
font-size:1.2vmax;
|
||||
font-family:"Helvetica",serif;
|
||||
overflow-wrap:break-word;
|
||||
text-align:justify;
|
||||
a { text-decoration:none; font-weight:bold;}
|
||||
font-size:3rem;
|
||||
font-family:"Reenie Beanie",serif;
|
||||
}
|
||||
|
||||
/* controls */
|
||||
div.controls{
|
||||
div.control {
|
||||
position:absolute;
|
||||
z-index:100;
|
||||
width:22vw;
|
||||
height:18vh;
|
||||
display:flex;justify-content: center; align-items: center;}
|
||||
div.left { top:0;left:4.5vw;height:100vh;max-width:80px; }
|
||||
div.right { top:0;right:4.5vw;height:100vh;max-width:80px; }
|
||||
div.top { top:5.5vh;left:0;width:100vw;padding-top:2vh;max-height:80px; }
|
||||
div.bottom { bottom:6vh;left:0;width:100vw;max-height:80px; }
|
||||
}
|
||||
|
||||
div.controls.end {
|
||||
justify-content: end;
|
||||
div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
|
||||
div.left { top:0;left:0;height:100vh; }
|
||||
div.right { top:0;right:0;height:100vh; }
|
||||
div.top { top:0;left:0;width:100vw; }
|
||||
div.bottom { bottom:0;left:0;width:100vw; }
|
||||
}
|
||||
|
||||
div.arrow {
|
||||
display:inline-flex;
|
||||
cursor:pointer;
|
||||
min-width:75px;
|
||||
min-height:75px;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
// font-size:2vw;
|
||||
font-size:calc(12px + 2vw);
|
||||
font-weight:bold;
|
||||
div.rotate-up { transform:rotate(90deg);}
|
||||
div.rotate-down { transform:rotate(-90deg);}
|
||||
img { max-width:60px; max-height:60px; margin:auto;}
|
||||
}
|
||||
|
||||
/* header */
|
||||
div.header {
|
||||
h1 { font-size:calc(12px + 2vw); cursor:pointer;}
|
||||
color:$primary;
|
||||
position:absolute;z-index:200;top:0;left:0;height:10vh;
|
||||
// width:100vw;
|
||||
max-width:100%;
|
||||
text-align:left;margin-left:5vw;margin-top:3vw;
|
||||
}
|
||||
|
||||
.muted { opacity:0.6; text-decoration:line-through;;}
|
||||
.audioElement { margin:0 20px;
|
||||
@media screen and (max-width: $breakpoint-phone) { display:none;}
|
||||
}
|
||||
|
||||
div.footer {
|
||||
overflow:hidden;
|
||||
color:$primary;
|
||||
position:absolute;z-index:200;bottom:0;left:0;height:10vh;
|
||||
max-width:50%;
|
||||
text-align:left;margin-left:5vw;margin-top:3vw;
|
||||
span.mute { cursor:pointer;}
|
||||
}
|
||||
|
||||
div.footer.right {
|
||||
left:auto;
|
||||
right:0;
|
||||
}
|
||||
div.menu {
|
||||
z-index:200;cursor:pointer;left:auto;
|
||||
right:0;padding-right:5vw;
|
||||
}
|
||||
|
||||
|
||||
div.video-player {
|
||||
position:absolute;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
z-index:300;
|
||||
align-items: center;
|
||||
display:flex;
|
||||
background:rgba(0,0,0,0.5);
|
||||
top:0;
|
||||
* { margin:auto;}
|
||||
#video-player-content { max-width:100%; max-height:100%; display:inherit; }
|
||||
}
|
||||
|
||||
/** logo **/
|
||||
div.logo img {
|
||||
padding:10px;
|
||||
max-height:40px;
|
||||
max-width:200px;
|
||||
}
|
||||
|
@ -1,10 +1,10 @@
|
||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
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';
|
||||
import Player from '@vimeo/player';
|
||||
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
@ -15,50 +15,16 @@ import Player from '@vimeo/player';
|
||||
export class SlideComponent implements OnInit {
|
||||
|
||||
slide: any;
|
||||
muted:boolean = false;
|
||||
showInit:boolean = true;
|
||||
|
||||
/*player info*/
|
||||
duration=""
|
||||
currentTime=""
|
||||
audio_title="Streaming from Beire"
|
||||
|
||||
/* video player */
|
||||
showVideo = "none";
|
||||
videoPlayer:any;
|
||||
_videoID:string;
|
||||
//@ViewChild('vimeoPlayer') vimeoPlayer: ElementRef;
|
||||
|
||||
constructor(
|
||||
private clientService:ClientService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private playerService:PlayerService,
|
||||
) {
|
||||
|
||||
/* subscribe timer */
|
||||
playerService.audio_current_time$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.duration = res.duration;
|
||||
this.currentTime = res.currentTime;
|
||||
}
|
||||
)
|
||||
|
||||
playerService.audio_title$
|
||||
.subscribe(
|
||||
(res:any) => {
|
||||
this.audio_title = res;
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
// play stream
|
||||
this.play();
|
||||
|
||||
document.addEventListener('keydown', (e) => { this.onKeydown(e) });
|
||||
//document.addEventListener('keydown', (e) => { console.log(e)})
|
||||
|
||||
this.route.params.subscribe(
|
||||
params => {
|
||||
@ -72,39 +38,6 @@ export class SlideComponent implements OnInit {
|
||||
|
||||
}
|
||||
|
||||
getVideoId():string {
|
||||
return this._videoID;
|
||||
}
|
||||
|
||||
showVideoVimeo(id:string) {
|
||||
|
||||
var options = {loop: false, id: id, responsive: false, autoplay: true};
|
||||
|
||||
if (this.videoPlayer && this.getVideoId() != id) { this.videoPlayer = this.videoPlayer.destroy();}
|
||||
else if ( this.getVideoId() == id ) {
|
||||
//this.videoPlayer.requestFullscreen();
|
||||
}
|
||||
|
||||
this.videoPlayer = new Player('video-player-content', options);
|
||||
this.showVideo = "flex"
|
||||
this.videoPlayer.on('play', () => {
|
||||
this._videoID = id;
|
||||
this.videoPlayer.getFullscreen().then( (f) => {
|
||||
//if (!f) { this.videoPlayer.requestFullscreen(); }
|
||||
});
|
||||
}
|
||||
);
|
||||
this.videoPlayer.on('ended', () => { this.stopVideo(); });
|
||||
this.videoPlayer.on('fullscreenchange', (data) => { if (!data.fullscreen) { this.stopVideo(); } })
|
||||
}
|
||||
|
||||
stopVideo() {
|
||||
this.videoPlayer.pause().then( () => {
|
||||
this.mute(); //unmute
|
||||
this.showVideo = "none";
|
||||
});
|
||||
}
|
||||
|
||||
getFeaturedImage(): string {
|
||||
return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
|
||||
}
|
||||
@ -115,6 +48,7 @@ export class SlideComponent implements OnInit {
|
||||
//ArrowRight
|
||||
//ArrowUp
|
||||
//ArrowDown
|
||||
console.log(e)
|
||||
switch (e.code) {
|
||||
case "ArrowLeft" :
|
||||
this.left(e);
|
||||
@ -126,37 +60,12 @@ export class SlideComponent implements OnInit {
|
||||
this.up(e); break;
|
||||
case "ArrowDown" :
|
||||
this.down(e); break;
|
||||
case "Space" :
|
||||
this.playUrl(); break;
|
||||
}
|
||||
}
|
||||
|
||||
left(e) { if (this.slide.o) this.router.navigate(['/', this.slide.o]);}
|
||||
right(e) { if (this.slide.e) this.router.navigate(['/', this.slide.e]); }
|
||||
up(e) { if (this.slide.n) this.router.navigate(['/', this.slide.n]); }
|
||||
down(e) { if (this.slide.s) this.router.navigate(['/', this.slide.s]); }
|
||||
|
||||
mute() {
|
||||
this.playerService.mute();
|
||||
this.muted = !this.muted;
|
||||
}
|
||||
|
||||
play() {
|
||||
this.playerService.playList()
|
||||
}
|
||||
|
||||
playUrl() {
|
||||
/* stop audio */
|
||||
if (this.slide.title === this.audio_title) { this.playerService.playList() }
|
||||
/* playVideo */
|
||||
if (this.slide.featuredVideo) { this.mute(); this.showVideoVimeo(this.slide.featuredVideo); }
|
||||
/* playAudio */
|
||||
else if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
|
||||
}
|
||||
|
||||
forcePlay() {
|
||||
this.showInit = false;
|
||||
this.play();
|
||||
}
|
||||
left(e) { this.router.navigate(['/', this.slide.o]);}
|
||||
right(e) { this.router.navigate(['/', this.slide.e]); }
|
||||
up(e) { this.router.navigate(['/', this.slide.n]); }
|
||||
down(e) { this.router.navigate(['/', this.slide.s]); }
|
||||
|
||||
}
|
||||
|
Before Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 9.6 KiB |
Before Width: | Height: | Size: 142 KiB |
Before Width: | Height: | Size: 14 MiB |
@ -1,7 +0,0 @@
|
||||
{ "data" : [
|
||||
{"title":"Traktorea", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20201017_TRACTOR_ARANDO.mp3"},
|
||||
{"title":"Kanpaiak", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20201017_BEIRE_CAMPANAS_EDIT.mp3"},
|
||||
{"title":"Erlezaintza", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20200909_ABEJAS_COMER_APICULTOR_DIA_BEIRE_ARGUEDAS.mp3"},
|
||||
{"title":"Uxue Santutegia", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20200912_INTERIOR_IGLESIA_PUERTA_UJUE_EDITED.mp3"}
|
||||
]
|
||||
}
|
@ -1,5 +1,3 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
uriAPI: "https://public.audio-lab.org/beireapi/",
|
||||
ListURL: "https://beire.soinumapa.net/assets/playlist.json"
|
||||
production: true
|
||||
};
|
||||
|
@ -4,8 +4,7 @@
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
uriAPI: "https://public.audio-lab.org/beireapi/",
|
||||
ListURL: "http://localhost:4200/assets/playlist.json"
|
||||
uriAPI: "https://public.audio-lab.org/beireapi/"
|
||||
};
|
||||
|
||||
/*
|
||||
|
BIN
src/favicon.ico
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 948 B |
@ -2,14 +2,10 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Beire - Una propuesta de Maite Redondo y Luca Rullo</title>
|
||||
<title>BeireFrontend</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<meta name="description" content="Una propuesta de Maite Redondo y Luca Rullo para el programa Landarte, Cultura contemporánea y ruralidad. Con la ayuda de JESUSA — PAZ — LOLA — JUANA — CATALINA — ARACELI — YASMIN — ANGÉLICA — MIREN — NAIARA — NOA — TERE — AMAYA — IDOIA — PATRICIA — DAVID — LUIS MARI — PAULA — DAVID — JUAN — MARI CARMEN — AINARA — MARGARITA RUBIO — FERMINA [BURRA] — AZAHARA — ASIER — JUDITH — MARKEL — ION — NIEZYELA — SAAD — ALICIA — OIHANE — JOAQUIN — JAVIER GORRIA — ALFONSO — MARI — PEPÍN — BERTA — JOSÉ PIERRE — BRUNO — VIRGINIA — POLI — VALENTÍN — CHARO — CECILIA — FERMINA — FLAVIO — CASINO DE BEIRE — MARI — PEDRO LUIS — HILDA — BAR BARIAIN — ANGÉLICA — MARGARITA ONGAY — VICTOR — EDUARDO — CARLOS — IGNACIO — ESCALERAS ARIZONA — ESCUELA DE MÚSICA DE OLITE — GERMÁN — JAVIER CLEMENTE — AMETS — MIKEL — GARAZI — PERU — NURIA — JON — ANNE — MARC">
|
||||
<meta name="keywords" content="beire, landarte, navarra, nafarroa, cultura, documental, interactivo, documentary, interactive, maite redondo, luca rullo">
|
||||
<meta name="author" content="Maite Redondo y Luca Rullo">
|
||||
<link rel="manifest" href="manifest.json" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
@ -1,4 +0,0 @@
|
||||
{
|
||||
"display": "standalone",
|
||||
"orientation": "landscape-primary"
|
||||
}
|
128
src/styles.scss
@ -1,132 +1,10 @@
|
||||
/* 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 './_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');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family:"Helvetica";
|
||||
src:url('assets/font/HelvLight Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"Helvetica Bold";
|
||||
src:url('assets/font/HelveticaWorld-Bold.ttf');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family:"Frutiger";
|
||||
src:url('assets/font/FrutigerLTStd-Cn.otf');
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap');
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
background-color:$background-color;
|
||||
cursor:crosshair;
|
||||
font-family:"Frutiger";
|
||||
}
|
||||
|
||||
*:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
// font-family:"Staatliches",sans-serif;
|
||||
text-transform:uppercase;
|
||||
font-family:"Frutiger";
|
||||
font-weight:100;
|
||||
font-size:2vw;
|
||||
// opacity:0.6;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:3vw;
|
||||
font-family:"Frutiger",serif;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family:"Frutiger";
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:$primary;
|
||||
}
|
||||
|
||||
|
||||
/* 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);
|
||||
}
|
||||
background-color:#1c1c1c;
|
||||
cursor:none;
|
||||
}
|
||||
|