Roadmap for Cue Builder and Popcorn.js

kreynen's picture

Currently there is no integration between the Cue Builder and Popcorn.js modules, but integration has always been part of the plan. While the initial feature of Cue Builder will be deep linking and won't use Popcorn (because that's what RETN needs to upgrade to D7), structurally a Cue has what we need to trigger Popcorn events. The first place I'd like to see Cue Builder and Popcorn.js integrated is in a media caption solution, but since both @emilyf and I have limited time to work on this I'd be willing to contribute to another implementation if someone else wants to drive a project.

This is the roadmap I've working towards:

  1. Create module that makes Popcorn.js available as a library call from other modules - DONE!
  2. Create module that defines a Cue and the UI for adding Cues - IN PROGRESS!
  3. Develop a method for other modules to declare a Cue type
  4. Add support for importing Popcorn Maker files
  5. Add Popcorn Maker integration


Feedback on Cues module

btopro's picture

Not sure you need all the cue building capabilities do you? Or was the orignal connotation not to associate these to entities? I think the entity field collection + table formatter for this is an excellent direction to head with this as I was starting to rapid prototype this myself this morning. Including it as a feature is a nice way of bundling it / making it more transparent imo.

As for popcorn vs general integration, is the scope of Cue to work with anything in any way or is the goal to focus it more towards working with popcorn.js? Also thoughts on having a field for an entity reference that would allow for reference of internal entities to render the full item (node most likely) in whatever the themable area is for this? While I like that popcorn maker seems to integrate with 3rd party sources, I think it could be even more powerful to be able to reference custom content types (and 3rd party plugins too). This would open up things like using custom formatters module to build complex types (that could also tap 3rd parties if needed) and be even more interactive potentially. Immediately I'm thinking of referencing a type that's for timelines -- and having the ability to perform a popcorn against multiple theme-able areas.

My use case for something like this -- a lecture is playing about history, references are displayed in one window below the player, a map of where we are talking about is visible to the right with a timeline below it that's rending a view, adding points as it goes by triggering different views to render.

I'll be honest that the video

sunnydeveloper's picture

I'll be honest that the video side of things is not a strength. Whether cue builder is the right route is something I can't say without a demo/screencast (etc). Or that this is less about right/wrong and about vision of use case.

The use case Bryan describes is the outcome I've been working towards. I love the idea of entity reference in addition to 3rd party. I can say that from academics to marketing in our university this would be received with a LOT of enthusiasm.

I see that Popcorn Maker is on your roadmap as last steps, (again video newbie so be gentle) but isn't Cue kind-of a 1st generation version of what Popcorn Maker will be incredible at? The newer version (which I've seen but isn't released yet) allows dragging/dropping , easily adding events with a few clicks. \

Why can't we leverage what's there right now with Popcorn Maker for time / event generation, I would definitely learn more about Popcorn Maker/Butter etc and build around that? I'm sure you have a reason for focusing on Cue, but there are my thoughts.

btopro's picture

Some things to think about / my thoughts discussed via a PoC I rigged up --

Another video player I'm kicking around instead of video.js is

Has a drupal plugin and has a focus on accessibility / captioning which I need.

@btopro love the YouTube

kreynen's picture

@btopro love the YouTube video, but where's the beard?

I'm really excited to get this conversation started and expanded beyond just @emilyf and I. Over the years I've gotten much further building generalized modules to define the base data structure and UI and later extend the base for a specific use case than the integrate a specific use case into the based structure.

Cue Builder is a work in progress and will be used in several use case. Some Popcorn related. Other not. Currently there is only one type of Cue and it doesn't actually do anything beyond store the start time, stop time (optional), and message/title. Cue Builder's UI was designed to create ordered lists of Cues and associate those to a node or entity. In the Community Media implementation the structure maps out like this...

Media <-> Show (metadata about the content) <-> Cue List <-> Cue <-> Field Collection of fields

While we could associate the Cue List directly to the Media entity, Shows define things like the Producer, Creative Commons licensing, FCC rating, Series, etc. There can also be multiple derivatives of the same Media file hosted locally and/or by different providers.

Since the Community Media groups I work with are very vested in Media, I'm going to but most of my effort into integrating Popcorn the the media_[provider] modules I maintain or co-maintain.

That's not to say that a Cue Builder/Popcornjs can't be used with other players. Not linking the javascript library, the cues/data, and the way the video is played back is very MUCH by design.

@sunnydeveloper, you are right. Popcorn Maker's UI could/will replace Cue Builder's UI, but I put that at the end because I want to parse Popcorn Maker's output into individual Cues rather than simply sticking the entire output into a single text field. By storing each Cue separately and providing alternative UI's to edit them, you can combine/filter the events by type.

Consider this workflow...

  • Add the URL of the Vimeo video referenced by Amara to Drupal using Media
  • Add Cues of the Caption type that display over the iframe defined by media_vimeo
  • Enable some of the captions as chapter markers (not Popcorn related)
  • Enable the Popcorn Block module (doesn't exist) that defines a div for Popcorn events to target.
  • Add a Cues of the Google Map type that load maps into Popcorn Block

It's true that Popcorn Maker can create interactions FAR more sophisticated that what I've described, but only as a single timeline. The types of events can't be filtered outside of editing them in Popcorn Maker. Permissions can't be granted to alter events by type. Events like captions can't be translated. The list goes on. We get MUCH more bang for our development buck if we build a solution that can import and export to and from Popcorn Maker.

The structure I'm pushing for allows the Vimeo/YouTube/Archive video to be used every way Media allows as well as creating the interactive lecture display @btopro wants.

Now let's take it a step further and say someone writes a Comment Cue module that defines that cue type and how that would be displayed. Students can watch the presentation with all Cues including Comment Cues or filter those out. Filters could be added to only see comments a staff members flags or other users rate highly. The possibilities are endless.

These configurations just aren't possible with just a Popcorn Maker/text field type of integration.

Another thing I want from Cues/Popcorn is Community Media specific. That is the ability to export cues to the different video playback servers Community Media organizations use. Progressive Community Media organizations teach media literacy, copyright, media production and story telling that happen to still run cable television stations. Dozens of groups like channelAustin, MNN, Denver Open Media and BAVC already use Drupal and modules like Telvue or Cablecast to push scheduling information to their playback servers. Many of these groups are already integrating Popcorn Maker into their Youth and Media Education programs, so it isn't too big a jump to imagine a community driven version of the new DYI VH1 Popup Video.

So... All of this sounds

sunnydeveloper's picture

All of this sounds awesome, but I'm foggy on the roadmap.
If I can attempt to say back to you, what I just read:

The cue module(proposed) is not specific to one use case, but rather a full suite of video event management (cues) which interact and leverage different libraries (ie: popcorn) where appropriate ( going for powerful & flexible over specific).

Your development is focused on media_[provider] modules, and media itself.

I work at a university, and I am doing this on my own time (so far, the use case is an intended resource-barginer (AKA I can do this as part of my job as well if they buy into it) and for me that is important to reaching the end goal. I think universities(ed tech in general) will embrace and build once they have something tangible.

Even though you prefer a general module development, I can't really invest without knowing the road map to our use case. (I'm hoping we can sort that out)

I need to see where I am going :)

With the understanding that

btopro's picture

With the understanding that Cue builder is for use with things other then popcorn maybe we could strike this balance in development:
@kreynen - you work towards the media_{} suite of things (as you will anyway ;))

@sunnydeveloper - we can use the feature that cue comes packaged with as a starting point for a working proof of concept / sandbox. This sandbox's goal is initially to integrate a cue-like structure with popcorn. Roadmap would then be:

  • Make sandbox, integrate with composite fieldset that has start, stop, region and a node reference (or something like this)
  • Once that poc is working with nodes, Maker will be further along (nov release)
  • work on rolling sandbox into a plugin for Maker and try to integrate Maker directly

I also know instructional designers that might be interested in this, especially in conjunction with the asset management system that I do work on for. I'd envision there being kind of an interactive media type or something that can be setup and stored as a player that can be embedded on other sites (long term goal).

I realize that integrating

kreynen's picture

I realize that integrating Cue Builder w/ Popcorn.js is still pretty abstract. I'm trying to condense the conversations @emilyf and I have already had about this over several months into a few posts. Like @sunnydeveloper, we haven't had a client willing to pay us to work on the Popcorn integration. Developing Cue Builder for chapter markers is the only part of this work that was paid for. The rest has been done based on the vision of how this could work.

Isn't the only thing missing to "integrate with composite fieldset that has start, stop, region and a node reference" w/ Cue Builder the ability to declare a Cue type? I've created an issue to add that...


I've also started a sandbox for the D7 version od media_captions to show how the hook will work so it can be added by other modules.

I should be able to add the hook to cue_builder and to get a proof of concept version of media_captions done by the end of the week.

Defining multiple regions to target is something I thought could be done with a module like Popcorn Blocks. While there should be an option to target any div with a Cue, Cue Builder can list the Popcorn blocks when adding a Cue of a type that uses regions for users who wouldn't be creating their own tpls.

Next week I think you'll be able to do this...

  • Enable cue_builder, media_vimeo, media_captions, popcornjs, and popcorn_block
  • Add a Video content type with a media field.
  • Add a Popcorn Block named Caption
  • Place the Caption block in the Content Region
  • Add Video node with a Vimeo video
  • Add Cues of the type Media Caption targeting the Caption block to the referencing the Video node
  • View the Node and see the caption cues loading into the caption block as the video plays

At that point anyone can start creating modules that add additional types of cues and test this structure. I think this will support every use case we've discussed and more. @emilyf was traveling this week so I'm waiting for her feedback too.

Ok, so either way it may be

sunnydeveloper's picture

Ok, so either way it may be good to wait until next week(wednesdayish?) - to see what's available, to have your colleagues feedback ( and in my case more time to look at and understand cues).

by the way I am demoing some popcorn/web native video to our instructional designers/web developers next week Wednesday morning. So hope to tell them more about this as well :)

Hey all, great discussion --

emilyf's picture

Hey all,

great discussion -- this is awesome to get some other input into how to best leverage cue builder for multiple use cases. i think next wednesday is a good time to check in -- currently cue builder is an entity type that can then be set to attach to any content/entity type and then builds a reference field in. then it provides a cue start, cue end, and description (and the title will be automatically created) using field collections and table formatter. it also provides some blocks and views that show up on the referenceable content type to allow you to view/edit/add/delete cues. i'm going to revamp it this week or next to use it also integrates with feeds which we need at retn to import legacy data.

i haven't had a ton of time to put forth on this in the past few weeks, but i should be able to get these changes made by wednesday and roll up the next release.

Thanks Emily. I checked out

sunnydeveloper's picture

Thanks Emily. I checked out Cue Maker this week, and look forward to playing a bit more once you're ready.

I committed the first version

kreynen's picture

I committed the first version of It simply defines a specific type of block. Still working on an update to cue_building that can target the block.

Ok, great - I've checked this

sunnydeveloper's picture

Ok, great - I've checked this out and played with it as well.
Maybe once you have cue_builder target working we can all chat/hangout for half an hour to be clear on how we can best contribute? No rush though, running an Popcorn event Sept 15th, so pretty busy until then. Will be able to put in a serious effort after that.

Popcorn maker and drupal

mackh's picture

Hi Everyone,

Sounds like great thinking on integrating popcorn.js and drupal. We're (Affinity Bridge) starting to look at getting the import of popcorn maker files into drupal working, and would love to contribute to the efforts that have started here.

Hoping we can define custom event types in popcorn maker. Are there any areas of the current development that we can help with?

A hangout / chat / IRC session would be awesome too.

Digging into the modules that have been built so far, looking forward to moving this ahead

ps sunnydeveloper - nice post on the popcorn event the other day, looks like a lot of fun!

I have been working on some

kreynen's picture

I have been working on some large projects and haven't gotten back to this. I committed the popcorn_blocks module, but I went down a rabbit hole trying to figure out how to populate the document.addEventListener("DOMContentLoaded", function () { from Views and Cue Builder.

Just added a new post breaking the Popcorn elements down and describing which modules are doing what and what's already "done".

Embedding Popcorn exports from something like Maker is where I started with That's already pretty easy with some copy and pasting into text areas, but isn't a very Drupal approach.

Where I'm trying to get is to be able to either import the Maker output or directly integrate so Maker saves to Drupal via a service. I'd even be happy being able to import some like...

           start: 2,
           end: 6,
           text: "Pop!",
           target: "footnotediv"

... into a Cue.

But that's getting ahead of where we're at now. What I'm struggling with at the moment is bypassing the the normal media_[provider] output when an video is being used w/ Popcorn. Media uses php stream wappers to define the files in Drupal with a prefix like youtube:// and a unique identifier that the module translates into the URL. Because there's already so much built on Media, IMHO it makes sense to leverage that.

I'm up for a call. I'm also going to be at the OpenEd conference in Vancouver and BADCamp in Berkeley. Anyone want to organize a Popcorn sprint before or after those events?

HI Kevin (welcome Mack! )Ok

sunnydeveloper's picture

HI Kevin (welcome Mack! )

Ok so lets plan a hangout - Mack has some energy to put behind this, Bryan and I do as well, there is no need to struggle too much with any one item - the major challenge right now seems to be a 'big picture' of the development work for Drupal and Popcorn, and the common goals that will allow us to move forward.

I put up a proposed agenda for a hangout here:

Totally draft of ideas - but I thought it could get us moving, please edit/add - comment .

I think once we have a team approach , we can better can also participate as a group in popcorn calls (or one of us can try to make it)

Suggested this Friday for hangout?

  • I'm just off a couple months of organizing/planning so hope I don't come off as trying to run anything, just on a high from working with Popcorn 'on the surface' for a kids hackjam: and looking forward to getting under the hood again.

Wish I was going to that Open Ed Conference Kevin, but I think there should be at least one rep there from our university.

next Popcorn Community call

sunnydeveloper's picture

next Popcorn Community call is sept 27th (just in case you don't know already :)

Anyone for Friday? This next

sunnydeveloper's picture

Anyone for Friday? This next month leading until Christmas I can donate all my contrib time for this, but need a launching point/conversation/group agreement on roadmap kind of thing. Or preference to work another way? Just want to get started, would love to have something to demo for Drupalcon Portland

I can't do this Friday. Big

kreynen's picture

I can't do this Friday. Big project for is ramping up. There is also a Community Media Drupal/CiviCRM Support call every Friday.

Any thoughts on scheduling a call every other Thursday alternating with the Mozilla calls?


sunnydeveloper's picture

So then:

Thursday Sept 27th (first of bi-weekly Drupal Popcorn Calls)
If I can beg a time, earlier works for me (anytime 7:00 AM PST - 10:00 AM PST)

In the meantime Kevin ,you mention:

What I'm struggling with at the moment is bypassing the the normal media_[provider] output when an video is being used w/ Popcorn. Media uses php stream wappers to define the files in Drupal with a prefix like youtube:// and a unique identifier that the module translates into the URL. Because there's already so much built on Media, IMHO it makes sense to leverage that.

Can I help/work on something here before next Thursday?

Or something else? Research ? Thanks

Originally I was thinking

kreynen's picture

Originally I was thinking about this from the perspective of using Popcorn for captions. For captions you'd want to have the option of including the captions anywhere the Media entity was displayed. To accomplish that, I was thinking I'd want to override the the formatting in files like media-youtube-video.tpl.php and call the Popcorn YouTube player instead.

Then I started thinking instead of overriding that, the caption option really should be configured as a Style. But I couldn't wrap my head around how Styles could be used to combine multiple Popcorn functions. I think this approach is right for captions. When selecting how to display a media/file field, you could select Image, Media, or Media w/ Captions formatters.

It's easy enough for the media_captions to pull all the captions for that entity n order, format them, and add everything else needed to play the video to the page.

But when I started adding types and targets to Cues, I knew I wanted to use Views to filter the Cues. I started thinking about adding the core "collecting" function to the popcornjs module. I started thinking that a menu like popcorn/[entity id]/[view name]/[view argument1]/view argument2]/... would work well as a more universal approach.

That's where I'm at right now. I'll tighten up what I modified on Cue Builder and commit it to a sandbox tonight. Then we're down to formatting the Views and the collection function in popcornjs.

I'll work on understanding

sunnydeveloper's picture

I'll work on understanding all you've said ;)
Ideally we want a Drupal content event/plugin as well (but we can talk about all of that next week). Good luck with your project.

Any of those times this

emilyf's picture

Any of those times this Thursday can work for me. A group meeting seems like a good idea.

I upgraded cue_builder a bit back to improve the views, admin areas and to use hms_field for the time fields. Unfortunately this breaks with feed imports because hms_field doesn't provide a feeds mapper. I started to create one and the fields are mappable, however it throws an error upon import. I think it's a fairly easy fix most likely but I haven't been able to figure out what it needs. Full report is here in case anyone wants to help...

Thursday 7:30 PST

sunnydeveloper's picture

Hoping all interested can make a meeting(looks like Emily can) anyone else? Google hangout? Message me your gmail (I have some , but not all)

@sunnydeveloper can you add

kreynen's picture

@sunnydeveloper can you add an event to the group so it will handle the time shifting for everyone. I'm still not exactly sure when this meeting will be.

Also, please look at Demo #1 on before the call. All of the code I used to do that is committed, but popcorn_fake_views is just a textarea at this point. I guessing it will take 4-6 hours to write the View handlers and formatting needed to populate that part with Cue Builder driven View output.

I don't know when I'll have time to write that, but this should be flushed out enough that other developers can get involved.

Ok - thanks , and yes I

sunnydeveloper's picture

Ok - thanks , and yes I should have created an event!

I'm still here

sunnydeveloper's picture

Removed / posting in relevant forum


Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week