mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-18 11:59:26 +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 +0,0 @@
|
|||
node_modules
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
# use the official Bun image
|
||||
# see all versions at https://hub.docker.com/r/oven/bun/tags
|
||||
FROM oven/bun:1 as base
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
# install dependencies into temp directory
|
||||
# this will cache them and speed up future builds
|
||||
FROM base AS install
|
||||
RUN mkdir -p /temp/dev
|
||||
COPY package.json /temp/dev/
|
||||
RUN cd /temp/dev && bun install
|
||||
|
||||
# install with --production (exclude devDependencies)
|
||||
RUN mkdir -p /temp/prod
|
||||
COPY package.json pnpm-lock.yaml /temp/prod/
|
||||
RUN cd /temp/prod && bun install --production
|
||||
|
||||
# copy node_modules from temp directory
|
||||
# then copy all (non-ignored) project files into the image
|
||||
FROM base AS prerelease
|
||||
COPY --from=install /temp/dev/node_modules node_modules
|
||||
COPY . .
|
||||
|
||||
|
||||
# copy production dependencies and source code into final image
|
||||
FROM base AS release
|
||||
COPY --from=install /temp/prod/node_modules node_modules
|
||||
COPY --from=prerelease /usr/src/app/app.ts .
|
||||
COPY --from=prerelease /usr/src/app/package.json .
|
||||
|
||||
# run the app
|
||||
USER bun
|
||||
EXPOSE 1998/tcp
|
||||
ENTRYPOINT [ "bun", "run", "app.ts" ]
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Hocuspocus } from "@hocuspocus/server";
|
||||
|
||||
// Configure the server …
|
||||
const server = new Hocuspocus({
|
||||
port: 1998,
|
||||
});
|
||||
|
||||
// … and run it!
|
||||
server.listen();
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"name": "collaboration",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "app.ts",
|
||||
"scripts": {
|
||||
"dev": "bun app.ts",
|
||||
"start": "bun app.ts"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@hocuspocus/server": "^2.13.7",
|
||||
"bun": "^1.1.32",
|
||||
"typescript": "5.4.4",
|
||||
"y-protocols": "^1.0.6",
|
||||
"yjs": "^13.6.20"
|
||||
}
|
||||
}
|
||||
208
apps/collaboration/pnpm-lock.yaml
generated
208
apps/collaboration/pnpm-lock.yaml
generated
|
|
@ -1,208 +0,0 @@
|
|||
lockfileVersion: '9.0'
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@hocuspocus/server':
|
||||
specifier: ^2.13.7
|
||||
version: 2.13.7(y-protocols@1.0.6(yjs@13.6.20))(yjs@13.6.20)
|
||||
bun:
|
||||
specifier: ^1.1.32
|
||||
version: 1.1.32
|
||||
typescript:
|
||||
specifier: 5.4.4
|
||||
version: 5.4.4
|
||||
y-protocols:
|
||||
specifier: ^1.0.6
|
||||
version: 1.0.6(yjs@13.6.20)
|
||||
yjs:
|
||||
specifier: ^13.6.20
|
||||
version: 13.6.20
|
||||
|
||||
packages:
|
||||
|
||||
'@hocuspocus/common@2.13.7':
|
||||
resolution: {integrity: sha512-ROqYfW15XlAGd+qb/FVyp0zUC9Rosv7kdcck9LRMdfW3jT66wK9pDDWL2ily4Qj/zhbLCFtjAUPB4UKln/GYNQ==}
|
||||
|
||||
'@hocuspocus/server@2.13.7':
|
||||
resolution: {integrity: sha512-D9juGX9NZoKT9/Ty/HGhaimHJe71DyKbYssC831oetYF33x3WSYV6GY82RhHo9xjKZE6r0Le7jgxgQb+u08slw==}
|
||||
peerDependencies:
|
||||
y-protocols: ^1.0.6
|
||||
yjs: ^13.6.8
|
||||
|
||||
'@oven/bun-darwin-aarch64@1.1.32':
|
||||
resolution: {integrity: sha512-/5lu8RJB/iEoC9pzFOCZLCEmNsEI3DEEyxfItZpih/piNOFhCYmoMvm7mM0YXqSc7pfxYaKukEZEHGeIOiu/3Q==}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@oven/bun-darwin-x64-baseline@1.1.32':
|
||||
resolution: {integrity: sha512-XRP+APoLxrXznL7BEHipAdDu0Mn1RwD9PsaqFu1Be5Dbyi+2bYICuTiN1W9vfZNN3kK8eTyniT7kjwLSTcHbEg==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@oven/bun-darwin-x64@1.1.32':
|
||||
resolution: {integrity: sha512-Slk4QFHcqZ94mnNlzsCG/9m+gET0mpi13bfizRGv8QNRku8mQTs9brN5XvovYrP5t0rfaZDFMOoaOs6wk6rcDg==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@oven/bun-linux-aarch64@1.1.32':
|
||||
resolution: {integrity: sha512-7QdyRCiLHb1MuwDH7iir5xD6gTKWlvMGxvcQhbY/U1djqG/gft4+PaJrSJQcVhqRb143mrMNXIhTgc84O6htMw==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@oven/bun-linux-x64-baseline@1.1.32':
|
||||
resolution: {integrity: sha512-zvXOAUTc6cOlUR26NEwh3isV+z2EW4QxFiWoxgvM7eIuZMnZjV22+H+dEzVKJzV58XgfPX//fEPi3Xjg4xXdMA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@oven/bun-linux-x64@1.1.32':
|
||||
resolution: {integrity: sha512-JgsQ1ZXKmovQNzf4YdA3WDZVrtEbMlbL43Yjcczovy6lDrhSZkTu1GjzMm5JQnuqNwBC4/eSIgVL27J1Pj6nlA==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@oven/bun-windows-x64-baseline@1.1.32':
|
||||
resolution: {integrity: sha512-0DgP99AcBfKz3OCS5qO2/8e5TgNhBq8ZiNbPJzQaF4QOpS/Rt+mvFcQUa8x5gTOUPHH9ciaMz0IEs2Qv42eoAw==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@oven/bun-windows-x64@1.1.32':
|
||||
resolution: {integrity: sha512-grzRSH/9YIKWUHumygtG9Aen04wJv+v6lbmTvqsfcc/1/BJJFCLf+69EN3PINAIisih1hycxGa9eleVxjL0fqg==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
async-lock@1.4.1:
|
||||
resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}
|
||||
|
||||
bun@1.1.32:
|
||||
resolution: {integrity: sha512-W+UO0ihRmDHscmTfQAoPPaFLqLaloyBdAIr2iX70v3Vgo+7ZiKeyj7Aa4YDWStxQQmlzD5JP3NG/5TSWAK+1WQ==}
|
||||
cpu: [arm64, x64]
|
||||
os: [darwin, linux, win32]
|
||||
hasBin: true
|
||||
|
||||
isomorphic.js@0.2.5:
|
||||
resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
|
||||
|
||||
kleur@4.1.5:
|
||||
resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
|
||||
engines: {node: '>=6'}
|
||||
|
||||
lib0@0.2.98:
|
||||
resolution: {integrity: sha512-XteTiNO0qEXqqweWx+b21p/fBnNHUA1NwAtJNJek1oPrewEZs2uiT4gWivHKr9GqCjDPAhchz0UQO8NwU3bBNA==}
|
||||
engines: {node: '>=16'}
|
||||
hasBin: true
|
||||
|
||||
typescript@5.4.4:
|
||||
resolution: {integrity: sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==}
|
||||
engines: {node: '>=14.17'}
|
||||
hasBin: true
|
||||
|
||||
uuid@10.0.0:
|
||||
resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
|
||||
hasBin: true
|
||||
|
||||
ws@8.18.0:
|
||||
resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
|
||||
engines: {node: '>=10.0.0'}
|
||||
peerDependencies:
|
||||
bufferutil: ^4.0.1
|
||||
utf-8-validate: '>=5.0.2'
|
||||
peerDependenciesMeta:
|
||||
bufferutil:
|
||||
optional: true
|
||||
utf-8-validate:
|
||||
optional: true
|
||||
|
||||
y-protocols@1.0.6:
|
||||
resolution: {integrity: sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==}
|
||||
engines: {node: '>=16.0.0', npm: '>=8.0.0'}
|
||||
peerDependencies:
|
||||
yjs: ^13.0.0
|
||||
|
||||
yjs@13.6.20:
|
||||
resolution: {integrity: sha512-Z2YZI+SYqK7XdWlloI3lhMiKnCdFCVC4PchpdO+mCYwtiTwncjUbnRK9R1JmkNfdmHyDXuWN3ibJAt0wsqTbLQ==}
|
||||
engines: {node: '>=16.0.0', npm: '>=8.0.0'}
|
||||
|
||||
snapshots:
|
||||
|
||||
'@hocuspocus/common@2.13.7':
|
||||
dependencies:
|
||||
lib0: 0.2.98
|
||||
|
||||
'@hocuspocus/server@2.13.7(y-protocols@1.0.6(yjs@13.6.20))(yjs@13.6.20)':
|
||||
dependencies:
|
||||
'@hocuspocus/common': 2.13.7
|
||||
async-lock: 1.4.1
|
||||
kleur: 4.1.5
|
||||
lib0: 0.2.98
|
||||
uuid: 10.0.0
|
||||
ws: 8.18.0
|
||||
y-protocols: 1.0.6(yjs@13.6.20)
|
||||
yjs: 13.6.20
|
||||
transitivePeerDependencies:
|
||||
- bufferutil
|
||||
- utf-8-validate
|
||||
|
||||
'@oven/bun-darwin-aarch64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-darwin-x64-baseline@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-darwin-x64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-linux-aarch64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-linux-x64-baseline@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-linux-x64@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-windows-x64-baseline@1.1.32':
|
||||
optional: true
|
||||
|
||||
'@oven/bun-windows-x64@1.1.32':
|
||||
optional: true
|
||||
|
||||
async-lock@1.4.1: {}
|
||||
|
||||
bun@1.1.32:
|
||||
optionalDependencies:
|
||||
'@oven/bun-darwin-aarch64': 1.1.32
|
||||
'@oven/bun-darwin-x64': 1.1.32
|
||||
'@oven/bun-darwin-x64-baseline': 1.1.32
|
||||
'@oven/bun-linux-aarch64': 1.1.32
|
||||
'@oven/bun-linux-x64': 1.1.32
|
||||
'@oven/bun-linux-x64-baseline': 1.1.32
|
||||
'@oven/bun-windows-x64': 1.1.32
|
||||
'@oven/bun-windows-x64-baseline': 1.1.32
|
||||
|
||||
isomorphic.js@0.2.5: {}
|
||||
|
||||
kleur@4.1.5: {}
|
||||
|
||||
lib0@0.2.98:
|
||||
dependencies:
|
||||
isomorphic.js: 0.2.5
|
||||
|
||||
typescript@5.4.4: {}
|
||||
|
||||
uuid@10.0.0: {}
|
||||
|
||||
ws@8.18.0: {}
|
||||
|
||||
y-protocols@1.0.6(yjs@13.6.20):
|
||||
dependencies:
|
||||
lib0: 0.2.98
|
||||
yjs: 13.6.20
|
||||
|
||||
yjs@13.6.20:
|
||||
dependencies:
|
||||
lib0: 0.2.98
|
||||
|
|
@ -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;
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@emoji-mart/react": "^1.1.1",
|
||||
"@hocuspocus/provider": "^2.13.7",
|
||||
"@icons-pack/react-simple-icons": "^10.1.0",
|
||||
"@radix-ui/colors": "^0.1.9",
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.0",
|
||||
|
|
@ -34,8 +33,6 @@
|
|||
"@tanstack/react-table": "^8.20.5",
|
||||
"@tiptap/core": "^2.9.1",
|
||||
"@tiptap/extension-code-block-lowlight": "^2.9.1",
|
||||
"@tiptap/extension-collaboration": "^2.9.1",
|
||||
"@tiptap/extension-collaboration-cursor": "^2.9.1",
|
||||
"@tiptap/extension-table": "^2.9.1",
|
||||
"@tiptap/extension-table-cell": "^2.9.1",
|
||||
"@tiptap/extension-table-header": "^2.9.1",
|
||||
|
|
@ -63,7 +60,6 @@
|
|||
"next": "14.2.15",
|
||||
"next-auth": "^4.24.10",
|
||||
"nextjs-toploader": "^1.6.12",
|
||||
"prosemirror-state": "^1.4.3",
|
||||
"randomcolor": "^0.6.2",
|
||||
"re-resizable": "^6.10.0",
|
||||
"react": "^18.3.1",
|
||||
|
|
@ -83,10 +79,6 @@
|
|||
"unsplash-js": "^7.0.19",
|
||||
"usehooks-ts": "^3.1.0",
|
||||
"uuid": "^9.0.1",
|
||||
"y-indexeddb": "^9.0.12",
|
||||
"y-prosemirror": "^1.2.12",
|
||||
"y-webrtc": "^10.3.0",
|
||||
"yjs": "^13.6.20",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ export const LEARNHOUSE_BACKEND_URL = `${process.env.NEXT_PUBLIC_LEARNHOUSE_BACK
|
|||
export const LEARNHOUSE_DOMAIN = process.env.NEXT_PUBLIC_LEARNHOUSE_DOMAIN
|
||||
export const LEARNHOUSE_TOP_DOMAIN =
|
||||
process.env.NEXT_PUBLIC_LEARNHOUSE_TOP_DOMAIN
|
||||
export const LEARNHOUSE_COLLABORATION_WS_URL =
|
||||
process.env.NEXT_PUBLIC_LEARNHOUSE_COLLABORATION_WS_URL
|
||||
|
||||
export const getAPIUrl = () => LEARNHOUSE_API_URL
|
||||
export const getBackendUrl = () => LEARNHOUSE_BACKEND_URL
|
||||
|
|
|
|||
|
|
@ -13,10 +13,6 @@ services:
|
|||
condition: service_healthy
|
||||
redis:
|
||||
condition: service_healthy
|
||||
collaboration:
|
||||
build: apps/collaboration/.
|
||||
ports:
|
||||
- "1998:1998"
|
||||
db:
|
||||
image: postgres:16-alpine
|
||||
restart: always
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue