Autosave: 20260317-153203

frontend/src/pages/constructor.tsx

@@ -109,7 +109,7 @@ type TransitionPreviewState = {
   title: string;
 };
 
-type EditorMenuItem = 'none' | 'background_image' | 'background_video' | 'background_audio';
+type EditorMenuItem = 'none' | 'background_image' | 'background_video' | 'background_audio' | 'create_transition';
 
 const parseJsonObject = <T,>(value?: string, fallback?: T): T => {
   if (!value) return (fallback || ({} as T)) as T;
@@ -334,6 +334,12 @@ const ConstructorPage = () => {
     return String(value || '');
   }, [router.query.pageId]);
 
+  const sourceTypeFromRoute = useMemo(() => {
+    const value = router.query.sourceType;
+    if (Array.isArray(value)) return value[0] || '';
+    return String(value || '');
+  }, [router.query.sourceType]);
+
   const [pages, setPages] = useState<TourPage[]>([]);
   const [assets, setAssets] = useState<ProjectAsset[]>([]);
   const [activePageId, setActivePageId] = useState('');
@@ -369,6 +375,7 @@ const ConstructorPage = () => {
   const transitionVideoRef = useRef<HTMLVideoElement | null>(null);
   const reverseAnimationFrame = useRef<number | null>(null);
   const didSetInitialCanvasFocus = useRef(false);
+  const didHandleSourceType = useRef(false);
 
   const activePage = useMemo(() => pages.find((item) => item.id === activePageId) || null, [activePageId, pages]);
   const pageNameById = useMemo(() => {
@@ -527,6 +534,18 @@ const ConstructorPage = () => {
     });
   }, [isAuthReady, isLoading, router.isReady]);
 
+  useEffect(() => {
+    if (!router.isReady || isLoading) return;
+    if (didHandleSourceType.current) return;
+
+    didHandleSourceType.current = true;
+    if (sourceTypeFromRoute !== 'transition') return;
+
+    setSelectedElementId('');
+    setSelectedMenuItem('create_transition');
+    setIsMenuOpen(true);
+  }, [isLoading, router.isReady, sourceTypeFromRoute]);
+
   useEffect(() => {
     if (!activePage) {
       setElements([]);
@@ -1051,6 +1070,50 @@ const ConstructorPage = () => {
     return getElementButtonTitle(element);
   };
 
+  const renderCreateTransitionForm = () => (
+    <div className='rounded border border-gray-200 p-2 space-y-2'>
+      <p className='text-[11px] font-semibold text-gray-600'>Create next page transition</p>
+      <input
+        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+        placeholder='Name'
+        value={newTransitionName}
+        onChange={(event) => setNewTransitionName(event.target.value)}
+      />
+      <select
+        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+        value={newTransitionVideoUrl}
+        onChange={(event) => setNewTransitionVideoUrl(event.target.value)}
+      >
+        <option value=''>Transition video asset</option>
+        {transitionVideoAssetOptions.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <label className='flex items-center gap-2 text-[11px] text-gray-700'>
+        <input
+          type='checkbox'
+          checked={newTransitionSupportsReverse}
+          onChange={(event) => setNewTransitionSupportsReverse(event.target.checked)}
+        />
+        Supports reverse playback
+      </label>
+      <input
+        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+        type='number'
+        min='0.2'
+        step='0.1'
+        value={newTransitionDurationSec}
+        onChange={(event) => setNewTransitionDurationSec(Number(event.target.value || 0.7))}
+      />
+      <button type='button' className='menu-action-btn' onClick={createTransition} disabled={isCreatingTransition}>
+        <BaseIcon path={mdiSwapHorizontal} size={16} />
+        <span>{isCreatingTransition ? 'Creating Transition...' : 'Create Transition'}</span>
+      </button>
+    </div>
+  );
+
   const canvasBackgroundStyle: React.CSSProperties = {};
   const backgroundImageSrc = resolveAssetPlaybackUrl(backgroundImageUrl);
   const backgroundVideoSrc = resolveAssetPlaybackUrl(backgroundVideoUrl);
@@ -1070,7 +1133,9 @@ const ConstructorPage = () => {
         ? 'Background video'
         : selectedMenuItem === 'background_audio'
           ? 'Background audio'
-          : selectedElement?.label || 'Element editor';
+          : selectedMenuItem === 'create_transition'
+            ? 'Create transition'
+            : selectedElement?.label || 'Element editor';
 
   if (backgroundImageSrc) {
     canvasBackgroundStyle.backgroundImage = `url("${backgroundImageSrc}")`;
@@ -1339,6 +1404,8 @@ const ConstructorPage = () => {
                   </div>
                 )}
 
+                {selectedMenuItem === 'create_transition' && renderCreateTransitionForm()}
+
                 {selectedElement && (
                   <div className='mb-2'>
                     <label className='mb-1 block text-[11px] font-semibold text-gray-600'>Label</label>
@@ -1447,52 +1514,7 @@ const ConstructorPage = () => {
                       <BaseButton small color='lightDark' label='Preview Forward' onClick={() => openTransitionPreview('forward')} />
                       <BaseButton small color='lightDark' label='Preview Back' onClick={() => openTransitionPreview('back')} />
                     </div>
-                    <div className='rounded border border-gray-200 p-2 space-y-2'>
+                    {renderCreateTransitionForm()}
-                      <p className='text-[11px] font-semibold text-gray-600'>Create next page transition</p>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        placeholder='Name'
-                        value={newTransitionName}
-                        onChange={(event) => setNewTransitionName(event.target.value)}
-                      />
-                      <select
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={newTransitionVideoUrl}
-                        onChange={(event) => setNewTransitionVideoUrl(event.target.value)}
-                      >
-                        <option value=''>Transition video asset</option>
-                        {transitionVideoAssetOptions.map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>
-                      <label className='flex items-center gap-2 text-[11px] text-gray-700'>
-                        <input
-                          type='checkbox'
-                          checked={newTransitionSupportsReverse}
-                          onChange={(event) => setNewTransitionSupportsReverse(event.target.checked)}
-                        />
-                        Supports reverse playback
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        type='number'
-                        min='0.2'
-                        step='0.1'
-                        value={newTransitionDurationSec}
-                        onChange={(event) => setNewTransitionDurationSec(Number(event.target.value || 0.7))}
-                      />
-                      <button
-                        type='button'
-                        className='menu-action-btn'
-                        onClick={createTransition}
-                        disabled={isCreatingTransition}
-                      >
-                        <BaseIcon path={mdiSwapHorizontal} size={16} />
-                        <span>{isCreatingTransition ? 'Creating Transition...' : 'Create Transition'}</span>
-                      </button>
-                    </div>
                   </div>
                 )}
 
@@ -1729,6 +1751,10 @@ const ConstructorPage = () => {
                   <BaseIcon path={mdiSwapHorizontal} size={16} />
                   <span>Add Navigation</span>
                 </button>
+                <button type='button' className='menu-action-btn' onClick={() => selectMenuItemForEdit('create_transition')}>
+                  <BaseIcon path={mdiSwapHorizontal} size={16} />
+                  <span>Add Transition</span>
+                </button>
                 <button type='button' className='menu-action-btn' onClick={() => addElement('gallery')}>
                   <BaseIcon path={mdiImageMultiple} size={16} />
                   <span>Add Gallery</span>