{
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
- if (isMobile) {
- setTimeout(() => {
- editorRef.current?.chain().blur().run();
- setIsFocusedParent(false);
- }, 200);
- }
}
};
@@ -278,7 +271,7 @@ export const AnnouncementDiscussion = ({
style={{
display: 'flex',
flexDirection: 'column',
- height: isMobile ? '100%' : '100%',
+ height: '100%',
width: '100%',
}}
>
diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index 49d7f94..d9cebd7 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -20,7 +20,6 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import {
getBaseApiReact,
getBaseApiReactSocket,
- isMobile,
pauseAllQueues,
resumeAllQueues,
} from '../../App';
@@ -410,16 +409,6 @@ export const ChatDirect = ({
if (editorRef.current) {
setMessageSize(0);
editorRef.current.chain().focus().clearContent().run();
- if (isMobile) {
- setTimeout(() => {
- editorRef.current?.chain().blur().run();
- setIsFocusedParent(false);
- executeEvent('sent-new-message-group', {});
- setTimeout(() => {
- triggerRerender();
- }, 300);
- }, 200);
- }
}
};
useEffect(() => {
@@ -547,108 +536,41 @@ export const ChatDirect = ({
background: theme.palette.background.default,
display: 'flex',
flexDirection: 'column',
- height: isMobile ? '100%' : '100vh',
+ height: '100vh',
width: '100%',
}}
>
- {!isMobile && (
-
+
+
-
-
- Close Direct Chat
-
-
- )}
- {isMobile && (
-
-
-
- {
- close();
- }}
- >
-
-
-
-
- {isNewChat
- ? ''
- : selectedDirect?.name ||
- selectedDirect?.address?.slice(0, 10) + '...'}
-
-
- {
- setSelectedDirect(null);
- setMobileViewModeKeepOpen('');
- setNewChat(false);
- }}
- >
-
-
-
-
-
- )}
+ Close Direct Chat
+
+
+
{isNewChat && (
<>
@@ -685,7 +607,7 @@ export const ChatDirect = ({
flexShrink: 0,
minHeight: '150px',
overflow: 'hidden',
- padding: isMobile ? '10px' : '20px',
+ padding: '20px',
position: isFocusedParent ? 'fixed' : 'relative',
top: isFocusedParent ? '0px' : 'unset',
width: '100%',
@@ -753,7 +675,7 @@ export const ChatDirect = ({
setEditorRef={setEditorRef}
onEnter={sendMessage}
isChat
- disableEnter={isMobile ? true : false}
+ disableEnter={false}
setIsFocusedParent={setIsFocusedParent}
/>
{messageSize > 750 && (
diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx
index 97c0551..e79bffe 100644
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -20,7 +20,6 @@ import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
import {
getBaseApiReact,
getBaseApiReactSocket,
- isMobile,
MyContext,
pauseAllQueues,
resumeAllQueues,
@@ -746,16 +745,6 @@ export const ChatGroup = ({
if (editorRef.current) {
setMessageSize(0);
editorRef.current.chain().focus().clearContent().run();
- if (isMobile) {
- setTimeout(() => {
- editorRef.current?.chain().blur().run();
- setIsFocusedParent(false);
- executeEvent('sent-new-message-group', {});
- setTimeout(() => {
- triggerRerender();
- }, 300);
- }, 200);
- }
}
};
@@ -1109,7 +1098,7 @@ export const ChatGroup = ({
setEditorRef={setEditorRef}
onEnter={sendMessage}
isChat
- disableEnter={isMobile ? true : false}
+ disableEnter={false}
isFocusedParent={isFocusedParent}
setIsFocusedParent={setIsFocusedParent}
membersWithNames={members}
diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx
index 4221af7..7f22d76 100644
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@@ -26,7 +26,6 @@ import {
MyContext,
getArbitraryEndpointReact,
getBaseApiReact,
- isMobile,
pauseAllQueues,
resumeAllQueues,
} from '../../App';
@@ -262,15 +261,6 @@ export const GroupAnnouncements = ({
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
- if (isMobile) {
- setTimeout(() => {
- editorRef.current?.chain().blur().run();
- setIsFocusedParent(false);
- setTimeout(() => {
- triggerRerender();
- }, 300);
- }, 200);
- }
}
};
@@ -529,12 +519,9 @@ export const GroupAnnouncements = ({
return (
- {!isMobile && (
-
+
-
- Group Announcements
-
- )}
+ />
+ Group Announcements
+
diff --git a/src/components/Chat/GroupForum.tsx b/src/components/Chat/GroupForum.tsx
index b97b11c..78dd02a 100644
--- a/src/components/Chat/GroupForum.tsx
+++ b/src/components/Chat/GroupForum.tsx
@@ -1,6 +1,6 @@
import { useContext, useEffect, useState } from 'react';
import { GroupMail } from '../Group/Forum/GroupMail';
-import { MyContext, isMobile } from '../../App';
+import { MyContext } from '../../App';
export const GroupForum = ({
selectedGroup,
diff --git a/src/components/Chat/TipTap.tsx b/src/components/Chat/TipTap.tsx
index fac7429..00425cd 100644
--- a/src/components/Chat/TipTap.tsx
+++ b/src/components/Chat/TipTap.tsx
@@ -23,7 +23,6 @@ import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
import Compressor from 'compressorjs';
import Mention from '@tiptap/extension-mention';
import ImageResize from 'tiptap-extension-resize-image'; // Import the ResizeImage extension
-import { isMobile } from '../../App';
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import { ReactRenderer } from '@tiptap/react';
@@ -137,7 +136,7 @@ const MenuBar = ({
color: editor.isActive('bold')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -149,7 +148,7 @@ const MenuBar = ({
color: editor.isActive('italic')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -161,7 +160,7 @@ const MenuBar = ({
color: editor.isActive('strike')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -173,7 +172,7 @@ const MenuBar = ({
color: editor.isActive('code')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -188,7 +187,7 @@ const MenuBar = ({
editor.isActive('code')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -199,7 +198,7 @@ const MenuBar = ({
color: editor.isActive('bulletList')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -210,7 +209,7 @@ const MenuBar = ({
color: editor.isActive('orderedList')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -221,7 +220,7 @@ const MenuBar = ({
color: editor.isActive('codeBlock')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -232,7 +231,7 @@ const MenuBar = ({
color: editor.isActive('blockquote')
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -240,7 +239,7 @@ const MenuBar = ({
editor.chain().focus().setHorizontalRule().run()}
disabled={!editor.can().chain().focus().setHorizontalRule().run()}
- sx={{ color: 'gray', padding: isMobile ? '5px' : 'revert' }}
+ sx={{ color: 'gray', padding: 'revert' }}
>
@@ -252,7 +251,7 @@ const MenuBar = ({
color: editor.isActive('heading', { level: 1 })
? theme.palette.text.primary
: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -260,7 +259,7 @@ const MenuBar = ({
editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()}
- sx={{ color: 'gray', padding: isMobile ? '5px' : 'revert' }}
+ sx={{ color: 'gray', padding: 'revert' }}
>
@@ -313,7 +312,7 @@ const MenuBar = ({
onClick={triggerImageUpload}
sx={{
color: theme.palette.text.secondary,
- padding: isMobile ? '5px' : 'revert',
+ padding: 'revert',
}}
>
@@ -398,11 +397,6 @@ export default ({
usersRef.current = users; // Keep users up-to-date
}, [users]);
- const handleFocus = () => {
- if (!isMobile) return;
- setIsFocusedParent(true);
- };
-
const handleBlur = () => {
const htmlContent = editorRef.current.getHTML();
if (!htmlContent?.trim() || htmlContent?.trim() === '
') {
@@ -499,7 +493,7 @@ export default ({
>
{
- editor.on('focus', handleFocus); // Listen for focus event
editor.on('blur', handleBlur); // Listen for blur event
}}
onUpdate={({ editor }) => {
- editor.on('focus', handleFocus); // Ensure focus is updated
editor.on('blur', handleBlur); // Ensure blur is updated
}}
editorProps={{
attributes: {
class: 'tiptap-prosemirror',
- style: isMobile
- ? `overflow: auto; min-height: ${
- customEditorHeight ? '200px' : '0px'
- }; max-height:calc(100svh - ${customEditorHeight || '140px'})`
- : `overflow: auto; max-height: 250px`,
+ style: `overflow: auto; max-height: 250px`,
},
handleKeyDown(view, event) {
if (
diff --git a/src/components/ContextMenuPinnedApps.tsx b/src/components/ContextMenuPinnedApps.tsx
index bb64a4c..7dad268 100644
--- a/src/components/ContextMenuPinnedApps.tsx
+++ b/src/components/ContextMenuPinnedApps.tsx
@@ -1,152 +1,182 @@
import React, { useState, useRef } from 'react';
-import { ListItemIcon, Menu, MenuItem, Typography, styled } from '@mui/material';
+import {
+ ListItemIcon,
+ Menu,
+ MenuItem,
+ Typography,
+ styled,
+} from '@mui/material';
import PushPinIcon from '@mui/icons-material/PushPin';
-import { saveToLocalStorage } from './Apps/AppsNavBar';
+import { saveToLocalStorage } from './Apps/AppsNavBarDesktop';
import { useRecoilState } from 'recoil';
import { sortablePinnedAppsAtom } from '../atoms/global';
const CustomStyledMenu = styled(Menu)(({ theme }) => ({
- '& .MuiPaper-root': {
- backgroundColor: '#f9f9f9',
- borderRadius: '12px',
- padding: theme.spacing(1),
- boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
- },
- '& .MuiMenuItem-root': {
- fontSize: '14px',
- color: '#444',
- transition: '0.3s background-color',
- '&:hover': {
- backgroundColor: '#f0f0f0',
- },
+ '& .MuiPaper-root': {
+ backgroundColor: '#f9f9f9',
+ borderRadius: '12px',
+ padding: theme.spacing(1),
+ boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
+ },
+ '& .MuiMenuItem-root': {
+ fontSize: '14px',
+ color: '#444',
+ transition: '0.3s background-color',
+ '&:hover': {
+ backgroundColor: '#f0f0f0',
},
+ },
}));
export const ContextMenuPinnedApps = ({ children, app, isMine }) => {
- const [menuPosition, setMenuPosition] = useState(null);
- const longPressTimeout = useRef(null);
- const maxHoldTimeout = useRef(null);
- const preventClick = useRef(false);
- const startTouchPosition = useRef({ x: 0, y: 0 }); // Track initial touch position
- const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(sortablePinnedAppsAtom);
+ const [menuPosition, setMenuPosition] = useState(null);
+ const longPressTimeout = useRef(null);
+ const maxHoldTimeout = useRef(null);
+ const preventClick = useRef(false);
+ const startTouchPosition = useRef({ x: 0, y: 0 }); // Track initial touch position
+ const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(
+ sortablePinnedAppsAtom
+ );
- const handleContextMenu = (event) => {
- if(isMine) return
- event.preventDefault();
- event.stopPropagation();
- preventClick.current = true;
- setMenuPosition({
- mouseX: event.clientX,
- mouseY: event.clientY,
- });
- };
+ const handleContextMenu = (event) => {
+ if (isMine) return;
+ event.preventDefault();
+ event.stopPropagation();
+ preventClick.current = true;
+ setMenuPosition({
+ mouseX: event.clientX,
+ mouseY: event.clientY,
+ });
+ };
- const handleTouchStart = (event) => {
- if(isMine) return
+ const handleTouchStart = (event) => {
+ if (isMine) return;
- const { clientX, clientY } = event.touches[0];
- startTouchPosition.current = { x: clientX, y: clientY };
+ const { clientX, clientY } = event.touches[0];
+ startTouchPosition.current = { x: clientX, y: clientY };
- longPressTimeout.current = setTimeout(() => {
- preventClick.current = true;
-
- event.stopPropagation();
- setMenuPosition({
- mouseX: clientX,
- mouseY: clientY,
+ longPressTimeout.current = setTimeout(() => {
+ preventClick.current = true;
+
+ event.stopPropagation();
+ setMenuPosition({
+ mouseX: clientX,
+ mouseY: clientY,
+ });
+ }, 500);
+
+ // Set a maximum hold duration (e.g., 1.5 seconds)
+ maxHoldTimeout.current = setTimeout(() => {
+ clearTimeout(longPressTimeout.current);
+ }, 1500);
+ };
+
+ const handleTouchMove = (event) => {
+ if (isMine) return;
+
+ const { clientX, clientY } = event.touches[0];
+ const { x, y } = startTouchPosition.current;
+
+ // Determine if the touch has moved beyond a small threshold (e.g., 10px)
+ const movedEnough =
+ Math.abs(clientX - x) > 10 || Math.abs(clientY - y) > 10;
+
+ if (movedEnough) {
+ clearTimeout(longPressTimeout.current);
+ clearTimeout(maxHoldTimeout.current);
+ }
+ };
+
+ const handleTouchEnd = (event) => {
+ if (isMine) return;
+
+ clearTimeout(longPressTimeout.current);
+ clearTimeout(maxHoldTimeout.current);
+ if (preventClick.current) {
+ event.preventDefault();
+ event.stopPropagation();
+ preventClick.current = false;
+ }
+ };
+
+ const handleClose = (e) => {
+ if (isMine) return;
+
+ e.preventDefault();
+ e.stopPropagation();
+ setMenuPosition(null);
+ };
+
+ return (
+
+ {children}
+
{
+ e.stopPropagation();
+ }}
+ >
+
+
+
-
+
{children}
diff --git a/src/components/Embeds/VideoPlayer.tsx b/src/components/Embeds/VideoPlayer.tsx
index c28bc99..59bfc76 100644
--- a/src/components/Embeds/VideoPlayer.tsx
+++ b/src/components/Embeds/VideoPlayer.tsx
@@ -1,23 +1,25 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
-import { Box, IconButton, Slider } from '@mui/material'
-import { CircularProgress, Typography } from '@mui/material'
-import { Key } from 'ts-key-enum'
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Box, IconButton, Slider } from '@mui/material';
+import { CircularProgress, Typography } from '@mui/material';
+import { Key } from 'ts-key-enum';
import {
PlayArrow,
Pause,
VolumeUp,
Fullscreen,
- PictureInPicture, VolumeOff, Calculate
-} from '@mui/icons-material'
-import { styled } from '@mui/system'
-import { Refresh } from '@mui/icons-material'
+ PictureInPicture,
+ VolumeOff,
+ Calculate,
+} from '@mui/icons-material';
+import { styled } from '@mui/system';
+import { Refresh } from '@mui/icons-material';
-import { Menu, MenuItem } from '@mui/material'
-import { MoreVert as MoreIcon } from '@mui/icons-material'
-import { GlobalContext, getBaseApiReact } from '../../App'
-import { resourceKeySelector } from '../../atoms/global'
-import { useRecoilValue } from 'recoil'
+import { Menu, MenuItem } from '@mui/material';
+import { MoreVert as MoreIcon } from '@mui/icons-material';
+import { GlobalContext, getBaseApiReact } from '../../App';
+import { resourceKeySelector } from '../../atoms/global';
+import { useRecoilValue } from 'recoil';
const VideoContainer = styled(Box)`
position: relative;
display: flex;
@@ -28,14 +30,14 @@ const VideoContainer = styled(Box)`
height: 100%;
margin: 0px;
padding: 0px;
-`
+`;
const VideoElement = styled('video')`
width: 100%;
height: auto;
max-height: calc(100vh - 150px);
background: rgb(33, 33, 33);
-`
+`;
const ControlsContainer = styled(Box)`
position: absolute;
@@ -47,18 +49,18 @@ const ControlsContainer = styled(Box)`
right: 0;
padding: 8px;
background-color: rgba(0, 0, 0, 0.6);
-`
+`;
interface VideoPlayerProps {
- src?: string
- poster?: string
- name?: string
- identifier?: string
- service?: string
- autoplay?: boolean
- from?: string | null
- customStyle?: any
- user?: string
+ src?: string;
+ poster?: string;
+ name?: string;
+ identifier?: string;
+ service?: string;
+ autoplay?: boolean;
+ from?: string | null;
+ customStyle?: any;
+ user?: string;
}
export const VideoPlayer: React.FC
= ({
@@ -69,33 +71,30 @@ export const VideoPlayer: React.FC = ({
autoplay = true,
from = null,
customStyle = {},
- node
+ node,
}) => {
-
- const keyIdentifier = useMemo(()=> {
-
- if(name && identifier && service){
- return `${service}-${name}-${identifier}`
+ const keyIdentifier = useMemo(() => {
+ if (name && identifier && service) {
+ return `${service}-${name}-${identifier}`;
} else {
- return undefined
+ return undefined;
}
- }, [service, name, identifier])
+ }, [service, name, identifier]);
const download = useRecoilValue(resourceKeySelector(keyIdentifier));
const { downloadResource } = useContext(GlobalContext);
- const videoRef = useRef(null)
- const [playing, setPlaying] = useState(false)
- const [volume, setVolume] = useState(1)
- const [mutedVolume, setMutedVolume] = useState(1)
- const [isMuted, setIsMuted] = useState(false)
- const [progress, setProgress] = useState(0)
- const [isLoading, setIsLoading] = useState(false)
- const [canPlay, setCanPlay] = useState(false)
- const [startPlay, setStartPlay] = useState(false)
- const [isMobileView, setIsMobileView] = useState(false)
- const [playbackRate, setPlaybackRate] = useState(1)
- const [anchorEl, setAnchorEl] = useState(null)
- const reDownload = useRef(false)
+ const videoRef = useRef(null);
+ const [playing, setPlaying] = useState(false);
+ const [volume, setVolume] = useState(1);
+ const [mutedVolume, setMutedVolume] = useState(1);
+ const [isMuted, setIsMuted] = useState(false);
+ const [progress, setProgress] = useState(0);
+ const [isLoading, setIsLoading] = useState(false);
+ const [canPlay, setCanPlay] = useState(false);
+ const [startPlay, setStartPlay] = useState(false);
+ const [playbackRate, setPlaybackRate] = useState(1);
+ const [anchorEl, setAnchorEl] = useState(null);
+ const reDownload = useRef(false);
const resetVideoState = () => {
// Reset all states to their initial values
@@ -107,10 +106,9 @@ export const VideoPlayer: React.FC = ({
setIsLoading(false);
setCanPlay(false);
setStartPlay(false);
- setIsMobileView(false);
setPlaybackRate(1);
setAnchorEl(null);
-
+
// Reset refs to their initial values
if (videoRef.current) {
videoRef.current.pause(); // Ensure the video is paused
@@ -120,18 +118,19 @@ export const VideoPlayer: React.FC = ({
};
const src = useMemo(() => {
- if(name && identifier && service){
- return `${node || getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}`
- }
- return ''
- }, [service, name, identifier])
+ if (name && identifier && service) {
+ return `${node || getBaseApiReact()}/arbitrary/${service}/${name}/${identifier}`;
+ }
+ return '';
+ }, [service, name, identifier]);
+
+ useEffect(() => {
+ resetVideoState();
+ }, [keyIdentifier]);
- useEffect(()=> {
- resetVideoState()
- }, [keyIdentifier])
const resourceStatus = useMemo(() => {
- return download?.status || {}
- }, [download])
+ return download?.status || {};
+ }, [download]);
const minSpeed = 0.25;
const maxSpeed = 4.0;
@@ -139,306 +138,339 @@ export const VideoPlayer: React.FC = ({
const updatePlaybackRate = (newSpeed: number) => {
if (videoRef.current) {
- if (newSpeed > maxSpeed || newSpeed < minSpeed)
- newSpeed = minSpeed
- videoRef.current.playbackRate = newSpeed
- setPlaybackRate(newSpeed)
+ if (newSpeed > maxSpeed || newSpeed < minSpeed) newSpeed = minSpeed;
+ videoRef.current.playbackRate = newSpeed;
+ setPlaybackRate(newSpeed);
}
- }
+ };
const increaseSpeed = (wrapOverflow = true) => {
- const changedSpeed = playbackRate + speedChange
- let newSpeed = wrapOverflow ? changedSpeed : Math.min(changedSpeed, maxSpeed)
-
+ const changedSpeed = playbackRate + speedChange;
+ let newSpeed = wrapOverflow
+ ? changedSpeed
+ : Math.min(changedSpeed, maxSpeed);
if (videoRef.current) {
updatePlaybackRate(newSpeed);
}
- }
+ };
const decreaseSpeed = () => {
if (videoRef.current) {
updatePlaybackRate(playbackRate - speedChange);
}
- }
-
+ };
const togglePlay = async () => {
- if (!videoRef.current) return
- setStartPlay(true)
+ if (!videoRef.current) return;
+ setStartPlay(true);
if (!src || resourceStatus?.status !== 'READY') {
ReactDOM.flushSync(() => {
- setIsLoading(true)
- })
- getSrc()
+ setIsLoading(true);
+ });
+ getSrc();
}
if (playing) {
- videoRef.current.pause()
+ videoRef.current.pause();
} else {
- videoRef.current.play()
+ videoRef.current.play();
}
- setPlaying(!playing)
- }
-
+ setPlaying(!playing);
+ };
const onVolumeChange = (_: any, value: number | number[]) => {
- if (!videoRef.current) return
- videoRef.current.volume = value as number
- setVolume(value as number)
- setIsMuted(false)
- }
+ if (!videoRef.current) return;
+ videoRef.current.volume = value as number;
+ setVolume(value as number);
+ setIsMuted(false);
+ };
const onProgressChange = (_: any, value: number | number[]) => {
- if (!videoRef.current) return
- videoRef.current.currentTime = value as number
- setProgress(value as number)
+ if (!videoRef.current) return;
+ videoRef.current.currentTime = value as number;
+ setProgress(value as number);
if (!playing) {
- videoRef.current.play()
- setPlaying(true)
+ videoRef.current.play();
+ setPlaying(true);
}
- }
+ };
const handleEnded = () => {
- setPlaying(false)
- }
+ setPlaying(false);
+ };
const updateProgress = () => {
- if (!videoRef.current) return
- setProgress(videoRef.current.currentTime)
- }
+ if (!videoRef.current) return;
+ setProgress(videoRef.current.currentTime);
+ };
- const [isFullscreen, setIsFullscreen] = useState(false)
+ const [isFullscreen, setIsFullscreen] = useState(false);
const enterFullscreen = () => {
- if (!videoRef.current) return
+ if (!videoRef.current) return;
if (videoRef.current.requestFullscreen) {
- videoRef.current.requestFullscreen()
+ videoRef.current.requestFullscreen();
}
- }
+ };
const exitFullscreen = () => {
if (document.exitFullscreen) {
- document.exitFullscreen()
+ document.exitFullscreen();
}
- }
+ };
const toggleFullscreen = () => {
- isFullscreen ? exitFullscreen() : enterFullscreen()
- }
-
+ isFullscreen ? exitFullscreen() : enterFullscreen();
+ };
useEffect(() => {
const handleFullscreenChange = () => {
- setIsFullscreen(!!document.fullscreenElement)
- }
+ setIsFullscreen(!!document.fullscreenElement);
+ };
- document.addEventListener('fullscreenchange', handleFullscreenChange)
+ document.addEventListener('fullscreenchange', handleFullscreenChange);
return () => {
- document.removeEventListener('fullscreenchange', handleFullscreenChange)
- }
- }, [])
-
-
+ document.removeEventListener('fullscreenchange', handleFullscreenChange);
+ };
+ }, []);
const handleCanPlay = () => {
- setIsLoading(false)
- setCanPlay(true)
- }
+ setIsLoading(false);
+ setCanPlay(true);
+ };
const getSrc = React.useCallback(async () => {
- if (!name || !identifier || !service) return
+ if (!name || !identifier || !service) return;
try {
downloadResource({
name,
service,
- identifier
- })
- } catch (error) {
- console.error(error)
+ identifier,
+ });
+ } catch (error) {
+ console.error(error);
}
- }, [identifier, name, service])
-
-
-
+ }, [identifier, name, service]);
function formatTime(seconds: number): string {
- seconds = Math.floor(seconds)
- let minutes: number | string = Math.floor(seconds / 60)
- let hours: number | string = Math.floor(minutes / 60)
+ seconds = Math.floor(seconds);
+ let minutes: number | string = Math.floor(seconds / 60);
+ let hours: number | string = Math.floor(minutes / 60);
- let remainingSeconds: number | string = seconds % 60
- let remainingMinutes: number | string = minutes % 60
+ let remainingSeconds: number | string = seconds % 60;
+ let remainingMinutes: number | string = minutes % 60;
if (remainingSeconds < 10) {
- remainingSeconds = '0' + remainingSeconds
+ remainingSeconds = '0' + remainingSeconds;
}
if (remainingMinutes < 10) {
- remainingMinutes = '0' + remainingMinutes
+ remainingMinutes = '0' + remainingMinutes;
}
if (hours === 0) {
- hours = ''
- }
- else {
- hours = hours + ':'
+ hours = '';
+ } else {
+ hours = hours + ':';
}
- return hours + remainingMinutes + ':' + remainingSeconds
+ return hours + remainingMinutes + ':' + remainingSeconds;
}
const reloadVideo = () => {
- if (!videoRef.current) return
- const currentTime = videoRef.current.currentTime
- videoRef.current.src = src
- videoRef.current.load()
- videoRef.current.currentTime = currentTime
+ if (!videoRef.current) return;
+ const currentTime = videoRef.current.currentTime;
+ videoRef.current.src = src;
+ videoRef.current.load();
+ videoRef.current.currentTime = currentTime;
if (playing) {
- videoRef.current.play()
+ videoRef.current.play();
}
- }
+ };
useEffect(() => {
if (
resourceStatus?.status === 'DOWNLOADED' &&
reDownload?.current === false
) {
- getSrc()
- reDownload.current = true
+ getSrc();
+ reDownload.current = true;
}
- }, [getSrc, resourceStatus])
+ }, [getSrc, resourceStatus]);
const handleMenuOpen = (event: any) => {
- setAnchorEl(event.currentTarget)
- }
+ setAnchorEl(event.currentTarget);
+ };
const handleMenuClose = () => {
- setAnchorEl(null)
- }
+ setAnchorEl(null);
+ };
useEffect(() => {
- const videoWidth = videoRef?.current?.offsetWidth
- if (videoWidth && videoWidth <= 600) {
- setIsMobileView(true)
- }
- }, [canPlay])
+ const videoWidth = videoRef?.current?.offsetWidth;
+ }, [canPlay]);
const getDownloadProgress = (current: number, total: number) => {
- const progress = current / total * 100;
- return Number.isNaN(progress) ? '' : progress.toFixed(0) + '%'
- }
+ const progress = (current / total) * 100;
+ return Number.isNaN(progress) ? '' : progress.toFixed(0) + '%';
+ };
const mute = () => {
- setIsMuted(true)
- setMutedVolume(volume)
- setVolume(0)
- if (videoRef.current) videoRef.current.volume = 0
- }
+ setIsMuted(true);
+ setMutedVolume(volume);
+ setVolume(0);
+ if (videoRef.current) videoRef.current.volume = 0;
+ };
const unMute = () => {
- setIsMuted(false)
- setVolume(mutedVolume)
- if (videoRef.current) videoRef.current.volume = mutedVolume
- }
+ setIsMuted(false);
+ setVolume(mutedVolume);
+ if (videoRef.current) videoRef.current.volume = mutedVolume;
+ };
const toggleMute = () => {
isMuted ? unMute() : mute();
- }
+ };
const changeVolume = (volumeChange: number) => {
if (videoRef.current) {
const minVolume = 0;
const maxVolume = 1;
+ let newVolume = volumeChange + volume;
- let newVolume = volumeChange + volume
+ newVolume = Math.max(newVolume, minVolume);
+ newVolume = Math.min(newVolume, maxVolume);
- newVolume = Math.max(newVolume, minVolume)
- newVolume = Math.min(newVolume, maxVolume)
-
- setIsMuted(false)
- setMutedVolume(newVolume)
- videoRef.current.volume = newVolume
+ setIsMuted(false);
+ setMutedVolume(newVolume);
+ videoRef.current.volume = newVolume;
setVolume(newVolume);
}
-
- }
+ };
const setProgressRelative = (secondsChange: number) => {
if (videoRef.current) {
- const currentTime = videoRef.current?.currentTime
- const minTime = 0
- const maxTime = videoRef.current?.duration || 100
+ const currentTime = videoRef.current?.currentTime;
+ const minTime = 0;
+ const maxTime = videoRef.current?.duration || 100;
let newTime = currentTime + secondsChange;
- newTime = Math.max(newTime, minTime)
- newTime = Math.min(newTime, maxTime)
+ newTime = Math.max(newTime, minTime);
+ newTime = Math.min(newTime, maxTime);
videoRef.current.currentTime = newTime;
setProgress(newTime);
}
- }
+ };
const setProgressAbsolute = (videoPercent: number) => {
if (videoRef.current) {
- videoPercent = Math.min(videoPercent, 100)
- videoPercent = Math.max(videoPercent, 0)
- const finalTime = videoRef.current?.duration * videoPercent / 100
- videoRef.current.currentTime = finalTime
+ videoPercent = Math.min(videoPercent, 100);
+ videoPercent = Math.max(videoPercent, 0);
+ const finalTime = (videoRef.current?.duration * videoPercent) / 100;
+ videoRef.current.currentTime = finalTime;
setProgress(finalTime);
}
- }
-
+ };
const keyboardShortcutsDown = (e: React.KeyboardEvent) => {
- e.preventDefault()
+ e.preventDefault();
switch (e.key) {
- case Key.Add: increaseSpeed(false); break;
- case '+': increaseSpeed(false); break;
- case '>': increaseSpeed(false); break;
+ case Key.Add:
+ increaseSpeed(false);
+ break;
+ case '+':
+ increaseSpeed(false);
+ break;
+ case '>':
+ increaseSpeed(false);
+ break;
- case Key.Subtract: decreaseSpeed(); break;
- case '-': decreaseSpeed(); break;
- case '<': decreaseSpeed(); break;
+ case Key.Subtract:
+ decreaseSpeed();
+ break;
+ case '-':
+ decreaseSpeed();
+ break;
+ case '<':
+ decreaseSpeed();
+ break;
- case Key.ArrowLeft: {
- if (e.shiftKey) setProgressRelative(-300);
- else if (e.ctrlKey) setProgressRelative(-60);
- else if (e.altKey) setProgressRelative(-10);
- else setProgressRelative(-5);
- } break;
+ case Key.ArrowLeft:
+ {
+ if (e.shiftKey) setProgressRelative(-300);
+ else if (e.ctrlKey) setProgressRelative(-60);
+ else if (e.altKey) setProgressRelative(-10);
+ else setProgressRelative(-5);
+ }
+ break;
- case Key.ArrowRight: {
- if (e.shiftKey) setProgressRelative(300);
- else if (e.ctrlKey) setProgressRelative(60);
- else if (e.altKey) setProgressRelative(10);
- else setProgressRelative(5);
- } break;
+ case Key.ArrowRight:
+ {
+ if (e.shiftKey) setProgressRelative(300);
+ else if (e.ctrlKey) setProgressRelative(60);
+ else if (e.altKey) setProgressRelative(10);
+ else setProgressRelative(5);
+ }
+ break;
- case Key.ArrowDown: changeVolume(-0.05); break;
- case Key.ArrowUp: changeVolume(0.05); break;
+ case Key.ArrowDown:
+ changeVolume(-0.05);
+ break;
+ case Key.ArrowUp:
+ changeVolume(0.05);
+ break;
}
- }
+ };
const keyboardShortcutsUp = (e: React.KeyboardEvent) => {
- e.preventDefault()
+ e.preventDefault();
switch (e.key) {
- case ' ': togglePlay(); break;
- case 'm': toggleMute(); break;
+ case ' ':
+ togglePlay();
+ break;
+ case 'm':
+ toggleMute();
+ break;
- case 'f': enterFullscreen(); break;
- case Key.Escape: exitFullscreen(); break;
+ case 'f':
+ enterFullscreen();
+ break;
+ case Key.Escape:
+ exitFullscreen();
+ break;
- case '0': setProgressAbsolute(0); break;
- case '1': setProgressAbsolute(10); break;
- case '2': setProgressAbsolute(20); break;
- case '3': setProgressAbsolute(30); break;
- case '4': setProgressAbsolute(40); break;
- case '5': setProgressAbsolute(50); break;
- case '6': setProgressAbsolute(60); break;
- case '7': setProgressAbsolute(70); break;
- case '8': setProgressAbsolute(80); break;
- case '9': setProgressAbsolute(90); break;
+ case '0':
+ setProgressAbsolute(0);
+ break;
+ case '1':
+ setProgressAbsolute(10);
+ break;
+ case '2':
+ setProgressAbsolute(20);
+ break;
+ case '3':
+ setProgressAbsolute(30);
+ break;
+ case '4':
+ setProgressAbsolute(40);
+ break;
+ case '5':
+ setProgressAbsolute(50);
+ break;
+ case '6':
+ setProgressAbsolute(60);
+ break;
+ case '7':
+ setProgressAbsolute(70);
+ break;
+ case '8':
+ setProgressAbsolute(80);
+ break;
+ case '9':
+ setProgressAbsolute(90);
+ break;
}
- }
+ };
return (
= ({
height: '100%',
}}
>
-
{isLoading && (
= ({
sx={{
display: 'flex',
flexDirection: 'column',
- gap: '10px'
+ gap: '10px',
}}
>
-
-
- {resourceStatus?.status === 'REFETCHING' ? (
- <>
- <>
- {getDownloadProgress(resourceStatus?.localChunkCount, resourceStatus?.totalChunkCount)}
-
- <> Refetching data in 25 seconds
-
- ) : resourceStatus?.status === 'DOWNLOADED' ? (
- <>Download Completed: building tutorial video...
- ) : resourceStatus?.status !== 'READY' ? (
+
+ {resourceStatus?.status === 'REFETCHING' ? (
+ <>
<>
- {getDownloadProgress(resourceStatus?.localChunkCount || 0, resourceStatus?.totalChunkCount || 100)}
-
+ {getDownloadProgress(
+ resourceStatus?.localChunkCount,
+ resourceStatus?.totalChunkCount
+ )}
- ) : (
- <>Fetching tutorial from the Qortal Network...
- )}
-
-
+
+ <> Refetching data in 25 seconds
+
+ ) : resourceStatus?.status === 'DOWNLOADED' ? (
+ <>Download Completed: building tutorial video...
+ ) : resourceStatus?.status !== 'READY' ? (
+ <>
+ {getDownloadProgress(
+ resourceStatus?.localChunkCount || 0,
+ resourceStatus?.totalChunkCount || 100
+ )}
+
+ ) : (
+ <>Fetching tutorial from the Qortal Network...
+ )}
+
)}
{((!src && !isLoading) || !startPlay) && (
@@ -516,59 +551,61 @@ export const VideoPlayer: React.FC = ({
zIndex={500}
bgcolor="rgba(0, 0, 0, 0.6)"
onClick={() => {
- togglePlay()
+ togglePlay();
}}
sx={{
- cursor: 'pointer'
+ cursor: 'pointer',
}}
>
)}
-
-
+ >
+
- {isMobileView && canPlay ? (
+ {canPlay ? (
<>
@@ -577,77 +614,7 @@ export const VideoPlayer: React.FC = ({
-
-
-
-
-
-
-
-
- ) : canPlay ? (
- <>
-
- {playing ? : }
-
-
@@ -669,7 +636,7 @@ export const VideoPlayer: React.FC = ({
!videoRef.current?.duration || !progress
? 'hidden'
: 'visible',
- flexShrink: 0
+ flexShrink: 0,
}}
>
{progress && videoRef.current?.duration && formatTime(progress)}/
@@ -680,7 +647,7 @@ export const VideoPlayer: React.FC = ({
@@ -694,14 +661,14 @@ export const VideoPlayer: React.FC = ({
step={0.01}
sx={{
maxWidth: '100px',
- color: 'var(--Mail-Background)'
+ color: 'var(--Mail-Background)',
}}
/>
increaseSpeed()}
>
@@ -709,7 +676,7 @@ export const VideoPlayer: React.FC = ({
@@ -719,5 +686,5 @@ export const VideoPlayer: React.FC = ({
) : null}
- )
-}
+ );
+};
diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx
index 3235fbb..97c498b 100644
--- a/src/components/GeneralNotifications.tsx
+++ b/src/components/GeneralNotifications.tsx
@@ -43,7 +43,13 @@ export const GeneralNotifications = ({ address }) => {
>
+
PAYMENT NOTIFICATION
}
@@ -53,13 +59,13 @@ export const GeneralNotifications = ({ address }) => {
slotProps={{
tooltip: {
sx: {
- color: '#ffffff',
- backgroundColor: '#444444',
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.background.default,
},
},
arrow: {
sx: {
- color: '#444444',
+ color: theme.palette.text.primary,
},
},
}}
@@ -68,9 +74,7 @@ export const GeneralNotifications = ({ address }) => {
sx={{
color: hasNewPayment
? 'var(--unread)'
- : theme.palette.mode === 'dark'
- ? 'rgb(209, 209, 209)'
- : 'rgba(41, 41, 43, 1)',
+ : theme.palette.text.primary,
}}
/>
@@ -88,14 +92,14 @@ export const GeneralNotifications = ({ address }) => {
>
{!hasNewPayment && (
@@ -110,12 +114,12 @@ export const GeneralNotifications = ({ address }) => {
{hasNewPayment && (
)}
- {!isMobile && }
+
+
+
*/}
+
@@ -553,9 +539,11 @@ export const NewThread = ({
)}
+
{isMessage ? 'Post' : 'Create Thread'}
+
{isMessage ? (
) : (
@@ -564,6 +552,7 @@ export const NewThread = ({
+
void
- onSubmit?: (obj: any) => Promise
- children: any
- customStyles?: any
+ open: boolean;
+ onClose?: () => void;
+ onSubmit?: (obj: any) => Promise;
+ children: any;
+ customStyles?: any;
}
export const ReusableModal: React.FC = ({
@@ -15,9 +14,10 @@ export const ReusableModal: React.FC = ({
onClose,
onSubmit,
children,
- customStyles = {}
+ customStyles = {},
}) => {
- const theme = useTheme()
+ const theme = useTheme();
+
return (
= ({
},
}}
disableAutoFocus
- disableEnforceFocus
- disableRestoreFocus
+ disableEnforceFocus
+ disableRestoreFocus
>
{children}
- )
-}
+ );
+};
diff --git a/src/components/Group/Forum/Thread.tsx b/src/components/Group/Forum/Thread.tsx
index c7a83a3..087f5a2 100644
--- a/src/components/Group/Forum/Thread.tsx
+++ b/src/components/Group/Forum/Thread.tsx
@@ -41,11 +41,7 @@ import {
import { LoadingSnackbar } from '../../Snackbar/LoadingSnackbar';
import { subscribeToEvent, unsubscribeFromEvent } from '../../../utils/events';
import RefreshIcon from '@mui/icons-material/Refresh';
-import {
- getArbitraryEndpointReact,
- getBaseApiReact,
- isMobile,
-} from '../../../App';
+import { getArbitraryEndpointReact, getBaseApiReact } from '../../../App';
import {
ArrowDownward as ArrowDownwardIcon,
ArrowUpward as ArrowUpwardIcon,
@@ -602,23 +598,18 @@ export const Thread = ({
{
setMessages([]);
closeThread();
}}
>
- {!isMobile && Return to Threads}
+ Return to Threads
{/* Conditionally render the scroll buttons */}
{showScrollButton &&
@@ -628,7 +619,7 @@ export const Thread = ({
sx={{
color: 'white',
cursor: 'pointer',
- fontSize: isMobile ? '28px' : '36px',
+ fontSize: '36px',
}}
/>
@@ -638,7 +629,7 @@ export const Thread = ({
sx={{
color: 'white',
cursor: 'pointer',
- fontSize: isMobile ? '28px' : '36px',
+ fontSize: '36px',
}}
/>
@@ -655,38 +646,30 @@ export const Thread = ({
>
-
+
-
- {currentThread?.threadData?.title}
-
+ {currentThread?.threadData?.title}
-
+
+
+
{combinedListTempAndReal.map((message, index, list) => {
let fullMessage = message;
@@ -780,17 +759,17 @@ export const Thread = ({
>
@@ -812,6 +791,7 @@ export const Thread = ({
{message?.name?.charAt(0)}
+
+
{formatTimestampForum(message?.created)}
+
@@ -908,6 +890,7 @@ export const Thread = ({
{message?.name?.charAt(0)}
+
+
{formatTimestampForum(message?.created)}
+
@@ -952,9 +937,9 @@ export const Thread = ({
- {!isMobile && (
-
+ {
+ setDesktopSideView('groups');
}}
>
- {
- setDesktopSideView('groups');
- }}
+
-
-
-
-
- {
- setDesktopSideView('directs');
- }}
+ />
+
+
+ {
+ setDesktopSideView('directs');
+ }}
+ >
+
-
-
-
-
-
- )}
+ />
+
+
+
- {!isMobile &&
- ((desktopViewMode !== 'apps' && desktopViewMode !== 'dev') ||
- isOpenSideViewGroups) && (
-
- )}
+ {((desktopViewMode !== 'apps' && desktopViewMode !== 'dev') ||
+ isOpenSideViewGroups) && (
+
+ )}
- {!isMobile &&
- desktopViewMode === 'chat' &&
+ {desktopViewMode === 'chat' &&
desktopSideView !== 'directs' &&
renderGroups()}
- {!isMobile &&
- desktopViewMode === 'chat' &&
+ {desktopViewMode === 'chat' &&
desktopSideView === 'directs' &&
renderDirects()}
@@ -2231,66 +2170,10 @@ export const Group = ({
{newChat && (
<>
- {isMobile && (
-
-
-
- {
- close();
- }}
- >
-
-
-
-
-
- {
- setSelectedDirect(null);
- setMobileViewModeKeepOpen('');
- }}
- >
-
-
-
-
-
- )}
- {!isMobile && (
-
- )}
+
{triedToFetchSecretKey && (
@@ -2449,15 +2329,13 @@ export const Group = ({
(!secretKeyPublishDate && !firstSecretKeyInCreation) ? (
{' '}
@@ -2605,7 +2483,6 @@ export const Group = ({
sx={{
background: theme.palette.background.default,
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
- height: isMobile && `calc(${rootHeight} - 45px)`,
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
position: 'absolute',
@@ -2642,64 +2519,59 @@ export const Group = ({
)}
- {!isMobile && (
-
- )}
- {!isMobile && (
-
- )}
-
- {!isMobile && (
-
- )}
+
+
+
+
+
{
borderRadius: '19px',
display: 'flex',
flexDirection: 'column',
- height: isMobile ? '165px' : '250px',
+ height: '250px',
padding: '20px',
width: '322px',
}}
diff --git a/src/components/Group/GroupJoinRequests.tsx b/src/components/Group/GroupJoinRequests.tsx
index 76f958a..1847bd0 100644
--- a/src/components/Group/GroupJoinRequests.tsx
+++ b/src/components/Group/GroupJoinRequests.tsx
@@ -1,244 +1,277 @@
-import * as React from "react";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Checkbox from "@mui/material/Checkbox";
-import IconButton from "@mui/material/IconButton";
-import CommentIcon from "@mui/icons-material/Comment";
-import InfoIcon from "@mui/icons-material/Info";
-import { RequestQueueWithPromise } from "../../utils/queue/queue";
+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import IconButton from '@mui/material/IconButton';
+import { RequestQueueWithPromise } from '../../utils/queue/queue';
import GroupAddIcon from '@mui/icons-material/GroupAdd';
-import { executeEvent } from "../../utils/events";
-import { Box, ButtonBase, Collapse, Typography } from "@mui/material";
-import { Spacer } from "../../common/Spacer";
-import { CustomLoader } from "../../common/CustomLoader";
-import { getBaseApi } from "../../background";
-import { MyContext, getBaseApiReact, isMobile } from "../../App";
-import { myGroupsWhereIAmAdminAtom } from "../../atoms/global";
-import { useSetRecoilState } from "recoil";
+import { executeEvent } from '../../utils/events';
+import { Box, ButtonBase, Collapse, Typography } from '@mui/material';
+import { CustomLoader } from '../../common/CustomLoader';
+import { MyContext, getBaseApiReact } from '../../App';
+import { myGroupsWhereIAmAdminAtom } from '../../atoms/global';
+import { useSetRecoilState } from 'recoil';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
+export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2);
-export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode, setDesktopViewMode }) => {
- const [isExpanded, setIsExpanded] = React.useState(false)
-
- const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
- const [loading, setLoading] = React.useState(true)
- const {txList, setTxList} = React.useContext(MyContext)
- const setMyGroupsWhereIAmAdmin = useSetRecoilState(
- myGroupsWhereIAmAdminAtom
+export const GroupJoinRequests = ({
+ myAddress,
+ groups,
+ setOpenManageMembers,
+ getTimestampEnterChat,
+ setSelectedGroup,
+ setGroupSection,
+ setMobileViewMode,
+ setDesktopViewMode,
+}) => {
+ const [isExpanded, setIsExpanded] = React.useState(false);
+
+ const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
+ []
);
+ const [loading, setLoading] = React.useState(true);
+ const { txList, setTxList } = React.useContext(MyContext);
+ const setMyGroupsWhereIAmAdmin = useSetRecoilState(myGroupsWhereIAmAdminAtom);
-
- const getJoinRequests = async ()=> {
+ const getJoinRequests = async () => {
try {
- setLoading(true)
-
- let groupsAsAdmin = []
- const getAllGroupsAsAdmin = groups.filter((item)=> item.groupId !== '0').map(async (group)=> {
-
- const isAdminResponse = await requestQueueGroupJoinRequests.enqueue(()=> {
- return fetch(
- `${getBaseApiReact()}/groups/members/${group.groupId}?limit=0&onlyAdmins=true`
+ setLoading(true);
+
+ let groupsAsAdmin = [];
+ const getAllGroupsAsAdmin = groups
+ .filter((item) => item.groupId !== '0')
+ .map(async (group) => {
+ const isAdminResponse = await requestQueueGroupJoinRequests.enqueue(
+ () => {
+ return fetch(
+ `${getBaseApiReact()}/groups/members/${group.groupId}?limit=0&onlyAdmins=true`
+ );
+ }
);
- })
- const isAdminData = await isAdminResponse.json()
-
+ const isAdminData = await isAdminResponse.json();
- const findMyself = isAdminData?.members?.find((member)=> member.member === myAddress)
-
- if(findMyself){
- groupsAsAdmin.push(group)
- }
- return true
- })
+ const findMyself = isAdminData?.members?.find(
+ (member) => member.member === myAddress
+ );
-
- await Promise.all(getAllGroupsAsAdmin)
- setMyGroupsWhereIAmAdmin(groupsAsAdmin)
- const res = await Promise.all(groupsAsAdmin.map(async (group)=> {
+ if (findMyself) {
+ groupsAsAdmin.push(group);
+ }
+ return true;
+ });
- const joinRequestResponse = await requestQueueGroupJoinRequests.enqueue(()=> {
- return fetch(
- `${getBaseApiReact()}/groups/joinrequests/${group.groupId}`
- );
- })
+ await Promise.all(getAllGroupsAsAdmin);
+ setMyGroupsWhereIAmAdmin(groupsAsAdmin);
+ const res = await Promise.all(
+ groupsAsAdmin.map(async (group) => {
+ const joinRequestResponse =
+ await requestQueueGroupJoinRequests.enqueue(() => {
+ return fetch(
+ `${getBaseApiReact()}/groups/joinrequests/${group.groupId}`
+ );
+ });
- const joinRequestData = await joinRequestResponse.json()
- return {
- group,
- data: joinRequestData
- }
- }))
- setGroupsWithJoinRequests(res)
+ const joinRequestData = await joinRequestResponse.json();
+ return {
+ group,
+ data: joinRequestData,
+ };
+ })
+ );
+ setGroupsWithJoinRequests(res);
} catch (error) {
-
} finally {
- setLoading(false)
+ setLoading(false);
}
- }
+ };
React.useEffect(() => {
if (myAddress && groups.length > 0) {
- getJoinRequests()
+ getJoinRequests();
} else {
- setLoading(false)
+ setLoading(false);
}
}, [myAddress, groups]);
- const filteredJoinRequests = React.useMemo(()=> {
- return groupsWithJoinRequests.map((group)=> {
- const filteredGroupRequests = group?.data?.filter((gd)=> {
- const findJoinRequsetInTxList = txList?.find((tx)=> tx?.groupId === group?.group?.groupId && tx?.qortalAddress === gd?.joiner && tx?.type === 'join-request-accept')
+ const filteredJoinRequests = React.useMemo(() => {
+ return groupsWithJoinRequests.map((group) => {
+ const filteredGroupRequests = group?.data?.filter((gd) => {
+ const findJoinRequsetInTxList = txList?.find(
+ (tx) =>
+ tx?.groupId === group?.group?.groupId &&
+ tx?.qortalAddress === gd?.joiner &&
+ tx?.type === 'join-request-accept'
+ );
- if(findJoinRequsetInTxList) return false
- return true
- })
+ if (findJoinRequsetInTxList) return false;
+ return true;
+ });
return {
...group,
- data: filteredGroupRequests
- }
- })
- }, [groupsWithJoinRequests, txList])
-
-
+ data: filteredGroupRequests,
+ };
+ });
+ }, [groupsWithJoinRequests, txList]);
return (
-
+
setIsExpanded((prev)=> !prev)}
+ onClick={() => setIsExpanded((prev) => !prev)}
>
- Join Requests {filteredJoinRequests?.filter((group)=> group?.data?.length > 0)?.length > 0 && ` (${filteredJoinRequests?.filter((group)=> group?.data?.length > 0)?.length})`}
+ Join Requests{' '}
+ {filteredJoinRequests?.filter((group) => group?.data?.length > 0)
+ ?.length > 0 &&
+ ` (${filteredJoinRequests?.filter((group) => group?.data?.length > 0)?.length})`}
- {isExpanded ? : (
-
- )}
+ {isExpanded ? (
+
+ ) : (
+
+ )}
-
-
- {loading && filteredJoinRequests.length === 0 && (
-
-
-
- )}
- {!loading && (filteredJoinRequests.length === 0 || filteredJoinRequests?.filter((group)=> group?.data?.length > 0).length === 0) && (
-
-
- Nothing to display
-
-
- )}
-
- {filteredJoinRequests?.map((group)=> {
- if(group?.data?.length === 0) return null
- return (
- {
- setSelectedGroup(group?.group)
- setMobileViewMode('group')
- getTimestampEnterChat()
- setGroupSection("announcement")
- setOpenManageMembers(true)
- if(!isMobile){
- setDesktopViewMode('chat')
- }
- setTimeout(() => {
- executeEvent("openGroupJoinRequest", {});
-
- }, 300);
- }}
+
+
-
-
- }
- >
-
-
-
-
-
- )
+ width: '322px',
+ height: '250px',
- })}
-
-
-
-
-
-
+ display: 'flex',
+ flexDirection: 'column',
+ bgcolor: 'background.paper',
+ padding: '20px',
+ borderRadius: '19px',
+ }}
+ >
+ {loading && filteredJoinRequests.length === 0 && (
+
+
+
+ )}
+ {!loading &&
+ (filteredJoinRequests.length === 0 ||
+ filteredJoinRequests?.filter((group) => group?.data?.length > 0)
+ .length === 0) && (
+
+
+ Nothing to display
+
+
+ )}
+
+ {filteredJoinRequests?.map((group) => {
+ if (group?.data?.length === 0) return null;
+ return (
+ {
+ setSelectedGroup(group?.group);
+ setMobileViewMode('group');
+ getTimestampEnterChat();
+ setGroupSection('announcement');
+ setOpenManageMembers(true);
+ setDesktopViewMode('chat');
+ setTimeout(() => {
+ executeEvent('openGroupJoinRequest', {});
+ }, 300);
+ }}
+ sx={{
+ marginBottom: '20px',
+ }}
+ disablePadding
+ secondaryAction={
+
+
+
+ }
+ >
+
+
+
+
+ );
+ })}
+
+
+
);
};
diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx
index 9f29a8a..9a8c170 100644
--- a/src/components/Group/ListOfGroupPromotions.tsx
+++ b/src/components/Group/ListOfGroupPromotions.tsx
@@ -16,19 +16,12 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
- ListItem,
- ListItemAvatar,
- ListItemButton,
- ListItemText,
MenuItem,
Popover,
Select,
TextField,
Typography,
} from '@mui/material';
-
-import { getNameInfo } from './Group';
-import { getBaseApi, getFee } from '../../background';
import { LoadingButton } from '@mui/lab';
import LockIcon from '@mui/icons-material/Lock';
import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred';
@@ -36,7 +29,6 @@ import {
MyContext,
getArbitraryEndpointReact,
getBaseApiReact,
- isMobile,
} from '../../App';
import { Spacer } from '../../common/Spacer';
import { CustomLoader } from '../../common/CustomLoader';
@@ -51,7 +43,6 @@ import { Label } from './AddGroup';
import ShortUniqueId from 'short-unique-id';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { getGroupNames } from './UserListOfInvites';
-import { WrapperUserAction } from '../WrapperUserAction';
import { useVirtualizer } from '@tanstack/react-virtual';
import ErrorBoundary from '../../common/ErrorBoundary';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -390,6 +381,7 @@ export const ListOfGroupPromotions = () => {
/>
)}
+
{
<>
{
fontWeight: 600,
}}
>
+
+
{loading && promotions.length === 0 && (
@@ -589,6 +583,7 @@ export const ListOfGroupPromotions = () => {
>
Group name: {` ${promotion?.groupName}`}
+
{
Number of members:{' '}
{` ${promotion?.memberCount}`}
+
{promotion?.description && (
{
{promotion?.description}
)}
+
{promotion?.isOpen === false && (
{
your request
)}
+
+
{
>
Close
+
{
>
{promotion?.name?.charAt(0)}
+
{
{promotion?.name}
+
{
{promotion?.groupName}
+
+
{
: 'Private group'}
+
+
{
>
{promotion?.data}
+
+
{
+
- {posts?.map((post) => {
- return (
- {
- executeEvent("openThreadNewPost", {
- data: post,
- });
- }}
- disablePadding
- secondaryAction={
-
-
-
- }
- >
-
-
-
-
- );
- })}
-
+
+ {posts?.map((post) => {
+ return (
+ {
+ executeEvent('openThreadNewPost', {
+ data: post,
+ });
+ }}
+ disablePadding
+ secondaryAction={
+
+
+
+ }
+ >
+
+
+
+
+ );
+ })}
+
)}
-
);
diff --git a/src/components/Group/ManageMembers.tsx b/src/components/Group/ManageMembers.tsx
index de361fa..a69dde4 100644
--- a/src/components/Group/ManageMembers.tsx
+++ b/src/components/Group/ManageMembers.tsx
@@ -1,10 +1,6 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemButton from '@mui/material/ListItemButton';
-import List from '@mui/material/List';
-import Divider from '@mui/material/Divider';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
@@ -19,7 +15,7 @@ import { ListOfBans } from './ListOfBans';
import { ListOfJoinRequests } from './ListOfJoinRequests';
import { Box, ButtonBase, Card, Tab, Tabs } from '@mui/material';
import { CustomizedSnackbars } from '../Snackbar/Snackbar';
-import { MyContext, getBaseApiReact, isMobile } from '../../App';
+import { MyContext, getBaseApiReact } from '../../App';
import { getGroupMembers, getNames } from './Group';
import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
import { getFee } from '../../background';
@@ -27,6 +23,7 @@ import { LoadingButton } from '@mui/lab';
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
import { Spacer } from '../../common/Spacer';
import InsertLinkIcon from '@mui/icons-material/InsertLink';
+
function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
@@ -193,9 +190,9 @@ export const ManageMembers = ({
@@ -221,9 +218,10 @@ export const ManageMembers = ({
'&.Mui-selected': {
color: 'white',
},
- fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
+ fontSize: '1rem',
}}
/>
+
+
+
+
+
GroupId: {groupInfo?.groupId}
+
GroupName: {groupInfo?.groupName}
+
Number of members: {groupInfo?.memberCount}
+
Join Group Link
+
+
{selectedGroup?.groupId && !isOwner && (
Load members with names
+
+
)}
+
+
{
borderRadius: '19px',
display: 'flex',
flexDirection: 'column',
- height: isMobile ? '165px' : '250px',
+ height: '250px',
overflow: 'auto',
padding: '20px',
width: '322px',
diff --git a/src/components/Group/ThingsToDoInitial.tsx b/src/components/Group/ThingsToDoInitial.tsx
index 367b3b1..023cfde 100644
--- a/src/components/Group/ThingsToDoInitial.tsx
+++ b/src/components/Group/ThingsToDoInitial.tsx
@@ -1,28 +1,23 @@
-import * as React from "react";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Checkbox from "@mui/material/Checkbox";
-import IconButton from "@mui/material/IconButton";
-import CommentIcon from "@mui/icons-material/Comment";
-import InfoIcon from "@mui/icons-material/Info";
-import { Box, Typography } from "@mui/material";
-import { Spacer } from "../../common/Spacer";
-import { isMobile } from "../../App";
-import { QMailMessages } from "./QMailMessages";
-import { executeEvent } from "../../utils/events";
+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { Box, Typography } from '@mui/material';
+import { Spacer } from '../../common/Spacer';
+import { QMailMessages } from './QMailMessages';
+import { executeEvent } from '../../utils/events';
-export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance, userInfo }) => {
+export const ThingsToDoInitial = ({
+ myAddress,
+ name,
+ hasGroups,
+ balance,
+ userInfo,
+}) => {
const [checked1, setChecked1] = React.useState(false);
const [checked2, setChecked2] = React.useState(false);
- // const [checked3, setChecked3] = React.useState(false);
-
- // React.useEffect(() => {
- // if (hasGroups) setChecked3(true);
- // }, [hasGroups]);
-
React.useEffect(() => {
if (balance && +balance >= 6) {
@@ -30,111 +25,114 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance, userInf
}
}, [balance]);
-
React.useEffect(() => {
if (name) setChecked2(true);
}, [name]);
+ const isLoaded = React.useMemo(() => {
+ if (userInfo !== null) return true;
+ return false;
+ }, [userInfo]);
- const isLoaded = React.useMemo(()=> {
- if(userInfo !== null) return true
- return false
- }, [ userInfo])
+ const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(() => {
+ if (isLoaded && checked1 && checked2) return true;
+ return false;
+ }, [checked1, isLoaded, checked2]);
- const hasDoneNameAndBalanceAndIsLoaded = React.useMemo(()=> {
- if(isLoaded && checked1 && checked2) return true
- return false
-}, [checked1, isLoaded, checked2])
-
-if(hasDoneNameAndBalanceAndIsLoaded){
- return (
-
- );
-}
-if(!isLoaded) return null
+ if (hasDoneNameAndBalanceAndIsLoaded) {
+ return (
+
+ );
+ }
+ if (!isLoaded) return null;
return (
- {!isLoaded ? 'Loading...' : 'Getting Started' }
+ {!isLoaded ? 'Loading...' : 'Getting Started'}
+
{isLoaded && (
-
-
- {
- executeEvent("openBuyQortInfo", {})
- }}
- >
-
-
-
- {/*
+
+ {
+ executeEvent('openBuyQortInfo', {});
+ }}
+ >
+
+
+
+ {/* */}
-
-
-
-
- //
- //
- // }
- disablePadding
- >
-
-
- {
- executeEvent('openRegisterName', {})
- }} sx={{
- "& .MuiTypography-root": {
- fontSize: "1rem",
- fontWeight: 400,
- },
- }} primary={`Register a name`} />
-
-
-
-
-
- {/*
+
+
+
+ //
+ //
+ // }
+ disablePadding
+ >
+
+ {
+ executeEvent('openRegisterName', {});
+ }}
+ sx={{
+ '& .MuiTypography-root': {
+ fontSize: '1rem',
+ fontWeight: 400,
+ },
+ }}
+ primary={`Register a name`}
+ />
+
+
+
+
+
+ {/*
*/}
-
+
)}
-
);
diff --git a/src/components/Mobile/MobileFooter.tsx b/src/components/Mobile/MobileFooter.tsx
deleted file mode 100644
index 52e5c7c..0000000
--- a/src/components/Mobile/MobileFooter.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import * as React from "react";
-import {
- BottomNavigation,
- BottomNavigationAction,
- ButtonBase,
- Typography,
-} from "@mui/material";
-import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
-import Box from "@mui/material/Box";
-import BottomLogo from "../../assets/svgs/BottomLogo5.svg";
-import LogoSelected from "../../assets/svgs/LogoSelected.svg";
-import { Browser } from '@capacitor/browser';
-
-import { CustomSvg } from "../../common/CustomSvg";
-import { WalletIcon } from "../../assets/Icons/WalletIcon";
-import { HubsIcon } from "../../assets/Icons/HubsIcon";
-import { TradingIcon } from "../../assets/Icons/TradingIcon";
-import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
-import { executeEvent } from "../../utils/events";
-
-const IconWrapper = ({ children, label, color }) => {
- return (
-
- {children}
-
- {label}
-
-
- );
-};
-
-export const MobileFooter = ({
- selectedGroup,
- groupSection,
- isUnread,
- goToAnnouncements,
- isUnreadChat,
- goToChat,
- goToThreads,
- setOpenManageMembers,
- groupChatHasUnread,
- groupsAnnHasUnread,
- directChatHasUnread,
- chatMode,
- openDrawerGroups,
- goToHome,
- setIsOpenDrawerProfile,
- mobileViewMode,
- setMobileViewMode,
- setMobileViewModeKeepOpen,
- hasUnreadGroups,
- hasUnreadDirects
-}) => {
- const [value, setValue] = React.useState(0);
- return (
-
- setValue(newValue)}
- sx={{ backgroundColor: "transparent", flexGrow: 1 }}
- >
- {
- // setMobileViewMode('wallet')
- setIsOpenDrawerProfile(true);
- }}
- icon={
-
-
-
- }
- sx={{ color: value === 0 ? "white" : "gray", padding: "0px 10px" }}
- />
- {
- setMobileViewMode("groups");
- }}
- icon={
-
-
-
- }
- sx={{
- color: value === 0 ? "white" : "gray",
- paddingLeft: "10px",
- paddingRight: "42px",
- }}
- />
-
-
- {/* Floating Center Button */}
-
- {
- if(mobileViewMode === 'home'){
- setMobileViewMode('apps')
-
- } else {
- setMobileViewMode('home')
-
- }
- }}>
-
- {/* Custom Center Icon */}
- 
-
-
-
-
- setValue(newValue)}
- sx={{ backgroundColor: "transparent", flexGrow: 1 }}
- >
- {
- setMobileViewModeKeepOpen("messaging");
- }}
- icon={
-
-
-
- }
- sx={{
- color: value === 2 ? "white" : "gray",
- paddingLeft: "55px",
- paddingRight: "10px",
- }}
- />
- {
- executeEvent("addTab", { data: { service: 'APP', name: 'q-trade' } });
- executeEvent("open-apps-mode", { });
- }}
-
- icon={
-
-
-
- }
- sx={{ color: value === 3 ? "white" : "gray", padding: "0px 10px" }}
- />
-
-
- );
-};
diff --git a/src/components/Mobile/MobileHeader.tsx b/src/components/Mobile/MobileHeader.tsx
deleted file mode 100644
index 1ab74dc..0000000
--- a/src/components/Mobile/MobileHeader.tsx
+++ /dev/null
@@ -1,528 +0,0 @@
-import React, { useState } from "react";
-import {
- AppBar,
- Toolbar,
- IconButton,
- Typography,
- Box,
- MenuItem,
- Select,
- ButtonBase,
- Menu,
- ListItemIcon,
- ListItemText,
-} from "@mui/material";
-import { HomeIcon } from "../../assets/Icons/HomeIcon";
-import { LogoutIcon } from "../../assets/Icons/LogoutIcon";
-import { NotificationIcon } from "../../assets/Icons/NotificationIcon";
-import { ArrowDownIcon } from "../../assets/Icons/ArrowDownIcon";
-import { MessagingIcon } from "../../assets/Icons/MessagingIcon";
-import { MessagingIcon2 } from "../../assets/Icons/MessagingIcon2";
-import { HubsIcon } from "../../assets/Icons/HubsIcon";
-import { Save } from "../Save/Save";
-import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
-import { useRecoilState } from "recoil";
-import { fullScreenAtom, hasSettingsChangedAtom } from "../../atoms/global";
-import { useAppFullScreen } from "../../useAppFullscreen";
-
-const Header = ({
- logoutFunc,
- goToHome,
- setIsOpenDrawerProfile,
- isThin,
- setMobileViewModeKeepOpen,
- hasUnreadGroups,
- hasUnreadDirects,
- setMobileViewMode,
- myName,
- setSelectedDirect,
- setNewChat,
-}) => {
- const [anchorEl, setAnchorEl] = useState(null);
- const open = Boolean(anchorEl);
- const [fullScreen, setFullScreen] = useRecoilState(fullScreenAtom);
- const { exitFullScreen } = useAppFullScreen(setFullScreen);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
-
- const handleClose = () => {
- setAnchorEl(null);
- };
-
- if (isThin) {
- return (
-
-
- {/* Left Home Icon */}
-
- {
- setMobileViewModeKeepOpen("");
- goToHome();
- }}
- // onClick={onHomeClick}
- >
-
-
-
-
-
- {fullScreen && (
- {
- exitFullScreen();
- setFullScreen(false);
- }}
- >
-
-
- )}
-
-
- {/* Center Title */}
-
- QORTAL
-
-
- {/* Right Logout Icon */}
-
- {
- setMobileViewModeKeepOpen("messaging");
- }}
- >
-
-
-
-
-
-
-
-
-
-
- );
- }
- return (
- <>
- {/* Main Header */}
-
-
- {/* Left Home Icon */}
-
-
-
-
- {fullScreen && (
- {
- exitFullScreen();
- setFullScreen(false);
- }}
- >
-
-
- )}
-
- {/* Center Title */}
-
- QORTAL
-
-
- {/* Right Logout Icon */}
-
-
-
-
-
-
-
-
- {/* Secondary Section */}
-
-
-
- {myName}
-
- {/*
- */}
-
-
-
-
-
-
-
-
- {/* Right Dropdown */}
- {/* {
- setIsOpenDrawerProfile(true);
- }}
- >
-
-
- View Wallet
-
-
-
-
- */}
-
-
-
-
- );
-};
-
-export default Header;
diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx
index 31f0a49..b59538e 100644
--- a/src/components/PasswordField/PasswordField.tsx
+++ b/src/components/PasswordField/PasswordField.tsx
@@ -4,7 +4,6 @@ import {
TextField,
TextFieldProps,
styled,
- useTheme,
} from '@mui/material';
import { forwardRef, useState } from 'react';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
@@ -52,7 +51,6 @@ export const CustomInput = styled(TextField)(({ theme }) => ({
export const PasswordField = forwardRef(
({ ...props }, ref) => {
const [canViewPassword, setCanViewPassword] = useState(false);
- const theme = useTheme();
return (
{
const [showPicker, setShowPicker] = useState(false);
@@ -30,7 +29,7 @@ export const ReactionPicker = ({ onReaction }) => {
} else {
// Get the button's position
const buttonRect = buttonRef.current.getBoundingClientRect();
- const pickerWidth = isMobile ? 300 : 350; // Adjust based on picker width
+ const pickerWidth = 350;
// Calculate position to align the right edge of the picker with the button's right edge
setPickerPosition({
@@ -90,15 +89,15 @@ export const ReactionPicker = ({ onReaction }) => {
}}
>
,
document.body
diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx
index cf8dba6..c8196d8 100644
--- a/src/components/Save/Save.tsx
+++ b/src/components/Save/Save.tsx
@@ -19,7 +19,7 @@ import { SaveIcon } from '../../assets/Icons/SaveIcon';
import { IconWrapper } from '../Desktop/DesktopFooter';
import { Spacer } from '../../common/Spacer';
import { LoadingButton } from '@mui/lab';
-import { saveToLocalStorage } from '../Apps/AppsNavBar';
+import { saveToLocalStorage } from '../Apps/AppsNavBarDesktop';
import { decryptData, encryptData } from '../../qortalRequests/get';
import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet';
import {
diff --git a/src/components/TaskManager/TaskManager.tsx b/src/components/TaskManager/TaskManager.tsx
index f1f075b..673c385 100644
--- a/src/components/TaskManager/TaskManager.tsx
+++ b/src/components/TaskManager/TaskManager.tsx
@@ -12,7 +12,7 @@ import PendingIcon from '@mui/icons-material/Pending';
import TaskAltIcon from '@mui/icons-material/TaskAlt';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
-import { MyContext, getBaseApiReact, isMobile } from '../../App';
+import { MyContext, getBaseApiReact } from '../../App';
import { executeEvent } from '../../utils/events';
export const TaskManager = ({ getUserInfo }) => {
@@ -141,8 +141,7 @@ export const TaskManager = ({ getUserInfo }) => {
});
}, [txList]);
- if (isMobile || txList?.length === 0 || txList.every((item) => item?.done))
- return null;
+ if (txList?.length === 0 || txList.every((item) => item?.done)) return null;
return (
<>
diff --git a/src/components/Tutorials/Tutorials.tsx b/src/components/Tutorials/Tutorials.tsx
index 4f9ea49..382774c 100644
--- a/src/components/Tutorials/Tutorials.tsx
+++ b/src/components/Tutorials/Tutorials.tsx
@@ -1,72 +1,103 @@
-import React, { useContext, useState } from 'react'
-import { GlobalContext, MyContext } from '../../App';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tab, Tabs, Typography } from '@mui/material';
+import { useContext, useState } from 'react';
+import { GlobalContext } from '../../App';
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ Tab,
+ Tabs,
+ useTheme,
+} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { VideoPlayer } from '../Embeds/VideoPlayer';
export const Tutorials = () => {
- const { openTutorialModal, setOpenTutorialModal } = useContext(GlobalContext);
- const [multiNumber, setMultiNumber] = useState(0)
- const handleClose = ()=> {
- setOpenTutorialModal(null)
- setMultiNumber(0)
- }
- if(!openTutorialModal) return null
- if(openTutorialModal?.multi){
- const selectedTutorial = openTutorialModal?.multi[multiNumber]
- return (
-