;

xaviergmail · Jun 29, 2021 · 0aa1b88 · 0aa1b88
1 parent faa545f
commit 0aa1b88
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 46 deletions.
diff --git a/frontend/src/components/Chat.js b/frontend/src/components/Chat.js
@@ -5,11 +5,16 @@ import { Divider, Header, Icon, Image, List, Menu, Sidebar } from 'semantic-ui-r
 import EmojiPicker from './EmojiPicker'
 import moment from 'moment'
 import User from './User'
+import { Picker, emojiIndex, store, Emoji } from 'emoji-mart'
+
+
 
 
 function Chat(props) {
 
 
+
+
     const { activeRooms, gotoRoom, posts, setPosts, history, user } = useContext(TheContext)
     const [channels, setChannels] = useState([])
     const [channel, setChannel] = useState({})
@@ -54,6 +59,9 @@ function Chat(props) {
     }
 
 
+    let mostUsedEmojis = JSON.parse(localStorage['emoji-mart.frequently'])
+    // console.log('mostUsedEmojis,', mostUsedEmojis)
+
     const ShowMessage = ({ message, userId, createdAt, _id, reactions }) => {
         const [chosenEmoji, setChosenEmoji] = useState(null);
         const [emojis, setEmojis] = useState(reactions || [])
@@ -83,20 +91,32 @@ function Chat(props) {
                 console.log(res.data, 'back from db')
             })
 
+
+
+
+
         }
         return (
             <li key={createdAt} className="message">
                 <Image onClick={() => history.push(`/user/${userId?._id}`)} avatar src={userId?.avatar} style={{ background: 'white' }} />
-                <div>
+                <div className="msg">
                     <b className="name">{userId?.name} <i>{moment(createdAt).fromNow()}</i></b>
                     <p className="text">{message}</p>
-                    <div class="reactions">
-                        {emojis.map(reaction => reaction.users.length > 0 && <span onClick={() => saveReaction(reaction.emoji)}>{reaction.emoji.native} {reaction.users.length}</span>)}
+                    <div className="reactions">
+                        <div className="emojis-picked">{emojis.map(reaction => reaction.users.length > 0 && <span onClick={() => saveReaction(reaction.emoji)}>{reaction.emoji.native} <sub>{reaction.users.length}</sub></span>)}</div>
                         {showReactions ?
                             <EmojiPicker setShowReactions={setShowReactions} saveReaction={saveReaction} />
-                            :
-                            <button class="reaction-btn" onClick={() => setShowReactions(!showReactions)}>👍</button>}
+                            : null}
+
+                        <div className="emoji-options">
+                            <button className="reaction-btn" onClick={() => setShowReactions(!showReactions)}> <Icon name="plus circle" /></button>
+
+                            <div className="pop-emojis">{Object.keys(mostUsedEmojis).slice(0, 100).map(emoji => <Emoji onClick={saveReaction} emoji={emoji} size={16} />)}</div>
+                        </div>
+
+
                     </div>
+
                 </div>
 
 
@@ -167,11 +187,7 @@ function Chat(props) {
         <section id="chat">
 
             <main>
-                {/* <div id="channels">
-                    <label>Channels {channel.message}</label>
-                    <ul>
-                        {showChannels()}
-                    </ul></div> */}
+
 
                 <div id="messages">
                     <header className="message-title">
@@ -197,16 +213,16 @@ function Chat(props) {
                                 </button>
 
                                 }
-                        </div>
-                        {/* <h1>{channel.message}</h1> */}
+                            </div>
                             {showActiveUsers()}
 
                         </div>
 
                     </header>
 
-                    {channel?.userChannel ? <User userId={channel?.user} /> :
-
+                    {channel?.userChannel ?
+                        <User userId={channel?.user} />
+                        :
                         <>
                             <ul id="chat-messages">
 

diff --git a/frontend/src/components/EmojiPicker.js b/frontend/src/components/EmojiPicker.js
@@ -1,6 +1,21 @@
 import React, { useState } from 'react';
 import 'emoji-mart/css/emoji-mart.css'
-import { Picker } from 'emoji-mart'
+import { Picker, emojiIndex, store, Emoji } from 'emoji-mart'
+
+
+console.log('huh', store)
+
+console.log(store.get('last'))
+
+
+
+emojiIndex.search('happy').map((o) => {
+    console.log(o.native)
+})
+
+//"{"+1":11,"grinning":8,"kissing_heart":7,"heart_eyes":6,"laughing":5,"stuck_out_tongue_winking_eye":4,"sweat_smile":3,"joy":5,"scream":1,"upside_down_face":1,"star-struck":1,"blush":1}"
+
+
 // import Picker from 'emoji-picker-react';
 
 // const EmojiPicker = ({ saveReaction, setShowReactions }) => {
@@ -39,6 +54,7 @@ const EmojiPicker = ({ saveReaction, setShowReactions }) => {
     return (
         <div className="emojis">
             <Picker theme="dark" onSelect={onEmojiClick} />
+
         </div>
     );
 

diff --git a/frontend/src/components/VideoPreview/VideoPreview.js b/frontend/src/components/VideoPreview/VideoPreview.js
@@ -10,7 +10,7 @@ export default function VideoPreview({ setLittleVideo }) {
   const [transform, setTransform] = useState()
   const [hasVideo, setHasVideo] = useState(false)
 
-  const { room, gotoRoom } = useContext(TheContext)
+  const { room, gotoRoom, user } = useContext(TheContext)
 
   const ref = createRef()
 
@@ -22,8 +22,16 @@ export default function VideoPreview({ setLittleVideo }) {
       const listeners = {
         speakerChanged: (evt) => {
           console.log('evt', evt)
-          const largeVideo = api._getLargeVideo()
+          let largeVideo = api._getLargeVideo()
           console.log(largeVideo, 'largeVideo')
+          const avatarURL = api.getAvatarURL()
+          const displayName = api.getDisplayName()
+          const formattedDisplayName = api._getFormattedDisplayName(user._id)
+
+          //api.setLargeVideoParticipant(participantId);
+          // api.dominantSpeakerChanged()
+
+          console.log(largeVideo?.srcObject, 'largeVideo?.srcObject')
           setHasVideo(largeVideo)
           setStream(largeVideo?.srcObject)
           setTransform(largeVideo?.style?.transform)
@@ -32,8 +40,12 @@ export default function VideoPreview({ setLittleVideo }) {
           } else {
             setLittleVideo(false)
           }
-
         },
+
+        dominantSpeakerChanged: (evt) => {
+          console.log('dominant speaker chnaged', evt)
+
+        }
       }
 
       listeners.speakerChanged()
@@ -64,7 +76,7 @@ export default function VideoPreview({ setLittleVideo }) {
 
   }, [stream, transform])
 
-  console.log('stream', stream)
+  console.log('stream', stream, hasVideo)
 
   return (
     <div className="videobottomright">
@@ -73,7 +85,9 @@ export default function VideoPreview({ setLittleVideo }) {
         autoPlay=""
         id="video"
         ref={ref}
-        style={{ transform: 'none', display: hasVideo ? 'block' : 'none', cursor: 'pointer' }}
+        style={{ transform: 'none', cursor: 'pointer' }}
+
+        // style={{ transform: 'none', display: hasVideo ? 'block' : 'none', cursor: 'pointer' }}
         muted
         onClick={() => { setLittleVideo(false); gotoRoom(room); }}
       ></video>