Merge pull request #31 from haxzie/dev

[RELEASE] v0.1.7-beta
haxzie · Sep 18, 2020 · fb69dcc · fb69dcc
2 parents 2eb9384 + 26e0358
commit fb69dcc
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 14 deletions.
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.6",
+  "version": "0.1.7-beta",
   "private": true,
   "copyright": "Copyright © 2020 Musthaq Ahamad",
   "licence": "MIT",

diff --git a/src/Pages/Comments/index.jsx b/src/Pages/Comments/index.jsx
@@ -9,6 +9,7 @@ import CloseIcon from "../../images/down-arrow.svg";
 import SendIcon from "../../images/direct.svg";
 import Toggle from "../../components/Toggle";
 import MuteIcon from "../../images/mute.svg";
+import PinIcon from "../../images/pin.svg";
 
 function Comments({
   broadcastId,
@@ -20,10 +21,12 @@ function Comments({
 }) {
   const [isMuted, setMuted] = useState(false);
   const [inProgress, setInProgress] = useState(false);
-  const [userComment, setUserComment] = useState('');
+  const [userComment, setUserComment] = useState("");
   const [isCommenting, setCommenting] = useState(false);
+  const [pinnedComment, setPinnedComment] = useState();
   const client = getClient();
-  let lastCommentTs = comments && comments.length>0? comments[0].created_at : 0;
+  let lastCommentTs =
+    comments && comments.length > 0 ? comments[0].created_at : 0;
 
   const startComments = async () => {
     setInProgress(true);
@@ -62,15 +65,34 @@ function Comments({
     }
   };
 
+  const pinComment = async (comment) => {
+    // check if current comment is pinned
+    if (pinnedComment && pinnedComment.pk === comment.pk) {
+      try {
+        setPinnedComment(null);
+        await client.live.unpinComment(broadcastId, comment.pk);
+      } catch (error) {
+        console.error(error);
+      }
+    } else {
+      try {
+        setPinnedComment(comment);
+        await client.live.pinComment(broadcastId, comment.pk);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
   const addComment = async () => {
     console.log("adding comments...");
     const comment = userComment;
     // do not comment, if there is no comment text available
     if (!(comment && comment.length > 0)) return;
-    setUserComment('')
+    setUserComment("");
     setCommenting(true);
     await client.live.comment(broadcastId, comment);
-  }
+  };
 
   const toggleComments = async () => {
     try {
@@ -101,13 +123,26 @@ function Comments({
   }, []);
 
   const renderComments = (comments) => {
+    console.log(comments);
     return comments.map((comment) => (
       <div key={comment.pk} className={styles.comment}>
         <img className={styles.profilePic} src={comment.user.profile_pic_url} />
         <div className={styles.textContainer}>
           <h4 className={styles.title}>{comment.user.username}</h4>
           <p className={styles.text}>{comment.text}</p>
         </div>
+        <div
+          className={`${styles.pinIcon} ${
+            pinnedComment
+              ? pinnedComment.pk === comment.pk
+                ? styles.active
+                : ""
+              : ""
+          }`}
+          onClick={() => pinComment(comment)}
+        >
+          <img src={PinIcon} className={styles.icon} />
+        </div>
       </div>
     ));
   };
@@ -146,11 +181,20 @@ function Comments({
         <>
           <div className={styles.comments}>{renderComments(comments)}</div>
 
-          <form className={styles.commentBox} onSubmit={(e) => {
-            e.preventDefault();
-            addComment();
-          }}>
-            <input type="text" className={styles.commentInput} value={userComment} onChange={(e) => setUserComment(e.target.value)} placeholder={isCommenting? "Loading...":"Press enter to send"}/>
+          <form
+            className={styles.commentBox}
+            onSubmit={(e) => {
+              e.preventDefault();
+              addComment();
+            }}
+          >
+            <input
+              type="text"
+              className={styles.commentInput}
+              value={userComment}
+              onChange={(e) => setUserComment(e.target.value)}
+              placeholder={isCommenting ? "Loading..." : "Press enter to send"}
+            />
             <button className={styles.sendButton} type="submit">
               <img src={SendIcon} alt="" />
             </button>

diff --git a/src/Pages/Comments/styles.module.scss b/src/Pages/Comments/styles.module.scss
@@ -72,7 +72,7 @@
   .comments {
     flex-grow: 1;
     flex-basis: 0;
-    overflow-x: auto;
+    overflow-x: hidden;
     display: flex;
     flex-direction: column-reverse;
 
@@ -95,16 +95,19 @@
         background-color: var(--color-secondary);
         border-radius: 5px;
         flex-basis: 1;
+        flex-grow: 0;
         position: relative;
         margin-left: 10px;
+        max-width: 250px;
+        position: relative;
 
         &:before {
           content: "";
           width: 0px;
           height: 0px;
           position: absolute;
           border-left: 10px solid transparent;
-          border-right: 10px  solid var(--color-secondary);
+          border-right: 10px solid var(--color-secondary);
           border-top: 10px solid var(--color-secondary);
           border-bottom: 10px solid transparent;
           left: -16px;
@@ -120,6 +123,46 @@
         .text {
           margin: 0;
           opacity: 0.7;
+          word-wrap: break-word;
+        }
+      }
+      .pinIcon {
+        background-color: var(--color-secondary);
+        align-items: center;
+        justify-content: center;
+        margin-left: 5px;
+        padding: 7px;
+        border-radius: 50%;
+        transition: 0.3s all ease-in-out;
+        display: none;
+
+        .icon {
+          width: 20px;
+          height: 20px;
+          opacity: 0.5;
+        }
+
+        &:hover {
+          cursor: pointer;
+          // background-color: var(--color-primary);
+          .icon {
+            opacity: 1;
+          }
+        }
+
+        &.active {
+          display: flex !important;
+          background-color: var(--color-primary);
+          .icon {
+            transform: rotate(45deg);
+            opacity: 1;
+          }
+        }
+      }
+
+      &:hover {
+        .pinIcon {
+          display: flex;
         }
       }
     }

diff --git a/src/Pages/Home/index.jsx b/src/Pages/Home/index.jsx
@@ -48,7 +48,7 @@ function Home({ profile, dispatch }) {
         previewWidth: 720,
         previewHeight: 1280,
         // this message is not necessary, because it doesn't show up in the notification
-        message: "My message",
+        message: "Streamon",
       });
       console.log({ broadcast_id, upload_url });
       setBroadcastId(broadcast_id);

diff --git a/src/Pages/Login/forms/loginForm.jsx b/src/Pages/Login/forms/loginForm.jsx
@@ -47,7 +47,7 @@ export default function LoginForm({ handleLogin, credError }) {
         Login
       </Button>
       <div className={styles.statusTexts}>
-      <p className={styles.status}>Streamon v0.1.6</p>
+        <p className={styles.status}>Instagram Live Streamer v0.1.7-beta</p>
         <p className={styles.author}>
           <span
             className={styles.link}

diff --git a/src/images/pin.svg b/src/images/pin.svg