Git Product home page Git Product logo

vibe's Introduction

#Vibe Player#

Logo

Vibe is a next-generation Web Application that will stream music from a Vibe Server and allow it to be played on the browser. Vibe aims to provide an intuitive and fast User Interface by using the latest Web Technologies available.

Although Vibe uses the latest technologies, it will still work in legacy browsers, (see the support listing below.) Vibe uses a few select HTML5 additions, including WebSockets, localStorage and Drag And Drop. It also hopes to provide a scalable interface by using SVG graphics for its image resources, and media queries and elastic layout to ensure it can fit into any window comfortably.

Vibe also has an alternative User Interface for Mobile devices like smartphones, providing a simplistic but easy to navigate interface.

#Screenshots

Set up screen, displayed when Vibe is first run.

First Run

Normal Vibe view in Google Chrome on OS X:

Normal View

Vibe settings menu in Google Chrome on OS X: Settings

#How It Works#

Vibe uses the Client-Server model, so it requires you to have a Vibe Server configured on your home computer that will scan and catalogue your music, and then enable the Vibe Player to interface with this server in order to understand which tracks are available to play. When you select a track to play, Vibe will create a stream to that track and play it for you.

#Support#

Vibe uses a few HTML5 technologies, so legacy browsers like IE7 and below are not supported, it does have some compatibility mechanisms to ensure that the application will still run in IE8, but it is unlikely to be as intuitive and glossy as a more W3C-compliant alternative.

  • IE8+
  • Chrome
  • Safari
  • Firefox 3.6+
  • Opera 12+

#Changelog:

##v0.1:

  • Webkit Notifications
  • Scaleable Layout
  • Rearrangeable Playlist

###v0.1.1:

  • Fix Playing Info bug (#11)
  • Fix Opera Drag and Drop (#12)
  • Add context menus to Playlist and Collection
  • Add context menu interface for plugins.
  • Update play/pause favicon status.
  • Fix playlist bugs.
  • Misc optimisations

###v0.1.2 (current):

  • Keyboard shortcuts
  • Standardised object model for plugins.

#Roadmap:

##v0.2:

  • Search
  • Server Authentication
  • LastFm Scrobbling
  • Theming Support
  • Upload via drag and drop

##v0.3:

  • Shared Playlist
  • Play on Server
  • Remote Events (play/pause/stop)
  • Preferences Syncing
  • Plugin Support
  • Mobile interface

#Copyright#

All images and stylesheets are copyright Luke Channings 2012 all rights reserved. The source code released under the LGPL license - http://www.gnu.org/copyleft/lesser.html

vibe's People

Contributors

lukechannings avatar

Stargazers

 avatar Abraham Itule avatar Martin Dahlgren avatar  avatar

Watchers

 avatar James Cloos avatar

vibe's Issues

Persistence bug.

Bug in the persistence module but only reproducible in IE. Steps:

  1. Drag two items from the collection to the playlist.
  2. Clear the playlist.
  3. Drag another item from the collection to the playlist.
  4. Reload the browser.

The playlist should be redrawn with only the n playlist branch, instead it is drawn with n and n-1 branches.

Duplication of items in the playlist.

Dragging the same item into the playlist multiple times causes the duration of the playlist to be incremented, but the item is not duplicated in the playlist. This is caused by the caching of the playlist items in the UIPlaylist.

Playlist inconsistencies.

There are a few issues with the playlist model and UI synchronisation, for example items to the playlist using "play next" does not work in some circumstances.

Removing items from the playlist when sparsely selected results in an error being thrown, this may be a result of not caching the elements, or referring to them by their numerical indexes rather than their object references.

A more extensive bug hunt needs to be performed for v0.1.2.

UI not initialised after first setup.

After the client is configured to connect to a Vibe Server it should load the UI. A bug prevents this from happening and a reload must occur before this can happen.

Better way of managing stylesheets.

Need a better way of managing the linking of stylesheets that works with the following:

  • requirejs loaded callback
  • r.js optimisations (preferably essential stylesheets should inject <style>)

This may not be technically viable or may perhaps be hard to implement because
browsers do not emit events when a stylesheet is loaded. Try to adapt util.registerStylesheet
to be a requirejs module, optional dependencies are a higher concern.

ModalDialogue in Opera

The ModalDialogue module does not render at all in Opera 12. The ModalDialogueOverlay does not get appended to the body, further investigation necessary, the guess would be that document.body was not available at the point at which the overlay is appended. However, no error is thrown, which makes that theory unlikely.

Implement UIPlayerVolume

The UIPlayerVolume module will implement an interface for controlling the currentSound's volume property. The interface will be in the form of a slider, and will use the DragDealer dependency, the same as UIPlayerSlider uses.

Context Menu

Add context menus for the collection and playlist allowing a right-click
context menu to appear and the following options be presented:

Collection:

  • Add to collection
  • Play next

Playlist:

  • Remove

Grey out undo and redo buttons.

Grey out undo and redo buttons when there is no respective operation to perform.
Apply the disabled CSS class to each button when there is no possibility to undo or redo, this helps to avoid confusion. Also, perhaps an icon redesign is needed?

Playlist on Firefox

On Firefox, Drag and Drop doesnt work on the playlist. So if you try to rearrange the list items (songs) on the Playlist, by dragging your favourite to the top for example, it doesnt work. However it does work on Google Chrome, but NOT on Firefox.

Drag and Drop in Opera 12

Drag and Drop does not function in Opera. The elements are draggable, but the Playlist is not a valid drop area, further investigation needed. Suggest a rewrite of Drag and Drop usage with reworked drop zone support.

Add keyboard controls.

Keyboard controls can be useful, I was thinking:

  • space : play / pause the current track
  • up / down arrows : playlist selection up and down
  • enter : play selected playlist item
  • alt up / alt down : volume up and down
  • left / right : seek to new position

This will probably make it before the VibeServer rewrite, probably for v0.1.2.

Fix regression in updateInfo.

Refactor and reimplement updateInfo method of the ModelPlaylist Object Prototype. The updateInfo triggers proved to be unreliable in built versions of Vibe, indicating further issues with EventEmitter. All triggers for updateInfo have been stripped out in the latest branch until this issue is solved.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.