Unified file link format

src/components/FileSelector.js

@@ -0,0 +1,15 @@
+import { h } from 'preact'
+
+export default function ({ emitName, emitURL }) {
+  const fileInputHandler = ({ target }) => {
+    const file = target.files[0]
+    emitName(file.name)
+    emitURL(URL.createObjectURL(file))
+    target.value = null
+  }
+
+  return (
+    <input
+      type='file'
+      onChange={fileInputHandler} />)
+}

src/components/URLSelector.js

@@ -0,0 +1,23 @@
+import { h } from 'preact'
+
+export default function ({ emitName, emitURL }) {
+  const reURL = /^(http|https):\/\/[^ "]+$/
+
+  const emit = url => {
+    emitName(url)
+    emitURL(url)
+  }
+
+  const urlInputHandler = ({ target }) => {
+    const url = target.value
+    emit(reURL.test(url)
+      ? url
+      : null)
+  }
+
+  return (
+    <input
+      type='text'
+      placeholder='https://...'
+      onInput={urlInputHandler} />)
+}

src/index.js

@@ -1,10 +1,11 @@
 import { h, render } from 'preact'
-import {
-  Redirect, Switch, Route, Link, Router
-} from 'wouter-preact'
+import { Link, Route, Router, Switch } from 'wouter-preact'
 
 import { useHashLocation } from '~/src/utils/utils.routing'
 
+import Index from '~/src/views/Index'
+import Player from '~/src/views/Player'
+
 function App () {
   return (
     <Router hook={useHashLocation}>
@@ -12,22 +13,21 @@ function App () {
         <nav>
           <Link href='/'>Root</Link>
           <Link href='/#/about'>About</Link>
-          <Link href='/#/info'>Redirect</Link>
           <Link href='/#/404'>404</Link>
         </nav>
 
         <main>
           <Switch>
-            <Route path='/'>
-              Root
+            <Route
+              path='/'
+              component={Index} />
+            <Route
+              path='/play/:theme/:encodedUrl'
+              component={Player} />
+            <Route path='/top100'>
+              top100
             </Route>
-            <Route path='/about'>
-              About
-            </Route>
-            <Route path='/info'>
-              <Redirect to='/about' />
-            </Route>
-            <Route path='/:anything*'>
+            <Route>
               404
             </Route>
           </Switch>

src/views/Index.js

@@ -0,0 +1,34 @@
+import { h } from 'preact'
+import { useState } from 'preact/hooks'
+
+import { Link } from 'wouter-preact'
+
+import FileSelector from '~/src/components/FileSelector'
+import URLSelector from '~/src/components/URLSelector'
+
+export default function () {
+  const [targetName, setTargetName] = useState(null)
+  const [targetURL, setTargetURL] = useState(null)
+
+  const playButton = (
+    <Link href={`/#/play/default/${encodeURIComponent(targetURL)}`}>
+      Play "{targetName}"
+    </Link>)
+
+  return (
+    <main>
+      <ul>
+        <li>
+          <URLSelector
+            emitName={setTargetName}
+            emitURL={setTargetURL} />
+        </li>
+        <li>
+          <FileSelector
+            emitName={setTargetName}
+            emitURL={setTargetURL} />
+        </li>
+      </ul>
+      { targetURL ? playButton : null }
+    </main>)
+}

src/views/Player.jsx

@@ -0,0 +1,11 @@
+import { h } from 'preact'
+
+export default function ({params: {theme, encodedUrl}}) {
+  const url = decodeURIComponent(encodedUrl)
+
+  return (
+    <div>
+      {theme} <br/>
+      {url}
+    </div>)
+}