Issue #2250💬 AnsweredOpened September 6, 2019by smik30 reactions

Issue with automatically assigning poster on video elements

快速解答by artf

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)

artfSeptember 9, 2019

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: '...' });
smik3September 17, 2019

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.