@package-uploader/ui 1.1.2 → 1.1.4

package/src/components/UploadModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { api, type CourseClassMappings } from '../api/client';
 import DropZone from './DropZone';
 import CourseStructureStep, { type CourseStructure } from './CourseStructureStep';
@@ -31,9 +31,17 @@ export default function UploadModal({
   const [courseStructure, setCourseStructure] = useState<CourseStructure | null>(null);
   const [classMappings, setClassMappings] = useState<CourseClassMappings>({});
   const [parsingStructure, setParsingStructure] = useState(false);
-  const [structurePanelOpen, setStructurePanelOpen] = useState(false);
   const [parseFailed, setParseFailed] = useState(false);
 
+  // Preview state
+  const [previewToken, setPreviewToken] = useState<string | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Options panel (collapsed by default in preview mode)
+  const [optionsOpen, setOptionsOpen] = useState(false);
+
   // LMS Thin Pack options
   const [createThinPack, setCreateThinPack] = useState(true);
   const [thinPackName, setThinPackName] = useState('');
@@ -48,6 +56,35 @@ export default function UploadModal({
   // Wrap & Download mode
   const [wrapOnly, setWrapOnly] = useState(false);
 
+  const isPreviewMode = !!previewToken && !!previewUrl;
+
+  // Sync classMappings to iframe via postMessage
+  useEffect(() => {
+    if (!isPreviewMode || !iframeRef.current?.contentWindow) return;
+    iframeRef.current.contentWindow.postMessage(
+      { type: 'pa-class-mappings', classMappings },
+      '*'
+    );
+  }, [classMappings, isPreviewMode]);
+
+  // Navigate iframe to a lesson when user clicks lesson in tree
+  const handleNavigateLesson = useCallback((lessonId: string) => {
+    if (!iframeRef.current?.contentWindow) return;
+    iframeRef.current.contentWindow.postMessage(
+      { type: 'pa-navigate', lessonId },
+      '*'
+    );
+  }, []);
+
+  // Cleanup preview on unmount
+  useEffect(() => {
+    return () => {
+      if (previewToken) {
+        api.stopPreview(previewToken).catch(() => {});
+      }
+    };
+  }, [previewToken]);
+
   function generateSlug(name: string): string {
     return name.trim().replace(/\s+/g, '_');
   }
@@ -59,11 +96,15 @@ export default function UploadModal({
     }));
     setFiles((prev) => [...prev, ...fileItems]);
 
-    // Reset structure state when files change
+    // Reset structure + preview state when files change
     setCourseStructure(null);
     setClassMappings({});
-    setStructurePanelOpen(false);
     setParseFailed(false);
+    if (previewToken) {
+      api.stopPreview(previewToken).catch(() => {});
+      setPreviewToken(null);
+      setPreviewUrl(null);
+    }
   }
 
   function handleRemoveFile(index: number) {
@@ -72,17 +113,25 @@ export default function UploadModal({
       if (next.length !== 1) {
         setCourseStructure(null);
         setClassMappings({});
-        setStructurePanelOpen(false);
         setParseFailed(false);
+        if (previewToken) {
+          api.stopPreview(previewToken).catch(() => {});
+          setPreviewToken(null);
+          setPreviewUrl(null);
+        }
       }
       return next;
     });
   }
 
   async function handleCustomizeClick() {
-    // Already parsed — just toggle
-    if (courseStructure) {
-      setStructurePanelOpen((prev) => !prev);
+    // Already in preview mode — toggle back to normal
+    if (isPreviewMode) {
+      if (previewToken) {
+        api.stopPreview(previewToken).catch(() => {});
+      }
+      setPreviewToken(null);
+      setPreviewUrl(null);
       return;
     }
 
@@ -93,19 +142,53 @@ export default function UploadModal({
     if (files.length !== 1) return;
 
     setParsingStructure(true);
+    setPreviewLoading(true);
+
     try {
-      const structure = await api.parseCourseStructure(files[0].file);
+      // Parse structure and start preview in parallel
+      const [structure, preview] = await Promise.all([
+        courseStructure
+          ? Promise.resolve(courseStructure)
+          : api.parseCourseStructure(files[0].file),
+        api.startPreview(files[0].file),
+      ]);
+
       if (structure) {
         setCourseStructure(structure);
-        setStructurePanelOpen(true);
         setParseFailed(false);
+        setPreviewToken(preview.token);
+        setPreviewUrl(preview.url);
       } else {
         setParseFailed(true);
+        // Cleanup the preview if structure parse failed
+        api.stopPreview(preview.token).catch(() => {});
       }
     } catch {
       setParseFailed(true);
     }
+
     setParsingStructure(false);
+    setPreviewLoading(false);
+  }
+
+  function handleClose() {
+    if (previewToken) {
+      api.stopPreview(previewToken).catch(() => {});
+    }
+    onClose();
+  }
+
+  // When iframe loads, send current classMappings
+  function handleIframeLoad() {
+    // Small delay to let bridge script initialize
+    setTimeout(() => {
+      if (iframeRef.current?.contentWindow) {
+        iframeRef.current.contentWindow.postMessage(
+          { type: 'pa-class-mappings', classMappings },
+          '*'
+        );
+      }
+    }, 500);
   }
 
   function formatSize(bytes: number): string {
@@ -249,18 +332,169 @@ export default function UploadModal({
     ? 'Analyzing...'
     : parseFailed
     ? 'Not a Rise course'
-    : courseStructure
-    ? `Customize Classes (${courseStructure.lessons.length} lessons)`
+    : isPreviewMode
+    ? 'Close Preview'
     : 'Customize Classes';
 
+  // Build the preview URL — needs the API base path prepended
+  const fullPreviewUrl = previewUrl
+    ? (() => {
+        // Detect API base same way client.ts does
+        const scripts = document.querySelectorAll('script[src*="assets/index"]');
+        if (scripts.length > 0) {
+          const src = (scripts[0] as HTMLScriptElement).src;
+          const url = new URL(src);
+          const assetsIndex = url.pathname.indexOf('/assets/');
+          if (assetsIndex > 0) {
+            return url.pathname.substring(0, assetsIndex) + '/' + previewUrl.replace(/^\//, '');
+          }
+        }
+        return previewUrl;
+      })()
+    : null;
+
+  // --- Preview mode: full-screen split layout ---
+  if (isPreviewMode && courseStructure) {
+    return (
+      <div className="modal-overlay" onClick={handleClose}>
+        <div className="modal upload-modal preview-mode" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-header">
+            <h3 className="modal-title">
+              Customize Classes — {courseStructure.courseTitle}
+            </h3>
+            {assignmentCount > 0 && (
+              <span className="course-structure-badge">
+                {assignmentCount} class{assignmentCount !== 1 ? 'es' : ''} assigned
+              </span>
+            )}
+            <button className="modal-close" onClick={handleClose}>
+              x
+            </button>
+          </div>
+
+          <div className="preview-split">
+            {/* Left: Course structure controls */}
+            <div className="preview-split-left">
+              <CourseStructureStep
+                structure={courseStructure}
+                classMappings={classMappings}
+                onChange={setClassMappings}
+                onNavigateLesson={handleNavigateLesson}
+              />
+            </div>
+
+            {/* Right: Live SCORM preview */}
+            <div className="preview-split-right">
+              {previewLoading ? (
+                <div className="preview-loading">
+                  <div className="spinner" />
+                  <span>Loading preview...</span>
+                </div>
+              ) : (
+                <iframe
+                  ref={iframeRef}
+                  src={fullPreviewUrl || ''}
+                  className="preview-iframe"
+                  title="Course Preview"
+                  onLoad={handleIframeLoad}
+                  sandbox="allow-scripts allow-same-origin allow-popups"
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="modal-footer preview-footer">
+            <button className="btn btn-secondary" onClick={handleClose} disabled={uploading}>
+              Cancel
+            </button>
+
+            <button
+              className={`btn btn-sm btn-secondary preview-options-toggle${optionsOpen ? ' open' : ''}`}
+              onClick={() => setOptionsOpen((prev) => !prev)}
+            >
+              Options {optionsOpen ? '\u25B2' : '\u25BC'}
+            </button>
+
+            {optionsOpen && (
+              <div className="preview-options-panel">
+                <label className="upload-link-toggle">
+                  <input
+                    type="checkbox"
+                    checked={wrapOnly}
+                    onChange={(e) => setWrapOnly(e.target.checked)}
+                    disabled={uploading}
+                  />
+                  <span>Wrap & Download only</span>
+                </label>
+
+                {!wrapOnly && (
+                  <>
+                    <label className="upload-link-toggle">
+                      <input
+                        type="checkbox"
+                        checked={createThinPack}
+                        onChange={(e) => setCreateThinPack(e.target.checked)}
+                        disabled={uploading}
+                      />
+                      <span>LMS Thin Pack</span>
+                    </label>
+                    <label className="upload-link-toggle">
+                      <input
+                        type="checkbox"
+                        checked={createSharedLink}
+                        onChange={(e) => setCreateSharedLink(e.target.checked)}
+                        disabled={uploading}
+                      />
+                      <span>Shared Link</span>
+                    </label>
+                  </>
+                )}
+
+                <div className="preview-option-skin">
+                  <span className="preview-option-label">Skin:</span>
+                  <input
+                    type="text"
+                    placeholder="e.g. marketing"
+                    value={skinName}
+                    onChange={(e) => setSkinName(e.target.value)}
+                    disabled={uploading}
+                    className="preview-option-input"
+                  />
+                </div>
+              </div>
+            )}
+
+            <button
+              className="btn btn-primary"
+              onClick={handleUpload}
+              disabled={uploading || pendingCount === 0}
+            >
+              {uploading ? (
+                <>
+                  <div className="spinner" />
+                  {wrapOnly ? 'Wrapping...' : 'Uploading...'}
+                </>
+              ) : wrapOnly ? (
+                'Wrap & Download'
+              ) : (
+                'Upload'
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // --- Normal mode: standard upload modal ---
   return (
-    <div className="modal-overlay" onClick={onClose}>
+    <div className="modal-overlay" onClick={handleClose}>
       <div className="modal upload-modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
           <h3 className="modal-title">
             {wrapOnly ? 'Wrap & Download' : `Upload to: ${folderName}`}
           </h3>
-          <button className="modal-close" onClick={onClose}>
+          <button className="modal-close" onClick={handleClose}>
             x
           </button>
         </div>
@@ -308,35 +542,20 @@ export default function UploadModal({
             </div>
           )}
 
-          {/* Customize Classes — on-demand toggle */}
+          {/* Customize Classes button */}
           {isSingleFile && !uploading && (
             <div className="structure-section">
               <button
-                className={`structure-toggle-btn${structurePanelOpen ? ' open' : ''}${parseFailed ? ' disabled' : ''}`}
+                className={`structure-toggle-btn${parseFailed ? ' disabled' : ''}`}
                 onClick={handleCustomizeClick}
                 disabled={parsingStructure || parseFailed}
               >
                 {parsingStructure && <div className="spinner" />}
                 <span>{customizeLabel}</span>
-                {!parsingStructure && !parseFailed && (
-                  <span className="structure-toggle-arrow">
-                    {structurePanelOpen ? '\u25B2' : '\u25BC'}
-                  </span>
-                )}
-                {assignmentCount > 0 && !structurePanelOpen && (
+                {assignmentCount > 0 && (
                   <span className="course-structure-badge">{assignmentCount} assigned</span>
                 )}
               </button>
-
-              {structurePanelOpen && courseStructure && (
-                <div className="structure-panel">
-                  <CourseStructureStep
-                    structure={courseStructure}
-                    classMappings={classMappings}
-                    onChange={setClassMappings}
-                  />
-                </div>
-              )}
             </div>
           )}
 
@@ -432,7 +651,7 @@ export default function UploadModal({
           </div>
 
           {/* Class assignments summary */}
-          {assignmentCount > 0 && !structurePanelOpen && (
+          {assignmentCount > 0 && (
             <div className="structure-summary-badge">
               Class assignments:{' '}
               {[
@@ -454,7 +673,7 @@ export default function UploadModal({
         </div>
 
         <div className="modal-footer">
-          <button className="btn btn-secondary" onClick={onClose} disabled={uploading}>
+          <button className="btn btn-secondary" onClick={handleClose} disabled={uploading}>
             Cancel
           </button>
           <button