I have a simple tabbed app where the user can click a button and then a view will load in the active tab where a picture is displayed and a sound is being played.
However if the user tabs on the back button the sound doesn't stop playing.
How can I make the sound stop when I go to the previous view?
Thanks in advance!
My index.js:
function viewSelectedItem() {
var args = { image : 'images/photo/farm/chicken1.jpg', title : 'kip' };
var win = Alloy.createController('viewItem', args).getView();
Alloy.Globals.tabgroup.activeTab.open(win);
}
my viewItem.js
var args = arguments[0] || {};
$.itemImage.image = args.image;
$.itemTextLabel.text = args.title;
var sound = Ti.Media.createSound({
url: 'sounds/farm/chicken1.mp3'
});
sound.play();
I assume you target Android with this and that each Alloy Controller represents a Window.
You need to set allowBackground to true to allow the audio to continue when the Activity the Window belongs to is stopped because the Window closed.
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Media.AudioPlayer-property-allowBackground
I fixed it like this:
$.itemView.addEventListener('close', windowClosed);
function windowClosed() {
sound.stop();
}
Related
I'm looking to add an active state to a systemButton in the header bar of an iOS app using Appcelerator Titanium.
I want to achieve the same result as the the Calendar with the list view activated in iOS8. As you can see the below the list icon has an active state, whereby it has an orange background.
Is there a way to achieve this using iOS System Buttons in the header of an app?
Thanks, Owen
You must manually keep track of the states of the button for a Toggle effect. This does not work with a systemButton.
example:
var button = Ti.UI.createButton({ title: 'Off', isOn: false });
button.addEventListener('click', function(e) {
if (e.source.isOn) {
e.source.title = 'Off';
e.source.isOn = false;
} else {
e.source.title = 'On';
e.source.isOn = true;
}
});
I would like to show the big play button at the end of the video, so user can replay it easily.
It seems that this big play button is shown by default (every posts I read are for hidding it instead of showing it...), but it is not the case for me...
I have tried to edit the following function (in video.dev.js file) but nothing has changed :
vjs.Player.prototype.onEnded = function(){
if (this.options_['loop']) {
this.currentTime(0);
this.play();
}
else { // I am not using loop mode
this.bigPlayButton.show();
this.pause();
}
};
Thanks for your responses.
There are a few ways you can do this. You can show the button when the video ends with the API:
videojs("myPlayer").ready(function(){
var myPlayer = this;
myPlayer.on("ended", function(){
myPlayer.bigPlayButton.show();
});
});
Or if you do want to modify video.dev.js you just need to uncomment the line that does the same thing:
vjs.BigPlayButton = vjs.Button.extend({
/** #constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
if (!player.controls()) {
this.hide();
}
player.on('play', vjs.bind(this, this.hide));
// player.on('ended', vjs.bind(this, this.show)); // uncomment this
}
});
Or with CSS you could force the button to be showed whenever the video is not playing (ended or paused):
.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {display:block !important;}
The posts you've seen about hiding it probably refer to version 3 of video.js, as with that the play button was shown at the end.
Place this code after the videojs code. Works great. It not only shows the poster and the big play button, but also allows you to re-play the video again and again:
<script type="text/javascript">
var vid = videojs("YOUR-VIDEO-ID");
vid.on("ended", function()
{
vid.posterImage.show(); //shows your poster image//
vid.currentTime(0);
vid.controlBar.hide(); //hides your controls//
vid.bigPlayButton.show(); //shows your play button//
vid.cancelFullScreen(); //cancels your fullscreen//
document.mozCancelFullScreen(); //cancels your fullscreen in firefox//
});
vid.on("play", function() //function to play the video again//
{
vid.posterImage.hide(); //hides your poster//
vid.controlBar.show(); //shows your controls//
vid.bigPlayButton.hide(); //hides your play button//
});
</script>
The only thing I can't get to work is the exit fullscreen with firefox... But I don't know what else to do.
I don't know why but I cant get the answers mentioned here to work, maybe it's because I am on a newer version of the player, so doing things like vid.posterImage.show() is not doing anything for me.
On version 5.19.2 (current release), I was able to reset the player to it's default state (before the play button is pressed by the first time) by setting hasStarted to false on the event listener "ended".
example:
var player = videojs('player');
player.on("ended",function(){
player.hasStarted(false);
});
That brings back the big button, the poster, and hides the controls.
I created this plugin to "reset" the player and show the big play button and the video's poster
https://github.com/brianpkelley/video-js-4-plugins/blob/master/showPosterAtEnd/videojs.showPosterAtEnd.js
I am using swanify's Titanium Navigation Controller https://github.com/swanify/Titanium-Navigation-Controller for my app deployed in Android device.
i am trying to pass data that i have selected from a table row here back to the previous page and populate a text field there.
Anyone has any ideas how to do it? i am looking into using events but it doesnt seem to be working for me.
thank you. :)
Here is what I have done in this situation, It makes use of the eventing aspects of JavaScript and Titanium, the general principle is to have your own custom events, fire them on a control, and listen elsewhere.
First lets say we have a file named NextWindow.js that is a CommonJS module encapsulating a window and a tableview, everytime the a row is clicked we capture that event, then fire our own custom event on the window:
function NextWindow() {
var self = Ti.UI.createWindow();
var tableView = Ti.UI.createTableView();
// Other initialization
....
....
tableView.addEventListener('click', function(e) {
// You may have to use e.rowData.title depending on how you created the table view
var rowTitle = e.row.title;
// Now fire a custom event on the window whenever a row is selected
// send the title through as data
self.fireEvent('table_row_selected', {title : rowTitle});
});
return self;
}
module.exports = NextWindow;
When you create a NextWindow to push onto the navigation stack, add a listener for a custom event to it, this is inside of the previous window with the text box:
var NextWindow = require('NextWindow');
var nextWindow = new NextWindow();
nextWindow.addEventListener('table_row_selected', function(e) {
// Do what you want here with the passed back data
var title = e.title;
some_label.text = title;
});
// Open the next window on the NavigationController stack
nav.open(nextWindow);
Now were listening for a custom event attached to the nextWindow. Say you have a TableView in your nextWindow, listen for the TableView click, and fire the custom event:
i am trying to make the same app with the miamicode, i am at step 3
http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-3/
i try to make the button that goes to new note (switch to a new screen and create a new note)
the code at the example is this:
onNewNoteCommand: function () {
console.log("onNewNoteCommand");
var now = new Date();
var noteId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();
var newNote = Ext.create("NotesApp.model.Note", {
id: noteId,
dateCreated: now,
title: "",
narrative: ""
});
this.activateNoteEditor(newNote);
}
the activateNotesList function is this :
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
on my own example i try just to go the editview without passing data.
so i try this:
onNewNoteCommand:function()
{
var noteEditor = this.getNoteEditor();
// Ext.Viewport.add(noteEditor); also tried this.
Ext.Viewport.setActiveItem(noteEditor);
that code runs with no errors but the screen doesn't change.
any suggestion? whats the difference on add ?
how do i set the viewport (haven't created any custom viewport) to card? is this the problem that setactiveitem doesn't work? any other way to switch between views?
Are there some errors in google chrome browser's console? Ctrl+Shift+J to open.
Also you have to check if noteEditor equals Object or Number.
From sencha docs: setActiveItem( Object/Number activeItem )
I have following flow of app :
First screen is Login screen and if Login gets success the tab-group opens.
here is code :
app.js
var win = Titanium.UI.createWindow
({
title:'User Login',
url:'Login.js',
tabBarHidden:true,
backgroundColor:'gray',
navBarHidden:false
});
win.open();
Login.js
var win = Ti.UI.currentWindow;
// some UI controls
loginBtn.addEventListener('click', function(e)
{
//calling web service
if(isSuccess == 1)
{
var tabGroup = Titanium.UI.createTabGroup();
// code to create Tab
tabGroup.open();
}
}
Now if I hide the currentWindow (win) every thing works fine But Login view is get displayed in background of all the time !!! So I want to close Login window and then open the tab group. So I tried :
win.close();
tabGroup.open();
But doesn't work application gets crashed.
So, How to close window and then display the tab Group ???
Thanks....
Solved !!! As slash197 has suggested in Login.js I was trying to close win which was the root window. So I used a dummy window inside the Login.js and close it and the open tabGroup . Like :
Login.js
var win = Ti.UI.currentWindow;
var loginView = Ti.UI.createWindow
({
backgroundColor:'transparent'
});
And added all the UI component into the loginView instead of win.
Then for Android
loginView.open();
And for iPhone
loginView.open();
win.add(loginView);
After success :-
loginBtn.addEventListener('click', function(e)
{
//calling web service
if(isSuccess == 1)
{
var tabGroup = Titanium.UI.createTabGroup();
// code to create Tab
//for Android
loginView.close();
//for iPhone
win.remove(loginView);
tabGroup.open();
}
}
Note:- Not sure that it is best approach. But it works for me.
If that window is the first than it's the root element and can't be closed. You could try removing all of it's children and set it's background to transparent then open your tabGroup.