Feature/marker support

OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/ContentView.swift

@@ -33,9 +33,7 @@ struct ContentView: View
         self.fileURL = fileURL
 
         guard let fileURL = fileURL else { return }
-
-
-
+
         self.document.setupPlayerWithBaseDocumentURL(fileURL)
     }
 
@@ -65,6 +63,7 @@ struct ContentView: View
                     self.controlsViewStack()
                 }
             }
+
         }
         detail: {
             ItemInspectorView(selectedItem: self.$selectedItem)

OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/ItemInspectorView.swift

@@ -129,7 +129,6 @@ struct ItemInspectorView: View
         }
         .font(.system(size: 10))
         .listRowSeparator(.hidden)
-
     }
 
     func safeToJSON(item: Item) -> String

OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/ItemView.swift

@@ -13,47 +13,42 @@ import SwiftUI
 struct ItemView : View {
 
     let item:OpenTimelineIO.Item
-    @State var backgroundColor:Color
-    @State var selected:Bool
+    let backgroundColor:Color
+    let selected:Bool
+
+    private var isGap: Bool {
+        item.isKind(of: Gap.self)
+    }
 
     @Binding var secondsToPixels:Double
 
     var body: some View
     {
-
-            ZStack {
-
-                if let _ = item as? Gap
-                {
-                    RoundedRectangle(cornerRadius: 3)
-                        .fill(Color("GapTrackBaseColor")) // Fill the RoundedRectangle with color
-                        .overlay(
-                            RoundedRectangle(cornerRadius: 3)
-                                .stroke(self.selected ? .white : .clear, lineWidth: 1) // Add stroke/outline
-                        )
-                        .frame(width: self.getSafeWidth() - 2)
-                }
-                else
-                {
+        ZStack
+        {
+            let fill:AnyShapeStyle = ( isGap ) ? AnyShapeStyle( Color("GapTrackBaseColor") ) : AnyShapeStyle(self.backgroundColor.gradient)
+            let textGapOpacity:Double = ( isGap ) ? 0.0 : 1.0
+
+            RoundedRectangle(cornerRadius: 3)
+                .fill(fill, style: FillStyle())
+                .overlay(
                     RoundedRectangle(cornerRadius: 3)
-                        .fill(self.backgroundColor.gradient) // Fill the RoundedRectangle with color
-                        .overlay(
-                            RoundedRectangle(cornerRadius: 3)
-                                .stroke(self.selected ? .white : .clear, lineWidth: 1) // Add stroke/outline
-                        )
+                        .strokeBorder(self.selected ? .orange : .clear, lineWidth: 1) // Add stroke/outline
                         .frame(width: self.getSafeWidth() - 2)
-
-                    if self.getSafeWidth() > 40
-                    {
-                        Text(item.name)
-                            .lineLimit(1)
-                            .font(.system(size: 10))
-                            .frame(width: self.getSafeWidth())
-                    }
-                }
-            }
-            .frame(width: self.getSafeWidth())
-//            .offset(x:self.getSafePositionX() )//, y:geometry.size.height * 0.5 )
+                )
+                .frame(width: self.getSafeWidth() - 2)
+
+            Text(item.name)
+                .lineLimit(1)
+                .font(.system(size: 10))
+                .frame(width: self.getSafeWidth())
+                .opacity(self.getSafeWidth() > 40 ? textGapOpacity : 0.0)
+        }
+        .frame(width: self.getSafeWidth(), alignment: .leading )
+        .overlay {
+            // TODO: Get item marker coordinate system working
+//            self.getMarkerView()
+        }
     }
 
     func getSafeRange() -> OpenTimelineIO.TimeRange
@@ -81,4 +76,18 @@ struct ItemView : View {
     {
         return  self.getSafeRange().startTime.toSeconds() * self.secondsToPixels// + self.getSafeWidth()/2.0
     }
+
+    @ViewBuilder func getMarkerView() -> some View
+    {
+        HStack(alignment: .top)
+        {
+            let markerRange = self.item.markers.startIndex ..< self.item.markers.endIndex
+            ForEach(markerRange, id:\.self) { markerIndex in
+                MarkerView(marker: self.item.markers[markerIndex],
+                           secondsToPixels: self.$secondsToPixels)
+            }
+        }
+        .frame(width: self.getSafeWidth(), alignment: .leading )
+
+    }
 }

OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/MarkerView.swift

@@ -0,0 +1,58 @@
+//
+//  MarkerView.swift
+//  OpenTimelineIO-Reader
+//
+//  Created by Anton Marini on 7/1/25.
+//
+
+import OpenTimelineIO_AVFoundation
+import OpenTimelineIO
+import TimecodeKit
+import SwiftUI
+
+struct MarkerView : View {
+
+    let marker:OpenTimelineIO.Marker
+
+    @Binding var secondsToPixels:Double
+
+    var body: some View
+    {
+        self.colorForMarker()
+            .frame(width: self.getSafeWidth(), height: 7.0 )
+            .offset(x:self.getSafePositionX() )
+    }
+
+    func getSafeWidth() -> CGFloat
+    {
+        return max(self.marker.markedRange.duration.toSeconds() * self.secondsToPixels, 5.0)
+    }
+
+    func getSafePositionX() -> CGFloat
+    {
+        return  self.marker.markedRange.startTime.toSeconds() * self.secondsToPixels// + self.getSafeWidth()/2.0
+    }
+
+    func colorForMarker() -> Color
+    {
+        if let color:Marker.Color = Marker.Color(rawValue: marker.color)
+        {
+            switch color
+            {
+            case .pink : return Color.pink
+            case .red : return Color.red
+            case .orange : return Color.orange
+            case .yellow : return Color.yellow
+            case .green : return Color.green
+            case .cyan : return Color.cyan
+            case .blue : return Color.blue
+            case .purple : return Color.purple
+            case .magenta : return Color(red: 1.0, green: 0, blue: 1.0)
+            case .black : return Color.black
+            case .white : return Color.white
+            }
+        }
+
+        return Color.red
+    }
+}

OpenTimelineIO-Sample/OpenTimelineIO-Reader/Views/TimeRulerView.swift

@@ -11,6 +11,9 @@ import TimecodeKit
 import SwiftUI
 struct TimeRulerView: View
 {
+
+    static let VerticalPadding:CGFloat = 100
+
     let timeline: OpenTimelineIO.Timeline
     @Binding var secondsToPixels: Double
     @Binding var currentTime: OpenTimelineIO.RationalTime
@@ -19,22 +22,85 @@ struct TimeRulerView: View
     {
         Canvas { context, size in
 
+            context.translateBy(x: TrackView.trackHeaderWidth, y: 0)
+
             let safeRange = getSafeRange()
             let startSeconds = safeRange.startTime.toSeconds()
             let endSeconds = safeRange.endTimeInclusive().toSeconds()
 
-            // Draw playhead
-            drawPlayhead(context: context, currentTime: currentTime, secondsToPixels: secondsToPixels, size: size)
-
             // Draw ticks (including frame-level ticks)
             drawTicks(context: context, startSeconds: startSeconds, endSeconds: endSeconds, secondsToPixels: secondsToPixels, size: size)
 
+            // Draw playhead
+            drawPlayhead(context: context, currentTime: currentTime, secondsToPixels: secondsToPixels, size: size)
+
+            drawMarkers(context: context, startSeconds: startSeconds, endSeconds: endSeconds, secondsToPixels: secondsToPixels, size: size)
+
         }
-        .frame(width: self.getSafeWidth())
+        .frame(width: self.getSafeWidth() + TrackView.trackHeaderWidth)
     }
+
+    func drawMarkers(context: GraphicsContext, startSeconds: Double, endSeconds: Double, secondsToPixels: Double, size: CGSize)
+    {
+        let y = 20.0
+        if let tracks = self.timeline.tracks
+        {
+            let markerRange = tracks.markers.startIndex ..< tracks.markers.endIndex
+            for markerIndex in markerRange
+            {
+                let marker = tracks.markers[markerIndex]
+                let x = marker.markedRange.startTime.toSeconds() * self.secondsToPixels
+
+                let text = marker.name
+
+                if #available(macOS 14.0, *)
+                {
+                    context.draw(
+                        Text("\(Image(systemName: "arrowtriangle.down.fill"))")
+                            .font(.system(size: 10))
+                            .foregroundStyle(.red),
+                        at: CGPoint(x: x + 0.5, y: y)
+                    )
+
+
+                    context.draw(
+                        Text(text)
+                            .font(.system(size: 10))
+                            .foregroundStyle(.red),
+                        at: CGPoint(x: x + 9 , y: y - 2.0),
+                        anchor: UnitPoint(x: 0, y: 0.5)
+)
+                }
+                else
+                {
+                    context.draw(
+                        Text("\(Image(systemName: "arrowtriangle.down.fill"))")
+                            .font(.system(size: 10))
+                            .foregroundColor(.red),
+                        at: CGPoint(x: x + 0.5, y: y)
+                    )
+
+                    context.draw(
+                        Text(text)
+                            .font(.system(size: 10))
+                            .foregroundColor(.red),
+                        at: CGPoint(x: x + 9 , y: y - 2.0),
+                        anchor: UnitPoint(x: 0, y: 0.5)
+                    )
+                }
+
+                let tickHeight = 24.0
+
+                // Draw tick line
+                let tickRect = CGRect(x: x, y: size.height - tickHeight, width: 1, height: tickHeight)
+                context.fill(Path(tickRect), with: .color(.red))
+            }
+        }
+    }
+
     func drawTicks(context: GraphicsContext, startSeconds: Double, endSeconds: Double, secondsToPixels: Double, size: CGSize)
     {
-        if self.secondsToPixels > 100
+        if self.secondsToPixels > 75
         {
             self.drawFrameTicks(context: context, startSeconds: startSeconds, endSeconds: endSeconds, secondsToPixels: secondsToPixels, size: size)
         }
@@ -66,7 +132,7 @@ struct TimeRulerView: View
             context.fill(Path(tickRect), with: .color(.white))
 
             // Draw label if it's an hour or minute
-            if self.secondsToPixels > 50
+            if self.secondsToPixels > 75
             {
                 context.draw(Text(label).font(.system(size: 10)), at: CGPoint(x: positionX + 2, y: size.height - tickHeight - 10))
             }
@@ -93,9 +159,10 @@ struct TimeRulerView: View
             let tickRect = CGRect(x: positionX, y: size.height - tickHeight, width: 1, height: tickHeight)
             context.fill(Path(tickRect), with: .color(.white))
 
-            if self.secondsToPixels > 400
+            if self.secondsToPixels > 500
             {
-                context.draw(Text(String(frameNum)).font(.system(size: 10)), at: CGPoint(x: positionX, y: size.height - tickHeight - 5))
+                context.draw(Text(String(frameNum)).font(.system(size: 10)),
+                             at: CGPoint(x: positionX, y: size.height - tickHeight - 5))
             }
         }
     }
@@ -114,7 +181,7 @@ struct TimeRulerView: View
         }
 
         let playheadPositionX = currentTime.toSeconds() * secondsToPixels
-        let playheadRect = CGRect(x: playheadPositionX, y: 20, width: 1, height: size.height-20)
+        let playheadRect = CGRect(x: playheadPositionX, y: 22, width: 1, height: size.height - 22)
 //        context.fill(Path(playheadRect), with: .color(.orange))
 
         if #available(macOS 14.0, *)
@@ -127,7 +194,7 @@ struct TimeRulerView: View
 
             context.draw(
                 Text(currentTimeLabel)
-                    .font(.system(size: 10))
+                    .font(.system(size: 10, weight: .bold))
                     .foregroundStyle(.orange),
                 at: CGPoint(x: playheadPositionX, y: 5))
         }
@@ -141,7 +208,7 @@ struct TimeRulerView: View
 
             context.draw(
                 Text(currentTimeLabel)
-                    .font(.system(size: 10))
+                    .font(.system(size: 10, weight: .bold))
                     .foregroundColor(.orange),
                 at: CGPoint(x: playheadPositionX, y: 5))
         }