···

       
30
       
 
       
	@state() private uploadComplete = false;

     

       
31
       
 
       
	@state() private uploadedTranscriptionId: string | null = null;

     

       
32
       
 
       
	@state() private submitting = false;

     

       
0
       
 
       

     

       
33
       
 
       


     

       
34
       
 
       
	static override styles = css`

     

       
35
       
 
       
    :host {

     
···

       
230
       
 
       


     

       
231
       
 
       
    .meeting-time-selector {

     

       
232
       
 
       
      display: flex;

     

       
233
       
-
       
      flex-direction: column;

     

       
234
       
 
       
      gap: 0.5rem;

     

       
235
       
 
       
    }

     

       
236
       
 
       


     
···

       
292
       
 
       
			this.uploadComplete = false;

     

       
293
       
 
       
			this.uploadedTranscriptionId = null;

     

       
294
       
 
       
			this.submitting = false;

     

       
0
       
 
       

     

       
295
       
 
       


     

       
296
       
 
       
			if (this.selectedFile && this.classId) {

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
297
       
 
       
				// Start both detection and upload in parallel

     

       
298
       
 
       
				this.detectMeetingTime();

     

       
299
       
 
       
				this.startBackgroundUpload();

     
···

       
360
       
 
       
	}

     

       
361
       
 
       


     

       
362
       
 
       
	private async detectMeetingTime() {

     

       
363
       
-
       
		if (!this.selectedFile || !this.classId) return;

     

       
364
       
 
       


     

       
365
       
 
       
		this.detectingMeetingTime = true;

     

       
366
       
 
       


     

       
367
       
 
       
		try {

     

       
368
       
 
       
			const formData = new FormData();

     

       
369
       
-
       
			formData.append("audio", this.selectedFile);

     

       
370
       
 
       
			formData.append("class_id", this.classId);

     

       
371
       
 
       


     

       
372
       
-
       
			// Send the file's original lastModified timestamp (preserved by browser)

     

       
373
       
-
       
			// This is more accurate than server-side file timestamps

     

       
374
       
-
       
			if (this.selectedFile.lastModified) {

     

       
375
       
-
       
				formData.append(

     

       
376
       
-
       
					"file_timestamp",

     

       
377
       
-
       
					this.selectedFile.lastModified.toString(),

     

       
378
       
-
       
				);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
379
       
 
       
			}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
380
       
 
       


     

       
381
       
 
       
			const response = await fetch("/api/transcriptions/detect-meeting-time", {

     

       
382
       
 
       
				method: "POST",

     
···

       
403
       
 
       


     

       
404
       
 
       
	private handleMeetingTimeSelect(meetingTimeId: string) {

     

       
405
       
 
       
		this.selectedMeetingTimeId = meetingTimeId;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
406
       
 
       
	}

     

       
407
       
 
       


     

       
408
       
 
       
	private handleSectionChange(e: Event) {

     
···

       
458
       
 
       
		this.uploadProgress = 0;

     

       
459
       
 
       
		this.uploadedTranscriptionId = null;

     

       
460
       
 
       
		this.submitting = false;

     

       
0
       
 
       

     

       
461
       
 
       
		this.dispatchEvent(new CustomEvent("close"));

     

       
462
       
 
       
	}

     

       
463
       
 
       


     
···

       
506
       
 
       
							this.selectedFile

     

       
507
       
 
       
								? html`

     

       
508
       
 
       
                <div class="form-group">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
509
       
 
       
                  <label>Meeting Time</label>

     

       
510
       
 
       
                  ${

     

       
511
       
 
       
										this.detectingMeetingTime

     
···

       
540
       
 
       
						}

     

       
541
       
 
       


     

       
542
       
 
       
            ${

     

       
543
       
-
       
							this.sections.length > 1 && this.selectedFile

     

       
544
       
 
       
								? html`

     

       
545
       
 
       
                <div class="form-group">

     

       
546
       
-
       
                  <label for="section">Section (optional)</label>

     

       
547
       
 
       
                  <select

     

       
548
       
 
       
                    id="section"

     

       
549
       
 
       
                    @change=${this.handleSectionChange}

     

       
550
       
 
       
                    ?disabled=${this.uploading}

     

       
0
       
 
       

     

       
551
       
 
       
                  >

     

       
552
       
 
       
                    <option value="">Use my section ${this.userSection ? `(${this.sections.find((s) => s.id === this.userSection)?.section_number})` : ""}</option>

     

       
553
       
-
       
                    ${this.sections.map(

     

       
554
       
-
       
											(section) => html`

     

       
0
       
 
       

     

       
0
       
 
       

     

       
555
       
 
       
                      <option value=${section.id}>${section.section_number}</option>

     

       
556
       
 
       
                    `,

     

       
557
       
-
       
										)}

     

       
558
       
 
       
                  </select>

     

       
559
       
 
       
                  <div class="help-text">

     

       
560
       
-
       
                    Override which section this recording is for

     

       
561
       
 
       
                  </div>

     

       
562
       
 
       
                </div>

     

       
563
       
 
       
              `

     
···

       
597
       
 
       
            <button class="btn-cancel" @click=${this.handleClose} ?disabled=${this.uploading || this.submitting}>

     

       
598
       
 
       
              Cancel

     

       
599
       
 
       
            </button>

     

       
600
       
-
       
            ${this.uploadComplete && this.selectedMeetingTimeId ? html`

     

       
0
       
 
       

     

       
0
       
 
       

     

       
601
       
 
       
              <button class="btn-upload" @click=${this.handleSubmit} ?disabled=${this.submitting}>

     

       
602
       
 
       
                ${this.submitting ? "Submitting..." : "Confirm & Submit"}

     

       
603
       
 
       
              </button>

     

       
604
       
-
       
            ` : ""}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
605
       
 
       
          </div>

     

       
606
       
 
       
        </div>

     

       
607
       
 
       
      </div>

     

···

       
30
       
 
       
	@state() private uploadComplete = false;

     

       
31
       
 
       
	@state() private uploadedTranscriptionId: string | null = null;

     

       
32
       
 
       
	@state() private submitting = false;

     

       
33
       
+
       
	@state() private selectedDate: string = "";

     

       
34
       
 
       


     

       
35
       
 
       
	static override styles = css`

     

       
36
       
 
       
    :host {

     
···

       
231
       
 
       


     

       
232
       
 
       
    .meeting-time-selector {

     

       
233
       
 
       
      display: flex;

     

       
0
       
 
       

     

       
234
       
 
       
      gap: 0.5rem;

     

       
235
       
 
       
    }

     

       
236
       
 
       


     
···

       
292
       
 
       
			this.uploadComplete = false;

     

       
293
       
 
       
			this.uploadedTranscriptionId = null;

     

       
294
       
 
       
			this.submitting = false;

     

       
295
       
+
       
			this.selectedDate = "";

     

       
296
       
 
       


     

       
297
       
 
       
			if (this.selectedFile && this.classId) {

     

       
298
       
+
       
				// Set initial date from file

     

       
299
       
+
       
				const fileDate = new Date(this.selectedFile.lastModified);

     

       
300
       
+
       
				this.selectedDate = fileDate.toISOString().split("T")[0] || "";

     

       
301
       
 
       
				// Start both detection and upload in parallel

     

       
302
       
 
       
				this.detectMeetingTime();

     

       
303
       
 
       
				this.startBackgroundUpload();

     
···

       
364
       
 
       
	}

     

       
365
       
 
       


     

       
366
       
 
       
	private async detectMeetingTime() {

     

       
367
       
+
       
		if (!this.classId) return;

     

       
368
       
 
       


     

       
369
       
 
       
		this.detectingMeetingTime = true;

     

       
370
       
 
       


     

       
371
       
 
       
		try {

     

       
372
       
 
       
			const formData = new FormData();

     

       
0
       
 
       

     

       
373
       
 
       
			formData.append("class_id", this.classId);

     

       
374
       
 
       


     

       
375
       
+
       
			// Use selected date or file's lastModified timestamp

     

       
376
       
+
       
			let timestamp: number;

     

       
377
       
+
       
			if (this.selectedDate) {

     

       
378
       
+
       
				// Convert YYYY-MM-DD to timestamp (noon local time to avoid timezone issues)

     

       
379
       
+
       
				const date = new Date(`${this.selectedDate}T12:00:00`);

     

       
380
       
+
       
				timestamp = date.getTime();

     

       
381
       
+
       
			} else if (this.selectedFile?.lastModified) {

     

       
382
       
+
       
				timestamp = this.selectedFile.lastModified;

     

       
383
       
+
       
			} else {

     

       
384
       
+
       
				return;

     

       
385
       
 
       
			}

     

       
386
       
+
       


     

       
387
       
+
       
			formData.append("file_timestamp", timestamp.toString());

     

       
388
       
 
       


     

       
389
       
 
       
			const response = await fetch("/api/transcriptions/detect-meeting-time", {

     

       
390
       
 
       
				method: "POST",

     
···

       
411
       
 
       


     

       
412
       
 
       
	private handleMeetingTimeSelect(meetingTimeId: string) {

     

       
413
       
 
       
		this.selectedMeetingTimeId = meetingTimeId;

     

       
414
       
+
       
	}

     

       
415
       
+
       


     

       
416
       
+
       
	private handleDateChange(e: Event) {

     

       
417
       
+
       
		const input = e.target as HTMLInputElement;

     

       
418
       
+
       
		this.selectedDate = input.value;

     

       
419
       
+
       
		// Re-detect meeting time when date changes

     

       
420
       
+
       
		if (this.selectedDate && this.classId) {

     

       
421
       
+
       
			this.detectMeetingTime();

     

       
422
       
+
       
		}

     

       
423
       
 
       
	}

     

       
424
       
 
       


     

       
425
       
 
       
	private handleSectionChange(e: Event) {

     
···

       
475
       
 
       
		this.uploadProgress = 0;

     

       
476
       
 
       
		this.uploadedTranscriptionId = null;

     

       
477
       
 
       
		this.submitting = false;

     

       
478
       
+
       
		this.selectedDate = "";

     

       
479
       
 
       
		this.dispatchEvent(new CustomEvent("close"));

     

       
480
       
 
       
	}

     

       
481
       
 
       


     
···

       
524
       
 
       
							this.selectedFile

     

       
525
       
 
       
								? html`

     

       
526
       
 
       
                <div class="form-group">

     

       
527
       
+
       
                  <label for="date">Recording Date</label>

     

       
528
       
+
       
                  <input

     

       
529
       
+
       
                    type="date"

     

       
530
       
+
       
                    id="date"

     

       
531
       
+
       
                    .value=${this.selectedDate}

     

       
532
       
+
       
                    @change=${this.handleDateChange}

     

       
533
       
+
       
                    ?disabled=${this.uploading}

     

       
534
       
+
       
                    style="padding: 0.75rem; border: 1px solid var(--secondary); border-radius: 4px; font-size: 0.875rem; color: var(--text); background: var(--background);"

     

       
535
       
+
       
                  />

     

       
536
       
+
       
                  <div class="help-text">

     

       
537
       
+
       
                    Change the date to detect the correct meeting time

     

       
538
       
+
       
                  </div>

     

       
539
       
+
       
                </div>

     

       
540
       
+
       


     

       
541
       
+
       
                <div class="form-group">

     

       
542
       
 
       
                  <label>Meeting Time</label>

     

       
543
       
 
       
                  ${

     

       
544
       
 
       
										this.detectingMeetingTime

     
···

       
573
       
 
       
						}

     

       
574
       
 
       


     

       
575
       
 
       
            ${

     

       
576
       
+
       
							this.sections.length > 0 && this.selectedFile

     

       
577
       
 
       
								? html`

     

       
578
       
 
       
                <div class="form-group">

     

       
579
       
+
       
                  <label for="section">Section</label>

     

       
580
       
 
       
                  <select

     

       
581
       
 
       
                    id="section"

     

       
582
       
 
       
                    @change=${this.handleSectionChange}

     

       
583
       
 
       
                    ?disabled=${this.uploading}

     

       
584
       
+
       
                    .value=${this.selectedSectionId || this.userSection || ""}

     

       
585
       
 
       
                  >

     

       
586
       
 
       
                    <option value="">Use my section ${this.userSection ? `(${this.sections.find((s) => s.id === this.userSection)?.section_number})` : ""}</option>

     

       
587
       
+
       
                    ${this.sections

     

       
588
       
+
       
											.filter((section) => section.id !== this.userSection)

     

       
589
       
+
       
											.map(

     

       
590
       
+
       
												(section) => html`

     

       
591
       
 
       
                      <option value=${section.id}>${section.section_number}</option>

     

       
592
       
 
       
                    `,

     

       
593
       
+
       
											)}

     

       
594
       
 
       
                  </select>

     

       
595
       
 
       
                  <div class="help-text">

     

       
596
       
+
       
                    Select which section this recording is for (defaults to your section)

     

       
597
       
 
       
                  </div>

     

       
598
       
 
       
                </div>

     

       
599
       
 
       
              `

     
···

       
633
       
 
       
            <button class="btn-cancel" @click=${this.handleClose} ?disabled=${this.uploading || this.submitting}>

     

       
634
       
 
       
              Cancel

     

       
635
       
 
       
            </button>

     

       
636
       
+
       
            ${

     

       
637
       
+
       
							this.uploadComplete && this.selectedMeetingTimeId

     

       
638
       
+
       
								? html`

     

       
639
       
 
       
              <button class="btn-upload" @click=${this.handleSubmit} ?disabled=${this.submitting}>

     

       
640
       
 
       
                ${this.submitting ? "Submitting..." : "Confirm & Submit"}

     

       
641
       
 
       
              </button>

     

       
642
       
+
       
            `

     

       
643
       
+
       
								: ""

     

       
644
       
+
       
						}

     

       
645
       
 
       
          </div>

     

       
646
       
 
       
        </div>

     

       
647
       
 
       
      </div>