Setting SEEK and LENGTH on movie and audio

plugins/caspar/app/App.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import * as SharedContext from './sharedContext'
 import * as Settings from './views/Settings'
 
+import { InspectorRange } from './views/InspectorRange'
 import { InspectorServer } from './views/InspectorServer'
 import { InspectorTemplate } from './views/InspectorTemplate'
 import { InspectorTransition } from './views/InspectorTransition'
@@ -31,6 +32,8 @@ export default function App () {
               return <InspectorTransition />
             case 'inspector/template':
               return <InspectorTemplate />
+            case 'inspector/range':
+              return <InspectorRange />
             case 'settings/servers':
               return <Settings.Servers />
             case 'liveSwitch':

plugins/caspar/app/components/LibraryListItem/index.jsx

@@ -43,7 +43,9 @@ const ITEM_CONSTRUCTORS = [
             target: item.name,
             ...(DEFAULT_VALUES[item.type] || {})
           },
-          duration: asset.calculateDurationMs(item)
+          duration: asset.calculateDurationMs(item),
+          medialength: Number.parseInt(item?.duration),
+          framerate: asset.frameRateFractionToDecimal(item?.framerate)          
         }
       }
     }

plugins/caspar/app/components/MediaSeek/index.jsx

@@ -0,0 +1,167 @@
+import React, { useRef, useEffect, useState } from 'react'
+import { millisecondsToTime } from '../../utils/asset.cjs'
+import "./style.css"
+
+const MediaHandle = ({ style, handlePointerDown, type, timestamp }) => {
+  return (
+    <div
+      className={"MediaHandle"}
+      style={style}
+      onPointerDown={() => handlePointerDown(type)}
+    >
+      <span className="MediaHandle--Value">{timestamp}</span>
+    </div>
+  )
+}
+
+const MediaSelectionBar = ({
+  handlePositions,
+  handlePointerDown,
+  maxValue,
+}) => {
+  const [lastActiveHandle, setLastActiveHandle] = useState(null)
+
+  const pointerDown = (type) => {
+    handlePointerDown(type)
+    setLastActiveHandle(type)
+  }
+
+  const isFullRange =
+    handlePositions.in === 0 && handlePositions.out === maxValue
+  const leftHandlePos = (handlePositions.in / maxValue) * 100
+  const rightHandlePos = (handlePositions.out / maxValue) * 100
+  return (
+    <>
+      <div className="MediaSelectionBar">
+        <div
+          className="MediaSelectionBar-highlighted"
+          style={{
+            left: `${leftHandlePos}%`,
+            width: `${
+              ((handlePositions.out - handlePositions.in) / maxValue) * 100
+            }%`,
+          }}
+        >
+          <div
+            className="MediaSelectionBar-highlightedBar"
+            onPointerDown={() => handlePointerDown("bar")}
+            style={{
+              opacity: isFullRange ? 0 : 1,
+
+              pointerEvents: isFullRange ? "none" : "auto",
+            }}
+          >
+            =
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <MediaHandle
+          style={{
+            left: `${leftHandlePos}%`,
+            zIndex: lastActiveHandle === "in" ? 2 : 1,
+          }}
+          handlePointerDown={pointerDown}
+          type="in"
+          timestamp={millisecondsToTime(handlePositions.in)}     
+        />
+        <MediaHandle                
+          style={{
+            left: `${rightHandlePos}%`,
+            zIndex: lastActiveHandle === "out" ? 2 : 1,
+          }}
+          handlePointerDown={pointerDown}
+          type="out"
+          timestamp={millisecondsToTime(handlePositions.out)}
+        />
+      </div>
+    </>
+  )
+}
+
+export const MediaSeek = ({ inValue, outValue, maxValue, onChange }) => {
+  const trackRef = useRef(null)
+  const [dragging, setDragging] = useState(null)
+  const [handlePositions, setHandlePositions] = useState({
+    in: inValue,
+    out: outValue,
+  })
+
+  useEffect(() => {
+    setHandlePositions({ in: inValue, out: outValue })
+  }, [inValue, outValue])
+
+  const handlePointerMove = (e) => {
+    const rect = trackRef.current.getBoundingClientRect()
+    const percent = (e.clientX - rect.left) / rect.width
+    const clampedPercent = Math.max(0, Math.min(1, percent))
+    const value = clampedPercent * maxValue
+
+    if (dragging === "in") {
+      setHandlePositions((prev) => ({
+        ...prev,
+        in: Math.min(value, prev.out),
+      }))
+    } else if (dragging === "out") {
+      setHandlePositions((prev) => ({
+        ...prev,
+        out: Math.max(value, prev.in),
+      }))
+    } else { // dragging the whole bar
+      const range = handlePositions.out - handlePositions.in
+      let newInPoint = value - range / 2
+      let newOutPoint = value + range / 2
+
+      // Don't allow the bar to be dragged out of bounds
+      if (newInPoint <= 0) {
+        newInPoint = 0
+        newOutPoint = range
+      } else if (newOutPoint >= maxValue) {
+        newOutPoint = maxValue
+        newInPoint = maxValue - range
+      }
+
+      setHandlePositions(() => ({
+        in: newInPoint,
+        out: newOutPoint,
+      }))
+    }
+  }
+
+  const handlePointerDown = (type) => {
+    setDragging(type)
+  }
+
+  const handlePointerUp = () => {
+    // Only trigger onChange if values have changed
+    if (handlePositions.in !== inValue || handlePositions.out !== outValue) {
+      onChange(handlePositions.in, handlePositions.out)
+    }
+    setDragging(null)
+  }
+
+  useEffect(() => {
+    if (dragging) {
+      window.addEventListener("pointermove", handlePointerMove)
+      window.addEventListener("pointerup", handlePointerUp)
+    }
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove)
+      window.removeEventListener("pointerup", handlePointerUp)
+    }
+  }, [dragging, handlePointerMove, handlePointerUp])
+
+  return (
+    <div className="MediaSeekBar">
+      <div ref={trackRef} className="MediaSeekBar-track">
+        <MediaSelectionBar
+          handlePositions={handlePositions}
+          handlePointerDown={handlePointerDown}
+          maxValue={maxValue}
+        />
+      </div>
+    </div>
+  )
+}

plugins/caspar/app/components/MediaSeek/style.css

@@ -0,0 +1,89 @@
+.MediaSeekBar {
+  width: 100%;
+  margin: 0;
+  user-select: none;
+  font-family: sans-serif;
+  border-radius: 0.6rem;
+}
+
+.MediaSeekBar-track {
+  position: relative;
+  height: 34px;
+  background-color: var(--base-color--shade2);
+  border-radius: inherit;
+  cursor: initial;
+  box-shadow: inset 0 0 0 1px var(--base-color--shade2);
+  overflow: visible;
+}
+
+.MediaSelectionBar {
+  position: relative;
+  height: inherit;
+  border-radius: inherit;
+  overflow: hidden;
+  cursor: initial;
+}
+
+.MediaSelectionBar-highlighted {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: var(--base-color--shade4);
+  opacity: 0.5;
+  border-radius: 0.25rem;
+}
+
+.MediaSelectionBar-highlightedBar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  font-size: 100%;
+  color: var(--base-color--shade3);
+  user-select: none;
+  cursor: grab;
+  padding: 0.1rem 0.5rem;
+}
+
+.MediaSelectionBar-highlightedBar:active {
+  cursor: grabbing;
+}
+
+.MediaHandle {
+  position: absolute;
+  top: 15%;
+  width: 10px;
+  height: 70%;
+  background-color: var(--base-color);
+  border-radius: 0.25rem;
+  cursor: ew-resize;
+  transform: translateX(-50%);
+}
+
+.MediaHandle--Value {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  z-index: 1;
+  font-family: var(--base-fontFamily--primary);
+  color: var(--base-color);
+}
+
+.MediaHandle::after {
+  content: "";
+  position: absolute;
+  top: 15%;
+  height: 70%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20%;
+  border-radius: inherit;
+  background-color: invert(var(--base-color));
+}

plugins/caspar/app/utils/asset.cjs

@@ -62,16 +62,15 @@ function calculateDurationMs (item) {
   if (!item) {
     return DEFAULT_DURATION_MS
   }
-  // If the item is a still image, return 0
+
   if (item.type === 'STILL') {
     return 0
   }
-  // If the item has no duration, return the default duration
+
   if (isNaN(Number(item?.duration))) {
     return DEFAULT_DURATION_MS
   }
 
-  // If the item has no framerate, return the default duration
   if (!item?.framerate) {
     return DEFAULT_DURATION_MS
   }
@@ -114,3 +113,69 @@ function frameRateFractionToDecimal (fraction) {
 
   return dividend / divisor
 }
+exports.frameRateFractionToDecimal = frameRateFractionToDecimal
+
+/**
+ * Build a string in hours:minutes:seconds format from milliseconds
+ * @example
+ * 1000 -> '00:01'
+ * 61000 -> '01:01'
+ * 3600000 -> '01:00:00'
+ * @param {number} ms
+ * @returns {string}
+ */
+function millisecondsToTime(ms) {
+  if (ms < 0) return "00:00"
+  if (!ms) return "00:00"
+  if (isNaN(ms)) return "00:00"
+
+  const totalSeconds = Math.floor(ms / 1000)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  const pad = (n) => n.toString().padStart(2, "0")
+
+  if (hours > 0) {
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
+  } else {
+    return `${pad(minutes)}:${pad(seconds)}`
+  }
+}
+exports.millisecondsToTime = millisecondsToTime
+
+/**
+ * Frames to milliseconds
+ * @param {number} frames
+ * @param {number} framerate
+ * @returns {number}
+ */
+function framesToMilliseconds(frames, framerate) {
+  if (frames < 0) return 0
+  if (!frames) return 0
+  if (isNaN(frames)) return 0
+  if (framerate <= 0) return 0
+  if (!framerate) return 0
+  if (isNaN(framerate)) return 0
+
+  // Round to 1 decimal place
+  return Math.round((frames / framerate) * 1000 * 10) / 10
+}
+exports.framesToMilliseconds = framesToMilliseconds
+
+/**
+ * Milliseconds to frames
+ * @param {number} ms
+ * @param {number} framerate
+ * @returns {number}
+ */
+function millisecondsToFrames(ms, framerate) {
+  if (ms < 0) return 0
+  if (!ms) return 0
+  if (isNaN(ms)) return 0
+  if (framerate <= 0) return 0
+  if (!framerate) return 0
+  if (isNaN(framerate)) return 0
+
+  return Math.round((ms / 1000) * framerate)
+}
+exports.millisecondsToFrames = millisecondsToFrames