Context
Adding embedded player for video or audio services (Youtube, Vimeo, DTube etc...) to the Condenser has always been a pain with the related logic split into many files making it difficult to maintain.
The purpose of this change is to centralise the logic as much as possible so that we only need to update a couple of files for each new embed player to support.
My 3Speak embedded player support has been approved and deployed recently, this allowed me to complete this work and move the 3Speak code into the new architecture.
The work done
I moved the logic from the following files:
- src/app/utils/Links.js
- src/app/utils/SanitizeConfig.js
- src/app/utils/SlateEditor/Iframe.js
- src/shared/HtmlReady.js
- src/app/components/cards/MarkdownViewer.jsx
Into files located under src/app/components/elements/EmbeddedPlayers. To add a support for a new player, the developer only needs to create a new provider file, for example src/app/components/elements/EmbeddedPlayers/threespeak.jsx and configure it inside the main script src/app/components/elements/EmbeddedPlayers/index.jsx
As seen below, as a result, wherever we needed to call the code for each provider, we now just call a central method EmbeddedPlayerNode() which then do the rest for us.
Steemit Condenser Pull Request
This feature is not out yet, a pull request has been created:
https://github.com/steemit/condenser/pull/3704.
Once approved and merged, it will be available in a future release by Steemit Inc.
Vote for my witness
On Steem, Witnesses are playing the important role of providing a performant and safe network for all of us. You have the power to choose 30 trusty witnesses to package transactions and sign the blocks that will go in the Steem blockchain. Vote for me via SteemConnect to help me do more useful projects for the communities.
Congratulations @quochuy, you have received a 80% upvote. I'm the Vietnamese Community bot developed by witness @quochuy and powered by community SP delegations
Just voted for you.
Thank you :-)
You are a wonderful asset to STEEM!
Thank you.
Means a lot coming from you.
@steempeak. I just noticed that on SteemPeak, the vote weight scrub bar does not remember your previous selected value anymore.
How many different players do you have to support? For things like that definitely seems like a better idea to have it in one spot.
Currently:
And there are two more requests.
LBRY would also be nice to have. Would be nice if we could cross-post video's on Steem and LBRY
Please create an issue on GitHub and it will get handled when possible:
https://github.com/steemit/condenser/issues
Posted using Partiko iOS
Okay, I've added it.
https://github.com/steemit/condenser/issues/3708
I'd be happy to give you some monetary incentive to try and add LBRY support, given that I've only added limited information to the feature request.
Perhaps a $50 bounty? Paid in Steem or whatever other altcoin of choice. Check my Steem savings, so you know I'm good for the money.
And each one was previously being managed in disparate files? O_O sounds like a pain XD
any chance you could support all the different styles of embed for soundcloud? the native one is massive! :)
I would need more details on how to enable each styles. Also same as for my answer to your other comment.
Posted using Partiko iOS
no problem, thanks for replying. there are 3 embed types..
full size, smaller and tiny (this is pro only)
from what i can see the only different on the embed code is the sizing so maybe it just renders a different view based on the size of the iframe?
height="300" and height="166" for the smaller one
the final tiny one is greyed out because i need pro so i can't get the sizing for that -- i've tried in the past to put in the different embed sizing and i always get the default large one.
If it is based on iframe size then you can try an iframe HTML code in the blog post editor and see how it renders. As long as it’s a URL with a supported domain then it will be allowed
Posted using Partiko iOS
Congratulations @quochuy!
Your post was mentioned in the Steem Hit Parade in the following category:
be really great if you could support the oEmbed of Wistia too. i can provide more dev details if you can factor that in. thank you.
Only if the embed is an iframe not a JS snippet. But I want to wait until this pull request is approved and merged so that I can implement this with the new architecture
Posted using Partiko iOS
yeah they do iframe as well actually. i'll keep watching out for your posts that mention it then -- https://wistia.com/support/developers for the docs for embedding. just voted for your witness too. great to finally have support for embeds, maybe steem can finally be the social media site we all dreamed of!
hmm, i just looked...
<script src="https://fast.wistia.com/embed/medias/5nep7dgb39.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_5nep7dgb39 videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/5nep7dgb39/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>that's what the embed looks like currently for iframe. it does have a .js script thou -- it's got some great features wistia that would be fantastic to have on steem frontends, like chapters, clickable urls etc. anyway, hope you take a look at it.
This won’t work. It’s a javascript snippet that then generates some HTML markup inside the page but the Condenser won’t allow that.
Posted using Partiko iOS
yeah that's always been the case i think with wistia. shame. guess you have to go and roll your own condenser for that or is that just in general?
Also, please create an issue on GitHub for any new ideas and it will get handled when possible.
https://github.com/steemit/condenser/issues
Posted using Partiko iOS
i don't know how to use that. sorry.