Closed bestmazzo closed 4 years ago
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
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
Video JS version: 7.6.6 Videojs-annotation-comments: 2.0.1 Node: 10.16.3 NPM: 6.9.0
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
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?
Hi Any news?
Can you please paste the contents of your ./src/js/compiled/templates.js
? I still cannot reproduce the problem unfortunately.
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=\""
"\n \n\n"; },"useData":true}); exports["src"]["templates"]["comment_list"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data,blockParams) { var stack1;
return " "
"\n"; },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data,blockParams) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {});
return "<div class=\"vac-comments-container\">\n <div class=\"vac-comments-wrap\">\n"
"\n <div class=\"vac-control-buttons\">\n <a class=\"vac-delete-annotation\">DELETE | <a class=\"vac-close-comment-list\">CLOSE\n \n \n\n"; },"useData":true,"useBlockParams":true}); exports["src"]["templates"]["controls"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) { var stack1;
return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.showControls : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : ""); },"2":function(container,depth0,helpers,partials,data) { var stack1;
return "<div class=\"vac-controls vac-control\">\n <button class=\"vac-button\">+ NEW\n"
"\n"; },"3":function(container,depth0,helpers,partials,data) { return " <div class=\"vac-annotation-nav\">\n <div class=\"vac-a-prev\">Prev\n <div class=\"vac-a-next\">Next\n \n"; },"5":function(container,depth0,helpers,partials,data) { var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
return "<div class=\"vac-video-cover vac-control\">\n <div class=\"vac-video-cover-canvas\">\n <div class=\"vac-cursor-tool-tip vac-hidden\">Click and drag to select\n \n\n"
((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.writingComment : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : ""); },"6":function(container,depth0,helpers,partials,data) { var stack1;
return "<div class=\"vac-add-controls vac-control\">\n Select shape + range\n"
" <div class=\"vac-video-move\">\n <div class=\"vac-a-prev\">-1 sec\n <div class=\"vac-a-next\">+1 sec\n \n\n"; },"7":function(container,depth0,helpers,partials,data) { return " <button class=\"vac-button\">CONTINUE\n cancel\n"; },"9":function(container,depth0,helpers,partials,data) { var helper;
return "<div class=\"vac-video-write-new-wrap vac-control\">\n <div class=\"vac-video-write-new vac-is-annotation\">\n
"\n <div class=\"vac-comment-showbox\">\n <textarea placeholder=\"Enter comment...\">\n
return ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.adding : depth0),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.adding : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : ""); },"useData":true}); exports["src"]["templates"]["draggable_marker"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
return "<div data-marker-id=\""
";\">\n\n"; },"useData":true}); exports["src"]["templates"]["marker"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) { return "vac-ranged-marker"; },"3":function(container,depth0,helpers,partials,data) { var helper;
return "width:"
";"; },"5":function(container,depth0,helpers,partials,data) { var stack1;
return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.tooltipBody : depth0),{"name":"if","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : ""); },"6":function(container,depth0,helpers,partials,data) { var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
return "
"\n \n
return "<div data-marker-id=\""
"\n"; },"useData":true}); exports["src"]["templates"]["marker_wrap"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { return "<div class=\"vac-marker-owrap\">\n <div class=\"vac-marker-wrap\">\n\n"; },"useData":true}); exports["src"]["templates"]["new_comment"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
return "<div class=\"vac-video-write-new-wrap vac-new-comment\">\n <div class=\"vac-video-write-new vac-is-comment\">\n <div class=\"vac-comment-showbox\" style=\"width:"
@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
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; }
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"] =
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 afteryarn build
? The references should have changed fromexports["src"]["templates"] =
to
exports["templates"] =
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\\', ''));
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