238 lines
13 KiB
PHP
238 lines
13 KiB
PHP
<?php
|
||
require("../inc/connect.php");
|
||
require("../inc/session.php");
|
||
|
||
if($deviceid == 0)
|
||
{
|
||
$_GET['warning'] = "No device selected";
|
||
}
|
||
|
||
$sql = "SELECT `id`, `name`, `ip`, `port`, `path` FROM `stream` WHERE `dev_id`=$deviceid";
|
||
$query = ExecQuery($mysqli, $sql);
|
||
|
||
if($query->num_rows < 1)
|
||
{
|
||
$_GET['info'] = "No streams found";
|
||
}
|
||
|
||
if($query->num_rows >= 5)
|
||
{
|
||
$new_submit = false;
|
||
}
|
||
else
|
||
{
|
||
$new_submit = true;
|
||
}
|
||
|
||
$page = 3;
|
||
require("inc/header.php");
|
||
|
||
?>
|
||
<!-- MENU SECTION END-->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h4 class="page-head-line">Streams</h4>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">
|
||
Streams for <?php echo $device; ?>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-bordered table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>IP</th>
|
||
<th>Port</th>
|
||
<th>Path</th>
|
||
<th>Manage</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
<?php while($result = $query->fetch_assoc()) { ?>
|
||
<tr>
|
||
<td class="stream-name"><?php echo $result['name']; ?></td>
|
||
<td class="stream-ip"><?php echo $result['ip']; ?></td>
|
||
<td class="stream-port"><?php echo $result['port']; ?></td>
|
||
<td class="stream-path"><?php echo $result['path']; ?></td>
|
||
<td>
|
||
<a class="btn btn-default edit-button" data-toggle="modal" data-target="#edit-stream" data-id="<?php echo $result['id']; ?>">Edit</a>
|
||
<a class="btn btn-danger delete-button" data-toggle="modal" data-target="#delete-stream" data-id="<?php echo $result['id']; ?>">Delete</a>
|
||
<a class="btn btn-success play-button" data-toggle="modal" data-target="#play-stream">Try</a>
|
||
</td>
|
||
</tr>
|
||
<?php } ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="panel-footer">
|
||
<p><a class="btn btn-primary" data-toggle="modal" data-target="#add-stream">Add a stream</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EDIT stream -->
|
||
<div class="modal fade" id="edit-stream" tabindex="-1" role="dialog" aria-labelledby="edit-stream-label" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title" id="edit-stream-label">Edit </h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="edit-stream-form" method="POST" action="php/device/stream_edit.php">
|
||
<input type="hidden" class="form-control" name="id" id="edit-stream-id"/>
|
||
<label>Name: </label>
|
||
<input type="text" class="form-control" name="name" id="edit-stream-name" maxlength="15" required/>
|
||
<label>IP / Domain: </label>
|
||
<input type="text" class="form-control" name="ip" id="edit-stream-ip" placeholder="http://example.com" required/>
|
||
<label>Port: </label>
|
||
<input type="text" class="form-control" name="port" id="edit-stream-port" placeholder="80" maxlength="5" required/>
|
||
<label>Path: </label>
|
||
<input type="text" class="form-control" name="path" id="edit-stream-path" placeholder="/music-stream" maxlength="64"/>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||
<button type="submit" form="edit-stream-form" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DELETE stream -->
|
||
<div class="modal fade" id="delete-stream" tabindex="-1" role="dialog" aria-labelledby="delete-stream-label" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title" id="delete-stream-label">Delete </h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="delete-stream-form" method="POST" action="php/device/stream_delete.php">
|
||
<input type="hidden" class="form-control" name="id" id="delete-stream-id"/>
|
||
</form>
|
||
|
||
<p>Are you sure you want to delete this stream?</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||
<button type="submit" form="delete-stream-form" class="btn btn-danger">Delete</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ADD stream -->
|
||
<div class="modal fade" id="add-stream" tabindex="-1" role="dialog" aria-labelledby="add-stream-label" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title" id="add-stream-label">Add a new stream </h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="add-stream-form" method="POST" action="php/device/stream_add.php">
|
||
<label>Name: </label>
|
||
<input type="text" class="form-control" name="name" id="add-stream-name" maxlength="15" required/>
|
||
<label>IP / Domain: </label>
|
||
<input type="text" class="form-control" name="ip" id="add-stream-ip" placeholder="http://example.com" required/>
|
||
<label>Port: </label>
|
||
<input type="text" class="form-control" name="port" id="add-stream-port" placeholder="80" maxlength="5" required/>
|
||
<label>Path: </label>
|
||
<input type="text" class="form-control" name="path" id="add-stream-path" placeholder="/music-stream" maxlength="64"/>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||
<button type="submit" form="add-stream-form" class="btn btn-primary" <?php if($deviceid == 0 || !$new_submit){echo "disabled"; } ?>>Add stream</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PLAY stream -->
|
||
<div class="modal fade" id="play-stream" tabindex="-1" role="dialog" aria-labelledby="play-stream-label" aria-hidden="true" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close stop-audio-button" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title" id="play-stream-label">Play </h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<audio id="audioplayer" autoplay="true">
|
||
<source src="" id="play-stream-url" type="audio/mp3">
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
<p id="stream-playing-description">
|
||
Currently streaming
|
||
</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default stop-audio-button" data-dismiss="modal">Close</button>
|
||
<a class="btn btn-primary stop-audio-button" href="" id="play-stream-tab" target="_blank">Open in new tab</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
$(".edit-button").click(function(){
|
||
var id = $( this ).data("id");
|
||
var name = $( this ).parent().parent().find(".stream-name").html();
|
||
var ip = $( this ).parent().parent().find(".stream-ip").html();
|
||
var port = $( this ).parent().parent().find(".stream-port").html();
|
||
var path = $( this ).parent().parent().find(".stream-path").html();
|
||
|
||
$("#edit-stream-label").html("Edit " + name);
|
||
$("#edit-stream-id").attr("value", id);
|
||
$("#edit-stream-name").attr("value", name);
|
||
$("#edit-stream-ip").attr("value", ip);
|
||
$("#edit-stream-port").attr("value", port);
|
||
$("#edit-stream-path").attr("value", path);
|
||
});
|
||
|
||
$(".delete-button").click(function(){
|
||
var id = $( this ).data("id");
|
||
var name = $( this ).parent().parent().find(".stream-name").html();
|
||
|
||
$("#delete-stream-label").html("Delete " + name);
|
||
$("#delete-stream-id").attr("value", id);
|
||
});
|
||
|
||
$(".play-button").click(function(){
|
||
var name = $( this ).parent().parent().find(".stream-name").html();
|
||
var ip = $( this ).parent().parent().find(".stream-ip").html();
|
||
var port = $( this ).parent().parent().find(".stream-port").html();
|
||
var path = $( this ).parent().parent().find(".stream-path").html();
|
||
|
||
var url = "http://" + ip + ":" + port + "/" + path;
|
||
|
||
$("#play-stream-label").html("Play " + name);
|
||
$("#stream-playing-description").html("Currently streaming " + name);
|
||
$("#play-stream-url").attr("src", url);
|
||
$("#play-stream-tab").attr("href", url);
|
||
|
||
$("#audioplayer").trigger("load");
|
||
|
||
});
|
||
|
||
$(".stop-audio-button").click(function(){
|
||
$("#audioplayer").trigger("pause");
|
||
});
|
||
</script>
|
||
|
||
<!-- CONTENT-WRAPPER SECTION END-->
|
||
<?php
|
||
require("inc/footer.php");
|
||
?>
|