feature(view) audio -> media

This commit is contained in:
coderaiser 2014-04-25 10:14:08 -04:00
parent a0df746f12
commit 124fb53ff5
3 changed files with 49 additions and 24 deletions

View file

@ -1,4 +0,0 @@
<div id="js-audio">
<audio src="{{ src }}" controls autoplay></audio>
<p class="reduce-text"><strong>{{ name }}</strong></p>
</div>

4
html/view/media.html Normal file
View file

@ -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>

View file

@ -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();
}