11 ms·

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

189 points by mcrittenden 14y ago

zosegal 14y ago
Love this. Would love it even more if there was a toggle for Night Mode though.
dhirajbajaj 14y ago
awesome its really fast..only i expected to see duration in thumnail for videos.
- mcrittenden 14y ago
  Ah good point, can't believe I missed that. It's there now. Thanks!
mcrittenden 14y ago
Code is on GitHub here: https://github.com/mikecrittenden/toogles 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/kljfdbkcacjeogbiiiikahgkmmlgdekf https://chrome.google.com/webstore/detail/toogles/kljfdbkcac...
- hackerboos 14y ago
  Very nice. Why did you choose Angular over competing frameworks? I'm researching which JS framework I should invest my time in.
  - mcrittenden 14y ago
    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.
    - aidos 14y ago
      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!
    - ramayac 14y ago
      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.
    - bwilliams 14y ago
      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.
- hamxiaoz 14y ago
  It looks pretty good, nice work! For starters on Angular.js, any recommendations on good tutorial/books?
  - mcrittenden 14y ago
    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/ http://docs.angularjs.org/tutorial/
darthhao 14y ago
That's awesome! I really like that minimalist layout.
- mcrittenden 14y ago
  Glad you like it!
felipesabino 14y ago
Nice work! I am currently using this youtube extension for a more minimalistic version of youtube https://chrome.google.com/webstore/detail/youtube-options-for-googl/bdokagampppgbnjfdlkfpphniapiiifn 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/ https://spoi.com/software/yto/
- mcrittenden 14y ago
  Nice! Hadn't seen that one before.
iusable 14y ago
Love this experiment! Would love to be able to return to the search results & keep the video playing on the right column.
sushi 14y ago
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 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 http://typezebra.com.
- mcrittenden 14y ago
  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!
  - ghiculescu 14y ago
    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.
    - mcrittenden 14y ago
      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 http://toogl.es/#/view/oFR4L6GegXA is an example link.
- mcrittenden 14y ago
  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 http://toogl.es/#/view/oFR4L6GegXA is an example link.
ErikHuisman 14y ago
It misses Youtube's autocomplete..
- nirvanatikku 14y ago
  @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 http://tikku.com/jquery-jqtube-util#search_example_4
  - mcrittenden 14y ago
    Awesome! I'll check this out. I've been missing the autocomplete too.
flexie 14y ago
Nice layout. The - mostly - flat design is very well done.
- mcrittenden 14y ago
  This is pretty much all thanks to Foundation--it's really great.
hinoglu 14y ago
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.
- mcrittenden 14y ago
  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?
  - hinoglu 14y ago
    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 :)
jlengrand 14y ago
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).
- mcrittenden 14y ago
  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.
  - jlengrand 14y ago
    I was expecting that kind of answer :). No problem ;), it still is really nice
shaurz 14y ago
It would be cool if you could log in and see your subscriptions.
- mcrittenden 14y ago
  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 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.
  - shaurz 14y ago
    Thanks! Looks pretty good.
eterpstra 14y ago
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.
- mcrittenden 14y ago
  Same. I've had a few requests to add in the comments and it's one thing I'm standing firm on. :)
  - eterpstra 14y ago
    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.
nightpool 14y ago
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).
- mcrittenden 14y ago
  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?
  - nightpool 14y ago
    http://toogl.es/#/view/QR_rKSTM43I http://toogl.es/#/view/QR_rKSTM43I is what I'm listening to right now.
    - mcrittenden 14y ago
      Awesome, thanks! I'll check it out.
      - dirkk0 14y ago
        Thanks for publishing this. (listening to Solar Fields (and I bought this!): http://toogl.es/#/view/c_KuGgpqbes http://toogl.es/#/view/c_KuGgpqbes )
        mcrittenden 14y ago
        My pleasure, thanks for using it!
  - leeskye 14y ago
    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.
prezjordan 14y ago
This is amazing. Any way you could integrate subscriptions?
- mcrittenden 14y ago
  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 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.
  - prezjordan 14y ago
    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 http://toogl.es/#/user/E8OXL41NDk4aZkvxSbJolg/subscriptions but there's nothing there
    - mcrittenden 14y ago
      > but there's nothing there Do you have anything on https://www.youtube.com/my_subscriptions 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.
      - prezjordan 14y ago
        http://i.imgur.com/SwCPbYg.png http://i.imgur.com/SwCPbYg.png
gawker 14y ago
Beautiful! Thanks! I'm probably going to fork it at some time to add something. I've been dreaming about this for a while.
- mcrittenden 14y ago
  Please do.
companyhen 14y ago
Really nice, I really enjoy the design. I have been thinking of making something semi-similar.
dombili 14y ago
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.
- mcrittenden 14y ago
  Ah good point. Subscriptions should be available at http://toogl.es/#/user/<yourusername>/subscriptions http://toogl.es/#/user/<yourusername>/subscriptions but you're right that it would be nice for them to go on the homepage.
  - natep 14y ago
    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.
  - jschuur 14y ago
    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!
level09 14y ago
This is insanely fast, I'm getting tempted now to dig more into Node.js
- mcrittenden 14y ago
  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.
  - level09 14y ago
    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
  - lousy_sysadmin 14y ago
    I believe this consume huge amount of bandwidth on your side, mind sharing the stats for the last 24 hour?
    - mcrittenden 14y ago
      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.
TranceMan 14y ago
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 https://gdata.youtube.com/demo/index.html - thanks for the reminder! Nice work/code
- mcrittenden 14y ago
  Thanks! Yeah, the gdata API and demo is pretty nice (and VERY fast). It's been a joy to work with.
mikecane 14y ago
That is damn wicked fast on my crap PC. Now I wish YouTube allowed us to use skins. I'd use that!
timdorr 14y ago
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-playstation.html 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?
- mcrittenden 14y ago
  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.
- mortenjorck 14y ago
  Wow. This feels vastly faster and more responsive than the PS3 YouTube webapp, perhaps by an order of magnitude.
  - jlgreco 14y ago
    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.)
hnriot 14y ago
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?
- mcrittenden 14y ago
  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. :)
  - hnriot 14y ago
    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.
    - mcrittenden 14y ago
zobzu 14y ago
I like the UI. A lot faster than YT, too.
krisc 14y ago
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
jackalope 14y ago
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!
l33tbro 14y ago
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.
- mcrittenden 14y ago
  Great idea about how long ago it was posted. I'll add that ASAP. Glad you like it!
cantlin 14y ago
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
nslamberth 14y ago
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.
- mcrittenden 14y ago
  Thanks! I've actually experienced the same thing.
genwin 14y ago
Nice! I would actually use this to browse YouTube, whereas I don't browse YT directly now due to its bad interface.
joycer 14y ago
One thing that irks me about YouTube that I'd love to see implemented is the ability to search while a video plays. You could put the search results in that right column section.
Puer 14y ago
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.
- mcrittenden 14y ago
  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 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.
z3niMAGiNE 14y ago
Blazingly fast. I promptly installed the Chrome extension. Thanks for your hard work!
- mcrittenden 14y ago
  Awesome, thanks! Let me know if anything bugs you about it.
interg12 14y ago
Very fast. I would prefer bigger video squares and smaller text.
DeepDuh 14y ago
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)?
- mcrittenden 14y ago
  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! :)
thomasfl 14y ago
You won me over. I'm definitely going to use angular.
mikecane 14y ago
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.
- mcrittenden 14y ago
  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!
  - mikecane 14y ago
    Hitting "Upload Date" no longer reorders the video results from search.
    - mcrittenden 14y ago
      Really? Can you give me an example? Seems to be working OK for me.
      - mikecane 14y ago
        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!
      - mikecane 14y ago
        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.
tharshan09 14y ago
nice app. just quickly wanted to report a bug: on smaller resolution the sidebar cannot be scrolled down.
przemoc 14y ago
It's really slick YT front-end. You should also (unobtrusively) include your TangleTube's [1] functionality in Toogles. [1]: http://tangletube.com/ http://tangletube.com/
- mcrittenden 14y ago
  Good find :) I've actually thought about that but haven't been able to work out a way to do it unobtrusively. Any thoughts?

189 points by mcrittenden 14y ago

zosegal 14y ago

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

dhirajbajaj 14y ago

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

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

mcrittenden 14y ago

Code is on GitHub here: https://github.com/mikecrittenden/toogles 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/kljfdbkcacjeogbiiiikahgkmmlgdekf https://chrome.google.com/webstore/detail/toogles/kljfdbkcac...

hackerboos 14y ago
Very nice. Why did you choose Angular over competing frameworks? I'm researching which JS framework I should invest my time in.
- mcrittenden 14y ago
  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.
  - aidos 14y ago
    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!
  - ramayac 14y ago
    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.
  - bwilliams 14y ago
    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.
hamxiaoz 14y ago
It looks pretty good, nice work! For starters on Angular.js, any recommendations on good tutorial/books?
- mcrittenden 14y ago
  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/ http://docs.angularjs.org/tutorial/

darthhao 14y ago

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

mcrittenden 14y ago
Glad you like it!

felipesabino 14y ago

Nice work! I am currently using this youtube extension for a more minimalistic version of youtube https://chrome.google.com/webstore/detail/youtube-options-for-googl/bdokagampppgbnjfdlkfpphniapiiifn 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/ https://spoi.com/software/yto/

mcrittenden 14y ago
Nice! Hadn't seen that one before.

iusable 14y ago

Love this experiment! Would love to be able to return to the search results & keep the video playing on the right column.

sushi 14y ago

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 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 http://typezebra.com.

mcrittenden 14y ago
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!
- ghiculescu 14y ago
  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.
  - mcrittenden 14y ago
    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 http://toogl.es/#/view/oFR4L6GegXA is an example link.
mcrittenden 14y ago
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 http://toogl.es/#/view/oFR4L6GegXA is an example link.

ErikHuisman 14y ago

It misses Youtube's autocomplete..

nirvanatikku 14y ago
@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 http://tikku.com/jquery-jqtube-util#search_example_4
- mcrittenden 14y ago
  Awesome! I'll check this out. I've been missing the autocomplete too.

flexie 14y ago

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

mcrittenden 14y ago
This is pretty much all thanks to Foundation--it's really great.

hinoglu 14y ago

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.

mcrittenden 14y ago
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?
- hinoglu 14y ago
  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 :)

jlengrand 14y ago

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).

mcrittenden 14y ago
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.
- jlengrand 14y ago
  I was expecting that kind of answer :). No problem ;), it still is really nice

shaurz 14y ago

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

mcrittenden 14y ago
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 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.
- shaurz 14y ago
  Thanks! Looks pretty good.

eterpstra 14y ago

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.

mcrittenden 14y ago
Same. I've had a few requests to add in the comments and it's one thing I'm standing firm on. :)
- eterpstra 14y ago
  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.

nightpool 14y ago

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).

mcrittenden 14y ago
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?
- nightpool 14y ago
  http://toogl.es/#/view/QR_rKSTM43I http://toogl.es/#/view/QR_rKSTM43I is what I'm listening to right now.
  - mcrittenden 14y ago
    Awesome, thanks! I'll check it out.
    - dirkk0 14y ago
      Thanks for publishing this. (listening to Solar Fields (and I bought this!): http://toogl.es/#/view/c_KuGgpqbes http://toogl.es/#/view/c_KuGgpqbes )
      - mcrittenden 14y ago
        My pleasure, thanks for using it!
- leeskye 14y ago
  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.

prezjordan 14y ago

This is amazing. Any way you could integrate subscriptions?

mcrittenden 14y ago
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 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.
- prezjordan 14y ago
  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 http://toogl.es/#/user/E8OXL41NDk4aZkvxSbJolg/subscriptions but there's nothing there
  - mcrittenden 14y ago
    > but there's nothing there Do you have anything on https://www.youtube.com/my_subscriptions 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.
    - prezjordan 14y ago
      http://i.imgur.com/SwCPbYg.png http://i.imgur.com/SwCPbYg.png

gawker 14y ago

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

mcrittenden 14y ago
Please do.

companyhen 14y ago

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

dombili 14y ago

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.

mcrittenden 14y ago
Ah good point. Subscriptions should be available at http://toogl.es/#/user/<yourusername>/subscriptions http://toogl.es/#/user/<yourusername>/subscriptions but you're right that it would be nice for them to go on the homepage.
- natep 14y ago
  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.
- jschuur 14y ago
  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!

level09 14y ago

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

mcrittenden 14y ago
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.
- level09 14y ago
  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
- lousy_sysadmin 14y ago
  I believe this consume huge amount of bandwidth on your side, mind sharing the stats for the last 24 hour?
  - mcrittenden 14y ago
    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.

TranceMan 14y ago

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 https://gdata.youtube.com/demo/index.html - thanks for the reminder! Nice work/code

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

mikecane 14y ago

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

timdorr 14y ago

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-playstation.html 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?

mcrittenden 14y ago
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.
mortenjorck 14y ago
Wow. This feels vastly faster and more responsive than the PS3 YouTube webapp, perhaps by an order of magnitude.
- jlgreco 14y ago
  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.)

hnriot 14y ago

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?

mcrittenden 14y ago
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. :)
- hnriot 14y ago
  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.
  - mcrittenden 14y ago

zobzu 14y ago

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

krisc 14y ago

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

jackalope 14y ago

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!

l33tbro 14y ago

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.

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

cantlin 14y ago

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

nslamberth 14y ago

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.

mcrittenden 14y ago
Thanks! I've actually experienced the same thing.

genwin 14y ago

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

joycer 14y ago

One thing that irks me about YouTube that I'd love to see implemented is the ability to search while a video plays. You could put the search results in that right column section.

Puer 14y ago

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.

mcrittenden 14y ago
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 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.

z3niMAGiNE 14y ago

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

mcrittenden 14y ago
Awesome, thanks! Let me know if anything bugs you about it.

interg12 14y ago

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

DeepDuh 14y ago

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)?

mcrittenden 14y ago
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! :)

thomasfl 14y ago

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

mikecane 14y ago

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.

mcrittenden 14y ago
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!
- mikecane 14y ago
  Hitting "Upload Date" no longer reorders the video results from search.
  - mcrittenden 14y ago
    Really? Can you give me an example? Seems to be working OK for me.
    - mikecane 14y ago
      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!
    - mikecane 14y ago
      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.

tharshan09 14y ago

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

przemoc 14y ago

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

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