Merge pull request #43 from stanleyowen/#39

Added Public Test Build Link
stanleyowen · Aug 21, 2021 · 4df3cb6 · 4df3cb6
2 parents 89681e5 + b8d73ce
commit 4df3cb6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lofi-player",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.12.3",

diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <title>LoFi Player</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -194,6 +194,10 @@ input:disabled {
 .center-align { text-align: center }
 .center-vert { margin: auto 0 !important; }
 .center-flex { align-items: center; justify-content: center; }
+.warning {
+	color: red;
+	font-weight: bold;
+}
 .w-20 { width: 20% !important }
 .w-30 { width: 30% !important }
 .w-40 { width: 40% !important }

diff --git a/src/components/sidebar.component.tsx b/src/components/sidebar.component.tsx
@@ -1,8 +1,10 @@
-import React, { useEffect } from 'react'
-import { Button } from '@material-ui/core'
-import { HomeOutline, HomeSolid, SearchSolid, SearchOutline } from '../lib/icons.component'
+import React, { useEffect, useState } from 'react'
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText } from '@material-ui/core'
+import { Beta, HomeOutline, HomeSolid, SearchSolid, SearchOutline } from '../lib/icons.component'
 
 const SideBar = ({ handleChange, properties }: any) => {
+    const [isOpen, setDialog] = useState<boolean>(false)
+
     useEffect(() => {
         document.getElementById('tabs')?.childNodes.forEach(tab =>
             (tab.childNodes[0] as HTMLElement).innerText.toLowerCase() === properties.activeTab ?
@@ -14,7 +16,7 @@ const SideBar = ({ handleChange, properties }: any) => {
     const switchTab = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault()
         const target = ((e.target as HTMLElement).ownerDocument.activeElement?.childNodes[0].childNodes[1] as HTMLElement).innerText.toLowerCase()
-        if(target !== properties.activeTab) handleChange({ id: 'activeTab', value: target })
+        if(target !== properties.activeTab && target !== 'beta') handleChange({ id: 'activeTab', value: target })
     }
 
     return (
@@ -33,7 +35,24 @@ const SideBar = ({ handleChange, properties }: any) => {
                         )
                     })
                 }
+                <Button className="w-100 rounded-corner p-10 tab" id="beta" onClick={() => setDialog(true)}>
+                    <div className="w-30"><Beta /></div>
+                    <div className="w-70 left-align">Beta</div>
+                </Button>
             </div>
+
+            <Dialog open={isOpen} onClose={() => setDialog(false)}>
+                <DialogContent>
+                    <DialogContentText>
+                        <p className="warning">Stability: Experimental</p>
+                        <p className="mt-10">This is an experimental feature which is still under active development and subject to non-backward compatible changes or removal in any future version. Use of the feature is not recommended in production environments.</p>
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setDialog(false)}>Cancel</Button>
+                    <Button color="secondary" onClick={() => window.location.href = `${window.location.protocol}//next--${window.location.host}`}>Continue</Button>
+                </DialogActions>
+            </Dialog>
         </div>
     )
 }

diff --git a/src/lib/icons.component.tsx b/src/lib/icons.component.tsx
@@ -10,6 +10,9 @@ export function SearchOutline() {
 export function SearchSolid() {
     return <svg width="1.5em" height="1.5em" viewBox="0 0 24 24"><path d="M18.031 16.617l4.283 4.282l-1.415 1.415l-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9s9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617z" fill="currentColor"></path></svg>
 }
+export function Beta() {
+    return <svg width="1.5em" height="1.5em" viewBox="0 0 1024 1024"><path d="M512 472a40 40 0 1 0 80 0a40 40 0 1 0-80 0zm367 352.9L696.3 352V178H768v-68H256v68h71.7v174L145 824.9c-2.8 7.4-4.3 15.2-4.3 23.1c0 35.3 28.7 64 64 64h614.6c7.9 0 15.7-1.5 23.1-4.3c33-12.7 49.4-49.8 36.6-82.8zM395.7 364.7V180h232.6v184.7L719.2 600c-20.7-5.3-42.1-8-63.9-8c-61.2 0-119.2 21.5-165.3 60a188.78 188.78 0 0 1-121.3 43.9c-32.7 0-64.1-8.3-91.8-23.7l118.8-307.5zM210.5 844l41.7-107.8c35.7 18.1 75.4 27.8 116.6 27.8c61.2 0 119.2-21.5 165.3-60c33.9-28.2 76.3-43.9 121.3-43.9c35 0 68.4 9.5 97.6 27.1L813.5 844h-603z" fill="currentColor"></path></svg>
+}
 export function ChevronLeft() {
     return <svg width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M2.9 8l8-8l2.2 2.1L7.2 8l5.9 5.9l-2.2 2.1z"></path></svg>
 }