Skip to content

Commit

Permalink
feat: Add volume adjust to player
Browse files Browse the repository at this point in the history 
* feat: Add volume adjust to PlayerBig (#2)

* feat: Move volume adjust to the left side (#2)

* fix: PlayerBig random thickness w style width: 93% (#2)

* style: Add animation to volume slider

Co-authored-by: cthulhu <>
Co-authored-by: Orhun Parmaksız <[email protected]>
  • Loading branch information
@Cthulhu2 @orhun
Cthulhu2 and orhun authored Dec 13, 2021
1 parent aecd771 commit a29ae4e
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 152 deletions.
5 changes: 4 additions & 1 deletion components/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { generateEmbedString, getRandomInt, showToast } from "../utils";
function Player({ sharedTrackId, backSideContent, latestId }) {
const [isPlay, setIsPlay] = React.useState(false);
const [player, setPlayer] = React.useState(null);
const [volume, setVolume] = React.useState(80);
const [maxId] = React.useState(latestId);
const [trackId, setTrackId] = React.useState(
sharedTrackId ? sharedTrackId : getRandomInt(0, latestId)
Expand Down Expand Up @@ -126,7 +127,7 @@ function Player({ sharedTrackId, backSideContent, latestId }) {
);

React.useEffect(() => {
setPlayer(new ChiptuneJsPlayer(new ChiptuneJsConfig(0)));
setPlayer(new ChiptuneJsPlayer(new ChiptuneJsConfig(0, volume)));
}, []);

React.useEffect(() => {
Expand Down Expand Up @@ -279,6 +280,8 @@ function Player({ sharedTrackId, backSideContent, latestId }) {
progress={progress}
max={max}
player={player}
volume={volume}
setVolume={setVolume}
isPlay={isPlay}
togglePlay={togglePlay}
setProgress={setProgress}
Expand Down
4 changes: 2 additions & 2 deletions components/Player.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
display: flex;
background-color: black;
flex-direction: column;
width: 450px;
padding: 15px 20px 10px 20px;
width: 465px;
padding: 15px 30px 10px 5px;
color: white;
opacity: 1;
margin: 30px 0 30px 0;
Expand Down
305 changes: 165 additions & 140 deletions components/PlayerBig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ function PlayerBig({
progress,
max,
player,
volume,
setVolume,
isPlay,
togglePlay,
setProgress,
Expand Down Expand Up @@ -111,153 +113,176 @@ function PlayerBig({

return (
<React.Fragment>
<div className={styles.wheader}>
<div className={styles.downloadWrap}>
<DownloadButton
height="30"
width="60"
onClick={() => downloadTrack()}
/>
<LikeButton
className={styles.likeButton}
height="30"
width="60"
onClick={() =>
likeCurrentTrack(favoriteModsRuntime, updateFavoriteModsRuntime)
}
<div className={styles.container}>
<div className={styles.contentVolume}>
<Slider
railStyle={{backgroundColor: "white", width: 6}}
trackStyle={{backgroundColor: "#bd00ff", width: 6}}
handleStyle={{
borderColor: "#bd00ff",
backgroundColor: "#bd00ff",
}}
value={volume}
min={0}
max={100}
step={1}
vertical={true}
onChange={(val) => {
setVolume(val);
player.setVolume(val);
}}
/>
</div>
<img
className={styles.banner}
src={`/images/disc_${isPlay ? "anim" : "idle"}.gif`}
alt="anim"
/>
<div className={styles.shareWrap}>
<ShareIcon
height="30"
width="60"
onClick={() => {
setDropDownClass(
dropDownClass === dropDownClose ? dropDownOpen : dropDownClose
);
<div className={styles.contentPlayer}>
<div className={styles.wheader}>
<div className={styles.downloadWrap}>
<DownloadButton
height="30"
width="60"
onClick={() => downloadTrack()}
/>
<LikeButton
className={styles.likeButton}
height="30"
width="60"
onClick={() =>
likeCurrentTrack(favoriteModsRuntime, updateFavoriteModsRuntime)
}
/>
</div>
<img
className={styles.banner}
src={`/images/disc_${isPlay ? "anim" : "idle"}.gif`}
alt="anim"
/>
<div className={styles.shareWrap}>
<ShareIcon
height="30"
width="60"
onClick={() => {
setDropDownClass(
dropDownClass === dropDownClose ? dropDownOpen : dropDownClose
);
}}
/>
<div className={dropDownClass}>
<TwitterOutlineIcon
height="30"
width="30"
onClick={() => shareOnTwitter()}
/>
<CodeIcon height="30" width="30" onClick={() => copyEmbed()}/>
</div>
</div>
</div>
<h2 className={styles.title}>{title ? title : "[No Title]"}</h2>
{!loading ? (
<ul className={styles.metadata}>
{metaData.artist ? <li>Artist: {metaData.artist}</li> : null}
{metaData.date ? <li>Date: {metaData.date}</li> : null}
<li>Type: {metaData.type}</li>
<li>
<a
href={`https://modarchive.org/index.php?request=view_by_moduleid&query=${trackId}`}
target="_blank"
className={styles.modlink}
>
Track Id: #{trackId}
</a>
</li>
{metaData.message ? (
<li>Message: {metaData.message.replace(/\n{2,}/g, "\n")}</li>
) : null}
</ul>
) : (
<LoadingState/>
)}
<Slider
railStyle={{backgroundColor: "white", height: 6}}
trackStyle={{backgroundColor: "#bd00ff", height: 6}}
handleStyle={{
borderColor: "#bd00ff",
backgroundColor: "#bd00ff",
}}
className={styles.seekbar}
value={progress}
max={max}
onChange={(val) => {
setProgress(val);
player.seek(val);
}}
/>
<div className={dropDownClass}>
<TwitterOutlineIcon
height="30"
width="30"
onClick={() => shareOnTwitter()}
<div className={styles.seekNumbers}>
<span>{moment().startOf("day").seconds(progress).format("mm:ss")}</span>
<span>{moment().startOf("day").seconds(max).format("mm:ss")}</span>
</div>
<div className={styles.actionButtonsWrapper}>
<LeftButton
height="70"
width="70"
onClick={!loading ? () => playPrevious() : null}
disable={currentId === 0 || loading ? "true" : "false"}
/>
{!isPlay ? (
<PlayButton
className={styles.actionbtn}
height="130"
width="130"
onClick={!loading ? () => togglePlay() : null}
/>
) : (
<PauseButton
className={styles.actionbtn}
height="130"
width="130"
onClick={() => togglePlay()}
/>
)}
<RightButton
height="70"
width="70"
onClick={!loading ? () => playNext() : null}
disable={loading ? "true" : "false"}
/>
<CodeIcon height="30" width="30" onClick={() => copyEmbed()} />
</div>
</div>
</div>
<h2 className={styles.title}>{title ? title : "[No Title]"}</h2>
{!loading ? (
<ul className={styles.metadata}>
{metaData.artist ? <li>Artist: {metaData.artist}</li> : null}
{metaData.date ? <li>Date: {metaData.date}</li> : null}
<li>Type: {metaData.type}</li>
<li>
<a
href={`https://modarchive.org/index.php?request=view_by_moduleid&query=${trackId}`}
target="_blank"
className={styles.modlink}
>
Track Id: #{trackId}
</a>
</li>
{metaData.message ? (
<li>Message: {metaData.message.replace(/\n{2,}/g, "\n")}</li>
) : null}
</ul>
) : (
<LoadingState />
)}
<Slider
railStyle={{ backgroundColor: "white", height: 6 }}
trackStyle={{ backgroundColor: "#bd00ff", height: 6 }}
handleStyle={{
borderColor: "#bd00ff",
backgroundColor: "#bd00ff",
}}
className={styles.seekbar}
value={progress}
max={max}
onChange={(val) => {
setProgress(val);
player.seek(val);
}}
/>
<div className={styles.seekNumbers}>
<span>{moment().startOf("day").seconds(progress).format("mm:ss")}</span>
<span>{moment().startOf("day").seconds(max).format("mm:ss")}</span>
</div>
<div className={styles.actionButtonsWrapper}>
<LeftButton
height="70"
width="70"
onClick={!loading ? () => playPrevious() : null}
disable={currentId === 0 || loading ? "true" : "false"}
/>
{!isPlay ? (
<PlayButton
className={styles.actionbtn}
height="130"
width="130"
onClick={!loading ? () => togglePlay() : null}
/>
) : (
<PauseButton
className={styles.actionbtn}
height="130"
width="130"
onClick={() => togglePlay()}
/>
)}
<RightButton
height="70"
width="70"
onClick={!loading ? () => playNext() : null}
disable={loading ? "true" : "false"}
/>
</div>
<div className={styles.footer}>
<div className={styles.footerLeft}>
<QuestionIcon
className={styles.question}
height="30"
width="30"
onClick={() => toggleHelpDrawer()}
/>
</div>
<div className={styles.footerCenter}>
<ArrowIcon
className={styles.arrow}
height="20"
width="50"
onClick={() => changeSize()}
/>
</div>
<div className={styles.footer}>
<div className={styles.footerLeft}>
<QuestionIcon
className={styles.question}
height="30"
width="30"
onClick={() => toggleHelpDrawer()}
/>
</div>
<div className={styles.footerCenter}>
<ArrowIcon
className={styles.arrow}
height="20"
width="50"
onClick={() => changeSize()}
/>
</div>

<div className={styles.footerRight}>
<PlayListButton
id="playlistButton"
className={styles.playlistButton}
height="30"
width="30"
onClick={() => toggleLikedModsDrawer()}
/>
<RepeatIcon
id="repeat"
className={styles.repeat}
height="30"
width="30"
onClick={() => {
showToast(`repeat ${!repeat ? "on" : "off"}`);
setRepeat(!repeat);
}}
/>
<div className={styles.footerRight}>
<PlayListButton
id="playlistButton"
className={styles.playlistButton}
height="30"
width="30"
onClick={() => toggleLikedModsDrawer()}
/>
<RepeatIcon
id="repeat"
className={styles.repeat}
height="30"
width="30"
onClick={() => {
showToast(`repeat ${!repeat ? "on" : "off"}`);
setRepeat(!repeat);
}}
/>
</div>
</div>
</div>
</div>
</React.Fragment>
Expand Down
Loading

1 comment on commit a29ae4e

@vercel
Copy link

@vercel vercel bot commented on a29ae4e Dec 13, 2021

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

Please sign in to comment.