MDL-74638 mod_bigbluebutton: Multiple fixes to room layout

* In preparation for the guest access trigger button, move the join session
button to the right
* Fix id in the templates to be more consistent
* Fix issue with room refreshing process so it replaces the node instead of node content.
This commit is contained in:
Laurent David
2022-11-09 16:31:00 +01:00
parent 5877ae306e
commit 7de01c97c2
7 changed files with 80 additions and 65 deletions
+1 -1
View File
@@ -5,6 +5,6 @@ define("mod_bigbluebuttonbn/roomupdater",["exports","core/templates","core/notif
* @module mod_bigbluebuttonbn/roomupdater
* @copyright 2021 Blindside Networks Inc
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.updateRoom=_exports.stop=_exports.start=void 0,_templates=(obj=_templates)&&obj.__esModule?obj:{default:obj};let timerReference=null,timerRunning=!1,pollInterval=0,pollIntervalFactor=1;const resetValues=()=>{timerRunning=!1,timerReference=null,pollInterval=0,pollIntervalFactor=1};_exports.start=interval=>{resetValues(),timerRunning=!0,pollInterval=interval,poll()};_exports.stop=()=>{timerReference&&clearTimeout(timerReference),resetValues()};const poll=()=>{timerRunning&&pollInterval&&updateRoom().then((updateOk=>(updateOk||(pollIntervalFactor=pollIntervalFactor<10?pollIntervalFactor+1:10),timerReference=setTimeout((()=>poll()),pollInterval*pollIntervalFactor),!0))).catch()},updateRoom=function(){let updatecache=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const bbbRoomViewElement=document.getElementById("bbb-room-view"),bbbId=bbbRoomViewElement.dataset.bbbId,groupId=bbbRoomViewElement.dataset.groupId;return(0,_repository.getMeetingInfo)(bbbId,groupId,updatecache).then((data=>(data.haspresentations=!(!data.presentations||!data.presentations.length),_templates.default.renderForPromise("mod_bigbluebuttonbn/room_view",data)))).then((_ref=>{let{html:html,js:js}=_ref;return _templates.default.replaceNodeContents(bbbRoomViewElement,html,js)})).then((()=>!0)).catch((ex=>((0,_notification.exception)(ex),!1)))};_exports.updateRoom=updateRoom}));
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.updateRoom=_exports.stop=_exports.start=void 0,_templates=(obj=_templates)&&obj.__esModule?obj:{default:obj};let timerReference=null,timerRunning=!1,pollInterval=0,pollIntervalFactor=1;const resetValues=()=>{timerRunning=!1,timerReference=null,pollInterval=0,pollIntervalFactor=1};_exports.start=interval=>{resetValues(),timerRunning=!0,pollInterval=interval,poll()};_exports.stop=()=>{timerReference&&clearTimeout(timerReference),resetValues()};const poll=()=>{timerRunning&&pollInterval&&updateRoom().then((updateOk=>(updateOk||(pollIntervalFactor=pollIntervalFactor<10?pollIntervalFactor+1:10),timerReference=setTimeout((()=>poll()),pollInterval*pollIntervalFactor),!0))).catch()},updateRoom=function(){let updatecache=arguments.length>0&&void 0!==arguments[0]&&arguments[0];const bbbRoomViewElement=document.getElementById("bigbluebuttonbn-room-view"),bbbId=bbbRoomViewElement.dataset.bbbId,groupId=bbbRoomViewElement.dataset.groupId;return(0,_repository.getMeetingInfo)(bbbId,groupId,updatecache).then((data=>(data.haspresentations=!(!data.presentations||!data.presentations.length),_templates.default.renderForPromise("mod_bigbluebuttonbn/room_view",data)))).then((_ref=>{let{html:html,js:js}=_ref;return _templates.default.replaceNode(bbbRoomViewElement,html,js)})).then((()=>!0)).catch((ex=>((0,_notification.exception)(ex),!1)))};_exports.updateRoom=updateRoom}));
//# sourceMappingURL=roomupdater.min.js.map
@@ -1 +1 @@
{"version":3,"file":"roomupdater.min.js","sources":["../src/roomupdater.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * JS room updater.\n *\n * @module mod_bigbluebuttonbn/roomupdater\n * @copyright 2021 Blindside Networks Inc\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from \"core/templates\";\nimport {exception as displayException} from 'core/notification';\nimport {getMeetingInfo} from './repository';\n\nlet timerReference = null;\nlet timerRunning = false;\nlet pollInterval = 0;\nlet pollIntervalFactor = 1;\nconst MAX_POLL_INTERVAL_FACTOR = 10;\n\nconst resetValues = () => {\n timerRunning = false;\n timerReference = null;\n pollInterval = 0;\n pollIntervalFactor = 1;\n};\n\n/**\n * Start the information poller.\n * @param {Number} interval interval in miliseconds between each poll action.\n */\nexport const start = (interval) => {\n resetValues();\n timerRunning = true;\n pollInterval = interval;\n poll();\n};\n\n/**\n * Stop the room updater.\n */\nexport const stop = () => {\n if (timerReference) {\n clearTimeout(timerReference);\n }\n resetValues();\n};\n\n/**\n * Start the information poller.\n */\nconst poll = () => {\n if (!timerRunning || !pollInterval) {\n // The poller has been stopped.\n return;\n }\n updateRoom()\n .then((updateOk) => {\n if (!updateOk) {\n pollIntervalFactor = (pollIntervalFactor < MAX_POLL_INTERVAL_FACTOR) ?\n pollIntervalFactor + 1 : MAX_POLL_INTERVAL_FACTOR;\n // We make sure if there is an error that we do not try too often.\n }\n timerReference = setTimeout(() => poll(), pollInterval * pollIntervalFactor);\n return true;\n })\n .catch();\n};\n\n/**\n * Update the room information.\n *\n * @param {boolean} [updatecache=false] should we update cache\n * @returns {Promise}\n */\nexport const updateRoom = (updatecache = false) => {\n const bbbRoomViewElement = document.getElementById('bbb-room-view');\n const bbbId = bbbRoomViewElement.dataset.bbbId;\n const groupId = bbbRoomViewElement.dataset.groupId;\n return getMeetingInfo(bbbId, groupId, updatecache)\n .then(data => {\n // Just make sure we have the right information for the template.\n data.haspresentations = !!(data.presentations && data.presentations.length);\n return Templates.renderForPromise('mod_bigbluebuttonbn/room_view', data);\n })\n .then(({html, js}) => Templates.replaceNodeContents(bbbRoomViewElement, html, js))\n .then(() => true)\n .catch((ex) => {\n displayException(ex);\n return false;\n });\n};\n"],"names":["timerReference","timerRunning","pollInterval","pollIntervalFactor","resetValues","interval","poll","clearTimeout","updateRoom","then","updateOk","setTimeout","catch","updatecache","bbbRoomViewElement","document","getElementById","bbbId","dataset","groupId","data","haspresentations","presentations","length","Templates","renderForPromise","_ref","html","js","replaceNodeContents","ex"],"mappings":";;;;;;;uLA2BIA,eAAiB,KACjBC,cAAe,EACfC,aAAe,EACfC,mBAAqB,QAGnBC,YAAc,KAChBH,cAAe,EACfD,eAAiB,KACjBE,aAAe,EACfC,mBAAqB,kBAOHE,WAClBD,cACAH,cAAe,EACfC,aAAeG,SACfC,sBAMgB,KACZN,gBACAO,aAAaP,gBAEjBI,qBAMEE,KAAO,KACJL,cAAiBC,cAItBM,aACKC,MAAMC,WACEA,WACDP,mBAAsBA,mBAzCL,GA0CbA,mBAAqB,EA1CR,IA6CrBH,eAAiBW,YAAW,IAAML,QAAQJ,aAAeC,qBAClD,KAEVS,SASIJ,WAAa,eAACK,0EACjBC,mBAAqBC,SAASC,eAAe,iBAC7CC,MAAQH,mBAAmBI,QAAQD,MACnCE,QAAUL,mBAAmBI,QAAQC,eACpC,8BAAeF,MAAOE,QAASN,aACjCJ,MAAKW,OAEFA,KAAKC,oBAAsBD,KAAKE,gBAAiBF,KAAKE,cAAcC,QAC7DC,mBAAUC,iBAAiB,gCAAiCL,SAEtEX,MAAKiB,WAACC,KAACA,KAADC,GAAOA,gBAAQJ,mBAAUK,oBAAoBf,mBAAoBa,KAAMC,OAC7EnB,MAAK,KAAM,IACXG,OAAOkB,iCACaA,KACV"}
{"version":3,"file":"roomupdater.min.js","sources":["../src/roomupdater.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * JS room updater.\n *\n * @module mod_bigbluebuttonbn/roomupdater\n * @copyright 2021 Blindside Networks Inc\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Templates from \"core/templates\";\nimport {exception as displayException} from 'core/notification';\nimport {getMeetingInfo} from './repository';\n\nlet timerReference = null;\nlet timerRunning = false;\nlet pollInterval = 0;\nlet pollIntervalFactor = 1;\nconst MAX_POLL_INTERVAL_FACTOR = 10;\n\nconst resetValues = () => {\n timerRunning = false;\n timerReference = null;\n pollInterval = 0;\n pollIntervalFactor = 1;\n};\n\n/**\n * Start the information poller.\n * @param {Number} interval interval in miliseconds between each poll action.\n */\nexport const start = (interval) => {\n resetValues();\n timerRunning = true;\n pollInterval = interval;\n poll();\n};\n\n/**\n * Stop the room updater.\n */\nexport const stop = () => {\n if (timerReference) {\n clearTimeout(timerReference);\n }\n resetValues();\n};\n\n/**\n * Start the information poller.\n */\nconst poll = () => {\n if (!timerRunning || !pollInterval) {\n // The poller has been stopped.\n return;\n }\n updateRoom()\n .then((updateOk) => {\n if (!updateOk) {\n pollIntervalFactor = (pollIntervalFactor < MAX_POLL_INTERVAL_FACTOR) ?\n pollIntervalFactor + 1 : MAX_POLL_INTERVAL_FACTOR;\n // We make sure if there is an error that we do not try too often.\n }\n timerReference = setTimeout(() => poll(), pollInterval * pollIntervalFactor);\n return true;\n })\n .catch();\n};\n\n/**\n * Update the room information.\n *\n * @param {boolean} [updatecache=false] should we update cache\n * @returns {Promise}\n */\nexport const updateRoom = (updatecache = false) => {\n const bbbRoomViewElement = document.getElementById('bigbluebuttonbn-room-view');\n const bbbId = bbbRoomViewElement.dataset.bbbId;\n const groupId = bbbRoomViewElement.dataset.groupId;\n return getMeetingInfo(bbbId, groupId, updatecache)\n .then(data => {\n // Just make sure we have the right information for the template.\n data.haspresentations = !!(data.presentations && data.presentations.length);\n return Templates.renderForPromise('mod_bigbluebuttonbn/room_view', data);\n })\n .then(({html, js}) => Templates.replaceNode(bbbRoomViewElement, html, js))\n .then(() => true)\n .catch((ex) => {\n displayException(ex);\n return false;\n });\n};\n"],"names":["timerReference","timerRunning","pollInterval","pollIntervalFactor","resetValues","interval","poll","clearTimeout","updateRoom","then","updateOk","setTimeout","catch","updatecache","bbbRoomViewElement","document","getElementById","bbbId","dataset","groupId","data","haspresentations","presentations","length","Templates","renderForPromise","_ref","html","js","replaceNode","ex"],"mappings":";;;;;;;uLA2BIA,eAAiB,KACjBC,cAAe,EACfC,aAAe,EACfC,mBAAqB,QAGnBC,YAAc,KAChBH,cAAe,EACfD,eAAiB,KACjBE,aAAe,EACfC,mBAAqB,kBAOHE,WAClBD,cACAH,cAAe,EACfC,aAAeG,SACfC,sBAMgB,KACZN,gBACAO,aAAaP,gBAEjBI,qBAMEE,KAAO,KACJL,cAAiBC,cAItBM,aACKC,MAAMC,WACEA,WACDP,mBAAsBA,mBAzCL,GA0CbA,mBAAqB,EA1CR,IA6CrBH,eAAiBW,YAAW,IAAML,QAAQJ,aAAeC,qBAClD,KAEVS,SASIJ,WAAa,eAACK,0EACjBC,mBAAqBC,SAASC,eAAe,6BAC7CC,MAAQH,mBAAmBI,QAAQD,MACnCE,QAAUL,mBAAmBI,QAAQC,eACpC,8BAAeF,MAAOE,QAASN,aACjCJ,MAAKW,OAEFA,KAAKC,oBAAsBD,KAAKE,gBAAiBF,KAAKE,cAAcC,QAC7DC,mBAAUC,iBAAiB,gCAAiCL,SAEtEX,MAAKiB,WAACC,KAACA,KAADC,GAAOA,gBAAQJ,mBAAUK,YAAYf,mBAAoBa,KAAMC,OACrEnB,MAAK,KAAM,IACXG,OAAOkB,iCACaA,KACV"}
+2 -2
View File
@@ -87,7 +87,7 @@ const poll = () => {
* @returns {Promise}
*/
export const updateRoom = (updatecache = false) => {
const bbbRoomViewElement = document.getElementById('bbb-room-view');
const bbbRoomViewElement = document.getElementById('bigbluebuttonbn-room-view');
const bbbId = bbbRoomViewElement.dataset.bbbId;
const groupId = bbbRoomViewElement.dataset.groupId;
return getMeetingInfo(bbbId, groupId, updatecache)
@@ -96,7 +96,7 @@ export const updateRoom = (updatecache = false) => {
data.haspresentations = !!(data.presentations && data.presentations.length);
return Templates.renderForPromise('mod_bigbluebuttonbn/room_view', data);
})
.then(({html, js}) => Templates.replaceNodeContents(bbbRoomViewElement, html, js))
.then(({html, js}) => Templates.replaceNode(bbbRoomViewElement, html, js))
.then(() => true)
.catch((ex) => {
displayException(ex);
+1
View File
@@ -117,6 +117,7 @@ class meeting_info extends external_api {
'cmid' => new external_value(PARAM_INT, 'CM id'),
'userlimit' => new external_value(PARAM_INT, 'User limit'),
'bigbluebuttonbnid' => new external_value(PARAM_RAW, 'bigbluebuttonbn instance id'),
'groupid' => new external_value(PARAM_INT, 'bigbluebuttonbn group id', VALUE_DEFAULT, 0),
'meetingid' => new external_value(PARAM_RAW, 'Meeting id'),
'openingtime' => new external_value(PARAM_INT, 'Opening time', VALUE_OPTIONAL),
'closingtime' => new external_value(PARAM_INT, 'Closing time', VALUE_OPTIONAL),
@@ -443,18 +443,18 @@ $string['view_message_notavailableyet'] = 'This session is not yet available.';
$string['view_recording_select_course'] = 'Select a course first in the drop down menu';
$string['view_message_session_started_at'] = 'This session started at';
$string['view_message_session_started_at'] = 'Session started at';
$string['view_message_session_running_for'] = 'This session has been running for';
$string['view_message_hour'] = 'hour';
$string['view_message_hours'] = 'hours';
$string['view_message_minute'] = 'minute';
$string['view_message_minutes'] = 'minutes';
$string['view_message_moderator'] = 'moderator';
$string['view_message_moderators'] = 'moderators';
$string['view_message_viewer'] = 'viewer';
$string['view_message_viewers'] = 'viewers';
$string['view_message_user'] = 'user';
$string['view_message_users'] = 'users';
$string['view_message_moderator'] = 'Moderator';
$string['view_message_moderators'] = 'Moderators';
$string['view_message_viewer'] = 'Viewer';
$string['view_message_viewers'] = 'Viewers';
$string['view_message_user'] = 'User';
$string['view_message_users'] = 'Users';
$string['view_message_has_joined'] = 'has joined';
$string['view_message_have_joined'] = 'have joined';
$string['view_message_session_no_users'] = 'There are no users in this session';
@@ -34,7 +34,7 @@
}} data-action="end"{{!
}} data-bbb-id="{{bigbluebuttonbnid}}"{{!
}} data-group-id="{{groupid}}"{{!
}} class="btn btn-secondary bbb-btn-action"{{!
}} class="btn btn-outline-dark bbb-btn-action m-1"{{!
}}>
{{#str}}view_conference_action_end, mod_bigbluebuttonbn{{/str}}
</a>
@@ -21,6 +21,8 @@
Example context (json):
{
"bigbluebuttonbnid": 1,
"groupid": 0,
"statusclosed": true,
"statusclosed": false,
"openingtime": 123456789,
@@ -28,71 +30,83 @@
}
}}
<div id="bbb-room-view" class="box py-3 generalbox boxaligncenter" data-bbb-id="{{bigbluebuttonbnid}}"
<div id="bigbluebuttonbn-room-view" class="box py-3 generalbox boxaligncenter d-flex flex-column flex-md-row" data-bbb-id="{{bigbluebuttonbnid}}"
data-group-id="{{groupid}}">
<span id="status_bar">
<span class="status-message">{{statusmessage}}</span>
<span class="conf-opening-time">
{{#openingtime}}
<span class="conf-opening">
{{#str}}mod_form_field_openingtime, bigbluebuttonbn{{/str}}:
{{#userdate}} {{.}}, {{#str}} strftimedaydatetime, langconfig {{/str}} {{/userdate}}
</span>
{{/openingtime}}
{{#closingtime}}
<span class="conf-closing">
{{#str}}mod_form_field_closingtime, bigbluebuttonbn{{/str}}:
{{#userdate}} {{.}}, {{#str}} strftimedaydatetime, langconfig {{/str}} {{/userdate}}
</span>
{{/closingtime}}
</span>
{{#statusrunning}}
<div>
<span>{{#str}}view_message_session_started_at, mod_bigbluebuttonbn{{/str}}</span>
<strong>{{#userdate}} {{startedat}}, {{#str}} strftimetime, core_langconfig{{/str}} {{/userdate}}</strong>
<span>
{{#moderatorplural}}{{#str}}view_message_moderators, mod_bigbluebuttonbn{{/str}}{{/moderatorplural}}
{{^moderatorplural}}{{#str}}view_message_moderator, mod_bigbluebuttonbn{{/str}}{{/moderatorplural}}
<strong>{{moderatorcount}}</strong>
</span>
<span>
{{#viewerplural}}{{#str}}view_message_viewers, mod_bigbluebuttonbn{{/str}}{{/viewerplural}}
{{^viewerplural}}{{#str}}view_message_viewer, mod_bigbluebuttonbn{{/str}}{{/viewerplural}}
<strong>{{participantcount}}</strong>.
</span>
</div>
{{/statusrunning}}
</span>
<div id="room_view_control_panel" data-bbb-id="{{bigbluebuttonbnid}}">
{{#haspresentations}}
<h4>{{#str}}view_section_title_presentation, mod_bigbluebuttonbn{{/str}}</h4>
<div class="list-group list-group-flush">
{{#presentations}}
<a href="{{url}}" target="_blank" class="list-group-item list-group-item-action">
{{#pix}}{{iconname}},core, {{icondesc}}{{/pix}}
{{name}}
</a>
{{/presentations}}
<div id="bigbluebuttonbn-information">
<div id="bigbluebuttonbn-status-bar" class="text-wrap">
{{#statusrunning}}
<div>
<span class="font-weight-bold">{{#str}}view_message_session_started_at, mod_bigbluebuttonbn{{/str}}:</span>
<span>{{#userdate}} {{startedat}}, {{#str}} strftimetime, core_langconfig{{/str}} {{/userdate}}.</span>
<span class="status-message">{{statusmessage}}</span>
</div>
{{/statusrunning}}
{{^statusrunning}}
<div class="status-message">{{statusmessage}}</div>
{{/statusrunning}}
<div class="conf-opening-time">
{{#openingtime}}
<span class="conf-opening">
<span class="font-weight-bold">{{#str}}mod_form_field_openingtime, bigbluebuttonbn{{/str}}:</span>
{{#userdate}} {{.}}, {{#str}} strftimedaydatetime, langconfig {{/str}} {{/userdate}}
</span>
{{/openingtime}}
{{#closingtime}}
<div class="conf-closing">
<span class="font-weight-bold">{{#str}}mod_form_field_closingtime, bigbluebuttonbn{{/str}}:</span>
{{#userdate}} {{.}}, {{#str}} strftimedaydatetime, langconfig {{/str}} {{/userdate}}
</div>
{{/closingtime}}
</div>
{{/haspresentations}}
{{#statusrunning}}
<div>
<span class="font-weight-bold">
{{#moderatorplural}}{{#str}}view_message_moderators, mod_bigbluebuttonbn{{/str}}{{/moderatorplural}}
{{^moderatorplural}}{{#str}}view_message_moderator, mod_bigbluebuttonbn{{/str}}{{/moderatorplural}}:
</span>
<span>{{moderatorcount}}</span>
</div>
<div>
<span class="font-weight-bold">
{{#viewerplural}}{{#str}}view_message_viewers, mod_bigbluebuttonbn{{/str}}{{/viewerplural}}
{{^viewerplural}}{{#str}}view_message_viewer, mod_bigbluebuttonbn{{/str}}{{/viewerplural}}:
</span>
<span>{{participantcount}}</span>
</div>
{{/statusrunning}}
</div>
<div id="bigbluebuttonbn-room-view-control-panel" data-bbb-id="{{bigbluebuttonbnid}}" class="mt-2">
{{#haspresentations}}
<h5>{{#str}}view_section_title_presentation, mod_bigbluebuttonbn{{/str}}</h5>
<div class="list-group list-group-flush">
{{#presentations}}
<a href="{{url}}" target="_blank" class="list-group-item list-group-item-action">
{{#pix}}{{iconname}},core, {{icondesc}}{{/pix}}
{{name}}
</a>
{{/presentations}}
</div>
{{/haspresentations}}
</div>
</div>
<div id="bigbluebuttonbn_view_action_button_box" class="box py-3 generalbox boxaligncenter">
<div id="room_view_action_buttons">
<div id="bigbluebuttonbn-view-action-button-box" class="mt-0 ml-auto mr-auto mr-md-0">
<div id="bigbluebuttonbn-room-view-action-buttons"
class="d-flex flex-column-reverse flex-md-row">
{{#ismoderator}}
{{> mod_bigbluebuttonbn/end_session_button}}
{{/ismoderator}}
{{#canjoin}}
<a {{!
}} href="{{{joinurl}}}"{{!
}} class="btn btn-primary bbb-btn-action"{{!
}} class="btn btn-primary bbb-btn-action m-1"{{!
}} data-action="join"{{!
}} target="_blank"{{!
}}>
{{#str}}view_conference_action_join, mod_bigbluebuttonbn{{/str}}
</a>
{{/canjoin}}
{{#ismoderator}}
{{> mod_bigbluebuttonbn/end_session_button}}
{{/ismoderator}}
</div>
</div>
</div>