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 &&