mozilla/chatspaces

Snazzy chat app.

Chatspaces

What this is

Chatspaces is a private chat app for sending messages to your contacts. It currently requires Persona for authentication.

Project Information

Current development stage

• Adding in v.1 features and design/interface iterations for MWC (Mobile World Congress)

Features for v.1 (No new features will be added/discussed until post-MWC)

• Search for, add, remove and block users from your contacts list
• Ability to send animated GIFs and static images with messages via WebRTC
• Websocket and SimplePush notification support of unread/new messages
• The ability to send a message to multiple contacts via broadcasting

Features that may be considered/discussed for post-MWC

• Encryption of messages
• Adding contacts from your phonebook
• Cordova integration
• Authenticating through third-party services like Facebook/Twitter
• Integration with Firefox Accounts
• Integration with Presence
• Third-party developer API support

Filing bugs

• Bugs should be filed only for v.1 features for now on https://github.com/mozilla/chatspaces/issues?state=open

On IRC

• Please contact us on irc://irc.mozilla.org/apps
• For main project questions talk to ednapiranha
• For image generation (GIFs, static JPG), local caching questions talk to sole
• For UX/UI/design questions talk to mhanratty or tsmuse
• For anything else, talk to ednapiranha or wenzel

Via email

Email me at [email protected]

Thanks!

Supported browsers

• Firefox
• Chrome

Installation instructions

Clone the repository

> git clone git://github.com/mozilla/chatspaces.git

Install node by using brew or through the website http://nodejs.org/#download

Install redis via brew and make sure the server is running: redis-server &

> npm -g install nodemon bower
> cd chatspaces
> npm install
> bower install
> cp local.json-dist local.json
> npm start

Open your browser at the following URL http://localhost:3000

Resetting your database

> ./bin/resetDb.js

chatspaces's Issues

Update gumHelper to latest

Note that I sent in custom 4:3 height and width in https://github.com/mozilla/chatspaces/blob/master/public/javascripts/controllers.js#L181 to shave off some file size :)

How to list recipients on new message form in multiple layouts

If a user is selected, ensure new messages appears in their conversation feed

Should the input text for the message be in the overlay for the camera instead?

I had someone use chatspaces on their machine and noticed that they kept trying to submit the message in the thread reply state without adding a picture - which confused them. Should we move the text box to the camera overlay so they go together?

Add state to notifications

contacts not persisting after logout

As user karl, add contact with search at /friends, contact added, log out, log in, no contacts visible at /friends. Expected contact to still be there after login.

Feature request: Groups?

Should users be able to make groups? I heard that's the way a lot of folks use Whatsapp. They create groups and receive notifications when someone posts to the group. According to a user on Quora group conversations "are an absolute necessity when talking about hotties" (http://www.quora.com/WhatsApp-Messenger/Why-is-WhatsApp-Messenger-so-popular-Is-it-fun).

I think chatspaces should support conversations about hotties.

Animated_GIF throws Exception sometimes

I'll add more details tomorrow about the error in here.

Call to action for landing page

Experiment with reducing GIF size

currently they're ~ 100kb, make them smaller!

Change flow of messaging

• remove file support
• move gif to next step button

[UX] Adding a new contact

Here is a flow for adding a contact to chatspaces. I divided the screens so that the search on the "Friends" screen only searches through your existing contacts. If you want to add a new contact you do that through another screen. The design on the contacts screen is similar to what is being used on the FFOS Contacts app (http://mozorg.cdn.mozilla.net/media/img/l10n/en-US/firefox/os/have-it-all/contacts.jpg?2013-09).

1. User clicks "+" icon to add contact
2. User sees screen to add friend. User can search existing chatspace users. User enters chatspace user name.
3. User sees result. User selects the username to add
4. Show name selected.
5. User sees feedback that the contact has been added. User can enter additional usernames and add more folks or click "Done"
6. User returns to "Friends" screen and sees that contact was added.

The search by username UI comes from the curation tool. Thought it would be helpful here as you can add multiple people at one time.
https://marketplace-dev.allizom.org/curation/

Create a design brief for chatspaces

I want to get more clarity on what chatspaces is all about so I can design an experience that really matches the purpose and personality of the product. I started a design brief for that we can all collaborate on. I started filling in some information but please edit and comment like crazy.

https://docs.google.com/a/mozilla.com/document/d/1gAjrEGs9Vbgphab_ZkyK_Z32ClqW5hLcxCOWqyv4xIE/edit

How to show unsent messages [ux]

The world is an imperfect place. Sometimes you send a message and it can't be delivered to its recipient. How can we let users know, view, and resend their outgoing messages that were left behind by a cruel and indifferent world?

Make first new message screen have the video prompt

for @b3n0n

similar to the second screen in this sketch #6 (comment)

also add the 'cancel' and 'next' buttons... cancel goes back to the dashboard and next goes to the next screen.. but 'next' will be your upcoming pr so leave it going nowhere for now.

fix notifications behaviour

Remove gravatar, take a pic instead

How to paginate older messages? Would prefer to not have infinite scroll

Add appcache manifest

Add an appcache manifest for all assets (presumably, however they look in production), so users can download the app to their phone and not have to make requests for all the assets.

Add avatar style for trapezoid

Need the default, then the reverse for every other, and possibly a class for every other so that I can specifically call it.

Move login to landing page only

Change new message interface from overlay to regular page

Try dithering on gifs

Layout of new message form in terms of video focus, message, recipients, error message

Add more recipients to an existing convo

Refactor user functions to user.js

Probably does need a reply/reply all in the user message feed

Multiple recipient view is broken

How to list search result users in multiple layouts

On a pre-exiting thread I should not have to specify a recipient. It should send the message to the recipient(s) already attached to the thread.

Since I sent the first message on the thread to ednapiranha, it should go ahead and send my next message in the thread to her--I shouldn't need to specify her as the recipient.

Replying to a thread [ux]

Here's a flow for a quick reply to a thread.

1. Meatbro is on "Threads" screen and selects a thread by clicking on it.
2. Meatbro views entire thread. At the top of the thread is his last gif, a text area to input some pithy text and a "Send" link. If meatbro wants a new gif he can click the icon/link to open up video app. At the bottom in a small toolbar Meatbro can see all his friends in the chat.
3. Meatbro is happy with his existing gif so he writes a quick message and clicks "Send."
4. Meatbro's message is added at the top of the list. The reply field is cleared and ready for more of his amazing witticisms.

Fallback or support taking regular pictures with camera

The message control

this control should open the new message tile thingy, still trying to figure out how this nav is working, some pointers?

Add Drafts stub

Ensure first-run experience is smooth

Right now, you log in with persona, then it asks you to set a username, then nothing.

The first-run experience should take you through the process smoothly all the way to adding friends and sending your first message.

Show capture progress

when taking a pic

Store messages offline .. sending is a flag to determine whether it has been delivered or not

including @sole in this convo .. localForage maybe?

camera stays on after sending message

After sending a message with a gif, and moving away to other parts of the app, the green light on my camera stayed on. I want privacy!!

Remove blocking functionality

Save last gif

On an existing thread I should be able to send a message without creating a new gif

On a thread where I have already uploaded an image, it should let me send another message without attaching a new gif. If I don't attach a new gif or image it should use the gif or image I last uploaded to the thread.

Logged out state doesn't render the correct template sometimes

Add webapp manifest for Firefox OS

There is no webapp manifest in the public folder, but the app should have one so it's installable on Firefox OS and the simulator, even if only for testing.

Make GIF prompt jump to a new view where the GIF takes up the screen

@b3n0n

In the third screen, you see that clicking on the GIFCam button should move to a view that is only the video stream and a button to record.

1. Make sure the video is a fixed 4:3 ratio... 320 x 240 in this case - and centered :)
2. Once the record button is clicked (don't worry about a progress bar or anything), it should do the 2 second record and pass the data to the form as it does now.
3. The gif should display beside the message as a preview in <img>

Test out switching web workers w/ asm

alphabetize friend list in dashboard

Update README with more details about project

Implement SimplePush support

Test cases of messaging bugs with caching / sockets

• sending a message to user A from user B while logged out, log back in
• sending a message to user A from user B while logged in and on the dashboard (no duplicates)
• sending a message to user A from user B while logged in and on the same thread

Don't include profile pic of the user on the thread. Include the profile pic of the person(s) I sent the message to.

I don't need to see my own photo on the thread. I do want to see the profile pic of the person I sent the message to. So for this thread I shouldn't see my pic but ednapiranha's profile pic.