From 0aa1b88565a7430e4a988afec6f4baf3d80b1627 Mon Sep 17 00:00:00 2001 From: Tzikas Date: Tue, 29 Jun 2021 10:16:50 -0400 Subject: [PATCH] ; --- frontend/src/components/Chat.js | 44 +++-- frontend/src/components/EmojiPicker.js | 18 ++- .../components/VideoPreview/VideoPreview.js | 24 ++- frontend/src/index.css | 153 +++++++++++++++--- main.js | 4 +- package.json | 2 +- 6 files changed, 199 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/Chat.js b/frontend/src/components/Chat.js index 367c470..506c45d 100644 --- 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 (
  • history.push(`/user/${userId?._id}`)} avatar src={userId?.avatar} style={{ background: 'white' }} /> -
    +
    {userId?.name} {moment(createdAt).fromNow()}

    {message}

    -
    - {emojis.map(reaction => reaction.users.length > 0 && saveReaction(reaction.emoji)}>{reaction.emoji.native} {reaction.users.length})} +
    +
    {emojis.map(reaction => reaction.users.length > 0 && saveReaction(reaction.emoji)}>{reaction.emoji.native} {reaction.users.length})}
    {showReactions ? - : - } + : null} + +
    + + +
    {Object.keys(mostUsedEmojis).slice(0, 100).map(emoji => )}
    +
    + +
    +
    @@ -167,11 +187,7 @@ function Chat(props) {
    - {/*
    - -
      - {showChannels()} -
    */} +
    @@ -197,16 +213,16 @@ function Chat(props) { } -
    - {/*

    {channel.message}

    */} +
    {showActiveUsers()}
    - {channel?.userChannel ? : - + {channel?.userChannel ? + + : <>
      diff --git a/frontend/src/components/EmojiPicker.js b/frontend/src/components/EmojiPicker.js index a8b0024..9c1ac40 100644 --- 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 (
      +
      ); diff --git a/frontend/src/components/VideoPreview/VideoPreview.js b/frontend/src/components/VideoPreview/VideoPreview.js index 3fc1f8a..f29dbb0 100644 --- 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 (
      @@ -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); }} > diff --git a/frontend/src/index.css b/frontend/src/index.css index 79161d8..1dbe903 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -40,7 +40,7 @@ b.name{ } .ui.vertical.icon.menu.sidebar.menu{ - transition: all .25s; + /* transition: all .25s; */ } .container { @@ -267,9 +267,6 @@ li.post.resolveIt p { } - .scrollathon h5:hover { - text-decoration: underline; -} @@ -1246,7 +1243,7 @@ div#messages .message{ } div#messages .message{ - text-indent: 1rem; + /* margin: 1rem; */ } #new-message div#messages .first.message{ height: inherit; @@ -1270,7 +1267,7 @@ div#messages .first.message p{ color:white; font-family: 'Futura'; } -div#messages .message div{ +div#messages .message div.msg{ width: 100%; } div#messages .message .name{ @@ -1300,34 +1297,122 @@ div#messages .message .text{ .reactions { display:flex; + white-space: nowrap; + /* justify-content:space-between; */ +} + + +.reactions .emojis{ + display: flex; + justify-content: flex-end; + position: absolute; + /* top: -441px; */ + bottom: 50px; + margin-top: 0px; + z-index: 1; + zoom:.667 } + .reactions button.reaction-btn { /* transition: all .2s; */ - display:none; + /* display:none; position: absolute; - bottom: 0; - left:0; + top: 0; + right:8rem; + padding: 1rem 0; */ + +background: none; +outline: none; +border: none; +} + +.reactions button.reaction-btn i { + } .message:hover button.reaction-btn { - display:block; - font-size: 1rem; - outline:none; - padding: 1rem; - border: 1px solid #eee; + /* display: block; + font-size: 2rem; + outline: none; + /* color: #eee; */ + /* padding: 1rem; */ + + /* border: none; + transition: all .5s; + background: none; */ + + +} + + +.emoji-options{ + display: flex; +} + + +.message .pop-emojis{ + pointer-events:none; + display: flex; + opacity: 0; transition: all .5s; + overflow:hidden; + width: 0; } -.message:hover button.reaction-btn:hover { - background: #000; - background: #131313; +.emoji-options:hover .pop-emojis{ + opacity: 1; + + width: 200px; + pointer-events: auto; } + +.pop-emojis span{ +margin: .15rem; +} + +/* .pop-emojis:hover{ + opacity: 1; + width: 200px; +} */ + +.emojis-picked sub { + background: #333; + border-radius: 100%; + width: 1rem; + height: 1rem; + display: inline-block; + font-size: 8px; + display: inline-flex; + justify-content: center; + align-items: center; + transition: all .3s; +} + +.emojis-picked span{ + + margin: .15rem; + font-size: 1.2rem; +} +.emojis-picked span:hover sub{ + background: rgb(71, 71, 71); +} + + +.message { + transition: all .5s; +} +.message:hover { + + background:#202020 +} + + /* #chat form, #new-message form{ width: 100%; } */ @@ -1585,7 +1670,7 @@ i.icon{ #users h5, #rooms h5, #direct-messages h5{ /* padding: 1rem; */ color: whitesmoke; - padding: 1rem 0; + /* padding: 1rem 0; */ margin: 0; } @@ -1661,10 +1746,6 @@ i.icon{ } -.scrollathon{ - -} - .open { @@ -1710,6 +1791,8 @@ i.icon{ padding: .5rem; } + + .farm.emojis{ font-size:2.5rem; } @@ -1857,4 +1940,28 @@ ul.showPosts { #logo sub{ font-size: .75rem; height: 40px; -} \ No newline at end of file +} + + +/* .scrollathon .item h5 span{ + white-space: nowrap; + color: rgb(71, 71, 71); +} + +.scrollathon .item:hover .scrollathon .item h5 span{ + color:whitesmoke; +} */ + + +.scrollathon h5 span { + /* text-decoration: underline; + color:black !important; */ + color: rgb(109, 109, 109); +} + +.scrollathon h5:hover { + text-decoration: underline; + color: rgb(109, 109, 109) !important; + /* color: whitesmoke !important; */ + /* background: red !important; */ +} diff --git a/main.js b/main.js index 1b8ccd6..0198e50 100644 --- a/main.js +++ b/main.js @@ -232,7 +232,7 @@ function createJitsiMeetWindow() { height: windowState.height, icon: path.resolve(basePath, './resources/icon.png'), minWidth: 800, - minHeight: 600, + minHeight: 800, show: false, webPreferences: { enableBlinkFeatures: 'RTCInsertableStreams,WebAssemblySimd', @@ -243,7 +243,7 @@ function createJitsiMeetWindow() { webSecurity: true, preload: path.resolve(basePath, './build/preload.js') }, - frame: false + frame: true }; mainWindow = new BrowserWindow(options); diff --git a/package.json b/package.json index 272b485..63d02a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "CowBellClub", - "version": "1.5.2", + "version": "1.5.3", "description": "Electron application for Cowbell Club", "main": "./build/main.js", "productName": "CowbellClub",