Adapt Learning Community: Custome Media component can't find svg?

Hi everyone

I've been trying to create our own media component, with some added features we needed.

I've started out with the original adapt-contrib-media component, and so far, everything has gone as planned. The component and the added features work fine.

However, now I want to add it to the AT, and I don't want to overwrite the existing media component. So, I made the necessary changes to the bower and javascript files and renamed the template file accordingly.

The component still works fine, but suddenly it can't find the svg icons it needs for the controls that are in the adapt/css/ folder.

It looks for the icons here:

GET http://localhost:9001/adapt/css/bigplay.svg 404 (Not Found)

Which I think is a bit strange, as the files get copied to the /assets/ folder, when building, not the adapt/css/ folder...

Why is that? Am I missing something?

If I change the first attribute in the Adapt.register in the .js file, back to "media" and set the .hbs file's name back to "media" as well, then it works again, even though the files are still at the same position :/

Adapt.register('advancedmedia', AdvancedMedia);

Adapt.register('media', AdvancedMedia);

Furthermore, the transcript button seems to get bugged as well. It no longer has a width of 100% and the transcript is shown before you click on the transcript button. I don't know whether that info can help narrow down the problem?

Please help! Thanks.

Henrik

the transcript button - have you amended the styles in media.less? If not, it'll be targetting .media-component media-transcript so I think you'll need to change the first line in media.less to .advancedMedia-component to make it work

I have no idea why it should have started looking in adapt/css - as you say, these assets are in the assets folder.

You say it's only occurring in the AT - that suggest that maybe it's having some sort of clash with the standard media component maybe?

Show parent | Reply

Wow, that was it!

As you said , I only needed to rename ".media-component" to ".advancedmedia-component" in the advancedmedia.less.

Now it finds the SVGs and the Transcript button is behaving

Thank you, very much!

Show parent | Reply

Now it finds the SVG

Yes I think I figured that out after posting my response: if you look in mep.less you'll see that references to files like bigplay.svg state that the file is in the same folder as the CSS.

Those styles are then overridden by styles in media.less in order to set the correct path. So, when media.less wasn't working properly the overrides weren't kicking in.

By changing .media-component to .advancedmedia-component you made all the styles in advancedmedia.less work again.

Show parent | Reply

That's great, thank you for posting an explanation, Matt!

It all make sense now :)

Show parent | Reply

Yeah it's always best to know the underlying reason I find! Figured it out in one of those moments of clarity that bizarrely happen just as you're trying to get to sleep at 1am...

Show parent | Reply

Wow, I must say. We appreciate your dedication and effort! Thank you Matt :D

Show parent | Reply