Titan CMS Video Checkpointing

During my internship at Northwoods I collaborated with a back-end developer to create V1 of a new video checkpointing tool for Titan CMS. Throughout development of the app, a primary focus was on avoiding breaking changes in Titan. The goal was to ensure that the the app could be easily deployed as part of other sites using Titan CMS. For this project I primarily used CSS and JavaScript, with minimal changes to HTML/XSL/Titan. I also worked solo and in tandem with the back-end dev to test the app on a variety of browsers and in a variety of scenarios. The application is now in regular use in-house at Northwoods and will eventually be released for use by Titan clients. This is a fully functional CRUD app and is responsive and accessible across devices.

This project included three primary components: a data editor (add/edit video), data detail (watch video), data list (video library) page. I developed the front end for all three and used JavaScript to create additional functionality on the watch and add/edit pages for better UI/UX.

Key Features & Challenges

Accessible Modal Forms

The modal forms provide core functionality for the checkpointing tool and are used to add, edit, and delete checkpoint information on the page for any number of checkpoints. Generating the forms as modal dialogs required extensive work in JavaScript since the forms are such a key part of the application and tied to various functions. Due to constraints posed by creating this within the CMS, all customization had to be done on the front-end. Furthermore, I wanted to ensure that the modals were fully accessible to WCAG standards. This meant implementing features such as initial/returning focus, keyboard support and traps, appropriate markup, hiding background window content, etc. I was able to implement the modal form dialogs in a way that integrated with the existing code and did not disrupt the tool's functionality.

Two-Way Timestamp Conversions

The timestamp functionality was also challenging, but was a feature that I proposed and built to improve the user experience. The video checkpointing tool uses time in seconds to create/read/update/delete data as the user makes changes on the page; therefore, the tool needs to save and read time in that integer format. However, on longer videos timestamps in seconds can become unwieldy for the user. I created javascript functions that handle two-way time conversions in order to provide the needed info to the tool while displaying a more readable format to the user. Every time that the user sees a timestamp in a modal form or in the video module, it is shown converted to a string of M:SS, MM:SS, or H:MM:SS (I removed leading zeros with a RegEx). However, all page functionality for the editor still works with time in seconds, and data is converted back and forth as needed for application processes such as checkpoint updates. I implemented my conversion functions and integrated them with the existing JavaScript code to run at the appropriate times.

Key Features & Challenges

Visual Scrolling

Visual scrolling moves the active checkpoint into view as a video is played. This was a UI/UX improvement that needed to be seamlessly integrated with other functionality in order to work as intended.

Copy Buttons & "Toasts"

The design called for minimal copy buttons; however, I was able to increase the info conveyed by expanding the copy buttons on hover and providing a "toast" when a checkpoint is copied. The challenge here was creating these elements in a visually cohesive way while containing the functionality to the video checkpointing module and working within Titan CMS framework.

Key Features & Challenges

Bug Fixes

The Video Library page design was kept simple since we expected further changes once it was integrated into a site. However, in working on this page, the back-end dev and I discovered the source of a bug that I had noted in the Editor. I noticed that certain info didn't update when edited, which then caused issues with the page data not saving properly. While cross checking the Editor page with the Video Library, we realized that it was a small mismatch in our data configuration. We worked together to determine the best fix for the issue, updated our respective code to work in tandem, and then retested to confirm that the bug was resolved. Throughout the development process we found pair programming very valuable as a way to more quickly problem solve. After all, two heads are better than one!