init

README.md

@@ -1,6 +1,13 @@
-# video.every.near
 
-## Getting Started
+# trylivepeer.near
+
+—> [near-bos-webcomponent](https://github.com/petersalomonsen/near-bos-webcomponent) with [livepeer](https://livepeer.org/) installed, deployed to [web4](https://web4.near.page/), in order to provide a sandbox for builders wanting to create decentralized video apps.
+
+![trylivepeer.near](./assets/trylivepeer.png)
+
+See it live: [trylivepeer.near.page](https://trylivepeer.near.page)
+
+## Getting started
 
 To run locally, install packages:
 
@@ -15,3 +22,24 @@ pnpm run dev
 ```
 
 This will serve the widgets from `http://127.0.0.1:4040/` and start a local gateway.
+
+## Usage
+
+### `Player`
+
+https://docs.livepeer.org/sdks/react/migration/migration-4.x#player
+
+Example code: https://docs.livepeer.org/sdks/react/Player
+
+### `Broadcast`
+
+https://docs.livepeer.org/sdks/react/migration/migration-4.x#broadcast
+
+Example code: https://docs.livepeer.org/sdks/react/Broadcast
+
+
+### TODO:
+- [ ] Player Component
+- [ ] Broadcast Component
+- [ ] ICreate clone of SDK for VM.require module (@mattb.near) : livepeer-js : https://docs.livepeer.org/sdks/
+- [ ] Ability to set default workspace

apps/trylivepeer.near/bos.config.json

@@ -0,0 +1,3 @@
+{
+  "appAccount": "trylivepeer.near"
+}

apps/trylivepeer.near/widget/Broadcast.jsx

@@ -0,0 +1,8 @@
+// we use the custom VM component
+// which renders gateway/components/Broadcast
+return (
+  <>
+    {/* need to be explicit with props when passing from widget to VM */}
+    <Broadcast value={props.key} />
+  </>
+);

apps/trylivepeer.near/widget/Player.jsx

@@ -0,0 +1,8 @@
+// we use the custom VM component
+// which renders gateway/components/Player
+return (
+  <>
+    {/* need to be explicit with props when passing from widget to VM */}
+    <Player value={props.key} />
+  </>
+);

apps/trylivepeer.near/widget/index.jsx

@@ -0,0 +1,58 @@
+const config = {
+  theme: {},
+  layout: {
+    src: "devs.near/widget/Layout",
+    props: {
+      variant: "standard",
+    },
+  },
+  blocks: {
+    // customize the header
+    Header: () => (
+      <div className="row">
+        <div className="col-12">
+          <div className="d-flex justify-content-between align-items-center border p-3">
+            <h1>trylivepeer</h1>
+            <button className="button">Connect</button>
+          </div>
+        </div>
+      </div>
+    ),
+    // customize the footer
+    Footer: () => <>powered by livepeer, built on near, a part of everything</>,
+  },
+  router: {
+    param: "page",
+    routes: {
+      index: {
+        path: "trylivepeer.near/widget/page.home", // edit this locally
+        blockHeight: "final",
+        init: {
+          name: "Home",
+        },
+        default: true,
+      },
+      sandbox: {
+        path: "trylivepeer.near/widget/page.sandbox",
+        blockHeight: "final",
+        init: {
+          name: "Sandbox",
+        },
+      },
+      // or add more routes
+    },
+  },
+};
+
+const CSS = styled.div`
+  .button {
+  }
+
+  height: 100vh;
+`;
+
+return (
+  <CSS>
+    <Widget src="every.near/widget/app.view" props={{ config, ...props }} />
+  </CSS>
+);

apps/trylivepeer.near/widget/page/home.jsx

@@ -0,0 +1,37 @@
+return (
+  <div className="container">
+    <div className="row my-4">
+      <div className="col-12">
+        <div className="d-flex flex-wrap justify-content-between">
+          {/* Placeholder for the nine circles */}
+          {[...Array(9)].map((_, idx) => (
+            <div key={idx} className="m-2">
+              <div
+                className="rounded-circle border"
+                style={{ width: "100px", height: "100px" }}
+              ></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+
+    <div className="row">
+      <div className="col-6">
+        <div className="border p-3">
+          <p>description</p>
+        </div>
+      </div>
+      <div className="col-3">
+        <Link to="/trylivepeer.near/widget/index?page=social">
+          <button className="button">Social</button>
+        </Link>
+      </div>
+      <div className="col-3">
+        <Link to="/trylivepeer.near/widget/index?page=sandbox">
+          <button className="button">Sandbox</button>
+        </Link>
+      </div>
+    </div>
+  </div>
+);

apps/trylivepeer.near/widget/page/sandbox.jsx

@@ -0,0 +1,22 @@
+const data = {
+  key: "value",
+};
+
+return (
+  <>
+    <div className="row">
+      <div className="col">
+        <div>
+          <h1>Player</h1>
+          <Widget src="trylivepeer.near/widget/Player" props={data} />
+        </div>
+      </div>
+      <div className="col">
+        <div>
+          <h1>Broadcast</h1>
+          <Widget src="trylivepeer.near/widget/Broadcast" props={data} />
+        </div>
+      </div>
+    </div>
+  </>
+);

gateway/README.md

@@ -1,62 +1,92 @@
-# NEAR BOS Web Component ( custom element )
+# trylivepeer.near
 
-This is a Proof of Concept of embedding a NEAR BOS widget into any web application as a Web Component / Custom element.
+—> [near-bos-webcomponent](https://github.com/petersalomonsen/near-bos-webcomponent) with [livepeer](https://livepeer.org/) installed, deployed to [web4](https://web4.near.page/), in order to provide a sandbox for builders wanting to create decentralized video apps.
 
-Just load react production react bundles into your index.html as shown below, and use the `near-social-viewer` custom element to embed the BOS widget.
+## before you begin
 
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Near social</title>
-    <script defer="defer" src="/runtime.REPLACE_WITH_BUNDLE_HASH.bundle.js"></script>
-    <script defer="defer" src="/main.REPLACE_WITH_BUNDLE_HASH.bundle.js"></script></head>
-  <body>
-    <h1>NEAR BOS embeddable custom element</h1>
-    <near-social-viewer></near-social-viewer>
-  </body>
-</html>
-```
+These packages utilize `pnpm` for monorepo capabilities.
 
+```cmd
+npm install -g pnpm
+```
 
-## Setup & Development
+Then, we need to init the git submodules:
 
-Initialize repo:
-```
-yarn
+```cmd
+pnpm run init
 ```
 
-Start development version:
-```
-yarn start
+and install dependencies:
+
+```cmd
+pnpm install
 ```
 
-Production build:
+**Note:** In order to run everything on M1 processors, the following steps are also needed:
+- Make sure Xcode Command Line Tools are installed: `xcode-select --install`;
+- Make sure you have a supported Python version (works with 3.11, but not with 3.12);
+- Make sure you are using Node version 18.
+
+Reference: [node-gyp on macOS](https://github.com/nodejs/node-gyp?tab=readme-ov-file#on-macos)
 
+## get started
+
+To modify existing widgets in the /apps directory,
+
+```cmd
+pnpm run dev
 ```
-yarn prod
+
+![bos-workspace](./assets/bos-workspace.png)
+
+This will serve the widgets in ./apps to a basic gateway. To view your local widgets, use one of the below methods:
+
+- *Beginner* ~ use the default bos-workspace gateway with default VM, http://localhost:8080
+- *Intermediate* ~ set flags on existing gateways like [near.org](https://near.org/flags) or [everything.dev](https://everything.dev/flags)
+- *Advanced* ~ set flags on the local gateway hooked up to this monorepo's VM
+
+## deploy to web4
+
+(needs [bos-cli-rs](https://github.com/bos-cli-rs/bos-cli-rs))
+
+1. create a subaccount
+
+```cmd
+near account create-account fund-myself web4.alice.near '1 NEAR' autogenerate-new-keypair save-to-keychain sign-as alice.near network-config mainnet sign-with-keychain send
 ```
 
-Serve the production build:
+2. deploy [minimum web4 contract](https://github.com/vgrichina/web4-min-contract)
+
+```cmd
+cd packages/web4-deploy/data
 
+near contract deploy web4.alice.near use-file web4-min.wasm without-init-call network-config mainnet sign-with-keychain send
 ```
-yarn serve prod
+
+3. change default widgetSrc in `near-bos-webcomponent/src/App#24` and build
+
+```cmd
+cd near-bos-webcomponent
+yarn build
 ```
 
-# Use redirectmap for development
+4. export keys to use in web4 deploy of `dist`
 
-The NEAR social VM supports a feature called `redirectMap` which allows you to load widgets from other sources than the on chain social db. An example redirect map can look like this:
+```cmd
+near account export-account web4.alice.near using-private-key network-config mainnet
 
-```json
-{"devhub.near/widget/devhub.page.feed": {"code": "return 'hello';"}}
+NEAR_ENV=mainnet NEAR_SIGNER_KEY=${PRIVATE_KEY} npx web4-deploy dist web4.alice.near --nearfs
 ```
 
-The result of applying this redirect map is that the widget `devhub.near/widget/devhub.page.feed` will be replaced by a string that says `hello`.
+5. done, app deployed at alice.near.page
+
+
+
+
+https://docs.livepeer.org/sdks/react/migration/migration-4.x
 
-The `near-social-viewer` web component supports loading a redirect map from the session storage, which is useful when using the viewer for local development or test pipelines.
+https://docs.livepeer.org/sdks/javascript
 
-By setting the session storage key `nearSocialVMredirectMap` to the JSON value of the redirect map, the web component will pass this to the VM Widget config.
+https://github.com/livepeer/livepeer-js/tree/main/example
 
-You can also use the same mechanism as [near-discovery](https://github.com/near/near-discovery/) where you can load components from a locally hosted [bos-loader](https://github.com/near/bos-loader) by adding the key `flags` to localStorage with the value `{"bosLoaderUrl": "http://127.0.0.1:3030" }`.
+https://near.social/devhub.near/widget/app?page=post&id=1153

gateway/src/App.js

@@ -21,6 +21,8 @@ import {
 } from "react-router-dom";
 import { LivepeerCreator } from "./components/LivepeerCreator";
 import { LivepeerPlayer } from "./components/LivepeerPlayer";
+import { Player } from "./components/Player";
+import { Broadcast } from "./components/Broadcast";
 
 const SESSION_STORAGE_REDIRECT_MAP_KEY = "nearSocialVMredirectMap";
 
@@ -113,19 +115,27 @@ function App(props) {
             return <Link {...props} />;
           },
           LivepeerPlayer: (props) => {
+            // replace this
             return (
               <LivepeerConfig client={livepeerClient}>
                 <LivepeerPlayer {...props} />
               </LivepeerConfig>
             );
           },
           LivepeerCreator: (props) => {
+            // replace this
             return (
               <LivepeerConfig client={livepeerClient}>
                 <LivepeerCreator {...props} />
               </LivepeerConfig>
             );
           },
+          Player: (props) => {
+            return <Player {...props} />;
+          },
+          Broadcast: (props) => {
+            return <Broadcast {...props} />;
+          },
         },
         config: {
           defaultFinality: undefined,

gateway/src/components/Broadcast.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const Broadcast = (props) => {
+  // import Livepeer
+  // implement agnostic component
+  // props come from widget
+  return (
+    <textarea
+      value={JSON.stringify(props, undefined, 2)}
+      style={props.style ?? { width: "100%", height: "100%" }}
+    />
+  );
+};

gateway/src/components/Player.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const Player = (props) => {
+  // import Livepeer
+  // implement agnostic component
+  // props come from widget
+  return (
+    <textarea
+      value={JSON.stringify(props, undefined, 2)}
+      style={props.style ?? { width: "100%", height: "100%" }}
+    />
+  );
+};

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "video.every.near",
+  "name": "trylivepeer.near",
   "version": "0.0.0",
   "description": "",
   "author": "",