Finally Network - New Theme 'Motion' D.tube Grid 📹

in #utopian-io6 years ago (edited)

Repository

https://github.com/code-with-sam/finallynetwork/

finally-dev-4.png

https://finally.network

New Theme Release -

Happy to show you a little idea I've had for awhile and finally put it together. It's a super simple d.tube based video grid for video creators on Steem. This is hopefully the first of a few video themes or perhaps the beginning of a more customisable based video layout.

Included in the update

  • Theme specific templates, Javascript and SCSS
  • Grid View
  • Single video Video - In modal
  • Optional @finallycomments under video
  • New Custom setting for comments option
  • Dashboard tweak to allow custom settings across all themes (was just latest 'critday' theme before)

Full Github PR - finallynetwork/pull/38

screely-1544173968205.png

Profile Video Grid - View @ninjavideo as an example

The theme is currently setup to work specifically with d.tube videos. In future I can add support for multiple video formats if needed. I oped for using the d.tube embed following the example of @steempeak and @busy. I looked into creating coding a custom js player and implementing the IPFS sources. Nothing stopping me form doing that in future but felt unnecessary at the current time.

// Dynamically change the embed iframe to switch video
$('#video-frame').attr('src', `https://emb.d.tube/#!/${username}/${permlink}/true`)

After spending a bunch of time looking through the best implementation of <video> it turned out using the emb.d.tube worked seamlessly and was simple to implement.

The video grid is responsive and expands from 1-5 videos based on screen size.

screely-1544174287366.png

Single video loaded in modal with comments enabled

Motion theme can now be enabled in the Finally dashboard along with the custom setting for enabling/disabling Finally comments thread under the video. There is no automatic filtering for videos. A hashtag filter must be specified that will only match against video uploads.

Currently only the latest 15 posts are loaded by Finally. This can mean a user might not see any videos or see less videos than expected. The filtering is after the inital request from the Steem API. I need to dig into a better approach for searching/filtering a users posts and am tracking this issue here.

screely-1544174751218.png

Finally Dashboard settings

screely-1544175440436.png

Example @teamhumble without Finallycomments enabled

Feedback

Would be great to hear how I can improve this theme. If you have any suggestions on what you would like to see let me know. Comments or issue to Github welcome.

GitHub Account

https://github.com/sambillingham
https://github.com/code-with-sam

Sort:  

Thanks for the contribution, @sambillingham! As expected from you the new theme is very visually appealing! For the most part it works extremely well too, but I found a couple of bugs:

  • When clicking on a video multiple times it will load multiple Finally comments threads as seen in the GIF below


bug.gif

  • When going from a small window to a bigger window it keeps the small size of the video as seen in the screenshot below



Other than it seems to be working great and the code looks clean as well. Keep up the great work, Sam!


Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Hey dude, hope you're doing good. Thanks for checking out the update!

Appreciate you reporting the bugs. Both are fixed and live now. Totally noticed the dup comment threads and was sure I had fixed it 😅apparently not.

I wanted to build this theme in Vue, which is my plan going forward. Started doing that and realised it would take a bunch longer than I expected so jumped into the current finally-core setup. But a Vue based refactor is still the eventual goal.

Thank you for your review, @amosbastian! Keep up the good work!

Wahey! Thanks dude! Very happy to be the poster child for this super exciting development!! So excited! Can't wait to see some sites use this!

Cheers mate! If you have suggestions of how it could be more useful I'm all ears.

Cool. I'd like to be able to do this with my BitTube videos.

If you can link me to what you're talking about i'll have a look to see If I can make it work. 👊

This post contained some typos in its mentions that have been corrected in less than a day. Thank you for your quick edit !

If you found this comment useful, consider upvoting it to help keep this bot running. You can see a list of all available commands by replying with !help.

🙏Thanks @checky. Last day the sun rises today for the next 6 weeks. Time to get outside

Wait... what?

Yeah haha. 6 weeks was a slight exaggeration, next sunrise out here is 6th January 😅. Still a few hours of light around but the sun never makes it above the horizon.

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 10 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 5 SBD worth and should receive 182 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hey, @sambillingham!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Wooo! This is excellent 💓👏

Thanks glad you like it.