Fix design issues
Fix init player when not user click
This commit is contained in:
parent
c65f2cb516
commit
2427d43db2
@ -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 = "Live Streaming from Beire"}
|
||||
else {this.audio_title = "Live: "+data[this.ListIndex]["title"]}
|
||||
if (!data[this.ListIndex]["title"]) {this.audio_title = "Escuchando desde Beire"}
|
||||
else {this.audio_title = "Escuchando "+data[this.ListIndex]["title"]}
|
||||
this.playUrl(data[this.ListIndex]["url"],this.audio_title)
|
||||
}
|
||||
)
|
||||
|
@ -1,3 +1,5 @@
|
||||
<ng-container *ngIf="!showInit">
|
||||
|
||||
<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()">
|
||||
<div class="content">
|
||||
<div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div>
|
||||
@ -22,11 +24,18 @@
|
||||
</div>
|
||||
|
||||
<div class="footer player">
|
||||
<span (click)="mute()" [ngClass]="{'muted': muted}">mute</span>
|
||||
<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]="audio_title"></span>
|
||||
</div>
|
||||
|
||||
<div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
|
||||
<div id="video-player-content"></div>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="showInit" class="slide init-slide" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');" (click)="forcePlay()"></div>
|
||||
|
@ -16,6 +16,13 @@ div.slide {
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
div.slide.init-slide {
|
||||
position:absolute;
|
||||
z-index:2000;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
div.element {
|
||||
width:50vw;
|
||||
margin:auto;
|
||||
@ -30,19 +37,22 @@ div.big-title {
|
||||
color:$primary;
|
||||
opacity:1;
|
||||
max-width: 100px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
div.second-title {
|
||||
font-size:3vw;
|
||||
font-size:1.6vw;
|
||||
font-family:"Swiss Light",serif;
|
||||
overflow-wrap:break-word;
|
||||
a { text-decoration:none; font-weight:bold;}
|
||||
}
|
||||
|
||||
/* controls */
|
||||
div.controls{
|
||||
div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
|
||||
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; }
|
||||
div.top { top:0;left:0;width:100vw;padding-top:2vh; }
|
||||
div.bottom { bottom:0;left:0;width:100vw; }
|
||||
}
|
||||
|
||||
@ -58,7 +68,7 @@ div.arrow {
|
||||
font-weight:bold;
|
||||
div.rotate-up { transform:rotate(90deg);}
|
||||
div.rotate-down { transform:rotate(-90deg);}
|
||||
img { max-width:30px; max-height:30px;}
|
||||
img { max-width:60px; max-height:60px;}
|
||||
}
|
||||
|
||||
/* header */
|
||||
@ -72,7 +82,9 @@ div.header {
|
||||
}
|
||||
|
||||
.muted { opacity:0.6; text-decoration:line-through;;}
|
||||
.audioElement { margin:0 20px;}
|
||||
.audioElement { margin:0 20px;
|
||||
@media screen and (max-width: $breakpoint-phone) { display:none;}
|
||||
}
|
||||
|
||||
div.footer {
|
||||
overflow:hidden;
|
||||
@ -80,10 +92,16 @@ div.footer {
|
||||
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 {
|
||||
margin-left:95vw;z-index:200;cursor:pointer;
|
||||
z-index:200;cursor:pointer;left:auto;
|
||||
right:0;padding-right:5vw;
|
||||
}
|
||||
|
||||
|
||||
|
@ -16,6 +16,7 @@ export class SlideComponent implements OnInit {
|
||||
|
||||
slide: any;
|
||||
muted:boolean = false;
|
||||
showInit:boolean = true;
|
||||
|
||||
/*player info*/
|
||||
duration=""
|
||||
@ -141,4 +142,9 @@ export class SlideComponent implements OnInit {
|
||||
else if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
|
||||
}
|
||||
|
||||
forcePlay() {
|
||||
this.showInit = false;
|
||||
this.play();
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
uriAPI: "https://public.audio-lab.org/beireapi/",
|
||||
ListURL: "https://public.audio-lab.org/beire3/assets/playlist.json"
|
||||
ListURL: "https://beire.soinumapa.net/assets/playlist.json"
|
||||
};
|
||||
|
@ -58,6 +58,12 @@ h3 {
|
||||
font-family:"Frutiger";
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:$primary;
|
||||
}
|
||||
|
||||
|
||||
/* animations css */
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user