fix encoded urls getting 404'd

ui/component/router/view.jsx

@@ -74,6 +74,14 @@ function AppRouter(props: Props) {
     window.scrollTo(0, currentScroll);
   }, [currentScroll, pathname]);
 
+  // react-router doesn't decode pathanmes before doing the route matching check
+  // We have to redirect here because if we redirect on the server, it might get encoded again
+  // in the browser causing a redirect loop
+  const decodedPathname = decodeURIComponent(pathname);
+  if (decodedPathname !== pathname) {
+    return <Redirect to={decodedPathname} />;
+  }
+
   return (
     <Switch>
       <Route path={`/`} exact component={HomePage} />

ui/page/embedWrapper/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React, { useEffect } from 'react';
 import FileRender from 'component/fileRender';
-import Spinner from 'component/spinner';
 
 type Props = {
   uri: string,
@@ -16,15 +15,7 @@ const EmbedWrapperPage = (props: Props) => {
     }
   }, []);
 
-  if (uri && claim) {
-    return (
-      <div className={'embed__wrapper'}>
-        <FileRender uri={uri} embedded />
-      </div>
-    );
-  } else {
-    return <Spinner />;
-  }
+  return <div className={'embed__wrapper'}>{claim && <FileRender uri={uri} embedded />}</div>;
 };
 
 export default EmbedWrapperPage;

ui/scss/component/_embed-player.scss

@@ -6,4 +6,5 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+  background-color: var(--color-black);
 }