Now page working
This commit is contained in:
parent
3ca1c32496
commit
cad4a68677
@ -7,10 +7,10 @@
|
||||
<p>@toast</p>
|
||||
|
||||
<EditForm Model="@loginModel" OnSubmit="@HandleSubmit">
|
||||
<InputText id="username" @bind-Value="loginModel.Username" />
|
||||
<InputText type="password" placeholder="Password" @bind-Value="loginModel.Password" />
|
||||
<InputText id="username" type="text" placeholder="Username" @bind-Value="loginModel.Username" tabindex="1" />
|
||||
<InputText type="password" placeholder="Password" @bind-Value="loginModel.Password" tabindex="2" />
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
<button type="submit" tabindex="3">Submit</button>
|
||||
</EditForm>
|
||||
|
||||
@code {
|
||||
@ -39,5 +39,5 @@
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,16 +1,63 @@
|
||||
@page "/now"
|
||||
@using Selector.SignalR;
|
||||
@implements IDisposable
|
||||
|
||||
<h1>Now</h1>
|
||||
|
||||
@if (nowCache?.LastPlaying?.Track is not null)
|
||||
@*@if (nowCache?.LastPlaying?.Track is not null)
|
||||
{
|
||||
<p role="status">@nowCache.LastPlaying.Track.Name</p>
|
||||
}
|
||||
}*@
|
||||
|
||||
<NowPlayingCard Track="@nowCache.LastPlaying?.Track" Episode="@nowCache.LastPlaying?.Episode" />
|
||||
|
||||
|
||||
@code {
|
||||
[Inject]
|
||||
private NowHubCache nowCache { get; set; }
|
||||
|
||||
protected async override Task OnInitializedAsync()
|
||||
{
|
||||
nowCache.NewNowPlaying += OnNewPlaying;
|
||||
nowCache.NewCard += OnNewCard;
|
||||
nowCache.NewPlayCount += OnNewPlayCount;
|
||||
nowCache.NewAudioFeature += OnNewAudioFeature;
|
||||
}
|
||||
|
||||
private void OnNewPlaying(object sender, EventArgs args)
|
||||
{
|
||||
Update();
|
||||
}
|
||||
|
||||
private void OnNewCard(object sender, EventArgs args)
|
||||
{
|
||||
Update();
|
||||
}
|
||||
|
||||
private void OnNewPlayCount(object sender, EventArgs args)
|
||||
{
|
||||
Update();
|
||||
}
|
||||
|
||||
private void OnNewAudioFeature(object sender, EventArgs args)
|
||||
{
|
||||
Update();
|
||||
}
|
||||
|
||||
public void Update()
|
||||
{
|
||||
Application.Current.Dispatcher.Dispatch(() =>
|
||||
{
|
||||
StateHasChanged();
|
||||
});
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
nowCache.NewNowPlaying -= OnNewPlaying;
|
||||
nowCache.NewCard -= OnNewCard;
|
||||
nowCache.NewPlayCount -= OnNewPlayCount;
|
||||
nowCache.NewAudioFeature -= OnNewAudioFeature;
|
||||
}
|
||||
}
|
||||
|
||||
|
53
Selector.MAUI/Shared/NowPlayingCard.razor
Normal file
53
Selector.MAUI/Shared/NowPlayingCard.razor
Normal file
@ -0,0 +1,53 @@
|
||||
@using SpotifyAPI.Web;
|
||||
|
||||
@if (Track is not null) {
|
||||
<div class="card now-playing-card">
|
||||
<img src="@imageUrl" class="cover-art">
|
||||
<h4>@Track.Name</h4>
|
||||
<h6>
|
||||
@Track.Album.Name
|
||||
</h6>
|
||||
<h6>
|
||||
@foreach(var artist in Track.Artists)
|
||||
{
|
||||
<span>@artist.Name</span>
|
||||
}
|
||||
</h6>
|
||||
<div style="width: 100%">
|
||||
<SpotifyLogo Link="@Track.ExternalUrls.FirstOrDefault(x => x.Key == "Spotify").Value" />
|
||||
<img src="/live.gif" style="height: 20px; float: right">
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else if (Episode is not null) {
|
||||
<div class="card now-playing-card">
|
||||
<img src="@imageUrl" class="cover-art">
|
||||
<h4>@Episode.Name</h4>
|
||||
<h6>
|
||||
@Episode.Show.Name
|
||||
</h6>
|
||||
<h6>
|
||||
@Episode.Show.Publisher
|
||||
</h6>
|
||||
<div style="width: 100%">
|
||||
<SpotifyLogo Link="@Episode.ExternalUrls.FirstOrDefault(x => x.Key == "Spotify").Value" />
|
||||
<img src="/live.gif" style="height: 20px; float: right">
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card now-playing-card">
|
||||
<h4>No Playback</h4>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public FullTrack Track { get; set; }
|
||||
[Parameter]
|
||||
public FullEpisode Episode { get; set; }
|
||||
|
||||
private string imageUrl => Track?.Album?.Images?.FirstOrDefault()?.Url ?? Episode?.Show?.Images?.FirstOrDefault()?.Url ?? string.Empty;
|
||||
}
|
||||
|
15
Selector.MAUI/Shared/SpotifyLogo.razor
Normal file
15
Selector.MAUI/Shared/SpotifyLogo.razor
Normal file
@ -0,0 +1,15 @@
|
||||
@if (!string.IsNullOrWhiteSpace(Link))
|
||||
{
|
||||
<a href="@Link" target="_blank" class="spotify-logo" style="float: left">
|
||||
<img src="/spotify_icon.png">
|
||||
</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<img src="/spotify_icon.png" class="spotify-logo" style="float: left">
|
||||
}
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string Link { get; set; }
|
||||
}
|
63
Selector.MAUI/Shared/SpotifyLogo.razor.css
Normal file
63
Selector.MAUI/Shared/SpotifyLogo.razor.css
Normal file
@ -0,0 +1,63 @@
|
||||
.navbar-toggler {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
height: 3.5rem;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.oi {
|
||||
width: 2rem;
|
||||
font-size: 1.1rem;
|
||||
vertical-align: text-top;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a {
|
||||
color: #d7d7d7;
|
||||
border-radius: 4px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background-color: rgba(255,255,255,0.25);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-item ::deep a:hover {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
@ -1,17 +0,0 @@
|
||||
<div class="alert alert-secondary mt-4">
|
||||
<span class="oi oi-pencil me-2" aria-hidden="true"></span>
|
||||
<strong>@Title</strong>
|
||||
|
||||
<span class="text-nowrap">
|
||||
Please take our
|
||||
<a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2188693">brief survey</a>
|
||||
</span>
|
||||
and tell us what you think.
|
||||
</div>
|
||||
|
||||
@code {
|
||||
// Demonstrates how a parent component can supply parameters
|
||||
[Parameter]
|
||||
public string Title { get; set; }
|
||||
}
|
||||
|
@ -16,6 +16,11 @@ public class NowHubCache
|
||||
public PlayCount LastPlayCount { get; private set; }
|
||||
public CurrentlyPlayingDTO LastPlaying { get; private set; }
|
||||
|
||||
public event EventHandler NewAudioFeature;
|
||||
public event EventHandler NewCard;
|
||||
public event EventHandler NewPlayCount;
|
||||
public event EventHandler NewNowPlaying;
|
||||
|
||||
public NowHubCache(NowHubClient connection, ILogger<NowHubCache> logger)
|
||||
{
|
||||
_connection = connection;
|
||||
@ -30,6 +35,7 @@ public class NowHubCache
|
||||
{
|
||||
logger.LogInformation("New audio features received: {0}", af);
|
||||
LastFeature = af;
|
||||
NewAudioFeature?.Invoke(this, null);
|
||||
}
|
||||
});
|
||||
|
||||
@ -39,6 +45,7 @@ public class NowHubCache
|
||||
{
|
||||
logger.LogInformation("New card received: {0}", c);
|
||||
LastCards.Add(c);
|
||||
NewCard?.Invoke(this, null);
|
||||
}
|
||||
});
|
||||
|
||||
@ -48,7 +55,8 @@ public class NowHubCache
|
||||
{
|
||||
logger.LogInformation("New play count received: {0}", pc);
|
||||
LastPlayCount = pc;
|
||||
}
|
||||
NewPlayCount?.Invoke(this, null);
|
||||
}
|
||||
});
|
||||
|
||||
_connection.OnNewPlaying(async np =>
|
||||
@ -60,7 +68,8 @@ public class NowHubCache
|
||||
logger.LogInformation("New now playing recieved: {0}", np);
|
||||
LastPlaying = np;
|
||||
LastCards.Clear();
|
||||
}
|
||||
NewNowPlaying?.Invoke(this, null);
|
||||
}
|
||||
|
||||
if (LastPlaying?.Track is not null)
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user