Fix broken forms

NEARBuilders · May 28, 2024 · b89a8e3 · b89a8e3
1 parent 6c68425
commit b89a8e3
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 72 deletions.
diff --git a/gateway/public/index.html b/gateway/public/index.html
@@ -10,7 +10,9 @@
 </head>
 
 <body>
+	<!--
 	<div><button id="open-walletselector-button">Open wallet selector</button></div>
+	-->
 	<near-social-viewer></near-social-viewer>
 </body>
 

diff --git a/gateway/src/components/Player/GetUploadUrl.js b/gateway/src/components/Player/GetUploadUrl.js
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
+import styled from "styled-components";
 
 import { createLivepeerInstance } from "./LivepeerInstance";
 import { useStore } from "./state";
-import styled from "styled-components";
 
 const UploadContainer = styled.div`
   display: flex;
@@ -66,46 +66,22 @@ const UploadButton = styled.button`
   }
 `;
 
-const GetUploadUrl = ({ url }) => {
-  const {
-    setAssetName,
-    setPlaybackId,
-    setResumableUploadUrl,
-    setUploadUrl,
-    setSrc,
-  } = useStore();
+const GetUploadUrl = () => {
+  const { setAssetName, setPlaybackId, setResumableUploadUrl, setUploadUrl } =
+    useStore();
 
   const [name, setName] = useState("");
 
   const handleSubmit = async (event) => {
-    if (url) {
-      // if url it means I want to communicate with the back-end
-      try {
-        const src = await fetch(url);
-
-        if (!src) {
-          console.log("-- error receiving data");
-          return;
-        }
-
-        src = src.json();
-
-        setSrc(src);
-        return;
-      } catch (error) {
-        console.log("Error:");
-        console.log(error.message);
-        return;
-      }
-    }
-
     event.preventDefault();
-    generateUploadLink();
+
+    await generateUploadLink();
     setAssetName(name);
   };
 
   const generateUploadLink = async () => {
     const livepeer = createLivepeerInstance();
+
     const result = await livepeer.asset.create({
       name,
     });
@@ -123,19 +99,17 @@ const GetUploadUrl = ({ url }) => {
 
   return (
     <UploadContainer>
-      <form onSubmit={handleSubmit}>
-        <FormContainer>
-          <UploadLabel>
-            Assets name:
-            <UploadInput
-              type="text"
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-            />
-            <UploadButton type="submit">Generate link</UploadButton>
-          </UploadLabel>
-        </FormContainer>
-      </form>
+      <FormContainer onSubmit={handleSubmit}>
+        <UploadLabel>
+          Assets name:
+          <UploadInput
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <UploadButton type="submit">Generate link</UploadButton>
+        </UploadLabel>
+      </FormContainer>
     </UploadContainer>
   );
 };

diff --git a/widget/Index.jsx b/widget/Index.jsx
@@ -28,9 +28,11 @@ const config = {
     ),
     // customize the footer
     Footer: () => (
-      <div className="footer-container">
-        <div className="footer-content">
-          Powered by livepeer, built on NEAR, a part of everything
+      <div className="footer-wrapper">
+        <div className="footer-container">
+          <div className="footer-content">
+            Powered by livepeer, built on NEAR, a part of everything
+          </div>
         </div>
       </div>
     ),
@@ -112,10 +114,13 @@ const CSS = styled.div`
       background-color: #555555;
     }
   }
+  .footer-wrapper {
+    display: flex;
+    justify-content: center;
+  }
+
   .footer-container {
     position: sticky;
-    left: 500px;
-
     width: 540px;
     background-color: #2d2d2d;
     color: #dde4e1;

diff --git a/widget/page/home.jsx b/widget/page/home.jsx
@@ -1,7 +1,7 @@
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  color: white;
+  color: #dde4e1;
   justify-content: center;
   align-items: center;
 `;
@@ -12,11 +12,11 @@ const StlyedInput = styled.input`
 `;
 
 const Dropdown = styled.select`
-  ping: 10px;
-  margin: 20px 0;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: black;
+  background-color: #1c1c1c;
+  width: 300px;
+  height: 47px;
+  padding: 10px 20px 10px 20px;
+  border: 1px solid #444;
 `;
 
 const OptionComponent = styled.div`
@@ -30,6 +30,11 @@ const OptionComponent = styled.div`
   align-items: center;
 `;
 
+const Separator = styled.div`
+  height: 10px;
+  width: 100%;
+`;
+
 const apiKeyCode = `
 \`\`\`js
 <Player.ApiKey />
@@ -93,13 +98,39 @@ url={"https://livepeer-webserver-613b208ef083.herokuapp.com"}
 
 const Option1 = () => (
   <OptionComponent>
-    Api key
+    <div>
+      <h3>Description:</h3>
+      <p style={{ textAlign: "left" }}>
+        The first method for using our components involves directly providing
+        the API key in the front-end. After creating an account on Livepeer and
+        generating API keys, input them into the Player.ApiKey component to set
+        them. The keys will be stored in the Zustand state and will be
+        accessible in all other components. At this point, you can call the
+        Livepeer function to upload and display a video asset. Please note the
+        following:
+        <li>
+          There is a background process to parse the asset, so larger videos may
+          experience a delay before becoming playable.
+        </li>
+        <li>
+          There is an alternative component for video uploads called
+          DirectUploadAsset. While it is less reliable because it does not use
+          "tus," it remains a viable option.
+        </li>
+      </p>
+    </div>
+    <h3>Code:</h3>
     <Markdown text={apiKeyCode} />
     <Player.ApiKey />
+    <Separator />
     <Player.GetUploadUrl />
+    <Separator />
     <Player.ResumableUploadAsset />
+    <Separator />
     <Player.GetSrc />
+    <Separator />
     <Player.Display />
+    <Separator />
   </OptionComponent>
 );
 
@@ -200,23 +231,31 @@ function resetUrl() {
 
 return (
   <Container>
-    Select which component you want to check:
-    <Dropdown
-      value={selectedComponent}
-      onChange={(event) => setSelectedComponent(event.target.value)}
+    <div
+      style={{ display: "flex", width: "100%", justifyContent: "space-evenly" }}
     >
-      <option value="player">Player</option>
-      <option value="broadcast">Broadcast</option>
-    </Dropdown>
-    Select how you want to initialise the components:
-    <Dropdown
-      value={selectedOption}
-      onChange={(event) => setSelectedOption(event.target.value)}
-    >
-      <option value="apiKey">Provide api key</option>
-      <option value="localServer">Use your local server</option>
-      <option value="remoteServer">Use a remote server</option>
-    </Dropdown>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        Select which component you want to check:
+        <Dropdown
+          value={selectedComponent}
+          onChange={(event) => setSelectedComponent(event.target.value)}
+        >
+          <option value="player">Player</option>
+          <option value="broadcast">Broadcast</option>
+        </Dropdown>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        Select how you want to initialise the components:
+        <Dropdown
+          value={selectedOption}
+          onChange={(event) => setSelectedOption(event.target.value)}
+        >
+          <option value="apiKey">Provide api key</option>
+          <option value="localServer">Use your local server</option>
+          <option value="remoteServer">Use a remote server</option>
+        </Dropdown>
+      </div>
+    </div>
     {selectedComponent === "player" && (
       <>
         {selectedOption === "apiKey" && <Option1 />}
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,9 @@ @@
     </head>
     <body>
+    	<!--
     	<div><button id="open-walletselector-button">Open wallet selector</button></div>
+    	-->
     	<near-social-viewer></near-social-viewer>
     </body>
@@ Expand Down @@