I'm building a video application for the web in React using OpenTok. OpenTok has built in buttons for muting the mic for the publisher and muting the audio for subscribers. In my case I also need buttons to mute the video for both the publisher and the subscriber.
I haven't seen anything about a mute video button in the documentation so I built the functionality myself using subscribeToVideo. The problem is that I want to add a button with this functionality next to the mute audio button, but I haven't found anything about custom buttons in the documentation.
So my question is: What's the best way to add custom buttons to OpenToks bar?
Of course I could append a button to the html and style it in place myself, but it feels ugly and I don't know what the consequences are. I guess this is my back up solution if there isn't any other way.
I will probably need to add other buttons as well in the future so I really hope OpenTok supports custom buttons and that it's just me that haven't found how to do it.
TokBox Developer Evangelist here.
We don't have any documentation on custom buttons, but you do have three options for the video and mute buttons on the video element.
If you want a custom button, you will have to append that to the HTML and toggle subscribeToVideo and subscribeToAudio properties like you said.
Here is a react sample that adds a mute video button https://opentok.github.io/opentok-web-samples/React-Basic-Video-Chat/
I would recommend that you just set the buttonDisplayMode to off and then recreate the mute audio button just using subscriber.subscribeToAudio() and publisher.publishAudio(). This way if eg. the opentok UI changes slightly it doesn't matter for you, plus you can make it all look however you want.
Related
I'm using reactJs to develop the frontend, is it possible to make annotations on graphs created by echart? For example, I can left-click anywhere on a line chart to make a quick note of that point or I can a range on a graph and make a note of that range.
If I understand you correctly, you want to build an interface that allows users to left-click somewhere on the chart and add their own annotations (rather simply coding in annotations as a developer, and having them be static)?
In broad strokes, here's how I would build this:
Register click event handlers on the chart, so you can detect where the user clicked.
Build custom UI in react that can overlay on the chart, provide text input and "add"/"cancel" buttons, using the information from the click event to figure out where to draw it and to what element the annotation should be attached to.
When the user clicks "add", make a call to the showTip API (see docs) to a tooltip in the right location (from step 1) with the text the user provided.
(It looks like there is a github issue where folks are asking for this feature to be built-in - and some discussion of how to build it yourself, and a simple example that illustrates how to do step 3 above which you might find useful)
Is there an angular material component to show a list of current items in progress or those completed just like when you perform download below? Or need to create my own?
I'm not asking about the progressLinear itself, I know that. What I'm asking is a component that will group all current tasks in progress and completed tasks in a dialog where you can see a cancel button, show all processes, just like when you are downloading.
There are no components that I am aware of that have the exact behavior you are looking for. Other than the native browser support for downloads (which is not what you want). I think it would be really easy to create a reusable component to achieve what you are looking for. A directive that can track a list of tasks and callback to the appropriate cancel function on a button click.
There are several progress bars you could use. If you want angular-material... https://material.angularjs.org/latest/demo/progressLinear
Bootstrap has some options as well...
https://angular-ui.github.io/bootstrap/
Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.
I am working on codenameone, and trying to make the first UI.
A basic UI with a title and two buttons on two sides of the "title" to go to two different pages.
I was trying to do that with "Form" component but then it only gives one button by default, which is just taking me to the previous screen.
Not sure how to do this, any link or tip is a nice help.
thanks
Use addCommand(new Command("X")) or in the GUI builder just click the commands property in the form. It will automatically use the menu for Android.
The back button is added automatically for iOS apps for back navigation which you will probably need. You can disable it in the state machine code and have room for two commands in the title.
I know you can use iconUrl to customize icon for custom menu items but is there a way to access built-in icons such as checkbox that you see during confirmation for REPLY?
No. There's currently no way override this part of the interface, but it is something that could potentially be added to the API.
You may want to file an enhancement request in the Glass API issue tracker. IF you do, please include your intended use case.