diff --git a/src/common/if.js b/src/common/if.js
index 137c9eb..70af296 100644
--- a/src/common/if.js
+++ b/src/common/if.js
@@ -4,8 +4,8 @@
import { engineByFilename } from '~/src/common/engines'
export const prepareVM = ({ url, setStatus, setVM }) => _ => {
- const st = (step, details) => args => {
- setStatus({ step, details })
+ const st = (stage, details) => args => {
+ setStatus({ stage, details })
return args
}
@@ -23,7 +23,7 @@ export const prepareVM = ({ url, setStatus, setVM }) => _ => {
.then(st('loading', 'Running...'))
.catch(e => {
console.error(e)
- setStatus({ level: 'fail', details: e.message })
+ setStatus({ stage: 'fail', details: e.message })
})
}
diff --git a/src/components/player/UrlPlayer.js b/src/components/player/UrlPlayer.js
new file mode 100644
index 0000000..1df1f68
--- /dev/null
+++ b/src/components/player/UrlPlayer.js
@@ -0,0 +1,32 @@
+import { h } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
+
+import { prepareVM } from '~/src/common/if'
+
+const INITIAL_STATUS = {
+ stage: 'loading',
+ details: 'Loading...'
+}
+
+export default function ({url}) {
+ console.log(123, url)
+ const [status, setStatus] = useState(INITIAL_STATUS)
+
+ const [vm, setVM] = useState(null)
+
+ useEffect(prepareVM({
+ url,
+ setStatus,
+ setVM
+ }), [url])
+
+ useEffect(() => {
+ if (vm) console.log('success', vm)
+ }, [vm])
+
+ return (
+
+ {url}
+ {status.details}
+ )
+}
diff --git a/src/views/PlayerView.jsx b/src/views/PlayerView.jsx
index abf3b9b..8eed189 100644
--- a/src/views/PlayerView.jsx
+++ b/src/views/PlayerView.jsx
@@ -1,31 +1,15 @@
import { h } from 'preact'
-
import { useState, useEffect } from 'preact/hooks'
-import { prepareVM } from '~/src/common/if'
-const INITIAL_STATUS = {
- level: 'loading',
- details: 'Loading...'
-}
+import UrlPlayer from '~/src/components/player/UrlPlayer'
export default function ({setTheme, theme, encodedUrl}) {
const [url] = useState(decodeURIComponent(encodedUrl))
- const [status, setStatus] = useState(INITIAL_STATUS)
-
- const [vm, setVM] = useState(null)
useEffect(() => setTheme(theme), [theme])
- useEffect(prepareVM({
- url,
- setStatus,
- setVM
- }), [url])
- useEffect(() => {
- if (vm) console.log('success', vm)
- }, [vm])
return (
- {status.details}
+
)
}