mirror of
https://github.com/coderaiser/cloudcmd.git
synced 2026-01-23 10:45:47 +00:00
feature(view) audio -> media
This commit is contained in:
parent
a0df746f12
commit
124fb53ff5
3 changed files with 49 additions and 24 deletions
|
|
@ -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
4
html/view/media.html
Normal 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>
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue