PlayerView: add MenuOverlay

src/index.js

@@ -25,9 +25,9 @@ function App () {
   const playerView = (themeEngine, singleWindow) =>
     function view (params) {
       return (<PlayerView {...{
-        ...themeEngine,
+        themeEngine,
-        ...params,
         singleWindow,
+        ...params,
       }} />)
     }
 

src/style/base.css

@@ -93,12 +93,47 @@ button {
   border: 2px solid var(--main-color);
   background-color: var(--bg-color);
   color: var(--main-color);
-  padding: var(--inner-padding);
+  padding: var(--inner-padding) calc(4 * var(--inner-padding));
   font-family: inherit;
   font-size: inherit;
   cursor: pointer;
 }
 
+input,
+select {
+  box-sizing: border-box;
+
+  padding: 4px 8px;
+  color: var(--main-color);
+  background-color: var(--bg-color);
+  border: 2px solid var(--main-color);
+  font: inherit;
+}
+
+select {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: 0;
+  width: 200px;
+}
+
+label {
+  display: inline-block;
+  width: 100%;
+  max-width: 400px;
+}
+
+label input {
+  width: 100%;
+}
+
+input[type='file'] {
+  position: relative;
+  font-size: 0;
+  text-indent: -100%;
+  cursor: pointer;
+}
 /*  */
 
 .status {

src/views/HomeView/HomeView.css

@@ -1,39 +1,3 @@
 .app > .view.home {
   padding: var(--inner-padding);
 }
-
-.view.home input,
-.view.home select {
-  box-sizing: border-box;
-
-  padding: 4px 8px;
-  color: var(--main-color);
-  background-color: var(--bg-color);
-  border: 2px solid var(--main-color);
-  font: inherit;
-}
-
-.view.home select {
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  border-radius: 0;
-  width: 200px;
-}
-
-.view.home label {
-  display: inline-block;
-  width: 100%;
-  max-width: 400px;
-}
-
-.view.home label input {
-  width: 100%;
-}
-
-.view.home input[type='file'] {
-  position: relative;
-  font-size: 0;
-  text-indent: -100%;
-  cursor: pointer;
-}

src/views/PlayerView/PlayerView.jsx

@@ -2,15 +2,18 @@ import { h } from 'preact'
 import { useState, useEffect } from 'preact/hooks'
 
 import UrlPlayer from '~/src/components/Player/UrlPlayer'
+import MenuOverlay from '~/src/components/Player/MenuOverlay'
 
 import './PlayerView.css'
 
 const decode = (encodedUrl) => decodeURIComponent(encodedUrl)
 
 export default function PlayerView ({
-  setTheme, theme, encodedUrl, singleWindow,
+  theme, themeEngine, encodedUrl, singleWindow,
 }) {
-  useEffect(() => setTheme(theme), [setTheme, theme])
+  useEffect(() => {
+    themeEngine.setTheme(theme)
+  }, [theme, themeEngine])
 
   const [targetUrl, setTargetUrl] = useState(decode(encodedUrl))
 
@@ -20,6 +23,9 @@ export default function PlayerView ({
 
   return (
     <main>
+      <MenuOverlay {...{
+        themeEngine,
+      }}/>
       <UrlPlayer {...{
         url: targetUrl,
         singleWindow,