Steemit Condenser contributions: 3Speak embedded player support

in #development7 months ago (edited)

View this post on Hive: Steemit Condenser contributions: 3Speak embedded player support


3Speak is a relatively new video publishing platform in the Steem ecosystem. However, it was missing an official support in Steemit.com. This work is to allow support for the following requirements:

  • Render an embedded player when you add a plain URL to a valid 3Speak video URL.
  • Allow the use of a valid 3Speak iFrame player
  • Replace 3Speak generated image HTML with their embedded player.

What's involved

What's usually involved in adding support for an embedded video player is a little bit tedious (read repetitive) and I'm planning to find a way to make this simpler in the future:

  1. update helmet directive to allow 3Speak domain names
  2. come up with regular expressions to detect 3Speak URL, video ID and HTML markup
  3. update the MarkdownViewer component to generate the embedded player code
  4. come up with a regular expression to inform the sanitizer whitelist 3Speak's specific iframe code

New logic for embedded players

A new logic was added for 3Speak: replacing their linked image with an embedded player. Up until now, there was only two ways of rendering an embedded player on Steemit.com:

  1. a URL in plain text
  2. an iframe HTML code

However, when a user upload a video on 3Speak, their system creates a blog post with a big image linking to the 3Speak page. The code looks something like this:
[![image](http://.../image.jpg)](https://3speak.online/watch?v=wehmoen/xrhjxocx)

The thing is the HTMLReady tool only allows replacement of text nodes but the Mardown code above has already been replaced with its HTML equivalent, hence bypassing HTMLReady. So I had to preprocess the HTML before it gets passed to HTMLReady.

Replacing 3Speak generated code

Plain URL and iframe code


Vote for my witness
Support @quochuy Witness.jpg
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.

Sort:  

that will be awesome

This is so sorely needed! Thank You! Just witness voted you via my proxy @theusersparty :)

I was talking to some other users about pooling money together to have features developed for Condenser. Would you be interested in that?

Thank you! I appreciate.
The cash pool is a cool idea, however:

  • My available time is restricted, I already have a day job with long commute during which I’m already working on projects. I wouldn’t mind picking up tasks I consider doable in what ever time I have available.
  • You need to make sure that the tasks will be accepted by Steemit Inc. I have ability to code and add features but whether the feature will be added is up to them.

Still cool idea as other devs on the platform might raise their hands and participate.

Posted using Partiko iOS

Yea, I think that's one of the main issues, a lot of the people we might ask almost certainly have day jobs and are busy.
What I was thinking about doing was submitting features purely as designs first and hopefully getting feedback from Steemit as to whether it's a feature they'd be interested in merging, then if it is, paying to have it developed. Hoping to get something small just to establish a process, anyway, thanks for replying!

Much appreciated work @quochuy!! It's really fantastic to see this type of development happen organically like this! :)) love Steem!

I dont understand most of your work but I know it all awesome. 😁

Keep it up anh!

Good sharing 👍

Hi, @quochuy!

You just got a 1.45% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

Your post has been manually curated by FreeVoter Team.You can earn liquid steem by delegating SP to @freevoter !! We are now paying 100% daily earnings and 90% curation reward to our delegators !! Join Discord for more information. Thank you !!

Hi nice post

Merry Christmas^^ Happy New Year!

Very good and very interesting. Thank you for informationn @fujie

Rất vui khi được đọc những bài viết như vậy!

Pals, lets take a poor guy like me and make kn christmas little smile on his face by add some of card or cards on his account like gift from sky...:) just thought.. best regards!

Congratulations @quochuy! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Your post got the highest payout on one day

You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Thanks for the post.

Thanks for the post.

Nice but long

Coin Marketplace

STEEM 0.21
TRX 0.02
BTC 11178.18
ETH 384.05
SBD 1.02