mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: remove collaborative features
This commit is contained in:
swve
parent
cb87f74ac4
commit
0d2f9aa55b
12 changed files with 10 additions and 616 deletions
|
|
@ -1,67 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import UserAvatar from '../UserAvatar'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUserAvatarMediaDirectory } from '@services/media/media';
|
||||
import { getCollaborationServerUrl } from '@services/config/config';
|
||||
import { useOrg } from '@components/Contexts/OrgContext';
|
||||
|
||||
type ActiveAvatarsProps = {
|
||||
mouseMovements: any;
|
||||
userRandomColor: string;
|
||||
}
|
||||
|
||||
function ActiveAvatars(props: ActiveAvatarsProps) {
|
||||
const session = useLHSession() as any;
|
||||
const org = useOrg() as any;
|
||||
const [activeUsers, setActiveUsers] = useState({} as any);
|
||||
|
||||
/* Collaboration Features */
|
||||
const collab = getCollaborationServerUrl()
|
||||
const isCollabEnabledOnThisOrg = org?.config.config.features.collaboration.enabled && collab
|
||||
|
||||
// Get users from the mouseMovements object
|
||||
useEffect(() => {
|
||||
const users: any = {};
|
||||
Object.keys(props.mouseMovements).forEach((key) => {
|
||||
users[props.mouseMovements[key].user.user_uuid] = props.mouseMovements[key].user;
|
||||
});
|
||||
|
||||
// Remove the current user from the list
|
||||
delete users[session.data.user.user_uuid];
|
||||
|
||||
setActiveUsers(users);
|
||||
}
|
||||
, [props.mouseMovements, session.data.user, org]);
|
||||
|
||||
|
||||
return (
|
||||
<div className=''>
|
||||
|
||||
<div className='flex -space-x-2 transition-all ease-linear'>
|
||||
{isCollabEnabledOnThisOrg && Object.keys(activeUsers).map((key) => (
|
||||
<div className='flex' style={{ position: 'relative' }} key={key}>
|
||||
<UserAvatar
|
||||
key={key}
|
||||
width={40}
|
||||
border="border-4"
|
||||
rounded="rounded-full"
|
||||
avatar_url={getUserAvatarMediaDirectory(activeUsers[key].user_uuid, activeUsers[key].avatar_image) as string}
|
||||
/>
|
||||
<div className="h-2 w-2 rounded-full" style={{ position: 'absolute', bottom: -5, right: 16, backgroundColor: props.mouseMovements[key].color }} />
|
||||
</div>
|
||||
))}
|
||||
{session.status && (
|
||||
<div className='z-50'>
|
||||
<UserAvatar
|
||||
width={40}
|
||||
border="border-4"
|
||||
rounded="rounded-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActiveAvatars
|
||||
|
|
@ -21,7 +21,7 @@ import WarningCallout from './Extensions/Callout/Warning/WarningCallout'
|
|||
import ImageBlock from './Extensions/Image/ImageBlock'
|
||||
import Youtube from '@tiptap/extension-youtube'
|
||||
import VideoBlock from './Extensions/Video/VideoBlock'
|
||||
import { ComputerIcon, Eye, Monitor } from 'lucide-react'
|
||||
import { Eye, Monitor } from 'lucide-react'
|
||||
import MathEquationBlock from './Extensions/MathEquation/MathEquationBlock'
|
||||
import PDFBlock from './Extensions/PDF/PDFBlock'
|
||||
import QuizBlock from './Extensions/Quiz/QuizBlock'
|
||||
|
|
@ -45,17 +45,14 @@ import html from 'highlight.js/lib/languages/xml'
|
|||
import python from 'highlight.js/lib/languages/python'
|
||||
import java from 'highlight.js/lib/languages/java'
|
||||
import { CourseProvider } from '@components/Contexts/CourseContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import AIEditorToolkit from './AI/AIEditorToolkit'
|
||||
import useGetAIFeatures from '@components/Hooks/useGetAIFeatures'
|
||||
import Collaboration from '@tiptap/extension-collaboration'
|
||||
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
|
||||
import ActiveAvatars from './ActiveAvatars'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import EmbedObjects from './Extensions/EmbedObjects/EmbedObjects'
|
||||
import Badges from './Extensions/Badges/Badges'
|
||||
import Buttons from './Extensions/Buttons/Buttons'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
import UserAvatar from '../UserAvatar'
|
||||
|
||||
interface Editor {
|
||||
content: string
|
||||
|
|
@ -63,16 +60,10 @@ interface Editor {
|
|||
course: any
|
||||
org: any
|
||||
session: any
|
||||
ydoc: any
|
||||
hocuspocusProvider: any,
|
||||
isCollabEnabledOnThisOrg: boolean
|
||||
userRandomColor: string
|
||||
mouseMovements: any
|
||||
setContent: (content: string) => void
|
||||
}
|
||||
|
||||
function Editor(props: Editor) {
|
||||
const session = useLHSession() as any
|
||||
const dispatchAIEditor = useAIEditorDispatch() as any
|
||||
const aiEditorState = useAIEditor() as AIEditorStateTypes
|
||||
const is_ai_feature_enabled = useGetAIFeatures({ feature: 'editor' })
|
||||
|
|
@ -102,12 +93,8 @@ function Editor(props: Editor) {
|
|||
|
||||
const editor: any = useEditor({
|
||||
editable: true,
|
||||
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
// The Collaboration extension comes with its own history handling
|
||||
history: props.isCollabEnabledOnThisOrg ? false : undefined,
|
||||
}),
|
||||
StarterKit,
|
||||
InfoCallout.configure({
|
||||
editable: true,
|
||||
}),
|
||||
|
|
@ -159,28 +146,13 @@ function Editor(props: Editor) {
|
|||
TableRow,
|
||||
TableHeader,
|
||||
TableCell,
|
||||
|
||||
// Add Collaboration and CollaborationCursor only if isCollabEnabledOnThisOrg is true
|
||||
...(props.isCollabEnabledOnThisOrg ? [
|
||||
Collaboration.configure({
|
||||
document: props.hocuspocusProvider?.document,
|
||||
|
||||
}),
|
||||
|
||||
CollaborationCursor.configure({
|
||||
provider: props.hocuspocusProvider,
|
||||
user: {
|
||||
name: props.session.data.user.first_name + ' ' + props.session.data.user.last_name,
|
||||
color: props.userRandomColor,
|
||||
},
|
||||
}),
|
||||
] : []),
|
||||
],
|
||||
|
||||
// If collab is enabled the onSynced callback ensures initial content is set only once using editor.setContent(), preventing repetitive content insertion on editor syncs.
|
||||
content: props.isCollabEnabledOnThisOrg ? null : props.content,
|
||||
content: props.content,
|
||||
immediatelyRender: false,
|
||||
})
|
||||
|
||||
console.log(props.content)
|
||||
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
if (isMobile) {
|
||||
// TODO: Work on a better editor mobile experience
|
||||
|
|
@ -310,7 +282,7 @@ function Editor(props: Editor) {
|
|||
/>
|
||||
|
||||
<EditorUserProfileWrapper>
|
||||
<ActiveAvatars userRandomColor={props.userRandomColor} mouseMovements={props.mouseMovements} />
|
||||
<UserAvatar border="border-4" use_with_session={true} width={45} />
|
||||
</EditorUserProfileWrapper>
|
||||
</EditorUsersSection>
|
||||
</EditorTop>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
'use client'
|
||||
import { default as React, useEffect, useRef, useState } from 'react'
|
||||
import { default as React } from 'react'
|
||||
import Editor from './Editor'
|
||||
import { updateActivity } from '@services/courses/activities'
|
||||
import { toast } from 'react-hot-toast'
|
||||
|
|
@ -7,15 +7,7 @@ import Toast from '@components/Objects/StyledElements/Toast/Toast'
|
|||
import { OrgProvider } from '@components/Contexts/OrgContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
|
||||
// Collaboration
|
||||
import { HocuspocusProvider } from '@hocuspocus/provider'
|
||||
import * as Y from 'yjs'
|
||||
import { IndexeddbPersistence } from 'y-indexeddb'
|
||||
import { getCollaborationServerUrl } from '@services/config/config'
|
||||
import randomColor from 'randomcolor'
|
||||
import MouseMovements from './MouseMovements'
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { debounce } from '@/lib/utils';
|
||||
|
||||
|
||||
interface EditorWrapperProps {
|
||||
content: string
|
||||
|
|
@ -27,61 +19,11 @@ interface EditorWrapperProps {
|
|||
function EditorWrapper(props: EditorWrapperProps): JSX.Element {
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
// Define provider in the state
|
||||
const [provider, setProvider] = React.useState<HocuspocusProvider | null>(null);
|
||||
const [thisPageColor, setThisPageColor] = useState(randomColor({ luminosity: 'light' }) as string)
|
||||
let uuid = uuidv4();
|
||||
const [onlinePageInstanceID, setOnlinePageInstanceID] = useState(uuid as string)
|
||||
|
||||
|
||||
/* Collaboration Features */
|
||||
const collab = getCollaborationServerUrl()
|
||||
const isCollabEnabledOnThisOrg = props.org.config.config.features.collaboration.enabled && collab
|
||||
const doc = new Y.Doc()
|
||||
// mouse movement
|
||||
const [mouseMovements, setMouseMovements] = useState({} as any);
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const debouncedSetMouseMovements = (newMovements: any) => {
|
||||
if (timeoutRef.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
setMouseMovements(newMovements);
|
||||
}, 10);
|
||||
};
|
||||
|
||||
|
||||
// Store the Y document in the browser
|
||||
new IndexeddbPersistence(props.activity.activity_uuid, doc)
|
||||
|
||||
document.addEventListener(
|
||||
'mousemove',
|
||||
debounce((event: MouseEvent) => {
|
||||
provider?.setAwarenessField('userMouseMovement', {
|
||||
user: session.data.user,
|
||||
mouseX: event.clientX,
|
||||
mouseY: event.clientY,
|
||||
color: thisPageColor,
|
||||
onlineInstanceID: onlinePageInstanceID,
|
||||
})
|
||||
}, 300)
|
||||
)
|
||||
|
||||
async function setContent(content: any) {
|
||||
let activity = props.activity
|
||||
activity.content = content
|
||||
|
||||
|
||||
provider?.setAwarenessField("savings_states", {
|
||||
[session.data.user.user_uuid]: {
|
||||
status: 'action_save',
|
||||
timestamp: new Date().toISOString(),
|
||||
user: session.data.user
|
||||
}
|
||||
});
|
||||
|
||||
toast.promise(updateActivity(activity, activity.activity_uuid, access_token), {
|
||||
loading: 'Saving...',
|
||||
success: <b>Activity saved!</b>,
|
||||
|
|
@ -90,92 +32,10 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Create a ref to store the last save timestamp of each user
|
||||
const lastSaveTimestampRef = useRef({}) as any;
|
||||
|
||||
useEffect(() => {
|
||||
// Check if provider is not already set
|
||||
if (!provider) {
|
||||
const newProvider = new HocuspocusProvider({
|
||||
url: collab,
|
||||
name: props.activity.activity_uuid,
|
||||
document: doc,
|
||||
|
||||
// TODO(alpha code): This whole block of code should be improved to something more efficient and less hacky
|
||||
onConnect: () => {
|
||||
// Set the online page instance ID
|
||||
setOnlinePageInstanceID(uuidv4());
|
||||
|
||||
// Set the user color
|
||||
setThisPageColor(randomColor({ luminosity: 'light' }) as string);
|
||||
},
|
||||
|
||||
onAwarenessUpdate: ({ states }) => {
|
||||
const usersStates = states;
|
||||
/* Showing user mouse movement */
|
||||
usersStates.forEach((userState: any) => {
|
||||
if (userState.userMouseMovement) {
|
||||
const userMouseMovement = userState.userMouseMovement;
|
||||
|
||||
// Update the mouse movements state
|
||||
debouncedSetMouseMovements((prevMovements: any) => {
|
||||
return {
|
||||
...prevMovements,
|
||||
[userMouseMovement.user.user_uuid]: {
|
||||
user: userMouseMovement.user,
|
||||
mouseX: userMouseMovement.mouseX,
|
||||
mouseY: userMouseMovement.mouseY,
|
||||
color: userMouseMovement.color,
|
||||
onlinePageInstanceID: userMouseMovement.onlineInstanceID
|
||||
},
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Notifiying if a user has saved course content */
|
||||
usersStates.forEach((userState: any) => {
|
||||
if (userState.savings_states) {
|
||||
const savingsState = userState.savings_states
|
||||
|
||||
// Check if a user has saved the document
|
||||
Object.keys(savingsState).forEach(user => {
|
||||
const userObj = savingsState[user].user;
|
||||
const status = savingsState[user].status;
|
||||
const timestamp = savingsState[user].timestamp;
|
||||
|
||||
// Get the current timestamp
|
||||
const currentTimestamp = new Date().getTime();
|
||||
|
||||
// If the user has saved the document and the timestamp is close to the current timestamp, show the toast
|
||||
if (status === 'action_save' && Math.abs(currentTimestamp - new Date(timestamp).getTime()) < 10) { // 5000 milliseconds = 5 seconds
|
||||
// Update the last save timestamp for this user
|
||||
lastSaveTimestampRef.current[user] = timestamp;
|
||||
|
||||
toast.success(`${userObj.first_name} ${userObj.last_name} has saved the document`);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
// Set the new provider
|
||||
setProvider(newProvider);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
{
|
||||
return (
|
||||
<>
|
||||
<Toast></Toast>
|
||||
<MouseMovements org={props.org} movements={mouseMovements} onlinePageInstanceID={onlinePageInstanceID} />
|
||||
<OrgProvider orgslug={props.org.slug}>
|
||||
{!session.isLoading && (<Editor
|
||||
org={props.org}
|
||||
|
|
@ -184,11 +44,6 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
|
|||
content={props.content}
|
||||
setContent={setContent}
|
||||
session={session}
|
||||
ydoc={doc}
|
||||
hocuspocusProvider={provider}
|
||||
isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
|
||||
userRandomColor={thisPageColor}
|
||||
mouseMovements={mouseMovements}
|
||||
></Editor>)}
|
||||
</OrgProvider>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
import { getCollaborationServerUrl } from "@services/config/config";
|
||||
import { motion } from "framer-motion";
|
||||
import React, { useEffect } from 'react'
|
||||
|
||||
interface User {
|
||||
user_uuid: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
}
|
||||
|
||||
interface Movement {
|
||||
user: User;
|
||||
mouseX: number;
|
||||
mouseY: number;
|
||||
color: string;
|
||||
onlinePageInstanceID: string;
|
||||
}
|
||||
|
||||
interface MouseMovementsProps {
|
||||
movements: Record<string, Movement>;
|
||||
onlinePageInstanceID: string;
|
||||
org ?: any;
|
||||
}
|
||||
|
||||
function MouseMovements({ movements, onlinePageInstanceID, org }: MouseMovementsProps): JSX.Element {
|
||||
|
||||
|
||||
/* Collaboration config */
|
||||
const collab = getCollaborationServerUrl()
|
||||
const isCollabEnabledOnThisOrg = org?.config.config.features.collaboration.enabled && collab
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}
|
||||
, [movements, org]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{isCollabEnabledOnThisOrg && Object.keys(movements).map((key) => (
|
||||
movements[key].onlinePageInstanceID !== onlinePageInstanceID && (<motion.div
|
||||
key={key}
|
||||
className="flex -space-x-2"
|
||||
style={{
|
||||
position: "fixed",
|
||||
zIndex: 10000,
|
||||
}}
|
||||
initial={{ x: 0, y: 0 }}
|
||||
animate={{ x: movements[key].mouseX, y: movements[key].mouseY }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 30,
|
||||
mass: 0.8,
|
||||
stiffness: 350,
|
||||
}}
|
||||
>
|
||||
<CursorSvg color={movements[key].color} />
|
||||
<div
|
||||
style={{ backgroundColor: movements[key].color }}
|
||||
className={`px-3 h-fit py-0.5 rounded-full font-bold text-[11px] shadow-sm text-black`}>{movements[key].user.first_name} {movements[key].user.last_name}</div>
|
||||
</motion.div>)
|
||||
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CursorSvg({ color }: { color: string }) {
|
||||
return (
|
||||
<svg width="32" height="44" viewBox="0 0 24 36" fill="none">
|
||||
<path
|
||||
fill={color}
|
||||
d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default MouseMovements;
|
||||
Loading…
Add table
Add a link
Reference in a new issue