Merge pull request #45 from haxzie/dev

Release Extended Stream Limit

package.json

@@ -1,7 +1,7 @@
 {
   "name": "instagram-live-streamer",
   "description": "Create streaming links to instagram live",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "private": true,
   "copyright": "Copyright © 2020 Musthaq Ahamad",
   "licence": "MIT",
@@ -73,6 +73,8 @@
     "@testing-library/user-event": "^10.4.0",
     "axios": "^0.20.0",
     "copy-to-clipboard": "^3.3.1",
+    "dotenv": "^8.2.0",
+    "electron-google-analytics": "^1.0.2",
     "electron-is-dev": "^1.2.0",
     "electron-squirrel-startup": "^1.0.0",
     "electron-store": "^5.1.1",
@@ -87,7 +89,9 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "semver": "^7.3.2",
-    "simplebar-react": "^2.2.0"
+    "simplebar-react": "^2.2.0",
+    "universal-analytics": "^0.4.23",
+    "uuid": "^8.3.2"
   },
   "main": "public/electron.js",
   "homepage": "./",

public/electron.js

@@ -3,7 +3,7 @@ const app = electron.app;
 const BrowserWindow = electron.BrowserWindow;
 const path = require("path");
 const isDev = require("electron-is-dev");
- 
+
 let mainWindow;
 
 function createWindow() {

src/App/index.jsx

@@ -37,7 +37,7 @@ export default function App() {
             <UpdateModal
               title="Update available!"
               message="A new version of Streamon is available, please download the latest version."
-              link="https://getstreamon.com"
+              link="https://getstreamon.com/downloads"
               onClickClose={() => setShowUpdateModal(false)}
             />
           </Portal>

src/Pages/Comments/index.jsx

@@ -24,14 +24,18 @@ function Comments({
   const [userComment, setUserComment] = useState("");
   const [isCommenting, setCommenting] = useState(false);
   const [pinnedComment, setPinnedComment] = useState();
+  const [isFetchingComments, setFetchingComments] = useState(false);
+
   const client = getClient();
   let lastCommentTs =
     comments && comments.length > 0 ? comments[0].created_at : 0;
 
   const startComments = async () => {
     setInProgress(true);
     window.refreshInterval = setInterval(() => {
-      fetchComments();
+      if (!isFetchingComments) {
+        fetchComments();
+      }
     }, 2000);
     setInProgress(false);
   };
@@ -46,6 +50,7 @@ function Comments({
   };
 
   const fetchComments = async () => {
+    setFetchingComments(true);
     try {
       const { comments } = await client.live.getComment({
         broadcastId,
@@ -60,6 +65,7 @@ function Comments({
     } catch (error) {
       console.error(error);
     }
+    setFetchingComments(false);
   };
 
   const pinComment = async (comment) => {

src/Pages/Home/index.jsx

@@ -14,6 +14,12 @@ import CopyIcon from "../../images/copy.svg";
 import copy from "copy-to-clipboard";
 import Timer from "../../components/Timer";
 import useTimer from "../../lib/timerHook";
+import config from "../../utils/config";
+import open from "open";
+
+const openLinkInBrowser = (link) => {
+  open(link);
+};
 
 function Home({ profile, dispatch }) {
   const client = getClient();
@@ -33,7 +39,7 @@ function Home({ profile, dispatch }) {
   // stop the live stream if it crosses 1 hour
   // keeping buffer of 2 seconds to stop the stream
   useEffect(() => {
-    if (duration >= 3598) {
+    if (duration >= config.STREAM_LIMIT - 2) {
       stopLiveStream();
     }
   }, [duration]);
@@ -96,7 +102,10 @@ function Home({ profile, dispatch }) {
     setIsLoading(true);
     try {
       await client.live.endBroadcast(broadcastId);
-      await client.live.addToPostLive(broadcastId);
+      if (config.SAVE_BROADCAST_TO_STORIES) {
+        await client.live.addToPostLive(broadcastId);
+      }
+
     } catch (error) {
       if (error instanceof IgLoginRequiredError) {
         removeSession();
@@ -122,6 +131,7 @@ function Home({ profile, dispatch }) {
   const logout = async () => {
     removeSession();
     client.account.logout();
+
     history.push("/");
   };
 
@@ -154,6 +164,20 @@ function Home({ profile, dispatch }) {
           }}
           className={styles.animate}
         >
+          <p className={styles.info}>
+            Please make sure Live Archives are enabled in your account or you
+            are recording the stream on your broadcasting software.{" "}
+            <span
+              style={{ color: "var(--color-primary)", cursor: "pointer" }}
+              onClick={() =>
+                openLinkInBrowser(
+                  "https://getstreamon.com/blog/save-your-livestreams-to-igtv"
+                )
+              }
+            >
+              Read More
+            </span>
+          </p>
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -241,7 +265,7 @@ function Home({ profile, dispatch }) {
         ) : (
           <></>
         )}
-        {isReady && isLive ? <Timer seconds={duration} /> : <></>}
+        {isReady && isLive ? <Timer seconds={duration} maxLimit={config.STREAM_LIMIT}/> : <></>}
       </div>
       {isLive ? (
         <div className={styles.popupContents}>

src/Pages/Home/styles.module.scss

@@ -11,6 +11,17 @@
   position: relative;
   overflow: hidden;
 
+  .info {
+    font-size: 0.8rem;
+    line-height: 1.2rem;
+    margin: 15px 0;
+    width: 300px;
+    padding: 10px;
+    background-color: var(--color-secondary-light);
+    border-left: 3px solid var(--color-primary);
+    border-radius: 5px;
+  }
+
   .animate {
     transition: 0.3s all ease-in-out;
     animation-name: slide-up;

src/components/Timer/index.jsx

@@ -1,36 +1,28 @@
-import React, { useState } from 'react'
-import styles from "./styles.module.scss"
+import React, { useState } from "react";
+import styles from "./styles.module.scss";
 
-export default function Timer({ seconds }) {
+export default function Timer({ seconds, maxLimit }) {
+  const format = (time) => {
+    // Hours, minutes and seconds
+    var hrs = ~~(time / 3600);
+    var mins = ~~((time % 3600) / 60);
+    var secs = ~~time % 60;
 
-    /**
-     * Returns minutes from the given seconds
-     */
-    const getMinutes = () => {
-        if (seconds) {
-            const minutes = Math.trunc(seconds/60);
-            return minutes < 10 ? `0${minutes}`: `${minutes}`;
-        } else {
-            return `00`;
-        }
+    // Output like "1:01" or "4:03:59" or "123:03:59"
+    var ret = "";
+    if (hrs > 0) {
+      ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
     }
+    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
+    ret += "" + secs;
+    return ret;
+  };
 
-    /**
-     * returns the seconds part within 60 from the given total seconds
-     */
-    const getSeconds = () => {
-        if (seconds) {
-            const ts = seconds%60
-            return ts < 10? `0${ts}` : `${ts}`;
-        } else {
-            return `00`;
-        }
-    }
-
-
-    return (
-        <div className={styles.timer}>
-            <span>{getMinutes()}:{getSeconds()}</span>
-        </div>
-    )
+  return (
+    <div className={styles.timer}>
+      <span>
+        {format(seconds)}<span style={{ opacity: "0.5"}}>/{format(maxLimit)}</span>
+      </span>
+    </div>
+  );
 }

src/components/UpdateModal/index.jsx

@@ -15,7 +15,7 @@ export default function UpdateModal({
         <h1 className={styles.title}>{title}</h1>
         <p className={styles.description}>{message}</p>
         <div className={styles.buttonArea}>
-            <button onClick={() => onClickClose()}>Remind me later</button>
+            {/* {<button onClick={() => onClickClose()}>Remind me later</button>} */}
             <button onClick={() => open(link)} className={styles.primary} autoFocus>Download Now</button>
         </div>
       </div>

src/utils/config.js

@@ -0,0 +1,6 @@
+const config = {
+    STREAM_LIMIT: 14400,
+    SAVE_BROADCAST_TO_STORIES: false
+}
+
+export default config;

src/utils/secrets.js

@@ -0,0 +1 @@
+export const STREAM_LIMIT = 14400; // 4 hours in seconds