fix: fix screen and audio controller

README.md

@@ -1,6 +1,6 @@
 # playground-macos
 
-My portfolio website simulating macOS's GUI: https://zxh.vercel.app
+My portfolio website simulating macOS's GUI: https://portfolio.zxh.io
 
 Powered by [React](https://reactjs.org/) and [tailwindcss](https://tailwindcss.com/).
 

public/markdown/about-me.md

@@ -27,4 +27,4 @@ Reach me at:
 
 ## Résumé
 
-My résumé can be found [here](https://zxh.io/files/cv/brief/en.pdf).
+My résumé can be found here: [English](https://zxh.io/files/cv/brief/en.pdf) / [中文](https://zxh.io/files/cv/brief/cn.pdf).

src/components/apps/Bear.js

@@ -29,7 +29,7 @@ const Highlighter = (dark) => {
 class Sidebar extends Component {
   render() {
     return (
-      <div className="nightwind-prevent w-full h-full bg-gray-700 text-white overflow-y-scroll">
+      <div className="sidebar w-full h-full bg-gray-700 text-white overflow-y-scroll">
         <div className="h-12 pr-3 flex flex-row justify-end items-center">
           <IoCloudOfflineOutline className="mr-3" size={20} />
           <GiSettingsKnobs size={20} />
@@ -56,7 +56,7 @@ class Sidebar extends Component {
 class Middlebar extends Component {
   render() {
     return (
-      <div className="w-full h-full bg-gray-50 border-r border-gray-300 overflow-y-scroll">
+      <div className="midbar w-full h-full bg-gray-50 border-r border-gray-300 overflow-y-scroll">
         <ul>
           {this.props.items.map((item, index) => (
             <li
@@ -120,7 +120,7 @@ class Content extends Component {
 
   render() {
     return (
-      <div className="bear w-full h-full bg-gray-50 text-gray-700 overflow-scroll py-6">
+      <div className="markdown w-full h-full bg-gray-50 text-gray-700 overflow-scroll py-6">
         <div className="w-2/3 px-2 mx-auto">
           <ReactMarkdown
             children={this.state.storeMd[this.props.id]}
@@ -166,7 +166,7 @@ export default class Bear extends Component {
 
   render() {
     return (
-      <div className="flex flex-row w-full h-full">
+      <div className="bear flex flex-row w-full h-full">
         <div className="flex-none w-44">
           <Sidebar cur={this.state.curSidebar} setMidBar={this.setMidBar} />
         </div>

src/components/apps/Safari.js

@@ -5,20 +5,7 @@ import { FaShieldAlt } from "react-icons/fa";
 import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
 import { BsLayoutSidebar } from "react-icons/bs";
 import { IoShareOutline, IoCopyOutline } from "react-icons/io5";
-
-// https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
-const checkURL = (str) => {
-  const pattern = new RegExp(
-    "^(https?:\\/\\/)?" + // protocol
-      "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
-      "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
-      "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
-      "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
-      "(\\#[-a-z\\d_]*)?$",
-    "i" // fragment locator
-  );
-  return !!pattern.test(str);
-};
+import { checkURL } from "../../utils/url";
 
 class NavSection extends Component {
   render() {

src/components/dock/Dock.js

@@ -3,9 +3,15 @@ import { useMotionValue } from "framer-motion";
 import apps from "../../configs/apps";
 import DockItem from "./DockItem";
 
-export default function Dock({ open, showApps, toggleLaunchpad, hide }) {
+export default function Dock({
+  open,
+  showApps,
+  showLaunchpad,
+  toggleLaunchpad,
+  hide
+}) {
   const openApp = (id) => {
-    if (id === "launchpad") toggleLaunchpad();
+    if (id === "launchpad") toggleLaunchpad(!showLaunchpad);
     else {
       toggleLaunchpad(false);
       open(id);

src/components/topbar/AppleMenu.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { MenuItem, MenuItemGroup } from "../menu/base";
 
-export default function AppleMenu({ setlogon }) {
+export default function AppleMenu({ logout }) {
   return (
     <div className="fixed top-6 left-4 w-56 bg-gray bg-gray-200 bg-opacity-90 blur rounded-b-lg">
       <MenuItemGroup>
@@ -18,15 +18,13 @@ export default function AppleMenu({ setlogon }) {
         <MenuItem>Force Quit...</MenuItem>
       </MenuItemGroup>
       <MenuItemGroup>
-        <MenuItem onClick={() => setlogon(false)}>Sleep</MenuItem>
-        <MenuItem onClick={() => setlogon(false)}>Restart...</MenuItem>
-        <MenuItem onClick={() => setlogon(false)}>Shut Down...</MenuItem>
+        <MenuItem onClick={logout}>Sleep</MenuItem>
+        <MenuItem onClick={logout}>Restart...</MenuItem>
+        <MenuItem onClick={logout}>Shut Down...</MenuItem>
       </MenuItemGroup>
       <MenuItemGroup border={false}>
-        <MenuItem onClick={() => setlogon(false)}>Lock Screen</MenuItem>
-        <MenuItem onClick={() => setlogon(false)}>
-          Log Out Xiaohan Zou...
-        </MenuItem>
+        <MenuItem onClick={logout}>Lock Screen</MenuItem>
+        <MenuItem onClick={logout}>Log Out Xiaohan Zou...</MenuItem>
       </MenuItemGroup>
     </div>
   );

src/components/topbar/ControlCenterMenu.js

@@ -15,21 +15,6 @@ import {
 import { IoSunny, IoMoon, IoVolumeHigh } from "react-icons/io5";
 import { FaWifi } from "react-icons/fa";
 
-const enterFullScreen = () => {
-  const element = document.documentElement;
-  if (element.requestFullscreen) element.requestFullscreen();
-  else if (element.msRequestFullscreen) element.msRequestFullscreen();
-  else if (element.mozRequestFullScreen) element.mozRequestFullScreen();
-  else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen();
-};
-
-const exitFullScreen = () => {
-  if (document.exitFullscreen) document.exitFullscreen();
-  else if (document.msExitFullscreen) document.msExitFullscreen();
-  else if (document.mozExitFullScreen) document.mozExitFullScreen();
-  else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
-};
-
 const SliderComponent = ({ icon, value, setValue }) => {
   return (
     <div className="slider flex flex-row w-full">
@@ -47,85 +32,11 @@ const SliderComponent = ({ icon, value, setValue }) => {
 };
 
 export default class ControlCenterMenu extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      playing: false,
-      volume: 100,
-      brightness: Math.floor(Math.random() * 100),
-      btn: {
-        wifi: true,
-        bluetooth: true,
-        airdrop: true
-      },
-      fullscreen: false
-    };
-    this.toggleAudio = this.toggleAudio.bind(this);
-    this.resize.bind(this);
-  }
-
-  componentDidMount() {
-    window.addEventListener("resize", this.resize);
-    this.audio = new Audio("music/sunflower.mp3");
-    this.audio.load();
-    this.audio.addEventListener("ended", () => this.audio.play());
-    this.audio.volume = 1;
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.resize);
-    this.audio.removeEventListener("ended", () => this.audio.play());
-  }
-
-  resize = () => {
-    const isFullScreen = !!(
-      document.webkitIsFullScreen ||
-      document.mozFullScreen ||
-      document.msFullscreenElement ||
-      document.fullscreenElement
-    );
-    this.setState({
-      fullscreen: isFullScreen
-    });
-  };
-
-  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();
   };
 
-  toggleBtn = (name) => {
-    let btn = this.state.btn;
-    btn[name] = !btn[name];
-    this.setState({
-      btn: btn
-    });
-  };
-
-  toggleFullScreen = () => {
-    this.setState({ fullscreen: !this.state.fullscreen }, () => {
-      this.state.fullscreen ? enterFullScreen() : exitFullScreen();
-    });
-  };
-
-  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">
@@ -134,50 +45,50 @@ export default class ControlCenterMenu extends Component {
             <FaWifi
               size={36}
               className={`${
-                this.state.btn.wifi
+                this.props.btn.wifi
                   ? "bg-blue-500 text-white"
                   : "bg-gray-300 text-gray-700"
               } rounded-full p-2`}
-              onClick={() => this.toggleBtn("wifi")}
+              onClick={() => this.props.toggleBtn("wifi")}
             />
             <div className="flex flex-col">
               <span className="font-medium">Wifi</span>
               <span className="font-thin text-xs">
-                {this.state.btn.wifi ? "Home" : "Off"}
+                {this.props.btn.wifi ? "Home" : "Off"}
               </span>
             </div>
           </div>
           <div className="flex flex-row items-center space-x-2 pr-6">
             <FiBluetooth
               size={36}
               className={`${
-                this.state.btn.bluetooth
+                this.props.btn.bluetooth
                   ? "bg-blue-500 text-white"
                   : "bg-gray-300 text-gray-700"
               } rounded-full p-2`}
-              onClick={() => this.toggleBtn("bluetooth")}
+              onClick={() => this.props.toggleBtn("bluetooth")}
             />
             <div className="flex flex-col">
               <span className="font-medium">Bluetooth</span>
               <span className="font-thin text-xs">
-                {this.state.btn.bluetooth ? "On" : "Off"}
+                {this.props.btn.bluetooth ? "On" : "Off"}
               </span>
             </div>
           </div>
           <div className="flex flex-row items-center space-x-2 pr-6">
             <FiRss
               size={36}
               className={`${
-                this.state.btn.airdrop
+                this.props.btn.airdrop
                   ? "bg-blue-500 text-white"
                   : "bg-gray-300 text-gray-700"
               } rounded-full p-2`}
-              onClick={() => this.toggleBtn("airdrop")}
+              onClick={() => this.props.toggleBtn("airdrop")}
             />
             <div className="flex flex-col">
               <span className="font-medium">AirDrop</span>
               <span className="font-thin text-xs">
-                {this.state.btn.airdrop ? "Contacts Only" : "Off"}
+                {this.props.btn.airdrop ? "Contacts Only" : "Off"}
               </span>
             </div>
           </div>
@@ -207,29 +118,35 @@ export default class ControlCenterMenu extends Component {
           <span className="text-xs">Keyboard Brightness</span>
         </div>
         <div className="bg-white bg-opacity-50 blur rounded-xl p-2 flex flex-col justify-center items-center text-center">
-          {this.state.fullscreen ? (
-            <BsFullscreenExit size={16} onClick={this.toggleFullScreen} />
+          {this.props.fullscreen ? (
+            <BsFullscreenExit
+              size={16}
+              onClick={() => this.props.toggleFullScreen(false)}
+            />
           ) : (
-            <BsFullscreen size={16} onClick={this.toggleFullScreen} />
+            <BsFullscreen
+              size={16}
+              onClick={() => this.props.toggleFullScreen(true)}
+            />
           )}
           <span className="text-xs mt-1.5">
-            {this.state.fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
+            {this.props.fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
           </span>
         </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">Display</span>
           <SliderComponent
             icon={<IoSunny size={16} className="text-gray-500" />}
-            value={this.state.brightness}
-            setValue={this.setBrightness}
+            value={this.props.brightness}
+            setValue={this.props.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}
+            value={this.props.volume}
+            setValue={this.props.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">
@@ -242,10 +159,16 @@ export default class ControlCenterMenu extends Component {
             <span className="font-medium">Sunflower</span>
             <span className="font-extralight">Post Malone / Swae Lee</span>
           </div>
-          {this.state.playing ? (
-            <BsPauseFill onClick={this.toggleAudio} size={24} />
+          {this.props.playing ? (
+            <BsPauseFill
+              onClick={() => this.props.toggleAudio(false)}
+              size={24}
+            />
           ) : (
-            <BsPlayFill onClick={this.toggleAudio} size={24} />
+            <BsPlayFill
+              onClick={() => this.props.toggleAudio(true)}
+              size={24}
+            />
           )}
         </div>
       </div>