diff --git a/index.html b/index.html index 5e04d08..3b6cd6c 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,10 @@
-
+
-
- Loading... +
+
Loading
diff --git a/src/components/Player/Player.jsx b/src/components/Player/Player.jsx index 83b9a95..f53daf7 100644 --- a/src/components/Player/Player.jsx +++ b/src/components/Player/Player.jsx @@ -9,12 +9,13 @@ import CheapGlkOte from 'cheap-glkote' import TextBuffer from './TextBuffer' import InputBox from './InputBox' +import Status from './Status' import './player.css' const INITIAL_STATUS = { stage: 'loading', - details: 'Preparing...' + details: ['Preparing'] } const runMachine = ({ Engine, file, handlers }) => { @@ -104,7 +105,7 @@ export default function ({ vmParts: { file, engine } }) { }, [vm]) return status.stage !== 'ready' - ? (
{status.details}
) + ? () : (
( +
+

Error

+ {details.map(x => (

{x}

))} +
+
+) + +const loading = details => ( +
+ {details.map(x => (
{x}
))} +
+) + +export default ({ stage, details }) => + ({fail, loading})[stage](details) diff --git a/src/components/Player/UrlPlayer.jsx b/src/components/Player/UrlPlayer.jsx index f71f1f0..7997855 100644 --- a/src/components/Player/UrlPlayer.jsx +++ b/src/components/Player/UrlPlayer.jsx @@ -4,33 +4,34 @@ import { useState, useEffect } from 'preact/hooks' import { engineByFilename } from './common/engines' import Player from './Player' +import Status from './Status' const INITIAL_STATUS = { stage: 'loading', - details: 'Loading...' + details: ['Loading'] } const prepareVM = ({ url, setStatus, setParts }) => { const st = (stage, details) => args => { - setStatus({ stage, details }) + setStatus({ stage, details: [details] }) return args } return Promise.resolve() - .then(st('loading', 'Downloading file...')) + .then(st('loading', 'Downloading file')) .then(_ => fetch(url)) - .then(st('loading', 'Processing file...')) + .then(st('loading', 'Processing file')) .then(response => response.arrayBuffer()) .then(arrayBuffer => new Uint8Array(arrayBuffer)) - .then(st('loading', 'Downloading engine...')) + .then(st('loading', 'Downloading engine')) .then(file => setParts({ file, engine: engineByFilename(url) })) - .then(st('loading', 'Running...')) + .then(st('loading', 'Running')) .catch(e => { console.error(e) - setStatus({ stage: 'fail', details: e.message }) + setStatus({ stage: 'fail', details: [e.message, url] }) }) } @@ -47,5 +48,5 @@ export default function ({ url }) { return vmParts ? () - : (
{status.details}
) + : () } diff --git a/src/components/Player/common/engines.js b/src/components/Player/common/engines.js index 22ab4c9..7e80045 100644 --- a/src/components/Player/common/engines.js +++ b/src/components/Player/common/engines.js @@ -33,6 +33,6 @@ export const engineByFilename = filename => { if (format) { return format.engine } else { - throw new Error(`Unsupported file type: ${filename}`) + throw new Error('Unsupported file type') } } diff --git a/src/components/Player/player.css b/src/components/Player/player.css index 4c356bd..e1fcd55 100644 --- a/src/components/Player/player.css +++ b/src/components/Player/player.css @@ -9,7 +9,7 @@ padding: var(--outer-padding); } -.inputBox { +.ifplayer .inputBox { flex: 0 1 auto; font: inherit; @@ -22,7 +22,7 @@ margin-top: var(--input-box-margin); } -.textBuffer { +.ifplayer .textBuffer { flex: 2 1 auto; overflow-y: scroll; box-sizing: border-box; @@ -34,19 +34,35 @@ scrollbar-width: thin; } -.textBuffer::-webkit-scrollbar { +.ifplayer .textBuffer::-webkit-scrollbar { width: 8px; } -.textBuffer::-webkit-scrollbar-thumb { +.ifplayer .textBuffer::-webkit-scrollbar-thumb { background-color: var(--main-color); border: 4px solid var(--bg-color); border-left-width: 0px; } -.textBuffer > br:first-child, -.textBuffer > br:last-child, -.textBuffer > br + br + br { +.ifplayer .textBuffer > br:first-child, +.ifplayer .textBuffer > br:last-child, +.ifplayer .textBuffer > br + br + br { display: none; } +.status { + padding: var(--inner-padding); +} + +.status.loading > div:after { + animation: dots0123 1s infinite; + content: ''; +} + +@keyframes dots0123 { + 0% { content: ''; } + 33% { content: '.'; } + 66% { content: '..'; } + 100% { content: '...'; } +} + diff --git a/src/style/base.css b/src/style/base.css index 6c85438..1634444 100644 --- a/src/style/base.css +++ b/src/style/base.css @@ -67,3 +67,7 @@ summary:hover { ul { list-style: square; } + +.status { + padding: 8px; +}