Merge pull request #54 from haxzie/dev

Release Fixes to master

.github/workflows/main.yml

@@ -35,6 +35,7 @@ jobs:
           REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           REACT_APP_VERSION: $npm_package_version
           REACT_APP_API_SERVICE_URL: ${{ secrets.API_SERVICE_URL }}
+          REACT_APP_IMAGE_PROXY: ${{secrets.IG_PROXY_URL}}
       - name: Build Linux Variant (deb)
         run: npm run dist:linux
         env:
@@ -70,6 +71,7 @@ jobs:
         REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
         REACT_APP_VERSION: $npm_package_version
         REACT_APP_API_SERVICE_URL: ${{ secrets.API_SERVICE_URL }}
+        REACT_APP_IMAGE_PROXY: ${{secrets.IG_PROXY_URL}}
     - name: Build macOS variant
       run: npm run dist:mac
       env:
@@ -106,6 +108,7 @@ jobs:
           REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           REACT_APP_VERSION: $npm_package_version
           REACT_APP_API_SERVICE_URL: ${{ secrets.API_SERVICE_URL }}
+          REACT_APP_IMAGE_PROXY: ${{secrets.IG_PROXY_URL}}
       - name: Build Windows Variant
         run: npm run dist:win
         env:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "instagram-live-streamer",
   "description": "Create streaming links to instagram live",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "copyright": "Copyright © 2020 Musthaq Ahamad",
   "licence": "MIT",

public/index.html

@@ -5,6 +5,11 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="referrer" content="no-referrer" />
+    <meta name="referrer" content="unsafe-url" />
+    <meta name="referrer" content="origin" />
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <meta name="referrer" content="origin-when-cross-origin" />
     <meta
       name="description"
       content="Web site created using create-react-app"
@@ -41,4 +46,9 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <style>
+    html, body {
+      background-color: #ff5500;
+    }
+  </style>
 </html>

src/Pages/Comments/index.jsx

@@ -131,7 +131,7 @@ function Comments({
   const renderComments = (comments) => {
     return comments.map((comment) => (
       <div key={comment.pk} className={styles.comment}>
-        <img className={styles.profilePic} src={comment.user.profile_pic_url} />
+        <img className={styles.profilePic} src={`${process.env.REACT_APP_IMAGE_PROXY}/${comment.user.profile_pic_url}`} />
         <div className={styles.textContainer}>
           <h4 className={styles.title}>{comment.user.username}</h4>
           <p className={styles.text}>{comment.text}</p>
@@ -155,7 +155,7 @@ function Comments({
   return (
     <div className={`${styles.commentsScreen} ${!open ? styles.close : ""}`}>
       <div className={styles.header}>
-        <img src={profile.profile_pic_url} className={styles.headerIcon} />
+        <img src={`${process.env.REACT_APP_IMAGE_PROXY}/${profile.profile_pic_url}`} className={styles.headerIcon} />
         <h2 className={styles.title}>Comments</h2>
         {!inProgress ? (
           <Toggle

src/Pages/Home/index.jsx

@@ -36,6 +36,8 @@ function Home({ profile, dispatch }) {
   const [showComments, setShowComments] = useState(false);
   const [duration, startTimer, stopTimer, clearTimer] = useTimer(0);
 
+  console.log({ profile })
+
   // stop the live stream if it crosses 1 hour
   // keeping buffer of 2 seconds to stop the stream
   useEffect(() => {
@@ -165,18 +167,26 @@ 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.{" "}
+            Explore our {" "}
             <span
               style={{ color: "var(--color-primary)", cursor: "pointer" }}
               onClick={() =>
                 openLinkInBrowser(
-                  "https://getstreamon.com/blog/save-your-livestreams-to-igtv"
+                  "https://getstreamon.com/blog"
+                )
+              }
+            >
+              📚 Guides
+            </span> to learn how to use Streamon. <span
+              style={{ color: "var(--color-primary)", cursor: "pointer" }}
+              onClick={() =>
+                openLinkInBrowser(
+                  "https://ko-fi.com/haxzie"
                 )
               }
             >
-              Read More
-            </span>
+              Support us 💸 
+            </span> to help keep the project alive.
           </p>
           <form
             onSubmit={(e) => {
@@ -227,7 +237,7 @@ function Home({ profile, dispatch }) {
             isLive ? styles.liveBorder : ""
           }`}
         >
-          <img src={profile_pic_url} className={styles.profilePic} />
+          <img src={`${process.env.REACT_APP_IMAGE_PROXY}/${profile_pic_url}`} className={styles.profilePic} />
           {isLive ? <span className={`${styles.liveTag}`}> Live</span> : <></>}
         </div>
         <div className={styles.texts}>

src/Pages/Home/styles.module.scss

@@ -18,7 +18,7 @@
     width: 300px;
     padding: 10px;
     background-color: var(--color-secondary-light);
-    border-left: 3px solid var(--color-primary);
+    // border-left: 3px solid var(--color-primary);
     border-radius: 5px;
   }
 
@@ -126,12 +126,14 @@
     animation-name: scale-up;
     animation-duration: 0.5s;
     position: relative;
+    background-color: #ff5500;
 
     .profilePic {
       width: 120px;
       height: 120px;
       border-radius: 50%;
       background-color: var(--color-secondary-light);
+      border: none;
     }
 
     .liveTag {

src/Pages/Login/forms/loginForm.jsx

@@ -20,7 +20,7 @@ export default function LoginForm({ handleLogin, credError }) {
 
   return (
     <form className={styles.contents} onSubmit={handleSubmit}>
-      <h4 className={styles.formTitle}>Login to Instagram</h4>
+      <h4 className={styles.formTitle}>Login to your IG Account</h4>
       {credError ? (
         <span className={styles.error}>
           {credError === true ? "Invalid username or password" : credError}
@@ -48,8 +48,9 @@ export default function LoginForm({ handleLogin, credError }) {
         Login
       </Button>
       <div className={styles.statusTexts}>
-      <p className={styles.status}>Instagram Live Streamer { appVersion }</p>
+        <p className={styles.status}>Streamon {appVersion}</p>
         <p className={styles.author}>
+          ⚠️ Please read our&nbsp;
           <span
             className={styles.link}
             onClick={() => openLinkInBrowser("https://getstreamon.com/terms")}
@@ -64,25 +65,14 @@ export default function LoginForm({ handleLogin, credError }) {
               openLinkInBrowser("https://getstreamon.com/downloads")
             }
           >
-            Updates
+           🌀 Updates
           </span>{" "}
           •&nbsp;
           <span
             className={styles.link}
-            onClick={() =>
-              openLinkInBrowser(
-                "https://github.com/haxzie/instagram-live-streamer"
-              )
-            }
-          >
-            GitHub
-          </span>{" "}
-          •&nbsp;
-          <span
-            className={styles.link}
-            onClick={() => openLinkInBrowser("https://twitter.com/streamonhq")}
+            onClick={() => openLinkInBrowser("https://ko-fi.com/haxzie")}
           >
-            Community
+            💸 Donate
           </span>
         </p>
       </div>

src/Pages/Login/index.jsx

@@ -49,6 +49,8 @@ function Login({ dispatch }) {
     try {
       const profile = await client.account.currentUser();
       const accountDetails = await client.user.info(profile.pk);
+
+      console.log({ profile, accountDetails })
       // save user info in the server
       axios
         .post(

src/store/User/reducers.js

@@ -1,3 +1,4 @@
+import config from "../../utils/config";
 import { combineReducers } from "redux";
 import { types } from "./actions";
 
@@ -6,7 +7,12 @@ function instagram(state = { client: null, comments: [] }, action) {
     case types.SET_IG_CLIENT:
       return { ...state, client: action.client };
     case types.SAVE_COMMENTS:
-      return { ...state, comments: state.comments? [...action.comments,...state.comments]: action.comments };
+      return {
+        ...state,
+        comments: state.comments
+          ? [...action.comments, ...state.comments].slice(0, config.MAX_COMMENTS)
+          : action.comments,
+      };
     case types.CLEAR_COMMENTS:
       return { ...state, comments: [] };
     default:

src/utils/config.js

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