jsfiddle / togetherjs Goto Github PK

User can drag the dock around on the page

make the input box longer http://cl.ly/image/0H3q3o1w123G

When the cursor is over the chat box, or there is an indication that the cursor is off screen, it should disappear. Also when the tab is not visible or the cursor has not been moved for a while, it should be hidden.

The client code is largely static, and could be hosted on gh-pages or elsewhere (using a hub in another location). We should have a build script that creates those static pages.

As input the build script should take the address where the files will be uploaded (baseUrl), and a location for the hub server. It would do the necessary substitutions of code in app/http/views/towtruck/, compile towtruck.less, and copy other files.

A shell script might be good enough.

The "Call TowTruck" btn should turn to an "on" state after the user has clicked it. It should then allow the user to click the "End TowTruck" btn (which replaces the "Call TowTruck" btn) to stop the session.
http://cl.ly/image/0J0W1v3d0c3o

I think when the video placeholder was added, chat scolling regressed – you can no longer scroll to previous places

There isn't a lot of information right now when someone leaves or returns to the session. We should track that.

I imagine avatar images being dimmed when the person is gone, and maybe a message (that is removed on return).

We'd probably rely on both a "bye" message (as is already being sent) and a ping. An online-but-not-looking state would also be useful, using the visibility API

Need to fix the pulse click so it looks better/right

I think we may need to namespace require.js to avoid conflicts with require.js-using applications. This already is an issue with FriendlyCode/Thimble. You can't have multiple baseUrls, which means our baseUrl conflicts with FriendlyCode's.

There are require.js build processes that can namespace require()/etc, but I think we want this even in development.

The functionality is no longer working and not as necessary

When you first start TowTruck (not from a reload) it should show the info screen instead of the chat screen.

when user moves the window in Chrome, it creates a bunch of extra lines

TowTruck should be somewhat configurable by sites. No configuration should be necessary, but it should be possible to override hubUrl, maybe indicate other hooks, etc.

I imagine something like require.js (after #10 is implemented), where you could either do:

TowTruck.config({
  hubUrl: "something else"
});
// or like require.js, if TowTruck hasn't been loaded:
TwoTruck = {
  hubUrl: "something else"
});

this screen is messed up currently

There's lots of places where promises would be useful in the codebase, we should switch to using jQuery's Deferred for these. The "ui-ready" event is a specific example.

Probably TowTruck – would replace startTowTruck, and some public interfaces would live under it. For #9 we'd probably use TowTruck.require() and TowTruck.define()

When dragging the window it often feels like it is hard to grab onto, and the dragging stops unexpectedly. (Do we want the chat window to be forced on the screen, or keep the ability to drag it off screen?)

need to fix the styles in the chat UI http://cl.ly/image/0w1v211z1T09

Currently changes are applied fairly naively in forms.js, with no accounting for out-of-order updates. Applying OT would basically mean that out of order updates would be handled correctly.

The class would allow apps to customize appearance simply based on TowTruck. There would be a master/client specific class and a generic class.

when user rolls over avatar in Profile window, there should be text that says "Change picture" and if the user clicks that, they can change their profile picture

let's animate this, and make it look better

To track URL changes that don't come from page loads using window.history, we should track history events too.

No idea what if anything we should do about location.hash changes.

this should be a minimize btn, not a square http://cl.ly/image/2T3l2X0C1x3v

when a user is talking, the microphone will animate

the "v" button should actually be where the "camera" icon is. Because it turns on the video. http://cl.ly/image/3v1Q3a410n0D

Everyone should have an avatar, the default avatar isn't useful at all. Maybe we can use some kind of monster face generator.

An example: http://timpietrusky.github.com/alien-avatar-generator/

The hub should be able to react to a bad client version with a service message, or notify of other issues (e.g., a hub that is going away soon). This message would trigger a popup on the client.

User can leave stickies on the wall to document work.

User can collapse the dock, and it animates to close

fix the mouse image, so it's smaller and looks better

This button pops the window out of the browser window, into a new window. http://cl.ly/image/181j2F3Q1y34

The bottom dock UI is messed up

UI for when cursor is:

• off the window
• scrolled down the page
• over the towtruck window

Make the UI look better, it's still off

It should respond with HTTP 200 when everything it A-ok.

The chat box should be able to minimize. It would become a small box. It should show the chat icon, and with #16 it should show an indicator if any new chat messages come in.

This would be a tab alongside chat and info. It would list all users. It would show users that were offline (but had been online), idle, and active. It might show settings about individual users – e.g., to suppress a user's clicks.

(Alternate UX approaches might also be appropriate.)

The screen for video calling should be disabled if RTC is not supported. (So long as the functionality is not implemented, it would be hidden for now.)

Should it just go, or should there be a placeholder?

The current default avatar is fairly clearly male; something a bit more neutral would be nice.

Can we animate the arrow, to pulse down when the user's arrow is down the page?

If you aren't on the chat tag (e.g., on the "i" info tab) and a chat message comes in, the icon should indicate that there's a new message. Maybe with a number overlay.

the window should be resizable, if the cursor goes to the lower right corner of the window

when name is in input field, checkbox should be green

A user can select the highlighter tool and draw a rectangle with it. When in highlight mode, all click events should be swallowed .

Here's a good example of the drawing mode:

https://vimeo.com/7064475#t=0m37s

All users should be able to see the same result. A click on the highlight should see it animate away. (A faster version of this) http://docs.jquery.com/UI/Effects/Puff

The "Call TowTruck" btn should just be a generic so the site it's on can just style it however they want. http://cl.ly/image/0J0W1v3d0c3o

the active states for the "i" and camera/video icon are not working. when the user is in that window, the color should signify active

The client should notify the hub server of its version – where the code is located, and maybe a checkout or tag or something (that would be embedded in towtruck.js)