added youtube & player apps

3 files changed, 10 insertions, 12 deletions

diff --git a/components/App.js b/components/App.js
index 84268cb..9faa9c9 100644
--- a/components/App.js
+++ b/components/App.js
@@ -10,9 +10,7 @@ const App = ({ children, app, setApps }) => {
   const winRef = useRef(null)
   const forceMax = useMediaQuery(`(max-width: ${app.width}), (max-height: ${app.height})`)
 
-  useEffect(() => {
-    move(app, winRef, setApps)
-  }, [app, setApps])
+  useEffect(() => { move(app, winRef, setApps) }, [])
 
   return (
     <div
@@ -38,17 +36,17 @@ const App = ({ children, app, setApps }) => {
       <div className='window__content'>{children}</div>
       <div className='window__title-buttons'>
         {app.buttons.includes('min') && (
-          <span onClick={() => toggleMin(app.name, setApps)}>
+          <span onClick={e => { e.preventDefault(); e.stopPropagation(); toggleMin(app.name, setApps) }}>
             <FontAwesomeIcon icon={faArrowUp} />
           </span>
         )}
         {app.buttons.includes('max') && !forceMax && (
-          <span onClick={() => toggleMax(app.name, setApps)}>
+          <span onClick={e => { e.preventDefault(); e.stopPropagation(); toggleMax(app.name, setApps) }}>
             <FontAwesomeIcon icon={app.max ? faCompressAlt : faExpandAlt} />
           </span>
         )}
         {app.buttons.includes('close') && (
-          <span onClick={() => close(app.name, setApps)}>
+          <span onClick={e => { e.preventDefault(); e.stopPropagation(); close(app.name, setApps) }}>
             <FontAwesomeIcon icon={faTimes} />
           </span>
         )}
diff --git a/components/Header.js b/components/Header.js
index 32ec977..87c31e8 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -7,13 +7,15 @@ import fetchJson from 'helpers/fetchJson'
 import { focus, toggleMin, open, close } from 'helpers/windowActions'
 import appList from 'configs/appList'
 import useSettings from 'hooks/useSettings'
+import useApps from 'hooks/useApps'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
-const Header = ({ apps, setApps }) => {
+const Header = () => {
   const [userMenu, setUserMenu] = useState(false)
   const [showApps, setShowApps] = useState(false)
   const { user, mutateUser } = useUser()
+  const { apps, setApps } = useApps()
   const { t } = useSettings()
   const router = useRouter()
 
@@ -53,7 +55,7 @@ const Header = ({ apps, setApps }) => {
                   >
                     <span
                       style={{
-                        ...apps.findIndex(a => a.name === app.name) === apps.length - 1 ? { fontWeight: 600 } : {},
+                        ...apps.findIndex(a => a && a.name === app.name) === apps.length - 1 ? { fontWeight: 600 } : {},
                         ...app.min ? { color: '#888' } : {}
                       }}
                     >
diff --git a/components/Layout.js b/components/Layout.js
index c4cc553..572e961 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -5,9 +5,7 @@ import useSettings from 'hooks/useSettings'
 import PropTypes from 'prop-types'
 
 const Layout = ({
-  children,
-  apps,
-  setApps
+  children
 }) => {
   const { settings } = useSettings()
 
@@ -18,7 +16,7 @@ const Layout = ({
       <main>
         <div className='container'>{children}</div>
       </main>
-      <Header apps={apps} setApps={setApps} />
+      <Header />
       <Popup />
     </section>
   )