Skip to content

Commit

Permalink
Media plugin now supports audio media using embedded tag
Browse files Browse the repository at this point in the history
  • Loading branch information
Jason Frame committed Sep 23, 2011
1 parent 804cf5e commit 055cb25
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 19 deletions.
51 changes: 46 additions & 5 deletions jscripts/tiny_mce/plugins/media/editor_plugin_src.js
Expand Up @@ -24,6 +24,7 @@
["Silverlight", "dfeaf541-f3e1-4c24-acac-99c30715084a", "application/x-silverlight-2"],
["Iframe"],
["Video"],
["EmbeddedAudio"],
["Audio"]
];

Expand Down Expand Up @@ -370,7 +371,7 @@

data = node.attr('data-mce-json');
if (!data)
return;
return;

data = JSON.parse(data);
typeItem = this.getType(node.attr('class'));
Expand Down Expand Up @@ -494,6 +495,28 @@
data.params.src = '';
}

if (typeItem.name === 'EmbeddedAudio') {
embed = new Node('embed', 1);
embed.shortEnded = true;
embed.attr({
id: node.attr('id'),
width: node.attr('width'),
height: node.attr('height'),
style : style,
type: node.attr('type')
});

for (name in data.params)
embed.attr(name, data.params[name]);

tinymce.each(rootAttributes, function(name) {
if (data[name] && name != 'type')
embed.attr(name, data[name]);
});

data.params.src = '';
}

// Do we have a params src then we can generate object
if (data.params.src) {
// Is flv movie add player for it
Expand Down Expand Up @@ -596,8 +619,11 @@
}
}

if (video || audio || object)
node.replace(video || audio || object);
var n = video || audio || object || embed;
if (n) {
n.attr('class', 'mceItemMedia mceItem' + (typeItem.name || 'Flash'));
node.replace(n);
}
else
node.remove();
},
Expand All @@ -624,6 +650,15 @@
}).serialize(node);
};

function lookupAttribute(o, attr) {
return lookup[o.attr(attr).toLowerCase() || ''];
}

function lookupExtension(src) {
var ext = src.replace(/^.*\.([^.]+)$/, '$1');
return lookup[ext.toLowerCase() || ''];
}

// If node isn't in document
if (!node.parent)
return;
Expand Down Expand Up @@ -777,10 +812,16 @@
}

if (object && !type)
type = (lookup[(object.attr('clsid') || object.attr('classid') || object.attr('type') || '').toLowerCase()] || {}).name;
type = (lookupAttribute(object, 'clsid') || lookupAttribute(object, 'classid') || lookupAttribute(object, 'type') || {}).name;

if (embed && !type)
type = (lookup[(embed.attr('type') || '').toLowerCase()] || {}).name;
type = (lookupAttribute(embed, 'type') || lookupExtension(data.params.src) || {}).name;

// for embedded audio we preserve the original specified type
if (embed && type == 'EmbeddedAudio') {
data.params.type = embed.attr('type');
}


// Replace the video/object/embed element with a placeholder image containing the data
node.replace(img);
Expand Down
26 changes: 25 additions & 1 deletion jscripts/tiny_mce/plugins/media/js/media.js
Expand Up @@ -77,6 +77,8 @@
if (isVisible('filebrowser_poster'))
get('video_poster').style.width = '220px';

editor.dom.setOuterHTML(get('media_type'), this.getMediaTypeHTML(editor));

this.data = tinyMCEPopup.getWindowArg('data');
this.dataToForm();
this.preview();
Expand Down Expand Up @@ -209,6 +211,7 @@
get('shockwave_options').style.display = 'none';
get('windowsmedia_options').style.display = 'none';
get('realmedia_options').style.display = 'none';
get('embeddedaudio_options').style.display = 'none';

if (get(data.type + '_options'))
get(data.type + '_options').style.display = 'block';
Expand All @@ -222,6 +225,7 @@
setOptions('realmedia', 'autostart,loop,autogotourl,center,imagestatus,maintainaspect,nojava,prefetch,shuffle,console,controls,numloop,scriptcallbacks');
setOptions('video', 'poster,autoplay,loop,muted,preload,controls');
setOptions('audio', 'autoplay,loop,preload,controls');
setOptions('embeddedaudio', 'autoplay,loop,controls');
setOptions('global', 'id,name,vspace,hspace,bgcolor,align,width,height');

if (to_form) {
Expand Down Expand Up @@ -379,11 +383,31 @@
}

return "";
},

getMediaTypeHTML : function(editor) {
var html = "";
html += '<select id="media_type" name="media_type" onchange="Media.formToData(\'type\');">';
html += '<option value="video">HTML5 Video</option>';
html += '<option value="audio">HTML5 Audio</option>';
html += '<option value="flash">Flash</option>';
html += '<option value="quicktime">QuickTime</option>';
html += '<option value="shockwave">Shockwave</option>';
html += '<option value="windowsmedia">Windows Media</option>';
html += '<option value="realmedia">Real Media</option>';
html += '<option value="iframe">Iframe</option>';

if (editor.getParam('media_embedded_audio', false)) {
html += '<option value="embeddedaudio">Embedded Audio</option>';
}

html += '</select>';
return html;
}
};

tinyMCEPopup.requireLangPack();
tinyMCEPopup.onInit.add(function() {
Media.init();
});
})();
})();
2 changes: 1 addition & 1 deletion jscripts/tiny_mce/plugins/media/langs/en_dlg.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 37 additions & 12 deletions jscripts/tiny_mce/plugins/media/media.htm
Expand Up @@ -29,16 +29,7 @@
<tr>
<td><label for="media_type">{#media_dlg.type}</label></td>
<td>
<select id="media_type" name="media_type" onchange="Media.formToData('type');">
<option value="video">HTML5 Video</option>
<option value="audio">HTML5 Audio</option>
<option value="flash">Flash</option>
<option value="quicktime">QuickTime</option>
<option value="shockwave">Shockwave</option>
<option value="windowsmedia">Windows Media</option>
<option value="realmedia">Real Media</option>
<option value="iframe">Iframe</option>
</select>
<select id="media_type"></select>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -214,6 +205,41 @@
</table>
</fieldset>

<fieldset id="embeddedaudio_options">
<legend>{#media_dlg.embedded_audio_options}</legend>

<table role="presentation" border="0" cellpadding="4" cellspacing="0">
<tr>
<td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="checkbox" class="checkbox" id="embeddedaudio_autoplay" name="audio_autoplay" onchange="Media.formToData();" /></td>
<td><label for="audio_autoplay">{#media_dlg.play}</label></td>
</tr>
</table>
</td>

<td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="checkbox" class="checkbox" id="embeddedaudio_loop" name="audio_loop" onchange="Media.formToData();" /></td>
<td><label for="audio_loop">{#media_dlg.loop}</label></td>
</tr>
</table>
</td>

<td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="checkbox" class="checkbox" id="embeddedaudio_controls" name="audio_controls" onchange="Media.formToData();" /></td>
<td><label for="audio_controls">{#media_dlg.controls}</label></td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>

<fieldset id="audio_options">
<legend>{#media_dlg.html5_audio_options}</legend>

Expand Down Expand Up @@ -246,7 +272,7 @@
<td><label for="audio_preload">{#media_dlg.preload}</label></td>
<td>
<select id="audio_preload" name="audio_preload" onchange="Media.formToData();">
<option value="none">{#media_dlg.preload_none}</option>
<option value="none">{#media_dlg.preload_none}</option>
<option value="metadata">{#media_dlg.preload_metadata}</option>
<option value="auto">{#media_dlg.preload_auto}</option>
</select>
Expand Down Expand Up @@ -286,7 +312,6 @@
</table>
</fieldset>


<fieldset id="flash_options">
<legend>{#media_dlg.flash_options}</legend>

Expand Down
Expand Up @@ -45,5 +45,6 @@ font[face=mceinline] {font-family:inherit !important}
.mceItemRealMedia {background-image:url(../../img/realmedia.gif)}
.mceItemVideo {background-image:url(../../img/video.gif)}
.mceItemAudio {background-image:url(../../img/video.gif)}
.mceItemEmbeddedAudio {background-image:url(../../img/video.gif)}
.mceItemIframe {background-image:url(../../img/iframe.gif)}
.mcePageBreak {display:block;border:0;width:100%;height:12px;border-top:1px dotted #ccc;margin-top:15px;background:#fff url(../../img/pagebreak.gif) no-repeat center top;}

0 comments on commit 055cb25

Please sign in to comment.