Skip to content

Commit 27e8352

Browse files
blueedgetechnoblueedgetechno
committed
whatsapp commit 6
1 parent 3afc8a8 commit 27e8352

File tree

10 files changed

+240
-98
lines changed

10 files changed

+240
-98
lines changed

‎public/img/asset/whatsapp/chats/disneyland.jpg‎

95 KB
Loading

‎src/components/utils.js‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect, useRef } from 'react';
2-
import { useSelector, useDispatch } from 'react-redux';
2+
import {useSelector} from 'react-redux';
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
44
import ReactPlayer from 'react-player';
55

@@ -111,7 +111,6 @@ export const Icon = (props) => {
111111
};
112112

113113
export const Image = (props) => {
114-
const dispatch = useDispatch();
115114
var src = `/img/${(props.dir?props.dir+"/":"")+props.src}`;
116115
if (props.src && !props.src.includes(".")) {
117116
src += ".png";
@@ -165,11 +164,10 @@ const formatseconds = (sec)=>{
165164
}
166165

167166
export const Video = (props) => {
168-
const dispatch = useDispatch();
169-
const vidplayer = useRef();
170-
const [play, setPlay] = useState(props.autoplay);
167+
const [play, setPlay] = useState(null);
171168
const [prog, setProg] = useState(0); // time elapsed
172169
const [perProg, setPerProg] = useState(0); // time elapsed in %
170+
const vidplayer = useRef();
173171

174172
var src = `/img/${(props.dir?props.dir+"/":"")+props.src}`;
175173
if (props.src && !props.src.includes(".")) src += ".mp4";
@@ -178,7 +176,7 @@ export const Video = (props) => {
178176
src = props.src;
179177
}
180178

181-
const className = `vidCont ${props.inactive?'prtclk':''} ${props.className||''}`.trim()
179+
const className = `vidCont ${(props.inactive || props.clickToggle)?'prtclk':''} ${props.className||''}`.trim()
182180
var dataset = {}
183181
Object.entries(props).forEach(([key, value]) => {
184182
if(key.includes("data-")){
@@ -188,6 +186,7 @@ export const Video = (props) => {
188186

189187
const handlePause = (e) => setPlay(false)
190188
const handlePlay = (e) => setPlay(true)
189+
const togglePlay = (e) => setPlay(!play)
191190

192191
const handleProg = (e)=>{
193192
setProg(floor(e.playedSeconds))
@@ -204,19 +203,17 @@ export const Video = (props) => {
204203
}
205204

206205
return (
207-
<div className={className} id={props.id}
208-
onClick={props.onClick || (props.action && dispatchAction)}
209-
data-action={props.action} data-payload={props.payload} {...dataset} tabIndex="1">
206+
<div className={className} id={props.id} onClick={ props.onClick ||
207+
(props.action && dispatchAction) || (props.clickToggle && togglePlay)
208+
} data-action={props.action} data-payload={props.payload} {...dataset} tabIndex="1">
210209
{!props.playIcon && play &&
211210
<Icon className="play-icon" mui="Pause" round w={48} onClick={handlePause}/>}
212211
{!props.playIcon && !play &&
213212
<Icon className="play-icon opacity-100" mui="PlayArrow" round w={48} onClick={handlePlay}/>}
214213
{props.playIcon}
215-
<ReactPlayer className="react-video"
216-
url={src} ref={vidplayer}
217-
width={props.w || "auto"}
218-
height={props.h || "auto"}
219-
controls={props.controls} playing={props.play || play}
214+
<ReactPlayer className="react-video" url={src}
215+
width={props.w || "auto"} height={props.h || "auto"} ref={vidplayer}
216+
playing={props.play || play} volume={props.muted ? 0 : 1} controls={props.controls}
220217
onPlay={props.onPlay || handlePlay} onPause={props.onPause || handlePause}
221218
onProgress={props.onProgress || handleProg} onEnded={props.onEnded || handlePause}/>
222219
{props.cstmctrl && (

‎src/containers/apps/whatsapp/elements/extra.scss‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
// media player
1+
// media player && status screen
22

3-
.media-viewer-container {
3+
.media-viewer-container, .status-container{
44
position: absolute;
55
inset: 0;
66
background: #010101;
@@ -16,6 +16,7 @@
1616
color: var(--light-txt);
1717
position: absolute;
1818
top: 0;
19+
padding: 0.5em;
1920
z-index: 1;
2021

2122
.chat-name {
@@ -48,6 +49,36 @@
4849
}
4950
}
5051
}
52+
53+
.status-container .whatsapp-top-nav{
54+
display: flex;
55+
flex-direction: column;
56+
}
57+
58+
.progress-bar-container{
59+
display: flex;
60+
height: 2px;
61+
border-radius: 1em;
62+
margin-bottom: 0.5em;
63+
64+
.progress-bar{
65+
flex-grow: 1;
66+
background: var(--med-txt);
67+
margin: 0 1.5px;
68+
69+
&[data-lit="true"]{
70+
background: var(--white);
71+
}
72+
73+
.progress-fill{
74+
width: 100%;
75+
height: 100%;
76+
background: var(--white);
77+
transition: width 200ms ease-in-out;
78+
}
79+
}
80+
}
81+
5182
// chat screen
5283

5384
.chat-profile {
@@ -266,3 +297,18 @@
266297
word-spacing: 2px;
267298
}
268299
}
300+
301+
// all status
302+
.status-date {
303+
font-size: 0.8em;
304+
font-weight: 500;
305+
color: var(--light-txt);
306+
}
307+
308+
.my-status {
309+
padding: 0.5em 0;
310+
311+
.chat-status {
312+
margin: 0;
313+
}
314+
}

‎src/containers/apps/whatsapp/elements/index.js‎

Lines changed: 82 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,63 @@ export const MediaViewer = () => {
7272
)
7373
}
7474

75-
export const StatusScreen = (props)=>{
75+
export const StatusScreen = ()=>{
76+
const [idx, setIdx] = useState(2)
77+
const stdata = useSelector(state => state.whatsapp.status || {})
78+
const contact = useSelector(state => {
79+
var tmp = {}
80+
if(stdata.id == -1) tmp = state.whatsapp.self
81+
else tmp = state.whatsapp.chats && state.whatsapp.chats[stdata.id]
82+
return tmp || {}
83+
})
84+
85+
return (
86+
<div className="status-container" value={!stdata.vis && "hide"}>
87+
<div className="whatsapp-top-nav">
88+
<div className="progress-bar-container">
89+
{contact.status && contact.status.map((st,i) => {
90+
return (
91+
<div className='progress-bar' data-lit={i<idx} key={i}>
92+
{i==idx && <div className="progress-fill" style={{
93+
width: "100%"
94+
}}></div>}
95+
</div>
96+
)
97+
})}
98+
</div>
99+
<div className="chat-profile-container flex items-center">
100+
<div className="chat-profile active-light-lit">
101+
<Icon mui="ArrowBack" w={20} action="home/goBack"/>
102+
<Image className="rounded-full overflow-hidden"
103+
src={contact.img} dir="asset/whatsapp/pfp" w={36}/>
104+
</div>
105+
<div className="chat-name flex-column font-thin mb-1">
106+
<span>{stdata.id == -1 ? "You" : contact.name}</span>
107+
<span>
108+
{new Date(contact.status && contact.status.at(-1).time).minifyTime()}
109+
</span>
110+
</div>
111+
</div>
112+
</div>
113+
{contact.status?(
114+
<div className="media-screen">
115+
{contact.status[idx].media=="Photo" && <Image src={contact.status[idx].src} dir="asset/whatsapp/"/>}
116+
{contact.status[idx].media=="Video" && (
117+
<Video
118+
src={contact.status[idx].src}
119+
dir="asset/whatsapp/" h="100%"
120+
playIcon autoplay clickToggle muted
121+
/>
122+
)}
123+
</div>
124+
):null}
125+
</div>
126+
)
127+
}
128+
129+
export const AllStatusScreen = (props)=>{
76130
const wdata = useSelector(state => state.whatsapp);
131+
const myself = useSelector(state => state.whatsapp.self);
77132
const contacts = useSelector(state => state.whatsapp.chats);
78133

79134
const CalculateArc = ({n,i,viewed})=>{
@@ -89,47 +144,50 @@ export const StatusScreen = (props)=>{
89144

90145
return (
91146
<div className="chats-status-container medScroll">
92-
<div className="my-status">
147+
<div className="my-status active-dark-lit">
93148
<div className="chat-status">
94149
<div className="status-preview-container">
95150
<div className="status-preview">
96151
<svg viewBox="0 0 104 104" xmlns="http://www.w3.org/2000/svg">
97-
{[...Array(3)].map((x,i)=>{
98-
return <CalculateArc n={3} i={i} viewed key={i}/>
152+
{myself && myself.status.map((status,i)=>{
153+
return <CalculateArc n={myself.status.length} i={i} viewed key={i}/>
99154
})}
100155
</svg>
101156
</div>
102-
<Image className="rounded-full rounded" src="blue.jpg" dir="asset/whatsapp/pfp" w={48}/>
157+
<Image className="rounded-full rounded" src={myself && myself.img}
158+
dir="asset/whatsapp/pfp" w={48}/>
103159
</div>
104160
<div className="status-info flex flex-col mx-4">
105161
<div className="chat-name">My status</div>
106-
<div className="status-date">Today, 10:08 AM</div>
162+
<div className="status-date">
163+
{myself && new Date(myself.status.at(-1).time).minifyTime()}
164+
</div>
107165
</div>
108166
</div>
109167
</div>
110-
<div className="gray-txt text-sm px-6 py-2">Recent updates</div>
111-
<div className="chats-status px-2 py-1">
112-
{contacts && contacts.map((chat,i) => {
113-
var s = chat.name,
114-
randv = s.split("").map(x => x.charCodeAt()).reduce((b,c) => 2*b + 3*c);
115-
var nos = 1 + randv%8,
116-
minago = (randv*13)%1440
117-
118-
return(
119-
<div className="chat-status" key={i}>
168+
<div className="gray-txt text-sm px-6">Recent updates</div>
169+
<div className="chats-status">
170+
{contacts && contacts.map((contact,i) => {
171+
if(!contact.status || !contact.status.length) return null
172+
return (
173+
<div className="chat-status active-dark-lit prtclk" onClick={dispatchAction}
174+
data-action="whatsapp/setStatus" data-payload={i} key={i}>
120175
<div className="status-preview-container">
121176
<div className="status-preview">
122177
<svg viewBox="0 0 104 104" xmlns="http://www.w3.org/2000/svg">
123-
{[...Array(nos)].map((x,i)=>{
124-
return <CalculateArc n={nos} i={i} key={i} viewed={i%2==0}/>
178+
{contact.status.map((status,i)=>{
179+
return <CalculateArc n={contact.status.length}
180+
i={i} key={i} viewed={status.seen}/>
125181
})}
126182
</svg>
127183
</div>
128-
<Image className="rounded-full rounded" src={chat.img} dir="asset/whatsapp/pfp" w={48}/>
184+
<Image className="rounded-full rounded" src={contact.img} dir="asset/whatsapp/pfp" w={48}/>
129185
</div>
130186
<div className="status-info flex flex-col mx-4">
131-
<div className="chat-name">{chat.name}</div>
132-
<div className="status-date">{new Date().minifyTime(minago)}</div>
187+
<div className="chat-name">{contact.name}</div>
188+
<div className="status-date">
189+
{new Date(contact.status.at(-1).time).minifyTime()}
190+
</div>
133191
</div>
134192
</div>
135193
)
@@ -145,7 +203,7 @@ export const CallLogs = ()=>{
145203

146204
return (
147205
<div className="call-logs-container medScroll">
148-
<div className="call-logs px-2 py-1">
206+
<div className="call-logs">
149207
{contacts && contacts.map((chat,i) => {
150208
var randv = chat.name.split("").map(x => x.charCodeAt()).reduce((b,c) => 2*b + 3*c);
151209
var callst = randv%3, callsticon = callst!=2?"CallReceived":"CallMade",
@@ -257,7 +315,8 @@ export const ChatScreen = (props)=>{
257315
<div className="chat-profile prtclk active-light-lit"
258316
onClick={dispatchAction} data-action="home/goBack">
259317
<Icon mui="ArrowBack" w={20}/>
260-
<Image className="rounded-full overflow-hidden" src={contact.img} dir="asset/whatsapp/pfp" w={36}/>
318+
<Image className="rounded-full overflow-hidden"
319+
src={contact.img} dir="asset/whatsapp/pfp" w={36}/>
261320
</div>
262321
<div className="chat-name text-lg font-thin mx-2">{contact.name}</div>
263322
</div>

‎src/containers/apps/whatsapp/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import './whatsapp.scss';
99

1010
import {
1111
NavBar,
12+
AllStatusScreen,
1213
StatusScreen,
1314
ChatScreen,
1415
CallLogs,
@@ -115,13 +116,14 @@ const AppContainer = ({app, show, pagetree}) => {
115116
}} onSwipe={swipehandler} ref={homeSwiper}>
116117
<CameraScreen/>
117118
<AllChatScreen/>
118-
<StatusScreen/>
119+
<AllStatusScreen/>
119120
<CallLogs/>
120121
</Swiper>
121122
</div>
122123
</div>
123124
<ChatScreen checkstate={checkstate}/>
124125
<MediaViewer/>
126+
<StatusScreen/>
125127
</div>
126128
</div>
127129
);

‎src/containers/apps/whatsapp/whatsapp.scss‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@
125125
}
126126
}
127127

128-
.latest-message-container{
128+
.latest-message-container {
129129
display: flex;
130130
position: absolute;
131131
width: 100%;
@@ -147,7 +147,6 @@
147147

148148
span {
149149
overflow: hidden;
150-
151150
display: -webkit-box;
152151
-webkit-line-clamp: 1;
153152
-webkit-box-orient: vertical;
@@ -181,15 +180,14 @@
181180
.chats-status,
182181
.my-status {
183182
height: max-content;
184-
padding: 0.25em 1em;
185183
color: var(--med-txt);
186184

187185
.call-log,
188186
.chat-status {
189187
display: flex;
190188
align-items: center;
191-
// margin: 1em 0;
192-
margin-bottom: 1em;
189+
padding: 0.5em 1em;
190+
// margin-bottom: 1em;
193191

194192
.status-preview-container {
195193
position: relative;
@@ -224,20 +222,6 @@
224222
}
225223
}
226224

227-
.status-date {
228-
font-size: 0.8em;
229-
font-weight: 500;
230-
color: var(--light-txt);
231-
}
232-
233-
.my-status {
234-
padding: 0.75em 1em;
235-
236-
.chat-status {
237-
margin: 0;
238-
}
239-
}
240-
241225
.call-logs {
242226
padding-top: 0.5em;
243227

0 commit comments

Comments
 (0)