Create test asset overlay

This is a Work-in-Progress, merged current master and some non-trivial merging issues and stylistic touch-ups need to be applied.

src/features/player/MasonryGrid.jsx

+import dashjs from 'dashjs';
 import Form from 'react-bootstrap/Form';
 import { XBlock, XMasonry } from 'react-xmasonry';
 import useSettingsDisplayItems from './hooks/useSettingsDisplayItems';
 import Player from './Player';
 import Setting from './Setting';
+import Log from './Log';
+import * as React from 'react';
 
-function MasonryGrid() {
+function MasonryGrid({ sourceUrl, debugSettings, streamingSettings }) {
   const masonrySettings = useSettingsDisplayItems();
 
+  const [player] = React.useState(dashjs.MediaPlayer().create);
+  // expose player in window to debug
+  window.player = player;
+
   return (
     <Form>
       <XMasonry targetBlockWidth={400}>
-        <XBlock width={2}>
-          <Player />
+        <XBlock key="player" width={2}>
+          <Player
+            player={player}
+            sourceUrl={sourceUrl}
+            debugSettings={debugSettings}
+            streamingSettings={streamingSettings}
+          />
+        </XBlock>
+        <XBlock key="log" width={2}>
+          <Log player={player} />
         </XBlock>
         {masonrySettings.map(masonryItem => (
-          <XBlock>
+          <XBlock key={masonryItem.info.name}>
             <Setting
               key={masonryItem.info.name}
               info={masonryItem.info}