KettleCorn: A journalist’s tool for enhancing interactive audio and video stories

Screen shot 2013-10-26 at 11.42.30 AM

This summer, ODDI began forking the open source Popcorn Maker project to create KettleCorn, a tool designed to meet the needs of journalists working around the world in different languages. The original Popcorn Maker project allows web creators to easily create interactive audio and video stories using a WYSIWYG web editor. Projects can be shared, remixed and evolve from person to person.

KettleCorn Updates

Our goal with KettleCorn was to build upon our favorite Popcorn Maker features while tailoring it to the needs of international journalists. To encourage adoption, we strove to reduce the time to publish news-style video while making it as easy as possible to translate projects to another language. With those goals in mind, we added the following features:


Improved subtitles (Updated Jan. 22)

We’ve created a dedicated Subtitles plugin so that users can quickly subtitle a single quotation or an entire video.

When we launched KettleCorn, users could add subtitles one at time by using the Text plugin. This solution worked fine for subtitling a short quotation. But manually adding subtitles for an entire project, line by line (with an additional click and scroll to select the style and positioning) was time consuming.

With the new Subtitles plugin, a user can quickly subtitle a segment by clicking on the plugin and filling in the text field. By default the subtitle is positioned across the bottom of the project.

Users can also insert the link to a published Google Spreadsheet with the subtitles for an entire video. The user simply fills in this template with the start and stop times, the subtitle text, the position of the subtitle (top or bottom) and whether the text needs to be displayed right-to-left (TRUE or FALSE). Then the user selects “File”>”Publish to the Web” and clicks on the “Start Publishing” button. The user copies and pastes the resulting URL into the Advanced tab of the Subtitles Plugin. (We’ve created a simple transcript converter. Insert your transcript text, click the convert button and then copy and paste the output into a new Google Spreadsheet.)

Chris Hadfield sings 'Space Oddity' with Spanish subtitles.
The subtitles for this KettleCorn project of Astronaut Chris Hadfield’s performance of ‘Space Oddity’ are powered by this spreadsheet.

Using a spreadsheet for the subtitles has many benefits:

  • It’s easier and faster to create and edit multiple subtitles on one sheet.
  • It’s a simple process to copy the original spreadsheet page and provide translations.
  • And it’s easy to collaborate on a project by sharing the spreadsheet with another editor.

As long as the spreadsheet URL and page name are included in the KettleCorn project, the translations will automatically be updated as the spreadsheet is updated.

While working on our MLK project, we discovered that Google Spreadsheets also have a simple method for quickly translating a spreadsheet using Google Translate.

Start off with a spreadsheet page with all of your subtitles and timecodes entered. Duplicate that page and rename the copy with the new translation language (e.g. Chinese). You can use Google Translate to translate cells in a google spreadsheet:


“English” = the name of the spreadsheet page source (optional)
“B3″ = the cell source of the text
“en” = English, the language you’re translating from
“zh-CN” = the language code for the language we’re translating into (simplified Chinese)

This technique offers varying degrees of success. Google Translate appears to work better for western languages (Here’s a link to the Spanish version translated by Google). But regardless, it offers a starting point and is a very quick way of translating the speech into dozens of languages. For a public facing project we would still recommend using a native speaker or person with language fluency to provide an accurate translation.



The Broadcasting Board of Governors (BBG) supports journalists broadcasting around the world in over 60 different languages. Because Popcorn projects can be shared and remixed, we wanted to encourage journalists and consumers to share projects across languages. To facilitate that, we baked translation into KettleCorn.

Here’s how it works: A journalist finds a Popcorn story she’d like to remix and translate. She can edit her translation preferences by clicking on “My Preferences” and selecting whether she’d like to manually translate the project or use machine translation, and selecting her preferred language. She then steps through each Popup or Text event, clicking on the “Translate” button in the plugin editor. If she were to select machine translation, it would automatically translate the text into her preferred language using Bing Translate. In some cases and for some languages this may be sufficient. But frequently the journalist (or her editor) will want to refine the translation. For this reason, the original text was copied into read-only field so that the journalist and future editors can review and refine the translation as needed.


Right-to-left (RTL) support for all plugins

We’ve added support for right-to-left languages for all of our plugins. That means KettleCorn can correctly display languages like Arabic, Persian, Urdu and Hebrew.

You can set the text to be RTL in the ‘Advanced’ tab for the GoogleMaps+, Lower Thirds, End Card and Wikipedia plugins. In the lower thirds plugin, the RTL toggle flips the titles so that the logo is on the left and the text is set to RTL.

KettleCorn supports right-to-left languages like Arabic and Hebrew for all of the event plugins.
Here is raw footage shot by Alhurra that has been enhanced with KettleCorn.

The text editor in the Text and Popup plugins also includes a button to switch the type from LTR to RTL.

Finally, we’ve also added support for RTL for projects that use GoogleMaps+ spreadsheet integration. We’ve added a column where users can specify for each marker if it should be LTR or RTL.


Advanced Maps Plugin

We extended the maps plugin to include a clickable marker with an optional infoWindow to display a title and description.

Journalists can also link to a GoogleDoc spreadsheet to synchronize multiple markers. As the project plays, the map will focus on the different markers. The user can click on the markers to navigate to different parts of the video.

Screenshot of the new KettleCorn maps plugin showing multiple locations.

Here’s how to create an interactive map controlled by a Google Spreadsheet. Open a copy of the GoogleDoc spreadsheet template. Each stop on the map is represented by a row in the spreadsheet. For each entry you can:

  • Edit the start and stop times
  • Set the latitude, longitude and zoom
  • Enter an optional title and description
  • Set whether you want a marker
  • And set whether the infoWindow opens on focus.

After editing the spreadsheet, from the File menu select “Publish to the web.” Click on “Start publishing.” Copy and paste the URL to the advanced tab of the KettleCorn maps plugin.


Lower Thirds Plugin

This plug-in enables journalists to quickly create clean, consistent lower third titles. If a user logs in to KettleCorn with a Persona account tied to a USIM email address the lower third will automatically be branded with their entity logo (e.g. VOA, RFA, RFE/RL, Alhurra).

Screenshot of KettleCorn project showing the new lower thirds plugin.
Journalists can enter a title and description, and have an optional URL and entity logo.


Restyled popup plugin

One of our first goals for KettleCorn was to restyle Popcorn for journalism. We streamlined the icons and color palette to work with everything from serious breaking news to feature stories. We reduced the overall number of icons, but added icons that journalists can use to help tell their stories or link to related content. Finally, we restyled the popup boxes and speech balloons to simplify their look and make them less cartoony.

Revised icon set for KettleCorn.

Improved text styling

Online producers need to be able to style and edit text quickly. We’ve simplified the text editor by adopting and implementing the familiar CKeditor interface.

This also allowed us to introduce custom styles for common types of text like block quotes, subtitles and labels. Producers no longer have to remember (or decide on the fly) that subtitles should be white text on a black background at 1.2em. Instead, they can just highlight the text, select the style and decide if they want to anchor the text to the bottom, top or manually position it.

Screenshot showing some of the new KettleCorn prebaked text styles.


End card promo plugin

This plugin provides an easy way to promote related stories by adding three headlines, three links and three photos.

Screenshot of KettleCorn's new End Card Promo plugin.


Showcasing new projects

BBG journalists are encouraged to share their work between language services and entities. To help facilitate the remixing and translation of projects we created a gallery for recent projects. When a creator is ready to publish project, he checks a box to make it public and have it appear in the showcase gallery.

In the near future we’ll allow visitors to sort projects by creator, organization, language and publication date as well as being able to search by keyword.


But wait, there’s more…

We made several small but important improvements to the KettleCorn editor to speed up production. Many of these changes are simple enhancements that professionals expect in a basic video or audio editing tool.

Rename layers: Popcorn projects can quickly grow in size and complexity. Users can now rename project layers to help organize their project.

Undo/Redo: We’ve also enabled undo/redo functionality so that journalists can step back to quickly undo a mistake. Creators can use the standard shortcut keys for undo (Ctrl+z) and redo (Ctrl+Shift+z).

Copy and paste: During our testing and training with BBG journalists, we saw that users were spending too much time recreating similar effects at multiple spots on the timeline. To speed up production, users can copy and paste events.

Precise sizing and positioning: And finally during our earlier training efforts we heard journalists asking for help providing greater precision in the sizing and positioning of plugin events. Most event plugins have an “Advanced” tab where users can set the height, width and position.

The following two tabs change content below.
Brian Williamson

Brian Williamson

Brian Williamson is the senior UX designer for the Office of Digital & Design Innovation. Follow him on Twitter: @drawinghands.


  1. Brad Jones says:

    Is the source code available for KettleCorn?

  2. Ron G. says:

    Following up from Brad Jones’

    Is this an open source project?

  3. Brian Williamson Brian Williamson says:

    Yes, it’s all open and available here:
    Here’s the roadmap of features we’re interested in trying to support:

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *