I'm using the Ext.device.Camera component to take photos in my sencha touch app. I'd like to change some things of this component:
Change the text of the buttons retake and use
Add a button to show the camera roll (The camera roll view is ready, so the button will only change the view)
After the call at success function I would like that the camera won't close and it gives the possibility to the user to take another photo
Thanks
You cant do that from ST2. That's native stuff, if you are wrapping with phonegap/cordova you could create a custom plugin.
Related
My use case: I have an image that is the preview of a video. When the user tap the preview, the video should starts a fullscreen playback (I suppose in another Form). When the video ends or when the user tap the video during the playback, the previous Form should be shown. This is the same use case of the question: Codename One landscape oriented Form in a portrait locked app
My question: the MediaPlayer class doesn't seem to expose a method to perform a custom action when pressing the video or when the video ends, like requested by this use case. The MediaPlayer is a peer component, so I'm not sure if trying to use a button as a leader component can make sense to do an action after a tap. Any idea?
Unfortunately media is pretty complicated in that sense. You can either rely on the behavior of the media player natively which handles orientation change, playback etc. seamlessly (seek etc.). Or you can implement everything on your own in a media object in which case you can use native peer overlay and have a transparent component on top of the media view which will grab all the clicks.
The former will provide a more native UX and will auto-rotate the UI but we don't have control since there's no Form underlying the UI. It's shown when you invoke setNativePlayerMode(true). When you tap the video in this case it pauses. To exit playback you would use device native keys e.g. back or a done button and would be returned to the parent Form. Notice that since this is native behavior it acts differently on the device and it's important to do device testing here.
Your alternative is to place a media component in the center of the screen and then you can override everything and customize everything. You can place a layered layout on top and grab all tap events. You will need to add your own progress, play, pause etc. UI elements. The user would need to physically rotate the device as orientation won't switch on its own (for the most part).
When setting up React VR you get a bundle with already customized full screen button and a button for straightening up camera, which has no name and no customization options:
I have changed the camera rotation principle in client.js and now the button is not working correctly.
How is that button called?
Is there an API for it to customize it?
Is there a way to disable it?
This is kind of a hack but...
That is injected once the app inits and at this time I know of no API to customize it but the good news is it is DOM. You could add some CSS to your page to disable it or restyle it (assuming you have no other SVGs on your page).
svg {
display: none
}
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.
Instagram has a really cool interaction where you can tap-and-hold, aka longPress, on an image and an interactive pop-up appears. Once it appears you can drag your finger to one of the action buttons and removing your finger applies the action and closes the pop-up.
Here it is in action.
And here's a link to a video if you need a closer look.
In my app I've got the tap-and-hold popup working, but the finger drag continues to control the underlying View.
How do you get the finger interaction to transfer to the pop-up?
How do you get the buttons responding to finger drag-over?
This is something you can achieve with PanResponder. Using Pan Responder you are basically creating your own touchable components. Click here for the docs.
Also, you would need the Animated API for animating the transitions.
I am creating a simple app with the ionic framework, and I want to run a function on each of the swipe events or drag events.
like this :
When user swipe up/drag up arrow, it will open it ( like open notifications smarthphone ).
swipe down or drag down, it will close it.
Can anyone help provide sample HTML & JS to listen to gesture event?
Regarding gesture events handlers you can check the Ionic docs, for example:
http://ionicframework.com/docs/api/directive/onDragUp/
AFAIK no official component fits with your requirement (the most similar is ionSlides but works horizontally). However there are some 3rd party directives or demos like the following you may adapt to your needs:
https://github.com/bramus/ion-drawer-vertical
https://github.com/darylrowland/ionic-contrib-swipe-cards
http://www.idangero.us/swiper/demos/#.VrxDjfnhC71