fix player positioning/sizing

belst · Apr 10, 2022 · e007965 · e007965
1 parent 6310707
commit e007965
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/frontend/src/Player.tsx b/frontend/src/Player.tsx
@@ -7,7 +7,7 @@ export interface PlayerProps {
     instance: string,
 }
 
-
+// TODO: make this a directive instead of a component
 const Stream: Component<PlayerProps & JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
     let ref: HTMLDivElement;
 
@@ -48,7 +48,9 @@ const Stream: Component<PlayerProps & JSX.HTMLAttributes<HTMLDivElement>> = (pro
     });
 
     return (
-        <div {...divProps} ref={ref}></div>
+        <div {...divProps}>
+            <div ref={ref}></div>
+        </div>
     );
 };
 

diff --git a/frontend/src/Stream.tsx b/frontend/src/Stream.tsx
@@ -12,13 +12,14 @@ const Stream: Component = () => {
         'aspect-ratio': '16 / 9',
         'max-width': '100%',
         'max-height': 'calc(100vh - 48px - 16px - 16px)',
+        margin: '0 auto'
     };
 
     return (
         <>
             <Title value={params.user} />
-            <div style={css}>
-                <Player url={`wss://${endpoint}/ws/${params.user}`} instance={params.user} autoplay={true} id="player"></Player>
+            <div>
+                <Player style={css} url={`wss://${endpoint}/ws/${params.user}`} instance={params.user} autoplay={true} id="player"></Player>
             </div>
         </>
     );