From e0079656ba663e746c7898945b39a99dbc039c7e Mon Sep 17 00:00:00 2001
From: belst <git@bel.st>
Date: Sun, 10 Apr 2022 02:07:16 +0200
Subject: [PATCH] fix player positioning/sizing

---
 frontend/src/Player.tsx | 6 ++++--
 frontend/src/Stream.tsx | 5 +++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Player.tsx b/frontend/src/Player.tsx
index 0e755c7..bef72d0 100644
--- 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
index 2afd239..efe471d 100644
--- 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>
         </>
     );