Merge pull request #6 from Sunbird-Knowlg/v1.0.3

V1.0.3

Author: pallakartheekreddy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@project-sunbird/generic-editor-v2",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Sunbird Generic Editor — React content upload/generic editor (theme-reactive, multilingual). Fork of @sunbird/content-editor that previews via the legacy ekstep content renderer.",
   "main": "dist/sunbird-generic-editor.umd.js",
   "module": "dist/sunbird-generic-editor.es.js",
@@ -49,4 +49,4 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.6"
   }
-}
+}

src/ContentEditor.tsx

@@ -1,17 +1,4 @@
-/**
- * ContentEditor — the editor root component.
- *
- *   import { ContentEditor } from '@project-sunbird/generic-editor-v2';
- *   import '@project-sunbird/generic-editor-v2/dist/sunbird-generic-editor.css';
- *
- *   <ContentEditor
- *     context={{ uid, sid, did, channel, pdata, user, framework }}
- *     contentId="do_123"            // omit for a brand-new upload
- *     language="en"
- *     onClose={() => navigate('/workspace')}
- *     onTelemetryEvent={(e) => post(e)}
- *   />
- */
+/** ContentEditor — the editor root component; render with a `context`, optional `contentId` (omit for a new upload), and its `onClose`/`onTelemetryEvent` callbacks. */
 import React from 'react';
 import './editor.scss';
 import { useEditor, type UseEditorOptions } from './useEditor';
@@ -23,6 +10,7 @@ import MetadataDrawer from './components/MetadataDrawer';
 import CollaboratorDrawer from './components/CollaboratorDrawer';
 import ReviewDrawer from './components/ReviewDrawer';
 import ReviewCommentsDrawer from './components/ReviewCommentsDrawer';
+import TranscriptsDrawer from './components/TranscriptsDrawer';
 import AssetPickerModal from './components/AssetPickerModal';
 import Toast from './components/Toast';
 import { t } from './i18n/i18n';
@@ -56,6 +44,7 @@ const ContentEditor: React.FC<ContentEditorProps> = (props) => {
       <CollaboratorDrawer ed={ed} />
       <ReviewDrawer ed={ed} />
       <ReviewCommentsDrawer ed={ed} />
+      <TranscriptsDrawer ed={ed} />
       <AssetPickerModal ed={ed} />
 
       <Toast toast={ed.toast} />

src/components/Drawer.tsx

@@ -10,11 +10,13 @@ interface DrawerProps {
   children: React.ReactNode;
   /** Localized label for the close button (falls back to English). */
   closeLabel?: string;
+  /** Extra class on the root, e.g. for a drawer-specific scoped theme override. */
+  className?: string;
 }
 
 /** Slide-in drawer (right in LTR, left in RTL). Always mounted so the transform transition runs. */
-const Drawer: React.FC<DrawerProps> = ({ open, onClose, titleIcon, title, footer, children, closeLabel = 'Close' }) => (
-  <div className="ce-drawer" data-open={open} aria-hidden={!open}>
+const Drawer: React.FC<DrawerProps> = ({ open, onClose, titleIcon, title, footer, children, closeLabel = 'Close', className }) => (
+  <div className={`ce-drawer${className ? ` ${className}` : ''}`} data-open={open} aria-hidden={!open}>
     <div className="ce-drawer-head">
       <div className="ce-drawer-title-row">
         <span className="ce-drawer-title-ic">{titleIcon}</span>

src/components/EditorPreview.test.tsx

@@ -31,4 +31,66 @@ describe('<EditorPreview />', () => {
     const { container } = render(<EditorPreview ed={ed} context={mockContext} />);
     expect(container.querySelector('iframe')).toHaveAttribute('src', '/preview.html?foo=1&webview=true');
   });
+
+  it('renders the iframe immediately for non-video content regardless of transcriptsChecked', () => {
+    const ed = makeEd({ content: mockContent, transcriptsChecked: false }); // mockContent is application/pdf
+    const { container } = render(<EditorPreview ed={ed} context={mockContext} />);
+    expect(container.querySelector('iframe')).toBeInTheDocument();
+  });
+
+  it('shows a loading state instead of the iframe for video content until transcripts have been checked at least once (negative)', () => {
+    const videoContent = { ...mockContent, mimeType: 'video/mp4' };
+    const ed = makeEd({ content: videoContent, transcriptsChecked: false, transcripts: [] });
+    const { container } = render(<EditorPreview ed={ed} context={mockContext} />);
+    expect(container.querySelector('iframe')).not.toBeInTheDocument();
+    expect(container.querySelector('.ce-spinner')).toBeInTheDocument();
+  });
+
+  it('renders the iframe for video content once transcriptsChecked is true, even with zero transcripts', () => {
+    const videoContent = { ...mockContent, mimeType: 'video/mp4' };
+    const ed = makeEd({ content: videoContent, transcriptsChecked: true, transcripts: [] });
+    const { container } = render(<EditorPreview ed={ed} context={mockContext} />);
+    expect(container.querySelector('iframe')).toBeInTheDocument();
+  });
+
+  it('does not treat a transcript with no status as Live (negative)', () => {
+    const videoContent = { ...mockContent, mimeType: 'video/mp4' };
+    const ed1 = makeEd({
+      content: videoContent,
+      transcriptsChecked: true,
+      transcripts: [{ code: 'c_en', language: 'English', languageCode: 'en', captionsUrl: 'https://x/en.vtt' }], // no status
+    });
+    const { container, rerender } = render(<EditorPreview ed={ed1} context={mockContext} />);
+    const withoutStatusIframe = container.querySelector('iframe');
+
+    const ed2 = makeEd({
+      content: videoContent,
+      transcriptsChecked: true,
+      transcripts: [],
+    });
+    rerender(<EditorPreview ed={ed2} context={mockContext} />);
+    const emptyIframe = container.querySelector('iframe');
+    // Same remount key either way, since a status-less entry must be excluded just like an empty list.
+    expect(emptyIframe).toBe(withoutStatusIframe);
+  });
+
+  it('remounts the iframe (new DOM node) when the live-caption set changes at equal length', () => {
+    const videoContent = { ...mockContent, mimeType: 'video/mp4' };
+    const ed1 = makeEd({
+      content: videoContent,
+      transcriptsChecked: true,
+      transcripts: [{ code: 'c_en', language: 'English', languageCode: 'en', captionsUrl: 'https://x/en.vtt', status: 'Live' }],
+    });
+    const { container, rerender } = render(<EditorPreview ed={ed1} context={mockContext} />);
+    const firstIframe = container.querySelector('iframe');
+
+    const ed2 = makeEd({
+      content: videoContent,
+      transcriptsChecked: true,
+      transcripts: [{ code: 'c_fr', language: 'French', languageCode: 'fr', captionsUrl: 'https://x/fr.vtt', status: 'Live' }],
+    });
+    rerender(<EditorPreview ed={ed2} context={mockContext} />);
+    const secondIframe = container.querySelector('iframe');
+    expect(secondIframe).not.toBe(firstIframe);
+  });
 });

src/components/EditorPreview.tsx

@@ -1,18 +1,38 @@
 import React, { useRef } from 'react';
 import type { EditorController } from '../useEditor';
-import type { ContentData, EditorContext } from '../types';
+import type { ContentData, EditorContext, RawTranscript } from '../types';
 import { getMimeTypeLabel, t } from '../i18n/i18n';
 import { FileIcon } from '../icons';
+import { isVideoMimeType } from '../constants';
 
-/**
- * Preview via the legacy ekstep content renderer — the same mechanism the old
- * generic editor used (org.ekstep.genericeditorpreview). One renderer handles all
- * mimeTypes (video/pdf/epub/ecml/html/scorm/h5p/youtube/url) through its coreplugins.
- *
- * Loads `content/preview/preview.html?webview=true` in an iframe (same-origin via the
- * host proxy), then calls its global `initializePreview()` with the content id +
- * metadata. No player-v2 dependency, no client-side unzip.
- */
+interface PlayerTranscript {
+  language: string;
+  identifier: string;
+  languageCode: string;
+  artifactUrl: string;
+  wordByWordUrl?: string;
+  sourceLanguage?: boolean;
+}
+
+/** Maps raw enrichment.transcripts into the shape sunbird-video-player expects, mirroring
+ *  the portal's ContentService mapping (artifactUrl here is the VTT, not transcript.json).
+ *  Requires an explicit 'Live' status - a missing status is treated the same safe way
+ *  TranscriptsDrawer.statusTone does (not-yet-approved), never served as a live caption. */
+function mapRawTranscripts(raw: RawTranscript[]): PlayerTranscript[] {
+  return raw
+    .filter((e): e is RawTranscript & { captionsUrl: string } =>
+      !!e.captionsUrl && e.status === 'Live')
+    .map((e) => ({
+      language: e.language || (e.languageCode || 'Unknown').toUpperCase(),
+      identifier: e.code ?? e.identifier ?? '',
+      languageCode: e.languageCode || '',
+      artifactUrl: e.captionsUrl,
+      wordByWordUrl: e.captionsUrl,
+      sourceLanguage: !!e.sourceLanguage,
+    }));
+}
+
+/** Preview via the legacy ekstep content renderer (all mimeTypes through its coreplugins), loaded in an iframe and driven via its global `initializePreview()`. */
 const RendererPreview: React.FC<{
   content: ContentData; context: EditorContext; previewUrl: string; previewConfig: Record<string, unknown>;
 }> = ({ content, context, previewUrl, previewConfig }) => {
@@ -55,9 +75,17 @@ const RendererPreview: React.FC<{
 };
 
 const EditorPreview: React.FC<{ ed: EditorController; context: EditorContext }> = ({ ed, context }) => {
-  const { content, lang, previewUrl, previewConfig } = ed;
+  const { content, lang, previewUrl, previewConfig, transcripts: rawTranscripts, transcriptsChecked } = ed;
+
   if (!content) return null;
 
+  const isVideo = isVideoMimeType(content.mimeType);
+  const transcripts = mapRawTranscripts(rawTranscripts);
+  // The iframe key changes only when the actual live-caption set changes (not just its
+  // count), so a same-count swap (one language leaves Live as another joins) still remounts.
+  const transcriptsKey = transcripts.map((tr) => tr.identifier).sort().join(',');
+  const previewMetadata = transcripts.length ? { ...content, transcripts } : content;
+
   return (
     <div className="ce-preview-card">
       <div className="ce-preview-bar">
@@ -67,13 +95,22 @@ const EditorPreview: React.FC<{ ed: EditorController; context: EditorContext }>
         <span className="ce-preview-chip">{t(lang, 'PREVIEW_MODE')}</span>
       </div>
       <div className="ce-preview-frame">
-        <RendererPreview
-          key={`${content.identifier}-${content.artifactUrl ?? ''}`}
-          content={content}
-          context={context}
-          previewUrl={previewUrl}
-          previewConfig={previewConfig}
-        />
+        {isVideo && !transcriptsChecked ? (
+          // Wait for the first transcripts check before ever mounting the renderer, so a
+          // slow initial read can't yank the iframe out (and restart playback) right after
+          // the user presses play - by the time it first mounts, this is already settled.
+          <div className="ce-center" style={{ height: '100%' }}>
+            <div className="ce-spinner ce-spinner--sm" />
+          </div>
+        ) : (
+          <RendererPreview
+            key={`${content.identifier}-${content.artifactUrl ?? ''}-${transcriptsKey}`}
+            content={previewMetadata}
+            context={context}
+            previewUrl={previewUrl}
+            previewConfig={previewConfig}
+          />
+        )}
       </div>
     </div>
   );

src/components/Header.test.tsx

@@ -41,4 +41,30 @@ describe('<Header />', () => {
     fireEvent.click(btn);
     expect(publish).toHaveBeenCalled();
   });
+
+  it('shows "View transcript" for video content once transcripts exist, and opens the drawer', () => {
+    const setDrawer = vi.fn();
+    const ed = makeEd({
+      view: 'player', mode: 'edit', setDrawer, hasTranscripts: true,
+      content: { ...mockContent, mimeType: 'video/mp4' },
+    });
+    render(<Header ed={ed} />);
+    fireEvent.click(screen.getByRole('button', { name: 'View transcript' }));
+    expect(setDrawer).toHaveBeenCalledWith('transcripts');
+  });
+
+  it('hides "View transcript" for video content with no transcripts yet (negative)', () => {
+    const ed = makeEd({
+      view: 'player', mode: 'edit', hasTranscripts: false,
+      content: { ...mockContent, mimeType: 'video/mp4' },
+    });
+    render(<Header ed={ed} />);
+    expect(screen.queryByRole('button', { name: 'View transcript' })).not.toBeInTheDocument();
+  });
+
+  it('hides "View transcript" for non-video content (negative)', () => {
+    const ed = makeEd({ view: 'player', mode: 'edit', content: { ...mockContent, mimeType: 'application/pdf' } });
+    render(<Header ed={ed} />);
+    expect(screen.queryByRole('button', { name: 'View transcript' })).not.toBeInTheDocument();
+  });
 });

src/components/Header.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import type { EditorController } from '../useEditor';
 import { t } from '../i18n/i18n';
 import {
-  ImageIcon, PencilIcon, SaveIcon, CloseIcon, SendIcon, UserPlusIcon, CheckIcon, CommentIcon,
+  ImageIcon, PencilIcon, SaveIcon, CloseIcon, SendIcon, UserPlusIcon, CheckIcon, CommentIcon, CaptionsIcon,
 } from '../icons';
 import { STATUS } from '../constants';
 
 const Header: React.FC<{ ed: EditorController }> = ({ ed }) => {
-  const { content, lang, mode, setDrawer, saveDraft, close, busy, busyAction, setReviewErrors, setReviewSubmitMode, headerLogo, hasReviewComments } = ed;
+  const { content, lang, mode, setDrawer, saveDraft, close, busy, busyAction, setReviewErrors, setReviewSubmitMode, headerLogo, hasReviewComments, hasTranscripts } = ed;
   const savingDraft = busyAction === 'save-draft';
   const hasContent = !!content?.identifier && ed.view === 'player';
   const isDraft = (content?.status ?? STATUS.DRAFT) === STATUS.DRAFT;
@@ -61,6 +61,19 @@ const Header: React.FC<{ ed: EditorController }> = ({ ed }) => {
           </button>
         )}
 
+        {hasContent && hasTranscripts && (
+          <button
+            type="button"
+            className="ce-icon-btn"
+            onClick={() => setDrawer('transcripts')}
+            disabled={busy}
+            data-tooltip={t(lang, 'VIEW_TRANSCRIPT')}
+            aria-label={t(lang, 'VIEW_TRANSCRIPT')}
+          >
+            <CaptionsIcon size={16} />
+          </button>
+        )}
+
         {canEdit && !isReviewer && hasReviewComments && (
           <button
             type="button"