diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0cdd351 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,21 @@ +{ + "bracketSpacing": false, + "printWidth": 100, + "proseWrap": "never", + "requirePragma": false, + "trailingComma": "all", + "useTabs": true, + "endOfLine": "auto", + "overrides": [ + { + "files": [ + ".prettierrc", + "*.json" + ], + "options": { + "printWidth": 200, + "tabWidth": 2 + } + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index e8419ef..30aac9f 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,12 @@ This is a starter template for [Learn Next.js](https://nextjs.org/learn). This is a project for learning, attempt is to create a light version of Spotify +# TODO + +- bottom bar could be a single area instead of being divided into 3, similar as Spotify's +- warning in console about classes being created should be fixed +- error thrown in the animated playback svg + # Music Copyright ACTION by Alex-Productions | https://onsound.eu/ diff --git a/components/IconButtons/IconButtons.tsx b/components/IconButtons/IconButtons.tsx index e606d9b..734b79f 100644 --- a/components/IconButtons/IconButtons.tsx +++ b/components/IconButtons/IconButtons.tsx @@ -1,126 +1,111 @@ import styled from "styled-components"; const StyledButton = styled.button` - border: none; - background: none; - display: flex; - justify-content: center; - align-items: center; + border: none; + background: none; + display: flex; + justify-content: center; + align-items: center; - svg:hover { - fill: white; - } + svg:hover { + fill: white; + } - svg { - fill: var(--diminished-text-color); - } + svg { + fill: var(--diminished-text-color); + } `; -export const ClockButton = ({ onClick }: { onClick?: VoidFunction }) => { - return ( - - - - - - ); +export const ClockButton = ({onClick}: {onClick?: VoidFunction}) => { + return ( + + + + + + ); }; -export const SkipNextButton = ({ onClick }: { onClick?: VoidFunction }) => { - return ( - - - - - - ); +export const SkipNextButton = ({onClick}: {onClick?: VoidFunction}) => { + return ( + + + + + + ); }; -export const SkipPreviousButton = ({ onClick }: { onClick?: VoidFunction }) => { - return ( - - - - - - ); +export const SkipPreviousButton = ({onClick}: {onClick?: VoidFunction}) => { + return ( + + + + + + ); }; -export const PlayButton = ({ onClick }: { onClick?: VoidFunction }) => { - return ( - - - - - - ); +export const PlayButton = ({onClick}: {onClick?: VoidFunction}) => { + return ( + + + + + + ); }; -export const PauseButton = ({ onClick }: { onClick?: VoidFunction }) => { - return ( - - - - - - ); +export const PauseButton = ({onClick}: {onClick?: VoidFunction}) => { + return ( + + + + + + ); }; -export const VolumeDownButton = ({ onClick }: { onClick?: VoidFunction }) => { - return ( - - - - - - ); +export const VolumeDownButton = ({onClick}: {onClick?: VoidFunction}) => { + return ( + + + + + + ); }; -export const MutedButton = ({ onClick }: { onClick?: VoidFunction }) => { - return ( - - - - - - ); +export const MutedButton = ({onClick}: {onClick?: VoidFunction}) => { + return ( + + + + + + ); }; diff --git a/components/Library.tsx b/components/Library.tsx index a80a8b4..a70ba73 100644 --- a/components/Library.tsx +++ b/components/Library.tsx @@ -1,9 +1,9 @@ import styles from "./library.module.css"; export const Library = () => { - return ( -
-

Your library

-
- ); + return ( +
+

Your library

+
+ ); }; diff --git a/components/PlaybackControls.tsx b/components/PlaybackControls.tsx index 0f98e9c..42cd7e1 100644 --- a/components/PlaybackControls.tsx +++ b/components/PlaybackControls.tsx @@ -1,77 +1,60 @@ import styled from "styled-components"; import styles from "./playbackControls.module.css"; -import { ProgressBar } from "./ProgressBar"; -import { SkipNextButton, SkipPreviousButton } from "./IconButtons/IconButtons"; +import {ProgressBar} from "./ProgressBar"; +import {SkipNextButton, SkipPreviousButton} from "./IconButtons/IconButtons"; -const StyledButton = styled.button<{ $bgColor?: string }>` - background-color: ${(props) => (props.$bgColor ? props.$bgColor : "white")}; - border-radius: 50%; - width: 40px; - height: 40px; - display: flex; - justify-content: center; - align-items: center; - border: none; +const StyledButton = styled.button<{$bgColor?: string}>` + background-color: ${(props) => (props.$bgColor ? props.$bgColor : "white")}; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border: none; `; const StyledPlayPauseButton = styled(StyledButton)` - &:hover { - transform: scale(1.05); - } + &:hover { + transform: scale(1.05); + } `; -const PlayPauseButton = ({ - isPaused, - onClick, -}: { - isPaused: boolean; - onClick: () => void; -}) => { - return ( - - {isPaused ? ( - - ) : ( - - )} - - ); +const PlayPauseButton = ({isPaused, onClick}: {isPaused: boolean; onClick: () => void}) => { + return ( + + {isPaused ? : } + + ); }; export const PlaybackControls = ({ - pausePlayOnclick, - totalPlaybackDuration, - currentPlaybackTime, - isPlaybackPaused, - onSeek, + pausePlayOnclick, + totalPlaybackDuration, + currentPlaybackTime, + isPlaybackPaused, + onSeek, }: { - pausePlayOnclick: () => void; - totalPlaybackDuration: React.ComponentProps< - typeof ProgressBar - >["totalPlaybackDuration"]; - currentPlaybackTime: React.ComponentProps< - typeof ProgressBar - >["currentPlaybackTime"]; - onSeek: React.ComponentProps["onSeek"]; - isPlaybackPaused: boolean; + pausePlayOnclick: () => void; + totalPlaybackDuration: React.ComponentProps["totalPlaybackDuration"]; + currentPlaybackTime: React.ComponentProps["currentPlaybackTime"]; + onSeek: React.ComponentProps["onSeek"]; + isPlaybackPaused: boolean; }) => { - return ( -
-
- + return ( +
+
+ - + - -
- -
- ); + +
+ +
+ ); }; diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx index 672d79f..865c424 100644 --- a/components/ProgressBar.tsx +++ b/components/ProgressBar.tsx @@ -1,72 +1,66 @@ import styled from "styled-components"; -import { SliderInput } from "./SliderInput"; +import {SliderInput} from "./SliderInput"; const getWholeMinutesAndSeconds = (time: number) => { - const currentProgressMinutes = Math.floor(time / 60); - const leftSeconds = Math.floor(time % 60); - return { minutes: currentProgressMinutes, seconds: leftSeconds }; + const currentProgressMinutes = Math.floor(time / 60); + const leftSeconds = Math.floor(time % 60); + return {minutes: currentProgressMinutes, seconds: leftSeconds}; }; const PlaybackContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - gap: 20px; - color: #959aa3; - width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + color: #959aa3; + width: 100%; `; const formatMinutesAndSecondsToDisplayString = ({ - minutes, - seconds, + minutes, + seconds, }: { - minutes: number; - seconds: number; + minutes: number; + seconds: number; }) => { - const formattedCurrentMinutes = `${minutes}`.padStart(1, "0"); - const formattedCurrentSeconds = `${seconds}`.padStart(2, "0"); - const formattedCurrentProgress = - formattedCurrentMinutes + ":" + formattedCurrentSeconds; - return formattedCurrentProgress; + const formattedCurrentMinutes = `${minutes}`.padStart(1, "0"); + const formattedCurrentSeconds = `${seconds}`.padStart(2, "0"); + const formattedCurrentProgress = formattedCurrentMinutes + ":" + formattedCurrentSeconds; + return formattedCurrentProgress; }; export const ProgressBar = ({ - totalPlaybackDuration, - currentPlaybackTime, - onSeek, + totalPlaybackDuration, + currentPlaybackTime, + onSeek, }: { - totalPlaybackDuration: number | null; - currentPlaybackTime: number | null; - onSeek: (param: number) => void; + totalPlaybackDuration: number | null; + currentPlaybackTime: number | null; + onSeek: (param: number) => void; }) => { - const currentFlooredTime = getWholeMinutesAndSeconds(currentPlaybackTime); - const formattedCurrentProgress = - formatMinutesAndSecondsToDisplayString(currentFlooredTime); - const totalFlooredTime = getWholeMinutesAndSeconds(totalPlaybackDuration); - const formattedTotalTime = - formatMinutesAndSecondsToDisplayString(totalFlooredTime); + const currentFlooredTime = getWholeMinutesAndSeconds(currentPlaybackTime); + const formattedCurrentProgress = formatMinutesAndSecondsToDisplayString(currentFlooredTime); + const totalFlooredTime = getWholeMinutesAndSeconds(totalPlaybackDuration); + const formattedTotalTime = formatMinutesAndSecondsToDisplayString(totalFlooredTime); - const currentPercentageValue = - currentPlaybackTime && totalPlaybackDuration - ? (currentPlaybackTime / totalPlaybackDuration) * 100 - : 0; + const currentPercentageValue = + currentPlaybackTime && totalPlaybackDuration + ? (currentPlaybackTime / totalPlaybackDuration) * 100 + : 0; - const onProgressUpdate = (percentage: number) => { - const asFraction = percentage / 100; - const newPosition = totalPlaybackDuration * asFraction; - onSeek(newPosition); - }; + const onProgressUpdate = (percentage: number) => { + const asFraction = percentage / 100; + const newPosition = totalPlaybackDuration * asFraction; + onSeek(newPosition); + }; - return ( - - {formattedCurrentProgress} + return ( + + {formattedCurrentProgress} - + - {formattedTotalTime} - - ); + {formattedTotalTime} + + ); }; diff --git a/components/SliderInput.tsx b/components/SliderInput.tsx index 6406e79..21fd35c 100644 --- a/components/SliderInput.tsx +++ b/components/SliderInput.tsx @@ -1,77 +1,77 @@ import styled from "styled-components"; -const SliderWithBackground = styled.input<{ $sliderValue: number }>` - /* removing default appearance */ - -webkit-appearance: none; - appearance: none; - /* creating a custom design */ - width: 100%; - outline: none; - border-radius: 16px; - height: 6px; +const SliderWithBackground = styled.input<{$sliderValue: number}>` + /* removing default appearance */ + -webkit-appearance: none; + appearance: none; + /* creating a custom design */ + width: 100%; + outline: none; + border-radius: 16px; + height: 6px; - background: ${(props) => - `linear-gradient(to right, white ${props.$sliderValue}%, var(--main-bg-color) ${props.$sliderValue}%)`}; + background: ${(props) => + `linear-gradient(to right, white ${props.$sliderValue}%, var(--main-bg-color) ${props.$sliderValue}%)`}; - &::-webkit-slider-thumb { - /* removing default appearance */ - -webkit-appearance: none; - appearance: none; - /* creating a custom design */ - height: 15px; - width: 15px; - border-radius: 50%; - } + &::-webkit-slider-thumb { + /* removing default appearance */ + -webkit-appearance: none; + appearance: none; + /* creating a custom design */ + height: 15px; + width: 15px; + border-radius: 50%; + } - &::-moz-range-thumb { - appearance: none; - height: 0px; - width: 0px; - background-color: none; - border-radius: 50%; - border: none; - } + &::-moz-range-thumb { + appearance: none; + height: 0px; + width: 0px; + background-color: none; + border-radius: 50%; + border: none; + } - &:hover::-webkit-slider-thumb { - background-color: white; - } - &:hover::-moz-range-thumb { - background-color: white; - height: 15px; - width: 15px; - } + &:hover::-webkit-slider-thumb { + background-color: white; + } + &:hover::-moz-range-thumb { + background-color: white; + height: 15px; + width: 15px; + } - &:hover { - background: ${(props) => - `linear-gradient(to right, var(--mainActionColor) ${props.$sliderValue}%, var(--main-bg-color) ${props.$sliderValue}%)`}; - } + &:hover { + background: ${(props) => + `linear-gradient(to right, var(--mainActionColor) ${props.$sliderValue}%, var(--main-bg-color) ${props.$sliderValue}%)`}; + } `; export const SliderInput = ({ - currentPercentageValue, - onSeek, + currentPercentageValue, + onSeek, }: { - currentPercentageValue: number; - onSeek: (param: number) => void; + currentPercentageValue: number; + onSeek: (param: number) => void; }) => { - const defaulted = currentPercentageValue ?? 0; + const defaulted = currentPercentageValue ?? 0; - const onChange = (value: string) => { - const asInt = Number.parseInt(value, 10); - onSeek(asInt); - }; + const onChange = (value: string) => { + const asInt = Number.parseInt(value, 10); + onSeek(asInt); + }; - return ( - <> - onChange(e.target.value)} - /> - - ); + return ( + <> + onChange(e.target.value)} + /> + + ); }; diff --git a/components/TracksList/PlayPauseButton.tsx b/components/TracksList/PlayPauseButton.tsx index de21207..d7231c5 100644 --- a/components/TracksList/PlayPauseButton.tsx +++ b/components/TracksList/PlayPauseButton.tsx @@ -1,21 +1,13 @@ -import { PauseButton, PlayButton } from "../IconButtons/IconButtons"; +import {PauseButton, PlayButton} from "../IconButtons/IconButtons"; export const PlayPauseButton = ({ - playing, - onPlay, - onPause, + playing, + onPlay, + onPause, }: { - playing: boolean; - onPlay: VoidFunction; - onPause: VoidFunction; + playing: boolean; + onPlay: VoidFunction; + onPause: VoidFunction; }) => { - return ( - <> - {playing ? ( - - ) : ( - - )} - - ); + return <>{playing ? : }; }; diff --git a/components/TracksList/TracksList.tsx b/components/TracksList/TracksList.tsx index 3b7ca2c..28f109c 100644 --- a/components/TracksList/TracksList.tsx +++ b/components/TracksList/TracksList.tsx @@ -1,213 +1,201 @@ import styled from "styled-components"; -import { Track } from "../types"; -import { useState } from "react"; -import { PlayPauseButton } from "./PlayPauseButton"; -import { ClockButton } from "../IconButtons/IconButtons"; -import { AnimatedPlayback } from "../../weird-components/AnimatedPlayback"; +import {Track} from "../types"; +import {useState} from "react"; +import {PlayPauseButton} from "./PlayPauseButton"; +import {ClockButton} from "../IconButtons/IconButtons"; +import {AnimatedPlayback} from "../../weird-components/AnimatedPlayback"; const TextOrPlayingAnimation = ({ - displayAnimation, - text, + displayAnimation, + text, }: { - displayAnimation: boolean; - text: number; + displayAnimation: boolean; + text: number; }) => { - return ( - - {displayAnimation ? : <>{text}} - - ); + return ( + {displayAnimation ? : <>{text}} + ); }; const TrackRow = ({ - track, - playCurrentTrack, - index, - trackIsPlaying, - pausePlayback, - isPlaybackPaused, + track, + playCurrentTrack, + index, + trackIsPlaying, + pausePlayback, + isPlaybackPaused, }: { - track: Track; - playCurrentTrack: (param: string) => void; - pausePlayback: VoidFunction; - index: number; - trackIsPlaying: boolean; - isPlaybackPaused: boolean; + track: Track; + playCurrentTrack: (param: string) => void; + pausePlayback: VoidFunction; + index: number; + trackIsPlaying: boolean; + isPlaybackPaused: boolean; }) => { - const [isHovered, setIsHovered] = useState(false); - - const onHover = () => { - setIsHovered(true); - }; - - const onMouseLeave = () => { - setIsHovered(false); - }; - - const isRowPlaybackOngoing = trackIsPlaying && !isPlaybackPaused; - - return ( - - - {isHovered ? ( - playCurrentTrack(track.id)} - playing={isRowPlaybackOngoing} - /> - ) : ( - - )} - - - {track.name} - - albuminnimi - 3.14 - - ); + const [isHovered, setIsHovered] = useState(false); + + const onHover = () => { + setIsHovered(true); + }; + + const onMouseLeave = () => { + setIsHovered(false); + }; + + const isRowPlaybackOngoing = trackIsPlaying && !isPlaybackPaused; + + return ( + + + {isHovered ? ( + playCurrentTrack(track.id)} + playing={isRowPlaybackOngoing} + /> + ) : ( + + )} + + + {track.name} + + albuminnimi + 3.14 + + ); }; export const TracksList = ({ - tracks, - playCurrentTrack, - currentlyPlayingTrack, - pausePlayback, - isPlaybackPaused, + tracks, + playCurrentTrack, + currentlyPlayingTrack, + pausePlayback, + isPlaybackPaused, }: { - tracks: Track[]; - playCurrentTrack: React.ComponentProps["playCurrentTrack"]; - currentlyPlayingTrack?: Track; - pausePlayback: React.ComponentProps["pausePlayback"]; - isPlaybackPaused: boolean; + tracks: Track[]; + playCurrentTrack: React.ComponentProps["playCurrentTrack"]; + currentlyPlayingTrack?: Track; + pausePlayback: React.ComponentProps["pausePlayback"]; + isPlaybackPaused: boolean; }) => { - return ( - - - - - # - Title - Album - - - - - - - - - - - - {tracks.map((track, index) => ( - - ))} - - - - ); + return ( + + + + + # + Title + Album + + + + + + + + + + + + {tracks.map((track, index) => ( + + ))} + + + + ); }; const Container = styled.div` - /* todo this gradient isn't correct */ - /* the color gradient change should stop sooner and just be all gray after that */ - background: linear-gradient(#ad3c34 10%, 25%, var(--main-bg-color) 90%); - height: 100%; - color: var(--diminished-text-color); - padding: 20px; + /* todo this gradient isn't correct */ + /* the color gradient change should stop sooner and just be all gray after that */ + background: linear-gradient(#ad3c34 10%, 25%, var(--main-bg-color) 90%); + height: 100%; + color: var(--diminished-text-color); + padding: 20px; `; const THead = styled.thead` - position: sticky; + position: sticky; `; const TrackNumberTh = styled.th` - text-align: center; - margin-right: 30px; - width: 10%; + text-align: center; + margin-right: 30px; + width: 10%; `; const HeaderTh = styled.th` - text-align: start; - width: 45%; + text-align: start; + width: 45%; `; const ClockHeaderTh = styled.th` - width: 10%; + width: 10%; `; const TracksTable = styled.table` - width: 100%; - border-collapse: collapse; - border-spacing: 0; - table-layout: fixed; - - /* get rounded borders for the table */ - td:first-child { - border-radius: 5px 0 0 5px; - } - td:last-child { - border-radius: 0 5px 5px 0; - } + width: 100%; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + + /* get rounded borders for the table */ + td:first-child { + border-radius: 5px 0 0 5px; + } + td:last-child { + border-radius: 0 5px 5px 0; + } `; // base component for setting opaque layer on hover -const HoverHighlightTd = styled.td<{ $hovered?: boolean }>` - background-color: ${(props) => - props.$hovered ? "rgba(255, 255, 255, 0.1)" : "unset"}; +const HoverHighlightTd = styled.td<{$hovered?: boolean}>` + background-color: ${(props) => (props.$hovered ? "rgba(255, 255, 255, 0.1)" : "unset")}; `; // TODO https://styled-components.com/docs/advanced#style-objects // could that be used to deal with the hover highlighting? const TrackNumberTd = styled(HoverHighlightTd)` - display: flex; - flex-wrap: wrap; - justify-content: center; - align-content: center; - /* so the on-hover play button doesn't make the row jump */ - min-height: 40px; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + /* so the on-hover play button doesn't make the row jump */ + min-height: 40px; `; -const TrackNameTd = styled(HoverHighlightTd)<{ $isRowActive?: boolean }>` - // todo can the variables be accessed without writing a string here? - color: ${(props) => - props.$isRowActive ? "var(--mainActionColor)" : "var(--text-on-main-bg)"}; +const TrackNameTd = styled(HoverHighlightTd)<{$isRowActive?: boolean}>` + // todo can the variables be accessed without writing a string here? + color: ${(props) => (props.$isRowActive ? "var(--mainActionColor)" : "var(--text-on-main-bg)")}; `; const DividerTh = styled.th` - height: 1px; - padding: 0px; - background-color: #7e7d7d; + height: 1px; + padding: 0px; + background-color: #7e7d7d; `; -const NoBorderTr = styled.tr<{ $isRowActive?: boolean }>` - border: none; - color: ${(props) => - props.$isRowActive ? "var(--mainActionColor)" : "unset"}; +const NoBorderTr = styled.tr<{$isRowActive?: boolean}>` + border: none; + color: ${(props) => (props.$isRowActive ? "var(--mainActionColor)" : "unset")}; `; const AnimationContainer = styled.span` - width: 80%; - height: 30px; - display: flex; - flex-wrap: wrap; - align-content: center; - justify-content: center; + width: 80%; + height: 30px; + display: flex; + flex-wrap: wrap; + align-content: center; + justify-content: center; `; diff --git a/components/VolumeBar/VolumeControls.tsx b/components/VolumeBar/VolumeControls.tsx index 31f3888..f49bea1 100644 --- a/components/VolumeBar/VolumeControls.tsx +++ b/components/VolumeBar/VolumeControls.tsx @@ -1,43 +1,39 @@ import styled from "styled-components"; -import { SliderInput } from "../SliderInput"; -import { MutedButton, VolumeDownButton } from "../IconButtons/IconButtons"; +import {SliderInput} from "../SliderInput"; +import {MutedButton, VolumeDownButton} from "../IconButtons/IconButtons"; export const VolumeControls = ({ - onVolumeChange, - currentVolumeFraction, - onMuteClick, - isMuted, + onVolumeChange, + currentVolumeFraction, + onMuteClick, + isMuted, }: { - onVolumeChange: (newVolumeFraction: number) => void; - currentVolumeFraction: number; - onMuteClick: VoidFunction; - isMuted: boolean; + onVolumeChange: (newVolumeFraction: number) => void; + currentVolumeFraction: number; + onMuteClick: VoidFunction; + isMuted: boolean; }) => { - const onSeek = (newVal: number) => { - const fraction = newVal / 100; - onVolumeChange(fraction); - }; + const onSeek = (newVal: number) => { + const fraction = newVal / 100; + onVolumeChange(fraction); + }; - const volumePercentage = currentVolumeFraction * 100; + const volumePercentage = currentVolumeFraction * 100; - return ( - - {isMuted ? ( - - ) : ( - - )} - - - ); + return ( + + {isMuted ? : } + + + ); }; const Container = styled.div` - width: 100%; - height: 100%; - padding: 0 40px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + padding: 0 40px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; `; diff --git a/components/playbackControls.module.css b/components/playbackControls.module.css index a4e492d..52424a1 100644 --- a/components/playbackControls.module.css +++ b/components/playbackControls.module.css @@ -1,15 +1,15 @@ .playbackControls { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - gap: 10px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; } .buttonContainer { - display: flex; - justify-content: center; - align-items: center; - gap: 15px; - min-height: 45px; + display: flex; + justify-content: center; + align-items: center; + gap: 15px; + min-height: 45px; } diff --git a/components/types.tsx b/components/types.tsx index 1e62917..0d7d783 100644 --- a/components/types.tsx +++ b/components/types.tsx @@ -1,6 +1,6 @@ export type Track = { - name: string; - uri: string; - imgUri?: string; - id: string; + name: string; + uri: string; + imgUri?: string; + id: string; }; diff --git a/pages/_app.tsx b/pages/_app.tsx index 02ac099..e226a4a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,5 @@ import "../styles/global.css"; -export default function App({ Component, pageProps }) { - return ; +export default function App({Component, pageProps}) { + return ; } diff --git a/pages/index.tsx b/pages/index.tsx index f81863d..c1b2582 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,131 +1,127 @@ "use client"; import styles from "../styles/Home.module.css"; -import { useEffect, useRef, useState } from "react"; -import { PlaybackControls } from "../components/PlaybackControls"; -import { Track } from "../components/types"; -import { TracksList } from "../components/TracksList/TracksList"; -import { Library } from "../components/Library"; -import { VolumeControls } from "../components/VolumeBar/VolumeControls"; +import {useEffect, useRef, useState} from "react"; +import {PlaybackControls} from "../components/PlaybackControls"; +import {Track} from "../components/types"; +import {TracksList} from "../components/TracksList/TracksList"; +import {Library} from "../components/Library"; +import {VolumeControls} from "../components/VolumeBar/VolumeControls"; export default function App() { - const [currentSong, setCurrentSong] = useState(null); - const [currentPlaybackTime, setCurrentPlaybackTime] = useState( - null - ); - const [currentVolume, setCurrentVolume] = useState(0.5); - const [isMuted, setIsMuted] = useState(false); - const musicPlayer = useRef(null); - - const isPlaybackPaused = musicPlayer.current?.paused || currentSong === null; - - if (musicPlayer.current) { - musicPlayer.current.volume = currentVolume; - musicPlayer.current.muted = isMuted; - } - - useEffect(() => { - if (currentSong) { - playPlayback(); - } else { - pausePlayback(); - } - }, [currentSong]); - - const pausePlayback = () => { - musicPlayer.current.pause(); - }; - - const playPlayback = () => { - musicPlayer.current.play(); - }; - - const onTimeUpdate = (currentTime: number) => { - setCurrentPlaybackTime(currentTime); - }; - - const changeSong = (songId: string) => { - const song = songs.find((s) => s.id === songId); - setCurrentSong(song); - }; - - const onSeek = (time: number) => { - musicPlayer.current.currentTime = time; - setCurrentPlaybackTime(time); - }; - - const onVolumeChange = (newVolume: number) => { - setCurrentVolume(newVolume); - }; - - const onMuteClick = () => { - setIsMuted(!isMuted); - }; - - const songs: Track[] = [ - { - uri: "/alex-productions-action.mp3", - imgUri: "/action.jfif", - name: "Action", - id: "1", - }, - { - uri: "/alex-productions-tension.mp3", - imgUri: "/action.jfif", - name: "tension", - id: "2", - }, - ]; - return ( -
-
- ); + + ); } diff --git a/styles/Home.module.css b/styles/Home.module.css index 69b4c7f..a010fe9 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,145 +1,147 @@ .playButton { - background-color: whitesmoke; + background-color: whitesmoke; } .gridContainer { - min-height: 100vh; - padding: 0; - display: grid; - grid-template-columns: 1fr 2fr 1fr; - grid-template-rows: 1fr 8fr 1fr; - grid-template-areas: - "header header header" - "leftnav maincontent rightnav" - "bottomleft bottomcenter bottomright"; + min-height: 100vh; + padding: 0; + display: grid; + grid-template-columns: 1fr 2fr 1fr; + grid-template-rows: 1fr 8fr 1fr; + grid-template-areas: + "header header header" + "leftnav maincontent rightnav" + "bottomleft bottomcenter bottomright"; } .bottomLeft { - background-color: var(--main-bg-black); - grid-area: bottomleft; + background-color: var(--main-bg-black); + grid-area: bottomleft; } .bottomCenter { - background-color: var(--main-bg-black); - grid-area: bottomcenter; + background-color: var(--main-bg-black); + grid-area: bottomcenter; } .bottomRight { - background-color: var(--main-bg-black); - grid-area: bottomright; + background-color: var(--main-bg-black); + grid-area: bottomright; } .searchNavBar { - background-color: var(--main-bg-black); - grid-area: header; + background-color: var(--main-bg-black); + grid-area: header; } .leftNav { - background-color: var(--main-bg-black); - grid-area: leftnav; - padding: 5px; + background-color: var(--main-bg-black); + grid-area: leftnav; + padding: 5px; } .mainContent { - background-color: var(--main-bg-black); - grid-area: maincontent; - padding: 5px; + background-color: var(--main-bg-black); + grid-area: maincontent; + padding: 5px; } .rightNav { - /* background-color: var(--main-bg-color); */ - background-color: var(--main-bg-black); - grid-area: rightnav; + /* background-color: var(--main-bg-color); */ + background-color: var(--main-bg-black); + grid-area: rightnav; } /* tästä alle on alkuperäiset shitit */ .container { - min-height: 100vh; - padding: 0 0.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + min-height: 100vh; + padding: 0 0.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .title a { - color: #0070f3; - text-decoration: none; + color: #0070f3; + text-decoration: none; } .title a:hover, .title a:focus, .title a:active { - text-decoration: underline; + text-decoration: underline; } .title { - margin: 0 0 1rem; - line-height: 1.15; - font-size: 3.6rem; + margin: 0 0 1rem; + line-height: 1.15; + font-size: 3.6rem; } .title { - text-align: center; + text-align: center; } .title, .description { - text-align: center; + text-align: center; } .description { - line-height: 1.5; - font-size: 1.5rem; + line-height: 1.5; + font-size: 1.5rem; } .grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; - max-width: 800px; - margin-top: 3rem; + max-width: 800px; + margin-top: 3rem; } .card { - margin: 1rem; - flex-basis: 45%; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: + color 0.15s ease, + border-color 0.15s ease; } .card:hover, .card:focus, .card:active { - color: #0070f3; - border-color: #0070f3; + color: #0070f3; + border-color: #0070f3; } .card h3 { - margin: 0 0 1rem 0; - font-size: 1.5rem; + margin: 0 0 1rem 0; + font-size: 1.5rem; } .card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; + margin: 0; + font-size: 1.25rem; + line-height: 1.5; } .logo { - height: 1em; + height: 1em; } @media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } + .grid { + width: 100%; + flex-direction: column; + } } diff --git a/styles/global.css b/styles/global.css index 40ae20d..7b5920a 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,33 +1,44 @@ html, body { - padding: 0; - margin: 0; - font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + padding: 0; + margin: 0; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, + sans-serif; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } * { - box-sizing: border-box; + box-sizing: border-box; } img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } :root { - --main-bg-color: #262121; - --main-bg-black: black; - --text-on-main-bg: #efefef; - --diminished-text-color: #b8b8b8; - --mainActionColor: #1db954; + --main-bg-color: #262121; + --main-bg-black: black; + --text-on-main-bg: #efefef; + --diminished-text-color: #b8b8b8; + --mainActionColor: #1db954; } .card { - border-radius: 10px; + border-radius: 10px; }