Giter VIP home page Giter VIP logo

tunesquared's Introduction

#build React view must be built before starting the app. You will need grunt-cli for all grunt tasks : npm install -g grunt-cli Then run grunt react every time you want to compile react views (be sure to npm install before running any grunt task).

Every prebuild steps should run on "npm install" so with git pull && npm install everything should run just fine on a stable branch.

To compile from ST2: Tools -> build System -> New Build system... copy this JSON :

{
  "cmd": ["grunt.cmd", "react"],
  "selector": "source.js"
}

To build on save, install SublimeOnSaveBuild (available w/ Package Control). Then Preferencees -> Package Settings -> SublimeOnSaveBuild, copy the contents of "Settings - Default" to "Settings - User" and add jsx to the list of extentions in "filename_filter".

Development :

Follow these guidelines when developping on this project

Style

  • tabs = two spaces
  • use jshint if possible, .jshintrc are comitted to share coding style config

Constants litteral

  • always extract litteral constants from code and declare them at the top of your files (not in global space !!!)
  • constants are capped + underscore as word separator
  • when a constant should be the same value accross multiple points in the program, expose it as Module.MY_CONSTANT.
  • if not possible, then use the same name for every instances, and link them with comments so they can be easily found and updated. ex :

server - Party.js

/* Maximum string length for party title. (see client create dialog) */
var PARTY_TITLE_MAX_LEN = 32;

client - CreateDialog.jsx

/* Maximum string length for party title. (see Party server model) */
var PARTY_TITLE_MAX_LEN = 32;

tunesquared's People

Contributors

etbh avatar hmil avatar phisch124 avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

phisch124

tunesquared's Issues

mobile: search focus

Sometimes, when clicking "search" button, the text input expands but does not focus.

Seen on HTC one mini.

btw: make the click zone larger for search button as the user taps the area between the search icon and the refresh button hopping for something to happen.

Print QR-Code button

Printing is not sustainable (we should clearly remind the users of that issue). but it could be a fast and easy way to distribute the QR-Code..

Show party stats on desktop

Party host should see a minimum of info about his party like :

  • #of connected users
  • #of songs in playlist
  • list of previously played songs, see #14

New desktop UI

Change desktop UI to make the main view more formal and allow to open a secondary view for screens/beamers.

Beamer view should look like music TV channels, with video background, brand, trends and infos on top. It must include:

  • the brand logo
  • at least next song title with votes
  • One or two ways to join the party (this highly depends on the policy. Do users come from an FB event ? Is the party open ?)

Desktop view should look professional and include as many controls as possible. In particular:

  • playlist view
  • party statistics
  • search view
  • party settings: {
    • allowed search sources
    • acces control policy
    • authorized people (if available)
    • FB event link
      }
  • player controls
  • Button to open beamer view
  • extensive tooltips/guides/hints to help the user get accomodated with the UI
  • Some way to add local files
  • Some way to show and solve problems with local files

Allow geographic filtering

A party only occurs in some restricted area, it might be wise to enable some kind of geographical filtering to avoid parasitic usage.

Cleanup error dialog

Error dialog in main app (components/) is really specific. It should be cleaned and made more general since it is no longer reserved to Flash errors.

Safari doesn't load next song

Doesn't happen everytime, but some times it just stops and doesn't load the next song.

screen shot 2013-10-30 at 23 08 39

[Error] TypeError: 'undefined' is not a function (evaluating 'this._player.getCurrentTime()')
getProgress (YoutubePlayer.js, line 158)
watchProgress (Player.js, line 292)
boundMethod (react.js, line 4320)

Get rid of ghost parties

Session is not a strong authentication mecanism, they can be lost so parties linked to lost sessions should be destroyed.

Add protection agains multiple callback calls in REST Router

router.before('read', function(req, id, cb) {
  if (isAuthorized(req.session))
    cb('there was an error');
  cb(null, id);
}

This currently creates random results and leaks forbidden information !
Must prevent multiple calls to cb and warn when this happens.

optional user name

possibility to search for all songs added by one specific user,
user ranking

Facebook integration

This large issue includes:

  • login w/ facebook
  • linking parties to fb events
  • allow access to all friends / short-list of friends / members of an event
  • Show a logged-in user parties he subscribed to / redirect him to the only party he subscribed to

Possible XSSs on mobile

Values not cleaned when shown with _.template(). Desktop should not be affected.
Solutions:

  • Deep Song model validation: perform server-side check with the original source (ie. youtube)
  • Direct XSS protection in mobile
  • Simple server-side string escaping (may not work with react re-escaping stuff)

Create build scripts

Should be able to build the whole project "production ready" with something not more complicated than grunt.

Create real QR code and direct link

This is a "double" issue:

  • create an url to join a party
  • generate the QR code in the client

I take the first one if anyone is interested in the second...

Use local files

The possibility of using local files is a "killer feature".

It should be possible to add many files at a time, and have them all placed in the playlist at once. Once played, they should still be availble for search.

However, it requires:

  • error handling for out-of-sync files. (must grant access on every page refresh). including a UI designed for this constraint.
  • reflexion on how to store such songs in DB and how to include them in the search (are out-of-sync files included in search results ? When admin is offline, we cannot know if a song is out-of-sync).

(note: how about hashing music files to keep track of them accross page reloads ? )

Refactor server

Take "framework" out in a separate npm package.
Use require('framework').model('Party') instead of shitty require('../(../)*Party');
In the end, no more require('../something');

Reorder hierarchically stuff in controllers so that api URLs kind of matches file paths.

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.