Merge pull request #20 from NEARBuilders/enhancements

Enhanced Library and Social page
NEARBuilders · May 28, 2024 · 536b639 · 536b639
2 parents 6ce803f + 0cdee6b
commit 536b639
Show file tree

Hide file tree

Showing 18 changed files with 1,017 additions and 289 deletions.
diff --git a/gateway/src/components/Broadcast/ApiKey.js b/gateway/src/components/Broadcast/ApiKey.js
@@ -2,6 +2,58 @@ import React, { useEffect, useState } from "react";
 
 import { useStore } from "./state";
 
+import styled from "styled-components";
+const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #23242b;
+  border-radius: 8px;
+  background-color: #2c2c2c;
+  color: #a5a5a5;
+
+  label {
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  input {
+    padding: 12px;
+    border: 1px solid #444;
+    border-radius: 4px;
+    background-color: #1c1c1c;
+    color: #a5a5a5;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #666;
+    }
+  }
+
+  button {
+    padding: 12px 16px;
+    border: none;
+    border-radius: 4px;
+    background-color: #000;
+    color: #a5a5a5;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    width: 300px;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #1c1a1a;
+    }
+  }
+`;
+
 const ApiKey = (props) => {
   const { apiKey, setApiKey } = useStore();
 
@@ -21,7 +73,7 @@ const ApiKey = (props) => {
   }
 
   return (
-    <form onSubmit={handleSubmit}>
+    <FormContainer onSubmit={handleSubmit}>
       <label>
         Api key:
         <input
@@ -31,7 +83,7 @@ const ApiKey = (props) => {
         />
       </label>
       <button type="submit">Set api key</button>
-    </form>
+    </FormContainer>
   );
 };
 

diff --git a/gateway/src/components/Broadcast/GenerateStream.js b/gateway/src/components/Broadcast/GenerateStream.js
@@ -56,34 +56,106 @@ const GenerateStream = ({ url }) => {
     }
   };
 
+  const FormContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background-color: #2d2d2d;
+    padding: 2rem;
+    border-radius: 16px;
+    color: #a5a5a5;
+  `;
+
+  const Form = styled.form`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  `;
+
+  const Label = styled.label`
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    font-weight: 700;
+    color: #a5a5a5;
+    margin-bottom: 8px;
+  `;
+
+  const CheckboxLabel = styled(Label)`
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  `;
+
+  const Input = styled.input`
+    background-color: #1c1c1c;
+    border: 1px solid #444;
+    color: #a5a5a5;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 14px;
+    margin-top: 4px;
+
+    &:focus {
+      outline: none;
+      border-color: #666;
+    }
+  `;
+
+  const Checkbox = styled(Input)`
+    width: auto;
+    margin-top: 0;
+  `;
+
+  const Button = styled.button`
+    background-color: #000;
+    color: #a5a5a5;
+    border: none;
+    border-radius: 4px;
+    padding: 12px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    width: 300px;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #1c1a1a;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+    }
+  `;
+
   return (
-    <>
-      <form onSubmit={createStream}>
-        <label>
+    <FormContainer>
+      <Form onSubmit={createStream}>
+        <CheckboxLabel>
           Recorded
-          <input
+          <Checkbox
             type="checkbox"
             checked={record}
             onChange={(event) => setRecord(event.target.checked)}
           />
-        </label>
-        <label>
+        </CheckboxLabel>
+        <Label>
           Stream name:
-          <input
+          <Input
             type="text"
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
-        </label>
-        <button type="submit">Start stream</button>
-      </form>
+        </Label>
+        <Button type="submit">Start stream</Button>
+      </Form>
       {playbackId && (
         <>
           <div>Sharable link: {`https://lvpr.tv?v=${playbackId}`}</div>
           <div>Sharable playbackId: {playbackId}</div>
         </>
       )}
-    </>
+    </FormContainer>
   );
 };
 

diff --git a/gateway/src/components/Broadcast/Player.js b/gateway/src/components/Broadcast/Player.js
@@ -4,6 +4,7 @@ import * as Broadcast from "@livepeer/react/broadcast";
 import { getIngest } from "@livepeer/react/external";
 
 import { useStore } from "./state";
+import styled from "styled-components";
 
 const Player = (props) => {
   const { streamKey } = useStore();

diff --git a/gateway/src/components/Broadcast/WatchStream.js b/gateway/src/components/Broadcast/WatchStream.js
@@ -1,23 +1,93 @@
-import React from "react";
-import { useStore } from "./state";
+import React, { useState } from "react";
+import { useStore } from "../Broadcast/state";
+import styled from "styled-components";
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background-color: #2d2d2d;
+  padding: 2rem;
+  border-radius: 16px;
+  color: #a5a5a5;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const Input = styled.input`
+  padding: 12px;
+  border: 1px solid #444;
+  border-radius: 4px;
+  background-color: #1c1c1c;
+  color: #a5a5a5;
+  font-size: 14px;
+
+  &:focus {
+    outline: none;
+    border-color: #666;
+  }
+`;
+
+const Button = styled.button`
+  padding: 12px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #000;
+  color: #a5a5a5;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #1c1a1a;
+  }
+`;
+const IframeContainer = styled.div`
+  margin-top: 16px;
+`;
 
 const WatchStream = ({ pId }) => {
   const { playbackId } = useStore();
 
   const currentPlaybackId = pId || playbackId;
 
   return (
-    <div>
-      {currentPlaybackId && (
-        <iframe
-          src={`https://lvpr.tv?v=${currentPlaybackId}`}
-          frameborder="0"
-          allowfullscreen
-          allow="autoplay; encrypted-media; picture-in-picture"
-          sandbox="allow-same-origin allow-scripts"
-        ></iframe>
+    <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 && (
+        <IframeContainer>
+          {" "}
+          <iframe
+            src={`https://lvpr.tv?v=${streamLink}`}
+            frameborder="0"
+            allowfullscreen
+            allow="autoplay; encrypted-media; picture-in-picture"
+            sandbox="allow-same-origin allow-scripts"
+          ></iframe>
+        </IframeContainer>
       )}
-    </div>
+    </Container>
   );
 };
 

diff --git a/gateway/src/components/Player/ApiKey.js b/gateway/src/components/Player/ApiKey.js
@@ -3,6 +3,58 @@ import React, { useState } from "react";
 import { useStore } from "./state";
 import { createLivepeerInstance } from "./LivepeerInstance";
 
+import styled from "styled-components";
+const FormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid #23242b;
+  border-radius: 8px;
+  background-color: #2c2c2c;
+  color: #a5a5a5;
+
+  label {
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  input {
+    padding: 12px;
+    border: 1px solid #444;
+    border-radius: 4px;
+    background-color: #1c1c1c;
+    color: #a5a5a5;
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: #666;
+    }
+  }
+
+  button {
+    padding: 12px 16px;
+    border: none;
+    border-radius: 4px;
+    background-color: #000;
+    color: #a5a5a5;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    width: 300px;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #1c1a1a;
+    }
+  }
+`;
+
 const ApiKey = () => {
   const { setApiKey } = useStore();
 
@@ -15,7 +67,7 @@ const ApiKey = () => {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <FormContainer onSubmit={handleSubmit}>
       <label>
         Api key:
         <input
@@ -25,7 +77,7 @@ const ApiKey = () => {
         />
       </label>
       <button type="submit">Set api key</button>
-    </form>
+    </FormContainer>
   );
 };