Add api key flow

NEARBuilders · Apr 24, 2024 · 23c5f3b · 23c5f3b
1 parent 76e6e55
commit 23c5f3b
Show file tree

Hide file tree

Showing 9 changed files with 284 additions and 19 deletions.
diff --git a/apps/video.every.near/widget/Broadcast/ApiKey.jsx b/apps/video.every.near/widget/Broadcast/ApiKey.jsx
@@ -0,0 +1 @@
+return <Broadcast.ApiKey />;
diff --git a/apps/video.every.near/widget/Broadcast/Debug.jsx b/apps/video.every.near/widget/Broadcast/Debug.jsx
@@ -0,0 +1 @@
+return <Broadcast.Debug />;
diff --git a/apps/video.every.near/widget/Library/BroadcastApiKey.jsx b/apps/video.every.near/widget/Library/BroadcastApiKey.jsx
@@ -0,0 +1,122 @@
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  h1 {
+    color: #292c2a;
+    font-family: Poppins;
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 130%; /* 31.2px */
+    letter-spacing: -0.48px;
+    margin: 0;
+  }
+`;
+
+const Heading = styled.h3`
+  color: #292c2a;
+  font-family: Poppins;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 150%; /* 27px */
+  letter-spacing: -0.18px;
+  margin-bottom: 8px;
+`;
+
+const PreviewContent = styled.div`
+  grid-column: span 9 / span 9;
+  border-radius: 24px;
+  border: 1px solid #c7c7c7;
+  padding: 4rem;
+  word-break: normal;
+`;
+
+const WidgetCode = `
+\`\`\`js
+<Widget
+src={"efiz.near/widget/Livepeer.Player"}
+props={{
+  title: "Original Keyboard Cat!",
+  playbackId: "8b3bdqjtdj4jsjwa",
+  PosterImage: <img src="https://example.com" alt={"Original Keyboard Cat!"} />
+}}
+/>
+\`\`\`
+`;
+
+const UsageContent = styled.div`
+  pre {
+    div {
+      padding: 1.5rem !important;
+      border-radius: 1.5rem;
+    }
+  }
+`;
+
+const PoweredBy = styled.h3`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  color: #a5a5a5 !important;
+
+  font-family: Poppins;
+  font-size: 12px !important;
+  line-height: 140% !important; /* 16.8px */
+  font-weight: 400 !important;
+  letter-spacing: -0.12px !important;
+  margin-bottom: 8px !important;
+
+  img {
+    height: 12px;
+    width: auto;
+    object-fit: cover;
+  }
+`;
+
+const PropertiesContent = styled.div`
+  grid-column: span 9 / span 9;
+  border-radius: 24px;
+  border: 1px solid #c7c7c7;
+  padding: 1rem;
+  word-break: normal;
+  overflow-x: scroll;
+
+  table {
+    border-radius: 24px;
+    overflow: hidden;
+  }
+`;
+
+return (
+  <Container>
+    <div>
+      <PoweredBy>
+        Powered by
+        <img src="https://ipfs.near.social/ipfs/bafkreia4rl6nknogzwwcj5qjladmgytyufxyl56fgr6nfjbwc6l5f6in4y" />
+      </PoweredBy>
+      <h1
+        style={{
+          fontSize: "28px",
+          fontWeight: "",
+        }}
+      >
+        BroadcastApiKey
+      </h1>
+    </div>
+    <div>
+      <Heading> Preview </Heading>
+      <PreviewContent>
+        <Widget src="video.every.near/widget/Broadcast.ApiKey" />
+      </PreviewContent>
+    </div>
+    <div>
+      <Heading>Description</Heading>
+      <p>This component...</p>
+    </div>
+    <UsageContent>
+      <Heading>Usage</Heading>
+      <Markdown text={WidgetCode} />
+    </UsageContent>
+  </Container>
+);
diff --git a/apps/video.every.near/widget/Library/BroadcastSandbox.jsx b/apps/video.every.near/widget/Library/BroadcastSandbox.jsx
@@ -0,0 +1,11 @@
+return (
+  <>
+    <h4>1. add the api key:</h4>
+    <Broadcast.ApiKey />
+    <h4>2. generate a stream key:</h4>
+    <Broadcast.GenerateStream />
+    <h4>3. stream:</h4>
+    <Broadcast.Player />
+    <Broadcast.Debug />
+  </>
+);
diff --git a/apps/video.every.near/widget/Library/PlayerApiKey.jsx b/apps/video.every.near/widget/Library/PlayerApiKey.jsx
@@ -0,0 +1,115 @@
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  h1 {
+    color: #292c2a;
+    font-family: Poppins;
+    font-size: 24px;
+    font-weight: 500;
+    line-height: 130%; /* 31.2px */
+    letter-spacing: -0.48px;
+    margin: 0;
+  }
+`;
+
+const Heading = styled.h3`
+  color: #292c2a;
+  font-family: Poppins;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 150%; /* 27px */
+  letter-spacing: -0.18px;
+  margin-bottom: 8px;
+`;
+
+const PreviewContent = styled.div`
+  grid-column: span 9 / span 9;
+  border-radius: 24px;
+  border: 1px solid #c7c7c7;
+  padding: 4rem;
+  word-break: normal;
+`;
+
+const WidgetCode = `
+\`\`\`js
+<Widget src={"efiz.near/widget/PlayerApiKey"} />
+\`\`\`
+`;
+
+const UsageContent = styled.div`
+  pre {
+    div {
+      padding: 1.5rem !important;
+      border-radius: 1.5rem;
+    }
+  }
+`;
+
+const PoweredBy = styled.h3`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  color: #a5a5a5 !important;
+
+  font-family: Poppins;
+  font-size: 12px !important;
+  line-height: 140% !important; /* 16.8px */
+  font-weight: 400 !important;
+  letter-spacing: -0.12px !important;
+  margin-bottom: 8px !important;
+
+  img {
+    height: 12px;
+    width: auto;
+    object-fit: cover;
+  }
+`;
+
+const PropertiesContent = styled.div`
+  grid-column: span 9 / span 9;
+  border-radius: 24px;
+  border: 1px solid #c7c7c7;
+  padding: 1rem;
+  word-break: normal;
+  overflow-x: scroll;
+
+  table {
+    border-radius: 24px;
+    overflow: hidden;
+  }
+`;
+
+return (
+  <Container>
+    <div>
+      <PoweredBy>
+        Powered by
+        <img src="https://ipfs.near.social/ipfs/bafkreia4rl6nknogzwwcj5qjladmgytyufxyl56fgr6nfjbwc6l5f6in4y" />
+      </PoweredBy>
+      <h1
+        style={{
+          fontSize: "28px",
+          fontWeight: "",
+        }}
+      >
+        PlayerApiKey
+      </h1>
+    </div>
+    <div>
+      <Heading> Preview </Heading>
+      <PreviewContent>
+        <Widget src="video.every.near/widget/Player.ApiKey" />
+      </PreviewContent>
+    </div>
+    <div>
+      <Heading>Description</Heading>
+      <p>This component allow you to set the Livepeer Studio api key.</p>
+    </div>
+    <UsageContent>
+      <Heading>Usage</Heading>
+      <Markdown text={WidgetCode} />
+    </UsageContent>
+  </Container>
+);
diff --git a/apps/video.every.near/widget/Library/PlayerSandbox.jsx b/apps/video.every.near/widget/Library/PlayerSandbox.jsx
@@ -0,0 +1,17 @@
+return (
+  <>
+    <h4>1. set up api key:</h4>
+    <Player.ApiKey />
+    <h4>2. create an asset object:</h4>
+    <Player.GetUploadUrl />
+    <h4>3. upload the asset directly:</h4>
+    <Player.DirectUploadAsset />
+    <h4>3a. or with resumable upload (more reliable):</h4>
+    <Player.ResumableUploadAsset />
+    <h4>4. get the `src` object</h4>
+    <Player.GetSrc />
+    <h4>5. Display the asset</h4>
+    <Player.Display value={props.key} props={props.playerProps} />
+    <Player.Debug />
+  </>
+);
diff --git a/apps/video.every.near/widget/Library/Sandbox.jsx b/apps/video.every.near/widget/Library/Sandbox.jsx
diff --git a/apps/video.every.near/widget/Library/index.jsx b/apps/video.every.near/widget/Library/index.jsx
@@ -59,19 +59,31 @@ const tabs = {
       widget: "video.every.near/widget/Library.GetSrc",
     },
     {
-      label: "Sandbox",
-      widget: "video.every.near/widget/Library.Sandbox",
+      label: "PlayerApiKey",
+      widget: "video.every.near/widget/Library.PlayerApiKey",
+    },
+    {
+      label: "Player Sandbox",
+      widget: "video.every.near/widget/Library.PlayerSandbox",
     },
   ],
   broadcast: [
     {
-      label: "broadcast",
+      label: "Broadcast",
       widget: "video.every.near/widget/Library.Broadcast",
     },
     {
-      label: "generate stream",
+      label: "GenerateStream",
       widget: "video.every.near/widget/Library.GenerateStream",
     },
+    {
+      label: "ApiKey",
+      widget: "video.every.near/widget/Library.BroadcastApiKey",
+    },
+    {
+      label: "Broadcast Sandbox",
+      widget: "video.every.near/widget/Library.BroadcastSandbox",
+    },
   ],
 };
 

diff --git a/apps/video.every.near/widget/Player/ApiKey.jsx b/apps/video.every.near/widget/Player/ApiKey.jsx
@@ -0,0 +1 @@
+return <Player.ApiKey />;