Merge pull request #34 from haxzie/dev

[RELEASE] v0.1.9-beta
haxzie · Sep 28, 2020 · c3c6ee6 · c3c6ee6
2 parents df315b2 + d21fb41
commit c3c6ee6
Show file tree

Hide file tree

Showing 25 changed files with 1,984 additions and 1,477 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "instagram-live-streamer",
   "description": "Create streaming links to instagram live",
-  "version": "0.1.8",
+  "version": "0.1.9-beta",
   "private": true,
   "copyright": "Copyright © 2020 Musthaq Ahamad",
   "licence": "MIT",
@@ -83,9 +83,10 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.3",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
+    "semver": "^7.3.2",
     "simplebar-react": "^2.2.0"
   },
   "main": "public/electron.js",

diff --git a/public/electron.js b/public/electron.js
@@ -1,10 +1,9 @@
 const electron = require("electron");
-
 const app = electron.app;
 const BrowserWindow = electron.BrowserWindow;
 const path = require("path");
 const isDev = require("electron-is-dev");
-
+ 
 let mainWindow;
 
 function createWindow() {
@@ -14,7 +13,7 @@ function createWindow() {
     webPreferences: {
       nodeIntegration: true,
       sandbox: false
-    }
+    },
   });
   mainWindow.setMenu(null);
   mainWindow.loadURL(

diff --git a/public/index.html b/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="portal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App/index.jsx b/src/App/index.jsx
@@ -1,17 +1,49 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Layout from "../components/Layout";
 import { Switch, Route, HashRouter as Router } from "react-router-dom";
 import Login from "../Pages/Login";
 import Home from "../Pages/Home";
+import Portal from "../Portal";
+import { useUpdate } from "../lib/appStatusHook";
+import UpdateModal from "../components/UpdateModal";
 
 export default function App() {
+  const [
+    isUpdateAvailable,
+    checkForUpdates,
+    isAlive,
+  ] = useUpdate();
+  const [showUpdateModal, setShowUpdateModal] = useState(false);
+
+  useEffect(() => {
+    checkForUpdates();
+  }, []);
+
+  useEffect(() => {
+    if (isUpdateAvailable) {
+      setShowUpdateModal(true);
+    }
+  }, [isUpdateAvailable]);
+
   return (
     <Router>
       <Layout>
         <Switch>
           <Route exact path="/" component={Login} />
           <Route path="/home" component={Home} />
         </Switch>
+        {showUpdateModal ? (
+          <Portal>
+            <UpdateModal
+              title="Update available!"
+              message="A new version of Streamon is available, please download the latest version."
+              link="https://getstreamon.com"
+              onClickClose={() => setShowUpdateModal(false)}
+            />
+          </Portal>
+        ) : (
+          <></>
+        )}
       </Layout>
     </Router>
   );

diff --git a/src/Pages/Comments/index.jsx b/src/Pages/Comments/index.jsx
@@ -87,7 +87,12 @@ function Comments({
     if (!(comment && comment.length > 0)) return;
     setUserComment("");
     setCommenting(true);
-    await client.live.comment(broadcastId, comment);
+    try {
+      await client.live.comment(broadcastId, comment);
+    } catch (error) {
+      console.error(error);
+      clickClose();
+    }
   };
 
   const toggleComments = async () => {
@@ -187,7 +192,7 @@ function Comments({
               className={styles.commentInput}
               value={userComment}
               onChange={(e) => setUserComment(e.target.value)}
-              placeholder={isCommenting ? "Loading..." : "Press enter to send"}
+              placeholder={isCommenting ? "Loading..." : "Type and Press enter to send"}
             />
             <button className={styles.sendButton} type="submit">
               <img src={SendIcon} alt="" />

diff --git a/src/Pages/Comments/styles.module.scss b/src/Pages/Comments/styles.module.scss
@@ -10,7 +10,7 @@
   max-width: 600px;
   height: 100%;
   margin: 0 auto;
-  background-color: var(--color-secondary-light);
+  background-color: var(--color-secondary);
   transition: 0.2s all ease-in-out;
 
   @include respond-below(md) {
@@ -27,7 +27,7 @@
   .header {
     padding: 15px;
     background-color: var(--color-secondary);
-    box-shadow: 0 10px 20px #08080a50;
+    // box-shadow: 0 10px 20px #08080a50;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -92,7 +92,7 @@
         display: flex;
         flex-direction: column;
         padding: 10px 15px;
-        background-color: var(--color-secondary);
+        background-color: var(--color-secondary-light);
         border-radius: 5px;
         flex-basis: 1;
         flex-grow: 0;
@@ -107,8 +107,8 @@
           height: 0px;
           position: absolute;
           border-left: 10px solid transparent;
-          border-right: 10px solid var(--color-secondary);
-          border-top: 10px solid var(--color-secondary);
+          border-right: 10px solid var(--color-secondary-light);
+          border-top: 10px solid var(--color-secondary-light);
           border-bottom: 10px solid transparent;
           left: -16px;
           top: 0;
@@ -177,9 +177,9 @@
     .commentInput {
       flex: 1;
       padding: 15px;
-      background-color: var(--color-secondary);
-      border: 2px solid #404663;
-      border-radius: 50px;
+      background-color: var(--color-secondary-light);
+      border: 2px solid transparent;
+      border-radius: 5px 0 0 5px;
       outline: none;
       color: var(--color-font);
       transition: 0.2s all ease-in-out;
@@ -191,44 +191,47 @@
 
     .sendButton {
       width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      border: 0;
-      margin-left: 10px;
+      height: 52px;
+      border-radius: 0 5px 5px 0;
+      border: 2px solid var(--color-primary);
+      margin-left: 0px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: 0.2s all ease-in-out;
       outline: none;
-      background: -moz-linear-gradient(
-        45deg,
-        #e6683c 0%,
-        #dc2743 33%,
-        #cc2366 66%,
-        #bc1888 100%
-      );
-      background: -webkit-linear-gradient(
-        45deg,
-        #e6683c 0%,
-        #dc2743 33%,
-        #cc2366 66%,
-        #bc1888 100%
-      );
-      background: linear-gradient(
-        45deg,
-        #e6683c 0%,
-        #dc2743 33%,
-        #cc2366 66%,
-        #bc1888 100%
-      );
+      opacity: 0.8;
+      background: var(--color-primary);
+      // background: -moz-linear-gradient(
+      //   45deg,
+      //   #e6683c 0%,
+      //   #dc2743 33%,
+      //   #cc2366 66%,
+      //   #bc1888 100%
+      // );
+      // background: -webkit-linear-gradient(
+      //   45deg,
+      //   #e6683c 0%,
+      //   #dc2743 33%,
+      //   #cc2366 66%,
+      //   #bc1888 100%
+      // );
+      // background: linear-gradient(
+      //   45deg,
+      //   #e6683c 0%,
+      //   #dc2743 33%,
+      //   #cc2366 66%,
+      //   #bc1888 100%
+      // );
 
       img {
         width: 24px;
         height: 24px;
       }
 
       &:hover {
-        transform: scale(1.1);
+        // transform: scale(1.1);
+        opacity: 1;
         cursor: pointer;
       }
 

diff --git a/src/Pages/Home/index.jsx b/src/Pages/Home/index.jsx
@@ -24,13 +24,14 @@ function Home({ profile, dispatch }) {
   const [isReady, setReady] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [broadcastId, setBroadcastId] = useState(null);
+  const [streamTitle, setStreamTitle] = useState("");
   const [streamURL, setStreamURL] = useState("");
   const [streamKey, setStreamKey] = useState("");
   const [showComments, setShowComments] = useState(false);
   const [duration, startTimer, stopTimer, clearTimer] = useTimer(0);
 
   // stop the live stream if it crosses 1 hour
-  // keeping buffer of 2 seconds to stop the stream 
+  // keeping buffer of 2 seconds to stop the stream
   useEffect(() => {
     if (duration >= 3598) {
       stopLiveStream();
@@ -47,8 +48,7 @@ function Home({ profile, dispatch }) {
         // create a stream in 720x1280 (9:16)
         previewWidth: 720,
         previewHeight: 1280,
-        // this message is not necessary, because it doesn't show up in the notification
-        message: "Streamon",
+        message: streamTitle,
       });
       setBroadcastId(broadcast_id);
       const { stream_key, stream_url } = LiveEntity.getUrlAndKey({
@@ -110,6 +110,7 @@ function Home({ profile, dispatch }) {
     }
     stopTimer();
     clearTimer();
+    setStreamTitle("");
     setLive(false);
     setReady(false);
     setBroadcastId(null);
@@ -151,10 +152,31 @@ function Home({ profile, dispatch }) {
             flexDirection: `column`,
             justifyContent: `center`,
           }}
+          className={styles.animate}
         >
-          <button className={styles.liveButton} onClick={startLiveStream}>
-            Start Live Stream
-          </button>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              startLiveStream();
+            }}
+            style={{
+              display: `flex`,
+              flexDirection: `column`,
+              justifyContent: `center`,
+            }}
+          >
+            <TextInput
+              style={{
+                margin: `15px 0`,
+                minWidth: `300px`,
+              }}
+              value={streamTitle}
+              onChange={(e) => setStreamTitle(e.target.value)}
+              placeholder="What are you streaming?"
+              autoFocus={true}
+            />
+            <button className={styles.liveButton}>Start Live Stream</button>
+          </form>
           <Button onClick={() => logout()} buttontype="clear">
             Logout
           </Button>
@@ -211,24 +233,24 @@ function Home({ profile, dispatch }) {
                   <img src={CopyIcon} />
                 </button>
               </div>
+              <Button onClick={() => setReady(false)} buttontype="ghost">
+                Cancel
+              </Button>
             </div>
           </>
         ) : (
           <></>
         )}
-        {
-          isReady && isLive ? (
-            <Timer seconds={duration} />
-          ): <></>
-        }
+        {isReady && isLive ? <Timer seconds={duration} /> : <></>}
       </div>
       {isLive ? (
         <div className={styles.popupContents}>
           <div
-            className={`${styles.fab}`}
+            className={`${styles.commentsFab}`}
             onClick={() => setShowComments(!showComments)}
           >
             <img src={CommentIcon} alt="" />
+            Comments
           </div>
 
           <Comments