Skip to content
Snippets Groups Projects
Commit a08535bc authored by Tommi Penttinen's avatar Tommi Penttinen
Browse files

Mobile Safari needed special work due to <audio> tag playback restrictions

parent 42e038e4
No related branches found
No related tags found
No related merge requests found
Pipeline #41908 passed
...@@ -40,6 +40,22 @@ ...@@ -40,6 +40,22 @@
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Yhteys palvelimeen</h5>
</div>
<div class="modal-footer">
<button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
</div>
</div>
</div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
...@@ -71,7 +87,11 @@ ...@@ -71,7 +87,11 @@
</div> </div>
</div> </div>
<script src="js/smarter-ui.js"></script> <script src="js/smarter-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.modal').modal('show');
})
</script>
</body> </body>
</html> </html>
DIRECTION1_TEXT = "Suunta: tulee vasemmalta"; DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
DIRECTION2_TEXT = "Suunta: tulee oikealta"; DIRECTION2_TEXT = "Suunta: tulee oikealta";
var AUDIO_ELEM = new Audio();
// Make it easier to read CSV files // Make it easier to read CSV files
USER_AGENT = navigator.userAgent.replace(';', '').replace(',', ''); USER_AGENT = navigator.userAgent.replace(';', '').replace(',', '');
...@@ -29,20 +31,29 @@ var heartBeat; ...@@ -29,20 +31,29 @@ var heartBeat;
// https://stackoverflow.com/a/23176223 // https://stackoverflow.com/a/23176223
function connect() { function connect() {
console.log("Opening websocket");
ws = new WebSocket(SERVER); ws = new WebSocket(SERVER);
ws.onopen = function() { ws.onopen = function() {
console.log("Opened websocket");
// Initiate hearbeat // Initiate hearbeat
heartBeat = setInterval(function() { heartBeat = setInterval(function() {
console.log("PING"); console.log("PING");
ws.send('PING' + SEP + new Date().getTime() + SEP + USER_AGENT); ws.send('PING' + SEP + new Date().getTime() + SEP + USER_AGENT);
}, 5000); }, 5000);
setTimeout(function() {
var modalClose = document.getElementById('modal-close');
modalClose.textContent = "Valmis!";
$(modalClose).toggleClass("disabled");
}, 1000);
}; };
ws.onmessage = function(e) { ws.onmessage = function(e) {
console.log('Message:', e.data); console.log('Message:', e.data);
try { try {
var vehicle_class = JSON.parse(e.data).vehicle_class; var vehicle_class = JSON.parse(e.data).vehicle_class;
new Audio(AUDIO[vehicle_class]).play(); console.log("Got vehicle class: " + vehicle_class);
AUDIO_ELEM.src = AUDIO[vehicle_class];
AUDIO_ELEM.play();
} catch (exc) { } catch (exc) {
if (exc instanceof SyntaxError) { if (exc instanceof SyntaxError) {
console.log("Not json : " + e.data); console.log("Not json : " + e.data);
...@@ -66,3 +77,8 @@ function connect() { ...@@ -66,3 +77,8 @@ function connect() {
}; };
} }
connect(); connect();
function closeModal() {
AUDIO_ELEM.play();
$('.modal').modal('hide');
}
\ No newline at end of file
...@@ -40,6 +40,22 @@ ...@@ -40,6 +40,22 @@
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Yhteys palvelimeen</h5>
</div>
<div class="modal-footer">
<button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
</div>
</div>
</div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
...@@ -71,7 +87,11 @@ ...@@ -71,7 +87,11 @@
</div> </div>
</div> </div>
<script src="js/smarter-ui.js"></script> <script src="js/smarter-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.modal').modal('show');
})
</script>
</body> </body>
</html> </html>
...@@ -40,6 +40,22 @@ ...@@ -40,6 +40,22 @@
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Yhteys palvelimeen</h5>
</div>
<div class="modal-footer">
<button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
</div>
</div>
</div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
...@@ -71,7 +87,11 @@ ...@@ -71,7 +87,11 @@
</div> </div>
</div> </div>
<script src="js/smarter-ui.js"></script> <script src="js/smarter-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.modal').modal('show');
})
</script>
</body> </body>
</html> </html>
...@@ -40,6 +40,22 @@ ...@@ -40,6 +40,22 @@
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Yhteys palvelimeen</h5>
</div>
<div class="modal-footer">
<button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
</div>
</div>
</div>
</div>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
...@@ -71,7 +87,11 @@ ...@@ -71,7 +87,11 @@
</div> </div>
</div> </div>
<script src="js/smarter-ui.js"></script> <script src="js/smarter-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.modal').modal('show');
})
</script>
</body> </body>
</html> </html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment