mod/bigbluebuttonbn/amd/src/recordings.js

// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
/**
 * JS for the recordings page on mod_bigbluebuttonbn plugin.
 *
 * @module      mod_bigbluebuttonbn/recordings
 * @copyright   2021 Blindside Networks Inc
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */
import * as repository from './repository';
import {exception as displayException, saveCancelPromise} from 'core/notification';
import {prefetchStrings} from 'core/prefetch';
import {getString, getStrings} from 'core/str';
import {addIconToContainerWithPromise} from 'core/loadingicon';
import Pending from 'core/pending';
const stringsWithKeys = {
    first: 'view_recording_yui_first',
    prev: 'view_recording_yui_prev',
    next: 'view_recording_yui_next',
    last: 'view_recording_yui_last',
    goToLabel: 'view_recording_yui_page',
    goToAction: 'view_recording_yui_go',
    perPage: 'view_recording_yui_rows',
    showAll: 'view_recording_yui_show_all',
};
// Load global strings.
prefetchStrings('bigbluebuttonbn', Object.entries(stringsWithKeys).map((entry) => entry[1]));
const getStringsForYui = () => {
    const stringMap = Object.keys(stringsWithKeys).map(key => {
        return {
            key: stringsWithKeys[key],
            component: 'mod_bigbluebuttonbn',
        };
    });
    // Return an object with the matching string keys (we want an object with {<stringkey>: <stringvalue>...}).
    return getStrings(stringMap)
        .then((stringArray) => Object.assign(
            {},
            ...Object.keys(stringsWithKeys).map(
                (key, index) => ({[key]: stringArray[index]})
            )
        ));
};
const getYuiInstance = lang => new Promise(resolve => {
    // eslint-disable-next-line
    YUI({
        lang,
    }).use('intl', 'datatable', 'datatable-sort', 'datatable-paginator', 'datatype-number', Y => {
        resolve(Y);
    });
});
/**
 * Format the supplied date per the specified locale.
 *
 * @param   {string} locale
 * @param   {number} date
 * @returns {array}
 */
const formatDate = (locale, date) => {
    const realDate = new Date(date);
    return realDate.toLocaleDateString(locale, {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    });
};
/**
 * Format response data for the table.
 *
 * @param   {string} response JSON-encoded table data
 * @returns {array}
 */
const getFormattedData = response => {
    const recordingData = response.tabledata;
    return JSON.parse(recordingData.data);
};
const getTableNode = tableSelector => document.querySelector(tableSelector);
const fetchRecordingData = tableSelector => {
    const tableNode = getTableNode(tableSelector);
    if (tableNode === null) {
        return Promise.resolve(false);
    }
    if (tableNode.dataset.importMode) {
        return repository.fetchRecordingsToImport(
            tableNode.dataset.bbbid,
            tableNode.dataset.bbbSourceInstanceId,
            tableNode.dataset.bbbSourceCourseId,
            tableNode.dataset.tools,
            tableNode.dataset.groupId
        );
    } else {
        return repository.fetchRecordings(
            tableNode.dataset.bbbid,
            tableNode.dataset.tools,
            tableNode.dataset.groupId
        );
    }
};
/**
 * Fetch the data table functinos for the specified table.
 *
 * @param {String} tableId in which we will display the table
 * @param {String} searchFormId The Id of the relate.
 * @param {Object} dataTable
 * @returns {Object}
 * @private
 */
const getDataTableFunctions = (tableId, searchFormId, dataTable) => {
    const tableNode = getTableNode(tableId);
    const bbbid = tableNode.dataset.bbbid;
    const updateTableFromResponse = response => {
        if (!response || !response.status) {
            // There was no output at all.
            return;
        }
        dataTable.get('data').reset(getFormattedData(response));
        dataTable.set(
            'currentData',
            dataTable.get('data')
        );
        const currentFilter = dataTable.get('currentFilter');
        if (currentFilter) {
            filterByText(currentFilter);
        }
    };
    const refreshTableData = () => fetchRecordingData(tableId).then(updateTableFromResponse);
    const filterByText = value => {
        const dataModel = dataTable.get('currentData');
        dataTable.set('currentFilter', value);
        const escapedRegex = value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
        const rsearch = new RegExp(`<span>.*?${escapedRegex}.*?</span>`, 'i');
        dataTable.set('data', dataModel.filter({asList: true}, item => {
            const name = item.get('recording');
            if (name && rsearch.test(name)) {
                return true;
            }
            const description = item.get('description');
            return description && rsearch.test(description);
        }));
    };
    const requestAction = async(element) => {
        const getDataFromAction = (element, dataType) => {
            const dataElement = element.closest(`[data-${dataType}]`);
            if (dataElement) {
                return dataElement.dataset[dataType];
            }
            return null;
        };
        const elementData = element.dataset;
        const payload = {
            bigbluebuttonbnid: bbbid,
            recordingid: getDataFromAction(element, 'recordingid'),
            additionaloptions: getDataFromAction(element, 'additionaloptions'),
            action: elementData.action,
        };
        // Slight change for import, for additional options.
        if (!payload.additionaloptions) {
            payload.additionaloptions = {};
        }
        if (elementData.action === 'import') {
            const bbbsourceid = getDataFromAction(element, 'source-instance-id');
            const bbbcourseid = getDataFromAction(element, 'source-course-id');
            if (!payload.additionaloptions) {
                payload.additionaloptions = {};
            }
            payload.additionaloptions.sourceid = bbbsourceid ? bbbsourceid : 0;
            payload.additionaloptions.bbbcourseid = bbbcourseid ? bbbcourseid : 0;
        }
        // Now additional options should be a json string.
        payload.additionaloptions = JSON.stringify(payload.additionaloptions);
        if (element.dataset.requireConfirmation === "1") {
            // Create the confirmation dialogue.
            try {
                await saveCancelPromise(
                    getString('confirm'),
                    recordingConfirmationMessage(payload),
                    getString('ok', 'moodle'),
                );
            } catch {
                // User cancelled the dialogue.
                return;
            }
        }
        return repository.updateRecording(payload);
    };
    const recordingConfirmationMessage = async(data) => {
        const playbackElement = document.querySelector(`#playbacks-${data.recordingid}`);
        const recordingType = await getString(
            playbackElement.dataset.imported === 'true' ? 'view_recording_link' : 'view_recording',
            'bigbluebuttonbn'
        );
        const confirmation = await getString(`view_recording_${data.action}_confirmation`, 'bigbluebuttonbn', recordingType);
        if (data.action === 'import') {
            return confirmation;
        }
        // If it has associated links imported in a different course/activity, show that in confirmation dialog.
        const associatedLinkCount = document.querySelector(`a#recording-${data.action}-${data.recordingid}`)?.dataset?.links;
        if (!associatedLinkCount || associatedLinkCount === 0) {
            return confirmation;
        }
        const confirmationWarning = await getString(
            associatedLinkCount === 1
                ? `view_recording_${data.action}_confirmation_warning_p`
                : `view_recording_${data.action}_confirmation_warning_s`,
            'bigbluebuttonbn',
            associatedLinkCount
        );
        return confirmationWarning + '\n\n' + confirmation;
    };
    /**
     * Process an action event.
     *
     * @param   {Event} e
     */
    const processAction = e => {
        const popoutLink = e.target.closest('[data-action="play"]');
        if (popoutLink) {
            e.preventDefault();
            const videoPlayer = window.open('', '_blank');
            videoPlayer.opener = null;
            videoPlayer.location.href = popoutLink.href;
            // TODO send a recording viewed event when this event will be implemented.
            return;
        }
        // Fetch any clicked anchor.
        const clickedLink = e.target.closest('a[data-action]');
        if (clickedLink && !clickedLink.classList.contains('disabled')) {
            e.preventDefault();
            // Create a spinning icon on the table.
            const iconPromise = addIconToContainerWithPromise(dataTable.get('boundingBox').getDOMNode());
            requestAction(clickedLink)
                .then(refreshTableData)
                .then(iconPromise.resolve)
                .catch(displayException);
        }
    };
    const processSearchSubmission = e => {
        // Prevent the default action.
        e.preventDefault();
        const parentNode = e.target.closest('div[role=search]');
        const searchInput = parentNode.querySelector('input[name=search]');
        filterByText(searchInput.value);
    };
    const registerEventListeners = () => {
        // Add event listeners to the table boundingBox.
        const boundingBox = dataTable.get('boundingBox').getDOMNode();
        boundingBox.addEventListener('click', processAction);
        // Setup the search from handlers.
        const searchForm = document.querySelector(searchFormId);
        if (searchForm) {
            const searchButton = document.querySelector(searchFormId + ' button');
            searchButton.addEventListener('click', processSearchSubmission);
        }
    };
    return {
        filterByText,
        refreshTableData,
        registerEventListeners,
    };
};
/**
 * Setup the data table for the specified BBB instance.
 *
 * @param {String} tableId in which we will display the table
 * @param {String} searchFormId The Id of the relate.
 * @param   {object} response The response from the data request
 * @returns {Promise}
 */
const setupDatatable = (tableId, searchFormId, response) => {
    if (!response) {
        return Promise.resolve();
    }
    if (!response.status) {
        // Something failed. Continue to show the plain output.
        return Promise.resolve();
    }
    const recordingData = response.tabledata;
    const pendingPromise = new Pending('mod_bigbluebuttonbn/recordings/setupDatatable');
    return Promise.all([getYuiInstance(recordingData.locale), getStringsForYui()])
        .then(([yuiInstance, strings]) => {
            // Here we use a custom formatter for date.
            // See https://clarle.github.io/yui3/yui/docs/api/classes/DataTable.BodyView.Formatters.html
            // Inspired from examples here: https://clarle.github.io/yui3/yui/docs/datatable/
            // Normally formatter have the prototype: (col) => (cell) => <computed value>, see:
            // https://clarle.github.io/yui3/yui/docs/api/files/datatable_js_formatters.js.html#l100 .
            const dateCustomFormatter = () => (cell) => formatDate(recordingData.locale, cell.value);
            // Add the fetched strings to the YUI Instance.
            yuiInstance.Intl.add('datatable-paginator', yuiInstance.config.lang, {...strings});
            yuiInstance.DataTable.BodyView.Formatters.customDate = dateCustomFormatter;
            return yuiInstance;
        })
        .then(yuiInstance => {
            const tableData = getFormattedData(response);
            yuiInstance.RecordsPaginatorView = Y.Base.create('my-paginator-view', yuiInstance.DataTable.Paginator.View, [], {
                _modelChange: function(e) {
                    var changed = e.changed,
                        totalItems = (changed && changed.totalItems);
                    if (totalItems) {
                        this._updateControlsUI(e.target.get('page'));
                    }
                }
            });
            return new yuiInstance.DataTable({
                paginatorView: "RecordsPaginatorView",
                width: "1195px",
                columns: recordingData.columns,
                data: tableData,
                rowsPerPage: 10,
                paginatorLocation: ['header', 'footer'],
                autoSync: true
            });
        })
        .then(dataTable => {
            dataTable.render(tableId);
            const {registerEventListeners} = getDataTableFunctions(
                tableId,
                searchFormId,
                dataTable);
            registerEventListeners();
            return dataTable;
        })
        .then(dataTable => {
            pendingPromise.resolve();
            return dataTable;
        });
};
/**
 * Initialise recordings code.
 *
 * @method init
 * @param {String} tableId in which we will display the table
 * @param {String} searchFormId The Id of the relate.
 */
export const init = (tableId, searchFormId) => {
    const pendingPromise = new Pending('mod_bigbluebuttonbn/recordings:init');
    fetchRecordingData(tableId)
        .then(response => setupDatatable(tableId, searchFormId, response))
        .then(() => pendingPromise.resolve())
        .catch(displayException);
};