+
-
Beire
-
Mar de tierra
-
+
+
+
+
+
diff --git a/src/app/slide/slide.component.scss b/src/app/slide/slide.component.scss
index 94d056b..80f7bec 100644
--- a/src/app/slide/slide.component.scss
+++ b/src/app/slide/slide.component.scss
@@ -2,7 +2,6 @@ div.slide {
color:#fff;
width:100vw;
height:100vh;
- background-image:url("/assets/img/output.gif");
background-size:cover;
background-color:#f90;
background-blend-mode: luminosity;
@@ -10,6 +9,7 @@ div.slide {
justify-content: center;
align-items: center;
text-align: center;
+ overflow:crosshair;
}
div.element {
@@ -28,3 +28,21 @@ div.second-title {
font-size:3rem;
font-family:"Reenie Beanie",serif;
}
+
+/* controls */
+div.controls{
+ 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 {
+ cursor:pointer;
+ min-width:75px;
+ min-height:75px;
+ align-items: center;
+ align-content: center;
+ text-align: center;
+}
diff --git a/src/app/slide/slide.component.ts b/src/app/slide/slide.component.ts
index e50d275..90183c3 100644
--- a/src/app/slide/slide.component.ts
+++ b/src/app/slide/slide.component.ts
@@ -1,4 +1,11 @@
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';
+
+
+
@Component({
selector: 'app-slide',
@@ -7,13 +14,58 @@ import { Component, OnInit } from '@angular/core';
})
export class SlideComponent implements OnInit {
- constructor() { }
+ slide: any;
+
+ constructor(
+ private clientService:ClientService,
+ private route: ActivatedRoute,
+ private router: Router,
+ ) {}
ngOnInit(): void {
+ document.addEventListener('keydown', (e) => { this.onKeydown(e) });
+ //document.addEventListener('keydown', (e) => { console.log(e)})
+
+ this.route.params.subscribe(
+ params => {
+ if (params.name) {
+ this.clientService.getItem(params.name).subscribe(
+ (r) => { this.slide = r.data;}
+ )
+ }
+ }
+ )
+
}
- onKeydown(event) {
- console.log(event)
+ getFeaturedImage(): string {
+ return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
}
+ onKeydown(e) {
+ //e.code
+ //ArrowLeft
+ //ArrowRight
+ //ArrowUp
+ //ArrowDown
+ console.log(e)
+ switch (e.code) {
+ case "ArrowLeft" :
+ this.left(e);
+ break;
+ case "ArrowRight" :
+ this.right(e);
+ break;
+ case "ArrowUp" :
+ this.up(e); break;
+ case "ArrowDown" :
+ this.down(e); break;
+ }
+ }
+
+ 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]); }
+
}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 7b4f817..a2e1609 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,7 +3,8 @@
// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false
+ production: false,
+ uriAPI: "https://public.audio-lab.org/beireapi/"
};
/*