Skip to content

Improved the overall UI of Streamify to make it more consistent, mode… #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gaurav123-4 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Improved the overall UI of Streamify to make it more consistent, mode… #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e752b3
improved the overall UI of Streamify to make it more consistent, mode…
gaurav123-4 Oct 24, 2025
f05fb4e
Fixes some issue Firebase authentication, but the configuration was m…
gaurav123-4 Oct 25, 2025
8c79bab
Font Changed to Poppins , Enhanced Liked Songs UI
gaurav123-4 Oct 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions backend/streamify_api/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = os.environ["DJANGO_SECRET_KEY"]
SECRET_KEY = os.environ.get("DJANGO_SECRET_KEY", "django-insecure-dev-key-change-in-production")
Copy link

Copilot AI Oct 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fallback secret key is insecure and should never be used in production. Consider raising an exception if the SECRET_KEY environment variable is not set in production environments, rather than silently falling back to an insecure default.

Copilot uses AI. Check for mistakes.

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = os.environ["DEBUG"]
DEBUG = os.environ.get("DEBUG", "True").lower() == "true"

ALLOWED_HOSTS = ['.onrender.com', 'localhost', '127.0.0.1']

Expand Down
3 changes: 3 additions & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<link rel="icon" type="image/svg+xml" href="/streamify-logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="referrer" content="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<title>Streamify</title>
</head>
Expand Down
128 changes: 79 additions & 49 deletions frontend/src/components/Miniplayer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,41 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 1rem;
border-radius: 10px;
background-color: #4a2f2f;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
background-color: var(--color-background-secondary);
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
z-index: var(--z-fixed);
box-shadow: var(--shadow-lg);
border-top: 1px solid var(--color-border);
}

.mini-meta {
display: flex;
align-items: center;
gap: 0.8rem;
gap: var(--space-sm);
}

.mini-cover {
width: 48px;
height: 48px;
border-radius: 8px;
border-radius: var(--radius-md);
object-fit: cover;
}

.mini-text {
display: flex;
flex-direction: column;
color: white;
color: var(--color-text-primary);
}

.mini-title {
font-weight: 600;
font-size: 0.9rem;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
margin: 0;
white-space: nowrap;
overflow: hidden;
Expand All @@ -44,19 +45,19 @@
}

.mini-artist {
font-size: 0.8rem;
color: #c4b3b3;
margin-top: 2px;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-top: var(--space-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}

.mini-source {
font-size: 0.75rem;
color: #a39090;
margin-top: 2px;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin-top: var(--space-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -66,134 +67,163 @@
.mini-controls {
display: flex;
align-items: center;
gap: 0.8rem;
gap: var(--space-sm);
}

.mini-like {
background: #3a2323; /* dark brown */
background: var(--color-surface);
border: none;
color: white;
color: var(--color-text-primary);
cursor: pointer;
font-size: 1rem;
font-size: var(--font-size-base);
width: 40px;
height: 40px;
border-radius: 50%;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
padding: 0;
}

.mini-like:hover {
background: var(--color-surface-hover);
transform: scale(1.05);
}

.mini-like svg {
display: block;
margin: auto;
}

.mini-like svg path {
fill: none;
stroke: #fff;
stroke: var(--color-text-primary);
stroke-width: 2.2;
transition: fill 0.2s, stroke 0.2s;
transition: all var(--transition-normal);
}

.mini-like.liked svg path {
fill: #fff !important;
stroke: #fff !important;
fill: var(--color-primary) !important;
stroke: var(--color-primary) !important;
}

.mini-like:active {
background: #4a2f2f;
background: var(--color-surface-active);
transform: scale(0.95);
}

.mini-play {
background: #3a2323; /* dark brown */
background: var(--color-primary);
border: none;
color: white;
color: var(--color-text-primary);
cursor: pointer;
font-size: 1rem;
font-size: var(--font-size-base);
width: 40px;
height: 40px;
border-radius: 50%;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
padding: 0;
}

.mini-play:hover {
background: var(--color-primary-hover);
transform: scale(1.05);
}

.mini-play svg {
display: block;
margin: auto;
}

.mini-play:active {
background: #4a2f2f;
background: var(--color-primary-dark);
transform: scale(0.95);
}

@media (max-width: 700px) {
.mini-player {
bottom: 64px; /* Place above navbar (navbar height is 64px) */
z-index: 1003;
bottom: var(--space-3xl); /* Place above navbar (navbar height is 64px) */
z-index: var(--z-fixed);
}
}

.volume-container {
display: flex;
align-items: center;
margin: 0 8px;
margin: 0 var(--space-sm);
}

.volume-icon {
background: none;
border: none;
cursor: pointer;
margin-right: 6px;
margin-right: var(--space-xs);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: opacity var(--transition-normal);
}

.volume-icon:hover {
opacity: 0.8;
}

.volume-slider {
width: 100px;
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: opacity 0.2s;
transition: opacity var(--transition-normal);
background: var(--color-border);
}

.volume-slider:hover {
opacity: 0.9;
}

.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
background: var(--color-text-primary);
border-radius: var(--radius-full);
cursor: pointer;
transition: transform 0.2s;
transition: transform var(--transition-normal);
}

.volume-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
background: var(--color-primary);
}

.volume-slider::-moz-range-thumb {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
background: var(--color-text-primary);
border-radius: var(--radius-full);
border: none;
cursor: pointer;
transition: transform 0.2s;
transition: transform var(--transition-normal);
}

.volume-slider::-moz-range-thumb:hover {
transform: scale(1.2);
background: var(--color-primary);
}

.volume-slider::-moz-range-track {
height: 4px;
border-radius: 2px;
background: transparent;
border-radius: var(--radius-sm);
background: var(--color-border);
}

Loading