From b47593c4906f9d7635fe27daf11ddda7c620574a Mon Sep 17 00:00:00 2001 From: haxzie Date: Thu, 25 Jun 2020 00:02:11 +0530 Subject: [PATCH 1/5] Remove unwanted logs --- src/Pages/Comments/index.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Pages/Comments/index.jsx b/src/Pages/Comments/index.jsx index 378f3d1..f987fac 100644 --- a/src/Pages/Comments/index.jsx +++ b/src/Pages/Comments/index.jsx @@ -9,7 +9,6 @@ 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 Button from "../../components/Button"; function Comments({ broadcastId, @@ -38,7 +37,6 @@ function Comments({ const stopComments = async () => { setInProgress(true); - console.log(`Stop refreshing comments...${window.refreshInterval || null}`); if (window.refreshInterval) { clearInterval(window.refreshInterval); window.refreshInterval = null; @@ -48,7 +46,6 @@ function Comments({ const fetchComments = async () => { try { - console.log(`Refreshing comments after ${lastCommentTs}`); const { comments } = await client.live.getComment({ broadcastId, lastCommentTs, @@ -57,7 +54,6 @@ function Comments({ setCommenting(false); comments.forEach((comment) => console.log({ comment })); const newLastCommentTs = comments[0].created_at; - console.log({ newLastCommentTs }); lastCommentTs = newLastCommentTs; dispatch(saveComments(comments)); } From 31ce11af6001df7296ece0452cfcd94e93f88beb Mon Sep 17 00:00:00 2001 From: haxzie Date: Thu, 25 Jun 2020 00:51:19 +0530 Subject: [PATCH 2/5] Add timer and automatic stream halt --- src/Pages/Home/index.jsx | 26 +++++++++++++++--- src/components/Timer/index.jsx | 36 +++++++++++++++++++++++++ src/components/Timer/styles.module.scss | 12 +++++++++ src/lib/timerHook.js | 31 +++++++++++++++++++++ 4 files changed, 102 insertions(+), 3 deletions(-) create mode 100644 src/components/Timer/index.jsx create mode 100644 src/components/Timer/styles.module.scss create mode 100644 src/lib/timerHook.js diff --git a/src/Pages/Home/index.jsx b/src/Pages/Home/index.jsx index ccd562d..ccc30d5 100644 --- a/src/Pages/Home/index.jsx +++ b/src/Pages/Home/index.jsx @@ -1,4 +1,4 @@ -import React, { useState, useRef } from "react"; +import React, { useState, useRef, useEffect } from "react"; import styles from "./styles.module.scss"; import { connect } from "react-redux"; import { LiveEntity, IgLoginRequiredError } from "instagram-private-api"; @@ -12,6 +12,8 @@ import { getClient, removeSession } from "../../lib/igClient"; import { clearComments } from "../../store/User/actions"; import CopyIcon from "../../images/copy.svg"; import copy from "copy-to-clipboard"; +import Timer from "../../components/Timer"; +import useTimer from "../../lib/timerHook"; function Home({ profile, dispatch }) { const client = getClient(); @@ -25,6 +27,15 @@ function Home({ profile, dispatch }) { 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 + useEffect(() => { + if (duration >= 3598) { + stopLiveStream(); + } + }, [duration]); const iUrlRef = useRef(); const iKeyRef = useRef(); @@ -67,6 +78,8 @@ function Home({ profile, dispatch }) { await client.live.start(broadcastId); await client.live.unmuteComment(broadcastId); dispatch(clearComments()); + clearTimer(); + startTimer(); setLive(true); setIsLoading(false); } catch (error) { @@ -92,11 +105,13 @@ function Home({ profile, dispatch }) { history.push("/"); } setIsLoading(false); - return; + // return; } if (window.refreshInterval) { clearInterval(window.refreshInterval); } + stopTimer(); + clearTimer(); setLive(false); setReady(false); setBroadcastId(null); @@ -177,7 +192,7 @@ function Home({ profile, dispatch }) {

@{username}

{getButtonAndLoaders()} - {isReady ? ( + {isReady && !isLive ? ( <>
@@ -204,6 +219,11 @@ function Home({ profile, dispatch }) { ) : ( <> )} + { + isReady && isLive ? ( + + ): <> + }
{isLive ? (
diff --git a/src/components/Timer/index.jsx b/src/components/Timer/index.jsx new file mode 100644 index 0000000..23d4e0f --- /dev/null +++ b/src/components/Timer/index.jsx @@ -0,0 +1,36 @@ +import React, { useState } from 'react' +import styles from "./styles.module.scss" + +export default function Timer({ seconds }) { + + /** + * 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`; + } + } + + /** + * 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 ( +
+ {getMinutes()}:{getSeconds()} +
+ ) +} diff --git a/src/components/Timer/styles.module.scss b/src/components/Timer/styles.module.scss new file mode 100644 index 0000000..dcabf21 --- /dev/null +++ b/src/components/Timer/styles.module.scss @@ -0,0 +1,12 @@ +.timer { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + span { + font-size: 1.5rem; + padding: 10px; + margin-top: 10px; + } +} \ No newline at end of file diff --git a/src/lib/timerHook.js b/src/lib/timerHook.js new file mode 100644 index 0000000..b5537a1 --- /dev/null +++ b/src/lib/timerHook.js @@ -0,0 +1,31 @@ +import React, { useState, useEffect } from "react"; + +function useTimer(initialValue) { + const [duration, setDuration] = useState(initialValue || 0); + + const startTimer = () => { + if (window.durationInterval) { + clearInterval(window.durationInterval); + setDuration(0); + } + + window.durationInterval = setInterval(() => { + setDuration(duration => duration + 1); + }, 1000); + }; + + const stopTimer = () => { + if (window.durationInterval) { + clearInterval(window.durationInterval); + } + }; + + const clearTimer = () => { + stopTimer(); + setDuration(0); + }; + + return [duration, startTimer, stopTimer, clearTimer]; +} + +export default useTimer; From d62d3c49b3200ba48acf59f16559fc5259c55bf1 Mon Sep 17 00:00:00 2001 From: haxzie Date: Fri, 18 Sep 2020 23:32:08 +0530 Subject: [PATCH 3/5] Change stream title --- src/Pages/Home/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/Home/index.jsx b/src/Pages/Home/index.jsx index ccc30d5..d8a4b61 100644 --- 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); From eb5702146f2b3a13006808638cda513cd213da66 Mon Sep 17 00:00:00 2001 From: haxzie Date: Sat, 19 Sep 2020 00:15:18 +0530 Subject: [PATCH 4/5] Add pin and unpin comments feature --- src/Pages/Comments/index.jsx | 62 +++++++++++++++++++++++---- src/Pages/Comments/styles.module.scss | 47 +++++++++++++++++++- src/images/pin.svg | 11 +++++ 3 files changed, 109 insertions(+), 11 deletions(-) create mode 100644 src/images/pin.svg diff --git a/src/Pages/Comments/index.jsx b/src/Pages/Comments/index.jsx index f987fac..ba1cc22 100644 --- 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,6 +123,7 @@ function Comments({ }, []); const renderComments = (comments) => { + console.log(comments); return comments.map((comment) => (
@@ -108,6 +131,18 @@ function Comments({

{comment.user.username}

{comment.text}

+
pinComment(comment)} + > + +
)); }; @@ -146,11 +181,20 @@ function Comments({ <>
{renderComments(comments)}
-
{ - e.preventDefault(); - addComment(); - }}> - setUserComment(e.target.value)} placeholder={isCommenting? "Loading...":"Press enter to send"}/> + { + e.preventDefault(); + addComment(); + }} + > + setUserComment(e.target.value)} + placeholder={isCommenting ? "Loading..." : "Press enter to send"} + /> diff --git a/src/Pages/Comments/styles.module.scss b/src/Pages/Comments/styles.module.scss index 7903773..a673f5f 100644 --- 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,8 +95,11 @@ 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: ""; @@ -104,7 +107,7 @@ 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/images/pin.svg b/src/images/pin.svg new file mode 100644 index 0000000..8fe597d --- /dev/null +++ b/src/images/pin.svg @@ -0,0 +1,11 @@ + + + + + + + + \ No newline at end of file From f640a420b70eb007cddb5b824662c975a1713e62 Mon Sep 17 00:00:00 2001 From: haxzie Date: Sat, 19 Sep 2020 00:18:32 +0530 Subject: [PATCH 5/5] Update version number --- package.json | 2 +- src/Pages/Login/forms/loginForm.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 45507f2..fbc8877 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "instagram-live-streamer", "description": "Create streaming links to instagram live", - "version": "0.1.4", + "version": "0.1.7-beta", "private": true, "copyright": "Copyright © 2020 Musthaq Ahamad", "licence": "MIT", diff --git a/src/Pages/Login/forms/loginForm.jsx b/src/Pages/Login/forms/loginForm.jsx index c3d933e..6e19d92 100644 --- 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
-

Instagram Live Streamer v0.1.3

+

Instagram Live Streamer v0.1.7-beta

Created by{" "}