meomix / streamuschromeextension Goto Github PK
View Code? Open in Web Editor NEWA YouTube video player as a Google Chrome extension
Home Page: http://streamus.com
License: Apache License 2.0
A YouTube video player as a Google Chrome extension
Home Page: http://streamus.com
License: Apache License 2.0
I'm not sure of the specifics on this, but maybe:
There's gotta be more to it than that, but I've been asked for this feature a few times at this point.
Currently, when a user searches, they are presented a single list of items which are results from YouTube's API. It would be better if search would also present results from within the user's collection of songs.
I believe that the best way to do this would be similar to how Google Inbox presents data with their search. Here's an example:
Here, we see search results split into two cards (http://www.google.com/design/spec/components/cards.html). I think something similar could be done for splitting between the user's collection and online resources.
Some concerns I have are:
From a user report -- "What happend was, I was playing one song, and had some internet issues. When my connection recovered, it was playing the song, twice, and the same time. I could pause them both, but when I hit play, they both played."
It would be nice to use something like intro.js (http://usablica.github.io/intro.js/) to introduce Streamus to new users.
So this has been a long-time existing issue. I fully understand the problem and I think I've got a decent solution, I will explain:
If Streamus is logged in on two PCs (imagine two laptops next to each other), the same user can be logged in on both machines. However, the UI doesn't automatically refresh when data is changed on another PC. This can lead to odd data loss issues / perceived data loss issues when moving between PCs.
I think a good fix for this is to monitor the idle state of each PC and also keeps track of an 'isDirty' flag. Whenever a change happens on one PC -- the isDirty flag is set to true and written to chrome.storage.sync. Whenever a PC comes out of idle state, it reads the isDirty flag. If it is set to true, re-request all data from the server. This might take a second to do, but I think this is the only way.
Open to other ideas though!
The server takes a second to respond and there is no visual indication that a save is occurring. Probably create a mock playlist area with a loading icon and then fill it in with actual playlist information once the server has responded.
Streamus should play nicely with YouTube and not try to be the de-facto end-all source. People still want the ability to go check things out on YouTube. It makes sense to add a rightclick -> watch on YouTube option to videos.
It's a nice start with Top 10 and Top 100 track support.
Would like to have a drop down menu with stuff like 'Add Video to Playlist' etc.. for each of the buttons which gets injected.
Currently, users can set a flag in the options file to indicate what quality of YouTube video they want loaded. There's no visual indicator of this, though.
The desktop notifications could look a lot better. We need to use the new, HTML notification API syntax.
Consider making the notifications look like: http://i.imgur.com/WxpP61m.png
I added a shared playlist from a friend
Then I added the playlist to the stream via right click
Then I tried to add a new video to my playlist and then add it to my stream -- wouldn't add to the stream until stream clear.
So a user should be able to click an icon called 'Broadcast' which will then allow them to be able to take 'Subscribers.' Unselecting broadcasting will disconnect the subscribers with a notification message.
While the broadcaster has subscribers, its state will be broadcasted to the others. They will have a new Stream called 'BroadcasterName' which will contain playlists the broadcaster creates. The broadcaster will not be able to change Streams while broadcasting.
The listeners will get all the videos the Broadcaster listens to while they listen (same for playlists). Playlists will be under a stream titled the broadcaster's name, and the stream will have playlists containing the various playlists created by the broadcaster. Those playlists will have the corresponding items.
Instead of doing nothing on failure -- show a notification indicating why nothing happened.
For some reason when I called loadVideoById and specific a time in seconds to start -- the video starts at 0. This is probably due to my hack/workaround, but I need to sit down and figure it out!
How do you handle rolling out updates to Google Chrome? I often experience an issue where I make a change to my backend which breaks the extension. So, I roll out an update to the server as well as to my extension. There is now a ~30 minute window where my server is up-to-date, but not everyone's extension is on the same version. This causes people to have a negative experience during that window. Is the only solution to this implementing a versioned API and somehow accomodating the different versions with my backend?
A versioned API isn't the only solution, but it's the best solution. There's simply no forcing people to update on your schedule. It's even worse once you support Firefox, because AMO reviews take for-freaking-ever, and they're WAY more likely to reject your extension (they're thorough and picky, I'm not saying anything bad about them - if anything it's a compliment!)...
Remember that some chrome users may have turned off auto-updating of extensions, too...
If you can, you definitely should go with a versioned API.
The next-best solution would be to find a way to make API changes that aren't breaking, but not knowing the internals of your code, it's hard for me to give specific suggestions / criticism there.
http://www.youtube.com/playlist?list=ALYL4kY05133rTMhTulSaXKj_Y6el9q0JH stuff like this isn't supported in Streamus currently... needs to use the YouTube v3 API
It would be nice to incorporate a bit of social media into Streamus. I see a lot of stuff on Facebook about 'What I'm currently listening to' on Spotify / Pandora, etc..
It would be nice to be able to easily post your current video on Facebook. Perhaps a right click -> share on a stream item.
Currently, VideoSearchResults fades in when the '+ Add Videos' button is clicked.
This looks fine... but it's the only element in Streamus which fades in instead of sliding in. Would it make more sense to have this element slide in from the left hand side?
It only happens once and it happens when the scrollbar is being shown, but I am struggling to reproduce it consistently -- I do see it happen pretty often, though.
The video buffer amount will be shown in the same fashion as YouTube. Overlay a progress bar onto the current time slider. This will allow for pausing the song during buffering, too, because the play/pause button will not be in charge of showing that state.
This will be more practical once new UI changes are implemented. The current time slider will be wider and easier to convey this information.
Streamus de-syncs audio volume levels from YouTube. It'd be nice to be able to detect changes on YouTube pages and keep Streamus in-sync.
This is probably a huge undertaking, but a lot of users wish YouTube + SoundCloud were supported. Since other websites, like plug.dj, support SoundCloud -- I suspect it is quite possible.
I'm not sure if radio mode would work with SoundCloud -- a lot of the logic for smart picking related YouTube videos is given by YouTube's API. If SoundCloud doesn't have something similar... it won't be possible!
When you hover over a video on the YouTube page -- a little bar rises up from the bottom of the video. This is a great spot to target for injecting HTML. It would be nice to inject a Streamus icon there and allow users to immediately play in Streamus with one click.
It would be cool to click on the 'Elapsed Time' label and have it change to a 'Time Remaining' label. Some users prefer to have the time information conveyed to them in this way.
Since video is just an HTML5 canvas there are no controls when in full screen. Need to add an overlay to the fullscreen view to show some controls.
The files for i18n support are in place and used in English. Need to get the files converted to other languages!
A lot of people use Beatport to get their daily dose of new music.
It's pretty simple to scrape Beatport's website for the Top 100 of various genres of music. It's also simple to find the songs on YouTube.
It would be really nice to have automatically updating, top 100 genre lists derived from Beatport's information. The playlists could be completely readonly and just sync with Beatport once a day or something.
Should I be changing video requests (for copying URL to clipboard, etc.) to match where a source is coming from?
Streamus' radio mode is based off of streamItems.js's _getRelatedSongs
method. The functionality is provided through a few steps:
parody
or live
There are numerous quality-of-life improvements which could be made:
Additionally, how should the _getRelatedSongs
method be modified so that it doesn't fail silently when YouTube's API has not yet responded with related songs?
This feature is requested a lot. Need to support logging into a YouTube account to access private videos, channels, etc.
If it takes a while to get data from YouTube, Streamus doesn't look very good. I would expect the area for a new song to be showing up to be pre-filled in with a "Fetching from YouTube..." indicator. Then if it fails I would have a location to show it failed and if it succeeds I drop the video in that spot.
There's a loading spinner, but really doesn't do much.
Clearly a timing issue, but I'm thinking maybe search should just be one AJAX and not the 1 second search that I currently have... just overly complicates things.
e.g. if I can do:
"The Beatles Hey Jude"
vs
"Hey Jude The Beatles"
what should I be searching for?
The video I tried changing to is : http://youtu.be/KmcPeuf5aXo
This video was taken down due to copyright and returns that embedding is disabled. This may be a different video state than one that is available but does not allow embedding.
Issues that occur :
Play button changes to loading and remains spinning.
Previous song does not unload, but keeps playing until buffer is exhausted.
Song Title changes but previous song continues playing.
Current progress bar is updated to new videos duration, but still controls previous playing video.
It appears that the player isn't fully unloading the previous song on embed error.
http://backbonetutorials.com/organizing-backbone-using-modules/
I want to load my templates like this example
The overall concept for this is pretty simple... allow users to drag-and-drop a bookmark folder and import all YouTube videos in that folder.
The specifics are a bit trickier, though. What if there are nested bookmarked folders? Does it all go into one playlist? Multiple playlists?
Still, would be nice.
Users are able to import YouTube playlists into Streamus. They have an expectation that an imported playlist will automatically update when new songs are added to it on YouTube.
In order to do this, several things need to happen:
It's good practice to validate data before sending it off to the server, but I haven't gotten around to doing this.
http://www.youtube.com/watch?v=1WfZ7AQOA8c&list=RD02nlYbE8M07bk
Supported in YouTube's V3 API. I've got initial code working for this, but some of the fields are different (e.g. duration comes in a different time format).
Streamus needs to be overhauled such that it can support v2 and v3 APIs at the same time.
There's no reason Streamus can't be pointed to someones existing music collection, parse it and import all found YouTube videos into Streamus playlists. I think this would really help adoption of Streamus -- getting peoples current music collections into Streamus is important.
YouTube videos are notorious for having blank minutes at the end of videos or garbage noise at the start / introductory noise for channels.
It would be nice to allow users to indicate that they wish to 'trim' a song at a current point in time. This would mean that the song would start at the 'start trimmed' time and consider itself done when it hits an 'end trim' time, skipping to the next song at that point.
There's no UI support for this currently nor any server-side support. Need to add 'start trim time' and 'end trim time' values to PlaylistItems.
The trim points in time might be represented as markers on the YouTube elapsed time progress bar. The user would be able to click-to-add-or-remove a marker. The markers would be draggable.
to indicate that clicking on it will begin playing
Should play top unique 10, so if you click twice you will get the 2nd 10 or something to that effect.. would be cooler + don't pollute the stream
A tooltip should be displayed when hovering over the time slider. This will allow the user to know what time they will arrive at before clicking on that point in time. YouTube has this feature and it's poor UX for it to be missing from Streamus.
It's possible that this should be implemented after #524's modifications to sliders. The slider's UI will be changing when becoming more material.
From a user report -- "[10:41:29 AM] Bryant Young: Also following the steps above - played 1st song, skipped to second, got about 10% through then locked on buffering, hit next song, started playing and it was the first song again playing despite the title/duration being that of the 3rd song
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.