improved UI
This commit is contained in:
cool.gitter.choco
@@ -1,418 +1,432 @@
|
||||
/* Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #121212, #1e1e1e);
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Main App Container */
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Album Header */
|
||||
#album-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#album-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
#album-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
#album-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#album-name {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(90deg, #1db954, #17a44b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#album-artist,
|
||||
#album-stats {
|
||||
font-size: 1.1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#album-copyright {
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Playlist Header */
|
||||
#playlist-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#playlist-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
#playlist-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
#playlist-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#playlist-name {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(90deg, #1db954, #17a44b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#playlist-owner,
|
||||
#playlist-stats,
|
||||
#playlist-description {
|
||||
font-size: 1.1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Tracks Container */
|
||||
#tracks-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#tracks-container h2 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Tracks List */
|
||||
#tracks-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Individual Track Styling */
|
||||
.track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #181818;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s ease;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.track:hover {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.track-number {
|
||||
width: 30px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.track-name {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.track-album {
|
||||
max-width: 200px;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.track-duration {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Loading and Error States */
|
||||
.loading,
|
||||
.error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Unified Download Button Base Style */
|
||||
.download-btn {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
}
|
||||
|
||||
.download-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Circular Variant for Compact Areas (e.g., in a queue list) */
|
||||
.download-btn--circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.download-btn--circle::before {
|
||||
content: "↓";
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Icon next to text */
|
||||
.download-btn .btn-icon {
|
||||
margin-right: 0.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Back Button Styling */
|
||||
.back-btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.back-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Download Queue Toggle Button */
|
||||
.queue-toggle {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.queue-toggle:hover {
|
||||
background: #1ed760;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.queue-toggle:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
|
||||
/* Medium Devices (Tablets) */
|
||||
@media (max-width: 768px) {
|
||||
#album-header, #playlist-header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #121212, #1e1e1e);
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Main App Container */
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Album Header */
|
||||
#album-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#album-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
#album-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
#album-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#album-name {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(90deg, #1db954, #17a44b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#album-artist,
|
||||
#album-stats {
|
||||
font-size: 1.1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#album-copyright {
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Playlist Header */
|
||||
#playlist-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#playlist-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
#playlist-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
#playlist-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#playlist-name {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(90deg, #1db954, #17a44b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#playlist-owner,
|
||||
#playlist-stats,
|
||||
#playlist-description {
|
||||
font-size: 1.1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Tracks Container */
|
||||
#tracks-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#tracks-container h2 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Tracks List */
|
||||
#tracks-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Individual Track Styling */
|
||||
.track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #181818;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s ease;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.track:hover {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.track-number {
|
||||
width: 30px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.track-name {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.track-album {
|
||||
max-width: 200px;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.track-duration {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Loading and Error States */
|
||||
.loading,
|
||||
.error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Unified Download Button Base Style */
|
||||
.download-btn {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
}
|
||||
|
||||
.download-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Circular Variant for Compact Areas (e.g., in a queue list) */
|
||||
.download-btn--circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.download-btn--circle::before {
|
||||
content: "↓";
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Icon next to text */
|
||||
.download-btn .btn-icon {
|
||||
margin-right: 0.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Home Button Styling */
|
||||
.home-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-btn img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: invert(1); /* Makes the SVG icon appear white */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.home-btn:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.home-btn:active img {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Download Queue Toggle Button */
|
||||
.queue-toggle {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.queue-toggle:hover {
|
||||
background: #1ed760;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.queue-toggle:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
|
||||
/* Medium Devices (Tablets) */
|
||||
@media (max-width: 768px) {
|
||||
#album-header, #playlist-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#album-image, #playlist-image {
|
||||
}
|
||||
|
||||
#album-image, #playlist-image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#album-name, #playlist-name {
|
||||
}
|
||||
|
||||
#album-name, #playlist-name {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#album-artist,
|
||||
#album-stats,
|
||||
#playlist-owner,
|
||||
#playlist-stats,
|
||||
#playlist-description {
|
||||
}
|
||||
|
||||
#album-artist,
|
||||
#album-stats,
|
||||
#playlist-owner,
|
||||
#playlist-stats,
|
||||
#playlist-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.track {
|
||||
}
|
||||
|
||||
.track {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Devices (Mobile Phones) */
|
||||
@media (max-width: 480px) {
|
||||
#app {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Small Devices (Mobile Phones) */
|
||||
@media (max-width: 480px) {
|
||||
#app {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#album-name, #playlist-name {
|
||||
#album-name, #playlist-name {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
#album-artist,
|
||||
#album-stats,
|
||||
#album-copyright,
|
||||
#playlist-owner,
|
||||
#playlist-stats,
|
||||
#playlist-description {
|
||||
}
|
||||
|
||||
#album-artist,
|
||||
#album-stats,
|
||||
#album-copyright,
|
||||
#playlist-owner,
|
||||
#playlist-stats,
|
||||
#playlist-description {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.track {
|
||||
}
|
||||
|
||||
.track {
|
||||
padding: 0.8rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.track-number {
|
||||
}
|
||||
|
||||
.track-number {
|
||||
font-size: 0.9rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
}
|
||||
|
||||
.track-info {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent anchor links from appearing all blue */
|
||||
}
|
||||
|
||||
/* Prevent anchor links from appearing all blue */
|
||||
a {
|
||||
color: inherit; /* Inherit color from the parent */
|
||||
text-decoration: none; /* Remove default underline */
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1db954; /* Change to a themed green on hover/focus */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
color: inherit; /* Inherit color from the parent */
|
||||
text-decoration: none; /* Remove default underline */
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1db954; /* Change to a themed green on hover/focus */
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* Override the default pseudo-element for the circular download button */
|
||||
.download-btn--circle::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Style the icon inside the circular download button */
|
||||
.download-btn--circle img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: brightness(0) invert(1); /* ensures the icon appears white */
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,368 +1,343 @@
|
||||
/* Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Main App Container */
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Artist Header */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #121212;
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Main App Container */
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Artist Header */
|
||||
#artist-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, rgba(0,0,0,0.5), transparent);
|
||||
}
|
||||
|
||||
#artist-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#artist-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#artist-name {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#artist-stats {
|
||||
font-size: 1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Albums Container */
|
||||
#albums-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#albums-container h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Album Groups */
|
||||
.album-group {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.album-group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.album-group-header h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.albums-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Track Card (for Albums) */
|
||||
.track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #181818;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s ease;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.track:hover {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.track-number {
|
||||
width: 30px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.track-name {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.track-album {
|
||||
max-width: 200px;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.track-duration {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Loading and Error States */
|
||||
.loading,
|
||||
.error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Unified Download Button Base Style */
|
||||
.download-btn {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
}
|
||||
|
||||
.download-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Circular Variant for Compact Areas (e.g. album download buttons) */
|
||||
.download-btn--circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0; /* Hide any text */
|
||||
background-color: #1db954;
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
/* Image inside circular download button */
|
||||
.download-btn--circle img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: brightness(0) invert(1);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.download-btn--circle:hover {
|
||||
background-color: #17a44b;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.download-btn--circle:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Home Button Styling */
|
||||
.home-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.home-btn img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: invert(1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.home-btn:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.home-btn:active img {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
|
||||
/* Medium Devices (Tablets) */
|
||||
@media (max-width: 768px) {
|
||||
#artist-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap; /* Allow wrapping on narrow screens */
|
||||
background: linear-gradient(135deg, rgba(0,0,0,0.5), transparent);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#artist-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#artist-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.track {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Devices (Mobile Phones) */
|
||||
@media (max-width: 480px) {
|
||||
#app {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#artist-name {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
#artist-stats {
|
||||
font-size: 1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Albums Container */
|
||||
#albums-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#albums-container h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Album Groups */
|
||||
.album-group {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.album-group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.album-group-header h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 0;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.albums-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Track Card (for Albums) */
|
||||
/* Adjust album card layout */
|
||||
.track {
|
||||
display: flex;
|
||||
padding: 0.8rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #181818;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s ease;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.track:hover {
|
||||
background: #2a2a2a;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.track-number {
|
||||
width: 30px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.9rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.track-name {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
|
||||
.track-album {
|
||||
max-width: 200px;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
font-size: 0.9rem;
|
||||
color: #b3b3b3;
|
||||
margin-left: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Loading and Error States */
|
||||
.loading,
|
||||
.error {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Unified Download Button Base Style */
|
||||
.download-btn {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
}
|
||||
|
||||
.download-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Circular Variant for Compact Areas */
|
||||
.download-btn--circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.download-btn--circle::before {
|
||||
content: "↓";
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Back Button Styling */
|
||||
.back-btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.back-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Download Queue Toggle Button */
|
||||
.queue-toggle {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.queue-toggle:hover {
|
||||
background: #1ed760;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.queue-toggle:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
|
||||
/* Medium Devices (Tablets) */
|
||||
@media (max-width: 768px) {
|
||||
#artist-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#artist-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.track {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.album-group-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.album-group-header h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small Devices (Mobile Phones) */
|
||||
@media (max-width: 480px) {
|
||||
#app {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#artist-name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Adjust track layout to vertical & centered */
|
||||
.track {
|
||||
padding: 0.8rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.track-number {
|
||||
font-size: 0.9rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.track-album,
|
||||
.track-duration {
|
||||
margin-left: 0;
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Adjust album-group header layout */
|
||||
.album-group-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent anchor links from appearing all blue */
|
||||
}
|
||||
|
||||
/* Prevent anchor links from appearing blue */
|
||||
a {
|
||||
color: inherit; /* Inherit color from the parent */
|
||||
text-decoration: none; /* Remove default underline */
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1db954; /* Change to a themed green on hover/focus */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1db954;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@@ -39,31 +39,81 @@
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
/* Base styles for View buttons */
|
||||
.view-btn {
|
||||
background-color: #4CAF50; /* Same green tone as other buttons */
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 4px 8px; /* Smaller padding than the download button */
|
||||
margin: 4px 4px 4px 8px; /* Adjust margins to keep spacing neat */
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px; /* Smaller font size */
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
/* Container for Title and Buttons */
|
||||
.title-and-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 1rem; /* Extra right padding so buttons don't touch the edge */
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
.view-btn:hover {
|
||||
background-color: #45a049;
|
||||
/* Container for the buttons next to the title */
|
||||
.title-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Small Download Button Styles */
|
||||
.download-btn-small {
|
||||
background-color: #1db954; /* White background */
|
||||
border: none;
|
||||
border-radius: 50%; /* Circular shape */
|
||||
padding: 6px; /* Adjust padding for desired size */
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
margin-left: 8px; /* Space between adjacent buttons */
|
||||
}
|
||||
|
||||
.download-btn-small img {
|
||||
width: 20px; /* Slightly bigger icon */
|
||||
height: 20px;
|
||||
filter: brightness(0) invert(1); /* Makes the icon white */
|
||||
}
|
||||
|
||||
.download-btn-small:hover {
|
||||
background-color: #1db954b4; /* Light gray on hover */
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Focus outline for accessibility */
|
||||
.view-btn:focus {
|
||||
outline: 2px solid #2e7d32;
|
||||
outline-offset: 2px;
|
||||
/* View Button Styles (unchanged) */
|
||||
.view-btn {
|
||||
background-color: #1db954;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.view-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background-color: #1db954b0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Mobile Compatibility Tweaks */
|
||||
@media (max-width: 600px) {
|
||||
.view-btn,
|
||||
.download-btn-small {
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Mobile compatibility tweaks */
|
||||
@media (max-width: 600px) {
|
||||
.view-btn {
|
||||
|
||||
@@ -1,299 +1,284 @@
|
||||
/* GENERAL STYLING & UTILITIES */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Use a subtle dark gradient for a modern feel */
|
||||
background: linear-gradient(135deg, #121212, #1e1e1e);
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Main container for page content */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* LOADING & ERROR STATES */
|
||||
.loading,
|
||||
.error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* SEARCH HEADER COMPONENT */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
/* Use a subtle dark gradient for a modern feel */
|
||||
background: linear-gradient(135deg, #121212, #1e1e1e);
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Main container for page content */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* LOADING & ERROR STATES */
|
||||
.loading,
|
||||
.error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* SEARCH HEADER COMPONENT */
|
||||
.search-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(18, 18, 18, 1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: #2a2a2a;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.search-type {
|
||||
padding: 12px 15px;
|
||||
background: #2a2a2a;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-type:hover {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
padding: 12px 30px;
|
||||
background-color: #1db954;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background-color: #1ed760;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* RESULTS GRID COMPONENT – Minimalistic Version */
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Each result card now features a clean, flat design with minimal decoration */
|
||||
.result-card {
|
||||
background: #1c1c1c; /* A uniform dark background */
|
||||
border: 1px solid #2a2a2a; /* A subtle border for separation */
|
||||
border-radius: 4px; /* Slight rounding for a modern look */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
background-color: #2a2a2a; /* Lightens the card on hover */
|
||||
transform: translateY(-2px); /* A gentle lift effect */
|
||||
}
|
||||
|
||||
/* Album/Art image wrapper – Maintains aspect ratio and a clean presentation */
|
||||
.album-art-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-art-wrapper::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 100%; /* 1:1 aspect ratio */
|
||||
}
|
||||
|
||||
.album-art {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Text details are kept simple and legible */
|
||||
.track-title {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
padding: 0 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: #aaaaaa;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.track-details {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
color: #bbbbbb;
|
||||
border-top: 1px solid #2a2a2a;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.duration {
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Centered Download Button styling */
|
||||
.download-btn {
|
||||
margin: 0.75rem 1rem 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #1db954;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* ARTIST DOWNLOAD OPTIONS */
|
||||
.artist-download-buttons {
|
||||
border-top: 1px solid #2a2a2a;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.options-toggle {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #b3b3b3;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.options-toggle:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.download-options-container {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.secondary-options {
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.secondary-options.expanded {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
flex: 1;
|
||||
background-color: #2a2a2a;
|
||||
color: #ffffff;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.option-btn:hover {
|
||||
background-color: #3a3a3a;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* MOBILE RESPONSIVENESS */
|
||||
@media (max-width: 600px) {
|
||||
.search-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(18, 18, 18, 1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 20px 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
background: #2a2a2a;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.search-type {
|
||||
padding: 12px 15px;
|
||||
background: #2a2a2a;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-type:hover {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
padding: 12px 30px;
|
||||
background-color: #1db954;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background-color: #1ed760;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* RESULTS GRID COMPONENT */
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Each result card gets a modern look with subtle borders, shadows, and transitions */
|
||||
.result-card {
|
||||
background: #181818;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Album/Art image wrapper maintains aspect ratio */
|
||||
.album-art-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.album-art-wrapper::before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
.album-art {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.album-art:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Result text details */
|
||||
.track-title {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 0.25rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: linear-gradient(90deg, #1db954, #17a44b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
padding: 0 1rem;
|
||||
font-size: 0.95rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Track details (e.g., duration, extra info) */
|
||||
.track-details {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
color: #ccc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.duration {
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Centered Download Button styling */
|
||||
.download-btn {
|
||||
margin: 0.75rem 1rem 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #1db954;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* ARTIST DOWNLOAD OPTIONS */
|
||||
.artist-download-buttons {
|
||||
border-top: 1px solid #2a2a2a;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.options-toggle {
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #b3b3b3;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.options-toggle:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.download-options-container {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.secondary-options {
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.secondary-options.expanded {
|
||||
display: flex;
|
||||
.search-input,
|
||||
.search-type,
|
||||
.search-button {
|
||||
flex: 1 1 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.option-btn {
|
||||
flex: 1;
|
||||
background-color: #2a2a2a;
|
||||
color: #ffffff;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
.search-type,
|
||||
.search-button {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.option-btn:hover {
|
||||
background-color: #3a3a3a;
|
||||
transform: translateY(-1px);
|
||||
.results-grid {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* MOBILE RESPONSIVENESS */
|
||||
@media (max-width: 600px) {
|
||||
.search-header {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.search-type,
|
||||
.search-button {
|
||||
flex: 1 1 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.search-type,
|
||||
.search-button {
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.result-card {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -216,27 +216,36 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Back Button Styling */
|
||||
.back-btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
/* Home Button Styling */
|
||||
.home-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
margin-right: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: #444;
|
||||
.home-btn img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: invert(1); /* Makes the SVG icon appear white */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.back-btn:active {
|
||||
.home-btn:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.home-btn:active img {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Home Icon (SVG) */
|
||||
.home-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Download Queue Toggle Button */
|
||||
.queue-toggle {
|
||||
position: fixed;
|
||||
@@ -343,3 +352,43 @@ a:focus {
|
||||
color: #1db954; /* Change to a themed green on hover/focus */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Override for the circular download button variant */
|
||||
.download-btn--circle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0; /* Hide any text */
|
||||
background-color: #1db954; /* Use the same green as the base button */
|
||||
border: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
/* Remove the default pseudo-element that inserts an arrow */
|
||||
.download-btn--circle::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Style the image inside the circular download button */
|
||||
.download-btn--circle img {
|
||||
width: 20px; /* Control icon size */
|
||||
height: 20px;
|
||||
filter: brightness(0) invert(1); /* Ensure the icon appears white */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hover and active states for the circular download button */
|
||||
.download-btn--circle:hover {
|
||||
background-color: #17a44b;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.download-btn--circle:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
@@ -1,212 +1,262 @@
|
||||
/* Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #121212, #1e1e1e);
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #121212, #1e1e1e);
|
||||
color: #ffffff;
|
||||
min-height: 100vh;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Track Header:
|
||||
We assume an HTML structure like:
|
||||
<div id="track-header">
|
||||
<img id="track-album-image" ... />
|
||||
<div id="track-info">
|
||||
... (track details: name, artist, album, duration, explicit)
|
||||
</div>
|
||||
<!-- Download button will be appended here -->
|
||||
</div>
|
||||
*/
|
||||
#track-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Album Image */
|
||||
#track-album-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
#track-album-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Track Info */
|
||||
#track-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* For mobile, the text block can wrap if needed */
|
||||
}
|
||||
|
||||
/* Track Text Elements */
|
||||
#track-name {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(90deg, #1db954, #17a44b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#track-artist,
|
||||
#track-album,
|
||||
#track-duration,
|
||||
#track-explicit {
|
||||
font-size: 1.1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Download Button */
|
||||
.download-btn {
|
||||
background-color: #1db954;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Download Button Icon */
|
||||
.download-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: brightness(0) invert(1);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hover and Active States */
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.download-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Home Button Styling */
|
||||
.home-btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.home-btn img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
filter: invert(1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.home-btn:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.home-btn:active img {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Loading and Error Messages */
|
||||
#loading,
|
||||
#error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
#error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* Utility class to hide elements */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Responsive Styles for Tablets and Smaller Devices */
|
||||
@media (max-width: 768px) {
|
||||
#app {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Track Header */
|
||||
#track-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Album Image with a subtle shadow and rounded corners */
|
||||
#track-album-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
#track-album-image:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Track Info Styles */
|
||||
#track-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#track-name {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(90deg, #1db954, #17a44b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#track-artist,
|
||||
#track-album,
|
||||
#track-duration,
|
||||
#track-explicit {
|
||||
font-size: 1.1rem;
|
||||
color: #b3b3b3;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Loading and Error States */
|
||||
#loading,
|
||||
#error {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#error {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* Back Button Styling */
|
||||
.back-btn {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.back-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Download Button */
|
||||
.download-btn {
|
||||
background-color: #1db954;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: block; /* Changed from inline-flex to block */
|
||||
margin: 0.5rem auto; /* Centers the button horizontally */
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Styles for Mobile Phones */
|
||||
@media (max-width: 480px) {
|
||||
#track-album-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
#track-name {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
#track-artist,
|
||||
#track-album,
|
||||
#track-duration,
|
||||
#track-explicit {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.download-btn {
|
||||
padding: 0.5rem;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent anchor links from appearing all blue */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1db954;
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* Ensure the header lays out its children with space-between */
|
||||
#track-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* (Optional) If you need to style the download button specifically: */
|
||||
.download-btn {
|
||||
background-color: #1db954;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.6rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Style the download button’s icon */
|
||||
.download-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: brightness(0) invert(1);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hover and active states */
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.download-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Responsive adjustments remain as before */
|
||||
@media (max-width: 768px) {
|
||||
#track-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: #17a44b;
|
||||
}
|
||||
|
||||
.download-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Queue Toggle Button (if used elsewhere) */
|
||||
.queue-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
#app {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#track-header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#track-album-image {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
#track-name {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#track-artist,
|
||||
#track-album,
|
||||
#track-duration,
|
||||
#track-explicit {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.download-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
margin: 0.5rem 0;
|
||||
display: block; /* Changed from inline-flex to block */
|
||||
margin: 0.5rem auto; /* Centers the button horizontally */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#track-album-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#track-name {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
#track-artist,
|
||||
#track-album,
|
||||
#track-duration,
|
||||
#track-explicit {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent anchor links from appearing all blue */
|
||||
a {
|
||||
color: inherit; /* Inherit color from the parent */
|
||||
text-decoration: none; /* Remove default underline */
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #1db954; /* Change to a themed green on hover/focus */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
14
static/images/download.svg
Normal file
14
static/images/download.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 492 492" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M442.668,268.536l-16.116-16.12c-5.06-5.068-11.824-7.872-19.024-7.872c-7.208,0-14.584,2.804-19.644,7.872
|
||||
L283.688,355.992V26.924C283.688,12.084,272.856,0,258.02,0h-22.804c-14.832,0-28.404,12.084-28.404,26.924v330.24
|
||||
L102.824,252.416c-5.068-5.068-11.444-7.872-18.652-7.872c-7.2,0-13.776,2.804-18.84,7.872l-16.028,16.12
|
||||
c-10.488,10.492-10.444,27.56,0.044,38.052l177.576,177.556c5.056,5.056,11.84,7.856,19.1,7.856h0.076
|
||||
c7.204,0,13.972-2.8,19.028-7.856l177.54-177.552C453.164,296.104,453.164,279.028,442.668,268.536z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 904 B |
1
static/images/home.svg
Normal file
1
static/images/home.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path d="M 15 2 A 1 1 0 0 0 14.300781 2.2851562 L 3.3925781 11.207031 A 1 1 0 0 0 3.3554688 11.236328 L 3.3183594 11.267578 L 3.3183594 11.269531 A 1 1 0 0 0 3 12 A 1 1 0 0 0 4 13 L 5 13 L 5 24 C 5 25.105 5.895 26 7 26 L 23 26 C 24.105 26 25 25.105 25 24 L 25 13 L 26 13 A 1 1 0 0 0 27 12 A 1 1 0 0 0 26.681641 11.267578 L 26.666016 11.255859 A 1 1 0 0 0 26.597656 11.199219 L 25 9.8925781 L 25 6 C 25 5.448 24.552 5 24 5 L 23 5 C 22.448 5 22 5.448 22 6 L 22 7.4394531 L 15.677734 2.2675781 A 1 1 0 0 0 15 2 z M 18 15 L 22 15 L 22 23 L 18 23 L 18 15 z"/></svg>
|
||||
|
After Width: | Height: | Size: 673 B |
2
static/images/view.svg
Normal file
2
static/images/view.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 4.4C3.439 4.4 0 9.232 0 10c0 .766 3.439 5.6 10 5.6 6.56 0 10-4.834 10-5.6 0-.768-3.44-5.6-10-5.6zm0 9.907c-2.455 0-4.445-1.928-4.445-4.307S7.545 5.691 10 5.691s4.444 1.93 4.444 4.309-1.989 4.307-4.444 4.307zM10 10c-.407-.447.663-2.154 0-2.154-1.228 0-2.223.965-2.223 2.154s.995 2.154 2.223 2.154c1.227 0 2.223-.965 2.223-2.154 0-.547-1.877.379-2.223 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 597 B |
@@ -54,17 +54,23 @@ function renderAlbum(album) {
|
||||
const image = album.images[0]?.url || 'placeholder.jpg';
|
||||
document.getElementById('album-image').src = image;
|
||||
|
||||
// Back Button
|
||||
let backButton = document.getElementById('backButton');
|
||||
if (!backButton) {
|
||||
backButton = document.createElement('button');
|
||||
backButton.id = 'backButton';
|
||||
backButton.textContent = 'Back';
|
||||
backButton.className = 'back-btn';
|
||||
// Home Button using SVG icon
|
||||
let homeButton = document.getElementById('homeButton');
|
||||
if (!homeButton) {
|
||||
homeButton = document.createElement('button');
|
||||
homeButton.id = 'homeButton';
|
||||
homeButton.className = 'home-btn';
|
||||
|
||||
// Create an image element for the home icon.
|
||||
const homeIcon = document.createElement('img');
|
||||
homeIcon.src = '/static/images/home.svg';
|
||||
homeIcon.alt = 'Home';
|
||||
homeButton.appendChild(homeIcon);
|
||||
|
||||
const headerContainer = document.getElementById('album-header');
|
||||
headerContainer.insertBefore(backButton, headerContainer.firstChild);
|
||||
headerContainer.insertBefore(homeButton, headerContainer.firstChild);
|
||||
}
|
||||
backButton.addEventListener('click', () => {
|
||||
homeButton.addEventListener('click', () => {
|
||||
window.location.href = window.location.origin;
|
||||
});
|
||||
|
||||
@@ -102,23 +108,25 @@ function renderAlbum(album) {
|
||||
const trackElement = document.createElement('div');
|
||||
trackElement.className = 'track';
|
||||
trackElement.innerHTML = `
|
||||
<div class="track-number">${index + 1}</div>
|
||||
<div class="track-info">
|
||||
<div class="track-name">
|
||||
<a href="${baseUrl}/track/${track.id}">${track.name}</a>
|
||||
</div>
|
||||
<div class="track-artist">
|
||||
${track.artists.map(a => `<a href="${baseUrl}/artist/${a.id}">${a.name}</a>`).join(', ')}
|
||||
</div>
|
||||
<div class="track-number">${index + 1}</div>
|
||||
<div class="track-info">
|
||||
<div class="track-name">
|
||||
<a href="${baseUrl}/track/${track.id}">${track.name}</a>
|
||||
</div>
|
||||
<div class="track-duration">${msToTime(track.duration_ms)}</div>
|
||||
<button class="download-btn download-btn--circle"
|
||||
data-url="${track.external_urls.spotify}"
|
||||
data-type="track"
|
||||
data-name="${track.name}">
|
||||
Download
|
||||
</button>
|
||||
`;
|
||||
<div class="track-artist">
|
||||
${track.artists.map(a => `<a href="${baseUrl}/artist/${a.id}">${a.name}</a>`).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="track-duration">${msToTime(track.duration_ms)}</div>
|
||||
<button class="download-btn download-btn--circle"
|
||||
data-url="${track.external_urls.spotify}"
|
||||
data-type="track"
|
||||
data-name="${track.name}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
`;
|
||||
|
||||
tracksList.appendChild(trackElement);
|
||||
});
|
||||
|
||||
|
||||
@@ -33,20 +33,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
/**
|
||||
* Renders the artist header and groups the albums by type.
|
||||
*
|
||||
* The API response is expected to have the following structure:
|
||||
* {
|
||||
* "href": "...",
|
||||
* "limit": 50,
|
||||
* "next": null,
|
||||
* "offset": 0,
|
||||
* "previous": null,
|
||||
* "total": 5,
|
||||
* "items": [ { album object }, { album object }, ... ]
|
||||
* }
|
||||
*
|
||||
* @param {Object} artistData - the artist data from the API.
|
||||
* @param {string} artistId - the artist id from the URL.
|
||||
*/
|
||||
function renderArtist(artistData, artistId) {
|
||||
// Hide loading and error messages
|
||||
@@ -58,25 +44,23 @@ function renderArtist(artistData, artistId) {
|
||||
const artistName = firstAlbum?.artists[0]?.name || 'Unknown Artist';
|
||||
const artistImage = firstAlbum?.images[0]?.url || 'placeholder.jpg';
|
||||
|
||||
// --- Embed the artist name in a link ---
|
||||
// Embed the artist name in a link
|
||||
document.getElementById('artist-name').innerHTML =
|
||||
`<a href="/artist/${artistId}" class="artist-link">${artistName}</a>`;
|
||||
document.getElementById('artist-stats').textContent = `${artistData.total} albums`;
|
||||
document.getElementById('artist-image').src = artistImage;
|
||||
|
||||
// --- Add Back Button ---
|
||||
let backButton = document.getElementById('backButton');
|
||||
if (!backButton) {
|
||||
backButton = document.createElement('button');
|
||||
backButton.id = 'backButton';
|
||||
backButton.textContent = 'Back';
|
||||
backButton.className = 'back-btn';
|
||||
// Insert the back button at the beginning of the header container.
|
||||
// --- Add Home Button ---
|
||||
let homeButton = document.getElementById('homeButton');
|
||||
if (!homeButton) {
|
||||
homeButton = document.createElement('button');
|
||||
homeButton.id = 'homeButton';
|
||||
homeButton.className = 'home-btn';
|
||||
homeButton.innerHTML = `<img src="/static/images/home.svg" alt="Home" class="home-icon">`;
|
||||
const headerContainer = document.getElementById('artist-header');
|
||||
headerContainer.insertBefore(backButton, headerContainer.firstChild);
|
||||
headerContainer.insertBefore(homeButton, headerContainer.firstChild);
|
||||
}
|
||||
backButton.addEventListener('click', () => {
|
||||
// Navigate to the site's base URL.
|
||||
homeButton.addEventListener('click', () => {
|
||||
window.location.href = window.location.origin;
|
||||
});
|
||||
|
||||
@@ -87,23 +71,20 @@ function renderArtist(artistData, artistId) {
|
||||
downloadArtistBtn.id = 'downloadArtistBtn';
|
||||
downloadArtistBtn.textContent = 'Download Whole Artist';
|
||||
downloadArtistBtn.className = 'download-btn download-btn--main';
|
||||
// Insert the button into the header container.
|
||||
const headerContainer = document.getElementById('artist-header');
|
||||
headerContainer.appendChild(downloadArtistBtn);
|
||||
}
|
||||
downloadArtistBtn.addEventListener('click', () => {
|
||||
// Remove individual album download buttons (but leave the whole artist button).
|
||||
// Remove individual album and group download buttons (but leave the whole artist button).
|
||||
document.querySelectorAll('.download-btn').forEach(btn => {
|
||||
if (btn.id !== 'downloadArtistBtn') {
|
||||
btn.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Disable the whole artist button to prevent repeated clicks.
|
||||
downloadArtistBtn.disabled = true;
|
||||
downloadArtistBtn.textContent = 'Queueing...';
|
||||
|
||||
// Initiate the artist download.
|
||||
downloadWholeArtist(artistData).then(() => {
|
||||
downloadArtistBtn.textContent = 'Queued!';
|
||||
}).catch(err => {
|
||||
@@ -124,14 +105,14 @@ function renderArtist(artistData, artistId) {
|
||||
|
||||
// Render groups into the #album-groups container.
|
||||
const groupsContainer = document.getElementById('album-groups');
|
||||
groupsContainer.innerHTML = ''; // Clear any previous content
|
||||
groupsContainer.innerHTML = ''; // Clear previous content
|
||||
|
||||
// For each album type, render a section header, a "Download All" button, and the album list.
|
||||
for (const [groupType, albums] of Object.entries(albumGroups)) {
|
||||
const groupSection = document.createElement('section');
|
||||
groupSection.className = 'album-group';
|
||||
|
||||
// Header for the album group with a download-all button.
|
||||
// Header with a download-all button.
|
||||
const header = document.createElement('div');
|
||||
header.className = 'album-group-header';
|
||||
header.innerHTML = `
|
||||
@@ -144,15 +125,14 @@ function renderArtist(artistData, artistId) {
|
||||
`;
|
||||
groupSection.appendChild(header);
|
||||
|
||||
// Container for the individual albums in this group.
|
||||
// Container for individual albums in this group.
|
||||
const albumsContainer = document.createElement('div');
|
||||
albumsContainer.className = 'albums-list';
|
||||
albums.forEach((album, index) => {
|
||||
const albumElement = document.createElement('div');
|
||||
albumElement.className = 'track'; // reusing the same CSS classes as in the playlist view
|
||||
albumElement.className = 'track'; // reusing styling from the playlist view
|
||||
|
||||
// --- Embed links for the album ---
|
||||
// Wrap the album image and album name in an <a> that points to /album/{album.id}
|
||||
// Use an <a> around the album image and name.
|
||||
albumElement.innerHTML = `
|
||||
<div class="track-number">${index + 1}</div>
|
||||
<a href="/album/${album.id}" class="album-link">
|
||||
@@ -170,8 +150,9 @@ function renderArtist(artistData, artistId) {
|
||||
data-url="${album.external_urls.spotify}"
|
||||
data-type="album"
|
||||
data-album-type="${album.album_type}"
|
||||
data-name="${album.name}">
|
||||
Download
|
||||
data-name="${album.name}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
`;
|
||||
albumsContainer.appendChild(albumElement);
|
||||
@@ -180,7 +161,7 @@ function renderArtist(artistData, artistId) {
|
||||
groupsContainer.appendChild(groupSection);
|
||||
}
|
||||
|
||||
// Reveal header and albums container
|
||||
// Reveal header and albums container.
|
||||
document.getElementById('artist-header').classList.remove('hidden');
|
||||
document.getElementById('albums-container').classList.remove('hidden');
|
||||
|
||||
@@ -190,7 +171,6 @@ function renderArtist(artistData, artistId) {
|
||||
attachGroupDownloadListeners();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Displays an error message in the UI.
|
||||
*/
|
||||
@@ -205,7 +185,7 @@ function showError(message) {
|
||||
*/
|
||||
function attachDownloadListeners() {
|
||||
document.querySelectorAll('.download-btn').forEach((btn) => {
|
||||
// Skip the whole artist button and group download buttons.
|
||||
// Skip the whole artist and group download buttons.
|
||||
if (btn.id === 'downloadArtistBtn' || btn.classList.contains('group-download-btn')) return;
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
@@ -213,9 +193,8 @@ function attachDownloadListeners() {
|
||||
const type = e.currentTarget.dataset.type;
|
||||
const name = e.currentTarget.dataset.name || extractName(url);
|
||||
const albumType = e.currentTarget.dataset.albumType;
|
||||
// Remove the button after click.
|
||||
// Remove button after click.
|
||||
e.currentTarget.remove();
|
||||
// Start the download for this album.
|
||||
startDownload(url, type, { name }, albumType);
|
||||
});
|
||||
});
|
||||
@@ -230,10 +209,8 @@ function attachGroupDownloadListeners() {
|
||||
e.stopPropagation();
|
||||
const albumType = e.currentTarget.dataset.albumType;
|
||||
const artistUrl = e.currentTarget.dataset.artistUrl;
|
||||
// Disable the button to prevent repeated clicks.
|
||||
e.currentTarget.disabled = true;
|
||||
e.currentTarget.textContent = `Queueing ${capitalize(albumType)}s...`;
|
||||
// Initiate a download for this album group.
|
||||
startDownload(artistUrl, 'artist', { name: `All ${capitalize(albumType)}s` }, albumType)
|
||||
.then(() => {
|
||||
e.currentTarget.textContent = `Queued!`;
|
||||
@@ -250,10 +227,8 @@ function attachGroupDownloadListeners() {
|
||||
* Initiates the whole artist download by calling the artist endpoint.
|
||||
*/
|
||||
async function downloadWholeArtist(artistData) {
|
||||
// Use the artist external URL from the first album's artist object.
|
||||
const artistUrl = artistData.items[0]?.artists[0]?.external_urls.spotify;
|
||||
if (!artistUrl) throw new Error('Artist URL not found.');
|
||||
// Queue the whole artist download with the descriptive artist name.
|
||||
startDownload(artistUrl, 'artist', { name: artistData.items[0]?.artists[0]?.name || 'Artist' });
|
||||
}
|
||||
|
||||
@@ -262,7 +237,6 @@ async function downloadWholeArtist(artistData) {
|
||||
* fetching download details, and then adding the download to the queue.
|
||||
*/
|
||||
async function startDownload(url, type, item, albumType) {
|
||||
// Retrieve configuration (if any) from localStorage.
|
||||
const config = JSON.parse(localStorage.getItem('activeConfig')) || {};
|
||||
const {
|
||||
fallback = false,
|
||||
@@ -276,16 +250,12 @@ async function startDownload(url, type, item, albumType) {
|
||||
const service = url.includes('open.spotify.com') ? 'spotify' : 'deezer';
|
||||
let apiUrl = '';
|
||||
|
||||
// Build API URL based on the download type.
|
||||
if (type === 'artist') {
|
||||
// Use the dedicated artist download endpoint.
|
||||
apiUrl = `/api/artist/download?service=${service}&artist_url=${encodeURIComponent(url)}&album_type=${encodeURIComponent(albumType || 'album,single,compilation')}`;
|
||||
} else {
|
||||
// Default: use a generic endpoint.
|
||||
apiUrl = `/api/${type}/download?service=${service}&url=${encodeURIComponent(url)}`;
|
||||
}
|
||||
|
||||
// Append account and quality details.
|
||||
if (fallback && service === 'spotify') {
|
||||
apiUrl += `&main=${deezer}&fallback=${spotify}`;
|
||||
apiUrl += `&quality=${deezerQuality}&fall_quality=${spotifyQuality}`;
|
||||
@@ -301,24 +271,17 @@ async function startDownload(url, type, item, albumType) {
|
||||
try {
|
||||
const response = await fetch(apiUrl);
|
||||
const data = await response.json();
|
||||
|
||||
// Determine the proper type for the queue entry.
|
||||
// For example, if the API URL used the artist endpoint, then the type should be 'artist';
|
||||
// if using an album endpoint then 'album'; otherwise fall back to the passed type.
|
||||
const downloadType = apiUrl.includes('/artist/download')
|
||||
? 'artist'
|
||||
: apiUrl.includes('/album/download')
|
||||
? 'album'
|
||||
: type;
|
||||
|
||||
// Add the download to the queue using the working queue implementation.
|
||||
downloadQueue.addDownload(item, downloadType, data.prg_file);
|
||||
} catch (error) {
|
||||
showError('Download failed: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A helper function to extract a display name from the URL.
|
||||
*/
|
||||
|
||||
@@ -1,10 +1,22 @@
|
||||
// main.js
|
||||
// Import the downloadQueue singleton from your working queue.js implementation.
|
||||
import { downloadQueue } from './queue.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const searchButton = document.getElementById('searchButton');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const queueIcon = document.getElementById('queueIcon');
|
||||
const searchType = document.getElementById('searchType'); // Ensure this element exists in your HTML
|
||||
|
||||
// Preselect the saved search type if available
|
||||
const storedSearchType = localStorage.getItem('searchType');
|
||||
if (storedSearchType && searchType) {
|
||||
searchType.value = storedSearchType;
|
||||
}
|
||||
|
||||
// Save the search type to local storage whenever it changes
|
||||
searchType.addEventListener('change', () => {
|
||||
localStorage.setItem('searchType', searchType.value);
|
||||
});
|
||||
|
||||
// Initialize queue icon
|
||||
queueIcon.addEventListener('click', () => downloadQueue.toggleVisibility());
|
||||
@@ -63,20 +75,23 @@ async function performSearch() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Attaches event listeners to all download buttons (both standard and small versions).
|
||||
*/
|
||||
function attachDownloadListeners(items) {
|
||||
document.querySelectorAll('.download-btn').forEach((btn, index) => {
|
||||
// Query for both download-btn and download-btn-small buttons.
|
||||
document.querySelectorAll('.download-btn, .download-btn-small').forEach((btn, index) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const url = e.currentTarget.dataset.url;
|
||||
const type = e.currentTarget.dataset.type;
|
||||
const albumType = e.currentTarget.dataset.albumType;
|
||||
|
||||
// If a main-download button is clicked (if present), remove its entire result card; otherwise just remove the button.
|
||||
if (e.currentTarget.classList.contains('main-download')) {
|
||||
e.currentTarget.closest('.result-card').remove();
|
||||
} else {
|
||||
e.currentTarget.remove();
|
||||
}
|
||||
|
||||
startDownload(url, type, items[index], albumType);
|
||||
});
|
||||
});
|
||||
@@ -162,101 +177,129 @@ function createResultCard(item, type) {
|
||||
}
|
||||
|
||||
let imageUrl, title, subtitle, details;
|
||||
|
||||
switch(type) {
|
||||
|
||||
switch (type) {
|
||||
case 'track':
|
||||
imageUrl = item.album.images[0]?.url || '';
|
||||
title = item.name;
|
||||
subtitle = item.artists.map(a => a.name).join(', ');
|
||||
details =
|
||||
`<span>${item.album.name}</span>
|
||||
<span class="duration">${msToMinutesSeconds(item.duration_ms)}</span>`;
|
||||
details = `
|
||||
<span>${item.album.name}</span>
|
||||
<span class="duration">${msToMinutesSeconds(item.duration_ms)}</span>
|
||||
`;
|
||||
return `
|
||||
<div class="result-card" data-id="${item.id}">
|
||||
<div class="album-art-wrapper">
|
||||
<img src="${imageUrl}" class="album-art" alt="${type} cover">
|
||||
</div>
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-and-view">
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-buttons">
|
||||
<button class="download-btn-small"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'" title="View">
|
||||
<img src="/static/images/view.svg" alt="View">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="track-artist">${subtitle}</div>
|
||||
<div class="track-details">${details}</div>
|
||||
<button class="download-btn"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}">
|
||||
Download
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'">View</button>
|
||||
</div>
|
||||
`;
|
||||
case 'playlist':
|
||||
imageUrl = item.images[0]?.url || '';
|
||||
title = item.name;
|
||||
subtitle = item.owner.display_name;
|
||||
details =
|
||||
`<span>${item.tracks.total} tracks</span>
|
||||
<span class="duration">${item.description || 'No description'}</span>`;
|
||||
details = `
|
||||
<span>${item.tracks.total} tracks</span>
|
||||
<span class="duration">${item.description || 'No description'}</span>
|
||||
`;
|
||||
return `
|
||||
<div class="result-card" data-id="${item.id}">
|
||||
<div class="album-art-wrapper">
|
||||
<img src="${imageUrl}" class="album-art" alt="${type} cover">
|
||||
</div>
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-and-view">
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-buttons">
|
||||
<button class="download-btn-small"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'" title="View">
|
||||
<img src="/static/images/view.svg" alt="View">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="track-artist">${subtitle}</div>
|
||||
<div class="track-details">${details}</div>
|
||||
<button class="download-btn"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}">
|
||||
Download
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'">View</button>
|
||||
</div>
|
||||
`;
|
||||
case 'album':
|
||||
imageUrl = item.images[0]?.url || '';
|
||||
title = item.name;
|
||||
subtitle = item.artists.map(a => a.name).join(', ');
|
||||
details =
|
||||
`<span>${item.release_date}</span>
|
||||
<span class="duration">${item.total_tracks} tracks</span>`;
|
||||
details = `
|
||||
<span>${item.release_date}</span>
|
||||
<span class="duration">${item.total_tracks} tracks</span>
|
||||
`;
|
||||
return `
|
||||
<div class="result-card" data-id="${item.id}">
|
||||
<div class="album-art-wrapper">
|
||||
<img src="${imageUrl}" class="album-art" alt="${type} cover">
|
||||
</div>
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-and-view">
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-buttons">
|
||||
<button class="download-btn-small"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'" title="View">
|
||||
<img src="/static/images/view.svg" alt="View">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="track-artist">${subtitle}</div>
|
||||
<div class="track-details">${details}</div>
|
||||
<button class="download-btn"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}">
|
||||
Download
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'">View</button>
|
||||
</div>
|
||||
`;
|
||||
case 'artist':
|
||||
imageUrl = item.images && item.images.length ? item.images[0].url : '';
|
||||
imageUrl = (item.images && item.images.length) ? item.images[0].url : '';
|
||||
title = item.name;
|
||||
subtitle = item.genres && item.genres.length ? item.genres.join(', ') : 'Unknown genres';
|
||||
subtitle = (item.genres && item.genres.length) ? item.genres.join(', ') : 'Unknown genres';
|
||||
details = `<span>Followers: ${item.followers?.total || 'N/A'}</span>`;
|
||||
return `
|
||||
<div class="result-card" data-id="${item.id}">
|
||||
<div class="album-art-wrapper">
|
||||
<img src="${imageUrl}" class="album-art" alt="${type} cover">
|
||||
</div>
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-and-view">
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-buttons">
|
||||
<button class="download-btn-small"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'" title="View">
|
||||
<img src="/static/images/view.svg" alt="View">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="track-artist">${subtitle}</div>
|
||||
<div class="track-details">${details}</div>
|
||||
<!-- Removed the main "Download All Discography" button -->
|
||||
<div class="artist-download-buttons">
|
||||
<button class="download-btn main-download"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
data-album-type="album,single,compilation">
|
||||
<svg class="download-icon" viewBox="0 0 24 24">
|
||||
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
||||
</svg>
|
||||
Download All Discography
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'">View</button>
|
||||
<div class="download-options-container">
|
||||
<button class="options-toggle" onclick="this.nextElementSibling.classList.toggle('expanded')">
|
||||
More Options
|
||||
@@ -264,35 +307,32 @@ function createResultCard(item, type) {
|
||||
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="secondary-options">
|
||||
<button class="download-btn option-btn"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
data-album-type="album">
|
||||
<img src="https://www.svgrepo.com/show/40029/vinyl-record.svg"
|
||||
alt="Albums"
|
||||
class="type-icon" />
|
||||
alt="Albums"
|
||||
class="type-icon" />
|
||||
Albums
|
||||
</button>
|
||||
|
||||
<button class="download-btn option-btn"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
data-album-type="single">
|
||||
<img src="https://www.svgrepo.com/show/147837/cassette.svg"
|
||||
alt="Singles"
|
||||
class="type-icon" />
|
||||
alt="Singles"
|
||||
class="type-icon" />
|
||||
Singles
|
||||
</button>
|
||||
|
||||
<button class="download-btn option-btn"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
data-album-type="compilation">
|
||||
<img src="https://brandeps.com/icon-download/C/Collection-icon-vector-01.svg"
|
||||
alt="Compilations"
|
||||
class="type-icon" />
|
||||
alt="Compilations"
|
||||
class="type-icon" />
|
||||
Compilations
|
||||
</button>
|
||||
</div>
|
||||
@@ -309,15 +349,22 @@ function createResultCard(item, type) {
|
||||
<div class="album-art-wrapper">
|
||||
<img src="${imageUrl}" class="album-art" alt="${type} cover">
|
||||
</div>
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-and-view">
|
||||
<div class="track-title">${title}</div>
|
||||
<div class="title-buttons">
|
||||
<button class="download-btn-small"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'" title="View">
|
||||
<img src="/static/images/view.svg" alt="View">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="track-artist">${subtitle}</div>
|
||||
<div class="track-details">${details}</div>
|
||||
<button class="download-btn"
|
||||
data-url="${item.external_urls.spotify}"
|
||||
data-type="${type}">
|
||||
Download
|
||||
</button>
|
||||
<button class="view-btn" onclick="window.location.href='${newUrl}'">View</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -48,20 +48,20 @@ function renderPlaylist(playlist) {
|
||||
const image = playlist.images[0]?.url || 'placeholder.jpg';
|
||||
document.getElementById('playlist-image').src = image;
|
||||
|
||||
// --- Add Back Button ---
|
||||
let backButton = document.getElementById('backButton');
|
||||
if (!backButton) {
|
||||
backButton = document.createElement('button');
|
||||
backButton.id = 'backButton';
|
||||
backButton.textContent = 'Back';
|
||||
backButton.className = 'back-btn';
|
||||
// Insert the back button at the beginning of the header container.
|
||||
// --- Add Home Button ---
|
||||
let homeButton = document.getElementById('homeButton');
|
||||
if (!homeButton) {
|
||||
homeButton = document.createElement('button');
|
||||
homeButton.id = 'homeButton';
|
||||
homeButton.className = 'home-btn';
|
||||
// Use an <img> tag to display the SVG icon.
|
||||
homeButton.innerHTML = `<img src="/static/images/home.svg" alt="Home">`;
|
||||
// Insert the home button at the beginning of the header container.
|
||||
const headerContainer = document.getElementById('playlist-header');
|
||||
headerContainer.insertBefore(backButton, headerContainer.firstChild);
|
||||
headerContainer.insertBefore(homeButton, headerContainer.firstChild);
|
||||
}
|
||||
backButton.addEventListener('click', () => {
|
||||
// Navigate to the site's base URL. For example, if the current URL is
|
||||
// cool.com/bla/bla, this will take you to cool.com.
|
||||
homeButton.addEventListener('click', () => {
|
||||
// Navigate to the site's base URL.
|
||||
window.location.href = window.location.origin;
|
||||
});
|
||||
|
||||
@@ -128,8 +128,9 @@ function renderPlaylist(playlist) {
|
||||
<button class="download-btn download-btn--circle"
|
||||
data-url="${track.external_urls.spotify}"
|
||||
data-type="track"
|
||||
data-name="${track.name}">
|
||||
Download
|
||||
data-name="${track.name}"
|
||||
title="Download">
|
||||
<img src="/static/images/download.svg" alt="Download">
|
||||
</button>
|
||||
`;
|
||||
tracksList.appendChild(trackElement);
|
||||
|
||||
@@ -20,6 +20,17 @@ class DownloadQueue {
|
||||
</div>
|
||||
`;
|
||||
document.body.insertAdjacentHTML('beforeend', queueHTML);
|
||||
|
||||
// Restore the sidebar visibility from LocalStorage
|
||||
const savedVisibility = localStorage.getItem('downloadQueueVisible');
|
||||
const queueSidebar = document.getElementById('downloadQueue');
|
||||
if (savedVisibility === 'true') {
|
||||
queueSidebar.classList.add('active');
|
||||
queueSidebar.hidden = false;
|
||||
} else {
|
||||
queueSidebar.classList.remove('active');
|
||||
queueSidebar.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
/* Event Handling */
|
||||
@@ -45,6 +56,10 @@ class DownloadQueue {
|
||||
const queueSidebar = document.getElementById('downloadQueue');
|
||||
queueSidebar.classList.toggle('active');
|
||||
queueSidebar.hidden = !queueSidebar.classList.contains('active');
|
||||
|
||||
// Save the current visibility state to LocalStorage.
|
||||
localStorage.setItem('downloadQueueVisible', queueSidebar.classList.contains('active'));
|
||||
|
||||
this.dispatchEvent('queueVisibilityChanged', { visible: queueSidebar.classList.contains('active') });
|
||||
}
|
||||
|
||||
|
||||
@@ -20,10 +20,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
.then(data => renderTrack(data))
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showError('Failed to load track.');
|
||||
showError('Error loading track');
|
||||
});
|
||||
|
||||
// Attach event listener to the queue icon to toggle download queue
|
||||
// Attach event listener to the queue icon to toggle the download queue
|
||||
const queueIcon = document.getElementById('queueIcon');
|
||||
if (queueIcon) {
|
||||
queueIcon.addEventListener('click', () => {
|
||||
@@ -34,85 +34,84 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
/**
|
||||
* Renders the track header information.
|
||||
* The API response structure is assumed to be similar to:
|
||||
* {
|
||||
* "album": { ... },
|
||||
* "artists": [ ... ],
|
||||
* "duration_ms": 149693,
|
||||
* "explicit": false,
|
||||
* "external_urls": { "spotify": "https://open.spotify.com/track/..." },
|
||||
* "name": "Track Name",
|
||||
* ... other track info
|
||||
* }
|
||||
*/
|
||||
function renderTrack(track) {
|
||||
// Hide loading and error messages
|
||||
// Hide the loading and error messages.
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('error').classList.add('hidden');
|
||||
|
||||
// Update header info with embedded links
|
||||
|
||||
// Track name: linking to its own page (for consistency)
|
||||
document.getElementById('track-name').innerHTML = `<a href="/track/${track.id}" title="View track details">${track.name}</a>`;
|
||||
|
||||
// Artist names: wrap each artist in a link to the artist page
|
||||
document.getElementById('track-artist').innerHTML = `By ${track.artists
|
||||
.map(a => `<a href="/artist/${a.id}" title="View artist details">${a.name}</a>`)
|
||||
.join(', ')}`;
|
||||
|
||||
// Album: embed a link to the album page.
|
||||
// Update track information fields.
|
||||
document.getElementById('track-name').innerHTML =
|
||||
`<a href="/track/${track.id}" title="View track details">${track.name}</a>`;
|
||||
|
||||
document.getElementById('track-artist').innerHTML =
|
||||
`By ${track.artists.map(a =>
|
||||
`<a href="/artist/${a.id}" title="View artist details">${a.name}</a>`
|
||||
).join(', ')}`;
|
||||
|
||||
document.getElementById('track-album').innerHTML =
|
||||
`Album: <a href="/album/${track.album.id}" title="View album details">${track.album.name}</a> (${track.album.album_type})`;
|
||||
|
||||
document.getElementById('track-duration').textContent =
|
||||
`Duration: ${msToTime(track.duration_ms)}`;
|
||||
|
||||
document.getElementById('track-explicit').textContent =
|
||||
track.explicit ? 'Explicit' : 'Clean';
|
||||
|
||||
// Display track duration converted from milliseconds
|
||||
document.getElementById('track-duration').textContent = `Duration: ${msToTime(track.duration_ms)}`;
|
||||
|
||||
// Show if the track is explicit
|
||||
document.getElementById('track-explicit').textContent = track.explicit ? 'Explicit' : 'Clean';
|
||||
|
||||
// Use the album cover image if available; otherwise, fall back to a placeholder
|
||||
const imageUrl = track.album.images && track.album.images[0] ? track.album.images[0].url : 'placeholder.jpg';
|
||||
const imageUrl = (track.album.images && track.album.images[0])
|
||||
? track.album.images[0].url
|
||||
: 'placeholder.jpg';
|
||||
document.getElementById('track-album-image').src = imageUrl;
|
||||
|
||||
// --- Add Back Button (if not already added) ---
|
||||
let backButton = document.getElementById('backButton');
|
||||
if (!backButton) {
|
||||
backButton = document.createElement('button');
|
||||
backButton.id = 'backButton';
|
||||
backButton.textContent = 'Back';
|
||||
backButton.className = 'back-btn';
|
||||
// Insert the back button at the beginning of the header container.
|
||||
const headerContainer = document.getElementById('track-header');
|
||||
headerContainer.insertBefore(backButton, headerContainer.firstChild);
|
||||
// --- Insert Home Button (if not already present) ---
|
||||
let homeButton = document.getElementById('homeButton');
|
||||
if (!homeButton) {
|
||||
homeButton = document.createElement('button');
|
||||
homeButton.id = 'homeButton';
|
||||
homeButton.className = 'home-btn';
|
||||
homeButton.innerHTML = `<img src="/static/images/home.svg" alt="Home" />`;
|
||||
// Prepend the home button into the header.
|
||||
document.getElementById('track-header').insertBefore(homeButton, document.getElementById('track-header').firstChild);
|
||||
}
|
||||
backButton.addEventListener('click', () => {
|
||||
// Navigate to the site's base URL.
|
||||
homeButton.addEventListener('click', () => {
|
||||
window.location.href = window.location.origin;
|
||||
});
|
||||
|
||||
// --- Attach Download Button Listener ---
|
||||
const downloadBtn = document.getElementById('downloadTrackBtn');
|
||||
// --- Move the Download Button from #actions into #track-header ---
|
||||
let downloadBtn = document.getElementById('downloadTrackBtn');
|
||||
if (downloadBtn) {
|
||||
downloadBtn.addEventListener('click', () => {
|
||||
// Disable the button to prevent repeated clicks.
|
||||
downloadBtn.disabled = true;
|
||||
downloadBtn.textContent = 'Queueing...';
|
||||
|
||||
// Start the download for the track.
|
||||
startDownload(track.external_urls.spotify, 'track', { name: track.name })
|
||||
.then(() => {
|
||||
downloadBtn.textContent = 'Queued!';
|
||||
})
|
||||
.catch(err => {
|
||||
showError('Failed to queue track download: ' + err.message);
|
||||
downloadBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
// Remove the parent container (#actions) if needed.
|
||||
const actionsContainer = document.getElementById('actions');
|
||||
if (actionsContainer) {
|
||||
actionsContainer.parentNode.removeChild(actionsContainer);
|
||||
}
|
||||
// Set the inner HTML to use the download.svg icon.
|
||||
downloadBtn.innerHTML = `<img src="/static/images/download.svg" alt="Download">`;
|
||||
// Append the download button to the track header so it appears at the right.
|
||||
document.getElementById('track-header').appendChild(downloadBtn);
|
||||
}
|
||||
|
||||
// Reveal the header and actions container
|
||||
// Attach a click listener to the download button.
|
||||
downloadBtn.addEventListener('click', () => {
|
||||
downloadBtn.disabled = true;
|
||||
// Save the original icon markup in case we need to revert.
|
||||
downloadBtn.dataset.originalHtml = `<img src="/static/images/download.svg" alt="Download">`;
|
||||
downloadBtn.innerHTML = `<span>Queueing...</span>`;
|
||||
|
||||
// Start the download for this track.
|
||||
startDownload(track.external_urls.spotify, 'track', { name: track.name })
|
||||
.then(() => {
|
||||
downloadBtn.innerHTML = `<span>Queued!</span>`;
|
||||
})
|
||||
.catch(err => {
|
||||
showError('Failed to queue track download: ' + err.message);
|
||||
downloadBtn.disabled = false;
|
||||
downloadBtn.innerHTML = downloadBtn.dataset.originalHtml;
|
||||
});
|
||||
});
|
||||
|
||||
// Reveal the header now that track info is loaded.
|
||||
document.getElementById('track-header').classList.remove('hidden');
|
||||
document.getElementById('actions').classList.remove('hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -129,8 +128,10 @@ function msToTime(duration) {
|
||||
*/
|
||||
function showError(message) {
|
||||
const errorEl = document.getElementById('error');
|
||||
errorEl.textContent = message;
|
||||
errorEl.classList.remove('hidden');
|
||||
if (errorEl) {
|
||||
errorEl.textContent = message;
|
||||
errorEl.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -138,7 +139,6 @@ function showError(message) {
|
||||
* fetching download details, and then adding the download to the queue.
|
||||
*/
|
||||
async function startDownload(url, type, item) {
|
||||
// Retrieve configuration (if any) from localStorage
|
||||
const config = JSON.parse(localStorage.getItem('activeConfig')) || {};
|
||||
const {
|
||||
fallback = false,
|
||||
@@ -150,12 +150,8 @@ async function startDownload(url, type, item) {
|
||||
} = config;
|
||||
|
||||
const service = url.includes('open.spotify.com') ? 'spotify' : 'deezer';
|
||||
let apiUrl = '';
|
||||
let apiUrl = `/api/${type}/download?service=${service}&url=${encodeURIComponent(url)}`;
|
||||
|
||||
// For a track, we use the default track download endpoint.
|
||||
apiUrl = `/api/${type}/download?service=${service}&url=${encodeURIComponent(url)}`;
|
||||
|
||||
// Append account and quality details.
|
||||
if (fallback && service === 'spotify') {
|
||||
apiUrl += `&main=${deezer}&fallback=${spotify}`;
|
||||
apiUrl += `&quality=${deezerQuality}&fall_quality=${spotifyQuality}`;
|
||||
@@ -171,7 +167,6 @@ async function startDownload(url, type, item) {
|
||||
try {
|
||||
const response = await fetch(apiUrl);
|
||||
const data = await response.json();
|
||||
// Add the download to the queue using the working queue implementation.
|
||||
downloadQueue.addDownload(item, type, data.prg_file);
|
||||
} catch (error) {
|
||||
showError('Download failed: ' + error.message);
|
||||
|
||||
Reference in New Issue
Block a user