forked from External/greenlight
recordings table
This commit is contained in:
Zachary Chai
@@ -1,5 +1,4 @@
|
|||||||
(function() {
|
(function() {
|
||||||
var recordingsTable = null;
|
|
||||||
|
|
||||||
var waitForModerator = function(url) {
|
var waitForModerator = function(url) {
|
||||||
$.get(url + "/wait", function(html) {
|
$.get(url + "/wait", function(html) {
|
||||||
@@ -94,137 +93,13 @@
|
|||||||
var initRooms = function() {
|
var initRooms = function() {
|
||||||
displayRoomURL();
|
displayRoomURL();
|
||||||
|
|
||||||
// initialize recordings datatable
|
Recordings.getInstance().refresh();
|
||||||
recordingsTable = $('#recordings').dataTable({
|
Recordings.getInstance().setupActionHandlers();
|
||||||
data: [],
|
|
||||||
rowId: 'id',
|
|
||||||
paging: false,
|
|
||||||
searching: false,
|
|
||||||
info: false,
|
|
||||||
order: [[ 0, "desc" ]],
|
|
||||||
language: {
|
|
||||||
emptyTable: " "
|
|
||||||
},
|
|
||||||
columns: [
|
|
||||||
{ data: "start_time" },
|
|
||||||
{ data: "previews" },
|
|
||||||
{ data: "duration" },
|
|
||||||
{ data: "playbacks" },
|
|
||||||
{ data: "id" }
|
|
||||||
],
|
|
||||||
columnDefs: [
|
|
||||||
{
|
|
||||||
targets: 1,
|
|
||||||
render: function(data, type, row) {
|
|
||||||
if (type === 'display') {
|
|
||||||
var str = '';
|
|
||||||
for(let i in data) {
|
|
||||||
str += '<img height="50" width="50" src="'+data[i].url+'" alt="'+data[i].alt+'"></img> ';
|
|
||||||
}
|
|
||||||
return str;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
targets: 3,
|
|
||||||
render: function(data, type, row) {
|
|
||||||
if (type === 'display') {
|
|
||||||
var str = '';
|
|
||||||
if (row.published) {
|
|
||||||
for(let i in data) {
|
|
||||||
str += '<a href="'+data[i].url+'">'+data[i].type+'</a> ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return str;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
targets: -1,
|
|
||||||
render: function(data, type, row) {
|
|
||||||
if (type === 'display') {
|
|
||||||
var roomName = Meeting.getInstance().getId();
|
|
||||||
var published = row.published;
|
|
||||||
var eye = getPublishClass(published);
|
|
||||||
return '<button type="button" class="btn btn-default recording-update" data-published="'+published+'">' +
|
|
||||||
'<i class="fa '+eye+'" aria-hidden="true"></i></button> ' +
|
|
||||||
'<a tabindex="0" role="button" class="btn btn-default has-popover"' +
|
|
||||||
'data-toggle="popover" data-placement="top">' +
|
|
||||||
'<i class="fa fa-trash-o" aria-hidden="true"></i>' +
|
|
||||||
'</a>';
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#recordings').on('click', '.recording-update', function(event) {
|
|
||||||
var btn = $(this);
|
|
||||||
var row = recordingsTable.api().row($(this).closest('tr')).data();
|
|
||||||
var url = $('.meeting-url').val();
|
|
||||||
var id = row.id;
|
|
||||||
var published = btn.data('published');
|
|
||||||
btn.prop('disabled', true);
|
|
||||||
$.ajax({
|
|
||||||
method: 'PATCH',
|
|
||||||
url: url+'/recordings/'+id,
|
|
||||||
data: {published: (!published).toString()}
|
|
||||||
}).done(function(data) {
|
|
||||||
|
|
||||||
}).fail(function(data) {
|
|
||||||
btn.prop('disabled', false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#recordings').on('click', '.recording-delete', function(event) {
|
|
||||||
var btn = $(this);
|
|
||||||
var row = recordingsTable.api().row($(this).closest('tr')).data();
|
|
||||||
var url = $('.meeting-url').val();
|
|
||||||
var id = row.id;
|
|
||||||
btn.prop('disabled', true);
|
|
||||||
$.ajax({
|
|
||||||
method: 'DELETE',
|
|
||||||
url: url+'/recordings/'+id
|
|
||||||
}).done(function() {
|
|
||||||
|
|
||||||
}).fail(function(data) {
|
|
||||||
btn.prop('disabled', false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
refreshRecordings();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var refreshRecordings = function() {
|
|
||||||
if (!recordingsTable) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
table = recordingsTable.api();
|
|
||||||
$.get("/rooms/"+Meeting.getInstance().getId()+"/recordings", function(data) {
|
|
||||||
if (!data.is_owner) {
|
|
||||||
table.column(-1).visible( false );
|
|
||||||
}
|
|
||||||
var i;
|
|
||||||
for (i = 0; i < data.recordings.length; i++) {
|
|
||||||
var totalMinutes = Math.round((new Date(data.recordings[i].end_time) - new Date(data.recordings[i].start_time)) / 1000 / 60);
|
|
||||||
data.recordings[i].duration = totalMinutes;
|
|
||||||
|
|
||||||
data.recordings[i].start_time = new Date(data.recordings[i].start_time)
|
|
||||||
.toLocaleString($('html').attr('lang'),
|
|
||||||
{month: 'long', day: 'numeric', year: 'numeric', hour12: 'true', hour: '2-digit', minute: '2-digit'});
|
|
||||||
}
|
|
||||||
table.clear();
|
|
||||||
table.rows.add(data.recordings);
|
|
||||||
table.columns.adjust().draw();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).on("turbolinks:load", function() {
|
$(document).on("turbolinks:load", function() {
|
||||||
init();
|
|
||||||
if ($("body[data-controller=landing]").get(0)) {
|
if ($("body[data-controller=landing]").get(0)) {
|
||||||
|
init();
|
||||||
if ($("body[data-action=meetings]").get(0)) {
|
if ($("body[data-action=meetings]").get(0)) {
|
||||||
initIndex();
|
initIndex();
|
||||||
} else if ($("body[data-action=rooms]").get(0)) {
|
} else if ($("body[data-action=rooms]").get(0)) {
|
||||||
|
|||||||
163
app/assets/javascripts/recordings.js
Normal file
163
app/assets/javascripts/recordings.js
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
// Recordings class
|
||||||
|
|
||||||
|
var _recordingsInstance = null;
|
||||||
|
|
||||||
|
class Recordings {
|
||||||
|
constructor() {
|
||||||
|
// configure the datatable for recordings
|
||||||
|
this.table = $('#recordings').dataTable({
|
||||||
|
data: [],
|
||||||
|
rowId: 'id',
|
||||||
|
paging: false,
|
||||||
|
searching: false,
|
||||||
|
info: false,
|
||||||
|
order: [[ 0, "desc" ]],
|
||||||
|
language: {
|
||||||
|
emptyTable: " "
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ data: "start_time" },
|
||||||
|
{ data: "previews" },
|
||||||
|
{ data: "duration" },
|
||||||
|
{ data: "playbacks" },
|
||||||
|
{ data: "id" }
|
||||||
|
],
|
||||||
|
columnDefs: [
|
||||||
|
{
|
||||||
|
targets: 0,
|
||||||
|
render: function(data, type, row) {
|
||||||
|
if (type === 'display') {
|
||||||
|
return new Date(data)
|
||||||
|
.toLocaleString($('html').attr('lang'),
|
||||||
|
{month: 'long', day: 'numeric', year: 'numeric',
|
||||||
|
hour12: 'true', hour: '2-digit', minute: '2-digit'});
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
targets: 1,
|
||||||
|
render: function(data, type, row) {
|
||||||
|
if (type === 'display') {
|
||||||
|
var str = '';
|
||||||
|
for(let i in data) {
|
||||||
|
str += '<img height="50" width="50" src="'+data[i].url+'" alt="'+data[i].alt+'"></img> ';
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
targets: 3,
|
||||||
|
render: function(data, type, row) {
|
||||||
|
if (type === 'display') {
|
||||||
|
var str = '';
|
||||||
|
if (row.published) {
|
||||||
|
for(let i in data) {
|
||||||
|
str += '<a href="'+data[i].url+'">'+data[i].type+'</a> ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
targets: -1,
|
||||||
|
render: function(data, type, row) {
|
||||||
|
if (type === 'display') {
|
||||||
|
var roomName = Meeting.getInstance().getId();
|
||||||
|
var published = row.published;
|
||||||
|
var eye = getPublishClass(published);
|
||||||
|
return '<button type="button" class="btn btn-default recording-update" data-published="'+published+'">' +
|
||||||
|
'<i class="fa '+eye+'" aria-hidden="true"></i></button> ' +
|
||||||
|
'<a tabindex="0" role="button" class="btn btn-default has-popover"' +
|
||||||
|
'data-toggle="popover" data-placement="top">' +
|
||||||
|
'<i class="fa fa-trash-o" aria-hidden="true"></i>' +
|
||||||
|
'</a>';
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gets the current instance or creates a new one
|
||||||
|
static getInstance() {
|
||||||
|
if (_recordingsInstance && Recordings.initialized()) {
|
||||||
|
return _recordingsInstance;
|
||||||
|
}
|
||||||
|
_recordingsInstance = new Recordings();
|
||||||
|
return _recordingsInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
static initialize() {
|
||||||
|
Recordings.getInstance();
|
||||||
|
}
|
||||||
|
|
||||||
|
static initialized() {
|
||||||
|
return $.fn.DataTable.isDataTable('#recordings') && _recordingsInstance;
|
||||||
|
}
|
||||||
|
|
||||||
|
// refresh the recordings from the server
|
||||||
|
refresh() {
|
||||||
|
var _this = this;
|
||||||
|
var table_api = this.table.api();
|
||||||
|
$.get("/rooms/"+Meeting.getInstance().getId()+"/recordings", function(data) {
|
||||||
|
if (!data.is_owner) {
|
||||||
|
table_api.column(-1).visible(false);
|
||||||
|
}
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < data.recordings.length; i++) {
|
||||||
|
var totalMinutes = Math.round((new Date(data.recordings[i].end_time) - new Date(data.recordings[i].start_time)) / 1000 / 60);
|
||||||
|
data.recordings[i].duration = totalMinutes;
|
||||||
|
}
|
||||||
|
data.recordings.sort(function(a,b) {
|
||||||
|
return new Date(b.start_time) - new Date(a.start_time);
|
||||||
|
});
|
||||||
|
table_api.clear();
|
||||||
|
table_api.rows.add(data.recordings);
|
||||||
|
table_api.columns.adjust().draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// setup click handlers for the action buttons
|
||||||
|
setupActionHandlers() {
|
||||||
|
var table_api = this.table.api();
|
||||||
|
this.table.on('click', '.recording-update', function(event) {
|
||||||
|
var btn = $(this);
|
||||||
|
var row = table_api.row($(this).closest('tr')).data();
|
||||||
|
var url = $('.meeting-url').val();
|
||||||
|
var id = row.id;
|
||||||
|
var published = btn.data('published');
|
||||||
|
btn.prop('disabled', true);
|
||||||
|
$.ajax({
|
||||||
|
method: 'PATCH',
|
||||||
|
url: url+'/recordings/'+id,
|
||||||
|
data: {published: (!published).toString()}
|
||||||
|
}).done(function(data) {
|
||||||
|
|
||||||
|
}).fail(function(data) {
|
||||||
|
btn.prop('disabled', false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.table.on('click', '.recording-delete', function(event) {
|
||||||
|
var btn = $(this);
|
||||||
|
var row = table_api.row($(this).closest('tr')).data();
|
||||||
|
var url = $('.meeting-url').val();
|
||||||
|
var id = row.id;
|
||||||
|
btn.prop('disabled', true);
|
||||||
|
$.ajax({
|
||||||
|
method: 'DELETE',
|
||||||
|
url: url+'/recordings/'+id
|
||||||
|
}).done(function() {
|
||||||
|
|
||||||
|
}).fail(function(data) {
|
||||||
|
btn.prop('disabled', false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user