diff --git a/src/_variables.scss b/src/_variables.scss index f20db47..732bd8f 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -11,6 +11,6 @@ $breakpoint-tablet: 768px; $breakpoint-phone: 500px; $background-color: #1c1c1c; // $slide-background: #f90; -$slide-background: #cc7722; +$slide-background: #090501; $backgroundhover: #ff0038b5; diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a5b909f..8b90898 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -6,7 +6,8 @@ import { InitComponent} from './init/init.component'; const routes: Routes = [ { path: ':name', component: SlideComponent }, - { path: '', component: InitComponent } + { path: '', redirectTo: '/home', pathMatch: 'full'} + // { path: '', component: InitComponent } ]; @NgModule({ diff --git a/src/app/app.component.html b/src/app/app.component.html index b96d431..66e9796 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..31136f8 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1 @@ +div.router { overflow:hidden;} diff --git a/src/app/init/init.component.html b/src/app/init/init.component.html index 6967f79..2f83352 100644 --- a/src/app/init/init.component.html +++ b/src/app/init/init.component.html @@ -1,13 +1,13 @@ -
-
-

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/player.service.ts b/src/app/player.service.ts index 41ecaca..6b7333f 100644 --- a/src/app/player.service.ts +++ b/src/app/player.service.ts @@ -76,8 +76,8 @@ export class PlayerService { 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 = "Escuchando desde Beire"} - else {this.audio_title = "Escuchando "+data[this.ListIndex]["title"]} + 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) } ) diff --git a/src/app/slide/slide.component.html b/src/app/slide/slide.component.html index 26093b2..443910d 100644 --- a/src/app/slide/slide.component.html +++ b/src/app/slide/slide.component.html @@ -2,17 +2,28 @@
+
{{currentTime}}
+ +
-
-
-
+
+
+
@@ -29,13 +40,20 @@
- +
-
+
-
+
+
+ + + + +
+
diff --git a/src/app/slide/slide.component.scss b/src/app/slide/slide.component.scss index f78ed9c..e4805d5 100644 --- a/src/app/slide/slide.component.scss +++ b/src/app/slide/slide.component.scss @@ -17,16 +17,20 @@ div.slide { } 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; } div.element { width:50vw; margin:auto; - text-align:center; + text-align:justify; } div.big-title { @@ -41,22 +45,33 @@ div.big-title { } div.second-title { - font-size:1.6vw; - font-family:"Swiss Light",serif; + font-size:1.2vmax; + font-family:"Helvetica",serif; overflow-wrap:break-word; + text-align:justify; a { text-decoration:none; font-weight:bold;} } /* controls */ div.controls{ - div.control {position:absolute;z-index:100;width:10vw;height:10vh;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;padding-top:2vh; } - div.bottom { bottom:0;left:0;width:100vw; } + 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.arrow { + display:inline-flex; cursor:pointer; min-width:75px; min-height:75px; @@ -68,7 +83,7 @@ div.arrow { font-weight:bold; div.rotate-up { transform:rotate(90deg);} div.rotate-down { transform:rotate(-90deg);} - img { max-width:60px; max-height:60px;} + img { max-width:60px; max-height:60px; margin:auto;} } /* header */ @@ -115,4 +130,12 @@ div.video-player { 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; } diff --git a/src/app/slide/slide.component.ts b/src/app/slide/slide.component.ts index 9774bf7..50cb3f1 100644 --- a/src/app/slide/slide.component.ts +++ b/src/app/slide/slide.component.ts @@ -78,16 +78,20 @@ export class SlideComponent implements OnInit { showVideoVimeo(id:string) { - var options = {loop: false, id: id, responsive: true, autoplay: true}; + 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(); } + 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.getFullscreen().then( (f) => { + //if (!f) { this.videoPlayer.requestFullscreen(); } + }); } ); this.videoPlayer.on('ended', () => { this.stopVideo(); }); @@ -122,13 +126,15 @@ export class SlideComponent implements OnInit { this.up(e); break; case "ArrowDown" : this.down(e); break; + case "Space" : + this.playUrl(); 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]); } + 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(); diff --git a/src/assets/img/logoCK.png b/src/assets/img/logoCK.png new file mode 100644 index 0000000..0a7d092 Binary files /dev/null and b/src/assets/img/logoCK.png differ diff --git a/src/assets/img/navarra.png b/src/assets/img/navarra.png new file mode 100644 index 0000000..ec5f6d8 Binary files /dev/null and b/src/assets/img/navarra.png differ diff --git a/src/assets/img/trailer.gif b/src/assets/img/trailer.gif new file mode 100755 index 0000000..bcb092a Binary files /dev/null and b/src/assets/img/trailer.gif differ diff --git a/src/favicon.ico b/src/favicon.ico index 997406a..cff5150 100644 Binary files a/src/favicon.ico and b/src/favicon.ico differ diff --git a/src/index.html b/src/index.html index 770afa9..a17e298 100644 --- a/src/index.html +++ b/src/index.html @@ -2,10 +2,13 @@ - BeireFrontend + Beire - Una propuesta de Maite Redondo y Luca Rullo + + +