Sidebar starts and started conf file tree

src/Start.jsx

@@ -17,6 +17,7 @@ export default function Start() {
             <SimpleButton label="test 2" onClick={() => setStream(stream="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8")} /> */}
             <Log props={stream} />
             <ReactPlayer className="react-player" width="100%" height="100vh" muted={false} playing={true} url={stream}/>
+            <SideBar videos={1} />
         </div>
     )
 }
@@ -27,6 +28,22 @@ function SimpleButton(props) {
     )
 }
 
+function SideBar({videos}) {
+
+    var heading = null
+
+    if (videos > 0) {
+        const noun = videos > 1 ? 'Channels' : 'Channel';
+        heading = videos + ' ' + noun;
+      }
+    return (
+        <div className='sidebar'>
+            <h2>{heading}</h2>
+
+        </div>
+    )
+}
+
 function Log(props) {
     console.log({props})
 }

src/confs/channels.json

@@ -0,0 +1 @@
+{}

src/styles.css

@@ -103,4 +103,16 @@ body {
 
 html, body {
   overflow: hidden;
+}
+
+.sidebar{
+  width: 45vh;
+  height:100vh;
+  background: rgb(49, 48, 48);
+  /* border-radius: 15px; */
+}
+
+.react-player {
+  position: absolute;
+  z-index: -1
 }