NUKnightLab / NUKnightLab/TimelineJS3

Uncaught TypeError: Cannot read property 'call' of undefined

Open
#627 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
3.2k
Forks
645
PR merge metrics
No merged PRs in 30d

Description

Per #624, I'm trying to figure out a way to inject captions into TimeLineJS3 for my local videos without modifying the source code itself. Unfortunately, I'm running into difficulties when using the events as specified here:

https://github.com/NUKnightLab/TimelineJS3/blob/master/API.md

I can get the event "loaded" to work, but when I try "nav_next" or "change," I get the following error:

timeline.js:2514 Uncaught TypeError: Cannot read property 'call' of undefined at NewClass.fireEvent (timeline.js:2514) at NewClass._onStorySliderNext (timeline.js:14008) at NewClass.fireEvent (timeline.js:2514) at NewClass._onNavigation (timeline.js:10903) at NewClass.fireEvent (timeline.js:2514) at NewClass._onMouseClick (timeline.js:10366) at HTMLDivElement.handler [as _tl_click7] (timeline.js:5296) fireEvent @ timeline.js:2514 _onStorySliderNext @ timeline.js:14008 fireEvent @ timeline.js:2514 _onNavigation @ timeline.js:10903 fireEvent @ timeline.js:2514 _onMouseClick @ timeline.js:10366 handler @ timeline.js:5296

Now, I may not be using the event correctly, so here's my JS code:

`
// these are the major functions that inject events/code into TL (for benevolent reasons, of course)
function tlHijack () {
console.log(timeline.getDataById(timeline.current_id));
}

function init () {

    // add an event to handle the arrow keys so that they pause the videos
    document.addEventListener ("keyup", handleKeys, true);

    // when the user swipes between events, also pause the videos
    document.getElementById("timeline-embed").addEventListener("touchmove", pauseVideos, false);

    // finally, if the user clicks on either arrow, pause the videos

    //timeline.on("change", console.log("next..."));
    timeline.on("nav_next", tlHijack());

}

window.onload = init;
`

And here's the HTML:

`

<title>audio formats timeline</title>
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/fonts/font.default.css">

<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<script src="https://mosterd.org/common/js/timelineListeners.js"></script>
<script> timeline = new TL.Timeline('timeline-embed', '{my spreadsheet URL}'); </script> ` Where "{my spreadsheet URL}" is the link to my Google spreadsheet.

Any idea what might be going on?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with API.md's event examples and the event registration in timelineListeners.js, then reproduce the nav_next and change interactions from the issue. Trace the calls through timeline.js fireEvent, _onStorySliderNext, and _onNavigation; done means the documented events can be registered and triggered without the reported TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.