Test page rises a error

[bestmazzo]

Hello, I've been trying to test the plugin in order to better understand how to manage annotations. I've cloned the repo, and followet the instructions in Readme concerning "Develop and build", but once launched the yarn watch, and opened the browser, looking at the console, the following error is shown. How to deal with it?

`VIDEOJS: ERROR: TypeError: "Templates[templateName] is not a function" renderTemplate player_ui_component.js:70 render comment.js:38 Comment comment.js:21 comments comment_list.js:19 CommentList comment_list.js:17 buildComments annotation.js:28 Annotation annotation.js:19 _annotations annotation_state.js:34 set annotation_state.js:34 postLoadDataConstructor annotation_comments.js:59 dispatcher video.min.js:12 le video.min.js:12 trigger video.min.js:12

video.min.js:12 dispatcher video.min.js:12 video.min.js:12:695 e http://localhost:3004/video.js/dist/video.min.js:12 error http://localhost:3004/video.js/dist/video.min.js:12 dispatcher http://localhost:3004/video.js/dist/video.min.js:12 le http://localhost:3004/video.js/dist/video.min.js:12 trigger http://localhost:3004/video.js/dist/video.min.js:12 http://localhost:3004/video.js/dist/video.min.js:12 dispatcher http://localhost:3004/video.js/dist/video.min.js:12`

[ghost]

Hi Team, Any updates on this? I also faced similar issue. Not just the test page, but even after compiling its not working. I am using VideoJS: v7.6.6

[jackpope]

Hi @bestmazzo and @tsinghal18

I cloned a fresh copy of the repo and ran the setup commands. I was able to load http://localhost:3004/test.html and use the player without any issues.

What version of node are you on? I'm running 10.15.2

[ghost]

Video JS version: 7.6.6 Videojs-annotation-comments: 2.0.1 Node: 10.16.3 NPM: 6.9.0

[jackpope]

The functions are exported from this file: https://github.com/contently/videojs-annotation-comments/blob/master/src/js/compiled/templates.js

Can you make sure the yarn build process didn't remove them somehow? Specifically, it looks like the comment template is missing in this issue and the player_button is missing in https://github.com/contently/videojs-annotation-comments/issues/62

[ghost]

I think i have atleast located the difference between working and non working version. In Working version, In Player_ui_component file, for this line const Templates = require('./../compiled/templates');,

Following is the value of Templates object

comment: ƒ ret(context) comment_list: ƒ ret(context) controls: ƒ ret(context) draggable_marker: ƒ ret(context) marker: ƒ ret(context) marker_wrap: ƒ ret(context) new_comment: ƒ ret(context) player_button: ƒ ret(context)

However for non working version where I self compiled the code, following is the value of Template Object {src: {…}} src: templates: comment: ƒ ret(context) comment_list: ƒ ret(context) controls: ƒ ret(context) draggable_marker: ƒ ret(context) marker: ƒ ret(context) marker_wrap: ƒ ret(context) new_comment: ƒ ret(context) player_button: ƒ ret(context)

Notice the difference in hierarchy, there is extra src/templates folder added in the object.

Do you think i did any mistake in building.

I just downloaded the code and did gulp build. Any command I have missed?

[ghost]

Hi Any news?

[jackpope]

Can you please paste the contents of your ./src/js/compiled/templates.js? I still cannot reproduce the problem unfortunately.

[ghost]

var Handlebars = require("handlebars/runtime"); exports["src"] = exports["src"] || {}; exports["src"]["templates"] = exports["src"]["templates"] || {}; exports["src"]["templates"]["comment"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;

return "<div class=\"vac-comment\" data-id=\""

• alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
• "\">\n <div class=\"vac-comment-header\">\n <div class=\"vac-author-name\">"
• alias4(container.lambda(((stack1 = (depth0 != null ? depth0.meta : depth0)) != null ? stack1.user_name : stack1), depth0))
• "

[jackpope]

@tsinghal18 and @bestmazzo can you try pulling this branch to see if it resolves the errors? fix-templates-compilation I opened a PR here: https://github.com/contently/videojs-annotation-comments/pull/63

[ghost]

Your changes didnt solved the problem, however i figured it out myself made changes and made your build working Changes: in player_ui_component.js file renderTemplate(templateName, options = {}) { this.registerHandlebarsHelpers(); return Templates.src.templatestemplateName; }

[jackpope]

Unfortunately, that change can't be reliably merged to master as it is only required on some systems. For example, my machine still can't produce this problem on master. My PR explicitly updates the template config so any machine pulling the code can reference the templates against the same namespace.

On the fix-templates-compilation branch did you notice a change to the code in your ./src/js/compiled/templates.js file after yarn build? The references should have changed from

exports["src"]["templates"] =

to

exports["templates"] =

Example: https://github.com/contently/videojs-annotation-comments/pull/63/files#diff-476162d2d5b7187199c075c184b4be90R3

[slightHYP]

Unfortunately, that change can't be reliably merged to master as it is only required on some systems. For example, my machine still can't produce this problem on master. My PR explicitly updates the template config so any machine pulling the code can reference the templates against the same namespace.

On the fix-templates-compilation branch did you notice a change to the code in your ./src/js/compiled/templates.js file after yarn build? The references should have changed from

exports["src"]["templates"] =

to

exports["templates"] =

Example: https://github.com/contently/videojs-annotation-comments/pull/63/files#diff-476162d2d5b7187199c075c184b4be90R3

If you are building the project on Windows, we solved this issue changing the gulpfile.js

At line 135 you will find:

return declare.processNameByPath(filePath.replace('src/templates/', ''));

modify it as follow:

return declare.processNameByPath(filePath.replace('src\\templates\\', ''));