Add inline support for media formats

diff --git a/www/images/play.png b/www/images/play.png
new file mode 100644 (file)
index 0000000..90ba32d
Binary files /dev/null and b/www/images/play.png differ

diff --git a/www/index.html b/www/index.html
index c1db6e9..42a1c01 100644 (file)
--- a/www/index.html
+++ b/www/index.html
@@ -9,6 +9,7 @@
 <script type="text/javascript" src="js/prototype.js"></script>
 <script type="text/javascript" src="js/Bytex64.FX.js"></script>
 <script type="text/javascript" src="js/blerg.js"></script>
+<script type="text/javascript" src="js/blergmedia.js"></script>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0"/>
 </head>

diff --git a/www/js/blerg.js b/www/js/blerg.js
index 83a8a88..83483fa 100644 (file)
--- a/www/js/blerg.js
+++ b/www/js/blerg.js
@@ -404,6 +404,25 @@ function mangleRecord(record, template) {
         l = l.replace(/(\s|^)(https?:\/\/[a-zA-Z0-9.-]*[a-zA-Z0-9](\/([^\s"]*[^.!,;?()\s])?)?)/g, '$1<a href="$2">$2</a>');
 
         // Turn markdown links into links
+        var re;
+
+        // Craft a regex that finds URLs that end in the extensions specified by BlergMedia.audioExtensions.
+        re = new RegExp('(\\s|^)\\[([^\\]]+)\\]\\((https?:\\/\\/[a-zA-Z0-9.-]*[a-zA-Z0-9]\\/[^)"]*?\\.(' + BlergMedia.audioExtensions.join('|') + '))\\)', 'g');
+        l = l.replace(re, '$1<a href="$3">$2</a> <a href="$3" onclick="play_audio(); return false"><img src="/images/play.png"></a>');
+
+        // Ditto, but use the extended markdown link syntax to specify the format
+        re = new RegExp('(\\s|^)\\[([^\\]]+)\\]\\((https?:\\/\\/[a-zA-Z0-9.-]*[a-zA-Z0-9](\\/[^)"]*?)?)\\s+audio:(' + BlergMedia.audioExtensions.join('|') + ')\\)', 'g');
+        l = l.replace(re, '$1<a href="$3">$2</a> <a href="$3" onclick="play_audio(); return false"><img src="/images/play.png"></a>');
+
+        // Craft a regex that finds URLs that end in the extensions specified by BlergMedia.videoExtensions.
+        re = new RegExp('(\\s|^)\\[([^\\]]+)\\]\\((https?:\\/\\/[a-zA-Z0-9.-]*[a-zA-Z0-9]\\/[^)"]*?\\.(' + BlergMedia.videoExtensions.join('|') + '))\\)', 'g');
+        l = l.replace(re, '$1<a href="$3">$2</a> <a href="$3" onclick="play_video(); return false"><img src="/images/play.png"></a>');
+
+        // Ditto, but use the extended markdown link syntax to specify the format
+        re = new RegExp('(\\s|^)\\[([^\\]]+)\\]\\((https?:\\/\\/[a-zA-Z0-9.-]*[a-zA-Z0-9](\\/[^)"]*?)?)\\s+video:(' + BlergMedia.videoExtensions.join('|') + ')\\)', 'g');
+        l = l.replace(re, '$1<a href="$3">$2</a> <a href="$3" onclick="play_video(); return false"><img src="/images/play.png"></a>');
+
+        // Regular markdown links
         l = l.replace(/(\s|^)\[([^\]]+)\]\((https?:\/\/[a-zA-Z0-9.-]*[a-zA-Z0-9](\/[^)"]*?)?)\)/g, '$1<a href="$3">$2</a>');
 
         // Turn *foo* into italics and **foo** into bold

diff --git a/www/js/blergmedia.js b/www/js/blergmedia.js
new file mode 100644 (file)
index 0000000..0528a9b
--- /dev/null
+++ b/www/js/blergmedia.js
@@ -0,0 +1,58 @@
+var BlergMedia = {
+    audioExtensions: [],
+    videoExtensions: []
+};
+
+function media_init() {
+    var e = document.createElement('audio');
+    if (!!e.canPlayType) {
+        BlergMedia.has_audio = true;
+        if (e.canPlayType('audio/mpeg; codecs="mp3"')) {
+            BlergMedia.has_mp3 = true;
+            BlergMedia.audioExtensions.push('mp3');
+        }
+        if (e.canPlayType('audio/ogg; codecs="vorbis"')) {
+            BlergMedia.has_vorbis = true;
+            BlergMedia.audioExtensions.push('ogg', 'oga');
+        }
+        if (e.canPlayType('audio/wav')) {
+            BlergMedia.has_wav = true;
+            BlergMedia.audioExtensions.push('wav');
+        }
+    }
+
+    var e = document.createElement('video');
+    if (!!e.canPlayType) {
+        BlergMedia.has_video = true;
+        if (e.canPlayType('video/mp4; codecs="avc"')) {
+            BlergMedia.has_h264 = true;
+            BlergMedia.videoExtensions.push('mp4');
+        }
+        if (e.canPlayType('video/ogg; codecs="theora, vorbis"')) {
+            BlergMedia.has_theora = true;
+            BlergMedia.videoExtensions.push('ogv');
+        }
+        if (e.canPlayType('video/webm; codecs="vp8, vorbis"')) {
+            BlergMedia.has_webm = true;
+            BlergMedia.videoExtensions.push('webm');
+        }
+    }
+}
+
+function play_audio() {
+    var e = event.target.parentElement;
+    var url = event.target.parentElement.href;
+    var audio_element = new Element('audio', {src: url, controls: 1, autoplay: 1});
+    e.replace(audio_element);
+}
+
+function play_video() {
+    var e = event.target.parentElement;
+    var url = event.target.parentElement.href;
+    var p = new Element('p');
+    var video_element = new Element('video', {src: url, controls: 1, autoplay: 1});
+    p.insert(video_element);
+    e.replace(p);
+}
+
+window.addEventListener('load', media_init, false);