forked from rpared/spotifyAPP
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
25d661d
commit 47fe644
Showing
7 changed files
with
688 additions
and
327 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,113 +1,240 @@ | ||
<!DOCTYPE html> | ||
<!-- /***************************************************************************** | ||
* ITC5202 Final Project | ||
* We declare that this assignment is our own work in accordance with Humber Academic | ||
* Policy. | ||
* | ||
* Group: Ryan Phil Fermin Ancheta, Jercy Tze Sie Tiong, Roger Paredes Date: 12/07/2023 | ||
* | ||
ITC5202: XML and JavaScript | ||
*****************************************************************************/ --> | ||
<html lang="en" data-bs-theme="dark"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Cool Spotify APP</title> | ||
<!-- Bootstrap CSS --> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> | ||
<link rel="stylesheet" href="style.css"><!-- not using a css file for now, but it would be best if we add further styles so we can work simultaneusly --> | ||
<style> | ||
.left-frame { | ||
min-height: 100vh; | ||
border-right: 1px solid rgb(27, 88, 255); | ||
} | ||
|
||
.right-frame { | ||
min-height: 100vh; | ||
background-color: #464646; | ||
} | ||
|
||
h1{ | ||
font-weight: bold; | ||
} | ||
|
||
</style> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
<link rel="stylesheet" href="style.css"> | ||
|
||
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> | ||
<script src="endpointsRoger.js" defer type="module"></script> | ||
<script src="endpointsRyanAndJercy.js" defer type="module"></script> | ||
</head> | ||
<body> | ||
|
||
<div class="container-fluid"> | ||
<div class="row"> | ||
<!-- Left Frame for Buttons --> | ||
<div class="col-md-3 left-frame"> | ||
<h1 class="mt-4 mb-5">Cool Spotify APP</h1> | ||
|
||
<!-- Buttons to get endpoints --> | ||
|
||
<div class="input-group"> | ||
<input type="text" class="form-control" id="search-input" placeholder="Artist, album, or track"> | ||
|
||
<select id="searchType" name="searchType" aria-labelledby="dropdownMenuButtonDark"> | ||
<option value="artist">Artist</option> | ||
<option value="album">Album</option> | ||
<option value="track">Song</option> | ||
</select> | ||
<button class="btn btn-primary" id="buttonSearch">Search</button> | ||
</div> | ||
<hr> | ||
|
||
<button id="buttonUser" class="btn btn-primary">Display User</button> | ||
<br><br> | ||
<button id="buttonFollowers" class="btn btn-primary">Get Artists Followed</button> | ||
<br><br> | ||
<button id="buttonFav" class="btn btn-primary">Get Favorite Artists</button> | ||
<br><br> | ||
<button id="buttonPlaylist" class="btn btn-primary">Get Playlists</button> | ||
<br><br> | ||
|
||
|
||
|
||
<div class="play-group"> | ||
<!-- Replace the text content with an image tag for the play button --> | ||
<button class="btn btn-success mb-3" id="buttonPlay"> | ||
<img src="p.png" alt="Play" width="25px" /> | ||
</button> | ||
|
||
<!-- Replace the text content with an image tag for the pause button --> | ||
<button class="btn btn-success mb-3" id="buttonPause"> | ||
<img src="pa.png" alt="Pause" width="25px"/> | ||
</button> | ||
|
||
<!-- Replace the text content with an image tag for the seek button --> | ||
<button class="btn btn-success mb-3" id="buttonSeek"> | ||
<img src="ten.png" alt="Seek" width="25px"/> | ||
</button> | ||
</div> | ||
|
||
|
||
<br><br> | ||
<button id="buttonDevelopers" class="btn btn-primary">Get Developers</button> | ||
|
||
</div> | ||
<div class="container-fluid"> | ||
<div class="row"> | ||
<div class="col-md-3 left-frame"> | ||
<h1 class="mt-4 mb-5">Cool Spotify APP</h1> | ||
|
||
<div class="home-button" id="homeButton"> | ||
<img src="home.png" alt="Home"> | ||
<span>Home</span> | ||
</div> | ||
<hr> | ||
|
||
<!-- Right Frame for Results --> | ||
<div class="col-md-9 right-frame"> | ||
<div class="input-group"> | ||
<input type="text" class="form-control" id="search-input" placeholder="Artist, album, or track"> | ||
<select id="searchType" name="searchType" class="form-select"> | ||
<option value="artist">Artist</option> | ||
<option value="album">Album</option> | ||
<option value="track">Song</option> | ||
</select> | ||
<button class="btn btn-primary" id="buttonSearch">Search</button> | ||
</div> | ||
<div class="library-placeholder" id="libraryPlaceholder"></div> | ||
<hr> | ||
</div> | ||
|
||
<div class="col-md-9 right-frame"> | ||
<div class="container mt-5"> | ||
<div class="user-greeting"> | ||
<h1 id="greeting"></h1> | ||
<div id="buttonUser"><img src="user_icon.png" id="userImage" alt="User Image"></div> | ||
</div> | ||
|
||
<div class="container mt-5"> | ||
<h2>Endpoint Results:</h2> | ||
<div id="result"> | ||
<div id="result2"></div> | ||
<h2>Popular Artists</h2> | ||
<div id="popular-artists" class="artist-section"></div> | ||
<h2>Followed Artists</h2> | ||
<div id="followed-artists" class="artist-section"></div> | ||
</div> | ||
|
||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="player-controls"> | ||
<button class="btn btn-success" id="buttonPlay"> | ||
<img src="p.png" id="play" alt="Play"> | ||
</button> | ||
<button class="btn btn-success" id="buttonPause"> | ||
<img src="pa.png" id="pause" alt="Pause"> | ||
</button> | ||
<button class="btn btn-success" id="buttonSeek"> | ||
<img src="ten.png" id="seek" alt="Seek"> | ||
</button> | ||
</div> | ||
|
||
<script> | ||
function getAccessToken() { | ||
const hash = window.location.hash.substring(1); | ||
const params = new URLSearchParams(hash); | ||
return params.get('access_token'); | ||
} | ||
|
||
$(document).ready(function () { | ||
const accessToken = getAccessToken(); | ||
if (!accessToken) { | ||
alert('Access token not found. Please log in again.'); | ||
window.location.href = 'index.html'; // Redirect to your login page | ||
return; | ||
} | ||
|
||
function fetchUserProfile() { | ||
let url = 'https://api.spotify.com/v1/me'; | ||
$.ajax({ | ||
url: url, | ||
headers: { | ||
Authorization: "Bearer " + accessToken, | ||
}, | ||
success: function (result) { | ||
console.log(result); | ||
if (result.images && result.images.length > 0) { | ||
let userImageUrl = result.images[0].url; | ||
$('#userImage').attr('src', userImageUrl); | ||
} | ||
$('#greeting').text(`Hi, ${result.display_name}`); | ||
}, | ||
error: function () { | ||
alert('Failed to fetch user profile!'); | ||
} | ||
}); | ||
} | ||
|
||
function fetchUserLibrary() { | ||
let url = 'https://api.spotify.com/v1/me/playlists'; | ||
let container = $('#libraryPlaceholder'); | ||
container.empty(); // Clear previous results | ||
|
||
function getPlaylists(url) { | ||
$.ajax({ | ||
url: url, | ||
headers: { | ||
Authorization: "Bearer " + accessToken, | ||
}, | ||
success: function (result) { | ||
console.log(result); | ||
if (result.items && result.items.length > 0) { | ||
result.items.forEach(function (playlist) { | ||
let playlistName = playlist.name; | ||
let playlistImageUrl = playlist.images && playlist.images.length > 0 ? playlist.images[0].url : ''; | ||
let playlistElement = ` | ||
<div class="playlist-item"> | ||
<img src="${playlistImageUrl}" alt="${playlistName}" width="64" height="64"> | ||
<p>${playlistName}</p> | ||
</div> | ||
`; | ||
container.append(playlistElement); | ||
}); | ||
|
||
// Check if there are more playlists to fetch | ||
if (result.next) { | ||
getPlaylists(result.next); | ||
} | ||
} | ||
}, | ||
error: function () { | ||
alert('Failed to fetch user library!'); | ||
} | ||
}); | ||
} | ||
|
||
getPlaylists(url); | ||
} | ||
|
||
function fetchFollowedArtists() { | ||
let url = 'https://api.spotify.com/v1/me/following?type=artist'; | ||
let container = $('#followed-artists'); | ||
container.empty(); // Clear previous results | ||
|
||
<!-- Bootstrap JS and Popper.js --> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> | ||
function getArtists(url) { | ||
$.ajax({ | ||
url: url, | ||
headers: { | ||
Authorization: "Bearer " + accessToken, | ||
}, | ||
success: function (result) { | ||
console.log(result); | ||
if (result.artists && result.artists.items && result.artists.items.length > 0) { | ||
result.artists.items.forEach(function (artist) { | ||
let artistName = artist.name; | ||
let artistImageUrl = artist.images && artist.images.length > 0 ? artist.images[0].url : ''; | ||
let artistElement = ` | ||
<div class="artist-card"> | ||
<img src="${artistImageUrl}" alt="${artistName}"> | ||
<p>${artistName}</p> | ||
<p>Followers: ${artist.followers.total}</p> | ||
<p>Genres: ${artist.genres.join(', ')}</p> | ||
</div> | ||
`; | ||
container.append(artistElement); | ||
}); | ||
|
||
// Check if there are more artists to fetch | ||
if (result.artists.next) { | ||
getArtists(result.artists.next); | ||
} | ||
} | ||
}, | ||
error: function () { | ||
alert('Failed to fetch followed artists!'); | ||
} | ||
}); | ||
} | ||
|
||
getArtists(url); | ||
} | ||
|
||
function fetchFavoriteArtists() { | ||
let url = 'https://api.spotify.com/v1/me/top/artists'; | ||
let container = $('#popular-artists'); | ||
container.empty(); // Clear previous results | ||
|
||
$.ajax({ | ||
url: url, | ||
headers: { | ||
Authorization: "Bearer " + accessToken, | ||
}, | ||
success: function (result) { | ||
console.log(result); | ||
if (result.items && result.items.length > 0) { | ||
result.items.forEach(function (artist) { | ||
let artistName = artist.name; | ||
let artistImageUrl = artist.images && artist.images.length > 0 ? artist.images[0].url : ''; | ||
let artistElement = ` | ||
<div class="artist-card"> | ||
<img src="${artistImageUrl}" alt="${artistName}"> | ||
<p>${artistName}</p> | ||
<p>Followers: ${artist.followers.total}</p> | ||
<p>Genres: ${artist.genres.join(', ')}</p> | ||
</div> | ||
`; | ||
container.append(artistElement); | ||
}); | ||
} | ||
}, | ||
error: function () { | ||
alert('Failed to fetch favorite artists!'); | ||
} | ||
}); | ||
} | ||
|
||
fetchUserProfile(); | ||
fetchUserLibrary(); | ||
fetchFollowedArtists(); | ||
fetchFavoriteArtists(); | ||
|
||
$('#homeButton').on('click', function () { | ||
location.reload(); // Refresh the page | ||
}); | ||
}); | ||
|
||
</script> | ||
|
||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.