Issue with automatically assigning poster on video elements
Hi @smik3 generally if you have an issue you would need to recreate it inside a live demo. BTW, first of all, use the improved API for component definition because this: is definitly wrong (with this API isComponent method is mandatory...), so you would need something like this and then you shouldn't update the value...
Read full answer below ↓Question
1st of all really enjoying all that Grapes has to offer once you've worked through the starting stumbling blocks!
I have a small issue atm regarding videos. I am passing them to the Asset manager with a thumbnail property, which is then applied to the video poster trait when the src is updated. The only problem is this doesn't seem to actually work until the src is changed a couple of times, and then it only applies to the view and not the exported html.
Here's my current code from my plugin...
defaultType = comps.getType("video");
comps.addType("video", {
model: defaultType.model.extend({
traits: [
{
name: 'poster',
chngeProp: 1,
},
],
}),
view: defaultType.view.extend({
init() {
this.listenTo(this.model, 'active', this.onActive);
this.listenTo(this.model, "change:src", this.updatePoster);
},
events: {
dblclick: 'onActive',
},
onActive() {
editor.AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'video'));
editor.runCommand("open-assets", {
target: this.model,
});
},
updatePoster() {
const src = this.model.get("src");
const srcOrigin = editor.AssetManager.getAll().filter(asset => asset.get("src") == src);
let thumb = srcOrigin[0].get("thumb");
if (thumb != "") {
let thumbPath = src.substring(0, src.lastIndexOf("/"))+"/"+thumb;
this.model.getTrait('poster').set("value", thumbPath);
} else {
let thumbPath = "";
this.model.getTrait('poster').set("value", thumbPath);
}
},
}),
});
and the block simply as
addName('video') && bm.add('video', {
label: "Video",
category: "Extras",
attributes: {class:'fa fa-youtube-play'},
content: {
type: 'video',
style: {
"display": "block",
"min-height": "200px",
"max-width": "100%",
"height": "auto",
"padding": "10px",
},
activeOnRender: 1,
},
});
I'm guessing I'm just missing a bit of logic in the component model, but not sure what that should be
Answers (2)
Hi @smik3 generally if you have an issue you would need to recreate it inside a live demo. BTW, first of all, use the improved API for component definition because this:
model: defaultType.model.extend({
traits: [
{
name: 'poster',
chngeProp: 1,
},
],
}),
is definitly wrong (with this API isComponent method is mandatory...), so you would need something like this
model: {
defaults: {
// You should define properties in defaults..
traits: [{
name: 'poster',
// chngeProp: 1,
// First of all, is `changeProp` and not `chngeProp` and then you
// don't even need it if it will be an attribute
}],
}
},
and then you shouldn't update the value of the trait but just the model...
this.model.addAttributes({ poster: '...' });
Thanks for the response, should have seen that chnge!
I now have the opposite problem, in that it's applying the changes to the model (and the export/final code) but if the video block is placed within another block, the view just shows a blank component. For customising what gets shown in the canvas, do I need to update the model or a different aspect? I'll try and make a snippet later, I'm handling assets in a weird way so it may take me a while.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #530
Elements hidden through the layer manager can no longer be brought back after saving the content.
Steps to reproduce on http://grapesjs.com/demo.html :Click on the Layer Manager.Hide any layer, e.g.: the Header.Save the content - this ha...
Issue #991
uploading video in the image element
hi. i was trying to implement uploading videos using the image element with the asset manager i stopped at the step where i wanted to repla...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Issue #2383
Custom component not pulling through style on first add.
Fiddle replicating the issue: https://jsfiddle.net/gd8mo3e4/1/ I have a custom component for creating a gallery of pdf documents. There's a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
GJSDocs: Say Goodbye to Manual Document Work
Invoices, contracts, proposals, reports — all generated automatically. GJSDocs turns your template into a live document in seconds.
Tutorial
10 Mistakes When Building a Visual Editor (And How to Avoid Them)
Visual editors are powerful tools — they enable non-technical users to create websites, emails, landing pages, and applications without writing code
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.