Skip to content

Commit 9197215

Browse files
committed
* Index.razor:
* _Host.cshtml: * NavMenu.razor: * Toggle.js: * Example.ASPBlazor.csproj: Added playlist detial
1 parent 5bfe0ea commit 9197215

6 files changed

Lines changed: 215 additions & 41 deletions

File tree

‎SpotifyAPI.Web.Examples/Example.ASPBlazor/Example.ASPBlazor.csproj‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
</PropertyGroup>
66

77
<ItemGroup>
8-
<ProjectReference Include="..\..\SpotifyAPI.Web\SpotifyAPI.Web.csproj" />
8+
<ProjectReference Include="..\..\SpotifyAPI.Web\SpotifyAPI.Web.csproj">
9+
<GlobalPropertiesToRemove></GlobalPropertiesToRemove>
10+
</ProjectReference>
11+
</ItemGroup>
12+
<ItemGroup>
13+
<Folder Include="wwwroot\scripts\" />
914
</ItemGroup>
10-
1115
</Project>
Lines changed: 177 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,200 @@
11
@page "/"
22
@inject NavigationManager navManager
3+
@inject IJSRuntime JSRuntime
4+
35
@using SpotifyAPI.Web
46

5-
<h1>Hello, world!</h1>
7+
68

79
@if (_isAuthed && _me != null)
810
{
9-
<h2>Welcome @_me.DisplayName!</h2>
10-
<p>
11-
You have a grant total of @_totalPlaylistCount playlists!
12-
</p>
11+
<h2>Welcome @_me.DisplayName!</h2>
12+
<p>
13+
You have a grant total of @_totalPlaylistCount playlists!
14+
</p>
15+
<p>Playlists</p>
16+
17+
@foreach (var _item in _playlists.Items)
18+
{
19+
20+
<p @ref=reference style="cursor:pointer" @onclick="@(e=>PlaylistClicked(@_item.Id))">@_item.Name </p>
21+
22+
23+
{
24+
25+
<ol @ref=reference style="display:none" id="@_item.Id" type="1">
26+
@foreach (var _track in tracks)
27+
{
28+
@if (_track.id == _item.Id)
29+
{
30+
string open = string.Empty;
31+
if (@_track.track.ExternalUrls.Count > 0)
32+
{
33+
open = @_track.track.ExternalUrls.First().Value ;
34+
}
35+
<li style="cursor:pointer" @onclick="@(e=>NavigateToNewTab(open))"> @_track.track.Name : @_track.track.Artists.First().Name</li>
36+
}
37+
}
38+
</ol>
39+
40+
}
41+
}
42+
1343
}
1444
else
1545
{
16-
<span>To get started:</span>
17-
<a href="@_authUri">
18-
Login via Spotify
19-
</a>
46+
<span>To get started:</span>
47+
<a href="@_authUri">
48+
Login via Spotify
49+
</a>
2050
}
2151

52+
53+
<hr />
54+
2255
@code {
23-
private Uri _authUri;
2456

25-
private bool _isAuthed;
57+
ElementReference reference;
58+
59+
private struct tracklist
60+
{
61+
62+
public string id;
63+
public string playlistname;
64+
public FullTrack track;
65+
}
66+
67+
private Uri _authUri;
68+
69+
private bool _isAuthed;
70+
71+
private PrivateUser _me;
72+
73+
private Paging<SimplePlaylist> _playlists;
74+
75+
private int? _totalPlaylistCount;
76+
77+
private SpotifyClient spotify;
78+
79+
private List<tracklist> tracks = new List<tracklist>();
80+
81+
bool showModal = false;
2682

27-
private PrivateUser _me;
83+
void ModalShow() => showModal = true;
84+
void ModalCancel() => showModal = false;
85+
void ModalOk()
86+
{
87+
Console.WriteLine("Modal ok");
88+
showModal = false;
89+
}
90+
91+
private async Task PlaylistClicked(string playlistid)
92+
{
93+
await JSRuntime.InvokeVoidAsync("window.exampleJsFunctions.displayElement", playlistid);
94+
}
95+
96+
public async Task NavigateToNewTab(string url)
97+
{
98+
99+
await JSRuntime.InvokeAsync<object>("open", url, "_blank");
100+
}
28101

29-
private int? _totalPlaylistCount;
30102

31-
protected override void OnInitialized()
32-
{
33-
var clientId = Environment.GetEnvironmentVariable("SPOTIFY_CLIENT_ID");
34-
var baseUri = navManager.ToAbsoluteUri(navManager.BaseUri);
35103

36-
var loginRequest = new LoginRequest(baseUri, clientId, LoginRequest.ResponseType.Token)
104+
protected override void OnInitialized()
37105
{
38-
Scope = new[] { Scopes.PlaylistReadPrivate, Scopes.PlaylistReadCollaborative }
39-
};
40-
_authUri = loginRequest.ToUri();
41-
}
42-
43-
protected override async Task OnInitializedAsync()
44-
{
45-
var uri = new Uri(navManager.Uri);
46-
var maxLen = Math.Min(1, uri.Fragment.Length);
47-
Dictionary<string, string> fragmentParams = uri.Fragment.Substring(maxLen)?
48-
.Split("&", StringSplitOptions.RemoveEmptyEntries)?
49-
.Select(param => param.Split("=", StringSplitOptions.RemoveEmptyEntries))?
50-
.ToDictionary(param => param[0], param => param[1]) ?? new Dictionary<string, string>();
51-
52-
_isAuthed = fragmentParams.ContainsKey("access_token");
53-
if (_isAuthed)
106+
var clientId = Environment.GetEnvironmentVariable("SPOTIFY_CLIENT_ID");
107+
var baseUri = navManager.ToAbsoluteUri(navManager.BaseUri);
108+
109+
var loginRequest = new LoginRequest(baseUri, clientId, LoginRequest.ResponseType.Token)
110+
{
111+
Scope = new[] { Scopes.PlaylistReadPrivate, Scopes.PlaylistReadCollaborative }
112+
};
113+
_authUri = loginRequest.ToUri();
114+
}
115+
116+
protected override async Task OnInitializedAsync()
54117
{
55-
var spotify = new SpotifyClient(fragmentParams["access_token"]);
118+
int offset = 0;
119+
var uri = new Uri(navManager.Uri);
120+
var maxLen = Math.Min(1, uri.Fragment.Length);
121+
Dictionary<string, string> fragmentParams = uri.Fragment.Substring(maxLen)?
122+
.Split("&", StringSplitOptions.RemoveEmptyEntries)?
123+
.Select(param => param.Split("=", StringSplitOptions.RemoveEmptyEntries))?
124+
.ToDictionary(param => param[0], param => param[1]) ?? new Dictionary<string, string>();
125+
126+
_isAuthed = fragmentParams.ContainsKey("access_token");
127+
if (_isAuthed)
128+
{
129+
spotify = new SpotifyClient(fragmentParams["access_token"]);
130+
131+
_me = await spotify.UserProfile.Current();
132+
_totalPlaylistCount = (await spotify.Playlists.CurrentUsers()).Total;
133+
134+
_playlists = await spotify.Playlists.CurrentUsers(new PlaylistCurrentUsersRequest
135+
{
136+
Limit = _totalPlaylistCount,
137+
Offset = 0
138+
});
139+
140+
foreach (var _playlist in _playlists.Items)
141+
142+
{
143+
offset = 0;
144+
145+
var playlisttracks = await spotify.Playlists.GetItems(_playlist.Id, new PlaylistGetItemsRequest
146+
{
147+
Offset = offset,
148+
Limit = 100
149+
});
150+
151+
var nexturl = playlisttracks.Next;
152+
153+
while (nexturl != null)
154+
{
155+
offset += 100;
156+
//Get next list
157+
var nextitems = await spotify.Playlists.GetItems(_playlist.Id, new PlaylistGetItemsRequest
158+
{
159+
Offset = offset,
160+
Limit = 100
161+
});
162+
163+
playlisttracks.Items.AddRange(nextitems.Items);
164+
nexturl = nextitems.Next;
165+
166+
167+
}
168+
169+
foreach (PlaylistTrack<IPlayableItem> _track in playlisttracks.Items)
170+
{
171+
172+
if (_track.Track is FullTrack track)
173+
{
174+
175+
tracks.Add(new tracklist
176+
{
177+
id = _playlist.Id,
178+
playlistname = _playlist.Name,
179+
track = track
180+
}
181+
182+
);
183+
184+
}
185+
186+
187+
}
188+
}
189+
190+
191+
192+
193+
194+
195+
196+
56197

57-
_me = await spotify.UserProfile.Current();
58-
_totalPlaylistCount = (await spotify.Playlists.CurrentUsers()).Total;
198+
}
59199
}
60-
}
61200
}

‎SpotifyAPI.Web.Examples/Example.ASPBlazor/Pages/_Host.cshtml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,5 +32,6 @@
3232
</div>
3333

3434
<script src="_framework/blazor.server.js"></script>
35+
<script src="scripts/Toggle.js"></script>
3536
</body>
3637
</html>

‎SpotifyAPI.Web.Examples/Example.ASPBlazor/Shared/NavMenu.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="top-row pl-4 navbar navbar-dark">
2-
<a class="navbar-brand" href="">Example.ASPBlazor</a>
2+
<a class="navbar-brand" href="">Spotify Playlists</a>
33
<button class="navbar-toggler" @onclick="ToggleNavMenu">
44
<span class="navbar-toggler-icon"></span>
55
</button>
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
window.exampleJsFunctions = {
2+
showPrompt: function (element) {
3+
return prompt(text, 'Type your name here');
4+
},
5+
displayWelcome: function (welcomeMessage) {
6+
document.getElementById('welcome').innerText = welcomeMessage;
7+
},
8+
returnArrayAsyncJs: function () {
9+
DotNet.invokeMethodAsync('BlazorWebAssemblySample', 'ReturnArrayAsync')
10+
.then(data => {
11+
data.push(4);
12+
console.log(data);
13+
});
14+
},
15+
sayHello: function (dotnetHelper) {
16+
return dotnetHelper.invokeMethodAsync('SayHello')
17+
.then(r => console.log(r));
18+
},
19+
20+
displayElement: function (id) {
21+
if (document.getElementById(id).style.display == "block") {
22+
document.getElementById(id).style.display = "none";
23+
}
24+
else {
25+
document.getElementById(id).style.display = "block";
26+
}
27+
}
28+
29+
30+
};

‎SpotifyAPI.Web/.DS_Store‎

6 KB
Binary file not shown.

0 commit comments

Comments
 (0)