volume/gain knob in UI

[max-mapper]

now that I added audio chat, we should have a way to control audio gain. Not sure the cleanest way to add it to the UI now though, suggestions welcome. This can be implemented using the WebAudio API Gain Control Nodes. There are probably other interesting controls/effects we can surface as well

[jsimplicio]

I can hop on this if you can somewhat explain it a bit more detailed it to me pretty please?
@maxogden

[max-mapper]

Sure, when you're screen sharing with someone you see their desktop, but now the app automatically hooks up voice chat between both people too.

Theres no UI for it currently, it just kind of automagically happens in the background. It would be nice to have a mute toggle and a volume slider.

To implement them, there is an <audio> tag that gets created when the screensharing is connected: https://github.com/maxogden/screencat/blob/bbde6e65ba960a34751f36eeb1ed4dc7ad6d3295/peer.js#L273. The <audio> tag has a .volume property that can be set to 0 for silent or 1 for full loudness, or anywhere between 0 and 1 for a specific volume level.

One option for the volume level might be to use a range input to set the .volume property of the audio element: http://www.html5tutorial.info/html5-range.php

I would probably add in some code here that creates new audio control html elements and inserts them into the right place in the UI: https://github.com/maxogden/screencat/blob/master/connect.js#L85

You would also need to hook up some events using javascript to make the audio controls affect the values on the <audio> element, like this http://jsfiddle.net/brettdewoody/6A86j/

[jsimplicio]

@maxogden Should the audio controls be on the stream screen? I think that would make more sense as opposed to having to click on the screencat logo in the menu bar?

[jsimplicio]

@maxogden http://codepen.io/anon/pen/ZbdQXN been playin'

[max-mapper]

@jsimplicio that looks pretty sweet! not sure about best placement. if its on the stream screen it would mean the window would have to scroll, or have a top/bottom bar in addition to the remote screen. we could alternatively make the volume control float above the remote screen but that might obscure stuff underneath, but that might not be that big of an issue.

on the other hand, i think it might be okay to put it in the menubar popup menu because I have a feeling it will be infrequently accessed

[jsimplicio]

@maxogden It does make sense that the volume will be accessed not so frequently. If we put it in the menubar menu though we got to share space with the "you are now viewing a screen. stop. show." etc.

Maybe you're greeted with "You are now viewing a screen"
and underneath there are well defined options you can take: stop, show, volume.

I gotta do some mockups and figure out how to make this look good.

[jsimplicio]

@maxogden sup, max. How about something sort of like this? How are you envisioning it?

[max-mapper]

@jsimplicio yea that looks awesome, though the placement feels a little awkward. maybe it should go above the buttons?

[jsimplicio]

@maxogden What about a little menu like this? Or is this a bad idea / not doable?

[max-mapper]

whoa super good!!

On Thu, Dec 10, 2015 at 3:07 PM, Julia notifications@github.com wrote:

@maxogden https://github.com/maxogden What about a little menu like
this? Or is this a bad idea / not doable?
[image: screen shot 2015-12-10 at 5 07 05 pm]
https://cloud.githubusercontent.com/assets/7318958/11731385/827a9f9a-9f60-11e5-921b-107fbff30e19.png

—
Reply to this email directly or view it on GitHub
#19 (comment).

[jsimplicio]

@maxogden Thanks! Is this something doable? To perhaps shrink the menu to that size like a more square-y shaped long list of actions? Actually that makes me rethink the size of the menu bar drop down. Did you particularly choose a rectangle that size and that type of layout for a reason?

[max-mapper]

no we can totally shrink the window size, its totally arbitrary right now. I was actually wondering if a different window shape would make #37 (comment) look better today, but i'm not sure how I would change it

[jsimplicio]

@maxogden That comment could totally fit in a small long square if it has like a fixed area where you can scroll down and keep seeing new images of screen? Sort of like an iPhone.

Here's how some of the app would look that size (working on it rn):

[max-mapper]

@jsimplicio I think that looks pretty awesome. Now that I think about it I think the previous window dimensions were there because i used to put the remote desktop inside the same window, but now I do the separate popup window. So I think the smaller size makes a lot of sense

[jsimplicio]

I'm changing things to that dimension so we can see how it goes. I'm getting this error when I run npm start and have no idea what's wrong:

Julias-MBP:screencat juliasimplicio$ npm start

screencat@4.2.0 start /Users/juliasimplicio/Documents/screencat
electron electron.js

fs.js:500
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT, no such file or directory '/Users/juliasimplicio/Documents/screencat/node_modules/electron-prebuilt/path.txt'
at Error (native)
at Object.fs.openSync (fs.js:500:18)
at Object.fs.readFileSync (fs.js:352:15)
at Object. (/Users/juliasimplicio/Documents/screencat/node_modules/electron-prebuilt/index.js:4:21)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

npm ERR! Darwin 15.0.0
npm ERR! argv "node" "/usr/local/bin/npm" "start"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code ELIFECYCLE
npm ERR! screencat@4.2.0 start: electron electron.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the screencat@4.2.0 start script 'electron electron.js'.
npm ERR! This is most likely a problem with the screencat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! electron electron.js
npm ERR! You can get their info via:
npm ERR! npm owner ls screencat
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/juliasimplicio/Documents/screencat/npm-debug.log

[max-mapper]

@jsimplicio hmm, try deleting the node_modules folder, then doing npm install again.

[jsimplicio]

@maxogden That worked 👍 . Also right now if you click on share your window and click to go back, that view still stays open:

[max-mapper]

ah crap

On Wed, Dec 16, 2015 at 2:35 PM, Julia notifications@github.com wrote:

@maxogden https://github.com/maxogden That worked [image: 👍] . Also
right now if you click on share your window and click to go back, that view
still stays open:
[image: screen shot 2015-12-16 at 4 12 37 pm]
https://cloud.githubusercontent.com/assets/7318958/11855444/ebb5d3f4-a40f-11e5-976b-03da7bebf5e6.png

—
Reply to this email directly or view it on GitHub
#19 (comment).

[max-mapper]

just fixed o/ in latest commit

[jsimplicio]

@maxogden So I added the little volume in the UI but I'm not too good at javascript. Anyway you can link the stuff you explained to me to the UI? Otherwise I can try to hack around but trust me I don't wanna ruin any code haha

[max-mapper]

Yes but I am going on a trip tonight and wont be back till Friday so it
might be a little bit

On Mon, Jan 11, 2016 at 11:28 AM, Julia notifications@github.com wrote:

@maxogden https://github.com/maxogden So I added the little volume in
the UI but I'm not too good at javascript. Anyway you can link the stuff
you explained to me to the UI? Otherwise I can try to hack around but trust
me I don't wanna ruin any code haha

[image: screencat-7]
https://cloud.githubusercontent.com/assets/7318958/12244021/2ce4f5ce-b867-11e5-8e16-75e69404c218.png

—
Reply to this email directly or view it on GitHub
#19 (comment).

[jsimplicio]

@maxogden it's no worries whenever you have the time! Just thought I'd ask you