185 lines
4.3 KiB
JavaScript
185 lines
4.3 KiB
JavaScript
|
webshim.ready('jmebase es5', function(){
|
||
|
var webshim = window.webshim;
|
||
|
var $ = webshim.$;
|
||
|
var jme = $.jme;
|
||
|
|
||
|
jme.defineProp('currentAlternateSrc', {
|
||
|
readonly: true,
|
||
|
get: function(elem){
|
||
|
var ret, prop;
|
||
|
var data = jme.data(elem);
|
||
|
var alternateSrces = data.media.jmeFn('getAlternateSrcData');
|
||
|
var currentSrc = data.media.prop('currentSrc');
|
||
|
|
||
|
if(currentSrc){
|
||
|
$.each(alternateSrces.groups, function(groupName, group){
|
||
|
if(group.srces.indexOf(currentSrc) != -1){
|
||
|
ret = group;
|
||
|
}
|
||
|
});
|
||
|
} else {
|
||
|
for(prop in alternateSrces.groups){
|
||
|
ret = alternateSrces[prop];
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
return ret;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
jme.defineMethod('getAlternateSrcData', function(srces){
|
||
|
var ret = {groups: {}, groupLength: 0};
|
||
|
var data = jme.data(this);
|
||
|
|
||
|
if(!srces){
|
||
|
srces = data.media.jmeProp('srces');
|
||
|
}
|
||
|
|
||
|
srces.forEach(function(src){
|
||
|
var group = src['data-alternate'];
|
||
|
|
||
|
if(!ret.groups[group]){
|
||
|
ret.groupLength++;
|
||
|
ret.groups[group] = {
|
||
|
group: group,
|
||
|
label: group,
|
||
|
srces: []
|
||
|
};
|
||
|
}
|
||
|
|
||
|
if(src['data-label'] || src.title){
|
||
|
ret.groups[group].label = src['data-label'] || src.title;
|
||
|
}
|
||
|
|
||
|
ret.groups[group].srces.push(src.src);
|
||
|
});
|
||
|
ret.srces = srces;
|
||
|
return ret;
|
||
|
|
||
|
});
|
||
|
|
||
|
jme.defineMethod('orderAlternateByName', function(names, srces){
|
||
|
var data = jme.data(this);
|
||
|
|
||
|
if(!srces){
|
||
|
srces = data.media.jmeProp('srces');
|
||
|
}
|
||
|
if(!Array.isArray(names)){
|
||
|
names = [names];
|
||
|
}
|
||
|
names.reverse();
|
||
|
srces.sort(function(src1, src2){
|
||
|
return names.indexOf(src2['data-alternate']) - names.indexOf(src1['data-alternate']);
|
||
|
});
|
||
|
data.media.jmeProp('srces', srces);
|
||
|
return srces;
|
||
|
});
|
||
|
|
||
|
jme.defineMethod('switchAlternateByName', function(names, srces){
|
||
|
var data = jme.data(this);
|
||
|
var isPaused = data.media.prop('paused');
|
||
|
var currentTime = data.media.prop('currentTime');
|
||
|
$(this).jmeFn('orderAlternateByName', names, srces);
|
||
|
|
||
|
if(currentTime > 1){
|
||
|
data.media.play();
|
||
|
data.media.one('loadedmetadata', function(){
|
||
|
if(isPaused){
|
||
|
data.media.pause();
|
||
|
}
|
||
|
data.media.prop('currentTime', currentTime);
|
||
|
});
|
||
|
}
|
||
|
if(!isPaused){
|
||
|
data.media.play();
|
||
|
}
|
||
|
});
|
||
|
|
||
|
|
||
|
function flattenSrces(src){
|
||
|
return src.src || src;
|
||
|
}
|
||
|
|
||
|
function isSameSrces(newSrces, oldScres){
|
||
|
var ret = true;
|
||
|
if(oldScres && newSrces.length === oldScres.length){
|
||
|
newSrces = newSrces.map(flattenSrces);
|
||
|
$.each(oldScres, function(i, src){
|
||
|
if(newSrces.indexOf(src.src || src) == -1){
|
||
|
ret = false;
|
||
|
return false;
|
||
|
}
|
||
|
});
|
||
|
} else {
|
||
|
ret = false;
|
||
|
}
|
||
|
return ret;
|
||
|
}
|
||
|
|
||
|
var radioGroup = 0;
|
||
|
|
||
|
function createGroupList(group){
|
||
|
return '<li role="presentation"><label><input type="radio" name="alternate-'+ radioGroup +'" value="'+ group.group +'" /><span>'+ group.label +'</span></label></li>';
|
||
|
}
|
||
|
|
||
|
jme.addToConfigmenu('alternate-media', function($container, media, base, menu){
|
||
|
var $menu, timer, alternateSrcData;
|
||
|
|
||
|
var itemChange = function(e){
|
||
|
var value = $.prop(e.target, 'value');
|
||
|
if(value && alternateSrcData && alternateSrcData.groups[value]){
|
||
|
media.jmeFn('switchAlternateByName', value, alternateSrcData.srces);
|
||
|
menu.hide();
|
||
|
}
|
||
|
};
|
||
|
var updateMenuItem = function(){
|
||
|
var current;
|
||
|
if($menu){
|
||
|
current = media.jmeProp('currentAlternateSrc');
|
||
|
if(current && current.group){
|
||
|
$('[value="'+ current.group +'"]', $menu).prop('checked', true);
|
||
|
}
|
||
|
|
||
|
}
|
||
|
};
|
||
|
var updateMenu = function(data){
|
||
|
if(!$menu || !alternateSrcData || !isSameSrces(data.srces, alternateSrcData.srces)){
|
||
|
alternateSrcData = data;
|
||
|
radioGroup++;
|
||
|
|
||
|
var list = $.map(alternateSrcData.groups, createGroupList);
|
||
|
if($menu){
|
||
|
$menu.remove();
|
||
|
}
|
||
|
$menu = $('<div class="media-submenu"><ul>'+ list.join('') +'</ul></div>').appendTo($container);
|
||
|
$menu.on('change', itemChange);
|
||
|
}
|
||
|
updateMenuItem();
|
||
|
};
|
||
|
|
||
|
var addRemoveMenu = function(){
|
||
|
var data = media.jmeFn('getAlternateSrcData');
|
||
|
if(data.groupLength){
|
||
|
updateMenu(data);
|
||
|
} else if($menu) {
|
||
|
$menu.remove();
|
||
|
$menu = null;
|
||
|
alternateSrcData = null;
|
||
|
}
|
||
|
};
|
||
|
var timedAddRemove = function(){
|
||
|
clearTimeout(timer);
|
||
|
timer = setTimeout(addRemoveMenu);
|
||
|
};
|
||
|
addRemoveMenu();
|
||
|
media.on('loadstart emptied', timedAddRemove);
|
||
|
media.on('loadedmetadata', updateMenuItem);
|
||
|
});
|
||
|
|
||
|
|
||
|
webshim.ready('jme-base', function(){
|
||
|
webshim.isReady('alternate-media', true);
|
||
|
});
|
||
|
});
|