DTube 0.3: This update contains so many new features I could not find a good title for it

Things are starting to settle down here for the DTube project. Many of the networking issues seem to be resolved with the automatic gateway system and viewing videos seems to be comfortable as long as the video bitrate is lower than the connection max speed. Issues are clear now, some are easy to fix, some are harder, but overall the minimum viable product seems to be viable. I believe it's now about time to introduce some features that will improve the user-experience this time around in 0.3.



DTube is now multi-language

Click here to see what DTube looks like in Korean!

I've been regularly browsing DTube, and it's clear that the huge majority of the content is in English. While the USA discovered the Internet before any other nation and got a culture boost out of that, that doesn't fully explain the super low number of videos in other languages. SteemIt has a lot of Korean or German content and I don't want to leave some countries/languages out of the loop for the development version of DTube.

DTube will detect your favorite language from your browser settings, and if the translation exists, it will download it and update all the texts in the UI. In order not to increase the app size, these translations are currently stored inside the STEEM blockchain (example). STEEM is amazing for translations, as SteemIt/ChainBB can be used as a UI to correct mistakes or add new translations.

Maybe hosting these translations on IPFS would be faster to load in most cases, but in the design of DTube I would rather use the blockchain for text, and only IPFS for 'bigger files'.

At the moment that I am launching 0.3, only seven languages are available:

Translate DTube for your language

Of course, seven languages are not enough. YouTube has too many to count. I also want all of the commonly spoken languages on Earth to be available on DTube. Doing this for most projects would be impossible, or take a lot of efforts to find competent translators. Luckily, STEEM is a social network that incentivizes cooperation instead of competition, and DTube has the support of the STEEM community. That's why I am adding a call for translators in this article. If you are not interested in helping, or you don't speak any non-translated language, feel free to skip this part of the article and go straight to the next new feature.

Before reading further, please understand that DTube is a work in progress and will be for a while. This means that there will be updates and probably some new lines added to the translation file regularly. You will be invited in the DTube private discord and we will notify you a few days before any new version so you have time to update your translation. This should happen about once every two weeks for at least a couple of months.

The English translation file for DTube 0.3 is available here. This will be your starting point to translate to your language. At the moment it's pretty short (87 lines in total), and should probably take less than an hour to translate. Save it to your disk and start editing the values (on the right), and leave the keys (capitalized stuff on the left) untouched. Some values contain some '%1', '%2', etc that represent some variables that will be replaced by the app. For example:

"GLOBAL_ERROR_VOTE_FOR":"%1 vote for %2"

This is the line for the text displayed when you upvote. In English it would display '100% upvote for dollarvigilante'. Some languages will require you to move these variables in other parts of the sentences sometimes. For example in French it becomes:

"GLOBAL_ERROR_VOTE_FOR":"Voté à %1 pour %2"

Once you have fully translated into a new language, feel free to contact me either through comments on this article, or on steemit.chat if my comments are spammed like past two articles and you want a quick reply.

Subscribe / Unsubscribe Button

The single most requested feature since launch was this one. The way you were able to browse DTube was very limited before this feature. All you could do was check new/hot/trending videos on the homepage. Even if you liked someone content, you wouldn't be able to see it through DTube if it didn't go to hot or trending unless you bookmarked the channel page and check it often.

As usual, I copied the way YouTube displays it in the UI. The button comes in with a counter showing the total follow count. YouTube shortens the count for big numbers such as '2M' or '42K' but I didn't feel like doing that as the maximum number of followers is still in the 5 digits range for STEEM.

I originally thought I would not to re-use the SteemIt follower counts, and make everyone restart at a 0 follower count on DTube. Unfortunatly that is not possible with the current state of the STEEM follow API, despite what the design of it suggests. So instead, your DTube list of followers is the same one for both SteemIt and DTube... I looked for a while at the code of the follow API, and I believe the required changes to make this possible are small. It's not because I follow someone on instagram that I want to subscribe to their YouTube automatically, I want to have the choice.

Feed

The subscribe button would be useless without this, so it comes in the same patch. This is more similar to SteemIt than YouTube in the way it's displayed on the screen.

It should take a bit longer to load than other categories because of STEEM limitations. The get_discussions_by_feed method of the STEEM blockchain does not behave like other get_discussions_by_* methods. I believe that if we could also filter the feed by tags, it would benefit applications which have a different type of content than steemit a lot.

The Trending/Hot/New categories on the homepage filter by tags. This is reliable because the number of people using the 'dtube' tag through steemit directly is negligible compared to the many DTubers who automatically have the 'dtube' tag.

The feed doesn't have this luxury option sadly, so instead it fetches the maximum amount (100) and filters out all of the non-videos. So if your feed only displays a few videos, this is likely the reason.

I really dislike the way the follow / feed works right now on STEEM. It requires me to make more calls through SteemJS and waste a lot of data. Little features like that is what apps that have different content types (think steepshot, dtube, dsound) need.

Follow us on @dtube

I sneaked in a 'dark' feature in DTube, but at least I decided to make it clear in this article. I'm trying it out mostly as an experiment. I predict that I will either look like an asshole for attempting it, or other applications will start doing the same thing soon. It all depends on your reactions in the comments.

Basically, whenever you log in on DTube, the app will automatically make you follow the @dtube account. There are no warnings or confirmations requested, and it won't even tell users what just happened in the background.

This will help me analyze a bit better the userbase of DTube. Because of the decentralized nature of DTube, we cannot use Google Analytics or automatic bug-reporting tools as we have no idea what it's really doing and might be leaking your keys somehow. So at least this way, I will have some data. I will be able to know how many people use DTube, and when these users first started using DTube.

Of course, I won't be shit-posting or resteeming my friends with the account. Anything posted/resteemed by this account will always be content that I believe can help DTube users, and most likely will be in video format.

Using Busy.org for images

Many people have noticed it, but avatar pictures were not displayed correctly on DTube in some cases. They would show as a missing picture or not display as a square as they should. This should now work properly, as we are using img.busy.org as the provider for all these pictures. Busy will automatically compress, crop and resize pictures, so that I don't need to worry about it! Same thing will probably be used for the cover pictures once we start working on the channel page.

Claim your rewards

Not a huge feature, but you can now claim your rewards directly on DTube. Inside the user menu, you will see a 'Claim Rewards' item that will tell you how much you will claim if you hover the button. While not a super-priority feature, this was quite easy and possible as it only requires the posting key. And it's clearly the most 'feel-good' transaction we can make on the STEEM blockchain.

I will use this paragraph to make a short aparté. I have no idea why these rewards can't be added on our wallet balances automatically like they were in the past. I can see how claiming rewards might be a good thing to avoid dead accounts making money, but there is already a 7 days maximum payment window for all contents on the blockchain, so an account has to have been active 7 days ago to receive a reward. If someone could enlighten me on the need of this feature on the STEEM chain, I would be grateful.

DTube Embed (concept)

Embed Demo: https://skzap.github.io/embedtube/#!/curator/m70sk5cv

I talked in the original release post about how I believe having a custom video player is a necessary feature. I quickly realised from people's reactions that they had no idea that DTube had 0 work done on the player, as the native video players in modern browsers seems to be working good. Still, I believe having a custom player comes in handy, especially for the case of the embed where I want to add some branding, a small DTube logo that leads to DTube, just how YouTube does it in their embed.

So I searched around, and ended up playing around with VideoJS, a Javascript library for displaying videos. It's pretty solid and extendable but will require some work on the design side. I'm not adding a button like YouTube to get the embed code from the video, but I might soon.

So let's say you want to include the concept DTube embed on your site, you would need to copy paste this code:

<iframe width="560" height="315" src="https://skzap.github.io/embedtube/#!/curator/m70sk5cv" frameborder="0" allowfullscreen></iframe>

If you want to do it for other videos, just replace the end of the src url by the correct one for your video.

New DTube contributors

I mentioned in my previous article that I was interviewing people to help me on DTube. Well in the end, all this process was completely useless. I ended up recruiting a past colleague of mine to be the second developer: @superkoala. He has very little experience with blockchains but is a seriously good developer with good practices. We already worked together in the past without issues, and I know I'm kinda hard to work with because of my sub-par communication skills. He already started working on DTube and did 90% of the multi-language feature for this patch, which allowed me to take some time off without thinking I'm a slacker >:-)

I also recruited @hightouch, yet another French developer to work on the UI. He started playing around with the codebase and seems to be a good fit for the job. His first tasks will be to improve the user-experience by a lot, such as removing the stupid scrollbars on the homepage, and making the categories load more videos as you scroll to the right, just how steemit does it when you scroll to the bottom. He will probably be the one working on the channel page design as well.

Also I have regularly been giving tasks my turkish friend @steeminator3000 to do some boring things such as helping users in the #dtube steemit.chat channel, or doing some google researches for me. Consider him the 'jack of all trades' of the team.

Optimizations

Application Startup

DTube 0.2 added a convenience feature for me that allows me to change the settings of DTube from the blockchain directly. While convenient, it also added a good 1-2 seconds to the app loading time. In 0.3, after loading the translations, and the list of people you follow, I realized the application startup process was taking too long. No one wants to wait 5 seconds to start seeing a video, right?

Well I moved some stuff around in the code, and remote settings, translations and followers lists will now load after the application is rendered on the screen, and update on the screen when it's loaded. This is why you will probably see DTube in English before your localized translation loads from the chain.

Limiting the size of contents

I only recently discovered the truncate_body argument. This allows DTube not to load the useless part of the contents that DTube doesn't use. Such as the body, which is the markdown/html code of your normal steemit articles. This field contains A LOT of data size-wise, and getting rid of it should help loading speeds.

Upload Errors

I receive many feedbacks about errors during the upload. We were not using standard ports for uploads, and that caused a lot of people using university networks or public wifis to be unable to upload. This should be fixed as we should be using port 443 everywhere for the upload now.

There are also some timeout errors happening for uploads longer than 15 minutes. We are still unsure how to solve that on the IPFS node side. The upload page is probably the most critical one on DTube, and I really feel bad when I hear users having issues about it. No doubt some improvements will come quickly as I put my brain back on it.

Last words

A pretty solid update overall, despite some disapointments because of some STEEM limitations. I think I will try to setup a node and suggest code changes to the follow api, because the current state is clearly not at the same level than the rest of the STEEM blockchain.

The patch also took a bit longer than expected because of the time to interview and recruit developers, get them set up with the project, and cleaning up the code a bit to make it extra-easy to understand for them. Next updates should come in faster I hope.

It's already been more than a month since DTube's launch, and we are already seeing more developers converting to the IPFS+STEEM combo. For those who missed it, @prc released DSound recently and built it all faster than I built DTube originally. This reinforces my belief that doing what I did is not too hard and that many more DApps on top of STEEM will happen in the future.

H2
H3
H4
3 columns
2 columns
1 column
504 Comments