Show HN: A faster, minimal YouTube interface built on Angular.js and Foundation | Hacker News Reader

Show HN: A faster, minimal YouTube interface built on Angular.js and Foundation

toogl.es

189 pointsmcrittenden105 comments

Code is on GitHub here: https://github.com/mikecrittenden/toogles

If you like it, there's a Chrome extension to redirect YouTube video pages to Toogles here: https://chrome.google.com/webstore/detail/toogles/kljfdbkcac...

Very nice.

Why did you choose Angular over competing frameworks? I'm researching which JS framework I should invest my time in.

Mostly just because Angular just feels the best to me out of all the frameworks I've tried. I've built a few trivial apps in Backbone and Knockout and some more complex stuff with Ember, and Angular just works the way my mind works more than they do. I always feel like I know where everything needs to go (with Ember I constantly felt like I was doing it wrong) and the thick templating layer makes sense to me.

Sorry, I know that's not a very helpful answer.

I'll have to disagree with you, I think that's a useful answer :)

It's good to hear these things even if it's just anecdotal and unquantifiable. I've only really worked with Ember and I feel the way you do. It's always interesting information from someone with experience in multiple frameworks (especially when they're all so young and we're all a bit lost as to which one to build our next project on).

Nice webapp by the way!

Actually it is helpful, the money quote in your answer is: "Angular just works the way my mind works". You "marry" (or stay) a framework (after trying other options) because it makes sense to you, overall that's the way it should be.

I often feel the same way with Ember. They need a lot more when it comes to practical examples. Now I need to reevaluate Angular.

It looks pretty good, nice work! For starters on Angular.js, any recommendations on good tutorial/books?

The official tutorial [1] is a great place to start. It does an incredibly good job of leading you through step by step and explaining each step.

http://docs.angularjs.org/tutorial/

Good work overall man. Some feedback:

1. One of the things I dig on the Youtube interface is being able to see immediately how long ago something was posted. As I (and many others) use YT as a music streaming site, a recently posted video is generally a sign that the sound quality is going to be better. Same goes for video actually. If it's posted in the last few years, the quality is likely to be HD. I suggest when you return a search result, you could place info on it when you hovered your mouse over the video pane. As you do this, the video still disappears and we get a series of specs on the video. I guess you could do this in your "upload date" field, but it seems to be limited to this month at the moment.

2. F* the haters - I loved how you didn't include the comments section in each video. I find no value in YT user comments. Whether someone is showing love or spitting vitriol (let's admit, 90%), I have never really found it added much to my user exp.

Great idea about how long ago it was posted. I'll add that ASAP. Glad you like it!

Interesting choice of framework, given that the PS3's YouTube application is built in AngularJS as well: http://blog.angularjs.org/2012/08/your-excuse-to-buy-playsta...

Did you find any advantages to using AngularJS, or was it just coincidence/familiarity?

Ah neat! I had no idea.

I prefer Angular over Ember/Backbone/Knockout just because it makes more sense to me and I like the templating layer, but there weren't any YouTube-specific advantages or anything if that's what you mean.

Wow. This feels vastly faster and more responsive than the PS3 YouTube webapp, perhaps by an order of magnitude.

Perhaps part of the difference is that the PS3 is actually fairly underpowered by today's standards for general purpose computing (CPU intensive stuff, unless specifically made with their architecture in mind.)

This is a decent enough youtube front end, but I'm not seeing what the framework does for you? The whole app is very trivial, using he gdata api is simple javascript and the layout is again very simple. bootstrap and a few hours of javascript would accomplish the same thing? If it had used isotope js maybe to sort/filter the videos, or mayve vegas js for some interesting eye candy, but what's the big deal here?

Client side routing, infinite pager, auto-updating search results as filters/sorts are changed, good client side templating with on the fly updates, etc., are all made a lot easier by Angular.

If you're worried about page size then note that I'm not using jQuery or anything besides Angular and Angular is only like 76KB. If I removed Angular and put in jQuery and a few plugins then I'd be at roughly that same number, and I'd need more custom code to go with it. So why not use Angular?

Or, if you're just wondering why this is worthy of the HN frontpage, then I can't answer that. :)

I wasn't wondering why this was front page on hn, I've long again tried not to second guess what appeals to the masses. Just look at your own product's trending for that. Who'd have thought that Maru's first snow encounter would be youtube worthy!

I don't mind page size either, everything I've ever written has started out including jquery. Anyone that argues that jquery is too big doesn't have a clue what they are talking about (CDN's/Cache etc)

Having written dozens of web apps that use mustache, I totally get why you like client side templates (json+mustache is completely awesome), bootstrap is awesome.

My point was that with bootstrap, json, gdata, mustache etc the features you mention are all straightforward, no Angular required. Nothing wrong with AngularJS. No disrespect intended. I was just saying that I could have put that together with the technologies I mentioned very easily and quickly with all those features.

I liked it though, I wasn't trying to put down what you've done.

> I liked it though, I wasn't trying to put down what you've done.

Thanks! No worries!

> My point was that with bootstrap, json, gdata, mustache etc the features you mention are all straightforward, no Angular required.

Sure, but I could just as easily turn that around and say with angular, all these features are fairly straightforward, no jquery or bootstrap or mustache requred, right? Why is one better than the other? Or if they're not, why bring it up (serious question)?

You also get a component framework for free + a DSL for the view.

Do you really lack this much tact? Why not build up your own YouTube frontend without any framework / library -- post it here, and then we can chide you for all the time you spent re-inventing numerous wheels?

I like it's clean and simple layout. Really nice work.

A little feedback: When someone is on video page, you have this icon http://d.pr/i/eOEE to increase video size. It looks more like an "index of categories" icon. I'd change that.

Also the left vertical bar to restore default layout, you are showing once video is full size is not apparent enough. I'll experiment some other colors or maybe a small "plus" like I did here http://typezebra.com.

Thanks, that's actually one of the parts of the site that I'm still unhappy with, glad it's not just me. I'm currently trying to work out a more user friendly way to handle that--I'll try out your suggestions. Thanks!

My first guesses were to click the whitespace around the video (since it doesn't take up all the window, just most of it), to press the escape key, and to press the back button. None of those did anything (except back, but that took me to the homepage instead of the video view), so they're what I'd use as starting points.

Hi there, just wanted to let you know I changed the way toggling the sidebar works and I'd appreciate any feedback you have time to give? http://toogl.es/#/view/oFR4L6GegXA is an example link.

Hi again, just wanted to let you know I changed the way toggling the sidebar works like you mentioned and I'd appreciate any feedback you have time to give? http://toogl.es/#/view/oFR4L6GegXA is an example link.

Nice. It's far more noticeable now. Perhaps you can change the icon to a smaller one when the video is full screen, just to indicate to user he is going to make screen smaller after clicking it.

Fantastic, I love seeing these projects - minimal and functional - scratching an itch :)

Also I had totally forgotten about https://gdata.youtube.com/demo/index.html - thanks for the reminder!

Nice work/code

Thanks! Yeah, the gdata API and demo is pretty nice (and VERY fast). It's been a joy to work with.

Interesting. I'm currently running Arch Linux on my Acer Aspire One 722-BZ197. When I try and watch HD and fullscreen videos on YouTube that screen tears and the audio and video get out of sync, but when I use toogl I'm able to watch in 720p fullscreen with no problems whatsoever. I know my poor video performance can be largely blamed on poor graphics drivers, but I have found the new YouTube layout to be fairly slow and bloaty, which definitely contributes to the problem.

Great job. I've replaced the standard YouTube shortcut on chrome with a shortcut to Toogles, and I fully intend to use it from here on out.

I think the issues when watching YT maybe be due to YT still using Flash by default unless you opt-in for HTML5 at http://youtube.com/html5 ? I could be mistaken there, but it seems like the embeds show HTML5 by default but the main site still doesn't.

Anyways I'm super glad you like it, please give me a holler (contact info in profile) if you have any feedback or annoying issues.

Nice work!

I am currently using this youtube extension for a more minimalistic version of youtube

https://chrome.google.com/webstore/detail/youtube-options-fo...

There is a full version here, with some tweaks that the sandobx version can't do

https://spoi.com/software/yto/

Nice! Hadn't seen that one before.

This is great. I don't think I would go back to using YouTube's default layout if I could somehow see my subscriptions on the homepage.

Ah good point. Subscriptions should be available at http://toogl.es/#/user/<yourusername>/subscriptions but you're right that it would be nice for them to go on the homepage.

I don't see anything there (under favorites or subscriptions), but I didn't expect to, either, since I was never asked to log in.

It would be very nice, though, to be able to add videos from my subscriptions to my watch later list, and then watch that playlist while being able to reorder/remove videos.

That worked for me, although it also didn't include all the subscriptions. Could that be a bug on your end, or are some channels somehow private and not others?

What I'd really like is a quick way to dismiss some of the videos from my subscriptions that I don't want to watch. That way I can come back again later and see only the ones left. I realize this is really just a 'watch later' playlist, but I'd prefer to remove things (permanently) from my main subscription interface.

Great work so far though!

One thing that drives me nuts about the new native interface is how it handles subscriptions. I mean the feed you get is actually not that bad, but it's way too cumbersome to get to see only your subscriptions.

Is it possible from youtube's API to authenticate a user and then access his subscriptions (and maybe even the aggregated feed based on them)?

Yup, that's possible. Adding authentication adds a ton of cool stuff I could do, but it also makes the app significantly more complicated and I'm not sure yet if I'm willing to go there. I'll think about it.

Pull requests are always welcome though! :)

Pretty awesome! The one big feature I'm missing is comments (Not visible by default, but maybe they could appear from a button at the bottom of the description?) Also, it'd be nice if the time links worked (Some videos have times in the description that help you navigate, especially on full album uploads).

I'm probably not going to integrate comments, but note that you can click the name of the video you're viewing to go to the YouTube page for it if you really want to see comments for it.

Would you mind linking to a video with a time in the description if you have one handy that I can use for testing?

http://toogl.es/#/view/QR_rKSTM43I is what I'm listening to right now.

Awesome, thanks! I'll check it out.

Thanks for publishing this.

(listening to Solar Fields (and I bought this!): http://toogl.es/#/view/c_KuGgpqbes )

My pleasure, thanks for using it!

Would be cool if you can show the Top Comments. I know that top publishers do comb through comments and sometimes even respond to the top comments.

I for one feel that YouTube is far better off without comments.

missing comments could very easily be seen as a bonus feature. The youtube comments are pretty much the lowest form of human intellect, mostly racist, sexisit or any other ist coupled with lol's and "work at home" spam. I am happy not to see another youtube comment in my life ever again.

Install the Herp Derp YouTube Comments browser extension: http://www.tannr.com/herp-derp-youtube-comments/

I generally access YouTube by typing "yo" into Chrome's omnibar and hitting tab to search. If like me you want to take this for a spin without installing the Chrome Extension you can edit the search engines list in Chrome to replace the search URL for youtube.com with

    http://toogl.es/#/search/%s

This is great! I don't have Flash installed on my computer, so YouTube won't show me half of its videos (unless I'm already in fullscreen and it shows up as a thumbnail at the end, go figure). This lets me access every one in HTML5 without jumping through any hoops. Extra points for leaving out comments!

I've discovered a big problem. I get different search results from your site versus YouTube. One example, I searched for "Nook HD+" (with the quotes). I get more videos at YouTube than your site shows. How is that even possible? Is YouTube limiting what you can get from it?

EDIT for typo.

You found a bug! Search on my site is ignoring the "+" (i.e., search for "Nook HD" returns the exact same results which accounts for the difference) probably because I forgot to urlencode the query. Will fix, thanks!

Hitting "Upload Date" no longer reorders the video results from search.

Really? Can you give me an example? Seems to be working OK for me.

Sorry. User error. I was hitting the wrong damn button for "Upload Date" -- do you see that's there twice in the left column? I was not hitting the one right below "Relevance." DUH.

EDIT to add: The confusion is because the second "Upload Date" even though a header, actually turns bold like a button when clicked on!

You know how you can do YouTube one better? Offer to remember Sort. I tend to use several search terms every day. Having to manually sort each one is a real PITA. If I'm searching for "Nook HD+" and sort This Month/Upload Date, I'd like a checkbox that would keep that sort automagically for the next search terms I enter. That YouTube doesn't offer that -- and saved searches -- is a huge FAIL on their part.

I've thought about this but my concern is that it might harm more than it hurts. For example, I search for music albums sometimes and filter by "long (20+ minutes)" for that, but the other 90% of the time when searching I don't want it to keep that filter, so it would be more of a pain. Thoughts on that?

This is pretty cool! Not only is Angular my fav. js framework, but there are no comments underneath the videos. Sometimes while watching a video on YouTube I'll catch a glimpse of the user comments by accident and I'll feel dirty for the rest of the day. Bravo, sir.

Same. I've had a few requests to add in the comments and it's one thing I'm standing firm on. :)

Side note: I would really like to see an infographic on the average number of comments it takes for a thread on YouTube to degenerate into nothing but name calling and racial slurs. Maybe separated by category, and adjusted for number of views.

That is damn wicked fast on my crap PC. Now I wish YouTube allowed us to use skins. I'd use that!

The layout is nice and simple. My biggest complaints:

- can't add to playlists

- can't subscribe

- can't browse through a channel's playlists

Really cool stuff. I think about using it instead of the usual one.

One thing though : when switching from video to video (by clicking links at the end), the rest of the webpage doesn't update (at least on my computer).

Yeah, that's because the player is just a plain old iframe embed. I'm planning on adding related videos to the sidebar (as a hidden-by-default tab) which will hopefully help.

I was expecting that kind of answer :). No problem ;), it still is really nice

It's really slick YT front-end. You should also (unobtrusively) include your TangleTube's [1] functionality in Toogles.

[1]: http://tangletube.com/

Good find :) I've actually thought about that but haven't been able to work out a way to do it unobtrusively. Any thoughts?

I love this.

Youtube's default homepage is so cluttered I usually jump to my subscriptions immediately, with your framework I've actually been browsing youtube channels. Never happened before.

Thanks! I've actually experienced the same thing.

good job. adding recommendations would provide continuity. rating preview is a good feature; i've always wondered why youtube does not provide it by default.

Thanks. I was thinking of adding recommended videos as a tab (alongside an "Info" tab) when viewing a video, so you don't see it by default but you can click the tab to see them if you'd like. Does that implementation sound good to you?

It seems fine. Sadly i don't have much sense on visual design, so as long as the recommendations exist somewhere on page, it's fine for me :)

Beautiful! Thanks! I'm probably going to fork it at some time to add something. I've been dreaming about this for a while.

Please do.

Nice! I would actually use this to browse YouTube, whereas I don't browse YT directly now due to its bad interface.

Really nice, I really enjoy the design. I have been thinking of making something semi-similar.

Blazingly fast. I promptly installed the Chrome extension. Thanks for your hard work!

Awesome, thanks! Let me know if anything bugs you about it.

Love this. Would love it even more if there was a toggle for Night Mode though.

Very fast. I would prefer bigger video squares and smaller text.

It would be cool if you could log in and see your subscriptions.

You can see your new subscribed videos without logging on by clicking the "Subscriptions" tab on your user page. http://toogl.es/#/user/<yourusername>/subscriptions

I know this currently isn't discoverable and I'm working on that, but feel free to try it out and let me know if it does what you're after.

Thanks! Looks pretty good.

This is amazing. Any way you could integrate subscriptions?

You can see your new subscribed videos without logging on by clicking the "Subscriptions" tab on your user page. http://toogl.es/#/user/<yourusername>/subscriptions

I know this currently isn't discoverable and I'm working on that (and it's also funky because it's on every user page, not just your own, but I'm trying to avoid logins), but feel free to try it out and let me know if it does what you're after.

Huh, neat. However, I use a google+ account to log in, so I'm not sure what my "username" is exactly.

EDIT: Found it! http://toogl.es/#/user/E8OXL41NDk4aZkvxSbJolg/subscriptions but there's nothing there

> but there's nothing there

Do you have anything on https://www.youtube.com/my_subscriptions (i.e., new subscription videos)? It just displays the "new" ones, not all of them, due to a limitation in the YouTube gdata API.

http://i.imgur.com/SwCPbYg.png

Nice layout. The - mostly - flat design is very well done.

This is pretty much all thanks to Foundation--it's really great.

You won me over. I'm definitely going to use angular.

That's awesome! I really like that minimalist layout.

Glad you like it!

I like the UI. A lot faster than YT, too.

nice app. just quickly wanted to report a bug: on smaller resolution the sidebar cannot be scrolled down.

It misses Youtube's autocomplete..

@mcrittenden -- here's some code for integrating YouTube autocomplete into the webapp (feel free to pull the 'suggest' method from the library): http://tikku.com/jquery-jqtube-util#search_example_4

Awesome! I'll check this out. I've been missing the autocomplete too.

awesome its really fast..only i expected to see duration in thumnail for videos.

Ah good point, can't believe I missed that. It's there now. Thanks!

This is insanely fast, I'm getting tempted now to dig more into Node.js

This actually doesn't use Node (or any server side code) at all--it's 100% client side. It queries the YouTube gdata API using JSONP.

I'm a little surprised at how fast it is though--I think it's mostly due to the fact that YouTube returns API requests really really quickly and Angular does a good job of reacting quickly, plus I'm not using jQuery or anything besides Angular that could slow things down.

That explains the blazing speed, did not expect youtube to allow jsonp requests so I assumed you used a tiny nodejs server ..

I did earlier a similar project in django that converts youtube music into mp3.

I will give angular a try in my next version

Thanks

I believe this consume huge amount of bandwidth on your side, mind sharing the stats for the last 24 hour?

Not sure what you mean? Why would it consume a lot of bandwidth? Videos and images are streamed directly from YouTube and all of the API interaction happens client side so it doesn't go through my server at all.

Reply on news.ycombinator.com