Skip to content

Commit

Permalink
MDL-55324 atto_media: Implement HTML compliant media plugin
Browse files Browse the repository at this point in the history 
This patch completely reworks the atto media plugin to allow
insertion of HTML media elements.
  • Loading branch information
@cameorn1730
cameorn1730 committed Nov 23, 2016
1 parent a60a98d commit 28e93cc
Show file tree
Hide file tree
Showing 13 changed files with 3,119 additions and 264 deletions.
51 changes: 51 additions & 0 deletions lib/editor/atto/plugins/media/lang/en/atto_media.php
View file
Expand Up @@ -22,10 +22,61 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

$string['add'] = 'Add';
$string['addcaptionstrack'] = 'Add caption track';
$string['addchapterstrack'] = 'Add chapter track';
$string['adddescriptionstrack'] = 'Add description track';
$string['addmetadatatrack'] = 'Add metadata track';
$string['addsource'] = 'Add alternative source';
$string['addsource_help'] = 'It is recommended that an alternative media source is provided, since desktop and mobile browsers vary in which file formats they support.';
$string['addsubtitlestrack'] = 'Add subtitle track';
$string['addtrack'] = 'Add track';
$string['advancedsettings'] = 'Advanced settings';
$string['audio'] = 'Audio';
$string['audiosourcelabel'] = 'Audio source URL';
$string['autoplay'] = 'Play automatically';
$string['browserepositories'] = 'Browse repositories...';
$string['captions'] = 'Captions';
$string['captions_help'] = 'Captions may be used to describe everything happening in the track, including non-verbal sounds such as a phone ringing.';
$string['captionssourcelabel'] = 'Caption track URL';
$string['chapters'] = 'Chapters';
$string['chapters_help'] = 'Chapter titles may be provided for use in navigating the media resource.';
$string['chapterssourcelabel'] = 'Chapter track URL';
$string['controls'] = 'Show controls';
$string['createmedia'] = 'Insert media';
$string['default'] = 'Default';
$string['descriptions'] = 'Descriptions';
$string['descriptions_help'] = 'Audio descriptions may be used to provide a narration which explains visual details not apparent from the audio alone.';
$string['descriptionssourcelabel'] = 'Description track URL';
$string['displayoptions'] = 'Display options';
$string['entername'] = 'Enter name';
$string['entersource'] = 'Source URL';
$string['enterurl'] = 'Enter URL';
$string['height'] = 'Height';
$string['kind'] = 'Type';
$string['label'] = 'Label';
$string['languagesavailable'] = 'Languages available';
$string['languagesinstalled'] = 'Languages installed';
$string['link'] = 'Link';
$string['loop'] = 'Loop';
$string['metadata'] = 'Metadata';
$string['metadata_help'] = 'Metadata tracks, for use from a script, may be used only if the player supports metadata';
$string['metadatasourcelabel'] = 'Metadata track URL';
$string['mute'] = 'Muted';
$string['pluginname'] = 'Media';
$string['poster'] = 'Thumbnail URL';
$string['remove'] = 'Remove';
$string['size'] = 'Size';
$string['srclang'] = 'Language';
$string['subtitles'] = 'Subtitles';
$string['subtitles_help'] = 'Subtitles may be used to provide a transcription or translation of the dialogue.';
$string['subtitlessourcelabel'] = 'Subtitle track URL';
$string['track'] = 'Track URL';
$string['tracks'] = 'Subtitles and captions';
$string['tracks_help'] = 'Subtitles, captions, chapters and descriptions can be added via a WebVTT (Web Video Text Tracks) format file. Track labels will be shown in the selection dropdown menu. For each type of track, any track set as default will be pre-selected at the start of the video.';
$string['video'] = 'Video';
$string['videoheight'] = 'Video height';
$string['videosourcelabel'] = 'Video source URL';
$string['videowidth'] = 'Video width';
$string['width'] = 'Width';

97 changes: 94 additions & 3 deletions lib/editor/atto/plugins/media/lib.php
View file
Expand Up @@ -28,9 +28,100 @@
function atto_media_strings_for_js() {
global $PAGE;

$PAGE->requires->strings_for_js(array('createmedia',
'enterurl',
$PAGE->requires->strings_for_js(array('add',
'addcaptionstrack',
'addchapterstrack',
'adddescriptionstrack',
'addmetadatatrack',
'addsource',
'addsubtitlestrack',
'addtrack',
'advancedsettings',
'audio',
'audiosourcelabel',
'autoplay',
'browserepositories',
'browserepositories',
'captions',
'captionssourcelabel',
'chapters',
'chapterssourcelabel',
'controls',
'createmedia',
'default',
'descriptions',
'descriptionssourcelabel',
'displayoptions',
'entername',
'entername',
'browserepositories'),
'entersource',
'enterurl',
'height',
'kind',
'label',
'languagesavailable',
'languagesinstalled',
'link',
'loop',
'metadata',
'metadatasourcelabel',
'mute',
'poster',
'remove',
'size',
'srclang',
'subtitles',
'subtitlessourcelabel',
'track',
'tracks',
'video',
'videoheight',
'videosourcelabel',
'videowidth',
'width'),
'atto_media');
}

/**
* Sends the parameters to the JS module.
*
* @return array
*/
function atto_media_params_for_js() {
global $OUTPUT;
global $PAGE;
$currentlang = current_language();
$langsinstalled = get_string_manager()->get_list_of_translations(true);
$langsavailable = get_string_manager()->get_list_of_languages();
$params = [
'langs' => ['installed' => [], 'available' => []],
'help' => []
];

foreach ($langsinstalled as $code => $name) {
$params['langs']['installed'][] = [
'lang' => $name,
'code' => $code,
'default' => $currentlang == $code
];
}

foreach ($langsavailable as $code => $name) {
// See MDL-50829 for an explanation of this lrm thing.
$lrm = json_decode('"\u200E"');
$params['langs']['available'][] = [
'lang' => $name . ' ' . $lrm . '(' . $code . ')' . $lrm, 'code' => $code];
}

$params['help'] = [
'addsource' => $OUTPUT->help_icon('addsource', 'atto_media'),
'tracks' => $OUTPUT->help_icon('tracks', 'atto_media'),
'subtitles' => $OUTPUT->help_icon('subtitles', 'atto_media'),
'captions' => $OUTPUT->help_icon('captions', 'atto_media'),
'descriptions' => $OUTPUT->help_icon('descriptions', 'atto_media'),
'chapters' => $OUTPUT->help_icon('chapters', 'atto_media'),
'metadata' => $OUTPUT->help_icon('metadata', 'atto_media')
];

return $params;
}
106 changes: 106 additions & 0 deletions lib/editor/atto/plugins/media/styles.css
View file
@@ -0,0 +1,106 @@
.atto_form.atto_media #video input,
.atto_form.atto_media #audio input,
.atto_form.atto_media #link input {
box-sizing: border-box;
height: inherit;
}

.atto_form.atto_media > .tab-content {
max-height: 60vh;
overflow-x: hidden;
padding-left: 20px;
padding-right: 20px;
margin-left: -20px;
margin-right: -21px;
}

.atto_form.atto_media [id$="-advanced-settings"] label {
margin-right: 10px;
}

.atto_form.atto_media label {
display: inline-block;
}

.atto_form.atto_media label > span {
display: inline-block;
min-width: 6em;
}

.atto_form.atto_media .atto_media_track_lang_entry,
.atto_form.atto_media .atto_media_track_label_entry {
width: 168px;
}

.atto_form.atto_media .atto_media_track_source {
margin-bottom: 10px;
}

.atto_form.atto_media select {
margin-right: 10px;
}

.atto_form.atto_media [id$="-tracks"] input[type=checkbox] {
margin-left: 10px;
}

.atto_form.atto_media .atto_media_track ~ .atto_media_track {
margin-top: 5px;
padding-top: 10px;
border-top: 1px solid #e5e5e5;
}

.atto_form.atto_media label.fullwidth {
width: 100%;
}

.atto_media_postersize {
display: inline-block;
}

.atto_media_postersize input[type=text] {
width: 3em;
}

input[size].atto_media_url_entry {
width: calc(100% - 15px);
}

.openmediabrowser {
margin-top: -4px;
}

.addcomponent,
.removecomponent {
font-weight: bold;
margin-right: 10px;
}

.trackhelp {
text-align: right;
}

.atto_form.atto_media .atto_media_source > label {
width: calc(100% - 153px);
}

.atto_form.atto_media .atto_media_track_lang_entry,
.atto_form.atto_media .atto_media_track_label_entry {
width: 116px;
}

.langlabel {
width: 42%;
}

.labellabel {
width: 44%;
}

.defaultlabel {
width: 14%;
}

[data-medium-type=link] label {
width: 100%;
}
28 changes: 28 additions & 0 deletions lib/editor/atto/plugins/media/styles_clean.css
View file
@@ -0,0 +1,28 @@
.nav-tabs > .nav-item a.active {
color: #555;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}

.atto_form.atto_media .atto_media_track_lang_entry,
.atto_form.atto_media .atto_media_track_label_entry {
width: 124px;
}

.atto_form.atto_media .atto_media_source > label {
width: calc(100% - 168px);
}

.langlabel {
width: 42%;
}

.labellabel {
width: 44%;
}

.defaultlabel {
width: 14%;
}

0 comments on commit 28e93cc

Please sign in to comment.