#384 ✓ staged
Henrik Moltke

Enable timeline-syncronized html printout

Reported by Henrik Moltke | March 3rd, 2011 @ 12:03 PM | in 0.7

The time line displays events and triggers a text-based "printout" of URLs and attribution with links (that open in new window). The printout scrolls in sync with the time line.

Watch this http://thomson-craighead.net/docs/war_2scr.html which was our inspiration (Flash, will need +30 seconds to load) and this mockup http://yoyodyne.cc/wp-content/uploads/2011/03/GML_popcorn_wireframe... to understand what we'd love to do.

Comments and changes to this ticket

  • Rick

    Rick March 3rd, 2011 @ 12:06 PM

    • Tag set to plugin
  • Nic

    Nic March 4th, 2011 @ 09:50 AM

    That would be really cool.

    I faked a similar effect with a series of separate pages in a demo for using popcorn with mashups: http://dev.b-dop.com/dream/

    From a user perspective it would mean you could scroll back at the end of watching a video and read the annotations you might have missed during playback.

    (great film btw, never seen before)

  • dseif

    dseif March 16th, 2011 @ 11:45 PM

    • Assigned user set to “dseif”
  • Henrik Moltke

    Henrik Moltke March 19th, 2011 @ 03:58 PM

    • Milestone set to 0.5
    • Milestone order changed from “44” to “0”
  • Henrik Moltke

    Henrik Moltke March 21st, 2011 @ 07:10 PM

    Nic this is AWESOME. I have been thinking about doing something along the same lines with Girl Talk's newest album and possibly hooking it up with The Hip Hop Word count - http://www.wired.co.uk/news/archive/2011-02/18/hip-hop-language
    Also -nNot sure this is 100% related - but check out http://fanbóys.org/ interesting approach to timeline + links. Is this useful for fixing this bug?

  • Nic

    Nic March 22nd, 2011 @ 02:10 PM

    Cheers. That sounds very cool. There was that neat js Girl Talk visualizer http://mashupbreakdown.com.
    I realise I may have mistaken a bug ticket for a feature request - very sorry, will step aside.

  • dseif

    dseif March 22nd, 2011 @ 02:18 PM

    I've got a working version of this, but there are still a few things that I'd like to iron out/get the opinion of some people on. Mainly, I'm wondering what everyone thinks is the best way to go about embedding links in the text the user inputs. I was thinking of using some form of regex to see if the user enters a straight up url (http://www.google.ca), and then do something along the lines of what lighthouse does for inline links,

    [link name here](http://www.google.ca "alt text")
    

    which creates link name here.

    What do you guys think? Is there a better way to approach this?
    Heres a link to the tree: https://github.com/dseif/popcorn-js/tree/e85a105fd87efa98549e016388...
    and heres an example of what I have working, lemmie know what you think: http://matrix.senecac.on.ca/~dseifried/popcorn/plugins/timeline/pop...

    PS. I used the .css file from nicks example above, as I pretty terrible at making things look nice. So thanks Nic, hope thats cool!

  • Henrik Moltke

    Henrik Moltke March 22nd, 2011 @ 03:08 PM

    I like it a lot! Kick ass!

    Just out of curiosity - is there an easy way to visualize the events in the
    timeline and to jump to the event when clicked? See
    http://henrikmoltke.dk/Popcorn_Google_Feed_Plug-in_Demo.jpg

  • dseif

    dseif March 22nd, 2011 @ 03:22 PM

    So do you want when the div containing the text is clicked, the video goes to that location in the video? And you want a little tick on the videos timeline to indicate that their is data corresponding to that time in the video (sorta what soundcloud does)?

    The one when a div is clicked is definately doable, the other one I have no idea about and would have to look into more.

  • Henrik Moltke

    Henrik Moltke March 22nd, 2011 @ 04:06 PM

    Exactly. I'd love both, but let's go for the easier one first. The other one
    is filed here:
    https://webmademovies.lighthouseapp.com/projects/63272/tickets/417-...

  • dseif

    dseif March 22nd, 2011 @ 04:11 PM

    Alright sounds good!

  • Nic

    Nic March 23rd, 2011 @ 10:49 AM

    This works brilliant! (and v happy that my two lines of css could be of use :)

    Seeing it now, I can imagine how useful it could be in the tedious job of logging documentary footage - especially the click on on a div and jump to a timecode bit

  • Scott Downe

    Scott Downe March 24th, 2011 @ 01:49 PM

    I am getting an idea for this.

    Basically, this could be an effect plugin, that could log text defined in any track to a "console" like window.

    It might look something like this:

    p.subtitle({
      start: 1,
      end: 2,
      text: "text from 1 - 2 seconds"
      effects: {
        console: {
          target: "consolediv",
          text: "text to log"
        }
      }
    });
    

    with "console" being an effect plugin registered with popcorn.

    Also, the console attribute could also take a reference to data in the track, this this:

    p.subtitle({
      start: 1,
      end: 2,
      text: "text from 1 - 2 seconds"
      effects: {
        console: {
          target: "consolediv",
          text: text // or some data path to obtain the above "text from 1 - 2 seconds" as a variable
        }
      }
    });
    

    So in the above example, "text from 1 - 2 seconds" would be logged to the console.

    This way you can do some fancy stuff inside the XML, like this:

    <subtitles>
      <console target="consolediv" text="text"> <!-- needs to be a way to distinguish between variables and actual text -->
        <subtitle in="" out="">text</subtitle>
        <subtitle in="" out="">text</subtitle>
        <subtitle in="" out="">text</subtitle>
        <subtitle in="" out="">text</subtitle>
        <subtitle in="" out="">text</subtitle>
      </console>
    </subtitle>
    

    This way, you could easily apply effects of the dynamic nature to all children.

  • Scott Downe

    Scott Downe March 24th, 2011 @ 01:51 PM

    My above idea is kinda blocked by #275.

    It is just an idea, though, so don't let it block any other work happening in this ticket.

  • Steven W

    Steven W April 19th, 2011 @ 11:26 AM

    • Milestone changed from 0.5 to 0.6
  • dseif

    dseif May 10th, 2011 @ 02:06 PM

    Just getting back to working on this now, should be ready for 0.6, sorry for the delay.

  • annasob

    annasob May 10th, 2011 @ 04:43 PM

    • Milestone changed from 0.6 to 0.7
  • Scott Downe

    Scott Downe June 2nd, 2011 @ 04:06 PM

    • Assigned user changed from “dseif” to “David Seifried”
  • David Seifried

    David Seifried June 2nd, 2011 @ 05:14 PM

    • State changed from “new” to “assigned”
  • David Seifried

    David Seifried June 6th, 2011 @ 04:21 PM

    • State changed from “assigned” to “peer-review-requested”
    • Assigned user changed from “David Seifried” to “Scott Downe”

    Let me know what you think about this, this should cover the functionality that you outlined in the ticket. I used an innerHTML option for allowing the user to enter links and so on, as well as whatever else they may want to add, a button, table or whatever. Used a bit of css to keep things not looking really dull.
    Commit: https://github.com/dseif/popcorn-js/commits/t384

  • Rick

    Rick June 6th, 2011 @ 08:19 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Scott Downe” to “David Seifried”

    Great work!

    A few things here...

    https://github.com/dseif/popcorn-js/blob/728d8165b40f6f11952bc324a0...

    I would recommend direct access to the style property:

    
    newdiv.style.display = "block";
    

    same for this line, but with "none":

    https://github.com/dseif/popcorn-js/blob/728d8165b40f6f11952bc324a0...

    Since there are a number of references to document.getElementById( options.target ), you could cache a reference and use that

    The open brace here needs to be pulled up to the previous line:

    https://github.com/dseif/popcorn-js/blob/728d8165b40f6f11952bc324a0...

    Keep up the killer work!

  • Rick

    Rick June 6th, 2011 @ 08:20 PM

    One other thing... when this lands in 0.7, we'll need to make sure that we change this:

    https://github.com/dseif/popcorn-js/blob/728d8165b40f6f11952bc324a0...

    to an absolute url

  • David Seifried

    David Seifried June 7th, 2011 @ 09:45 AM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “David Seifried” to “Rick”

    Hey Rick,

    Here are the changes you requested.

    https://github.com/dseif/popcorn-js/commits/t384

  • Rick

    Rick June 7th, 2011 @ 02:25 PM

    • State changed from “peer-review-requested” to “super-review-requested”
    • Assigned user changed from “Rick” to “Scott Downe”

    Excellent work :D PR+

    Tested: timeline plugin test suite;

    Passing in:

    • FF 3.6, 4.x, 7.x

    • Chrome 11, 12, 13

    ... It even feels lighter to read with that dom element cached as target. Nice job :)

  • Scott Downe

    Scott Downe June 13th, 2011 @ 10:20 AM

    • State changed from “super-review-requested” to “under-review”
  • Scott Downe

    Scott Downe June 13th, 2011 @ 10:22 AM

    You should add the code necessary to the index.html page in the plugins dir.

  • Scott Downe

    Scott Downe June 13th, 2011 @ 10:43 AM

    • State changed from “under-review” to “review-needs-work”
    • Assigned user changed from “Scott Downe” to “David Seifried”

    This little block of code:

    <div id="timeline" style="float:left;width:400px;height:200px;overflow:auto"></div>
    

    Should happen internally.

    So, the outside creation should look like this if at all possible:

    <div id="timeline"></div>
    

    Personally, I think this should work differently. New events should append to the bottom of the container, and the old should be pushed up, like a console.

    Probably support both directions somehow. Now, if both are supported, we have to figure out what to do if two share the same target, yet one says up and one says down.

  • David Seifried

    David Seifried June 20th, 2011 @ 05:02 PM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “David Seifried” to “Scott Downe”

    Added the changes you asked about Scott, let me know what you think
    https://github.com/dseif/popcorn-js/commits/t384

  • cadecairos

    cadecairos June 21st, 2011 @ 11:35 AM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “Scott Downe” to “David Seifried”

    Cool plug-in!

    Here's some style changes you need to make:

    line 2: whitespace around "Popcorn"

    Compress these into one var declaration.

      var i = 1;
       
      //  Included simple css to make it look a bit nicer
      var head = document.getElementsByTagName( "head" )[ 0 ];
      var css = document.createElement( 'link' );
    

    line 32: 'link' => "link"

    compress into one var declaration:

        var target = document.getElementById( options.target );
    
        // create a new div and append it to the parent div so nothing
        // that already exists in the parent div gets overwritten
        var newdiv = document.createElement( "div" );
    

    line 47: add whitespace to the right side of the assignment

    Add whitespace to the code below.

        options: {
          start :      { elem:"input", type:"text", label:"In" },
          end :        { elem:"input", type:"text", label:"Out" },
          target :     "feed-container",
          title :      { elem:"input", type:"text", label:"title" },
          text :       { elem:"input", type:"text", label:"text" },
          innerHTML:   { elem:"input", type:"text", label:"innerHTML" }
        }
    
  • David Seifried

    David Seifried June 21st, 2011 @ 01:21 PM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “David Seifried” to “cadecairos”

    Aight made requested changes chris!
    https://github.com/dseif/popcorn-js/commits/t384

  • cadecairos

    cadecairos June 21st, 2011 @ 01:56 PM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “cadecairos” to “David Seifried”

    Two problems..

    1: fails lint (see below)

    Linting ./plugins/timeline/popcorn.timeline.js

                      ? options.direction : "up";
    
       Problem at line 51 character 23: Bad line breaking before '?'.
    

    1 Error(s) found.

    2: Unit tests are failing. might be due to the above. (see below)

    "3. Died on test #3: options.direction is undefined"

  • David Seifried

    David Seifried June 21st, 2011 @ 02:43 PM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “David Seifried” to “cadecairos”

    Alright should be good now Chris
    https://github.com/dseif/popcorn-js/commits/t384

  • cadecairos

    cadecairos June 21st, 2011 @ 02:57 PM

    • State changed from “super-review-requested” to “review-needs-work”

    excellent.

    the _teardown method can be changesd from:

    _teardown: function( options ) {
      while ( target.childNodes.length >= 1 ) {
        target.removeChild( document.getElementById( options.target ).firstChild );       
      }  
    }
    

    to:

    _teardown: function( options ) {
      while ( target.childNodes ) {
        target.removeChild( document.getElementById( options.target ).firstChild );       
      }  
    }
    

    Then add unit tests for the _teardown method, and Bob's your uncle :D

  • cadecairos

    cadecairos June 21st, 2011 @ 03:02 PM

    Also, on second glance I notice you caould simplify the removal of child nodes.

    Try doing:

    while ( target.firstChild ) {
      target.removeChild( target.firstChild );
    }
    
  • cadecairos

    cadecairos June 21st, 2011 @ 03:04 PM

    • Assigned user changed from “cadecairos” to “David Seifried”
  • David Seifried

    David Seifried June 22nd, 2011 @ 10:42 AM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “David Seifried” to “cadecairos”

    Alright change with the _teardown function has been made, also did some cleanup in the unit.js file. Did not write a unit test as the unit tests have already been written for it...

  • cadecairos

    cadecairos June 22nd, 2011 @ 11:13 AM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “cadecairos” to “David Seifried”

    Sweetness!

    I will pass this after one last change...

    line 52 has double spaces beween the camparison operators :)

  • David Seifried

    David Seifried June 22nd, 2011 @ 11:16 AM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “David Seifried” to “cadecairos”
  • cadecairos

    cadecairos June 22nd, 2011 @ 11:33 AM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “cadecairos” to “David Seifried”

    Upon closer inspection, there is no need to check for 'i' on line 61. Once you remove that from the if statement I think we'll be ready to go.

  • David Seifried

    David Seifried June 22nd, 2011 @ 11:47 AM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “David Seifried” to “cadecairos”

    Alright made the change, I may have at i begin at zero in the past which is why it may have been like that.
    https://github.com/dseif/popcorn-js/commits/t384

  • cadecairos

    cadecairos June 22nd, 2011 @ 12:04 PM

    • State changed from “super-review-requested” to “review-looks-good”
    • Assigned user changed from “cadecairos” to “Jon Buckley”

    awesome.

    timeline unit tests passing on:
    Firefox 4, 7
    Chrome 12

    Passing lint.

    SR+

    sidenote: we should consider this comment that scott made above - specifically the last bit:

    "Personally, I think this should work differently. New events should append to the bottom of the container, and the old should be pushed up, like a console.

    Probably support both directions somehow. Now, if both are supported, we have to figure out what to do if two share the same target, yet one says up and one says down."

  • Rick

    Rick June 22nd, 2011 @ 12:37 PM

    I'm in favor of those comments as well, optional direction is a great idea. Perhaps in a follow up 0.8 ticket?

  • David Seifried

    David Seifried June 22nd, 2011 @ 12:45 PM

    THe optional direction stuff is actually implemented, tho the behaviour is in question. Currently you can specify "up" or "down" for each now timeline, and it will append either above or below the previous timeline. I don't know if this is desired behavious, but we should probably lean towards something like the first timeline setting the precidence for all others coming after it. So setting the direction to "up" on the first one, will force all others to follow.

  • Jon Buckley
  • Rick

    Rick June 22nd, 2011 @ 12:50 PM

    dseif, cool - that will actually come free when defaults lands - nice job on this.

  • Rick
  • Rick
  • Rick

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Tags

Referenced by

Pages