@sequent-org/moodboard 1.4.58 → 1.4.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.58",
+  "version": "1.4.59",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/ApiClient.js

@@ -241,7 +241,30 @@ export class ApiClient {
                 }
                 return cleanedObj;
             }
-            
+
+            if (obj.type === 'video') {
+                const topSrcRaw = typeof obj.src === 'string' ? obj.src : '';
+                const propSrcRaw = typeof obj.properties?.src === 'string' ? obj.properties.src : '';
+                const normalizedSrc = topSrcRaw.trim() || propSrcRaw.trim();
+
+                if (!normalizedSrc) {
+                    throw new Error(`Video object "${obj.id || 'unknown'}" has no src. Save is blocked.`);
+                }
+                if (/^data:/i.test(normalizedSrc) || /^blob:/i.test(normalizedSrc)) {
+                    throw new Error(`Video object "${obj.id || 'unknown'}" contains forbidden data/blob src. Save is blocked.`);
+                }
+
+                const cleanedObj = {
+                    ...obj,
+                    src: normalizedSrc
+                };
+                if (cleanedObj.properties?.src) {
+                    cleanedObj.properties = { ...cleanedObj.properties };
+                    delete cleanedObj.properties.src;
+                }
+                return cleanedObj;
+            }
+
             return obj;
         });
 
@@ -296,7 +319,23 @@ export class ApiClient {
                     }
                     return restoredObj;
                 }
-                
+
+                if (obj.type === 'video') {
+                    const topSrc = typeof obj.src === 'string' ? obj.src.trim() : '';
+                    const propSrc = typeof obj.properties?.src === 'string' ? obj.properties.src.trim() : '';
+                    const normalizedSrc = topSrc || propSrc;
+                    if (!normalizedSrc) return obj;
+                    const restoredObj = {
+                        ...obj,
+                        src: normalizedSrc
+                    };
+                    if (restoredObj.properties?.src) {
+                        restoredObj.properties = { ...restoredObj.properties };
+                        delete restoredObj.properties.src;
+                    }
+                    return restoredObj;
+                }
+
                 return obj;
             })
         );

package/src/core/PixiEngine.js

@@ -248,7 +248,16 @@ export class PixiEngine {
         const pixiObject = this.objects.get(objectId);
         if (pixiObject) {
             console.log('🗑️ PixiEngine: удаляем объект из сцены:', objectId);
-            
+
+            // Видео: останавливаем HTMLVideoElement и снимаем listeners до уничтожения
+            // спрайта. Без этого видео продолжает играть и тикать текстуру — утечка.
+            // Хук сужен до 'video', чтобы не задеть destroy() фреймов/коннекторов,
+            // у которых контейнер уничтожается общим путём ниже (иначе двойной destroy).
+            const mbMeta = pixiObject._mb;
+            if (mbMeta?.type === 'video' && typeof mbMeta.instance?.destroy === 'function') {
+                try { mbMeta.instance.destroy(); } catch (_) {}
+            }
+
             // Удаляем из родительского контейнера
             if (this.worldLayer) {
                 this.worldLayer.removeChild(pixiObject);

package/src/core/events/Events.js

@@ -63,6 +63,7 @@ export const Events = {
 		PasteAt: 'ui:paste-at',
         PasteImage: 'ui:paste-image',
         PasteImageAt: 'ui:paste-image-at',
+        PasteVideoAt: 'ui:paste-video-at',
 		ZoomIn: 'ui:zoom:in',
 		ZoomOut: 'ui:zoom:out',
 		ZoomReset: 'ui:zoom:reset',

package/src/core/flows/ClipboardFlow.js

@@ -380,6 +380,54 @@ export function setupClipboardFlow(core) {
         }
     });
 
+    core.eventBus.on(Events.UI.PasteVideoAt, ({ x, y, src, mimeType, poster, aiMessageId, skipUpload = true }) => {
+        if (!src) return;
+        const world = core.pixi.worldLayer || core.pixi.app.stage;
+        const s = world?.scale?.x || 1;
+        const worldX = (x - (world?.x || 0)) / s;
+        const worldY = (y - (world?.y || 0)) / s;
+
+        const placeVideo = (natW, natH) => {
+            const ar = (natW > 0 && natH > 0) ? natW / natH : (16 / 9);
+            const w = 300;
+            const h = Math.max(1, Math.round(w / ar));
+            const created = core.createObject(
+                'video',
+                { x: Math.round(worldX - Math.round(w / 2)), y: Math.round(worldY - Math.round(h / 2)) },
+                {
+                    src,
+                    width: w,
+                    height: h,
+                    mimeType: mimeType || 'video/mp4',
+                    poster: poster || null,
+                    loop: true,
+                    muted: true,
+                    ...(aiMessageId ? { aiMessageId } : {})
+                }
+            );
+            // Видео не проходит через SaveManager до подтверждения — раскрываем сразу,
+            // как для AI-картинок и 3D-скринов.
+            if (skipUpload && created?.id) {
+                core._pendingPersistAckVisibilityIds?.delete(created.id);
+                core._setObjectVisibility?.(created.id, true);
+            }
+        };
+
+        // Узнаём натуральные пропорции из метаданных видео (для aspect-ratio).
+        try {
+            const probe = document.createElement('video');
+            probe.preload = 'metadata';
+            probe.muted = true;
+            probe.addEventListener('loadedmetadata', () => {
+                placeVideo(probe.videoWidth || 0, probe.videoHeight || 0);
+            }, { once: true });
+            probe.addEventListener('error', () => placeVideo(0, 0), { once: true });
+            probe.src = src;
+        } catch (_) {
+            placeVideo(0, 0);
+        }
+    });
+
     core.eventBus.on(Events.Tool.DuplicateRequest, (data) => {
         const { originalId, position } = data || {};
         if (!originalId) return;

package/src/objects/ObjectFactory.js

@@ -4,6 +4,7 @@ import { DrawingObject } from './DrawingObject.js';
 import { TextObject } from './TextObject.js';
 import { EmojiObject } from './EmojiObject.js';
 import { ImageObject } from './ImageObject.js';
+import { VideoObject } from './VideoObject.js';
 import { RevitScreenshotImageObject } from './RevitScreenshotImageObject.js';
 import { Model3dScreenshotImageObject } from './Model3dScreenshotImageObject.js';
 import { CommentObject } from './CommentObject.js';
@@ -25,6 +26,7 @@ export class ObjectFactory {
         ['simple-text', TextObject],
         ['emoji', EmojiObject],
         ['image', ImageObject],
+        ['video', VideoObject],
         ['revit-screenshot-img', RevitScreenshotImageObject],
         ['model3d-screenshot-img', Model3dScreenshotImageObject],
         ['comment', CommentObject],

package/src/objects/VideoObject.js

@@ -0,0 +1,171 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * VideoObject — отображение видео как спрайт с видео-текстурой.
+ *
+ * MVP: спрайт с muted-видео, клик по телу переключает play/pause.
+ * Трансформации (resize/rotate/move/z-order) переиспользуют конвейер ImageObject:
+ * единственный display-object — Sprite с anchor(0.5).
+ */
+export class VideoObject {
+    constructor(objectData = {}) {
+        this.objectData = objectData;
+        let src = objectData.src || objectData.properties?.src;
+        // blob: недолговечны — не используем (ERR_FILE_NOT_FOUND после перезагрузки)
+        if (typeof src === 'string' && src.startsWith('blob:')) {
+            src = null;
+        }
+        this.src = src;
+        this.width = Math.max(1, Math.round(objectData.width || objectData.properties?.width || 300));
+        this.height = Math.max(1, Math.round(objectData.height || objectData.properties?.height || 169));
+
+        this.videoEl = null;
+        let texture = PIXI.Texture.WHITE;
+        if (src) {
+            const video = document.createElement('video');
+            video.src = src;
+            video.muted = true;
+            video.loop = objectData.properties?.loop ?? true;
+            video.playsInline = true;
+            video.crossOrigin = 'anonymous';
+            video.preload = 'auto';
+            this.videoEl = video;
+            // autoPlay:false — стартуем на паузе, первый кадр показываем после loadeddata
+            texture = PIXI.Texture.from(video, { resourceOptions: { autoPlay: false } });
+        }
+
+        this.sprite = new PIXI.Sprite(texture);
+        this.sprite.anchor.set(0.5, 0.5);
+        if (!src) {
+            this.sprite.tint = 0xcccccc;
+        }
+
+        this._fitToSize = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            this.sprite._mb = {
+                ...(this.sprite._mb || {}),
+                type: this.objectData?.type || 'video',
+                properties: {
+                    ...((this.sprite._mb || {}).properties || {}),
+                    src,
+                    baseW: texW,
+                    baseH: texH
+                }
+            };
+            this.sprite.scale.set(this.width / texW, this.height / texH);
+        };
+
+        const onError = () => {
+            this.sprite.texture = PIXI.Texture.WHITE;
+            this.sprite.tint = 0xcccccc;
+            this._fitToSize();
+        };
+
+        if (this.videoEl) {
+            // Показать первый кадр на паузе: после loadeddata толкнуть кадр в GPU
+            this.videoEl.addEventListener('loadeddata', () => {
+                try { this.sprite.texture.update(); } catch (_) {}
+                this._fitToSize();
+            }, { once: true });
+            this.videoEl.addEventListener('error', onError, { once: true });
+        }
+
+        if (this.sprite.texture.baseTexture?.valid) {
+            this._fitToSize();
+        } else if (this.sprite.texture.baseTexture) {
+            this.sprite.texture.baseTexture.once('loaded', this._fitToSize);
+        }
+
+        this._setupPlaybackToggle();
+    }
+
+    /**
+     * Клик по телу видео (без перетаскивания) переключает play/pause.
+     * Порог движения отсекает drag, чтобы перемещение не триггерило тоггл.
+     */
+    _setupPlaybackToggle() {
+        this.sprite.eventMode = 'static';
+        let down = null;
+        this._onDown = (e) => { down = { x: e.global.x, y: e.global.y }; };
+        this._onUp = (e) => {
+            if (!down) return;
+            const dx = e.global.x - down.x;
+            const dy = e.global.y - down.y;
+            down = null;
+            if (Math.hypot(dx, dy) < 5) {
+                this.toggle();
+            }
+        };
+        this.sprite.on('pointerdown', this._onDown);
+        this.sprite.on('pointerup', this._onUp);
+        this.sprite.on('pointerupoutside', () => { down = null; });
+    }
+
+    play() {
+        if (!this.videoEl) return;
+        const p = this.videoEl.play();
+        if (p && typeof p.catch === 'function') {
+            p.catch(() => {});
+        }
+    }
+
+    pause() {
+        if (this.videoEl) {
+            this.videoEl.pause();
+        }
+    }
+
+    toggle() {
+        if (!this.videoEl) return;
+        if (this.videoEl.paused) {
+            this.play();
+        } else {
+            this.pause();
+        }
+    }
+
+    getPixi() {
+        return this.sprite;
+    }
+
+    updateSize(size) {
+        if (!size) return;
+        this.width = Math.max(1, Math.round(size.width || 1));
+        this.height = Math.max(1, Math.round(size.height || 1));
+        const apply = () => {
+            const texW = this.sprite.texture.width || 1;
+            const texH = this.sprite.texture.height || 1;
+            this.sprite.scale.set(this.width / texW, this.height / texH);
+        };
+        if (this.sprite.texture.baseTexture?.valid) {
+            apply();
+        } else {
+            this.sprite.texture.baseTexture?.once('loaded', apply);
+        }
+    }
+
+    /**
+     * Остановить видео и освободить ресурсы (вызывается при удалении объекта).
+     * Без этого HTMLVideoElement продолжает жить и тикать текстуру — утечка.
+     */
+    destroy() {
+        if (this.videoEl) {
+            try {
+                this.videoEl.pause();
+                this.videoEl.removeAttribute('src');
+                this.videoEl.load();
+            } catch (_) {}
+            this.videoEl = null;
+        }
+        try {
+            this.sprite?.off('pointerdown', this._onDown);
+            this.sprite?.off('pointerup', this._onUp);
+        } catch (_) {}
+        try {
+            if (this.sprite?.texture && this.sprite.texture !== PIXI.Texture.WHITE) {
+                this.sprite.texture.destroy(true);
+            }
+        } catch (_) {}
+    }
+}

package/src/ui/chat/ChatWindow.js

@@ -972,6 +972,43 @@ export class ChatWindow {
         });
     }
 
+    _placeGeneratedVideoOnBoard(result, skeletonWorld = null) {
+        if (!this._boardCore?.eventBus) return;
+        const src = result?.videoUrl;
+        if (!src) {
+            if (this._refs?.errorBlock) {
+                this._refs.errorBlock.textContent = 'Видео сгенерировано, но ссылка отсутствует.';
+                this._refs.errorBlock.classList.add('is-visible');
+            }
+            return;
+        }
+
+        const world = this._boardCore.pixi?.worldLayer || this._boardCore.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+
+        // Приоритет — мировая точка скелетона: видео приземляется туда, где была заглушка,
+        // даже если пользователь панорамировал/зумил во время генерации.
+        let x;
+        let y;
+        if (skeletonWorld) {
+            x = Math.round(skeletonWorld.x * s + (world?.x || 0));
+            y = Math.round(skeletonWorld.y * s + (world?.y || 0));
+        } else {
+            const composerRect = this._refs?.composer?.getBoundingClientRect?.();
+            x = composerRect ? Math.round(composerRect.left + composerRect.width / 2) : 400;
+            y = composerRect ? Math.round(composerRect.top - 200) : 200;
+        }
+
+        this._boardCore.eventBus.emit(Events.UI.PasteVideoAt, {
+            x,
+            y,
+            src,
+            mimeType: result?.mimeType || 'video/mp4',
+            poster: null,
+            skipUpload: true
+        });
+    }
+
     _clearBoardSelection() {
         if (typeof this._boardCore?.selectTool?.clearSelection === 'function') {
             this._boardCore.selectTool.clearSelection();
@@ -1227,15 +1264,9 @@ export class ChatWindow {
         }
         if (state.status === 'done') {
             this._composer?.setStreaming(false);
+            const skeletonWorld = this._videoSkeletonWorld;
             this._clearVideoSkeleton();
-            // Тип объекта «видео» на доске не существует. Событие Events.UI.PasteImageAt
-            // ожидает data URL картинки — видео-URL несовместим. Размещение на доске
-            // выходит за рамки текущей фазы (нет объекта типа video).
-            console.info('[ChatWindow] Видео готово. Размещение на доске не поддерживается: нет объекта типа video.', state.result?.videoUrl);
-            if (this._refs?.errorBlock) {
-                this._refs.errorBlock.textContent = 'Видео сгенерировано. Размещение на доске появится в следующей фазе.';
-                this._refs.errorBlock.classList.add('is-visible');
-            }
+            this._placeGeneratedVideoOnBoard(state.result, skeletonWorld);
         }
         if (state.status === 'error') {
             this._composer?.setStreaming(false);

package/src/ui/comments/CommentThreadPopover.js

@@ -136,7 +136,9 @@ export class CommentThreadPopover {
             position: 'absolute',
             inset: '0',
             pointerEvents: 'none',
-            zIndex: 26,
+            // Выше панелей свойств (text-properties-layer = 10050, *PropertiesPanel = 10000),
+            // иначе открытый поверх объекта попап комментария оказывается под тулбаром свойств.
+            zIndex: 10060,
         });
         this.container.appendChild(this.layer);