yupswing / youtubehaiku.net

Youtube Haiku HTML5 Player

Youtube Haiku Player 1.0.2
Author: Simone Cingano ([e-mail])
Repository: https://github.com/yupswing/youtubehaiku.net
Licence: MIT

NOTE: Thanks for checking out the source code :) If you plan to fork the project you should check for the tag #DEPLOY in the source code to customise your instance of youtubehaiku

YOUTUBEHAIKU.NET

Youtube Haiku Player is an HTML5 web application to play, continuosly, videos gathered from the Youtube Haiku subreddit (/r/youtubehaiku) in a nice and minimalist interface.

The app is live at http://youtubehaiku.net

You can choose the source of the videos (top posts, new posts...), the range (today, this week, all time...) and the tags you want to exclude (haiku, poetry, meme, nsfw).

The video list is updated while you watch (or when you change the "channel") and will play forever until the end of the reddit (which is at max 1000 posts by reddit design)

Every video shown is easily linked to the original post to allow viewers to upvote/downvote or comment.

Licence

The project is released under the MIT Licence.

You can fork, edit and distribute the app as you please, I just kindly ask to give me credit in your derivative works.

Dev environment

After cloning the project you have to install the npm libraries: cd to the project root directory and then:

npm install # or yarn install

After that, using gulp, you can compile the code, start a watcher (recompile when you change a file) and start a minimal web server with live reload (default at http://localhost:3000):

gulp

Otherwise you can just build the project for production: you will find the distibution files in the dist folder:

gulp dist

TODO

• filter for LOUD [suggested by /u/LUIGI2323]

FUTURE

• app for ios and android (maybe using cordova) [suggested by /u/marsface]
• upvote/downvote directly from the player (maube using reddit oauth2) [suggested by /u/ZeppelinCaptain]
• YoutubeHaiku bank [suggested by /u/watsug]
  • a node server that polls reddit to get post IDs (to have more than 1000 videos)
  • the client app gets data from node instead of reddit

Features

• Load and parse data from /r/youtubehaiku

  • Support "start" and "end" parameters
  • Extract tags (haiku, poetry and meme, then show them with official colors)

• Load and use youtube player (iframe API)

  • Basic "playlist" controls (previous, next, replay)
  • Sync controls with player status
  • Playing progress bar (adjusted to real video length)
  • Buffering progress bar (animated!)
  • Play/Pause button

• Show next video thumbnail and title (click play next video)

• Keyboard controls

• Logo links to the subreddit

• Video title links to reddit post

• Show upvotes and submitter

• Settings in cookie (first time on site and channel preferences)

• Stop next/prev when reached end/start

• Better console.logs (with ascii banner!)

• Channels

  • Choose what tags you want in the channel (haiku, poetry, meme and nsfw)
  • Choose channel (reset player)

• Videos forever

  • Loads 40 posts per time with filters (or until you got at least 20 valid posts)
  • Loads more posts on the fly when the buffer is 10 posts away to the end
  • Start the player when you have 3 valid posts in the buffer

• favicon

• volume controls [suggested by /u/JokerDZNx and /u/NiklasSpZ]

Bugfixes

• All interactive UI should not get higlighted (use A+HREF+ONLICK instead of DIV+ONCLICK)
• Fix sudden end of video in loaded video
• Playback from mobile cannot start automatically (let the user start)
• Sanitize strings in html
• Remove hover effects on mobile to avoid :hover remains after a "click"