Skip to content

Commit 1ab6a45

Browse files
fezcodefezcode
committed
fix: aether music player layout inconsistency
Fixes #11 Thanks @uyarburak
1 parent 53d6b7f commit 1ab6a45

File tree

5 files changed

+47
-21
lines changed

5 files changed

+47
-21
lines changed

‎public/media_player/musics.piml‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,6 @@
1515
(artist) Borislav "Glorian" Slavov
1616
(url) https://github.com/fezcode/fcdx.cdn/releases/download/TheTag/Sword.and.Faith.Knights.of.Honor.mp3
1717

18-
> (track)
19-
(title) Bilmem Mi
20-
(artist) DJ Mahmut
21-
(url) https://github.com/fezcode/fcdx.cdn/releases/download/TheTag/Bilmem.Mi.mp3
22-
(cover) https://images.unsplash.com/photo-1555680202-c86f0e12f086?w=500&auto=format&fit=crop&q=60
23-
2418
> (track)
2519
(title) Grand Theft Auto V Soundtrack - Pause Menu Music
2620
(artist) Tangerine Dream
@@ -30,3 +24,24 @@
3024
(title) Hippyest
3125
(artist) Peanut Butter Wolf
3226
(url) https://github.com/fezcode/fcdx.cdn/releases/download/TheTag/Peanut.Butter.Wolf.-.Hippyest.mp3
27+
28+
> (track)
29+
(title) Why is it So Hard
30+
(artist) Off Beat
31+
(url) https://github.com/fezcode/fcdx.cdn/releases/download/TheTag/Why_Is_It_So_Hard-Off_Beat.mp3
32+
33+
> (track)
34+
(title) Anthem
35+
(artist) BR
36+
(url) https://github.com/fezcode/fcdx.cdn/releases/download/TheTag/Anthem-BR.mp3
37+
38+
> (track)
39+
(title) Dose of Reality
40+
(artist) Nonak
41+
(url) https://github.com/fezcode/fcdx.cdn/releases/download/TheTag/Dose_of_Reality-Nonak.mp3
42+
43+
> (track)
44+
(title) Bilmem Mi
45+
(artist) DJ Mahmut
46+
(url) https://github.com/fezcode/fcdx.cdn/releases/download/TheTag/Bilmem.Mi.mp3
47+
(cover) https://images.unsplash.com/photo-1555680202-c86f0e12f086?w=500&auto=format&fit=crop&q=60

‎src/app/apps/CloudMusicPlayer/CloudMusicPlayer.jsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useState } from 'react';
2+
import { Link } from 'react-router-dom';
23
import CloudPlaylist from './components/CloudPlaylist';
34
import './CloudMusicPlayer.css';
45
import { useCloudMusic } from '../../../context/CloudMusicContext';
@@ -7,7 +8,7 @@ import {
78
PlusIcon, LinkIcon, PlayIcon, PauseIcon,
89
SkipForwardIcon, SkipBackIcon, RepeatIcon,
910
ShuffleIcon, SpeakerHighIcon, SpeakerSlashIcon, SpeakerLowIcon, SpeakerNoneIcon,
10-
WaveformIcon
11+
WaveformIcon, ArrowLeftIcon
1112
} from '@phosphor-icons/react';
1213
import CustomSlider from '../../../components/CustomSlider';
1314
import GenerativeArt from '../../../components/GenerativeArt';
@@ -71,26 +72,35 @@ const CloudMusicPlayer = () => {
7172
}
7273

7374
return (
74-
<div className="min-h-screen relative font-mono bg-black text-cyan-500 flex flex-col md:items-center md:justify-center overflow-y-auto md:overflow-hidden selection:bg-cyan-500 selection:text-black">
75+
<div className="min-h-screen relative font-mono bg-black text-cyan-500 selection:bg-cyan-500 selection:text-black py-24 px-6 md:px-12">
7576

7677
{/* Generative Art Background */}
77-
<div className="fixed inset-0 z-0 opacity-50 filter hue-rotate-180 brightness-50 contrast-125">
78+
<div className="absolute inset-0 z-0 opacity-50 filter hue-rotate-180 brightness-50 contrast-125 h-full w-full overflow-hidden">
7879
<GenerativeArt seed={currentTrack?.title || "AETHER_DECK"} className="w-full h-full" />
7980
</div>
8081

8182
{/* CRT Scanlines & Vignette */}
82-
<div className="fixed inset-0 z-50 scanlines pointer-events-none"></div>
83+
<div className="absolute inset-0 z-50 scanlines pointer-events-none h-full w-full"></div>
8384

8485
{/* Background Grid */}
85-
<div className="fixed inset-0 z-10 opacity-20 pointer-events-none"
86+
<div className="absolute inset-0 z-10 opacity-20 pointer-events-none h-full w-full"
8687
style={{
8788
backgroundImage: `linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px)`,
8889
backgroundSize: '40px 40px'
8990
}}>
9091
</div>
9192

92-
{/* Main Deck Container */}
93-
<div className="relative z-30 w-full max-w-6xl h-auto md:h-[90vh] flex flex-col md:flex-row gap-6 p-4 md:p-8">
93+
<div className="mx-auto max-w-7xl relative z-30">
94+
<Link
95+
to="/apps"
96+
className="group inline-flex items-center gap-2 text-xs text-gray-500 hover:text-white transition-colors uppercase tracking-[0.3em] mb-12"
97+
>
98+
<ArrowLeftIcon weight="bold" className="transition-transform group-hover:-translate-x-1" />
99+
<span>Exit_To_Center</span>
100+
</Link>
101+
102+
{/* Main Deck Container */}
103+
<div className="w-full max-w-6xl h-auto md:h-[85vh] flex flex-col md:flex-row gap-6 mx-auto">
94104

95105
{/* Left Column: Player Core */}
96106
<div className="w-full md:w-5/12 flex flex-col gap-4">
@@ -362,6 +372,7 @@ const CloudMusicPlayer = () => {
362372
</div>
363373

364374
</div>
375+
</div>
365376
</div>
366377
);
367378
};

‎src/app/apps/CloudMusicPlayer/components/TinyCloudPlayer.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const TinyCloudPlayer = () => {
1919
} = useCloudMusic();
2020
const location = useLocation();
2121

22-
// Disable on the main Aether app page to avoid redundancy
23-
if (location.pathname === '/apps/aether') return null;
22+
// Disable on the main Aether app page to avoid redundancy, and on About pages
23+
if (location.pathname.startsWith('/apps/aether') || location.pathname.startsWith('/about')) return null;
2424

2525
if (!isPlayerOpen) return null;
2626

@@ -30,11 +30,11 @@ const TinyCloudPlayer = () => {
3030
<AnimatePresence>
3131
{isPlayerOpen && (
3232
<motion.div
33-
initial={{ y: 100, opacity: 0 }}
34-
animate={{ y: 0, opacity: 1 }}
35-
exit={{ y: 100, opacity: 0 }}
33+
initial={{ y: 100, opacity: 0, x: "-50%" }}
34+
animate={{ y: 0, opacity: 1, x: "-50%" }}
35+
exit={{ y: 100, opacity: 0, x: "-50%" }}
3636
transition={{ type: "spring", stiffness: 300, damping: 30 }}
37-
className="fixed bottom-2 left-2 z-50 w-[calc(100%-1rem)] max-w-[20rem] md:bottom-6 md:left-1/2 md:transform md:-translate-x-1/2 md:w-full md:max-w-md font-mono"
37+
className="fixed bottom-6 left-1/2 z-50 w-[95%] max-w-md font-mono"
3838
>
3939
<div className="relative group">
4040
{/* Cyber Deck Container */}

‎src/components/Layout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const Layout = ({
6464
toggleBSOD={toggleBSOD}
6565
/>
6666
{!hideLayout && <SidePanel />}
67-
<div className="bg-gray-950 min-h-screen font-sans flex">
67+
<div className="bg-[#050505] min-h-screen font-sans flex">
6868
{!hideLayout &&
6969
(sidebarMode === 'classic' ? (
7070
<ClassicSidebar

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ body {
99

1010
body {
1111
margin: 0;
12-
background-color: #020617;
12+
background-color: #050505; /* Real Brutalist Background Color */
1313
font-family: 'Space Mono', 'JetBrains Mono', monospace, sans-serif;
1414
font-weight: 400;
1515
font-style: normal;

0 commit comments

Comments
 (0)