Skip to content

Commit

Permalink
Add artist popularity display and add filter list drag hint
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lioncat6
Lioncat6 committed Jan 19, 2025
1 parent 51b25e2 commit ac04c39
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 132 deletions.
190 changes: 78 additions & 112 deletions artist/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SAMBL</title>
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/artist.css" />
<link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg" />
<link rel="icon" type="image/png" href="../assets/images/favicon.png" />
</head>
<body id="body">
<div id="main">
<embed type="text/html" src="../header.html" />
<div id="err"></div>
<div id="artistContainer">
<div id="artistImageContainer"></div>
<div id="artistTextContainer">
<div class="nameContainer">
<h1 id="artistName"></h1>
<div class="spURLContainer">
<a id="spURL" target="_blank"
><img
alt="Spotify Icon"
class="spIcon"
src="../assets/images/Spotify_icon.svg"
/></a>
</div>
<div class="mbURLContainer">
<a id="mbURL" target="_blank"
><img
alt="MusicBrainz Icon"
class="mbIcon"
src="../assets/images/MusicBrainz_Logo.svg"
/></a>
</div>
</div>
<div id="artistFollowerCount"></div>
<div id="artistGenres"></div>
</div>
</div>
<div id="contentContainer">
<div id="loadingContainer"></div>
<div id="loadingText"></div>
<div id="albumContainer">
<div id="searchContainer">
<input
id="listSearch"
onkeyup="searchList()"
onkeydown="searchList()"
placeholder="Search..."
/><button onclick="filter()" id="filterSearch">
<div id="fbText">Filter</div>
</button>
</div>
<div id="albumList"></div>
<div id="statusText"></div>
<div id="filterList">
<h3 id="filterListHeader">Filter List</h3>
<form id="filterBoxes">
<div class="checkbox-wrapper">
<input
type="checkbox"
id="showGreen"
name="showGreen"
class="substituted"
/>
<label for="showGreen" id="greenLabel"> Show Green</label><br />
</div>
<div class="checkbox-wrapper">
<input
type="checkbox"
id="showOrange"
name="showOrange"
class="substituted"
/>
<label for="showOrange" id="orangeLabel"> Show Orange</label><br />
</div>
<div class="checkbox-wrapper">
<input
type="checkbox"
id="showRed"
name="showRed"
class="substituted"
/>
<label for="showRed" id="redLabel"> Show Red</label><br /><br />
</div>
<div class="checkbox-wrapper">
<input
type="checkbox"
id="hideVarious"
name="hideVarious"
class="substituted"
/>
<label for="hideVarious" id="variousLabel"> Ignore Various Artists</label><br />
</div>
<div class="checkbox-wrapper">
<input
type="checkbox"
id="missingUPC"
name="missingUPC"
class="substituted"
/>
<label for="missingUPC" id="missingLabel"> Only Missing UPCs</label><br /><br />
</div>
<button id="applyfilter" type="button" onclick="applyFilter()">Apply</button>
</form>
</div>
</div>
</div>
</div>
<footer><embed type="text/html" src="../footer.html" /></footer>
<script src="../scripts/artist.js"></script>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SAMBL</title>
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/artist.css" />
<link rel="icon" type="image/svg+xml" href="../assets/images/favicon.svg" />
<link rel="icon" type="image/png" href="../assets/images/favicon.png" />
</head>
<body id="body">
<div id="main">
<embed type="text/html" src="../header.html" />
<div id="err"></div>
<div id="artistContainer">
<div id="artistImageContainer"></div>
<div id="artistTextContainer">
<div class="nameContainer">
<h1 id="artistName"></h1>
<div class="spURLContainer">
<a id="spURL" target="_blank"><img alt="Spotify Icon" class="spIcon" src="../assets/images/Spotify_icon.svg" /></a>
</div>
<div class="mbURLContainer">
<a id="mbURL" target="_blank"><img alt="MusicBrainz Icon" class="mbIcon" src="../assets/images/MusicBrainz_Logo.svg" /></a>
</div>
</div>
<div id="artistFollowerCount"></div>
<div id="artistGenres"></div>
<div id="artistPopularityContainer">
<label for="artistPopularity" id="artistPopularity">Popularity:</label>
<div id="artistPopularityBar">
<div id="artistPopularityFill"></div>
</div>
</div>
</div>
</div>
<div id="contentContainer">
<div id="loadingContainer"></div>
<div id="loadingText"></div>
<div id="albumContainer">
<div id="searchContainer">
<input id="listSearch" onkeyup="searchList()" onkeydown="searchList()" placeholder="Search..." /><button onclick="filter()" id="filterSearch">
<div id="fbText">Filter</div>
</button>
</div>
<div id="albumList"></div>
<div id="statusText"></div>
<div id="filterList">
<h3 id="filterListHeader">Filter List <i class="fa-solid fa-up-down-left-right moveIcon"></i></h3>
<form id="filterBoxes">
<div class="checkbox-wrapper">
<input type="checkbox" id="showGreen" name="showGreen" class="substituted" />
<label for="showGreen" id="greenLabel"> Show Green</label><br />
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="showOrange" name="showOrange" class="substituted" />
<label for="showOrange" id="orangeLabel"> Show Orange</label><br />
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="showRed" name="showRed" class="substituted" />
<label for="showRed" id="redLabel"> Show Red</label><br /><br />
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="hideVarious" name="hideVarious" class="substituted" />
<label for="hideVarious" id="variousLabel"> Ignore Various Artists</label><br />
</div>
<div class="checkbox-wrapper">
<input type="checkbox" id="missingUPC" name="missingUPC" class="substituted" />
<label for="missingUPC" id="missingLabel"> Only Missing UPCs</label><br /><br />
</div>
<button id="applyfilter" type="button" onclick="applyFilter()">Apply</button>
</form>
</div>
</div>
</div>
</div>
<footer><embed type="text/html" src="../footer.html" /></footer>
<script src="../scripts/artist.js"></script>
</body>
</html>
67 changes: 50 additions & 17 deletions css/artist.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@

.spURLContainer {
display: flex;
flex-direction: row;
flex-direction: row;
padding: 1.2vh 0 0 2%;
margin-bottom: 0;
}

.spURLContainer a {
padding: 0 3px 0 0;
padding: 0 3px 0 0;
}

.mbURLContainer {
Expand Down Expand Up @@ -178,13 +178,13 @@

.albumInfo {
color: lightgray;
text-align: left;
font-size: small;
font-weight: normal;
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
text-align: left;
font-size: small;
font-weight: normal;
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
}

.albumInfo div:first-child {
Expand Down Expand Up @@ -337,7 +337,7 @@
#filterListHeader {
cursor: move;
margin: 0;
padding: 19px;
padding: 19px;
}

/* Checkbox styling */
Expand Down Expand Up @@ -451,20 +451,53 @@ label i {

.upcIcon {
margin-left: 5px;
width: 27px;
cursor: help;
width: 27px;
cursor: help;
}

.isrcIcon {
margin-left: 5px;
width: 36px;
transform: translateY(3px);
cursor: help;
width: 36px;
transform: translateY(3px);
cursor: help;
}


@media (max-height: 725px) {
#filterList {
#filterList {
top: 30% !important;
}
}

#artistPopularityBar {
width: 50%;
margin: auto;
display: flex;
align-items: start;
border: 1px solid darkgray;
border-radius: 10px;
}

#artistPopularityFill {
height: 8px;
width: 0;
border-radius: 5px;
background: gold;
border-right: aliceblue;
}

#artistPopularity {
font-size: smaller;
color: lightgrey;
}

.moveIcon {
color: lightgray;
position: absolute;
right: 15px;
top: 15px;
display: none;
}

#filterList:hover .moveIcon {
display:block;
}
13 changes: 10 additions & 3 deletions scripts/artist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,15 @@ async function fetchSpotifyArtists(artists) {
}

if (mostPopularArtist) {
updateArtistInfo(mostPopularArtist, allArtistNames, allArtistUrls, totalFollowers);
updateArtistInfo(mostPopularArtist, allArtistNames, allArtistUrls, totalFollowers, true);
} else {
updateArtistInfo(mostPopularArtistWithOutImage, allArtistNames, allArtistUrls, totalFollowers);
updateArtistInfo(mostPopularArtistWithOutImage, allArtistNames, allArtistUrls, totalFollowers, false);
//dispErr("No valid artist data found with images");
}
downloadMusicBrainzAlbums();
}

function updateArtistInfo(artist, allNames, allUrls, totalFollowers) {
function updateArtistInfo(artist, allNames, allUrls, totalFollowers, mostPopular) {
var spImgUrl = "";
if (artist["images"].length > 0) {
spImgUrl = artist["images"][0]["url"];
Expand All @@ -66,6 +66,13 @@ function updateArtistInfo(artist, allNames, allUrls, totalFollowers) {
const spGenres = artist["genres"];
const spGenresString = spGenres.join(", ");
const spPopularity = artist["popularity"];

if (mostPopular){
const popularityBar = document.getElementById('artistPopularityFill');
const popularityLabel = document.getElementById('artistPopularity');
popularityBar.style.width = spPopularity + '%';
}


document.getElementById("artistImageContainer").innerHTML = `<a href="${spImgUrl}" target="_blank"><img src="${spImgUrl}"></a>`;
document.getElementById("artistName").innerHTML = spArtistName;
Expand Down

0 comments on commit ac04c39

Please sign in to comment.