forked from External/greenlight
recordings table
This commit is contained in:
Zachary Chai
@@ -1,5 +1,4 @@
|
||||
(function() {
|
||||
var recordingsTable = null;
|
||||
|
||||
var waitForModerator = function(url) {
|
||||
$.get(url + "/wait", function(html) {
|
||||
@@ -94,137 +93,13 @@
|
||||
var initRooms = function() {
|
||||
displayRoomURL();
|
||||
|
||||
// initialize recordings datatable
|
||||
recordingsTable = $('#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: 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();
|
||||
Recordings.getInstance().refresh();
|
||||
Recordings.getInstance().setupActionHandlers();
|
||||
};
|
||||
|
||||
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() {
|
||||
init();
|
||||
if ($("body[data-controller=landing]").get(0)) {
|
||||
init();
|
||||
if ($("body[data-action=meetings]").get(0)) {
|
||||
initIndex();
|
||||
} 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