jPlayer Multiple Stream Instances - jplayer

I need to use multiple stream instances with jPlayer using this player. By default it didn't so I tried to make several changes but still can't get it work. First player works but it plays all the other streams together and the second player can't be triggered at all. Any idea? My code is as follows:
SCRIPT
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
var stream = {
title: "ABC Jazz",
mp3: "http://listen.radionomy.com/abc-jazz"
},
ready = false;
jQuery("#jquery_jplayer_11").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
var stream2 = {
title: "Second",
mp3: "http://stream.x-x-x-x.com:1234/stream"
},
ready = false;
jQuery("#jquery_jplayer_12").jPlayer({
ready: function (event) {
ready = true;
jQuery(this).jPlayer("setMedia", stream2);
},
pause: function() {
jQuery(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
jQuery(this).jPlayer("setMedia", stream2).jPlayer("play");
}
},
swfPath: "js",
supplied: "mp3",
preload: "none",
wmode: "window",
keyEnabled: true
});
});
//]]>
</script>
HTML
<div id="jquery_jplayer_11" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jquery_jplayer_12" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="none"></audio>
</div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li">play</li>
<li class="pp-li">pause</li>
<li class="mu-li">mute</li>
<li class="mu-li">unmute</li>
<li class="vo-li">max volume</li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>
<div id="jp_container_2" class="jp-audio-stream">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="pp-li">play</li>
<li class="pp-li">pause</li>
<li class="mu-li">mute</li>
<li class="mu-li">unmute</li>
<li class="vo-li">max volume</li>
</ul>
<div class="jp-volume-bar" style="">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
</div>
</div>

set
cssSelectorAncestor: "#jp_container_2"
cssSelectorAncestor: "#jp_container_1"
like this for all players and after the playlist options (that means at the bottom of the code )
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});
put like this for all-players then it will works , if not means put all the codes here then I will correct the errors

Related

Customising stripe elements javascript generated forms

According to the docs and code i have looked at, this is how forms are created to add card or accept cards
var style = {
base: {
fontSize: "16px",
color: "#32325d",
fontFamily:
"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif",
fontSmoothing: "antialiased",
"::placeholder": {
color: "rgba(0,0,0,0.4)"
}
}
};
var card = elements.create("card", { style: style });
card.mount("#card-element");
this is according to the docs https://stripe.com/docs/stripe-js and the code example given https://github.com/stripe-samples/saving-card-without-payment/blob/master/client/script.js
How can i format the new forms so that i have the email,card holder name, card number,expiration and cvv on a different line?
I am using twitter bootstrap. Also how can i leave out the postal code part?
I just recently figured this out for a project I am working on and it was more challenging than I was expecting. The example below is creating a payment method for a metered billing scenario. The hardest thing for me to comprehend during the learning process was in the createPaymentMethod you will notice that it is only passed the cardNumber element and then the stripe library figures out the other elements automatically.
HTML:
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div id="card-number" style="border:2px solid gray;"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div id="card-exp" style="border:2px solid gray;"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<div id="card-cvc" style="border:2px solid gray;"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<button id="submit-button" type="button">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay</span>
</button>
</div>
</div>
Javascript:
$(document).ready(function () {
// Create a Stripe client
var stripe = Stripe('YOUR KEY');
// Create an instance of Elements
var elements = stripe.elements({
locale: 'auto'
});
let displayError = document.getElementById('card-error');
var style = {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4"
}
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a"
}
};
var cardNumber = elements.create("cardNumber", { style: style });
cardNumber.mount("#card-number");
var cardExp = elements.create("cardExpiry", { style: style });
cardExp.mount("#card-exp");
var cardCvc = elements.create("cardCvc", { style: style });
cardCvc.mount("#card-cvc");
cardNumber.on('change', showCardError);
cardExp.on('change', showCardError);
cardCvc.on('change', showCardError);
function showCardError(event) {
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
}
$("#submit-button").on("click", function () {
createPaymentMethod(cardNumber, 'CUSTOMER ID', 'PRODUCT ID');
});
function createPaymentMethod(cardElement, customerId, priceId) {
return stripe
.createPaymentMethod({
type: 'card',
card: cardElement,
billing_details: {
name: $('#cc-name').val()
}
})
.then((result) => {
if (result.error) {
displayError.textContent = result.error;
} else {
console.log('SUCCESS');
console.log(result);
}
});
}
});

How to switch between indexes on fetched data in ejs?

I have sent object array to the front end and I would like it to switch the displayed data between indexes 0 and 1 (uniTimes[0]<->uniTimes[1]), every 5 minutes or so. How can I make this happen, is it only possible by using external frameworks like React/Angular?
**//Array**
var uniTimes = [
{
lectures: [
{
title: "Information System Security",
classroom: "503a.",
start: "1995-12-17T08:00:00",
end: "1995-12-17T09:15:00"
},
{
title: "Project Management",
classroom: "117a.",
start: "1995-12-17T08:30:00",
end: "1995-12-17T09:30:00"
},
{
title: "Audiovisual Art",
classroom: "228a.",
start: "1995-12-17T09:45:00",
end: "1995-12-17T12:00:00"
}
]
},
{
labs: [
{
title: "Graphic Design",
classroom: "505a.",
start: "1995-12-17T09:15:00",
end: "1995-12-17T10:15:00"
},
{
title: "Special Effects",
classroom: "228a.",
start: "1995-12-17T11:30:00",
end: "1995-12-17T12:00:00"
},
{
title: "Robotics",
classroom: "513a.",
start: "1995-12-17T08:45:00",
end: "1995-12-17T09:30:00"
}
]
}
]
**//Render code**
res.render('index', { uniTimes: uniTimes});
**//EJS Code**
<% for(var i = 0; i < uniTimes[0].lectures.length; i++) { %>
<div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
<h3><%= uniTimes[0].lectures[i].title %></h3>
<h3><%= uniTimes[0].lectures[i].classroom %></h3>
<h3><%= uniTimes[0].lectures[i].start %></h3>
<h3><%= uniTimes[0].lectures[i].end %></h3>
</div>
<% } %>
If you want just to toggle visibility between labs and lectures, you can do this with vanilla javascript. No Angular or React is required. Use setInterval()
Create 2 div for each entry and toggle their visibility.
<div id="lectures">
<% for(var i = 0; i < uniTimes[0].lectures.length; i++) { %>
<div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
<h3><%= uniTimes[0].lectures[i].title %></h3>
<h3><%= uniTimes[0].lectures[i].classroom %></h3>
<h3><%= uniTimes[0].lectures[i].start %></h3>
<h3><%= uniTimes[0].lectures[i].end %></h3>
</div>
<% } %>
</div>
<div id="labs" style="display:none">
<% for(var i = 0; i < uniTimes[0].labs.length; i++) { %>
<div style="float:left; width: 150px; margin-right: 25px; background-color: red;">
<h3><%= uniTimes[0].labs[i].title %></h3>
<h3><%= uniTimes[0].labs[i].classroom %></h3>
<h3><%= uniTimes[0].labs[i].start %></h3>
<h3><%= uniTimes[0].labs[i].end %></h3>
</div>
<% } %>
</div>
<script type="text/javascript">
var lectures = document.getElementById("lectures");
var labs = document.getElementById("labs");
setInterval(function() {
if (lectures.style.display === 'none') {
lectures.style.display = 'block';
labs.style.display = 'none';
} else {
lectures.style.display = 'none';
labs.style.display = 'block';
}
}, 5 * 60000);
</script>
Here is an example which switches data every 2 seconds.
var lectures = document.getElementById("lectures");
var labs = document.getElementById("labs");
setInterval(function() {
if (lectures.style.display === 'none') {
lectures.style.display = 'block';
labs.style.display = 'none';
} else {
lectures.style.display = 'none';
labs.style.display = 'block';
}
}, 2000);
<div id="lectures">
<h2>
lectures
</h2>
</div>
<div id="labs" style="display:none">
<h2>
labs
</h2>
</div>
After you render you lose any server side ability to change data that's sent to the user, so you either need to use something that maintains a connection to the user using socket.io or something similar, or send all the data needed and change it using client side code

Cannot Load server side elements as Maximum call stack size error displayed

Trying to create a dynamic dashboard with drag/drop and resize functionality. I want to add ASP server controls to 'grid-stack-item-content' and update them through Ajax after every 10 seconds.
https://jsfiddle.net/kLeu7y0h/
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bigslide.js/0.12.0/bigSlide.min.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
margin: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div>
<a class="btn btn-default" id="save-grid" href="#">Save</a>
<a class="btn btn-default" id="load-grid" href="#">Load</a>
<a class="btn btn-default" id="clear-grid" href="#">Clear</a>
<input type="hidden" id="saved-data">
</div>
<br/>
<div class="grid-stack">
</div>
<div class="grid-stack-item" id="moni1">
<div class="grid-stack-item-content">
<p>ASP Panel A</p>
</div>
</div>
<div class="grid-stack-item" id="moni2">
<div class="grid-stack-item-content">
<p>ASP Panel B</p>
</div>
</div>
<div class="grid-stack-item" id="moni3">
<div class="grid-stack-item-content">
<p>ASP Panel C</p>
</div>
</div>
<div class="grid-stack-item" id="moni4">
<div class="grid-stack-item-content">
<p>ASP Panel D</p>
</div>
</div>
</div>
<script>
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
new function () {
this.serializedData = [
{ x: 0, y: 0, width: 2, height: 2, id: moni1 },
{ x: 0, y: 1, width: 2, height: 2, id: moni2 },
{ x: 0, y: 2, width: 2, height: 2, id: moni3 },
{ x: 0, y: 3, width: 2, height: 2, id: moni4 },
];
var grid = $('.grid-stack').data('gridstack');
this.loadGrid = function () {
grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
_.each(items, function (node) {
grid.addWidget(node.id,
node.x, node.y, node.width, node.height);
}, this);
return false;
}.bind(this);
this.saveGrid = function () {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
x: node.x,
y: node.y,
width: node.width,
height: node.height,
id: node.id
};
}, this);
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.clearGrid = function () {
grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
this.loadGrid();
};
});
</script>
</body>
</html>
I need to load elements from JSON retrieved from database to form a layout. But every time I click on 'Load' button, maximum call stack size error displayed.

How to prevent a right floated element from dropping down when the browser is resized

please have a look on the following code segment. Inside the header there is a logo and a navbar(which is floated right). When I resize the browser horizontally, after a certain width, the navbar is coming down and I don't want it to happen. How to prevent the navbar from comming down? Please help
#header
{
height:150px;
width:100%;
background-color:#ff0000;
}
#header #logo
{
position:relative;
margin:0;
top: 50%;
transform: translateY(-50%);
margin-left:5%;
}
#header #navbar
{
list-style:none;
position:relative;
display:inline-block;
float:right;
top: 50%;
transform: translateY(-50%);
margin-right:5%;
}
#header #navbar li
{
display:table-cell;
padding-left:20px;
}
#header form
{
display:inline;
margin-right:0px;
}
#navbar a
{
text-decoration:none;
font-size:20px;
color:white;
}
#searchbox
{
height:18px;
margin-bottom:1.5px;
width:200px;
}
#submit_button
{
height:25px;
}
<div id="header">
<a href="index.html">
<img id="logo" src=logo.png alt="logo"/>
</a>
<ul id="navbar">
<li>Home</li>
<li>About</li>
<li>Contents</li>
<li>Contact Us</li>
<li id="form">
<form action="">
<input id="searchbox" type="text" name="Serching" placeholder="Search"/>
<input id="submit_button" type="submit" value="Go"/>
</form>
</li>
</ul>
</div>

jplayer wont pause streaming audio

I am trying to create a jplayer streaming audio player but have run into an issue where the player wont "pause" the audio. The player will stop and start the audio, but I am looking to make it pause the audio in the current location of the stream and resume the audio when play is pressed again.
Any help is appreciated!
Here is my code
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var stream = {
title: "",
mp3:""
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream);
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type ===
$.jPlayer.error.URL_NOT_SET) {
// Setup the media stream again and play it.
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
swfPath: "dist/jplayer",
supplied: "mp3",
preload: "none",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
keyEnabled: true
});
});
//]]>
</script>
<style type="text/css">
.auto-style1 {
text-align: center;
}
</style>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
</div>
<div class="jp-controls-holder">
<div class="auto-style1">
<form>
<input name="image" type="image" src="play100.png" class="jp-play" tabindex="0" <?=$dis?>
<input name="image" type="image" src="pause100.png" class="jp-pause" <?=$dis?>
<input name="image" type="image" src="stop100.png" class="jp-stop" <?=$dis?>
</form>
</div>
</div>
</div>
</div>
<div class="jp-no-solution">
</div>
</div>

Resources