From d2c525f4986c5aacdcb7e8575e182860cff82992 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Mon, 22 Jan 2024 11:28:16 +0530 Subject: [PATCH] more updates to lobby page includes showing chat notifications. also ui improvements --- .../components/dashboard/JKDashboardMain.js | 90 +++++++++++------ .../components/page/JKMusicSessionsLobby.js | 30 +++--- .../src/components/profile/JKMessageModal.js | 2 +- .../profile/JKProfileInstrumentsList.js | 10 +- jam-ui/src/components/sessions/JKLobbyChat.js | 58 +++++------ .../components/sessions/JKLobbyChatContext.js | 42 ++++++++ jam-ui/src/components/sessions/JKLobbyUser.js | 97 +++++++++++-------- .../components/sessions/JKLobbyUserList.js | 2 +- .../components/sessions/JKLobbyUserSwiper.js | 95 ++++++++++-------- jam-ui/src/context/BrowserQuery.js | 2 +- jam-ui/src/helpers/rest.js | 19 ++++ jam-ui/src/layouts/JKDashboardLayout.js | 6 +- .../store/features/lobbyChatMessagesSlice.js | 12 +++ .../store/features/onlineMusiciansSlice.js | 6 +- ...d_accept_desktop_notifications_to_users.rb | 8 ++ ruby/lib/jam_ruby/models/chat_message.rb | 2 +- ruby/lib/jam_ruby/models/text_message.rb | 2 + ruby/lib/jam_ruby/models/user.rb | 16 +++ .../javascripts/modern/JamServer_copy.js | 33 ++++--- web/app/controllers/api_users_controller.rb | 6 ++ web/app/views/api_users/lobby.rabl | 12 +++ web/config/routes.rb | 1 + .../lib/jam_websockets/router.rb | 30 +++++- 23 files changed, 401 insertions(+), 180 deletions(-) create mode 100644 jam-ui/src/components/sessions/JKLobbyChatContext.js create mode 100644 ruby/db/migrate/20240121174150_add_accept_desktop_notifications_to_users.rb create mode 100644 web/app/views/api_users/lobby.rabl diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js index dcd7b1c50..9f8bdef58 100644 --- a/jam-ui/src/components/dashboard/JKDashboardMain.js +++ b/jam-ui/src/components/dashboard/JKDashboardMain.js @@ -12,11 +12,13 @@ import AppContext from '../../context/Context'; import { getPageName } from '../../helpers/utils'; import useScript from '../../hooks/useScript'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { addMessage } from '../../store/features/textMessagesSlice'; import { add as addNotification } from '../../store/features/notificationSlice'; +import { useLobbyChat } from '../sessions/JKLobbyChatContext'; import { useAuth } from '../../context/UserAuth'; +import { truncate } from '../../helpers/utils'; import HomePage from '../page/JKHomePage'; @@ -34,13 +36,13 @@ import JKMusicSessionsLobby from '../page/JKMusicSessionsLobby'; //import loadable from '@loadable/component'; //const DashboardRoutes = loadable(() => import('../../layouts/JKDashboardRoutes')); -//const PublicRoutes = loadable(() => import('../../layouts/JKPublicRoutes')) +//const PublicRoutes = loadable(() => import('../../layouts/JKPublicRoutes')) const Msg = ({ closeToast, toastProps, title }) => (
- {title} + {title}
-) +); function JKDashboardMain() { const { isFluid, isVertical, navbarStyle } = useContext(AppContext); @@ -48,30 +50,45 @@ function JKDashboardMain() { const { isAuthenticated, currentUser, setCurrentUser, logout } = useAuth(); - const scriptLoaded = useRef(false) + const scriptLoaded = useRef(false); - const [showMessageModal, setShowMessageModal] = useState(false) - const [messageUser, setMessageUser] = useState(null) + const [showMessageModal, setShowMessageModal] = useState(false); + const [messageUser, setMessageUser] = useState(null); + + const { + setMessages: setChatMessages, + lobbyChatOffset, + setLobbyChatOffset, + fetchLobbyMessages, + lobbyChatLimit, + goToBottom + } = useLobbyChat(); useEffect(() => { //DashboardRoutes.preload(); //PublicRoutes.preload(); }, []); + const [visibilityState, setVisibilityState] = useState('visible'); + + useEffect(() => { + setVisibilityState(document.visibilityState); + }, [document.visibilityState]); + const dispatch = useDispatch(); const initJKScripts = () => { - if(scriptLoaded.current){ - return + if (scriptLoaded.current) { + return; } - + const app = window.JK.JamKazam(); - + const jamServer = new window.JK.JamServer(app, function(event_type) { console.log('EVENT_TYPE', event_type); }); jamServer.initialize(); - + window.JK.initJamClient(app); const clientInit = new window.JK.ClientInit(); clientInit.init(); @@ -91,7 +108,7 @@ function JKDashboardMain() { registerFriendRequestAccepted(); registerChatMessageCallback(); - scriptLoaded.current = true + scriptLoaded.current = true; }; const registerTextMessageCallback = () => { @@ -117,25 +134,43 @@ function JKDashboardMain() { closeOnClick: true, pauseOnHover: true, onClick: () => { - setMessageUser({ id: msg.senderId, name: msg.senderName }) - setShowMessageModal(true) + setMessageUser({ id: msg.senderId, name: msg.senderName }); + setShowMessageModal(true); } - }) + }); handleNotification(payload, header.type); }); }; const registerChatMessageCallback = () => { - window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function (header, payload) { - console.log("registerChatMessageCallback " + JSON.stringify(payload)); - // chatMessageReceived(payload); - // context.ChatActions.msgReceived(payload); - - // handledNotification(payload); + window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function(header, payload) { + console.log('registerChatMessageCallback ' + JSON.stringify(payload)); + if ( payload !== undefined && payload.sender_id !== window.currentUser.id) { + if (visibilityState === 'hidden' && Notification.permission === 'granted') { + try{ + const notification = new Notification("JamKazam Lobby Message", { + body: `${payload.sender_name}: ${truncate(payload.msg, 100)}`, + //icon: `${process.env.REACT_APP_CLIENT_BASE_URL}/assets/img/jamkazam-logo.png` + }); + notification.onclick = function(event) { + event.preventDefault(); // prevent the browser from focusing the Notification's tab + window.focus(); + event.target.close(); + }; + }catch(err){ + console.log('Error when showing notification', err); + } + } + setChatMessages([]); + fetchLobbyMessages({ + start: 0, + limit: lobbyChatOffset === 0 ? lobbyChatLimit : lobbyChatOffset * lobbyChatLimit + }); + //goToBottom(); + } }); - - } + }; const registerFriendRequest = () => { window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function(header, payload) { @@ -197,14 +232,11 @@ function JKDashboardMain() { {/*Redirect*/} - {!isKanban &&