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} +
) }