From 124fb53ff51d820b8086ad12a112ca0658047101 Mon Sep 17 00:00:00 2001
From: coderaiser <mnemonic.enemy@gmail.com>
Date: Fri, 25 Apr 2014 10:14:08 -0400
Subject: [PATCH] feature(view) audio -> media

---
 html/view/audio.html |  4 ---
 html/view/media.html |  4 +++
 lib/client/view.js   | 65 ++++++++++++++++++++++++++++++--------------
 3 files changed, 49 insertions(+), 24 deletions(-)
 delete mode 100644 html/view/audio.html
 create mode 100644 html/view/media.html

diff --git a/html/view/audio.html b/html/view/audio.html
deleted file mode 100644
index c336dce8..00000000
--- a/html/view/audio.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div id="js-audio">
-    <audio src="{{ src }}" controls autoplay></audio>
-    <p class="reduce-text"><strong>{{ name }}</strong></p>
-</div>
\ No newline at end of file
diff --git a/html/view/media.html b/html/view/media.html
new file mode 100644
index 00000000..aa8ad654
--- /dev/null
+++ b/html/view/media.html
@@ -0,0 +1,4 @@
+<div id="js-audio">
+    <{{ type }} data-name="js-media" class="media" src="{{ src }}" controls autoplay></{{ type }}>
+    <p class="reduce-text"><strong>{{ name }}</strong></p>
+</div>
\ No newline at end of file
diff --git a/lib/client/view.js b/lib/client/view.js
index db373420..fbb05634 100644
--- a/lib/client/view.js
+++ b/lib/client/view.js
@@ -101,16 +101,16 @@ var CloudCmd, Util, DOM, CloudFunc, $;
                         }, Config);
                         
                         $.fancybox.open(path, config);
-                    } else if (isMusic(path))
-                        getMusicElement(path, function(element) {
-                            var audio       = element.querySelector('audio'),
-                                onKey       = Util.bind(onMusicKey, audio);
+                    } else if (isMedia(path))
+                        getMediaElement(path, function(element) {
+                            var media       = DOM.getByDataName('js-media', element),
+                                onKey       = Util.bind(onMediaKey, media);
                                 
                             $.fancybox.open(element, {
                                 parent      : Overlay,
                                 beforeShow  : function() {
                                     Config.beforeShow();
-                                    musicBeforeShow();
+                                    mediaBeforeShow();
                                     Events.addKey(onKey);
                                 },
                                 beforeClose : function() {
@@ -145,10 +145,18 @@ var CloudCmd, Util, DOM, CloudFunc, $;
             return isMatch;
         }
         
-        function isMusic(name) {
+        function isMedia(name) {
+            var isMatch;
+            
+            isMatch     = isAudio(name) || isVideo(name);
+            
+            return isMatch;
+        }
+        
+        function isAudio(name) {
             var isMatch,
                 isStr       = Util.isString(name),
-                exts        = '.mp3|.mp4',
+                exts        = '.mp3|.ogg',
                 extsReg     = new RegExp(exts);
             
             if (isStr)
@@ -157,15 +165,32 @@ var CloudCmd, Util, DOM, CloudFunc, $;
             return isMatch;
         }
         
-        function getMusicElement(src, callback) {
-            CloudCmd.getTemplate(TemplateAudio, 'view/audio', function(template) {
-                var rendered, element;
+        function isVideo(name) {
+            var isMatch,
+                isStr       = Util.isString(name),
+                exts        = '.mp4|.avi',
+                extsReg     = new RegExp(exts);
+            
+            if (isStr)
+                isMatch     = name.match(extsReg);
+            
+            return isMatch;
+        }
+        
+        function getMediaElement(src, callback) {
+            CloudCmd.getTemplate(TemplateAudio, 'view/media', function(template) {
+                var rendered, element, type, is,
+                    name = Info.name;
                 
                 if (!TemplateAudio)
                     TemplateAudio   = template;
                 
+                is      = isAudio(name);
+                type    =  is ? 'audio' : 'video';
+                
                 rendered    = Util.render(TemplateAudio, {
-                    src: src,
+                    src : src,
+                    type: type,
                     name: Info.name
                 });
                 
@@ -174,23 +199,23 @@ var CloudCmd, Util, DOM, CloudFunc, $;
             });
         }
         
-        function onMusicKey(audio, event) {
+        function onMediaKey(media, event) {
             var key = event.keyCode;
             
             if (key === Key.SPACE) {
-                if (audio.paused)
-                    audio.play();
+                if (media.paused)
+                    media.play();
                 else
-                    audio.pause();
+                    media.pause();
             }
         }
         
-        function musicBeforeShow() {
-            var audioDiv    = $('#js-audio'),
-                audio       = audioDiv.find('audio'),
-                width       = audio.width() +'px';
+        function mediaBeforeShow() {
+            var $media      = $('[data-name="js-media"'),
+                width       = $media.width() +'px',
+                $parent     = $media.parent();
             
-            audioDiv.width(width);
+            $parent.width(width);
             
             Key.unsetBind();
         }