init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { observer } from "mobx-react";
import { types } from "mobx-state-tree";
 
import Registry from "../../core/Registry";
import { guidGenerator } from "../../core/Helpers";
import SelectedModelMixin from "../../mixins/SelectedModel";
import ControlBase from "./Base";
import { HtxLabels, LabelsModel } from "./Labels/Labels";
 
/**
 * Use the TimelineLabels tag to classify video frames. This can be a single frame or a span of frames.
 *
 * First, select a label and then click once to annotate a single frame. Click and drag to annotate multiple frames.
 *
 * ![Screenshot of video with frame classification](../images/timelinelabels.png)
 *
 * Use with the `<Video>` control tag.
 *
 * !!! info Tip
 *     You can increase the height of the timeline using the `timelineHeight` parameter on the `<Video>` tag.
 *
 * @example
 * <View>
 *   <Header>Label timeline spans:</Header>
 *   <Video name="video" value="$video" />
 *   <TimelineLabels name="timelineLabels" toName="video">
 *     <Label value="Nothing" background="#944BFF"/>
 *     <Label value="Movement" background="#98C84E"/>
 *   </TimelineLabels>
 * </View>
 * @name TimelineLabels
 * @regions TimelineRegion
 * @meta_title TimelineLabels tag
 * @meta_description Classify video frames using TimelineLabels.
 * @param {string} name Name of the element
 * @param {string} toName Name of the video element
 */
const TagAttrs = types.model({
  toname: types.maybeNull(types.string),
});
 
const ModelAttrs = types.model("TimelineLabelsModel", {
  pid: types.optional(types.string, guidGenerator),
  type: "timelinelabels",
});
 
const TimelineLabelsModel = types.compose(
  "TimelineLabelsModel",
  ControlBase,
  LabelsModel,
  ModelAttrs,
  TagAttrs,
  SelectedModelMixin.props({ _child: "LabelModel" }),
);
 
const HtxTimelineLabels = observer(({ item }) => {
  return <HtxLabels item={item} />;
});
 
Registry.addTag("timelinelabels", TimelineLabelsModel, HtxTimelineLabels);
 
export { HtxTimelineLabels, TimelineLabelsModel };