We’re excited to announce the release of Anthias v0.20.3. This release includes a number of new features and improvements, including migration to TypeScript, minor UI changes, and bug fixes to playback issues.

Migration to TypeScript

Like with the Browser Extension, we’ve migrated the front-end code to TypeScript. This enables us to write more robust, maintainable, and readable code. Type safety helps us catch errors at compile time and makes the codebase easier to understand.

Challenges

Introducing type safety is not without its challenges. First, we installed and set up TypeScript so it wouldn’t complain about implicit any types. This was fine initially, but settling for any defeats the purpose of using TypeScript. Next, we enabled stricter type checking, which revealed hundreds of compilation and linting errors—most related to type mismatches and implicit any types.

Benefits

Let’s take a look at the ActiveAssetsTable component before the migration:

export const ActiveAssetsTable = ({ onEditAsset }) => {
    // ...
    const activeAssets = useSelector(selectActiveAssets)
    const [items, setItems] = useState(activeAssets)
    // ...

    return (
        <table className="ActiveAssets table">
            {/* ... */}
        </table>
    )
}

At first glance, we have no idea what the value of activeAssets or items looks like unless we use a console.log, for instance. This is okay for smaller components, but it becomes a problem when we have to debug larger components. We can add comments, but they could become irrelevant if the code changes and the comments remain unchanged.

By using types, we can define the “shape” of the data that’s being used in the component. Here’s what the component looks like after the migration:

export const ActiveAssetsTable = ({ onEditAsset }: ActiveAssetsTableProps) => {
  // ...
  const activeAssets = useSelector(selectActiveAssets) as Asset[];
  const [items, setItems] = useState<Asset[]>(activeAssets);
  // ...

  return (
    <table className="ActiveAssets table">
      {/* ... */}
    </table>
  );
};

For convenience, here are the definitions of the ActiveAssetsTableProps and Asset interfaces:

export interface ActiveAssetsTableProps {
  // We'll not be showing what `AssetEditData` looks like here since
  // the focus is on the `Asset` interface.
  onEditAsset: (asset: AssetEditData) => void;
}

export interface Asset {
  asset_id: string;
  name: string;
  start_date: string;
  end_date: string;
  duration: number;
  uri: string;
  mimetype: string;
  is_enabled: number;
  nocache: boolean;
  skip_asset_check: boolean;
  is_active: boolean;
  play_order: number;
  is_processing: boolean;
}

With this, users can now see the structure of the data that’s being used in the component. This is especially useful when we have to debug larger components. Spamming console.log statements is no longer necessary, for the most part. Types also act as a form of documentation, making it easier to read and understand the codebase as it grows.

While it will be somewhat harder to introduce changes to the project due to strict type checking, we believe the long-term benefits of using TypeScript are worth it.

Minor UI changes

We’ve made several minor UI changes to the schedule overview page, including restyled tooltips, alert modals, and the home page. We also removed the unnecessary “Cancel” button, which previously redirected users to the home page.

Bug fixes

We previously got rid of the black gap that appears between image assets, but this broke GIF playback, which is now fixed. Additionally, we optimized web asset playback so that upcoming web pages load before being displayed, reducing wait times for users.

What’s next?

We will continue to improve asset playback and enhance the user experience of the web interface. Anthias is free and open source, and we’re committed to keeping it that way. Feel free to check out the source code or contribute to the project.