From 6c68425a9ed2d207c5ce5e8c725055bd1c47e830 Mon Sep 17 00:00:00 2001
From: stefano <stefano1990@gmail.com>
Date: Tue, 28 May 2024 23:57:48 +0200
Subject: [PATCH] Fix broken components

---
 gateway/src/components/Broadcast/ApiKey.js    |  1 +
 .../components/Broadcast/GenerateStream.js    |  2 +
 .../src/components/Broadcast/WatchStream.js   | 30 +++--------
 widget/page/home.jsx                          | 52 +++++++++++++++----
 4 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/gateway/src/components/Broadcast/ApiKey.js b/gateway/src/components/Broadcast/ApiKey.js
index 4388f25..709f633 100644
--- a/gateway/src/components/Broadcast/ApiKey.js
+++ b/gateway/src/components/Broadcast/ApiKey.js
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { useStore } from "./state";
 
 import styled from "styled-components";
+
 const FormContainer = styled.form`
   display: flex;
   flex-direction: column;
diff --git a/gateway/src/components/Broadcast/GenerateStream.js b/gateway/src/components/Broadcast/GenerateStream.js
index c6c2faa..a4f8d85 100644
--- a/gateway/src/components/Broadcast/GenerateStream.js
+++ b/gateway/src/components/Broadcast/GenerateStream.js
@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+import styled from "styled-components";
+
 import { useStore } from "./state";
 
 const GenerateStream = ({ url }) => {
diff --git a/gateway/src/components/Broadcast/WatchStream.js b/gateway/src/components/Broadcast/WatchStream.js
index 7b0aedd..7a3d542 100644
--- a/gateway/src/components/Broadcast/WatchStream.js
+++ b/gateway/src/components/Broadcast/WatchStream.js
@@ -1,6 +1,8 @@
-import React, { useState } from "react";
-import { useStore } from "../Broadcast/state";
+import React from "react";
 import styled from "styled-components";
+
+import { useStore } from "../Broadcast/state";
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -56,30 +58,10 @@ const WatchStream = ({ pId }) => {
 
   return (
     <Container>
-      <Form onSubmit={createStream}>
-        <Input
-          type="text"
-          value={streamName}
-          onChange={(event) => setStreamName(event.target.value)}
-          placeholder="Enter stream name"
-        />
-        <Button type="submit">Create Stream</Button>
-      </Form>
-      <Form onSubmit={handleSubmit}>
-        <Input
-          type="text"
-          value={inputValue}
-          onChange={handleChange}
-          placeholder="Enter playbackId to watch"
-        />
-        <p>Current Input: {inputValue}</p>
-        <Button type="submit">Watch Stream</Button>
-      </Form>
-      {streamLink && (
+      {currentPlaybackId && (
         <IframeContainer>
-          {" "}
           <iframe
-            src={`https://lvpr.tv?v=${streamLink}`}
+            src={`https://lvpr.tv?v=${currentPlaybackId}`}
             frameborder="0"
             allowfullscreen
             allow="autoplay; encrypted-media; picture-in-picture"
diff --git a/widget/page/home.jsx b/widget/page/home.jsx
index 1a6d315..8e4d4f0 100644
--- a/widget/page/home.jsx
+++ b/widget/page/home.jsx
@@ -1,15 +1,27 @@
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  color: white;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StlyedInput = styled.input`
+  color: black;
+  padding: 4px;
+`;
+
 const Dropdown = styled.select`
   ping: 10px;
   margin: 20px 0;
   border: 1px solid #ccc;
   border-radius: 4px;
+  color: black;
 `;
 
 const OptionComponent = styled.div`
   padding: 20px;
-  border: 1px solid #ccc;
   border-radius: 4px;
-  background-color: #f9f9f9;
   width: 80%;
   text-align: center;
   display: flex;
@@ -61,6 +73,24 @@ const broadcastApiKeyCode = `
 \`\`\`
 `;
 
+const broadcastLocalCode = `
+\`\`\`js
+<Broadcast.GenerateStream url={url} />
+<Broadcast.Player />
+<Broadcast.WatchStream pId={pId} />
+\`\`\`
+`;
+
+const broadcastRemoteCode = `
+\`\`\`js
+<Broadcast.GenerateStream
+url={"https://livepeer-webserver-613b208ef083.herokuapp.com"}
+/>
+<Broadcast.Player />
+<Broadcast.WatchStream pId={pId} />
+\`\`\`
+`;
+
 const Option1 = () => (
   <OptionComponent>
     Api key
@@ -111,7 +141,7 @@ const Option3 = ({ showVideo, handleClick }) => {
   );
 };
 
-const Option1Broadcast = ({ pId }) => {
+const Option1Broadcast = () => {
   return (
     <>
       Set api key and start a stream!
@@ -127,7 +157,7 @@ const Option2Broadcast = ({ url, pId }) => {
   return (
     <>
       Set api key and start a stream!
-      <Markdown text={broadcastApiKeyCode} />
+      <Markdown text={broadcastLocalCode} />
       <Broadcast.GenerateStream url={url} />
       <Broadcast.Player />
       Or you can insert a playbackId and watch a stream:
@@ -140,7 +170,7 @@ const Option3Broadcast = ({ pId }) => {
   return (
     <>
       Set api key and start a stream!
-      <Markdown text={broadcastApiKeyCode} />
+      <Markdown text={broadcastRemoteCode} />
       <Broadcast.GenerateStream
         url={"https://livepeer-webserver-613b208ef083.herokuapp.com"}
       />
@@ -169,7 +199,7 @@ function resetUrl() {
 }
 
 return (
-  <div className="container">
+  <Container>
     Select which component you want to check:
     <Dropdown
       value={selectedComponent}
@@ -194,7 +224,7 @@ return (
           <>
             {!inputSet ? (
               <div>
-                <input
+                <StlyedInput
                   type="text"
                   onChange={(event) => setUrl(event.target.value)}
                   value={url}
@@ -222,14 +252,14 @@ return (
           <>
             {!inputSet ? (
               <div>
-                <input
+                <StlyedInput
                   type="text"
                   onChange={(event) => setUrl(event.target.value)}
                   value={url}
                 />
                 <button onClick={() => setInputSet(true)}>Set url</button>
                 Provide a playbackId if you wanna watch a stream:
-                <input
+                <StlyedInput
                   type="text"
                   onChange={(event) => setPid(event.target.value)}
                   value={pId}
@@ -248,7 +278,7 @@ return (
           <>
             <div>
               Provide a playbackId if you wanna watch a stream:
-              <input
+              <StlyedInput
                 type="text"
                 onChange={(event) => setPid(event.target.value)}
                 value={pId}
@@ -259,5 +289,5 @@ return (
         )}
       </>
     )}
-  </div>
+  </Container>
 );