feat: play music

buiduc06 · May 3, 2021 · c54af82 · c54af82
1 parent 1657d36
commit c54af82
Show file tree

Hide file tree

Showing 56 changed files with 109 additions and 69 deletions.
diff --git a/public/icons/facetime.png b/public/icons/facetime.png
diff --git a/public/icons/github.png b/public/icons/github.png
diff --git a/public/icons/launchpad.png b/public/icons/launchpad.png
diff --git a/public/icons/mail.png b/public/icons/mail.png
diff --git a/public/icons/safari.png b/public/icons/safari.png
diff --git a/public/icons/terminal.png b/public/icons/terminal.png
diff --git a/public/icons/text.png b/public/icons/text.png
diff --git a/public/icons/vscode.png b/public/icons/vscode.png
diff --git a/public/img/icons/facetime.png b/public/img/icons/facetime.png
diff --git a/public/img/icons/github.png b/public/img/icons/github.png
diff --git a/public/img/icons/launchpad.png b/public/img/icons/launchpad.png
diff --git a/public/icons/launchpad/fishmail.png → public/img/icons/launchpad/fishmail.png b/public/icons/launchpad/fishmail.png → public/img/icons/launchpad/fishmail.png
diff --git a/public/icons/launchpad/flint.png → public/img/icons/launchpad/flint.png b/public/icons/launchpad/flint.png → public/img/icons/launchpad/flint.png
diff --git a/public/icons/launchpad/gungnir.png → public/img/icons/launchpad/gungnir.png b/public/icons/launchpad/gungnir.png → public/img/icons/launchpad/gungnir.png
diff --git a/public/icons/launchpad/icon.png → public/img/icons/launchpad/icon.png b/public/icons/launchpad/icon.png → public/img/icons/launchpad/icon.png
diff --git a/public/icons/launchpad/meta.png → public/img/icons/launchpad/meta.png b/public/icons/launchpad/meta.png → public/img/icons/launchpad/meta.png
diff --git a/public/icons/launchpad/notebook.png → public/img/icons/launchpad/notebook.png b/public/icons/launchpad/notebook.png → public/img/icons/launchpad/notebook.png
diff --git a/public/icons/launchpad/resume.png → public/img/icons/launchpad/resume.png b/public/icons/launchpad/resume.png → public/img/icons/launchpad/resume.png
diff --git a/public/icons/launchpad/rl.png → public/img/icons/launchpad/rl.png b/public/icons/launchpad/rl.png → public/img/icons/launchpad/rl.png
diff --git a/public/img/icons/mail.png b/public/img/icons/mail.png
diff --git a/public/icons/menu/controlcenter.png → public/img/icons/menu/controlcenter.png b/public/icons/menu/controlcenter.png → public/img/icons/menu/controlcenter.png
diff --git a/public/img/icons/notepad.png b/public/img/icons/notepad.png
diff --git a/public/img/icons/safari.png b/public/img/icons/safari.png
diff --git a/public/img/icons/terminal.png b/public/img/icons/terminal.png
diff --git a/public/img/icons/vscode.png b/public/img/icons/vscode.png
diff --git a/public/sites/arxiv.png → public/img/sites/arxiv.png b/public/sites/arxiv.png → public/img/sites/arxiv.png
diff --git a/public/sites/astral.svg → public/img/sites/astral.svg b/public/sites/astral.svg → public/img/sites/astral.svg
diff --git a/public/img/sites/bilibili.svg b/public/img/sites/bilibili.svg
diff --git a/public/sites/dribbble.svg → public/img/sites/dribbble.svg b/public/sites/dribbble.svg → public/img/sites/dribbble.svg
diff --git a/public/sites/facebook.svg → public/img/sites/facebook.svg b/public/sites/facebook.svg → public/img/sites/facebook.svg
diff --git a/public/sites/gitee.svg → public/img/sites/gitee.svg b/public/sites/gitee.svg → public/img/sites/gitee.svg
diff --git a/public/sites/github.svg → public/img/sites/github.svg b/public/sites/github.svg → public/img/sites/github.svg
diff --git a/public/img/sites/gmail.svg b/public/img/sites/gmail.svg
diff --git a/public/sites/hacker.svg → public/img/sites/hacker.svg b/public/sites/hacker.svg → public/img/sites/hacker.svg
diff --git a/public/sites/leetcode.svg → public/img/sites/leetcode.svg b/public/sites/leetcode.svg → public/img/sites/leetcode.svg
diff --git a/public/sites/linkedin.svg → public/img/sites/linkedin.svg b/public/sites/linkedin.svg → public/img/sites/linkedin.svg
diff --git a/public/sites/oh-vue-icons.svg → public/img/sites/oh-vue-icons.svg b/public/sites/oh-vue-icons.svg → public/img/sites/oh-vue-icons.svg
diff --git a/public/sites/pinterest.svg → public/img/sites/pinterest.svg b/public/sites/pinterest.svg → public/img/sites/pinterest.svg
diff --git a/public/sites/reddit.svg → public/img/sites/reddit.svg b/public/sites/reddit.svg → public/img/sites/reddit.svg
diff --git a/public/sites/zhihu.jpeg → public/img/sites/zhihu.jpeg b/public/sites/zhihu.jpeg → public/img/sites/zhihu.jpeg
diff --git a/public/img/avatar.jpg → public/img/ui/avatar.jpg b/public/img/avatar.jpg → public/img/ui/avatar.jpg
diff --git a/public/img/wallpaper-day.jpg → public/img/ui/wallpaper-day.jpg b/public/img/wallpaper-day.jpg → public/img/ui/wallpaper-day.jpg
diff --git a/public/img/wallpaper-night.jpg → public/img/ui/wallpaper-night.jpg b/public/img/wallpaper-night.jpg → public/img/ui/wallpaper-night.jpg
diff --git a/public/img/wallpaper.jpg → public/img/ui/wallpaper.jpg b/public/img/wallpaper.jpg → public/img/ui/wallpaper.jpg
diff --git a/public/index.html b/public/index.html
@@ -25,7 +25,7 @@
  Learn how to configure a non-root public URL by running `npm run build`.
  -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost:300,400,500,700" />
- <title>Xiaohan Zou's Playground</title>
+ <title>Xiaohan Zou's Portfolio</title>
  </head>
  <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
  "short_name": "playground-macos",
- "name": "Xiaohan Zou's playground.",
+ "name": "Xiaohan Zou's Portfolio",
  "icons": [
  {
  "src": "logo/favicon.svg",

diff --git a/public/music/sunflower.mp3 b/public/music/sunflower.mp3
diff --git a/public/sites/bilibili.svg b/public/sites/bilibili.svg
diff --git a/src/components/apps/Safari.js b/src/components/apps/Safari.js
@@ -77,6 +77,7 @@ class NavPage extends Component {
  render() {
  const grid = this.props.width < 640 ? "grid-cols-4" : "grid-cols-8";
  const span = this.props.width < 640 ? "col-span-3" : "col-span-7";
+ const numTracker = Math.floor(Math.random() * 99 + 1);
 
  return (
  <div
@@ -112,13 +113,13 @@ class NavPage extends Component {
  >
  <div className="text-black col-start-1 col-span-1 flex flex-row items-center justify-center space-x-2">
  <FaShieldAlt size={24} />
- <span className="text-xl">1</span>
+ <span className="text-xl">{numTracker}</span>
  </div>
  <div
  className={`col-start-2 ${span} flex items-center text-black`}
  >
- In the last sever days, Safari has prevent 2 tracker from
- profiling you.
+ In the last sever days, Safari has prevent {numTracker} tracker
+ from profiling you.
  </div>
  </div>
  </div>

diff --git a/src/components/topbar/ControlCenterMenu.js b/src/components/topbar/ControlCenterMenu.js
@@ -1,16 +1,15 @@
-import React, { Component, useState } from "react";
+import React, { Component } from "react";
 import nightwind from "nightwind/helper";
 import Slider from "react-rangeslider";
 import "react-rangeslider/lib/index.css";
 
 // ------- import icons -------
 import { FiBluetooth, FiRss } from "react-icons/fi";
-import { BsBrightnessAltHigh, BsPlayFill } from "react-icons/bs";
+import { BsBrightnessAltHigh, BsPlayFill, BsPauseFill } from "react-icons/bs";
 import { IoCopyOutline, IoSunny, IoMoon, IoVolumeHigh } from "react-icons/io5";
 import { FaWifi } from "react-icons/fa";
 
-const SliderComponent = ({ icon }) => {
- const [value, setValue] = useState(Math.floor(Math.random() * 100));
+const SliderComponent = ({ icon, value, setValue }) => {
  return (
  <div className="slider flex flex-row w-full">
  <div className="h-8 p-2 bg-white rounded-l-full">{icon}</div>
@@ -27,11 +26,50 @@ const SliderComponent = ({ icon }) => {
 };
 
 export default class ControlCenterMenu extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ playing: false,
+ volume: 100,
+ brightness: Math.floor(Math.random() * 100)
+ };
+ this.toggleAudio = this.toggleAudio.bind(this);
+ }
+
+ componentDidMount() {
+ this.audio = new Audio("music/sunflower.mp3");
+ this.audio.load();
+ this.audio.addEventListener("ended", () => this.audio.play());
+ this.audio.volume = 1;
+ }
+
+ componentWillUnmount() {
+ this.audio.removeEventListener("ended", () => this.audio.play());
+ }
+
+ toggleAudio = () => {
+ this.setState({ playing: !this.state.playing }, () => {
+ this.state.playing ? this.audio.play() : this.audio.pause();
+ });
+ };
+
  toggleMode = () => {
  this.props.setDark(!this.props.dark);
  nightwind.toggle();
  };
 
+ setVolume = (value) => {
+ this.setState({ volume: value }, () => {
+ this.audio.volume = value / 100;
+ });
+ };
+
+ setBrightness = (value) => {
+ this.setState({
+ brightness: value
+ });
+ };
+
  render() {
  return (
  <div className="fixed w-96 max-w-full top-8 right-0 sm:right-2 z-50 p-2 grid grid-cols-4 grid-rows-5 gap-2 bg-white bg-opacity-25 blur rounded-2xl text-black shadow-2xl">
@@ -102,25 +140,33 @@ export default class ControlCenterMenu extends Component {
  <span className="font-medium">Display</span>
  <SliderComponent
  icon={<IoSunny size={16} className="text-gray-500" />}
+ value={this.state.brightness}
+ setValue={this.setBrightness}
  />
  </div>
  <div className="col-span-4 bg-white bg-opacity-50 blur rounded-xl p-2 space-y-2 flex flex-col justify-around">
  <span className="font-medium">Sound</span>
  <SliderComponent
  icon={<IoVolumeHigh size={16} className="text-gray-500" />}
+ value={this.state.volume}
+ setValue={this.setVolume}
  />
  </div>
  <div className="col-span-4 bg-white bg-opacity-50 blur rounded-xl p-2 pr-4 flex flex-row justify-between items-center space-x-4">
  <img
- src="http://p1.music.126.net/z0IO1vEsowL9mD_5yzUjeA==/109951163936068098.jpg"
+ src="//p1.music.126.net/z0IO1vEsowL9mD_5yzUjeA==/109951163936068098.jpg"
  alt="cover art"
  className="w-16 rounded-lg"
  />
  <div className="flex flex-col flex-grow justify-start">
  <span className="font-medium">Sunflower</span>
  <span className="font-extralight">Post Malone / Swae Lee</span>
  </div>
- <BsPlayFill size={24} />
+ {this.state.playing ? (
+ <BsPauseFill onClick={this.toggleAudio} size={24} />
+ ) : (
+ <BsPlayFill onClick={this.toggleAudio} size={24} />
+ )}
  </div>
  </div>
  );

diff --git a/src/components/topbar/MenuBar.js b/src/components/topbar/MenuBar.js
@@ -68,7 +68,7 @@ export default function MenuBar({ title, dark, setDark, setlogon }) {
  <MenuItem onClick={() => setShowControlCenter(!showControlCenter)}>
  <img
  className="w-4 h-4 filter-invert"
- src="icons/menu/controlcenter.png"
+ src="img/icons/menu/controlcenter.png"
  alt="control center"
  />
  </MenuItem>

diff --git a/src/configs/apps.js b/src/configs/apps.js
@@ -9,14 +9,14 @@ const apps = [
  id: "launchpad",
  title: "Launchpad",
  desktop: false,
- img: "icons/launchpad.png"
+ img: "img/icons/launchpad.png"
  },
  {
  id: "notepad",
  title: "Notepad",
  desktop: true,
  show: false,
- img: "icons/text.png",
+ img: "img/icons/notepad.png",
  content: <Notepad />
  },
  {
@@ -27,23 +27,23 @@ const apps = [
  width: 1024,
  minWidth: 375,
  minHeight: 200,
- img: "icons/safari.png",
+ img: "img/icons/safari.png",
  content: <Safari />
  },
  {
  id: "vscode",
  title: "VSCode",
  desktop: true,
  show: false,
- img: "icons/vscode.png",
+ img: "img/icons/vscode.png",
  content: <VSCode />
  },
  {
  id: "facetime",
  title: "FaceTime",
  desktop: true,
  show: false,
- img: "icons/facetime.png",
+ img: "img/icons/facetime.png",
  height: 530,
  content: <FaceTime />
  },
@@ -52,22 +52,22 @@ const apps = [
  title: "Terminal",
  desktop: true,
  show: false,
- img: "icons/terminal.png",
+ img: "img/icons/terminal.png",
  content: <Terminal />
  },
  {
  id: "email",
  title: "Email",
  desktop: false,
- img: "icons/mail.png",
+ img: "img/icons/mail.png",
  link: "mailto:[email protected]"
  },
  {
  id: "github",
  title: "Github",
  desktop: false,
- img: "icons/github.png",
- link: "https://github.com/Renovamen"
+ img: "img/icons/github.png",
+ link: "https://github.com/Renovamen/playground-macos"
  }
 ];
 

diff --git a/src/configs/launchpad.js b/src/configs/launchpad.js
@@ -2,49 +2,49 @@ const launchpadApps = [
  {
  id: "flint",
  title: "Flint",
- img: "icons/launchpad/flint.png",
+ img: "img/icons/launchpad/flint.png",
  link: "https://github.com/Renovamen/flint"
  },
  {
  id: "metallic",
  title: "Metallic",
- img: "icons/launchpad/meta.png",
+ img: "img/icons/launchpad/meta.png",
  link: "https://github.com/Renovamen/metallic"
  },
  {
  id: "alkaid",
  title: "Alkaid",
- img: "icons/launchpad/rl.png",
+ img: "img/icons/launchpad/rl.png",
  link: "https://github.com/Renovamen/alkaid"
  },
  {
  id: "oh-vue-icons",
  title: "Oh, Vue Icons!",
- img: "icons/launchpad/icon.png",
+ img: "img/icons/launchpad/icon.png",
  link: "https://oh-vue-icons.netlify.app/"
  },
  {
  id: "gungnir",
  title: "Gungnir",
- img: "icons/launchpad/gungnir.png",
+ img: "img/icons/launchpad/gungnir.png",
  link: "https://vuepress-theme-gungnir.vercel.app/"
  },
  {
  id: "what-if",
  title: "My Notebook",
- img: "icons/launchpad/notebook.png",
+ img: "img/icons/launchpad/notebook.png",
  link: "https://note.zxh.io"
  },
  {
  id: "fishmail",
  title: "Fishmail",
- img: "icons/launchpad/fishmail.png",
+ img: "img/icons/launchpad/fishmail.png",
  link: "https://fishmail.vercel.app/"
  },
  {
  id: "resume",
  title: "Résumé",
- img: "icons/launchpad/resume.png",
+ img: "img/icons/launchpad/resume.png",
  link: "https://resume.zxh.io/"
  }
 ];

diff --git a/src/configs/wallpapers.js b/src/configs/wallpapers.js
@@ -1,6 +1,6 @@
 const wallpapers = {
- day: "img/wallpaper-day.jpg",
- night: "img/wallpaper-night.jpg"
+ day: "img/ui/wallpaper-day.jpg",
+ night: "img/ui/wallpaper-night.jpg"
 };
 
 export default wallpapers;