Upload folder using huggingface_hub

client/src/components/SubtitlingModule.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+
+export interface SubtitleSegment {
+  id: number;
+  startTime: string;
+  endTime: string;
+  duration: string;
+  sourceText: string;
+  targetText?: string;
+  isCurrent?: boolean;
+}
+
+export interface VideoInfo {
+  title: string;
+  duration: string;
+  totalSegments: number;
+  currentSegment: number;
+}
+
+interface SubtitlingModuleProps {
+  videoInfo: VideoInfo;
+  subtitleSegments: SubtitleSegment[];
+  currentDisplayedSubtitle?: string;
+  onSegmentClick?: (id: number) => void;
+  getSegmentButtonClass?: (id: number) => string;
+  onPlayPause?: () => void;
+  isPlaying?: boolean;
+  onSaveSegment?: (id: number, text: string) => void;
+}
+
+/**
+ * Reusable subtitling interface template for future weeks.
+ * Not currently rendered in any page; kept for reuse.
+ */
+const SubtitlingModule: React.FC<SubtitlingModuleProps> = ({
+  videoInfo,
+  subtitleSegments,
+  currentDisplayedSubtitle,
+  onSegmentClick,
+  getSegmentButtonClass,
+  onPlayPause,
+  isPlaying,
+}) => {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+        <div className="mb-4">
+          <h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
+        </div>
+        <div className="bg-black rounded-lg aspect-video overflow-hidden relative">
+          <div className="absolute inset-0 flex items-center justify-center text-white/70 text-sm">Video Placeholder</div>
+          {currentDisplayedSubtitle && (
+            <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
+              <div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
+                <p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`}>
+                  {currentDisplayedSubtitle}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+        <h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
+        <div className="grid grid-cols-9 gap-1 mb-6">
+          {subtitleSegments.map((segment) => (
+            <button
+              key={segment.id}
+              onClick={() => onSegmentClick && onSegmentClick(segment.id)}
+              className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass ? getSegmentButtonClass(segment.id) : ''}`}
+            >
+              {segment.id}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2 mb-4">
+          <button onClick={onPlayPause} className="px-3 py-1.5 text-sm rounded-md border border-gray-300">
+            {isPlaying ? 'Pause' : 'Play'}
+          </button>
+          <div className="text-sm text-gray-600">{videoInfo.currentSegment}/{videoInfo.totalSegments}</div>
+        </div>
+        <div className="space-y-4">
+          {subtitleSegments.map(seg => (
+            <div key={seg.id} className="border border-gray-200 rounded-lg p-3">
+              <div className="text-xs text-gray-500 mb-1">{seg.startTime} → {seg.endTime} ({seg.duration})</div>
+              <div className="text-sm text-gray-800 mb-2">{seg.sourceText}</div>
+              <textarea className="w-full border border-gray-300 rounded p-2 text-sm" defaultValue={seg.targetText || ''} rows={2} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubtitlingModule;
+
+

client/src/pages/WeeklyPractice.tsx

@@ -1746,287 +1746,292 @@ const WeeklyPractice: React.FC = () => {
 
         {/* Special Subtitling Interface for Week 2 (hidden from students when week is hidden) */}
         {!isWeekTransitioning && selectedWeek === 2 && (isAdmin || !isWeekHidden) ? (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            {/* Left Panel - Video Player */}
-            <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
-              <div className="mb-4">
-                <h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
-              </div>
-              
-              {/* Video Player */}
-              <div className="bg-black rounded-lg aspect-video overflow-hidden relative">
-                <video
-                  className="w-full h-full"
-                  controls
-                  preload="metadata"
-                  id="nike-video"
-                  onError={(e) => console.error('Video loading error:', e)}
-                  onLoadStart={() => console.log('Video loading started')}
-                  onCanPlay={() => console.log('Video can play')}
-                >
-                  <source src="https://huggingface.co/spaces/linguabot/transcreation-frontend/resolve/main/public/videos/nike-winning-isnt-for-everyone.mp4" type="video/mp4" />
-                  Your browser does not support the video tag.
-                </video>
-                
-                {/* On-screen subtitles */}
-                {currentDisplayedSubtitle && (
-                  <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
-                    <div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
-                      <p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`} style={{ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
-                        {formatSubtitleForDisplay(currentDisplayedSubtitle)}
-                      </p>
-                    </div>
-                  </div>
-                )}
+          <div className="bg-white rounded-xl shadow p-6 mb-8">
+            <h3 className="text-lg font-semibold text-gray-900 mb-4">Week 2 Practice</h3>
+            {weeklyPracticeWeek?.translationBrief ? (
+              <div className="bg-ui-panel rounded-xl p-6 mb-6 border border-ui-border">
+                <h4 className="text-ui-text font-semibold text-base mb-2">Translation Brief</h4>
+                <div className="text-ui-text leading-relaxed whitespace-pre-wrap">{renderFormatted(weeklyPracticeWeek.translationBrief)}</div>
               </div>
-            </div>
-
-            {/* Right Panel - Translation Workspace */}
-            <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
-              
-              {/* Segment Navigation Grid */}
-              {loadingSubtitles ? (
-                <div className="grid grid-cols-9 gap-1 mb-6">
-                  {Array.from({ length: 26 }, (_, i) => (
-                    <div key={i} className="px-1 py-1 rounded text-xs w-full bg-gray-200 animate-pulse">
-                      {i + 1}
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="grid grid-cols-9 gap-1 mb-6">
-                  {subtitleSegments.map((segment) => (
-                    <button
-                      key={segment.id}
-                      onClick={() => handleSegmentClick(segment.id)}
-                      className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass(segment.id)}`}
-                    >
-                      {segment.id}
-                    </button>
-                  ))}
-                </div>
-              )}
-              
-              {/* Admin Time Code Editor */}
-              {editingSegment && (((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
-                <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4">
-                  <h4 className="text-sm font-medium text-indigo-800 mb-2">Edit Time Codes for Segment {editingSegment}</h4>
-                  <div className="grid grid-cols-2 gap-2">
-                    <div>
-                      <label className="block text-xs text-indigo-700 mb-1">Start Time</label>
-                      <input
-                        type="text"
-                        id="startTimeInput"
-                        defaultValue={subtitleSegments[editingSegment - 1]?.startTime}
-                        className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
-                        placeholder="00:00:00,000"
-                      />
-                    </div>
-                    <div>
-                      <label className="block text-xs text-indigo-700 mb-1">End Time</label>
-                      <input
-                        type="text"
-                        id="endTimeInput"
-                        defaultValue={subtitleSegments[editingSegment - 1]?.endTime}
-                        className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
-                        placeholder="00:00:00,000"
-                      />
-                    </div>
-                  </div>
-                  <div className="flex space-x-2 mt-2">
-                    <button
-                      onClick={() => setEditingSegment(null)}
-                      className="px-2 py-1 text-xs bg-gray-500 text-white rounded"
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      onClick={() => {
-                        const startInput = document.getElementById('startTimeInput') as HTMLInputElement;
-                        const endInput = document.getElementById('endTimeInput') as HTMLInputElement;
-                        if (startInput && endInput && startInput.value && endInput.value) {
-                          handleSaveTimeCode(editingSegment, startInput.value, endInput.value);
-                        }
-                      }}
-                      className="px-2 py-1 text-xs bg-indigo-600 text-white rounded"
-                    >
-                      Save
-                    </button>
-                  </div>
-                </div>
-              )}
-              
-              {/* Current Segment Details */}
-              <div className="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200">
-                <div className="flex items-center justify-between">
-                  <p className="text-gray-800">
-                    Segment {currentSegment}: {subtitleSegments[currentSegment - 1]?.startTime} – {subtitleSegments[currentSegment - 1]?.endTime} ({subtitleSegments[currentSegment - 1]?.duration})
-                  </p>
-                  {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
-                    <button
-                      onClick={() => handleEditTimeCode(currentSegment)}
-                      className="bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded text-xs flex items-center space-x-1"
-                      title="Edit time codes"
-                    >
-                      <PencilIcon className="w-3 h-3" />
-                      <span>Edit</span>
-                    </button>
-                  )}
-                </div>
-              </div>
-              
-              {/* Source Text */}
-              <div className="mb-4">
-                <label className="block text-sm font-medium text-gray-700 mb-2">Source Text</label>
-                <textarea
-                  value={subtitleText}
-                  readOnly
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-800"
-                  rows={2}
-                />
-              </div>
-              
-              {/* Target Text */}
-              <div className="mb-4">
-                <label className="block text-sm font-medium text-gray-700 mb-2">Target Text</label>
-                <textarea
-                  value={targetText}
-                  onChange={(e) => handleTargetTextChange(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-                  rows={2}
-                  placeholder="Enter your translation..."
-                />
-                <div className="flex justify-between items-center mt-2">
-                  <span className="text-xs text-gray-600">Recommended: 2 lines max, 16 chars/line (Netflix standard)</span>
-                  <span className="text-xs text-gray-600">{characterCount} characters</span>
-                </div>
-              </div>
-              
-              {/* Action Buttons */}
-              <div className="flex space-x-3 mb-4">
-                <button
-                  onClick={handleSaveTranslation}
-                  className={`px-4 py-2 rounded-lg ${
-                    saveStatus === 'Saved!' ? 'bg-green-600 hover:bg-green-700' :
-                    saveStatus === 'Saved Locally' ? 'bg-yellow-600 hover:bg-yellow-700' :
-                    saveStatus === 'Error' ? 'bg-red-600 hover:bg-red-700' :
-                    'bg-indigo-600 hover:bg-indigo-700'
-                  } text-white`}
-                >
-                  {saveStatus}
-                </button>
-                <button
-                  onClick={handlePreviewTranslation}
-                  className={`px-4 py-2 rounded-lg flex items-center space-x-2 ${
-                    showTranslatedSubtitles 
-                      ? 'bg-green-500 hover:bg-green-600 text-white' 
-                      : 'bg-gray-500 hover:bg-gray-600 text-white'
-                  }`}
-                >
-                  <span>{showTranslatedSubtitles ? 'Show Original' : 'Show Translation'}</span>
-                </button>
-              </div>
-              
-              {/* Translation Progress */}
-              <div className="mb-4">
-                <div className="flex justify-between items-center mb-2">
-                  <span className="text-sm font-medium text-gray-700">Translation Progress</span>
-                  <span className="text-sm text-gray-600">{Object.keys(subtitleTranslations).length} of {subtitleSegments.length} segments completed</span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2">
-                  <div 
-                    className="bg-green-500 h-2 rounded-full transition-all duration-300"
-                    style={{ width: `${(Object.keys(subtitleTranslations).length / subtitleSegments.length) * 100}%` }}
-                  ></div>
-                </div>
-              </div>
-            </div>
-            
-            {/* Submissions Panel - Only show for Week 2 subtitling */}
-            {selectedWeek === 2 && (
-              <div className="mt-6 col-span-2">
-                <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
-                  <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-semibold text-gray-900">
-                      👥 View Submissions for Segment {currentSegment}
-                    </h3>
-                    <button
-                      onClick={toggleSubmissions}
-                      className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors duration-200 ${
-                        showSubmissions 
-                          ? 'bg-gray-500 hover:bg-gray-600 text-white' 
-                          : 'bg-purple-600 hover:bg-purple-700 text-white'
-                      }`}
-                    >
-                      <span>{showSubmissions ? 'Hide Submissions' : 'Show Submissions'}</span>
-                      <span>{showSubmissions ? '▼' : '▶'}</span>
-                    </button>
-                  </div>
-                  
-                  {showSubmissions && (
-                    <div className="space-y-4">
-                      {loadingSubmissions ? (
-                        <div className="text-center py-8">
-                          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto mb-4"></div>
-                          <p className="text-gray-600">Loading submissions...</p>
-                        </div>
-                      ) : submissions.length > 0 ? (
-                        <>
-                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-                            {submissions.map((submission) => (
-                              <div key={submission._id} className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-                                <div className="flex items-center justify-between mb-2">
-                                  <span className="font-medium text-gray-900">
-                                    {submission.username}
-                                  </span>
-                                  <div className="flex items-center space-x-2">
-                                    <span className="text-xs text-gray-500">
-                                      {new Date(submission.submissionDate).toLocaleString()}
-                                    </span>
-                                    {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
-                                      <button
-                                        onClick={() => handleDeleteSubtitleSubmission(submission._id)}
-                                        className="text-red-500 hover:text-red-700 text-xs"
-                                        title="Delete submission"
-                                        data-submission-id={submission._id}
-                                      >
-                                        🗑️
-                                      </button>
-                                    )}
-                                  </div>
-                                </div>
-                                <div className="bg-white rounded p-3 border border-gray-200">
-                                  <p className="text-gray-800 text-sm leading-relaxed">
-                                    {submission.chineseTranslation}
-                                  </p>
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                          <div className="flex justify-between items-center pt-4 border-t border-gray-200">
-                            <span className="text-sm text-gray-600">
-                              {submissionCount} submission{submissionCount !== 1 ? 's' : ''} for this segment
-                            </span>
-                          </div>
-                        </>
-                      ) : (
-                        <div className="text-center py-8">
-                          <div className="bg-gray-100 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-                            <span className="text-2xl">📝</span>
-                          </div>
-                          <h4 className="text-lg font-medium text-gray-900 mb-2">No submissions yet</h4>
-                          <p className="text-gray-600">
-                            Be the first to submit a translation for this segment!
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
+            ) : null}
+            {weeklyPractice.length > 0 ? weeklyPractice.map((practice) => (
+              <div key={practice._id} className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
+                <div className="text-gray-900 whitespace-pre-wrap mb-2">{renderFormatted(practice.content)}</div>
               </div>
+            )) : (
+              <div className="text-gray-600">No practice items for Week 2 yet.</div>
             )}
           </div>
+        ) : null}
+        {false && (
+            <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+               <div className="mb-4">
+                 <h3 className="text-xl font-bold text-gray-900 mb-2">{videoInfo.title}</h3>
+               </div>
+               
+               {/* Video Player */}
+               <div className="bg-black rounded-lg aspect-video overflow-hidden relative">
+                 <video
+                   className="w-full h-full"
+                   controls
+                   preload="metadata"
+                   id="nike-video"
+                   onError={(e) => console.error('Video loading error:', e)}
+                   onLoadStart={() => console.log('Video loading started')}
+                   onCanPlay={() => console.log('Video can play')}
+                 >
+                   <source src="https://huggingface.co/spaces/linguabot/transcreation-frontend/resolve/main/public/videos/nike-winning-isnt-for-everyone.mp4" type="video/mp4" />
+                   Your browser does not support the video tag.
+                 </video>
+                 
+                 {/* On-screen subtitles */}
+                 {currentDisplayedSubtitle && (
+                   <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10">
+                     <div className="bg-black bg-opacity-80 text-white px-6 py-3 rounded-lg text-center max-w-lg">
+                       <p className={`text-base font-medium leading-relaxed tracking-wide ${currentDisplayedSubtitle.length <= 42 ? 'whitespace-nowrap' : 'whitespace-pre-line'}`} style={{ fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
+                         {formatSubtitleForDisplay(currentDisplayedSubtitle)}
+                       </p>
+                     </div>
+                   </div>
+                 )}
+               </div>
+             </div>
+ 
+             {/* Right Panel - Translation Workspace */}
+             <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+               <h3 className="text-xl font-bold text-gray-900 mb-4">Translation Workspace</h3>
+               
+               {/* Segment Navigation Grid */}
+               {loadingSubtitles ? (
+                 <div className="grid grid-cols-9 gap-1 mb-6">
+                   {Array.from({ length: 26 }, (_, i) => (
+                     <div key={i} className="px-1 py-1 rounded text-xs w-full bg-gray-200 animate-pulse">
+                       {i + 1}
+                     </div>
+                   ))}
+                 </div>
+               ) : (
+                 <div className="grid grid-cols-9 gap-1 mb-6">
+                   {subtitleSegments.map((segment) => (
+                     <button
+                       key={segment.id}
+                       onClick={() => handleSegmentClick(segment.id)}
+                       className={`px-1 py-1 rounded text-xs w-full ${getSegmentButtonClass(segment.id)}`}
+                     >
+                       {segment.id}
+                     </button>
+                   ))}
+                 </div>
+               )}
+               
+               {/* Admin Time Code Editor */}
+               {editingSegment && (((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
+                 <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4">
+                   <h4 className="text-sm font-medium text-indigo-800 mb-2">Edit Time Codes for Segment {editingSegment}</h4>
+                   <div className="grid grid-cols-2 gap-2">
+                     <div>
+                       <label className="block text-xs text-indigo-700 mb-1">Start Time</label>
+                       <input
+                         type="text"
+                         id="startTimeInput"
+                         defaultValue={subtitleSegments[editingSegment - 1]?.startTime}
+                         className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
+                         placeholder="00:00:00,000"
+                       />
+                     </div>
+                     <div>
+                       <label className="block text-xs text-indigo-700 mb-1">End Time</label>
+                       <input
+                         type="text"
+                         id="endTimeInput"
+                         defaultValue={subtitleSegments[editingSegment - 1]?.endTime}
+                         className="w-full px-2 py-1 text-xs border border-indigo-300 rounded"
+                         placeholder="00:00:00,000"
+                       />
+                     </div>
+                   </div>
+                   <div className="flex space-x-2 mt-2">
+                     <button
+                       onClick={() => setEditingSegment(null)}
+                       className="px-2 py-1 text-xs bg-gray-500 text-white rounded"
+                     >
+                       Cancel
+                     </button>
+                     <button
+                       onClick={() => {
+                         const startInput = document.getElementById('startTimeInput') as HTMLInputElement;
+                         const endInput = document.getElementById('endTimeInput') as HTMLInputElement;
+                         if (startInput && endInput && startInput.value && endInput.value) {
+                           handleSaveTimeCode(editingSegment, startInput.value, endInput.value);
+                         }
+                       }}
+                       className="px-2 py-1 text-xs bg-indigo-600 text-white rounded"
+                     >
+                       Save
+                     </button>
+                   </div>
+                 </div>
+               )}
+               
+               {/* Current Segment Details */}
+               <div className="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-200">
+                 <div className="flex items-center justify-between">
+                   <p className="text-gray-800">
+                     Segment {currentSegment}: {subtitleSegments[currentSegment - 1]?.startTime} – {subtitleSegments[currentSegment - 1]?.endTime} ({subtitleSegments[currentSegment - 1]?.duration})
+                   </p>
+                   {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
+                     <button
+                       onClick={() => handleEditTimeCode(currentSegment)}
+                       className="bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-1 rounded text-xs flex items-center space-x-1"
+                       title="Edit time codes"
+                     >
+                       <PencilIcon className="w-3 h-3" />
+                       <span>Edit</span>
+                     </button>
+                   )}
+                 </div>
+               </div>
+               
+               {/* Source Text */}
+               <div className="mb-4">
+                 <label className="block text-sm font-medium text-gray-700 mb-2">Source Text</label>
+                 <textarea
+                   value={subtitleText}
+                   readOnly
+                   className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-800"
+                   rows={2}
+                 />
+               </div>
+               
+               {/* Target Text */}
+               <div className="mb-4">
+                 <label className="block text-sm font-medium text-gray-700 mb-2">Target Text</label>
+                 <textarea
+                   value={targetText}
+                   onChange={(e) => handleTargetTextChange(e.target.value)}
+                   className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                   rows={2}
+                   placeholder="Enter your translation..."
+                 />
+                 <div className="flex justify-between items-center mt-2">
+                   <span className="text-xs text-gray-600">Recommended: 2 lines max, 16 chars/line (Netflix standard)</span>
+                   <span className="text-xs text-gray-600">{characterCount} characters</span>
+                 </div>
+               </div>
+               
+               {/* Action Buttons */}
+               <div className="flex space-x-3 mb-4">
+                 <button
+                   onClick={handleSaveTranslation}
+                   className={`px-4 py-2 rounded-lg ${
+                     saveStatus === 'Saved!' ? 'bg-green-600 hover:bg-green-700' :
+                     saveStatus === 'Saved Locally' ? 'bg-yellow-600 hover:bg-yellow-700' :
+                     saveStatus === 'Error' ? 'bg-red-600 hover:bg-red-700' :
+                     'bg-indigo-600 hover:bg-indigo-700'
+                   } text-white`}
+                 >
+                   {saveStatus}
+                 </button>
+                 <button
+                   onClick={handlePreviewTranslation}
+                   className={`px-4 py-2 rounded-lg flex items-center space-x-2 ${
+                     showTranslatedSubtitles 
+                       ? 'bg-green-500 hover:bg-green-600 text-white' 
+                       : 'bg-gray-500 hover:bg-gray-600 text-white'
+                   }`}
+                 >
+                   <span>{showTranslatedSubtitles ? 'Show Original' : 'Show Translation'}</span>
+                 </button>
+               </div>
+               
+               {/* Translation Progress */}
+               <div className="mb-4">
+                 <div className="flex justify-between items-center mb-2">
+                   <span className="text-sm font-medium text-gray-700">Translation Progress</span>
+                   <span className="text-sm text-gray-600">{Object.keys(subtitleTranslations).length} of {subtitleSegments.length} segments completed</span>
+                 </div>
+                 <div className="w-full bg-gray-200 rounded-full h-2">
+                   <div 
+                     className="bg-green-500 h-2 rounded-full transition-all duration-300"
+                     style={{ width: `${(Object.keys(subtitleTranslations).length / subtitleSegments.length) * 100}%` }}
+                   ></div>
+                 </div>
+               </div>
+             </div>
+             
+             {/* Submissions Panel - Only show for Week 2 subtitling */}
+-            {selectedWeek === 2 && (
++            {false && selectedWeek === 2 && (
+               <div className="mt-6 col-span-2">
+                 <div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
+                   <div className="flex items-center justify-between mb-4">
+                     <h3 className="text-lg font-semibold text-gray-900">
+                       👥 View Submissions for Segment {currentSegment}
+                     </h3>
+                     <button
+                       onClick={toggleSubmissions}
+                       className={`px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors duration-200 ${
+                         showSubmissions 
+                           ? 'bg-gray-500 hover:bg-gray-600 text-white' 
+                           : 'bg-purple-600 hover:bg-purple-700 text-white'
+                       }`}
+                     >
+                       <span>{showSubmissions ? 'Hide Submissions' : 'Show Submissions'}</span>
+                       <span>{showSubmissions ? '▼' : '▶'}</span>
+                     </button>
+                   </div>
+                   
+                   {showSubmissions && (
+                     <div className="space-y-4">
+                       {loadingSubmissions ? (
+                         <div className="text-center py-8">
+                           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600 mx-auto mb-4"></div>
+                           <p className="text-gray-600">Loading submissions...</p>
+                         </div>
+                       ) : submissions.length > 0 ? (
+                         <>
+                           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                             {submissions.map((submission) => (
+                               <div key={submission._id} className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+                                 <div className="flex items-center justify-between mb-2">
+                                   <span className="font-medium text-gray-900">
+                                     {submission.username}
+                                   </span>
+                                   <div className="flex items-center space-x-2">
+                                     <span className="text-xs text-gray-500">
+                                       {new Date(submission.submissionDate).toLocaleString()}
+                                     </span>
+                                     {((localStorage.getItem('viewMode')||'auto') === 'student') ? false : (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin') && (
+                                       <button
+                                         className="px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+                                         onClick={async () => {
+                                           try {
+                                             await api.delete(`/api/subtitles/${submission._id}`);
+                                             await fetchUserSubmissions(weeklyPractice);
+                                           } catch (e) {
+                                             console.error('Delete subtitle submission failed', e);
+                                           }
+                                         }}
+                                       >
+                                         Delete
+                                       </button>
+                                     )}
+                                   </div>
+                                 </div>
+                                 <div className="text-sm text-gray-800 whitespace-pre-wrap">{submission.chineseTranslation}</div>
+                               </div>
+                             ))}
+                           </div>
+                         </>
+                       ) : (
+                         <div className="text-gray-600">No submissions yet.</div>
+                       )}
+                     </div>
+                   )}
+                 </div>
+               </div>
+             )}
+          </div>
         ) : (
           /* Weekly Practice */
         <div className="space-y-6">