lightning-pose-app 1.8.1a3__py3-none-any.whl → 1.8.1a5__py3-none-any.whl

litpose_app/ngdist/ng_app/{main-LJHMLKBL.js → main-6XYUWDGZ.js}

@@ -40016,10 +40016,18 @@ var ProjectInfoService = class _ProjectInfoService {
   // undefined means not yet requested
   // null means requested and not present
   _projectInfo = void 0;
+  // The directory that we are storing fine videos in.
+  fineVideoDir = "";
   async loadProjectInfo() {
-    const response = await this.rpc.call("getProjectInfo");
-    this._projectInfo = response.projectInfo ? new ProjectInfo(response.projectInfo) : null;
-    this.setAllViews(this._projectInfo?.views ?? []);
+    const promises = [];
+    promises.push(this.rpc.call("getProjectInfo").then((response) => {
+      this._projectInfo = response.projectInfo ? new ProjectInfo(response.projectInfo) : null;
+      this.setAllViews(this._projectInfo?.views ?? []);
+    }));
+    promises.push(this.rpc.call("getFineVideoDir").then((response) => {
+      this.fineVideoDir = response.path;
+    }));
+    return Promise.allSettled(promises);
   }
   get projectInfo() {
     return this._projectInfo;
@@ -40182,6 +40190,32 @@ var CsvParserService = class _CsvParserService {
   }], null, null);
 })();
 
+// src/app/utils/comparators.ts
+var compareStringArraysOrdered = (prev, curr) => {
+  if (prev.length !== curr.length) {
+    return false;
+  }
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i] !== curr[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+var createSessionViewComparator = (allViewsOrder) => {
+  return (a, b) => {
+    const indexA = allViewsOrder.indexOf(a.viewName);
+    const indexB = allViewsOrder.indexOf(b.viewName);
+    if (indexA === -1 && indexB === -1)
+      return 0;
+    if (indexA === -1)
+      return 1;
+    if (indexB === -1)
+      return -1;
+    return indexA - indexB;
+  };
+};
+
 // src/app/session.service.ts
 var SessionService = class _SessionService {
   rpc = inject(RpcService);
@@ -40189,14 +40223,23 @@ var SessionService = class _SessionService {
   predictionFiles = [];
   projectInfoService = inject(ProjectInfoService);
   csvParser = inject(CsvParserService);
+  sessionsLoading = signal(false);
   _allSessions = new BehaviorSubject([]);
   allSessions$ = this._allSessions.asObservable();
   allSessions = toSignal(this.allSessions$, { requireSync: true });
   async loadSessions() {
+    try {
+      this.sessionsLoading.set(true);
+      await this._loadSessions();
+    } finally {
+      this.sessionsLoading.set(false);
+    }
+  }
+  async _loadSessions() {
     const projectInfo = this.projectInfoService.projectInfo;
     const response = await this.rpc.call("rglob", {
       baseDir: projectInfo.data_dir,
-      pattern: "**/*.fine.mp4",
+      pattern: "**/*.mp4",
       //temporary
       noDirs: true
     });
@@ -40260,7 +40303,7 @@ var SessionService = class _SessionService {
     this.projectInfoService.setAllKeypoints(allKeypoints);
   }
   getPredictionFilesForSession(sessionKey) {
-    const predictionFiles = this.predictionFiles.filter((p) => p.sessionKey === sessionKey || p.sessionKey === sessionKey.replace(/\.fine$/, ""));
+    const predictionFiles = this.predictionFiles.filter((p) => p.sessionKey === sessionKey);
     return predictionFiles;
   }
   async getPredictionFile(pfile) {
@@ -40296,9 +40339,10 @@ var SessionService = class _SessionService {
         videoPath: projectInfo.data_dir + "/" + filename
       });
     }
+    const cmp = createSessionViewComparator(this.projectInfoService.allViews());
     return Array.from(sessionKeyToItsViewFiles.entries()).map(([key, sessionViews]) => ({
       key: key.replace(/\.mp4$/, ""),
-      views: sessionViews
+      views: [...sessionViews].sort(cmp)
     }));
   }
   static \u0275fac = function SessionService_Factory(__ngFactoryType__) {
@@ -54313,12 +54357,72 @@ var ScrollingModule = class _ScrollingModule {
   }], null, null);
 })();
 
+// src/app/utils/sserx.ts
+function getEventStream(endpoint) {
+  return new Observable((observer) => {
+    if (typeof EventSource === "undefined") {
+      observer.error("EventSource is not supported by this browser.");
+      return;
+    }
+    const eventSource = new EventSource(`${endpoint}`);
+    eventSource.onmessage = (event) => {
+      console.log("Received SSE message:", event.data);
+      observer.next(JSON.parse(event.data));
+    };
+    eventSource.onerror = (error) => {
+      console.error("SSE Error:", error);
+      if (eventSource.readyState === EventSource.CLOSED) {
+        observer.error("SSE connection closed by server.");
+      } else {
+        observer.error(error);
+      }
+    };
+    return () => {
+      console.log("Closing SSE connection.");
+      eventSource.close();
+    };
+  });
+}
+
+// src/app/utils/fine-video.service.ts
+var FineVideoService = class _FineVideoService {
+  projectInfoService = inject(ProjectInfoService);
+  fineVideoStatus$ = getEventStream("/app/v0/rpc/getFineVideoStatus");
+  numPendingTranscodeTasks = toSignal(this.fineVideoStatus$, {
+    initialValue: { pending: 0 }
+  });
+  fineVideoPath(videoPath) {
+    if (!this.projectInfoService.fineVideoDir) {
+      throw new Error("ProjectInfoService.fineVideoDir called but not yet initialized");
+    }
+    const filename = videoPath.split("/").pop();
+    return "/app/v0/files/" + this.projectInfoService.fineVideoDir + "/" + filename;
+  }
+  static \u0275fac = function FineVideoService_Factory(__ngFactoryType__) {
+    return new (__ngFactoryType__ || _FineVideoService)();
+  };
+  static \u0275prov = /* @__PURE__ */ \u0275\u0275defineInjectable({ token: _FineVideoService, factory: _FineVideoService.\u0275fac, providedIn: "root" });
+};
+(() => {
+  (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(FineVideoService, [{
+    type: Injectable,
+    args: [{
+      providedIn: "root"
+    }]
+  }], null, null);
+})();
+
 // src/app/viewer/viewer-left-panel/viewer-sessions-panel.component.ts
 var _c03 = (a0) => ["/viewer", a0];
 var _forTrack0 = ($index, $item) => $item.key;
-function ViewerSessionsPanelComponent_For_16_Template(rf, ctx) {
+function ViewerSessionsPanelComponent_Conditional_5_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "progress", 3);
+  }
+}
+function ViewerSessionsPanelComponent_Conditional_6_For_3_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "li", 9)(1, "a", 10);
+    \u0275\u0275elementStart(0, "li", 7)(1, "a", 8);
     \u0275\u0275text(2);
     \u0275\u0275elementEnd()();
   }
@@ -54330,29 +54434,51 @@ function ViewerSessionsPanelComponent_For_16_Template(rf, ctx) {
     \u0275\u0275textInterpolate1(" ", session_r1.key, " ");
   }
 }
+function ViewerSessionsPanelComponent_Conditional_6_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 4)(1, "ul", 6);
+    \u0275\u0275repeaterCreate(2, ViewerSessionsPanelComponent_Conditional_6_For_3_Template, 3, 4, "li", 7, _forTrack0);
+    \u0275\u0275elementEnd()();
+  }
+  if (rf & 2) {
+    const ctx_r1 = \u0275\u0275nextContext();
+    \u0275\u0275advance(2);
+    \u0275\u0275repeater(ctx_r1.sessionService.allSessions());
+  }
+}
+function ViewerSessionsPanelComponent_Conditional_7_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 5)(1, "span", 9);
+    \u0275\u0275text(2, "info_i");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(3, "span");
+    \u0275\u0275text(4, "Videos will populate once they are transcoded.");
+    \u0275\u0275elementEnd()();
+  }
+}
 var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
   sessionService = inject(SessionService);
+  fineVideoService = inject(FineVideoService);
   static \u0275fac = function ViewerSessionsPanelComponent_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _ViewerSessionsPanelComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _ViewerSessionsPanelComponent, selectors: [["app-sessions-panel"]], decls: 17, vars: 0, consts: [[1, "flex", "justify-between"], [1, "px-2"], [1, "dropdown", "dropdown-end"], [1, "btn", "btn-xs", "btn-ghost"], [1, "material-icons", "text-base!"], ["tabindex", "0", 1, "dropdown-content", "menu", "menu-sm", "bg-base-100", "z-40", "w-52", "p-2", "shadow-sm"], [1, "panel-content", "inset-shadow-xs", "inset-shadow-black/30"], [1, "overflow-x-auto"], ["tabindex", "0", "role", "listbox", 1, "w-fit", "relative"], ["routerLinkActive", "bg-sky-700", 1, "text-nowrap"], ["role", "option", 1, "p-1", "block", "hover:bg-base-content/10", "rounded-sm", 3, "routerLink"]], template: function ViewerSessionsPanelComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _ViewerSessionsPanelComponent, selectors: [["app-sessions-panel"]], decls: 8, vars: 2, consts: [[1, "flex", "justify-between"], [1, "px-2"], [1, "panel-content", "inset-shadow-xs", "inset-shadow-black/30", "overflow-y-auto", "h-120"], [1, "progress", "w-full"], [1, "overflow-x-auto"], [1, "text-sm", "flex"], ["tabindex", "0", "role", "listbox", 1, "w-fit", "relative"], ["routerLinkActive", "bg-sky-700", 1, "text-nowrap"], ["role", "option", 1, "p-1", "block", "hover:bg-base-content/10", "rounded-sm", 3, "routerLink"], [1, "material-icons", "!text-sm", "max-w-4"]], template: function ViewerSessionsPanelComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275elementStart(0, "div", 0)(1, "h1", 1);
       \u0275\u0275text(2, "Sessions");
       \u0275\u0275elementEnd();
-      \u0275\u0275elementStart(3, "div")(4, "div", 2)(5, "button", 3)(6, "span", 4);
-      \u0275\u0275text(7, "more_vert");
-      \u0275\u0275elementEnd()();
-      \u0275\u0275elementStart(8, "ul", 5)(9, "li")(10, "a");
-      \u0275\u0275text(11, "Change grouping rule");
-      \u0275\u0275elementEnd()()()()()();
-      \u0275\u0275elementStart(12, "div", 6)(13, "div", 7)(14, "ul", 8);
-      \u0275\u0275repeaterCreate(15, ViewerSessionsPanelComponent_For_16_Template, 3, 4, "li", 9, _forTrack0);
-      \u0275\u0275elementEnd()()();
+      \u0275\u0275element(3, "div");
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(4, "div", 2);
+      \u0275\u0275template(5, ViewerSessionsPanelComponent_Conditional_5_Template, 1, 0, "progress", 3)(6, ViewerSessionsPanelComponent_Conditional_6_Template, 4, 0, "div", 4);
+      \u0275\u0275elementEnd();
+      \u0275\u0275template(7, ViewerSessionsPanelComponent_Conditional_7_Template, 5, 0, "div", 5);
     }
     if (rf & 2) {
-      \u0275\u0275advance(15);
-      \u0275\u0275repeater(ctx.sessionService.allSessions());
+      \u0275\u0275advance(5);
+      \u0275\u0275conditional(ctx.sessionService.sessionsLoading() ? 5 : 6);
+      \u0275\u0275advance(2);
+      \u0275\u0275conditional(ctx.fineVideoService.numPendingTranscodeTasks().pending > 0 ? 7 : -1);
     }
   }, dependencies: [RouterLink, RouterLinkActive, MatListModule, ScrollingModule], encapsulation: 2, changeDetection: 0 });
 };
@@ -54364,7 +54490,9 @@ var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
   <!--header row-->
   <h1 class="px-2">Sessions</h1>
   <div>
-    <!-- right side of section -->
+    <!-- right side of sessions header -->
+    <!-- Add three dots dropdown with "change grouping rule". Stashed. -->
+    <!--
     <div class="dropdown dropdown-end">
       <button class="btn btn-xs btn-ghost">
         <span class="material-icons text-base!">more_vert</span>
@@ -54376,46 +54504,46 @@ var ViewerSessionsPanelComponent = class _ViewerSessionsPanelComponent {
         <li><a>Change grouping rule</a></li>
       </ul>
     </div>
+      -->
   </div>
 </div>
-<div class="panel-content inset-shadow-xs inset-shadow-black/30">
-  <!--panel content-->
-  <div class="overflow-x-auto">
-    <ul class="w-fit relative" tabindex="0" role="listbox">
-      @for (session of sessionService.allSessions(); track session.key) {
-        <li class="text-nowrap" routerLinkActive="bg-sky-700">
-          <a
-            role="option"
-            class="p-1 block hover:bg-base-content/10 rounded-sm"
-            [routerLink]="['/viewer', session.key]"
-          >
-            {{ session.key }}
-          </a>
-        </li>
-      }
-    </ul>
-  </div>
+<div
+  class="panel-content inset-shadow-xs inset-shadow-black/30 overflow-y-auto h-120"
+>
+  @if (sessionService.sessionsLoading()) {
+    <progress class="progress w-full"></progress>
+  } @else {
+    <!--panel content-->
+    <div class="overflow-x-auto">
+      <ul class="w-fit relative" tabindex="0" role="listbox">
+        @for (session of sessionService.allSessions(); track session.key) {
+          <li class="text-nowrap" routerLinkActive="bg-sky-700">
+            <a
+              role="option"
+              class="p-1 block hover:bg-base-content/10 rounded-sm"
+              [routerLink]="['/viewer', session.key]"
+            >
+              {{ session.key }}
+            </a>
+          </li>
+        }
+      </ul>
+    </div>
+  }
 </div>
+@if (fineVideoService.numPendingTranscodeTasks().pending > 0) {
+  <div class="text-sm flex">
+    <span class="material-icons !text-sm max-w-4">info_i</span>
+    <span>Videos will populate once they are transcoded.</span>
+  </div>
+}
 ` }]
   }], null, null);
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerSessionsPanelComponent, { className: "ViewerSessionsPanelComponent", filePath: "src/app/viewer/viewer-left-panel/viewer-sessions-panel.component.ts", lineNumber: 24 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(ViewerSessionsPanelComponent, { className: "ViewerSessionsPanelComponent", filePath: "src/app/viewer/viewer-left-panel/viewer-sessions-panel.component.ts", lineNumber: 25 });
 })();
 
-// src/app/utils/comparators.ts
-var compareStringArraysOrdered = (prev, curr) => {
-  if (prev.length !== curr.length) {
-    return false;
-  }
-  for (let i = 0; i < prev.length; i++) {
-    if (prev[i] !== curr[i]) {
-      return false;
-    }
-  }
-  return true;
-};
-
 // src/app/view-settings.model.ts
 var ViewSettings = class _ViewSettings {
   _viewsShown = new BehaviorSubject([]);
@@ -54663,12 +54791,22 @@ var VideoPlayerControlsComponent = class _VideoPlayerControlsComponent {
 // src/app/components/video-player/video-tile/video-tile.component.ts
 var _c04 = ["videoEl"];
 var _c13 = ["*"];
+var videoErrorMessages = {
+  [MediaError.MEDIA_ERR_ABORTED]: "Error: aborted.",
+  [MediaError.MEDIA_ERR_NETWORK]: "Error: network error.",
+  [MediaError.MEDIA_ERR_DECODE]: "Error: decoding error.",
+  [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: "Error: 404 or unsupported video format."
+};
 var VideoTileComponent = class _VideoTileComponent {
   host;
   videoElement = null;
   src = input("");
   // Current time of the video element, for displaying for debug info.
   localCurrentTime = signal(0);
+  videoErrorMessage = linkedSignal(() => {
+    this.src();
+    return "";
+  });
   // the main state, injected from parent so it can be easily shared across video players
   videoPlayerState = inject(VideoPlayerState);
   contentEnd = new EventEmitter();
@@ -54699,6 +54837,11 @@ var VideoTileComponent = class _VideoTileComponent {
   scaleFactor = signal(1);
   // signal to hide content until video inited
   showProjectedContent = signal(false);
+  onVideoTagError() {
+    const code = this.videoElement?.nativeElement.error?.code;
+    const videoErrorMessage = code ? videoErrorMessages[code] : "Unknown error, check dev logs.";
+    this.videoErrorMessage.set(videoErrorMessage);
+  }
   onLoadedMetadata() {
     this.videoMetadata.next({
       height: this.videoElement?.nativeElement.videoHeight ?? 1,
@@ -54729,7 +54872,7 @@ var VideoTileComponent = class _VideoTileComponent {
       let _t;
       \u0275\u0275queryRefresh(_t = \u0275\u0275loadQuery()) && (ctx.videoElement = _t.first);
     }
-  }, inputs: { src: [1, "src"] }, outputs: { contentEnd: "contentEnd" }, ngContentSelectors: _c13, decls: 6, vars: 3, consts: [["videoEl", ""], [1, "relative", "shadow-lg", "shadow-black/20", "bg-base-200"], ["preload", "auto", "muted", "", 3, "loadedmetadata", "timeupdate", "ended"], ["type", "video/mp4", 3, "src"]], template: function VideoTileComponent_Template(rf, ctx) {
+  }, inputs: { src: [1, "src"] }, outputs: { contentEnd: "contentEnd" }, ngContentSelectors: _c13, decls: 10, vars: 7, consts: [["videoEl", ""], [1, "relative", "shadow-lg", "shadow-black/20", "bg-base-200"], ["preload", "auto", "muted", "", 3, "loadedmetadata", "timeupdate", "ended", "error", "src"], [1, "absolute", "inset-0", "overflow-auto", "p-2"], [1, "text-sm", "text-gray-400", "mt-2"]], template: function VideoTileComponent_Template(rf, ctx) {
     if (rf & 1) {
       const _r1 = \u0275\u0275getCurrentView();
       \u0275\u0275projectionDef();
@@ -54743,25 +54886,39 @@ var VideoTileComponent = class _VideoTileComponent {
       })("ended", function VideoTileComponent_Template_video_ended_1_listener() {
         \u0275\u0275restoreView(_r1);
         return \u0275\u0275resetView(ctx.onEnd());
+      })("error", function VideoTileComponent_Template_video_error_1_listener() {
+        \u0275\u0275restoreView(_r1);
+        return \u0275\u0275resetView(ctx.onVideoTagError());
       });
-      \u0275\u0275element(3, "source", 3);
+      \u0275\u0275text(3, " Your browser does not support the video tag. ");
       \u0275\u0275elementEnd();
       \u0275\u0275elementStart(4, "div");
       \u0275\u0275projection(5);
-      \u0275\u0275elementEnd()();
+      \u0275\u0275elementEnd();
+      \u0275\u0275elementStart(6, "div", 3);
+      \u0275\u0275text(7);
+      \u0275\u0275elementStart(8, "p", 4);
+      \u0275\u0275text(9);
+      \u0275\u0275elementEnd()()();
     }
     if (rf & 2) {
-      \u0275\u0275advance(3);
-      \u0275\u0275property("src", ctx.src(), \u0275\u0275sanitizeUrl);
       \u0275\u0275advance();
+      \u0275\u0275property("src", ctx.src(), \u0275\u0275sanitizeUrl);
+      \u0275\u0275advance(3);
       \u0275\u0275classProp("invisible", !ctx.showProjectedContent());
+      \u0275\u0275advance(2);
+      \u0275\u0275classProp("invisible", !ctx.videoErrorMessage());
+      \u0275\u0275advance();
+      \u0275\u0275textInterpolate1(" ", ctx.videoErrorMessage(), " ");
+      \u0275\u0275advance(2);
+      \u0275\u0275textInterpolate1("Source: ", ctx.src(), "");
     }
-  }, styles: ["\n\n[_nghost-%COMP%] {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-XSYKMARQ.css.map */"], changeDetection: 0 });
+  }, styles: ["\n\n[_nghost-%COMP%] {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-RDL4BSJ4.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(VideoTileComponent, [{
     type: Component,
-    args: [{ selector: "app-video-tile", imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: '<style>\r\n  :host {\r\n    /* Display for angular elements is inline by default.\r\n  This is a problem when querying the host height, because it ends up being just 0.\r\n  */\r\n    display: block;\r\n  }\r\n</style>\r\n\r\n<div class="relative shadow-lg shadow-black/20 bg-base-200">\r\n  <!-- bg is visible during loading state -->\r\n  <!-- wrapper to contain video + keypoints -->\r\n  <video\r\n    #videoEl\r\n    preload="auto"\r\n    (loadedmetadata)="onLoadedMetadata()"\r\n    muted\r\n    (timeupdate)="updateLocalCurrentTime()"\r\n    (ended)="onEnd()"\r\n  >\r\n    <source [src]="src()" type="video/mp4" />\r\n  </video>\r\n  <div [class.invisible]="!showProjectedContent()">\r\n    <!-- wrapper to hide content until video inited -->\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<!--<p>T: {{ localCurrentTime() }}</p>-->\r\n', styles: ["/* angular:styles/component:css;cca0ce7e24de60b661844ed36e56ee3734a21f5d38966246b6b69d25889a81d9;/home/ksikka/lightning-pose-app/web_ui/src/app/components/video-player/video-tile/video-tile.component.html */\n:host {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-XSYKMARQ.css.map */\n"] }]
+    args: [{ selector: "app-video-tile", imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: '<style>\n  :host {\n    /* Display for angular elements is inline by default.\n  This is a problem when querying the host height, because it ends up being just 0.\n  */\n    display: block;\n  }\n</style>\n\n<div class="relative shadow-lg shadow-black/20 bg-base-200">\n  <!-- bg is visible during loading state -->\n  <!-- wrapper to contain video + keypoints -->\n  <video\n    #videoEl\n    preload="auto"\n    (loadedmetadata)="onLoadedMetadata()"\n    muted\n    (timeupdate)="updateLocalCurrentTime()"\n    (ended)="onEnd()"\n    (error)="onVideoTagError()"\n    [src]="src()"\n  >\n    Your browser does not support the video tag.\n  </video>\n  <div [class.invisible]="!showProjectedContent()">\n    <!-- wrapper to hide content until video inited -->\n    <ng-content></ng-content>\n  </div>\n\n  <div\n    class="absolute inset-0 overflow-auto p-2"\n    [class.invisible]="!videoErrorMessage()"\n  >\n    {{ videoErrorMessage() }}\n    <p class="text-sm text-gray-400 mt-2">Source: {{ src() }}</p>\n  </div>\n</div>\n<!--<p>T: {{ localCurrentTime() }}</p>-->\n', styles: ["/* angular:styles/component:css;cca0ce7e24de60b661844ed36e56ee3734a21f5d38966246b6b69d25889a81d9;/home/ksikka/work/lightning-pose-app/web_ui/src/app/components/video-player/video-tile/video-tile.component.html */\n:host {\n  display: block;\n}\n/*# sourceMappingURL=/static/video-tile.component-RDL4BSJ4.css.map */\n"] }]
   }], () => [{ type: ElementRef }], { videoElement: [{
     type: ViewChild,
     args: ["videoEl", { static: true }]
@@ -54770,7 +54927,7 @@ var VideoTileComponent = class _VideoTileComponent {
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(VideoTileComponent, { className: "VideoTileComponent", filePath: "src/app/components/video-player/video-tile/video-tile.component.ts", lineNumber: 39 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(VideoTileComponent, { className: "VideoTileComponent", filePath: "src/app/components/video-player/video-tile/video-tile.component.ts", lineNumber: 49 });
 })();
 
 // node_modules/@angular/cdk/fesm2022/drag-drop.mjs
@@ -59034,6 +59191,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
   csvParser = inject(CsvParserService);
   projectInfoService = inject(ProjectInfoService);
   loadingService = inject(LoadingService);
+  fineVideoService = inject(FineVideoService);
   get currentFrame() {
     return this.videoPlayerState.currentFrameSignal;
   }
@@ -59075,7 +59233,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     });
     return {
       id: sessionView.viewName,
-      videoSrc: this.getVideoSrc(sessionView),
+      videoSrc: this.fineVideoService.fineVideoPath(sessionView.videoPath),
       keypoints: filteredKeypoints
     };
   }
@@ -59112,9 +59270,6 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
     const dataDir = this.projectInfoService.projectInfo?.data_dir;
     return dataDir + "/" + sessionKey.replace(/\*/g, view) + ".mp4";
   }
-  getVideoSrc(sessionView) {
-    return "/app/v0/files/" + sessionView.videoPath;
-  }
   async loadSession(sessionKey) {
     this.sessionKey.set(sessionKey);
     this.widgetModels.set([]);
@@ -59194,7 +59349,7 @@ var ViewerCenterPanelComponent = class _ViewerCenterPanelComponent {
       VideoPlayerControlsComponent,
       VideoTileComponent,
       KeypointContainerComponent
-    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<div class="flex flex-col h-full">\r\n  <!-- Video content area -->\r\n  <div\r\n    class="w-full grow flex flex-wrap overflow-y-auto gap-4 *:max-w-xs justify-start items-start content-start p-4"\r\n  >\r\n    <!-- `track videosrc` makes the widget component get\r\n     destroyed and recreated if videoSrc changes. Reactively\r\n     changing videoSrc of an existing video does not work unfortunately. -->\r\n    @for (w of filteredWidgetModels(); track w.videoSrc) {\r\n      <div class="panel !border-none">\r\n        <div class="px-2 py-1 text-sm flex justify-between">\r\n          <h3>{{ w.id }}</h3>\r\n          <span\r\n            class="btn btn-circle btn-xs material-icons !text-sm"\r\n            (click)="onWidgetCloseClick(w)"\r\n            >close</span\r\n          >\r\n        </div>\r\n        <app-video-tile [src]="w.videoSrc" class="w-auto">\r\n          <app-keypoint-container\r\n            [labelerMode]="false"\r\n            [keypointModels]="w.keypoints()"\r\n          ></app-keypoint-container>\r\n        </app-video-tile>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <app-video-player-controls></app-video-player-controls>\r\n</div>\r\n' }]
+    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<div class="flex flex-col h-full">\n  <!-- Video content area -->\n  <div\n    class="w-full grow flex flex-wrap overflow-y-auto gap-4 *:max-w-xs justify-start items-start content-start p-4"\n  >\n    <!-- `track videosrc` makes the widget component get\n     destroyed and recreated if videoSrc changes. Reactively\n     changing videoSrc of an existing video does not work unfortunately. -->\n    @for (w of filteredWidgetModels(); track w.videoSrc) {\n      <div class="panel !border-none">\n        <div class="px-2 py-1 text-sm flex justify-between">\n          <h3>{{ w.id }}</h3>\n          <span\n            class="btn btn-circle btn-xs material-icons !text-sm"\n            (click)="onWidgetCloseClick(w)"\n            >close</span\n          >\n        </div>\n        <app-video-tile [src]="w.videoSrc" class="w-auto">\n          <app-keypoint-container\n            [labelerMode]="false"\n            [keypointModels]="w.keypoints()"\n          ></app-keypoint-container>\n        </app-video-tile>\n      </div>\n    }\n  </div>\n\n  <app-video-player-controls></app-video-player-controls>\n</div>\n' }]
   }], null, { viewSettings: [{
     type: Input
   }] });
@@ -59491,7 +59646,7 @@ var ViewerPageComponent = class _ViewerPageComponent {
     ViewerSessionsPanelComponent,
     ViewerCenterPanelComponent,
     LoadingBarComponent
-  ], styles: ["\n\n[_nghost-%COMP%] {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-MRTIUFL2.css.map */"], changeDetection: 0 });
+  ], styles: ["\n\n[_nghost-%COMP%] {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-KDHT6XH5.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ViewerPageComponent, [{
@@ -59500,116 +59655,116 @@ var ViewerPageComponent = class _ViewerPageComponent {
       ViewerSessionsPanelComponent,
       ViewerCenterPanelComponent,
       LoadingBarComponent
-    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [VideoPlayerState, ViewSettings], template: `<style>\r
-  :host {\r
-    flex-grow: 1;\r
-    display: flex;\r
-  }\r
-</style>\r
-\r
-@if (!isIniting()) {\r
-  <div class="grow flex flex-row items-stretch">\r
-    <!-- Left pane -->\r
-    <div\r
-      class="bg-base-200 w-60 xl:w-80 flex flex-col justify-between shadow-lg"\r
-    >\r
-      <div class="p-4">\r
-        <app-sessions-panel></app-sessions-panel>\r
-      </div>\r
-      <app-loading-bar class="h-20 p-4"></app-loading-bar>\r
-    </div>\r
-\r
-    <!-- Center content -->\r
-    <app-viewer-center-panel\r
-      class="grow z-30"\r
-      [viewSettings]="viewSettings"\r
-    ></app-viewer-center-panel>\r
-\r
-    <!-- Right pane -->\r
-    <div class="shrink-0 w-40 xl:w-60 h-full">\r
-      <div class="panel m-4">\r
-        <div>\r
-          <!-- panel header -->\r
-          <h1 class="px-2 mb-1">Views</h1>\r
-        </div>\r
-        <div class="panel-content max-h-60 overflow-y-auto">\r
-          <ul>\r
-            @for (cam of allViews; track cam) {\r
-              <li class="p-1 flex justify-between items-center">\r
-                <span>{{ cam }}</span>\r
-                <input\r
-                  type="checkbox"\r
-                  [checked]="viewSelectionModel.isSelected(cam)"\r
-                  class="checkbox checkbox-xs"\r
-                  (change)="onViewCheckboxChange($event, cam)"\r
-                />\r
-              </li>\r
-            }\r
-          </ul>\r
-        </div>\r
-      </div>\r
-\r
-      <div class="panel m-4">\r
-        <div>\r
-          <!-- panel header -->\r
-          <h1 class="px-2 mb-1">Keypoints</h1>\r
-        </div>\r
-        <div class="panel-content max-h-60 overflow-y-auto">\r
-          <ul>\r
-            @for (kp of projectInfoService.allKeypoints(); track kp) {\r
-              <li class="p-1 flex justify-between items-center">\r
-                <span>{{ kp }}</span>\r
-                <input\r
-                  type="checkbox"\r
-                  [checked]="keypointSelectionModel.isSelected(kp)"\r
-                  class="checkbox checkbox-xs"\r
-                  (change)="onKeypointCheckboxChange($event, kp)"\r
-                />\r
-              </li>\r
-            }\r
-          </ul>\r
-        </div>\r
-      </div>\r
-\r
-      <div class="panel m-4">\r
-        <div>\r
-          <!-- panel header -->\r
-          <h1 class="px-2 mb-1">Models</h1>\r
-        </div>\r
-        <div class="panel-content max-h-60 overflow-y-visible">\r
-          <ul>\r
-            @let modelSelectors =\r
-              viewSettings.modelsShown().length < 2\r
-                ? viewSettings.modelsShown().concat([noneOption])\r
-                : viewSettings.modelsShown();\r
-            <!-- it's important to track index, not model.\r
-             if we put model here, something weird happens when you clear all models and then set a model. -->\r
-            @for (model of modelSelectors; track $index) {\r
-              @let modelIndex = $index;\r
-              <li class="p-1 w-full">\r
-                <select\r
-                  class="select select-sm w-full flex-grow"\r
-                  [class.border-red-300]="modelIndex === 0"\r
-                  [class.border-green-300]="modelIndex === 1"\r
-                  (change)="onModelDropdownItemClick(modelIndex, $event)"\r
-                >\r
-                  @let options =\r
-                    [noneOption].concat(projectInfoService.allModels());\r
-                  @for (dropdownItem of options; track dropdownItem) {\r
-                    <option [selected]="dropdownItem === model">\r
-                      {{ dropdownItem }}\r
-                    </option>\r
-                  }\r
-                </select>\r
-              </li>\r
-            }\r
-          </ul>\r
-        </div>\r
-      </div>\r
-    </div>\r
-  </div>\r
-}\r
-`, styles: ["/* angular:styles/component:css;1fa15f7a0ae1b0259233282b2d49fb361834bf7fd726c58584c186240f9d8f04;/home/ksikka/lightning-pose-app/web_ui/src/app/viewer/viewer-page/viewer-page.component.html */\n:host {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-MRTIUFL2.css.map */\n"] }]
+    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [VideoPlayerState, ViewSettings], template: `<style>
+  :host {
+    flex-grow: 1;
+    display: flex;
+  }
+</style>
+
+@if (!isIniting()) {
+  <div class="grow flex flex-row items-stretch">
+    <!-- Left pane -->
+    <div
+      class="bg-base-200 w-60 xl:w-80 flex flex-col justify-between shadow-lg"
+    >
+      <div class="p-4">
+        <app-sessions-panel></app-sessions-panel>
+      </div>
+      <app-loading-bar class="h-20 p-4"></app-loading-bar>
+    </div>
+
+    <!-- Center content -->
+    <app-viewer-center-panel
+      class="grow z-30"
+      [viewSettings]="viewSettings"
+    ></app-viewer-center-panel>
+
+    <!-- Right pane -->
+    <div class="shrink-0 w-40 xl:w-60 h-full">
+      <div class="panel m-4">
+        <div>
+          <!-- panel header -->
+          <h1 class="px-2 mb-1">Views</h1>
+        </div>
+        <div class="panel-content max-h-60 overflow-y-auto">
+          <ul>
+            @for (cam of allViews; track cam) {
+              <li class="p-1 flex justify-between items-center">
+                <span>{{ cam }}</span>
+                <input
+                  type="checkbox"
+                  [checked]="viewSelectionModel.isSelected(cam)"
+                  class="checkbox checkbox-xs"
+                  (change)="onViewCheckboxChange($event, cam)"
+                />
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+
+      <div class="panel m-4">
+        <div>
+          <!-- panel header -->
+          <h1 class="px-2 mb-1">Keypoints</h1>
+        </div>
+        <div class="panel-content max-h-60 overflow-y-auto">
+          <ul>
+            @for (kp of projectInfoService.allKeypoints(); track kp) {
+              <li class="p-1 flex justify-between items-center">
+                <span>{{ kp }}</span>
+                <input
+                  type="checkbox"
+                  [checked]="keypointSelectionModel.isSelected(kp)"
+                  class="checkbox checkbox-xs"
+                  (change)="onKeypointCheckboxChange($event, kp)"
+                />
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+
+      <div class="panel m-4">
+        <div>
+          <!-- panel header -->
+          <h1 class="px-2 mb-1">Models</h1>
+        </div>
+        <div class="panel-content max-h-60 overflow-y-visible">
+          <ul>
+            @let modelSelectors =
+              viewSettings.modelsShown().length < 2
+                ? viewSettings.modelsShown().concat([noneOption])
+                : viewSettings.modelsShown();
+            <!-- it's important to track index, not model.
+             if we put model here, something weird happens when you clear all models and then set a model. -->
+            @for (model of modelSelectors; track $index) {
+              @let modelIndex = $index;
+              <li class="p-1 w-full">
+                <select
+                  class="select select-sm w-full flex-grow"
+                  [class.border-red-300]="modelIndex === 0"
+                  [class.border-green-300]="modelIndex === 1"
+                  (change)="onModelDropdownItemClick(modelIndex, $event)"
+                >
+                  @let options =
+                    [noneOption].concat(projectInfoService.allModels());
+                  @for (dropdownItem of options; track dropdownItem) {
+                    <option [selected]="dropdownItem === model">
+                      {{ dropdownItem }}
+                    </option>
+                  }
+                </select>
+              </li>
+            }
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+}
+`, styles: ["/* angular:styles/component:css;1fa15f7a0ae1b0259233282b2d49fb361834bf7fd726c58584c186240f9d8f04;/home/ksikka/work/lightning-pose-app/web_ui/src/app/viewer/viewer-page/viewer-page.component.html */\n:host {\n  flex-grow: 1;\n  display: flex;\n}\n/*# sourceMappingURL=/static/viewer-page.component-KDHT6XH5.css.map */\n"] }]
   }], () => [], { sessionKey: [{
     type: Input
   }] });
@@ -66177,7 +66332,7 @@ view2
       \u0275\u0275advance();
       \u0275\u0275property("disabled", !ctx.projectInfoForm.dirty);
     }
-  }, dependencies: [ReactiveFormsModule, \u0275NgNoValidate, DefaultValueAccessor, NgControlStatus, NgControlStatusGroup, FormGroupDirective, FormControlName], styles: ["\n\n[_ngcontent-%COMP%]::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-5IRK7U7U.css.map */"], changeDetection: 0 });
+  }, dependencies: [ReactiveFormsModule, \u0275NgNoValidate, DefaultValueAccessor, NgControlStatus, NgControlStatusGroup, FormGroupDirective, FormControlName], styles: ["\n\n[_ngcontent-%COMP%]::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-HKHIVUJR.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(ProjectSettingsComponent, [{
@@ -66261,7 +66416,7 @@ view2
     </button>
   </div>
 </form>
-`, styles: ["/* angular:styles/component:css;5c3484fa86afc1ad339d983c727d8801928706c064dd49a4001f42c8eac3d364;/home/ksikka/lightning-pose-app/web_ui/src/app/project-settings/project-settings.component.html */\n::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-5IRK7U7U.css.map */\n"] }]
+`, styles: ["/* angular:styles/component:css;5c3484fa86afc1ad339d983c727d8801928706c064dd49a4001f42c8eac3d364;/home/ksikka/work/lightning-pose-app/web_ui/src/app/project-settings/project-settings.component.html */\n::placeholder {\n  color: color-mix(in oklch, currentColor 50%, #0000) !important;\n}\n/*# sourceMappingURL=/static/project-settings.component-HKHIVUJR.css.map */\n"] }]
   }], () => [], null);
 })();
 (() => {
@@ -66270,31 +66425,38 @@ view2
 
 // src/app/app.component.ts
 var _c08 = ["settingsDialog"];
-function AppComponent_Conditional_18_Template(rf, ctx) {
+function AppComponent_Conditional_14_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275element(0, "router-outlet");
+    \u0275\u0275elementStart(0, "div", 9);
+    \u0275\u0275element(1, "span", 15);
+    \u0275\u0275elementEnd();
   }
 }
 function AppComponent_Conditional_19_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275element(0, "app-project-settings", 12);
+    \u0275\u0275element(0, "router-outlet");
+  }
+}
+function AppComponent_Conditional_20_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275element(0, "app-project-settings", 13);
   }
   if (rf & 2) {
     \u0275\u0275property("setupMode", true);
   }
 }
-function AppComponent_Conditional_22_Template(rf, ctx) {
+function AppComponent_Conditional_23_Template(rf, ctx) {
   if (rf & 1) {
     const _r2 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "app-project-settings", 14);
-    \u0275\u0275listener("done", function AppComponent_Conditional_22_Template_app_project_settings_done_0_listener() {
+    \u0275\u0275elementStart(0, "app-project-settings", 16);
+    \u0275\u0275listener("done", function AppComponent_Conditional_23_Template_app_project_settings_done_0_listener() {
       \u0275\u0275restoreView(_r2);
       const ctx_r2 = \u0275\u0275nextContext();
       return \u0275\u0275resetView(ctx_r2.settingsDialogOpen.set(false));
     });
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(1, "div", 15)(2, "button", 16);
-    \u0275\u0275listener("click", function AppComponent_Conditional_22_Template_button_click_2_listener() {
+    \u0275\u0275elementStart(1, "div", 17)(2, "button", 18);
+    \u0275\u0275listener("click", function AppComponent_Conditional_23_Template_button_click_2_listener() {
       \u0275\u0275restoreView(_r2);
       const ctx_r2 = \u0275\u0275nextContext();
       return \u0275\u0275resetView(ctx_r2.settingsDialogOpen.set(false));
@@ -66305,6 +66467,7 @@ function AppComponent_Conditional_22_Template(rf, ctx) {
 }
 var AppComponent = class _AppComponent {
   projectInfoService = inject(ProjectInfoService);
+  fineVideoService = inject(FineVideoService);
   // Whether the required initial setup has been done.
   // (Setting data directory, model directory, views).
   projectInfoRequestCompleted = signal(false);
@@ -66343,7 +66506,7 @@ var AppComponent = class _AppComponent {
     if (rf & 2) {
       \u0275\u0275queryAdvance();
     }
-  }, decls: 23, vars: 4, consts: [["settingsDialog", ""], [1, "navbar", "bg-base-200", "shadow-lg"], [1, "navbar-start"], [1, "text-lg", "font-semibold"], [1, "navbar-center"], [1, "menu", "menu-horizontal", "p-0"], ["routerLink", "/viewer", "routerLinkActive", "menu-active", "ariaCurrentWhenActive", "page"], ["routerLink", "/labeler", "routerLinkActive", "menu-active", "ariaCurrentWhenActive", "page"], [1, "navbar-end"], ["tabindex", "0", 1, "btn", "btn-ghost", 3, "click", "keydown.enter"], [1, "material-icons"], [1, "flex-grow", "flex", "min-h-0"], [1, "w-lg", "mt-8", 3, "setupMode"], [1, "modal"], [1, "modal-box", 3, "done"], [1, "modal-backdrop"], [3, "click"]], template: function AppComponent_Template(rf, ctx) {
+  }, decls: 24, vars: 5, consts: [["settingsDialog", ""], [1, "navbar", "bg-base-200", "shadow-lg"], [1, "navbar-start"], [1, "text-lg", "font-semibold"], [1, "navbar-center"], [1, "menu", "menu-horizontal", "p-0"], ["routerLink", "/viewer", "routerLinkActive", "menu-active", "ariaCurrentWhenActive", "page"], ["routerLink", "/labeler", "routerLinkActive", "menu-active", "ariaCurrentWhenActive", "page"], [1, "navbar-end"], ["data-tip", "Transcoding videos...", 1, "tooltip", "tooltip-left"], ["tabindex", "0", 1, "btn", "btn-ghost", 3, "click", "keydown.enter"], [1, "material-icons"], [1, "flex-grow", "flex", "min-h-0"], [1, "w-lg", "mt-8", 3, "setupMode"], [1, "modal"], [1, "loading", "loading-bars", "loading-xs"], [1, "modal-box", 3, "done"], [1, "modal-backdrop"], [3, "click"]], template: function AppComponent_Template(rf, ctx) {
     if (rf & 1) {
       const _r1 = \u0275\u0275getCurrentView();
       \u0275\u0275elementStart(0, "header")(1, "nav", 1)(2, "div", 2)(3, "span", 3);
@@ -66355,38 +66518,42 @@ var AppComponent = class _AppComponent {
       \u0275\u0275elementStart(10, "li")(11, "a", 7);
       \u0275\u0275text(12, "Labeler");
       \u0275\u0275elementEnd()()()();
-      \u0275\u0275elementStart(13, "div", 8)(14, "button", 9);
-      \u0275\u0275listener("click", function AppComponent_Template_button_click_14_listener() {
+      \u0275\u0275elementStart(13, "div", 8);
+      \u0275\u0275template(14, AppComponent_Conditional_14_Template, 2, 0, "div", 9);
+      \u0275\u0275elementStart(15, "button", 10);
+      \u0275\u0275listener("click", function AppComponent_Template_button_click_15_listener() {
         \u0275\u0275restoreView(_r1);
         return \u0275\u0275resetView(ctx.settingsDialogOpen.set(true));
-      })("keydown.enter", function AppComponent_Template_button_keydown_enter_14_listener() {
+      })("keydown.enter", function AppComponent_Template_button_keydown_enter_15_listener() {
         \u0275\u0275restoreView(_r1);
         return \u0275\u0275resetView(ctx.settingsDialogOpen.set(true));
       });
-      \u0275\u0275elementStart(15, "span", 10);
-      \u0275\u0275text(16, "settings");
+      \u0275\u0275elementStart(16, "span", 11);
+      \u0275\u0275text(17, "settings");
       \u0275\u0275elementEnd()()()()();
-      \u0275\u0275elementStart(17, "main", 11);
-      \u0275\u0275template(18, AppComponent_Conditional_18_Template, 1, 0, "router-outlet")(19, AppComponent_Conditional_19_Template, 1, 1, "app-project-settings", 12);
+      \u0275\u0275elementStart(18, "main", 12);
+      \u0275\u0275template(19, AppComponent_Conditional_19_Template, 1, 0, "router-outlet")(20, AppComponent_Conditional_20_Template, 1, 1, "app-project-settings", 13);
       \u0275\u0275elementEnd();
-      \u0275\u0275elementStart(20, "dialog", 13, 0);
-      \u0275\u0275template(22, AppComponent_Conditional_22_Template, 4, 0);
+      \u0275\u0275elementStart(21, "dialog", 14, 0);
+      \u0275\u0275template(23, AppComponent_Conditional_23_Template, 4, 0);
       \u0275\u0275elementEnd();
     }
     if (rf & 2) {
-      \u0275\u0275advance(17);
+      \u0275\u0275advance(14);
+      \u0275\u0275conditional(ctx.fineVideoService.numPendingTranscodeTasks().pending > 0 ? 14 : -1);
+      \u0275\u0275advance(4);
       \u0275\u0275classProp("justify-center", !ctx.hasBeenSetup());
       \u0275\u0275advance();
-      \u0275\u0275conditional(ctx.hasBeenSetup() ? 18 : 19);
+      \u0275\u0275conditional(ctx.hasBeenSetup() ? 19 : 20);
       \u0275\u0275advance(4);
-      \u0275\u0275conditional(ctx.settingsDialogOpen() ? 22 : -1);
+      \u0275\u0275conditional(ctx.settingsDialogOpen() ? 23 : -1);
     }
   }, dependencies: [
     RouterOutlet,
     RouterLink,
     RouterLinkActive,
     ProjectSettingsComponent
-  ], styles: ["\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar[_ngcontent-%COMP%] {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-UHVEDPZR.css.map */"], changeDetection: 0 });
+  ], styles: ["\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar[_ngcontent-%COMP%] {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-UAQUAGNZ.css.map */"], changeDetection: 0 });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AppComponent, [{
@@ -66396,13 +66563,13 @@ var AppComponent = class _AppComponent {
       RouterLink,
       RouterLinkActive,
       ProjectSettingsComponent
-    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<style>\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .navbar {\n    min-height: 3rem; /* reduce from default of 4rem */\n  }\n</style>\n<header>\n  <nav class="navbar bg-base-200 shadow-lg">\n    <div class="navbar-start">\n      <span class="text-lg font-semibold">Lightning Pose</span>\n    </div>\n\n    <div class="navbar-center">\n      <ul class="menu menu-horizontal p-0">\n        <li>\n          <a\n            routerLink="/viewer"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Viewer</a\n          >\n        </li>\n        <li>\n          <a\n            routerLink="/labeler"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Labeler</a\n          >\n        </li>\n      </ul>\n    </div>\n\n    <div class="navbar-end">\n      <button\n        class="btn btn-ghost"\n        tabindex="0"\n        (click)="settingsDialogOpen.set(true)"\n        (keydown.enter)="settingsDialogOpen.set(true)"\n      >\n        <span class="material-icons">settings</span>\n      </button>\n    </div>\n  </nav>\n</header>\n\n<!-- Set min-height: 0 to allow it to shrink if its content is too large.\n  Default min-height for flex items is auto. -->\n<main class="flex-grow flex min-h-0" [class.justify-center]="!hasBeenSetup()">\n  @if (hasBeenSetup()) {\n    <router-outlet />\n  } @else {\n    <app-project-settings\n      [setupMode]="true"\n      class="w-lg mt-8"\n    ></app-project-settings>\n  }\n</main>\n\n<!-- Settings dialog -->\n<dialog #settingsDialog class="modal">\n  @if (settingsDialogOpen()) {\n    <app-project-settings\n      class="modal-box"\n      (done)="settingsDialogOpen.set(false)"\n    ></app-project-settings>\n\n    <!-- Makes the dialog close when clicked from outside. -->\n    <div class="modal-backdrop">\n      <button (click)="settingsDialogOpen.set(false)">close</button>\n    </div>\n  }\n</dialog>\n', styles: ["/* angular:styles/component:css;22d8514f1dd5b50f33b3fb93fdb69668f78eeb349bd672e238e3ac9acfbbda19;/home/ksikka/lightning-pose-app/web_ui/src/app/app.component.html */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-UHVEDPZR.css.map */\n"] }]
+    ], changeDetection: ChangeDetectionStrategy.OnPush, template: '<style>\n  :host {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n  .navbar {\n    min-height: 3rem; /* reduce from default of 4rem */\n  }\n</style>\n<header>\n  <nav class="navbar bg-base-200 shadow-lg">\n    <div class="navbar-start">\n      <span class="text-lg font-semibold">Lightning Pose</span>\n    </div>\n\n    <div class="navbar-center">\n      <ul class="menu menu-horizontal p-0">\n        <li>\n          <a\n            routerLink="/viewer"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Viewer</a\n          >\n        </li>\n        <li>\n          <a\n            routerLink="/labeler"\n            routerLinkActive="menu-active"\n            ariaCurrentWhenActive="page"\n            >Labeler</a\n          >\n        </li>\n      </ul>\n    </div>\n\n    <div class="navbar-end">\n      @if (fineVideoService.numPendingTranscodeTasks().pending > 0) {\n        <div class="tooltip tooltip-left" data-tip="Transcoding videos...">\n          <span class="loading loading-bars loading-xs"></span>\n        </div>\n      }\n\n      <button\n        class="btn btn-ghost"\n        tabindex="0"\n        (click)="settingsDialogOpen.set(true)"\n        (keydown.enter)="settingsDialogOpen.set(true)"\n      >\n        <span class="material-icons">settings</span>\n      </button>\n    </div>\n  </nav>\n</header>\n\n<!-- Set min-height: 0 to allow it to shrink if its content is too large.\n  Default min-height for flex items is auto. -->\n<main class="flex-grow flex min-h-0" [class.justify-center]="!hasBeenSetup()">\n  @if (hasBeenSetup()) {\n    <router-outlet />\n  } @else {\n    <app-project-settings\n      [setupMode]="true"\n      class="w-lg mt-8"\n    ></app-project-settings>\n  }\n</main>\n\n<!-- Settings dialog -->\n<dialog #settingsDialog class="modal">\n  @if (settingsDialogOpen()) {\n    <app-project-settings\n      class="modal-box"\n      (done)="settingsDialogOpen.set(false)"\n    ></app-project-settings>\n\n    <!-- Makes the dialog close when clicked from outside. -->\n    <div class="modal-backdrop">\n      <button (click)="settingsDialogOpen.set(false)">close</button>\n    </div>\n  }\n</dialog>\n', styles: ["/* angular:styles/component:css;22d8514f1dd5b50f33b3fb93fdb69668f78eeb349bd672e238e3ac9acfbbda19;/home/ksikka/work/lightning-pose-app/web_ui/src/app/app.component.html */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n.navbar {\n  min-height: 3rem;\n}\n/*# sourceMappingURL=/static/app.component-UAQUAGNZ.css.map */\n"] }]
   }], () => [], null);
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AppComponent, { className: "AppComponent", filePath: "src/app/app.component.ts", lineNumber: 27 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AppComponent, { className: "AppComponent", filePath: "src/app/app.component.ts", lineNumber: 28 });
 })();
 
 // src/main.ts
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
-//# sourceMappingURL=main-LJHMLKBL.js.map
+//# sourceMappingURL=main-6XYUWDGZ.js.map