chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add video_player_renderers configuration setting - refs BT#19897

Browse Source 
It allows to use MediaElement's renderers like YouTube or Vimeo
pull/4275/head
Angel Fernando Quiroz Campos 4 years ago
parent ba050692c7
commit c9523496f2
8 changed files with 151 additions and 89 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 11
      main/inc/lib/display.lib.php
  2. 176
      main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/dialogs/qmarkersrolls.js
  3. 4
      main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/en.js
  4. 5
      main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/es.js
  5. 12
      main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js
  6. 10
      main/inc/lib/template.lib.php
  7. 2
      main/install/configuration.dist.php
  8. 20
      main/template/default/javascript/editor/ckeditor/config_js.tpl

11
main/inc/lib/display.lib.php
Unescape View File

@ -2910,6 +2910,17 @@ HTML;
$videoPluginCssFiles .= '{type: "stylesheet", src: "'.$webJsPath.$file.'"},';
}
if ($renderers = api_get_configuration_sub_value('video_player_renderers/renderers')) {
foreach ($renderers as $renderName) {
if ('youtube' === $renderName) {
continue;
}
$file = $webPublicPath."assets/mediaelement/build/renderers/$renderName.min.js";
$videoPluginFiles .= '{type: "script", src: "'.$file.'"},';
}
}
$translateHtml = '';
$translate = api_get_configuration_value('translate_html');
if ($translate) {

176
main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/dialogs/qmarkersrolls.js
Unescape View File

@ -16,12 +16,12 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
currentMarkers = [],
colorDialog = editor.plugins.colordialog;
function initPlayer(selectedElement) {
fakeImage = selectedElement;
function initPlayer(dialog) {
fakeImage = dialog.getSelectedElement();
if (!fakeImage ||
!fakeImage.data( 'cke-real-element-type' ) ||
fakeImage.data( 'cke-real-element-type' ) != 'video'
'video' !== fakeImage.data('cke-real-element-type')
) {
return;
}
@ -32,10 +32,10 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
if (sourcesList.count() === 0) {
sourcesList = videoNode.getElementsByTag('source', 'cke');
}
if (sourcesList.count() === 0) {
return;
if (sourcesList.count() === 0) {
return;
}
}
var sourceNode = sourcesList.getItem(0);
@ -44,35 +44,57 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
return;
}
pgbProgress = document.getElementById('ck-qmr-progress');
pgbProgress.value = 0;
pgbProgress.min = 0;
pgbProgress.step = 1;
pgbProgress.onchange = function () {
player.currentTime = this.value;
document.getElementById('ck-qmr-current-time').textContent = encodeTime(this.value);
};
var playerContainer = document.getElementById('ck-qmr-player-container');
playerContainer.innerHTML = '';
player = document.createElement('video');
player.className = 'skip';
player.controls = false;
player.style.maxWidth = '100%';
player.style.minWidth = '100%';
player.onloadedmetadata = function () {
pgbProgress.max = Math.floor(player.duration);
playerContainer.appendChild(player);
};
player.src = sourceNode.getAttribute('src');
pgbProgress = CKEDITOR.document.getById('ck-qmr-progress');
pgbProgress.setAttributes({value: 0});
pgbProgress.on('change', function () {
var value = pgbProgress.getValue()
player.$.currentTime = value;
dialog.setValueOf('tab-markers', 'txt-hms', encodeTime(value));
});
pgbProgress.hide();
var playerContainer = CKEDITOR.document.getById('ck-qmr-player-container');
playerContainer.setHtml('');
playerContainer.hide();
var sourceType = sourceNode.getAttribute('type');
var embedVideoTypes = [
'video/dailymotion',
'video/facebook',
'video/twitch',
'video/vimeo',
'video/youtube',
];
var isEmbedVideo = -1 !== CKEDITOR.tools.indexOf(embedVideoTypes, sourceType);
if (isEmbedVideo) {
playerContainer.setText(lang.embedVideoSource + ' ' + sourceNode.getAttribute('src'));
playerContainer.show();
} else {
player = new CKEDITOR.dom.element('video');
player.setAttributes({
'class': 'skip',
src: sourceNode.getAttribute('src')
});
player.removeAttribute('controls');
player.setStyles({ maxWidth: '100%', maxHeight: '100%' });
player.on('loadedmetadata', function () {
pgbProgress.setAttribute('max', Math.floor(player.$.duration));
pgbProgress.show();
playerContainer.append(player);
playerContainer.show();
});
}
}
function decodeTime(time) {
var parts = time.split(':');
function decodeTime(tms) {
var parts = tms.split(':');
if (parts.length != 3) {
if (3 !== parts.length) {
return 0;
}
@ -221,19 +243,8 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
html: '<div id="ck-qmr-player-container"></div>'
},
{
type: 'hbox',
widths: ['100%', '200px'],
children: [
{
type: 'html',
html: '<input type="range" min="0" step="1" id="ck-qmr-progress">'
},
{
type: 'html',
title: 'Current Time',
html: '<span id="ck-qmr-current-time">00:00:00</span>'
},
]
type: 'html',
html: '<input type="range" min="0" step="1" id="ck-qmr-progress">'
},
{
type: 'hbox',
@ -246,35 +257,50 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
+ 'style="max-height: 110px; overflow: hidden auto; list-style: none;"></ul>'
},
{
type: 'button',
id: 'btn-assign',
label: lang.assignQuiz,
title: lang.assignQuiz,
onClick: function () {
var radioQuizzes = document.getElementsByName('ck_qmr_quiz'),
selected = null;
radioQuizzes.forEach(function (radio) {
if (!radio.checked) {
return;
type: 'vbox',
children: [
{
type: 'text',
id: 'txt-hms',
label: lang.time,
'default': '00:00:00'
},
{
type: 'button',
id: 'btn-assign',
label: lang.assignQuiz,
title: lang.assignQuiz,
onClick: function () {
var radioQuizzes = document.getElementsByName('ck_qmr_quiz'),
selected = null;
radioQuizzes.forEach(function (radio) {
if (!radio.checked) {
return;
}
selected = radio;
});
if (!selected) {
return;
}
var tms = this.getDialog()
.getContentElement('tab-markers', 'txt-hms')
.getValue();
currentMarkers.push([
decodeTime(tms),
parseInt(selected.value)
]);
displayCurrentMarkersList();
selected.parentElement.remove();
}
selected = radio;
});
if (!selected) {
return;
}
currentMarkers.push([
parseInt(pgbProgress.value),
parseInt(selected.value)
]);
displayCurrentMarkersList();
selected.parentElement.remove();
}
},
]
}
]
},
@ -344,9 +370,7 @@ CKEDITOR.dialog.add('qMarkersrollsDialog', function (editor) {
document.getElementById('ck-qmr-quizzes-container').innerHTML = '';
initPlayer(
dialog.getSelectedElement()
);
initPlayer(dialog);
currentMarkers = JSON.parse(
videoNode.getAttribute('data-q-markersrolls') || '[]'

4
main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/en.js
Unescape View File

@ -15,5 +15,7 @@ CKEDITOR.plugins.setLang('qmarkersrolls', 'en', {
assignQuiz: 'Assign quiz',
currentMarkers: 'Current Markers',
markerColor: 'Marker color',
choose: 'Choose'
choose: 'Choose',
time: 'Time',
embedVideoSource: 'Embed video source'
});

5
main/inc/lib/javascript/ckeditor/plugins/qmarkersrolls/lang/es.js
Unescape View File

@ -5,7 +5,6 @@
*
* This plugin allows set quizzes markers in video with mediaelement.
*/
CKEDITOR.plugins.setLang('qmarkersrolls', 'es', {
dialogTitle: 'Marcadores de exámenes',
setQuizMarkersRolls: 'Agregar marcadores de exámenes',
@ -16,5 +15,7 @@ CKEDITOR.plugins.setLang('qmarkersrolls', 'es', {
assignQuiz: 'Asignar examen',
currentMarkers: 'Marcadores actuales',
markerColor: 'Color del marcador',
choose: 'Elegir'
choose: 'Elegir',
time: 'Tiempo',
embedVideoSource: 'Fuente de video'
});

12
main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js
Unescape View File

@ -313,11 +313,7 @@ CKEDITOR.dialog.add( 'video', function ( editor )
label : lang.sourceType,
type : 'select',
'default' : 'video/mp4',
items :
[
[ 'MP4', 'video/mp4' ],
[ 'WebM', 'video/webm' ]
],
items : editor.config.videoTypes,
onChange: onChangeSrc,
commit : commitSrc,
setup : loadSrc
@ -353,11 +349,7 @@ CKEDITOR.dialog.add( 'video', function ( editor )
label : lang.sourceType,
type : 'select',
'default':'video/webm',
items :
[
[ 'MP4', 'video/mp4' ],
[ 'WebM', 'video/webm' ]
],
items : editor.config.videoTypes,
commit : commitSrc,
setup : loadSrc
}]

10
main/inc/lib/template.lib.php
Unescape View File

@ -765,6 +765,16 @@ class Template
'js-cookie/src/js.cookie.js',
];
if ($renderers = api_get_configuration_sub_value('video_player_renderers/renderers')) {
foreach ($renderers as $renderName) {
if ('youtube' === $renderName) {
continue;
}
$bowerJsFiles[] = "mediaelement/build/renderers/$renderName.min.js";
}
}
$viewBySession = api_get_setting('my_courses_view_by_session') === 'true';
if ($viewBySession || api_is_global_chat_enabled()) {

2
main/install/configuration.dist.php
Unescape View File

@ -1083,6 +1083,8 @@ ALTER TABLE portfolio_category ADD parent_id INT(11) NOT NULL DEFAULT 0;
// $_configuration['video_features'] = ['features' => ['speed']];
// Hide the context menu on video player
//$_configuration['video_context_menu_hidden'] = false;
// Enable player renderers for YouTube, Vimeo, Facebook, DailyMotion, Twitch medias
//$_configuration['video_player_renderers'] = ['renderers' => ['dailymotion', 'facebook', 'twitch', 'vimeo', 'youtube']];
// Disable token verification when sending a message
// $_configuration['disable_token_in_new_message'] = false;

20
main/template/default/javascript/editor/ckeditor/config_js.tpl
Unescape View File

@ -123,6 +123,26 @@ CKEDITOR.editorConfig = function (config) {
config.qMarkersRollsUrl = '{{ _p.web_ajax }}exercise.ajax.php?a=get_quiz_embeddable';
var videoTypesMap = {
dailymotion: 'DailyMotion',
facebook: 'Facebook',
twitch: 'Twitch',
vimeo: 'Vimeo',
youtube: 'YouTube'
};
config.videoTypes = [
[ 'MP4', 'video/mp4' ],
[ 'WebM', 'video/webm' ],
];
{% set video_renderers = 'video_player_renderers'|api_get_configuration_value %}
{% if video_renderers and video_renderers.renderers %}
{{ video_renderers.renderers|json_encode }}.forEach(function(rendererName) {
if (videoTypesMap.hasOwnProperty(rendererName)) {
config.videoTypes.push( [videoTypesMap[rendererName], 'video/' + rendererName] );
}
});
{% endif %}
config.font_names = "{{ font_names }}";
};

Write Preview
Loading…
Cancel
Save