Skip to main content
Skip table of contents

VDT Changes [VDT RN]

The information on this page is sourced from here: Start Here / Changelog - Page ⋅ Storybook (vidispine.github.io)

22.4.0

cra-template-vdt

Updates

  • eslint included as dev dependency in template

  • Fix horizontally misaligned links in Drawer

  • Replace card header with placeholder in search components

@vidispine/eslint-config

Updates

  • Added typescript linting for "*.ts" and "*.tsx" files

  • Improved readme

@vidispine/eslint-config-typescript

Updates

  • Is now based off of airbnb-typescript rules

  • Improved readme

dependencies

  • @typescript-eslint/eslint-plugin 5.33.1 -> 5.44.0

  • @typescript-eslint/parser 5.33.1 -> 5.44.0

  • eslint-config-typescript removed

  • eslint-config-airbnb-typescript: added (^17.0.0)

  • eslint-config-prettier added (^8.5.0)

  • eslint-plugin-import: added (^2.26.0)

@vidispine/eslint-config-base

Updates

  • Typescript support added for "*.ts" files (using @vidispine/eslint-config-typescript/base)

  • Improved readme

dependencies

  • eslint-plugin-import 2.25.4 -> 2.26.0

  • eslint-plugin-prettier 4.0.0 -> 4.2.1

@vidispine/eslint-config-react

Updates

  • Typescript support added for "*.tsx" files (using @vidispine/eslint-config-typescript/react)

  • Improved readme

@vidispine/eslint-config-mdx

New package

  • Package for adding mdx and md eslint config

  • Can also lint and format js/jsx code inside md/mdx code blocks (using @vidispine/eslint-config-base and @vidispine/eslint-config-react)

    • i.e. inside ```js/jsx {...code...} ```

example-vdt-mui-app

Updates

  • Updated themes/styling with vidispine colors, font, etc.

  • react-query added for data synchronization

  • Updated dependencies

example-vdt-material-app

Updates

  • Refactored and improved file/code structure and readability

  • Improved paths handling for routing

  • Updated styling/logos

  • Updated dependencies

@vidispine/prettier-config

Updates

  • prettier peer dependency lowered from "^2.7.1" to "^2.0.0"

@vidispine/proptypes

Updates

  • ShapeType fixed invalid prop type for containerComponent

  • prop-types re-added as dependency

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

@vidispine/types

New

  • Bundling all typings into dist/index.d.ts for easy import of the VidiCore model types

Updates

  • Types updated for VidiCore 22.4.0

@vidispine/vdt-api

Updates

  • Improved documentation of chunked upload example

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

@vidispine/vdt-js

In this release we've added typescript to vdt-js (using @vidispine/types). Consequently, we've also added typedoc to give better documentation. All function exported from vdt-js now got typings (bundled into dist/index.d.ts), stories and documentation on how to use them.

Note: Default values when using objects aren't shown in typedoc (no typedoc support for it out of the box); so for now look at the storybook controls to find those

Breaking changes

  • roles renamed ROLE_NAMES for clarity of what it contains and consistency with upper case name praxis for consts

  • getDocumentType renamed getShapeDocumentType

  • getShapeMediaType now takes a VidiCore shape as input instead of a parsed shape

  • metadataTypeToWebVtt switched to pass args metadataType and options to be consistent with how other parsers/mappers send in args

    • Change from metadataTypeToWebVtt({ metadataType, subtitleGroup, subtitleField }) to metadataTypeToWebVtt(metadataType, { subtitleGroup, subtitleField })

  • filterShapeSource changed so it's returns VidiCore shape with the shape key (previously returned a parsed shape). The parsed shape is now instead returned with a parsedShape key.

    • Both keys can also be adjusted with options.shapeKey and options.parsedShapeKey

New

Note: Some of these aren't actually new for this release, but they haven't been documented publicly before so they're added here now

  • SYSTEM_FIELDS const for all default VidiCore system field names

  • SYSTEM_FIELDGROUPS const for all default VidiCore system group names

  • parseFileType parse VidiCore file types (e.g. adds file size in KB/MB/GB instead of only bytes)

  • parseGroupList and parseFieldList, used to parse metadata group/field lists

  • parseNowDate parse vidicore "NOW" date representations to actual dates

  • parseSimpleMetadataType parse VidiCore simple metadata types to flat (key/value) objects

  • parseHighlightTimespan parses a VidiCore search/highlight timespan

  • createFacetType create VidiCore facet type from a (js) simplified structure

  • parseFacetType parses VidiCore facet type to flat (key/value) objects

  • parseTranscodePreset parses VidiCore facet type to a simplified structure

  • parseContainerComponent parse a container component

  • parseVideoComponent parse a specific video component

  • parseAudioComponent parse a specific audio component

  • parseBinaryComponent parse a specific binary component

  • findNearestThumbnail will given a time code find nearest thumbnail in itemType

Updates

  • parseShapeType refactored/reworked with extracted audio/video/binary component parsers

  • Added missing note in previous release for TimeCode.toFraction() being replaced with TimeCode.toText({ fraction: true })

Bug fixes

  • TimeCode.toDuration fix issue with overflowing larger units to smaller (given such format option)

  • useSnackbarAlert useCallback added for showAlert function

  • Update stories with new api mock

parseMetadataType

We've dedicated a section for the changes to parseMetadataType (which also applies to its dependent parseTimespanList and parseTimespan functions). In addition to dynamically typing this parseer, it has gotten improved support for parsing multiple fields/groups having the same name within the same field/group list (e.g. transient fields like __ancestor_collection are stored like that). More information about this is also present in the documentation of this parser.

  • Adding support for parsing multiple fields and groups with same name into the same field/group name property as an array (was previously unsupported unless enabling fieldAsList or groupAsList)

    • Be aware that this makes it possible previously ignored duplicated fields/groups surfaces in your system (as intended with this change - making that more transparent)

  • The default options are adjusted to not return fields and groups in field/group key objects by default (they are instead returned with field/group name as key directly). When enabling fieldAsList or groupAsList they are placed inside field/group keys (as arrays).

    • Following this change, we removed the flatGroup option.

  • Setting flat: true will flatten all timespans to one (as before) - but generic metadata will have highest priority now. flat has typically been used to get the generic timespan flattened, and to avoid unexpected timed fields polluting it generic are added last (while still keeping the flexibility of combining different fields/groups from several timespans).

    • overrideGroup (default false) option added following this to return only the latest "duplicated" group it parses (to support same behavior as before)

    • overrideField (default false) option added following this to return only the latest "duplicated" field it parses (to support same behavior as before)

    • If you wan't to keep the same behavior of overriding with the latest parsed and not return an array for single fields/groups with same name, set overrideField and overrideGroup to true. (Note that using flat: true enables these override options by default to have the same flat behavior as previously)

    • Added arrayOnSingleGroup option to return single group in array (useful when expecting more than one group with same name)

    • Added arrayOnSingleField option to return single field in array (useful when expecting more than one field with same name)

    • arrayOnSingle has changed to have default value false. But since it was more or less a synonym for arrayOnSingleValue previously - and that still has the default value true - the default behavior of returning field values in arrays remain.

      • Note: if you've previously used arrayOnSingle: false to get field values without array you need to switch to use arrayOnSingleValue: false now.

      • Also note: It's now possible to explicitly set what you don't want to return as an array by setting arrayOnSingle: true but false for arrayOnSingleGroup, arrayOnSingleField, or arrayOnSingleValue.

  • Adding option includeMetadataAttributes to include metadata attributes in the parsed output

  • Adding possibility to filter parsed attributes with an array of attribute keys for includeMetadataAttributes, includeTimespanAttributes, includeGroupAttributes, includeFieldAttributes and includeValueAttributes.

    • e.g. add includeGroupAttributes: ["uuid"] to also include uuid for groups in the parsed output

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

@vidispine/vdt-mui

A rework of our general component structure has been done. In addition to the api/props our components have: you can override all internal (mui) components and componentsProps. This enables extensive customization while still maintaining a stable/testable api for our components (see vdt-mui docs in the root for more info).

New

  • Collection:

    • CollectionCard display a vidicore collection in a card (horizontal/vertical, options menu, actions)

    • CollectionRepresentativeThumbnail show collection representative thumnbnails in one image (combined, blurred background)

  • Item:

    • ItemCard display a VidiCore item in a card (horizontal/vertical, options menu, actions)

    • ItemThumbnail displays item thumbnails with transitions - has api for adding scrub feature to change thumbnail based on interaction (see storybook for an example)

    • ItemTable show VidiCore item lists in a table representation (with select/multi-select checkboxes)

    • ItemTableRow component for showing one VidiCore item as a table row

  • Shape:

    • ShapeMediaBadges extract and display media badges from a vidicore shape

    • TranscodePresetMediaBadges extract and display media badges from a vidicore transcode preset

  • Inputs (uniformed api, controlled/uncontrolled, variant, size, etc...):

    • BasicDateTimeInput (not locale aware) date time input for handling date, month,

    • DateTimeInput (locale aware) date time input for handling date and time (mui-x pickers and dayjs is used)week, and time.

    • CheckboxGroupInput input for array values with multiple checkboxes

    • RadioGroupInput input for single value with multiple radio buttons

    • CheckboxInput input for boolean as a checkbox

    • SwitchInput input for boolean as a switch

    • NumberInput input for number with a "text field"

    • SliderInput input for number(s) as a slider or range slider

    • TagInput input for array values displaying tags/chips within a "text field"

    • TextInput input for string with a single or multiline text field/area

  • General:

    • CompactBadge show text in styled compact badge component

    • CompactLabel show label in a styled compact format with light/dark mode (intended to be used above media)

    • TablePagination component to use for pagination

    • Sort select button and menu for sorting (with asc/desc support)

    • ScrubLine wrapper to add a scrub line over its children,

    • ExpandButton animated expand button with onChange handler

    • BlurredBackground display image or theme color as a blurred background

    • CornerLabelPlacer wrapper to place labels (compact labels)

    • AvatarMenu avatar with menu and options

    • CornerLabelPlacer wrapper to place labels in the corners over its children

Updates

Note: The components we had for vdt-mui in previous release has changed to follow the new components/componentsProps pattern, please modify them according to the documentation inside storybook

Bug fixes

  • [BinList]: Fix parsing bin list timespans (swap to toText({ fraction: true }))

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

  • @mui/icons-material 5.8.4 -> 5.10.15

  • @mui/lab 5.0.0-alpha.95 -> 5.0.0-alpha.109

  • @mui/material 5.10.1 -> 5.10.15

  • @mui/styles 5.9.3 -> 5.10.15

  • @mui/system added (5.10.15)

  • @mui/x-date-pickers added (5.0.8)

  • dayjs added (1.11.6) prop-types moved from dev dependency (15.8.1)

@vidispine/vdt-materialui

Breaking Changes

  • FieldGroupDesigner Changed props

    • metadataFieldGroupDocument changed name to metadataFieldGroupType

    • setNotification replaced with onSuccess and onError

New

  • FileTypeTableBody display file types in a table body (storage method filters, copy button for uris)

Updates

  • ItemSourceTable styling changes and option to show file information

    • TableHeadLabel class added

    • showFiles flag added as prop to include file information

  • ItemShapeTable now includes file information as well

    • storageListType, displayMethodTypes and storageMetadataKeys props added to enrich or filter the file information to display

    • showDownload prop added to hide shape file download button

    • Shape file size fallback 'Not Available' added if file size can't be retrieved from VidiCore shape

  • Updated components affected by breaking changes in dependent vdt packages

  • Revised the withDrag/withDrop story examples

Bug fixes

  • StorageListTree styles applied to tree correctly

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

  • core-js 3.24.1 -> 3.26.1

  • pdfjs-dist rolled back (2.9.359) - unexpected breaking change between minor versions

  • react-beautiful-dnd 13.1.0 -> 13.1.1

  • react-select 5.4.0 -> 5.6.1

@vidispine/vdt-react

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

@vidispine/vdt-react-timeline

Updates

  • TimelineEvent story added

  • Changed styles and fonts

  • Improved documentation for all components

  • Added overview documentation and example usage

  • Integrate timeline story state with storybook controls

Bug fixes

  • Remove duplicate marker when dragged

  • Fix style misalignments if not wrapping timeline inside mui css baseline or normalize.css

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

  • konva 8.3.11 -> 8.3.14

@vidispine/vdt-videojs-react

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

@vidispine/vdt-videojs

dependencies

  • @babel/runtime 7.18.9 -> 7.20.1

  • video.js 7.20.2 -> 7.21.1

core

  • Improve support for cross-platform development

  • Improve instructions on how to make pre-release/release

  • Switch to Yarn2

    • Remove lerna and only use yarn workspaces

    • Update publishing, scripts, github actions and docs accordingly

  • Changed to use yarn lint --fix instead of a dedicated yarn lint:fix script

  • Update storybook to use webpack 5

  • Replace storybook sw mock (msw) with storybook plugin mock

    • msw wasn't updated correctly when serving multiple from the same origin

  • Add support for typescript in (vscode) workspace, stories/docs, tests, example-mui-app and vdt-js

  • Fix "?undefined" path redirect on "/vdt" at storybook page

  • hygen templates updated for mui components

  • Add utils for integrating story state with storybook controls

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close