@@ -127,10 +114,6 @@ SpriteSelectorItem.propTypes = {
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
preventContextMenu: PropTypes.bool,
- presenceUsers: PropTypes.arrayOf(PropTypes.shape({
- color: PropTypes.string,
- username: PropTypes.string
- })),
selected: PropTypes.bool.isRequired
};
diff --git a/src/components/sprite-selector/sprite-list.jsx b/src/components/sprite-selector/sprite-list.jsx
index 490b86503..fe2854a3d 100644
--- a/src/components/sprite-selector/sprite-list.jsx
+++ b/src/components/sprite-selector/sprite-list.jsx
@@ -28,7 +28,6 @@ const SpriteList = function (props) {
onAddSortable,
onRemoveSortable,
ordering,
- presenceUsers,
raised,
selectedId,
items
@@ -90,7 +89,6 @@ const SpriteList = function (props) {
index={index}
key={sprite.id}
name={sprite.name}
- presenceUsers={presenceUsers ? presenceUsers[sprite.id] : null}
selected={sprite.id === selectedId}
onClick={onSelectSprite}
onDeleteButtonClick={onDeleteSprite}
@@ -127,10 +125,6 @@ SpriteList.propTypes = {
order: PropTypes.number.isRequired
})),
onAddSortable: PropTypes.func,
- presenceUsers: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.shape({
- color: PropTypes.string,
- username: PropTypes.string
- }))),
onDeleteSprite: PropTypes.func,
onDuplicateSprite: PropTypes.func,
onExportSprite: PropTypes.func,
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 302ae245c..9ae811d5b 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -62,7 +62,6 @@ const SpriteSelectorComponent = function (props) {
onSelectSprite,
onSpriteUpload,
onSurpriseSpriteClick,
- presenceUsers,
raised,
selectedId,
spriteFileInput,
@@ -105,7 +104,6 @@ const SpriteSelectorComponent = function (props) {
editingTarget={editingTarget}
hoveredTarget={hoveredTarget}
items={Object.keys(sprites).map(id => sprites[id])}
- presenceUsers={presenceUsers}
raised={raised}
selectedId={selectedId}
onDeleteSprite={onDeleteSprite}
@@ -172,10 +170,6 @@ SpriteSelectorComponent.propTypes = {
onSelectSprite: PropTypes.func,
onSpriteUpload: PropTypes.func,
onSurpriseSpriteClick: PropTypes.func,
- presenceUsers: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.shape({
- color: PropTypes.string,
- username: PropTypes.string
- }))),
raised: PropTypes.bool,
selectedId: PropTypes.string,
spriteFileInput: PropTypes.func,
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 87340b84a..1bdcd2760 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -27,7 +27,6 @@ const StageComponent = props => {
isRtl,
colorInfo,
micIndicator,
- presenceCursors,
question,
stageSize,
vm,
@@ -95,7 +94,6 @@ const StageComponent = props => {
stageWidth={stageDimensions.width}
/>
- {presenceCursors || null}
{isColorPicking && colorInfo ? (
) : null}
diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index da671467d..68fb7f58d 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/src/components/target-pane/target-pane.jsx
@@ -40,7 +40,6 @@ const TargetPane = ({
onSelectSprite,
onSpriteUpload,
onSurpriseSpriteClick,
- presenceUsers,
raiseSprites,
stage,
stageSize,
@@ -56,7 +55,6 @@ const TargetPane = ({
{
@@ -878,15 +794,7 @@ class Blocks extends React.Component {
componentRef={this.setBlocks}
onDrop={this.handleDrop}
{...props}
- >
-
-
+ />
{this.state.prompt ? (
= 0 && y >= 0 && x <= rect.width && y <= rect.height;
- const current = session.presence.local.cursor;
- if (inside) {
- session.presence.update({
- cursor: {
- surface: 'stage',
- x: x / rect.width,
- y: y / rect.height
- }
- });
- } else if (current && current.surface === 'stage') {
- session.presence.update({cursor: null});
- }
- }
- onMouseLeave () {
- const session = this.props.vm.dashCollaboration;
- if (!session || !session.presence) return;
- const current = session.presence.local.cursor;
- if (current && current.surface === 'stage') {
- session.presence.update({cursor: null});
- }
- }
onMouseUp (e) {
const {x, y} = getEventXY(e);
const mousePosition = [x - this.rect.left, y - this.rect.top];
@@ -492,10 +460,6 @@ class Stage extends React.Component {
overlay={this.props.vm.runtime.renderer.overlayContainer}
colorInfo={this.state.colorInfo}
dragRef={this.setDragCanvas}
- presenceCursors={}
question={this.state.question}
onDoubleClick={this.handleDoubleClick}
onQuestionAnswered={this.handleQuestionAnswered}
diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx
index 29ad91991..255ac4733 100644
--- a/src/containers/target-pane.jsx
+++ b/src/containers/target-pane.jsx
@@ -23,7 +23,6 @@ import {fetchSprite, fetchCode} from '../lib/backpack-api';
import randomizeSpritePosition from '../lib/randomize-sprite-position';
import downloadBlob from '../lib/download-blob';
import log from '../lib/log';
-import {listenPresence} from '../lib/dash-presence.js';
import {placeInViewport} from '../lib/backpack/code-payload.js';
class TargetPane extends React.Component {
@@ -49,45 +48,14 @@ class TargetPane extends React.Component {
'handlePaintSpriteClick',
'handleFileUploadClick',
'handleSpriteUpload',
- 'handlePresenceChange',
'setFileInput'
]);
}
componentDidMount () {
this.props.vm.addListener('BLOCK_DRAG_END', this.handleBlockDragEnd);
- this.detachPresence = listenPresence(this.props.vm, this.handlePresenceChange);
- this.publishPresenceSelection();
- }
- componentDidUpdate (prevProps) {
- if (prevProps.editingTarget !== this.props.editingTarget) {
- this.publishPresenceSelection();
- }
}
componentWillUnmount () {
this.props.vm.removeListener('BLOCK_DRAG_END', this.handleBlockDragEnd);
- if (this.detachPresence) this.detachPresence();
- }
- handlePresenceChange () {
- this.forceUpdate();
- }
- publishPresenceSelection () {
- const session = this.props.vm.dashCollaboration;
- if (session && session.presence) {
- session.presence.update({targetId: this.props.editingTarget || null});
- }
- }
- getPresenceUsersByTarget () {
- const session = this.props.vm.dashCollaboration;
- const presence = session && session.presence;
- const byTarget = {};
- if (!presence) return byTarget;
- for (const peer of presence.getPeers()) {
- const targetId = peer.state.targetId;
- if (!targetId) continue;
- if (!byTarget[targetId]) byTarget[targetId] = [];
- byTarget[targetId].push({color: peer.color, username: peer.username});
- }
- return byTarget;
}
handleChangeSpriteDirection (direction) {
if (!this.props.vm.canEditCollaboration()) return;
@@ -286,7 +254,6 @@ class TargetPane extends React.Component {
{
- let chat = null;
- let unsubscribe = null;
- const attach = () => {
- const next = (vm.dashCollaboration && vm.dashCollaboration.chat) || null;
- if (next === chat) return;
- if (unsubscribe) {
- unsubscribe();
- unsubscribe = null;
- }
- chat = next;
- if (chat) unsubscribe = chat.subscribe(onChange);
- onChange();
- };
- const onStatus = () => attach();
- vm.on('DASH_COLLABORATION_STATUS', onStatus);
- attach();
- return () => {
- vm.removeListener('DASH_COLLABORATION_STATUS', onStatus);
- if (unsubscribe) unsubscribe();
- };
-};
-
-class DashChat {
- constructor () {
- this.messages = [];
- this.listeners = new Set();
- this.unread = 0;
- this.lastMention = null;
- this.selfUserId = null;
- this.selfUsername = null;
- this.send = null;
- this.notifyTimer = null;
- }
- /**
- * Wire this chat to a collaboration client.
- * @param {DashCollaboration} client active collaboration transport
- */
- bind (client) {
- this.send = message => client.sendChat(message);
- client.onChat = message => this.receive(message);
- client.onChatHistory = messages => this.setHistory(messages);
- }
- setSelf (userId, username) {
- this.selfUserId = userId || null;
- this.selfUsername = username || null;
- }
- setHistory (messages) {
- const history = messages
- .filter(message => message && typeof message === 'object' &&
- typeof message.id === 'string' && typeof message.text === 'string' &&
- message.text.length <= MAX_TEXT && Number.isFinite(message.ts))
- .slice(-MAX_MESSAGES);
- this.messages = history;
- this.scheduleNotify();
- }
- receive (message) {
- if (!message || typeof message !== 'object') return;
- if (this.messages.some(existing => existing.id === message.id)) return;
- this.messages = [...this.messages, message].slice(-MAX_MESSAGES);
- const fromSelf = message.userId === this.selfUserId;
- if (!fromSelf && this.selfUsername &&
- typeof message.text === 'string' &&
- message.text.toLowerCase().includes(`@${this.selfUsername.toLowerCase()}`)) {
- this.unread++;
- this.lastMention = message;
- }
- this.scheduleNotify();
- }
- /**
- * Send a chat message from the local user.
- * @param {string} text message text (1-500 characters, may contain emoji)
- * @param {?object} pin optional pin context {type, targetId, blockId, name}
- * @returns {boolean} whether the message was handed to the transport
- */
- sendText (text, pin = null) {
- const value = typeof text === 'string' ? text : '';
- if (!value.trim().length || value.length > MAX_TEXT) return false;
- if (!this.send) return false;
- this.send({text: value, pin});
- return true;
- }
- markRead () {
- if (!this.unread && !this.lastMention) return;
- this.unread = 0;
- this.lastMention = null;
- this.scheduleNotify();
- }
- subscribe (listener) {
- this.listeners.add(listener);
- return () => this.listeners.delete(listener);
- }
- scheduleNotify () {
- if (this.notifyTimer) return;
- this.notifyTimer = setTimeout(() => {
- this.notifyTimer = null;
- for (const listener of [...this.listeners]) listener();
- }, 30);
- }
- destroy () {
- clearTimeout(this.notifyTimer);
- this.listeners.clear();
- this.messages = [];
- }
-}
-
-export {DashChat as default, listenDashChat, MAX_TEXT};
diff --git a/src/lib/dash-collaboration-session.js b/src/lib/dash-collaboration-session.js
index 044b5522e..09a7e5d52 100644
--- a/src/lib/dash-collaboration-session.js
+++ b/src/lib/dash-collaboration-session.js
@@ -2,8 +2,6 @@ import * as Y from 'yjs';
import JSZip from 'jszip';
import AddonHooks from '../addons/hooks';
import DashCollaboration from './dash-collaboration';
-import DashPresence from './dash-presence';
-import DashChat from './dash-chat';
const maps = ['blocks', 'variables', 'lists', 'broadcasts', 'comments'];
const blockStructureFields = ['opcode', 'next', 'parent', 'inputs', 'shadow', 'mutation'];
@@ -232,8 +230,6 @@ export default class DashCollaborationSession {
this.uploadedAssets = new Set();
this.extensionReferences = new Map();
this.extensionSources = new Map();
- this.presence = new DashPresence();
- this.chat = new DashChat();
this.installOperationTracking();
this.onLocalChange = () => {
if (this.applying || !this.loaded || this.disposed) return;
@@ -261,7 +257,6 @@ export default class DashCollaborationSession {
this.state = status.state;
this.error = status.error;
if (status.state === 'connected') {
- this.presence.setSelf(client.connectionId, client.userId);
if (this.resolveReady) this.resolveReady();
if (this.restoreOnReconnect) {
this.restoreAfterReconnect().catch(error => this.fail(error));
@@ -276,16 +271,10 @@ export default class DashCollaborationSession {
},
onMembers: members => {
this.members = members;
- this.presence.setMembers(members);
- const me = members.find(member => member.userId === client.userId &&
- (!client.connectionId || member.connectionId === client.connectionId));
- if (me) this.chat.setSelf(me.userId, me.username);
this.notify();
}
});
client.doc.on('update', this.onDocumentChange);
- this.presence.bind(client);
- this.chat.bind(client);
return client;
}
notify () {
@@ -743,8 +732,6 @@ export default class DashCollaborationSession {
}
this.client.doc.off('update', this.onDocumentChange);
this.client.destroy();
- this.presence.destroy();
- this.chat.destroy();
window.removeEventListener('beforeunload', this.beforeUnload);
}
}
diff --git a/src/lib/dash-collaboration.js b/src/lib/dash-collaboration.js
index 1c44cb6e5..e351b51c6 100644
--- a/src/lib/dash-collaboration.js
+++ b/src/lib/dash-collaboration.js
@@ -29,16 +29,12 @@ const projectTargetAssets = target => {
};
export default class DashCollaboration {
- constructor (projectId, {onStatus = () => {}, onMembers = () => {}, onPresence = () => {},
- onChat = () => {}, onChatHistory = () => {}} = {}) {
+ constructor (projectId, {onStatus = () => {}, onMembers = () => {}} = {}) {
if (!/^[1-9]\d{0,19}$/.test(String(projectId))) throw new Error('Invalid Dash project ID');
this.projectId = String(projectId);
this.doc = new Y.Doc();
this.onStatus = onStatus;
this.onMembers = onMembers;
- this.onPresence = onPresence;
- this.onChat = onChat;
- this.onChatHistory = onChatHistory;
this.active = false;
this.generation = 0;
this.attempts = 0;
@@ -48,8 +44,6 @@ export default class DashCollaboration {
this.epoch = null;
this.grantId = null;
this.userId = null;
- this.connectionId = null;
- this.features = new Set();
this.pending = null;
this.queued = null;
this.handleUpdate = this.handleUpdate.bind(this);
@@ -96,7 +90,7 @@ export default class DashCollaboration {
}, 10000);
ws.onopen = () => {
if (!this.active || generation !== this.generation) return ws.close();
- ws.send(JSON.stringify({type: 'auth', token: data.token, features: ['presence', 'chat']}));
+ ws.send(JSON.stringify({type: 'auth', token: data.token}));
};
ws.onmessage = event => {
if (!this.active || generation !== this.generation) return;
@@ -146,9 +140,6 @@ export default class DashCollaboration {
throw new Error('Room or permissions changed. Reopen the project before reconnecting.');
}
this.userId = message.userId;
- this.connectionId = typeof message.connectionId === 'string' ? message.connectionId : null;
- this.features = new Set(Array.isArray(message.features) ?
- message.features.filter(feature => feature === 'presence' || feature === 'chat') : []);
this.epoch = message.epoch;
this.grantId = message.grantId;
this.role = message.role;
@@ -169,24 +160,6 @@ export default class DashCollaboration {
}
} else if (message.type === 'members') {
this.onMembers(message.members);
- } else if (message.type === 'presence') {
- if (!message || typeof message.state !== 'object' || message.state === null ||
- Array.isArray(message.state) ||
- (typeof message.connectionId !== 'string' && typeof message.userId !== 'string')) {
- return;
- }
- this.onPresence(message);
- } else if (message.type === 'chat') {
- if (!message.message || typeof message.message !== 'object' ||
- typeof message.message.id !== 'string' || typeof message.message.userId !== 'string' ||
- typeof message.message.username !== 'string' || typeof message.message.text !== 'string' ||
- !Number.isFinite(message.message.ts)) {
- return;
- }
- this.onChat(message.message);
- } else if (message.type === 'chat-history') {
- if (!Array.isArray(message.messages)) return;
- this.onChatHistory(message.messages.slice(-200));
} else {
throw new Error('Unknown collaboration message');
}
@@ -203,36 +176,6 @@ export default class DashCollaboration {
}
return btoa(binary);
}
- /**
- * Broadcast ephemeral presence state (cursor, selection) to other
- * participants. Best-effort: never queued, never persisted, allowed for
- * viewers. Dropped silently when the connection is busy or closed.
- * @param {object} state small JSON-serializable presence payload
- */
- sendPresence (state) {
- if (!this.active || this.state !== 'connected' || !this.features.has('presence') || !this.socket ||
- this.socket.readyState !== WebSocket.OPEN) return;
- if (this.socket.bufferedAmount > 64 * 1024) return;
- try {
- this.socket.send(JSON.stringify({type: 'presence', state}));
- } catch (error) {
- // Presence is optional; ignore transport errors.
- }
- }
- /**
- * Send a chat message to the collaboration room. Delivered to all
- * participants (including viewers) and kept as room history on the server.
- * @param {{text: string, pin: ?object}} message chat message body
- */
- sendChat (message) {
- if (!this.active || this.state !== 'connected' || !this.features.has('chat') || !this.socket ||
- this.socket.readyState !== WebSocket.OPEN) return;
- try {
- this.socket.send(JSON.stringify({type: 'chat', text: message.text, pin: message.pin || null}));
- } catch (error) {
- // Chat is optional; ignore transport errors.
- }
- }
change (operation) {
if (this.state !== 'connected' || this.role === 'viewer') throw new Error('Collaboration is not writable');
this.doc.transact(() => operation(this.doc));
@@ -352,7 +295,6 @@ export default class DashCollaboration {
if (this.controller) this.controller.abort();
if (this.socket) this.socket.close();
this.socket = null;
- this.features = new Set();
this.onMembers([]);
this.setStatus('disconnected');
}
diff --git a/src/lib/dash-presence.js b/src/lib/dash-presence.js
deleted file mode 100644
index 172afb094..000000000
--- a/src/lib/dash-presence.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * Ephemeral presence state for Dash live-collaboration sessions.
- * Tracks where each participant's cursor is (stage / blocks workspace), which
- * sprite they have open, and which block they are dragging. State is relayed
- * over the collaboration WebSocket as best-effort "presence" messages (never
- * written to the persistent Yjs document), so viewers can share presence too.
- */
-
-const PEER_TTL = 12000;
-const SEND_INTERVAL = 80;
-const NOTIFY_INTERVAL = 50;
-
-/**
- * Stable per-user color so cursors and avatars keep the same color over time.
- * @param {string} idString user id, connection id or similar stable identifier
- * @returns {string} CSS color
- */
-const presenceColor = idString => {
- let hash = 0;
- const value = String(idString);
- for (let i = 0; i < value.length; i++) {
- hash = ((hash << 5) - hash + value.charCodeAt(i)) | 0;
- }
- return `hsl(${Math.abs(hash) % 360}, 72%, 50%)`;
-};
-
-const sameValue = (a, b) => JSON.stringify(a) === JSON.stringify(b);
-
-/**
- * Subscribe a component to presence/session changes of a VM.
- * Re-attaches automatically when a collaboration session starts or ends.
- * @param {VirtualMachine} vm the VM owning the collaboration session
- * @param {function} onChange called when presence data may have changed
- * @returns {function} detach listener
- */
-const listenPresence = (vm, onChange) => {
- let presence = null;
- let unsubscribe = null;
- const attach = () => {
- const next = (vm.dashCollaboration && vm.dashCollaboration.presence) || null;
- if (next === presence) return;
- if (unsubscribe) {
- unsubscribe();
- unsubscribe = null;
- }
- presence = next;
- if (presence) unsubscribe = presence.subscribe(onChange);
- onChange();
- };
- const onStatus = () => attach();
- vm.on('DASH_COLLABORATION_STATUS', onStatus);
- attach();
- return () => {
- vm.removeListener('DASH_COLLABORATION_STATUS', onStatus);
- if (unsubscribe) unsubscribe();
- };
-};
-
-class DashPresence {
- constructor () {
- this.peers = new Map();
- this.listeners = new Set();
- this.local = {
- cursor: null,
- targetId: null,
- dragging: null
- };
- this.members = [];
- this.selfId = null;
- this.selfUserId = null;
- this.send = null;
- this.sendTimer = null;
- this.notifyTimer = null;
- this.pruneTimer = setInterval(() => this.prune(), 3000);
- }
- /**
- * Wire this presence channel to a collaboration client.
- * @param {DashCollaboration} client active collaboration transport
- */
- bind (client) {
- this.send = state => client.sendPresence(state);
- client.onPresence = message => this.receive(message);
- }
- setSelf (connectionId, userId) {
- this.selfId = connectionId || userId || null;
- this.selfUserId = userId || null;
- }
- setMembers (members) {
- this.members = Array.isArray(members) ? members : [];
- let changed = false;
- for (const [key, peer] of [...this.peers]) {
- const alive = this.members.some(member => (member.connectionId || member.userId) === key);
- if (!alive) {
- this.peers.delete(key);
- changed = true;
- }
- }
- if (changed) this.scheduleNotify();
- }
- /**
- * Publish a patch of the local presence state.
- * @param {{cursor: ?object, targetId: ?string, dragging: ?string}} patch partial local state
- */
- update (patch) {
- let changed = false;
- for (const key of Object.keys(patch)) {
- if (!sameValue(this.local[key], patch[key])) {
- this.local[key] = patch[key];
- changed = true;
- }
- }
- if (!changed) return;
- this.scheduleSend();
- this.scheduleNotify();
- }
- scheduleSend () {
- if (this.sendTimer) return;
- this.sendTimer = setTimeout(() => {
- this.sendTimer = null;
- if (this.send) this.send({...this.local});
- }, SEND_INTERVAL);
- }
- receive (message) {
- if (!message || typeof message !== 'object') return;
- const key = message.connectionId || message.userId;
- if (typeof key !== 'string' || !key) return;
- if (key === this.selfId) return;
- if (!this.selfId && this.selfUserId && message.userId === this.selfUserId) return;
- const state = message.state && typeof message.state === 'object' && !Array.isArray(message.state) ?
- message.state : {};
- this.peers.set(key, {
- id: key,
- userId: typeof message.userId === 'string' ? message.userId : '',
- username: typeof message.username === 'string' && message.username ? message.username : '...',
- color: presenceColor(key),
- state,
- seen: Date.now()
- });
- this.scheduleNotify();
- }
- prune () {
- const now = Date.now();
- let changed = false;
- for (const [key, peer] of [...this.peers]) {
- if (now - peer.seen > PEER_TTL) {
- this.peers.delete(key);
- changed = true;
- }
- }
- if (changed) this.scheduleNotify();
- }
- getPeers () {
- return [...this.peers.values()];
- }
- getMembers () {
- return this.members;
- }
- subscribe (listener) {
- this.listeners.add(listener);
- return () => this.listeners.delete(listener);
- }
- scheduleNotify () {
- if (this.notifyTimer) return;
- this.notifyTimer = setTimeout(() => {
- this.notifyTimer = null;
- for (const listener of [...this.listeners]) listener();
- }, NOTIFY_INTERVAL);
- }
- reset () {
- this.peers.clear();
- this.local = {
- cursor: null,
- targetId: null,
- dragging: null
- };
- this.scheduleNotify();
- }
- destroy () {
- clearInterval(this.pruneTimer);
- clearTimeout(this.sendTimer);
- clearTimeout(this.notifyTimer);
- this.listeners.clear();
- this.peers.clear();
- }
-}
-
-export {DashPresence as default, presenceColor, listenPresence};