NUKnightLab / NUKnightLab/TimelineJS3
Uncaught TypeError: Cannot read property 'call' of undefined
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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