Merge pull request #254 from TheAngryRaven/BETA

Release 2.7.1

Author: TheAngryRaven

CHANGELOG.md

@@ -11,6 +11,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 > from git history and grouped by theme rather than exhaustive per-commit
 > detail.
 
+## [2.7.1] - 2026-06-19
+
+### Changed
+- **Course editor sector toggles.** Once all three major sectors are assigned
+  (start/finish counts as one), the **Major** toggle is hidden on the remaining
+  sub-sector rows — the datalogger only ever uses three majors, so there's
+  nothing to promote them to. Un-flag an existing major and the toggles
+  immediately reappear.
+- **Video panel hints.** The "no video loaded" panel now pads its hint text so
+  the GoPro tip no longer clips against the panel edges on narrow screens, and
+  adds a second tip: you can drop in **all** your files at once — logs and
+  videos together — and the app sorts out which videos go where.
+
 ## [2.7.0] - 2026-06-19
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "doves-dataviewer",
   "private": true,
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Open-source, offline-first motorsport telemetry viewer (Dove's DataViewer / HackTheTrack).",
   "license": "GPL-3.0-or-later",
   "author": "TheAngryRaven",

src/components/VideoPlayer.tsx

@@ -570,16 +570,17 @@ export const VideoPlayer = memo(function VideoPlayer({
   // No video loaded
   if (!state.videoUrl) {
     return (
-      <div className="h-full flex flex-col items-center justify-center bg-muted/20 gap-4">
+      <div className="h-full flex flex-col items-center justify-center bg-muted/20 gap-4 px-6 text-center">
         <Video className="w-12 h-12 text-muted-foreground/50" />
         <p className="text-muted-foreground text-sm">{t("player.noVideo")}</p>
         {state.videoFileName && (
-          <p className="text-xs text-muted-foreground">{t("player.lastUsed", { name: state.videoFileName })}</p>
+          <p className="text-xs text-muted-foreground max-w-xs break-words">{t("player.lastUsed", { name: state.videoFileName })}</p>
         )}
         <Button variant="outline" size="sm" onClick={actions.loadVideo} className="gap-2">
           <Video className="w-4 h-4" /> {t("player.loadVideo")}
         </Button>
-        <p className="text-xs text-muted-foreground/70">{t("player.goproHint")}</p>
+        <p className="text-xs text-muted-foreground/70 max-w-xs">{t("player.goproHint")}</p>
+        <p className="text-xs text-muted-foreground/70 max-w-xs">{t("player.bulkSelectHint")}</p>
         <RecordingPicker state={state} actions={actions} />
       </div>
     );

src/components/track-editor/SectorListEditor.tsx

@@ -15,7 +15,7 @@ import { Switch } from '@/components/ui/switch';
 import { cn } from '@/lib/utils';
 import { CourseSector, Course } from '@/types/racing';
 import {
-  sectorLabels, validateCourseSectors, isAtSectorLimit, MAX_SECTOR_LINES,
+  sectorLabels, validateCourseSectors, isAtSectorLimit, isAtMajorLimit, MAX_SECTOR_LINES,
 } from '@/lib/courseSectors';
 import type { SelectedLine } from '@/hooks/useTrackEditorForm';
 
@@ -49,6 +49,9 @@ export function SectorListEditor({
   const labels = useMemo(() => sectorLabels(course), [course]);
   const validation = useMemo(() => validateCourseSectors(course), [course]);
   const atLimit = isAtSectorLimit(course);
+  // Once all three majors are taken, only existing majors keep their toggle (so
+  // they can be un-flagged); non-major rows hide it since none can be promoted.
+  const atMajorLimit = isAtMajorLimit(course);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
@@ -124,6 +127,9 @@ export function SectorListEditor({
                   label={labels[i + 1] ?? ''}
                   sector={sec}
                   selected={selectedLine === i}
+                  // Hide the major toggle on non-major rows once the 3-major cap
+                  // is hit; major rows always keep it so they can be un-flagged.
+                  showMajorToggle={sec.major || !atMajorLimit}
                   onSelect={() => onSelectLine(i)}
                   onToggleMajor={() => onToggleMajor(i)}
                   onRemove={() => onRemoveSector(i)}
@@ -158,12 +164,15 @@ interface SectorRowProps {
   label: string;
   sector: CourseSector;
   selected: boolean;
+  /** Whether the "major" toggle is shown — hidden on non-major rows once the
+   *  3-major cap is reached (the logger only ever uses three). */
+  showMajorToggle: boolean;
   onSelect: () => void;
   onToggleMajor: () => void;
   onRemove: () => void;
 }
 
-function SectorRow({ index, label, sector, selected, onSelect, onToggleMajor, onRemove }: SectorRowProps) {
+function SectorRow({ index, label, sector, selected, showMajorToggle, onSelect, onToggleMajor, onRemove }: SectorRowProps) {
   const { t } = useTranslation('tracks');
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sortableId(index) });
   const style = { transform: CSS.Transform.toString(transform), transition };
@@ -193,10 +202,12 @@ function SectorRow({ index, label, sector, selected, onSelect, onToggleMajor, on
       <button type="button" onClick={onSelect} className="flex-1 text-left text-sm">
         {t('sectors.sectorRow', { label })}
       </button>
-      <label className="flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-muted-foreground">
-        {t('sectors.major')}
-        <Switch checked={sector.major} onCheckedChange={onToggleMajor} aria-label={t('sectors.markMajor')} />
-      </label>
+      {showMajorToggle && (
+        <label className="flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+          {t('sectors.major')}
+          <Switch checked={sector.major} onCheckedChange={onToggleMajor} aria-label={t('sectors.markMajor')} />
+        </label>
+      )}
       <Button
         variant="ghost"
         size="icon"

src/lib/courseSectors.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { Course, SectorLine } from '@/types/racing';
 import {
   normalizeCourseSectors, majorSectorLines, legacyMirror, sectorLabels,
-  validateCourseSectors, isAtSectorLimit, rollupMajorSectors, centeredSectorLine,
+  validateCourseSectors, isAtSectorLimit, isAtMajorLimit, rollupMajorSectors, centeredSectorLine,
   MAX_SECTOR_LINES, MAX_MAJOR_SECTORS, DEFAULT_SECTOR_HALF_LENGTH_DEG,
 } from './courseSectors';
 
@@ -120,6 +120,30 @@ describe('isAtSectorLimit', () => {
   });
 });
 
+describe('isAtMajorLimit', () => {
+  it('counts start/finish toward the major cap', () => {
+    // No sub-sectors: start/finish alone is 1 of 3 majors — not at the cap.
+    expect(isAtMajorLimit(baseCourse())).toBe(false);
+    expect(isAtMajorLimit(baseCourse({ sectors: [] }))).toBe(false);
+  });
+
+  it('is false while fewer than MAX_MAJOR_SECTORS majors are flagged', () => {
+    // One flagged major + start/finish = 2 of 3.
+    const sectors = [{ line: line(0), major: true }, { line: line(1), major: false }];
+    expect(isAtMajorLimit(baseCourse({ sectors }))).toBe(false);
+  });
+
+  it('is true once start/finish + flagged majors reach the cap', () => {
+    // Two flagged majors + start/finish = 3 of 3.
+    const sectors = [
+      { line: line(0), major: true },
+      { line: line(1), major: false },
+      { line: line(2), major: true },
+    ];
+    expect(isAtMajorLimit(baseCourse({ sectors }))).toBe(true);
+  });
+});
+
 describe('centeredSectorLine', () => {
   it('builds a horizontal line centered on the point with the default span', () => {
     const l = centeredSectorLine({ lat: 28.41, lon: -81.38 });

src/lib/courseSectors.ts

@@ -131,6 +131,17 @@ export function isAtSectorLimit(course: Course): boolean {
   return (course.sectors ?? []).length >= MAX_COURSE_SECTORS;
 }
 
+/**
+ * True once all `MAX_MAJOR_SECTORS` majors are spoken for (start/finish + the
+ * flagged sub-sectors). The logger only ever sees three majors, so the editor
+ * hides the "major" toggle on non-major rows at this point; un-flagging an
+ * existing major drops back below the cap and the toggles return.
+ */
+export function isAtMajorLimit(course: Course): boolean {
+  const flaggedMajors = (course.sectors ?? []).filter((s) => s.major).length;
+  return flaggedMajors + 1 >= MAX_MAJOR_SECTORS; // + start/finish
+}
+
 /**
  * Roll the fine-grained per-segment times up into the classic S1/S2/S3, where
  * each major sector spans from its major line to the next major line. A major

src/locales/de/video.json

@@ -5,6 +5,7 @@
     "lastUsed": "Zuletzt verwendet: {{name}}",
     "loadVideo": "Video laden",
     "goproHint": "Mit einer GoPro aufgenommen? Wählen Sie alle Kapiteldateien auf einmal aus – sie werden als ein durchgehendes Video abgespielt.",
+    "bulkSelectHint": "Tipp: Sie können alle Ihre Dateien auf einmal auswählen – Logs und Videos zusammen – und wir ordnen die Videos automatisch zu.",
     "chapterShort": "{{current}}/{{total}}",
     "chapterOf": "Kapitel {{current}} von {{total}}",
     "noVideoForPortion": "Kein Video für diesen Abschnitt",

src/locales/en/video.json

@@ -4,6 +4,7 @@
     "lastUsed": "Last used: {{name}}",
     "loadVideo": "Load Video",
     "goproHint": "Recorded on a GoPro? Select all the chapter files at once — they'll play as one continuous video.",
+    "bulkSelectHint": "Tip: you can select all your files at once — logs and videos together — and we'll sort out which videos go where.",
     "chapterShort": "{{current}}/{{total}}",
     "chapterOf": "Chapter {{current}} of {{total}}",
     "noVideoForPortion": "No video for this portion",

src/locales/es/video.json

@@ -5,6 +5,7 @@
     "lastUsed": "Último usado: {{name}}",
     "loadVideo": "Cargar vídeo",
     "goproHint": "¿Grabaste con una GoPro? Selecciona todos los archivos de capítulos a la vez: se reproducirán como un único vídeo continuo.",
+    "bulkSelectHint": "Consejo: puedes seleccionar todos tus archivos a la vez —registros y vídeos juntos— y nosotros nos encargamos de asignar cada vídeo.",
     "chapterShort": "{{current}}/{{total}}",
     "chapterOf": "Capítulo {{current}} de {{total}}",
     "noVideoForPortion": "No hay vídeo para esta parte",

src/locales/fr/video.json

@@ -5,6 +5,7 @@
     "lastUsed": "Dernière utilisée : {{name}}",
     "loadVideo": "Charger une vidéo",
     "goproHint": "Filmé avec une GoPro ? Sélectionnez tous les fichiers de chapitres à la fois : ils seront lus comme une seule vidéo continue.",
+    "bulkSelectHint": "Astuce : vous pouvez sélectionner tous vos fichiers d'un coup — journaux et vidéos ensemble — et nous nous occupons d'attribuer chaque vidéo.",
     "chapterShort": "{{current}}/{{total}}",
     "chapterOf": "Chapitre {{current}} sur {{total}}",
     "noVideoForPortion": "Aucune vidéo pour cette portion",