Youtube Haiku Player 1.0.2 Author: Simone Cingano (firstname.lastname@example.org) 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
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.
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.
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):
Otherwise you can just build the project for production: you will find the distibution files in the
- filter for LOUD [suggested by /u/LUIGI2323]
- 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
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)
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!)
- Choose what tags you want in the channel (haiku, poetry, meme and nsfw)
- Choose channel (reset player)
- 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
volume controls [suggested by /u/JokerDZNx and /u/NiklasSpZ]
- 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"