Moved control pages to client project. Abstracted away db creation.

Author: sergeychernyshev

README.md

@@ -14,18 +14,48 @@ Then just run the following command:
 npx @streamerjs/streamerjs
 ```
 
-## Configuration
+## Scenes
+
+Scenes are HTML files that are used to create the layout of the video stream. You can create multiple scenes and add them to OBS Studio as browser sources.
+
+You can also create multiple files for different layers and group in folders per scene - ultimately, file organization is up to you.
+
+### Create a basic scene
+
+Run the following command to create a basic scene:
+
+```bash
+npx @streamerjs/streamerjs create-scene my-scene.html
+```
+
+Streamer JS will create a basic scene in `/scenes/` folder that has some basic HTML elements, CSS stylesheet and a JavaScript file that uses PouchDB synchronization with the [control panel](#control-panel).
+
+For further customization, you can modify the scene HTML, CSS and JavaScript to accomplish whatever you want.
+
+## Additional Configuration
 
 To configure the application, you need to create a file named `config.json` in the root of the project. This file can contain the following information:
 
 ```json
 {
   "port": 2525,
-  "dbpath": "db",
-  "control": true
+  "dbpath": "db"
 }
 ```
 
 - `port`: The port where the web server will run
 - `dbpath`: The path where the database will be stored
-- `control`: If `true`, the application will allow remote control of the stream
+
+## Control Panel
+
+To enable control panel, create a folder named `/control/` in the root of the project and add HTML page with a control panel that uses the PouchDB to update the UI.
+
+### Create a basic control panel
+
+To create a basic control panel file in `/control/` folder, run the following command:
+
+```bash
+npx @streamerjs/streamerjs create-control-panel index.html
+```
+
+The page will include the control panel HTML, CSS and JavaScript files and will use PouchDB to synchronize with the [scenes](#scenes).

cli.js

@@ -40,24 +40,26 @@ const insecurePort = config.port || process.env.PORT;
 
 const app = express();
 
-// project resources
+// Scenes in user's project
 app.use(
-  "/scenes",
+  "/scenes/",
   express.static("scenes"),
   serveIndex("scenes", { icons: true })
 );
+
+// Assets in user's project
 app.use("/assets/", express.static("assets"));
 
 // streamer resources
-const templates = url.fileURLToPath(import.meta.resolve("./public/"));
+const templates = url.fileURLToPath(import.meta.resolve("./templates/"));
 app.set("view engine", "ejs").set("views", templates);
 
-app.get("/", (req, res) => {
-  app.engine("ejs", ejs.renderFile);
-  res.render("index", { control: config.control });
-});
+let enableControlPanel = false;
+
+// check if control folder exists to indicate that the user wants to create the control panel(s)
+if (fs.existsSync("control")) {
+  enableControlPanel = true;
 
-if (config.control) {
   // Check if the db folder exists, create it if it doesn't
   if (!fs.existsSync(config.dbpath)) {
     try {
@@ -72,19 +74,24 @@ if (config.control) {
 
   new StreamerPouchDB("streamer");
 
-  const controlPath = url.fileURLToPath(import.meta.resolve("./control/"));
-  app.use("/control/", express.static(controlPath));
+  // Control panel resources in user's project
+  app.use("/control/", express.static("control"));
 
+  /**
+   * Server paths
+   */
   const pouchDBLibPath = url.fileURLToPath(
     import.meta.resolve("Pouchdb/dist/")
   );
-  app.use("/pouchdb/", express.static(pouchDBLibPath));
+  // PouchDB client library
+  app.use("/_resources/pouchdb/", express.static(pouchDBLibPath));
 
   const pouchApp = ExpressPutchDBFactory(StreamerPouchDB, {
     logPath: config.dbpath + "/log.txt",
     configPath: config.dbpath + "/config.json",
   });
-  app.use("/db", pouchApp);
+  // PouchDB server
+  app.use("/_db", pouchApp);
 }
 
 // Get network interfaces
@@ -105,6 +112,18 @@ Object.keys(networkInterfaces).forEach((interfaceName) => {
   });
 });
 
+// Server index linking to other parts of the server
+app.get("/", (req, res) => {
+  app.engine("ejs", ejs.renderFile);
+  res.render("index", { control: enableControlPanel });
+});
+
+// Assets in user's project
+app.use(
+  "/_resources/",
+  express.static(url.fileURLToPath(import.meta.resolve("./resources/")))
+);
+
 // HTTP server
 app.listen(insecurePort);
 
@@ -113,7 +132,7 @@ ips.forEach((ip) => {
   console.log(`http://${ip}:${insecurePort}`);
 });
 
-if (config.control) {
+if (enableControlPanel) {
   console.log("\nControl your stream by opening:");
   ips.forEach((ip) => {
     console.log(`http://${ip}:${insecurePort}/control/`);

control/control.js

@@ -0,0 +1,31 @@
+const db = (() => {
+  var localDB = new PouchDB("streamer");
+
+  const remoteURL = new URL("/_db/streamer", location.href).href;
+  console.log("remoteURL", remoteURL);
+
+  var remoteDB = new PouchDB(remoteURL);
+
+  localDB
+    .sync(remoteDB, {
+      live: true,
+      retry: true,
+    })
+    .on("change", function (change) {
+      console.log("yo, something changed!", change);
+    })
+    .on("paused", function (info) {
+      console.log(
+        "replication was paused, usually because of a lost connection",
+        info
+      );
+    })
+    .on("active", function (info) {
+      console.log("replication was resumed", info);
+    })
+    .on("error", function (err) {
+      console.log("totally unhandled error (shouldn't happen)", err);
+    });
+
+  return localDB;
+})();