fix: UTC-325: By Media Start Time sort doesn't work with Video Object Tracking template (#8682)

Co-authored-by: nass600 <nass600@users.noreply.github.com>

Author: nass600

web/libs/editor/src/components/SidePanels/OutlinerPanel/ViewControls.tsx

@@ -40,6 +40,7 @@ interface ViewControlsProps {
 
 const mediaStartTimeSupportedTags = [
   ["labels", "audio"],
+  ["labels", "videorectangle", "video"],
   ["timelinelabels", "video"],
   ["timeserieslabels", "timeseries"],
 ];

web/libs/editor/src/components/SidePanels/OutlinerPanel/__tests__/OutlinerPanel.test.tsx

@@ -331,6 +331,34 @@ describe("OutlinerPanel", () => {
       expect(viewControls).toHaveAttribute("ordering", "mediaStartTime");
     });
 
+    it("supports mediaStartTime sorting option when labels, videorectangle and video tags are in config", () => {
+      const regionsWithVideoRectangleConfig = {
+        ...mockRegions,
+        sort: "mediaStartTime",
+        annotation: {
+          names: new Map([
+            ["myLabels", { name: "myLabels", type: "labels" }],
+            ["myVideoRectangle", { name: "myVideoRectangle", type: "videorectangle" }],
+            ["myVideo", { name: "myVideo", type: "video" }],
+          ]),
+        },
+        regions: [
+          { id: "1", type: "videorectangleregion", sequence: [{ frame: 30, enabled: true, x: 10, y: 10 }] },
+          { id: "2", type: "videorectangleregion", sequence: [{ frame: 10, enabled: true, x: 20, y: 20 }] },
+        ],
+        filter: [
+          { id: "1", type: "videorectangleregion", sequence: [{ frame: 30, enabled: true, x: 10, y: 10 }] },
+          { id: "2", type: "videorectangleregion", sequence: [{ frame: 10, enabled: true, x: 20, y: 20 }] },
+        ],
+      };
+
+      render(<OutlinerPanel {...defaultProps} regions={regionsWithVideoRectangleConfig} />);
+
+      const viewControls = screen.getByTestId("view-controls");
+      expect(viewControls).toBeInTheDocument();
+      expect(viewControls).toHaveAttribute("ordering", "mediaStartTime");
+    });
+
     it("does not support mediaStartTime when only labels tag is in config", () => {
       const regionsWithoutMediaConfig = {
         ...mockRegions,

web/libs/editor/src/stores/RegionStore.js

@@ -272,12 +272,13 @@ export default types
         }
 
         // Handle timeline regions (video) - they have ranges with start frame
-        if (region.type === "timelineregion" && region.ranges && region.ranges.length > 0) {
-          // Get the first range's start frame
-          const firstRange = region.ranges[0];
-          if (firstRange && typeof firstRange.start === "number") {
-            return firstRange.start;
-          }
+        if (region.type === "timelineregion" && region.ranges?.[0]) {
+          return region.ranges[0].start;
+        }
+
+        // Handle video rectangle regions - they have sequence with frames
+        if (region.type === "videorectangleregion" && region.sequence?.[0]) {
+          return region.sequence[0].frame;
         }
 
         // Return null for regions without media time information