Type alias which wraps and simplifies ThunkAction.
Type of the function returned by getReducer() of ActionHandler.
This component renders a handle on one of the sides of a chapter node, which
when clicked can be used to add a new chapter before, after or below the
clicked node. This is facilitated by the onClick callback. The cursor is
also changed to a pointer if the handle is hovered over.
Renders an input field for a checkbox with the given label, an initial toggle
state for the checkbox and an optional description. Accepts a callback
onChange which is invoked when the user updates the field.
This component renders a container at half the height of the screen and a
container for each asset passed in through the assets prop. This container
renders a preview image for each asset, its title and a short description.
Each of these asset containers has its draggable property set to true, i.e.
the container can be dragged onto other elements and data can be transferred
this way. In this instance, the element the asset container has been dropped
over receives the asset's ID.
EmptyTrack is a component created for convenience when one wants to render a track which does not contain any timeline elements yet. It is simply a wrapper around TimelineTrack wich a couple defaults for certain props such as the callbacks, which are empty functions or the list of elements, which is also empty. All other props are simply passed through to the inner TimelineTrack.
This component is intended to render HTTP error messages. It accepts a HTTP status code and text as props. Optionally also a document ID and a more descriptive error message can be passed in.
Renders a list of events by arranging them on a grid, where each event is placed inside a box displaying event title, thumbnail and a button for launching configuring the event. The exact events that are rendered from the list passed in via props depends on the given trigger mode.
Provides a landing page, from which the user can access all other parts of the application. These other parts of the application are connected via standard hyperlinks, whereas the link to the configuration page and the viewer are realised through separate components.
A layout ties together multiple preview screens and regions. The regions are associated to devices through areas by means of unique IDs. Layout provides a wrapper around the application and renders components which are displayed throughout the entire application, such as the MenuBar component.
Props for rendering children
Renders a CSS-based spinner which can be used to indicate to the user that the application is in the process of loading data, e.g. from a server.
This component renders connectors between the current node and nodes above, to the left and right potentially child nodes.
Renders an input field for an event parameter. The exact type of input field rendered is determined by the event type passed in through the props. If the event type is unknown, an error message is rendered.
This component renders a chapter tree as a list, starting from the level
passed in the chapters prop. Child levels are indented by the amount given
in the prop levelIndent. Optionally, the access path of a selected chapter
can be passed in, which will be highlighted in the list. Finally, a callback
triggered when one of the entries is clicked must be provided.
Renders a single event as part of a QueuedEventList. Based on the type of
event, border and background colours change. Moreover, for active events,
a close icon is rendered which can be used to dequeue the events.
Renders a list of already queued events, filtering out abstract ones and
replacing ready events with their active counterparts where available by
matching them using their productionId.
This is a generic component for rendering preview screens and its associated
regions. Based on the screen type (communal or personal) it also renders
a corresponding device frame (i.e. a TV screen or a mobile phone). One can
specify the height of the screen while the width is then calculated based on
that and the aspect ratio of the device frame. This component also provides
callbacks for when a comonent is dropped onto one of the regions or when the
user attempts to open a context menu by right-clicking on a screen region.
These callbacks are used by DroppableScreen and SplittableScreen
correspondingly.
General container for grouping a type of preview screens (e.g. all personal devices). Has a title and label for number of devices at the very top and then renders all preview screens passed in one after the other from top to bottom. The container also forwards a series of callbacks for removing devices, splitting regions and undoing splits to the preview screens within the container.
Renders an input field for a dropdown with the given label, an optional
initial value for the selected item and list of options. Accepts a callback
onChange which is invoked when the user updates the field.
This component renders various buttons which give the user access to
functionality such as saving the document and clearing or deleting the
current session. If the fetchError prop is given, it is implied that an
error has occured elsewhere in the application and that certain functionality
is not available anymore, such as saving the document. Thus, the presence
of fetchError disabled some controls. The component also offers two
controls for interacting with the session, namely "Clear Session" and "Delete
session". The former one deletes the session on the client side, whereas the
latter one deletes it both on the client and on the server.
Renders an input field for plain text with the given label and an optional
initial value. Accepts a callback onChange which is invoked when the user
updates the field.
TimeConverter takes a numeric value for seconds and uses it to render a
timecode consisting of hours, minutes and seconds. All values are padded to
the left with zeroes. So for instance, passing the value 345 for the prop
seconds will result in a timecode 00:05:45 to be generated.
Renders an input field for a URL with the given label and an optional initial
value. Accepts a callback onChange which is invoked when the user updates
the field.
Creates an action for adding a new asset.
ID of the asset to add
Name of the asset
Description of the asset
URL pointing to a preview image
Duration of the asset. Optional
Creates an action for creating a new chapter after the chapter given by the access path.
Access path of the chapter after which the new chapter shall be created
ID of the new chapter. Optional
Creates an action for creating a new chapter before the chapter given by the access path.
Access path of the chapter before which the new chapter shall be created
ID of the new chapter. Optional
Creates an action for creating a new chapter as a child of the chapter given by the access path.
Access path of the chapter under which the new chapter shall be created
ID of the new chapter. Optional
Creates an action for adding a new preview screen with the given parameters.
Type of screen to add. One of personal or communal
Name of the device to be added. Optional
Orientation of the device to be added, one of landscape or portrait. Optional
Whether a root regions that covers the entire screen should be created. Optional, default true
This asynchronous action creator first dispatches an action for creating a new preview device with the given parameters and then iterates the given list of screen regions and adds them to the newly created screen region by dispatching the action for placing regions on a screen.
Type of preview screen to be added. One of personal or communal
Name of the screen to be added
Orientation of the screen. One of landscape or portrait
List of screen regions to be placed on the new screen
Creates an action for adding a new element to an existing timeline track on a timeline. The new element must be given a duration. By default, the new element is inserted at the end of the track, but a specific insert index can be specified, where the new element is inserted at the given index and all following elements are shifted right by on position.
ID of the timeline the element should be added to
ID of the track on the timeline the element should be added to
ID of the component to be added
Duration of the element on the track
Offset of the element from the previous element. Optional, default 0
Index at which the element should be inserted. Optional, default -1 (end of track)
Preview URL for the element. Optional
Predefined ID for the new element. Optional
Creates an action for adding a new master layout with the given name.
The name of the new master layout
Dispatches the action for creating a new master layout and immediately selects the newly created layout as current layout.
Name of the layout to be created
Creates an action for adding a new timeline for the chapter given by the ID.
Chapter for which a new timeline is to be added
Creates an action for adding a new timeline track to the timeline given by the ID for the given region.
ID of the timeline to be removed
ID of the region for the new track
Whether the new track should be locked. Optional, default false
ID of the new track. Optional
Asynchronous action which first dispatches an action for adding a new track to an existing timeline based on ID and immediately afterwards dispatches an action for adding a new element to the created timeline track.
Timeline to which the track and element should be added
Region for which the track should be created
Component to add to the new track
Duration of the element on the track
Offset of the element to its previous element
Preview URL for the element
Predefined ID for the new timeline track. Optional
Predefined ID the new element. Optional
Compares two arrays element by element and returns whether they are equal or not.
Type of the elements inside the array
First array
Second array
True if the arrays are equal, false otherwise
Takes the passed component and add children to it which render a
left-pointing arrow. This is intended to be used with elements such as the
HTML anchor a or Link from react-router, thereby creating a convenient
way to instantiate back-links.
Component to be wrapped
Creates an action for assigning a given component to a screen region within a master layout.
The ID of the master layout the component is to be assigned to
The ID of the screen the component is to be assigned to
The ID of the region within the screen the component is to be assigned to
The ID of the component we want to assign to the given master layout
Creates an action for setting a new document, effectively starting a new editing session. The action also takes a base URL which is prepended to all relative URLs in the document such as preview image.
Document ID to set
Base URL associated to the document
Checks if a given value is between the given bounds. The check can either be performed inclusive or exclusive.
The number to be checked
The lower bound
The upper bound
Whether the check should include the bounds or not
True or false
Transforms a string by capitalising its first letter. If the first character is not a letter or the string is empty, the input will be returned unchanged.
Input string
The input string with the first letter capitalised
Takes a node in a chapter tree and counts leaf nodes reachable from it.
Chapter node from which to start counting
Number of leaf nodes
Finds an object in a given collection by investigating each entry's key 'id' and checking it against the given search value.
Type of the items inside collection. Must have a key named id
Type of the values inside an object of type T and type of the value to search for
Collection to search
Value to search for
The index the entry was found at and the entry itself as a tuple
Finds an object in a given collection by investigating each entry's key
given by the parameter key and checking it against the given search value.
This is a more generic version of findById()
Collection to search
Value to search for
The key which shall be checked
The index the entry was found at and the entry itself as a tuple
Calculates the optimal width of the wrapper container hosting the individual event blocks. Starting from the full screen width, it is decreased until an exact multiple of the event block width is found, which is then returned as the optimal width. If no such width could be found, the event block width is returned.
The width of individual event blocks
The optimal width for the container based on screen width
Generates an array containing indices to accessing nodes in a tree data structure. Its input parameter is simply a list of indices. This list is transformed in such a way, that it can be used to access tree data structures the way they have been implemented in this project.
An array of numbers specifying indices to index a tree
A modified access path to navigate the actual data structure
Calculates for each ancestor of the chapter accessible by accessPath the
offset that needs to be subtracted from the front of the timeline of said
ancestor to align it with the chapter given by accessPath. Returns a list
of tuples containing for each ancestor its access path, id and offset in
seconds.
Complete chapter tree
List of timelines associated to the chapter tree
Acces path of the node to be investigates
A list containing a tuple for each ancestor with id and offset
Takes a ref to a Konva Stage component and two numbers representing absolute positions on the screen and returns the coordinates for the same point but relative to the top-left corner of the Stage instead of the screen. Throws an error if the Stage ref is null.
Ref to a Stage component
Absolute x position on screen
Absolute y position on screen
The [x,y] coordinates relative to the top-left corner of the given Stage
Returns a list of indices for accessing the chapter node identified by the given id in a tree-like data structure of chapter nodes.
A tree-like data structure containing chapter nodes
The id of the chapter we want the path for
A list of indices for locating the chapter with the given id in the tree
Returns the total duration of the given chapter. This is calculated by getting the timeline length of the current chapter and then recursively visiting all children and summing up their timeline lengths. The result is the duration of the chapter taking the durations or its descendants into account.
The chapter for which we want to get the duration
Timelines associated to the given chapter nodes
The duration of a chapter taking into account durations of descendants
Returns a flattened list of all descendants of the given chapter node. This function either accepts a single chapter node or a list or chapters (i.e. a level of a chapter tree).
A flattened list of all descendants of the given chapter
Returns a random integer between the given bounds, or between 0 and 10 if no bounds are given. The values for the bounds are rounded to integers.
Lower bound for random number
Upper bound for random number
A random number within the given bounds
Scans a layout document retrieved from the API for a region corresponding to
the given area ID and returns it. Returns undefined otherwise
Area ID to search for
Layout document where we want to find the region corresponding to the area
The region for the given area ID or undefined
Returns the length of a timeline by summing up durations and offsets of all its timeline elements on all its tracks. The function thenreturns the length of its longest track
The timeline for which we went to know the length of
The duration of the longest track in the timeline
Returns the number of levels in a tree of chapters starting from the given level.
List of tree nodes from which to start
The number of levels in the tree
Creates an action for loading and parsing an entire hierarchical chapter structure received from the API.
A tree-like data structure for chapters obtained from the API
Creates an action for allocating timelines found in a chapter tree data structure retrieved from the API. The data structure is processed recursively and a timeline object is created for every timeline encountered.
Tree-like structure of chapters
Launches a HTTP request for the given URL and method. Returns a promise which resolves to a string containing the response text on success.
HTTP method. One of GET, POST, PUT or DELETE
The target URL for the request
Data to send with the request
Content type of the request data
A promise which resolves to the response body
Wraps action creators with the dispatch function and maps them to props.
Dispatch function for the configured store
Maps application state to component props.
Application state
Takes a chapter node and visits all its children, investigating their timelines, merging them along the way, resulting in a single timeline which represents the global timeline view seen from the given chapter as it would be rendered in a standard non-linear video editor.
Chapter to merge the timelines for
A list of timelines associated to the chapter nodes
The current chapter's timeline merged with all descendant timelines
Allows navigation to a different part of the application by dispatching a
push() action on the store with the given route descriptor and optional
state as parameters.
Route to navigate to
State to pass to the route. Optional
Pads a string on the left side with a given character to a specified length. If the input string is longer than the target length or the padding string is longer than one character, the input string will be returned unchanged.
The object to pad. Will be converted to string first
The target length of the desired string
The character the string should be padded with. Must be a single char
The padded string
Parses a query string returns the parsed values in a map.
The query string to parse
A map containing the parsed values as key-value pairs
Creates an action for freely placing a new region on the screen. All sizes and coordinates are relative to the screen size and are therefore float values between 0 and 1. The region can optionally have a predefined ID. If left empty, a random ID is generated. Values for name and background colour are also optional but default to empty values.
ID of screen region should be placed on
Position of the new region. Given as [x, y]
Size of the new region. Given as [w, h]
ID of the new region. Optional
Name of the new region. Optional
Background colour of the new region. Optional
Selects a subset of key-value pairs from an object and returns a new object containing only the selected keys.
Type of the obj parameter
Object to pluck keys from
Names of keys that should be plucked
A new object with the given subset of keys
Creates an action for deleting the chapter given by the access path.
Access path of the chapter to be deleted
Creates an action for removing a given component from a screen region within a master layout.
The ID of the master layout the component should be removed from
The ID of the screen the component should be removed from
The ID of the region within the screen the component should be removed from
The ID of the component we want to remove from the master layout
Creates an action for removing an existing preview screen.
ID of the screen to be removed
Creates an action for removing the given element located on the given track and timeline.
ID of the timeline the element is located on
ID of the track on the timeline the element is located on
ID of the element to remove
Asynchronous action which first dispatches an action for removing an element from the given timeline track on the given timeline. After the removal, the updated timeline track is received and checked if it still contains any more elements. If it has become empty, another action id dispatched for removing the entire track. If there are still elements left, nothing more is done.
ID of the timeline the track is located on
ID of the track the element should be removed from
ID of the element to be removed
Creates an action for deleting the master layout with the given ID.
The ID of the master layout to be deleted
Creates an action for removing all references to a screen region in all master layouts. This should be called after removing a screen region to avoid inconsistencies.
The ID of the screen region we want to remove from master layouts
Creates an action for removing all references to a screen in all master layouts. This should be called after removing a preview screen to avoid inconsistencies.
The ID of the screen we want to remove from master layouts
Creates an action for removing a timeline given by the ID.
ID of the timeline to be removed
Creates an action for removing a timeline track given by it ID, located on the given timeline.
ID of the timeline the track is located on
ID of the timeline track to be removed
Creates an action for renaming the chapter given by the access path.
Access path of the chapter to be renamed
The new name of the chapter
Creates an action for selecting the newest layout as current layout. Should be invoked when the master manager is first loaded and no current layout is set yet.
Shortens a given URL and returns a promise for the shortened URL.
URL to shorten
A promise which should resovle to the shortened URL
Creates an action for splitting a region within a preview screen given by their IDs. The split is created horizontally or vertically and a float value between 0 and 1 determines the location of the split, where 0 is the very left/top of the screen and 1 the very right/bottom of the screen for vertical and horizontal splits respectively.
ID of the screen where the region is located
ID of the region to be split
Orientation of the split, one of horizontal or vertical
Position of the split within the region, must be between 0 and 1
Creates an action for toggleing the track lock for the the given track and timeline.
ID of the timeline the element is located on
ID of the track on the timeline the element is located on
Cut a specified amount of seconds from the end of a given timeline track. This is done by adjusting the durations and/or offsets of the elements contained in the track. An empty track is returned unchanged.
Timeline track to be trimmed
Time in seconds that should be trimmed off the end
The timeline track trimmed to the given length
Cut a specified amount of seconds from the beginning of a given timeline track. This is done by adjusting the durations and/or offsets of the elements contained in the track. An empty track is returned unchanged.
Timeline track to be trimmed
Time in seconds that should be trimmed from the beginning
The timeline track trimmed to the given length
Cut a specified amount of seconds from the beginning and end of a given timeline track. This is done by adjusting the durations and/or offsets of the * elements contained in the track. An empty track is returned unchanged.
Timeline track to be trimmed
Time in seconds that should be trimmed at the end
The timeline track trimmed to the given length
Creates an action for undoing the last split that occurred on the screen given by the ID. If there haven't been any splits on the screen, this is a no-op.
ID of screen for which the last split shall be undone
Creates an action for updating the duration of the given element located on the given track and timeline.
ID of the timeline the element is located on
ID of the track on the timeline the element is located on
ID of the element to update
New duration value
Creates an action for updating the offset of the given element located on the given track and timeline.
ID of the timeline the element is located on
ID of the track on the timeline the element is located on
ID of the element to update
New offset value
Creates an action for updating the currently selected master layout.
The ID of the master layout to be selected
Creates a action to update the currently selected screen. The value
undefined can be passed or the parameter omitted altogether to clear the
currently selected screen.
The ID of the screen which shall be selected. Optional
Validates a layout document against a schema. If the layout validates correctly, the function returns void, otherwise it will throw an error.
The layout to validate
Generated using TypeDoc
Type for functions passed to the
addHandler()method ofActionHandler.State that the reducer will act upon
Action that the reducer will act upon
The transformed state