Merge pull request #12 from sol3uk/dev

1.2 to Live

controllers/youtubeController.js

@@ -20,6 +20,23 @@ module.exports = {
     });
   },
 
+  //#region CREATE
+  async createStream(streamData) {
+    let response = await youtube.liveBroadcasts.insert({
+      part,
+      // Request body metadata
+      requestBody: streamData,
+    });
+    console.log(
+      "ADDED STREAM ----------------- :",
+      response.data.id,
+      response.data.snippet?.title
+    );
+    return response;
+  },
+  //#endregion
+
+  //#region READ
   async getStreams(status = streamStatus.UPCOMING, limit = 10) {
     const livestreams = await youtube.liveBroadcasts.list({
       part,
@@ -39,18 +56,16 @@ module.exports = {
 
     return livestreams;
   },
+  //#endregion
 
+  //#region UPDATE
   async stopStreamById(id) {
     let response = await youtube.liveBroadcasts.transition({
       broadcastStatus: "complete",
       id: id,
       part,
     });
-    console.log(
-      "STOPPED STREAM ----------------- :",
-      response.data.id,
-      response.data.snippet?.title
-    );
+    console.log("STOPPED STREAM ----------------- :", response);
     return response;
   },
 
@@ -67,4 +82,15 @@ module.exports = {
     );
     return response;
   },
+  //#endregion
+
+  //#region DELETE
+  async deleteStream(streamId) {
+    let response = await youtube.liveBroadcasts.delete({
+      id: streamId,
+    });
+    console.log("DELETED STREAM ----------------- :", streamId);
+    return response;
+  },
+  //#endregion
 };

package.json

@@ -19,10 +19,11 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express-handlebars": "^5.2.1",
-    "googleapis": "^67.1.0"
+    "googleapis": "^67.1.0",
+    "material-design-icons": "^3.0.1"
   },
   "devDependencies": {
     "node-sass": "^5.0.0",
     "nodemon": "^2.0.7"
   }
-}
+}

public/js/main.js

@@ -213,15 +213,15 @@ function editStreamModal(id, element) {
 
   startSpinnerAndDisable(element, true);
 
-  let url = `/modal/editStreams/${id}`;
+  let url = `/modal/editStream/${id}`;
   const response = partialRequest(url, {
     method: "GET",
     cache: "no-cache",
     referrerPolicy: "no-referrer",
   })
     .then(function (data) {
       removeSpinners(element);
-      let modalElement = document.getElementById("editStreamsModal");
+      let modalElement = document.getElementById("actionModal");
       setInnerHTML(modalElement, data);
       let modal = new bootstrap.Modal(modalElement);
       modal.show();
@@ -258,7 +258,58 @@ function editStream(e) {
     })
     .catch(function (error) {
       removeSpinners();
-      hideAndResetModal("stopStreamsModal");
+      hideAndResetModal("actionModal");
+
+      addError(error);
+      console.log("Request failed: ", error);
+    });
+}
+
+function deleteStreamModal(id, element) {
+  //Get Bootstrap modal so we can manipulate it later
+
+  startSpinnerAndDisable(element, true);
+
+  let url = `/modal/deleteStream/${id}`;
+  const response = partialRequest(url, {
+    method: "GET",
+    cache: "no-cache",
+    referrerPolicy: "no-referrer",
+  })
+    .then(function (data) {
+      removeSpinners(element);
+      let modalElement = document.getElementById("actionModal");
+      setInnerHTML(modalElement, data);
+      let modal = new bootstrap.Modal(modalElement);
+      modal.show();
+      //TODO: dispose of old modals after they are closed
+    })
+    .catch(function (error) {
+      removeSpinners();
+
+      addError(error);
+      console.log("Request failed: ", error);
+    });
+}
+
+function deleteStream(id, e) {
+  startSpinnerAndDisable(e.target, true);
+
+  let url = `/api/streams/delete/${id}`;
+  const response = request(url, {
+    method: "DELETE",
+    cache: "no-cache",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    referrerPolicy: "no-referrer",
+  })
+    .then(function (data) {
+      window.location.href = data.redirectUrl; //redirect after successful stop
+    })
+    .catch(function (error) {
+      removeSpinners();
+      hideAndResetModal("actionModal");
 
       addError(error);
       console.log("Request failed: ", error);

routes/apiRoutes.js

@@ -3,6 +3,13 @@ const { authCheck } = require("../middleware/authCheck");
 const youtube = require("../controllers/youtubeController");
 const Stream = require("../models/Stream");
 
+//#region CREATE
+//#endregion
+
+//#region READ
+//#endregion
+
+//#region UPDATE
 router.post("/streams/stop/:id", authCheck, async (req, res) => {
   try {
     let stoppedStream = await youtube.stopStreamById(req.params.id);
@@ -32,5 +39,22 @@ router.post("/streams/edit/:id", authCheck, async (req, res) => {
     res.status(500).json(e);
   }
 });
+//#endregion
+
+//#region DELETE
+router.delete("/streams/delete/:id", authCheck, async (req, res) => {
+  try {
+    const response = await youtube.deleteStream(req.params.id); //Get stream for other details we need to populate for API
+
+    res.status(200).json({
+      redirectUrl: "/streams",
+      message: response,
+    });
+  } catch (e) {
+    console.error("ERROR STOPPING:", e);
+    res.status(500).json(e);
+  }
+});
+//#endregion
 
 module.exports = router;

routes/partialRoutes.js

@@ -7,7 +7,7 @@ const { formatStreams } = require("../utils/main");
 /* Routing */
 
 // Partials -------------
-router.get("/editStreams/:id", authCheck, isLoggedIn, async (req, res) => {
+router.get("/editStream/:id", authCheck, isLoggedIn, async (req, res) => {
   const stream = await youtube.getStreamById(req.params.id);
   const [formattedStream] = formatStreams(stream);
 
@@ -19,4 +19,16 @@ router.get("/editStreams/:id", authCheck, isLoggedIn, async (req, res) => {
   });
 });
 
+router.get("/deleteStream/:id", authCheck, isLoggedIn, async (req, res) => {
+  const stream = await youtube.getStreamById(req.params.id);
+  const [formattedStream] = formatStreams(stream);
+
+  res.render("partials/deleteStream", {
+    model: {
+      stream: formattedStream,
+    },
+    layout: false, //Need this so we just render the partial on its own
+  });
+});
+
 module.exports = router;

scss/main.scss

@@ -1,3 +1,4 @@
+$enable-caret: false;
 @import "../node_modules/bootstrap/scss/bootstrap";
 
 footer {
@@ -21,3 +22,7 @@ article {
     width: 100%;
   }
 }
+
+.material-icons {
+  vertical-align: middle;
+}

server.js

@@ -7,6 +7,7 @@ const cookieParser = require("cookie-parser");
 const hbs = require("express-handlebars");
 const helpers = require("./helpers/helpers");
 
+const PORT = config.port || 8080;
 const app = express();
 app.use(express.static("public"));
 app.use(cookieParser());
@@ -29,5 +30,5 @@ app.use("/api", apiRoutes);
 app.use("/modal", partialRoutes);
 app.use("/", pageRoutes);
 
-app.listen(config.port || 8080);
-console.log("Listening on port", config.port || 8080);
+app.listen(PORT);
+console.log(`Listening on http://localhost:${PORT}`);

views/layouts/main.handlebars

@@ -5,6 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>The Livestream Console</title>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="./css/main.css">
 </head>
 

views/partials/deleteStream.handlebars

@@ -0,0 +1,16 @@
+<div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title">Delete Livestream?</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body text-center">
+            <p>This will completely <b>DELETE</b> the livestream:</br>
+                <i>{{model.stream.title}}</i></br></p>
+            <button type="button" class="btn btn-danger" onClick="deleteStream('{{model.stream.id}}',this)">Yes, I'm sure, DELETE</button>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        </div>
+    </div>
+</div>

views/partials/editStream.handlebars

@@ -1,7 +1,7 @@
 <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
         <div class="modal-header">
-            <h5 class="modal-title">Edit Livestream</h5>
+            <h5 class="modal-title">Edit Livestream - Id: {{model.stream.id}}</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">

views/partials/navbar.handlebars

@@ -28,7 +28,7 @@
                     <a class="nav-link {{#if model.path.about}}active{{/if}}" href="/about">About</a>
                 </li>
             </ul>
-            <span class="navbar-text mx-2">v1.1</span>
+            <span class="navbar-text mx-2">v1.2</span>
             {{#unless model.path.home}}
                 {{#if model.loggedIn}}
                 <a class="btn btn-sm btn-outline-danger" href="/logout" role="button">Log out</a>