var lyricPlay = {
processLyricStyles : function(lyricsJSON, offset, skew, view, config, override) {
//whitelist of style parameters & details on how to process them
var styleProcessing = {
textColor : function() {
view.style.color = lyricStyle.rgbaHexToCssDecimal(textStyles.textColor);
},
fontName : function() {
view.style.fontFamily = lyricsJSON.styles[0].texts.text.fontName.split(‘.’)[0] + “, Impact”;
config.fontName = lyricsJSON.styles[0].texts.text.fontName.split(‘.’)[0] + “, Impact”;
//console.log(“Specified font : ” + lyricsJSON.styles[0].texts.text.fontName.split(‘.’)[0]);
},
glowColorHighlight : function() {
},
textColorHighlight : function() {
},
glowRadius : function() {
},
strokeColorHighlight : function() {
//view.style.webkitTextStroke = textStyles.strokeWidth + “px ” + lyricStyle.rgbaHexToCssDecimal(textStyles.strokeColorHighlight);
},
transitionDuration : function() {
},
textCase : function() {
var textCase = lyricStyle.textCase(textStyles.textCase);
config.textCase = textCase;
view.style.textTransform = textCase;
},
strokeWidth : function() {
// THIS is not needed, already covered in strokeColor
},
lineSpacing : function() {
},
textShadowScale : function() {
},
textShadowColor : function() {
},
xRotation : function() {
},
yRotation : function() {
},
textColorBottom : function() {
var styling = ‘.lyricsCurrent { color: ‘ + lyricStyle.rgbaHexToCssDecimal(textStyles.textColorBottom) + ‘; } ‘;
lyricStyle.insertCSSNode(styling);
},
textColorTop : function() {
view.style.color = lyricStyle.rgbaHexToCssDecimal(textStyles.textColorTop);
},
textColorTopEnd : function() {
},
strokeColor : function() {
},
startAngle : function() {
},
yRotation : function() {
},
backgroundGradient : function() {
view.style.backgroundImage = lyricStyle.generateOldCSSGradient(scenes.scene.backgroundGradient, scenes.scene.backgroundAngle);
view.style.backgroundImage = lyricStyle.generateCSSGradient(scenes.scene.backgroundGradient, scenes.scene.backgroundAngle);
},
minFlicksCount: function() {
/*
* Flicking Example
*
* minFlicksCount: 5
* maxFlicksCount: 15
* flickingDurationMin: “0.5”
* flickingDurationMax: 1
*
*/
var textColourHighlight = lyricStyle.rgbaHexToCssDecimal(textStyles.textColorHighlight);
var glowColorHighlight = lyricStyle.rgbaHexToCssDecimal(textStyles.glowColorHighlight);
var strokeWidth = textStyles.strokeWidth *2;
var strokeColorHighlight = lyricStyle.rgbaHexToCssDecimal(textStyles.strokeColorHighlight);
var glowRadius = textStyles.glowRadius;
var flickerColor = ‘inherit’;
var flickerDuration = ( parseFloat(textStyles.flickingDurationMin) + parseFloat(textStyles.flickingDurationMax) ) / 2 ;
//Looks better at 0.4 – should this be hardcoded ?
flickerDuration = 0.4;
var flickerCount = parseInt( ( parseFloat(textStyles.minFlicksCount) + parseFloat(textStyles.maxFlicksCount) ) / 2 ) ;
//Looks better at 7 – should this be hardcoded ?
flickerCount = 7;
//no
glowColorHighlight = textColourHighlight;
textColourHighlight = ‘#F8F8F8’;
var styling = ‘#lyricsView .lyricsCurrent {-webkit-animation-duration: ‘+flickerDuration+’s; color: ‘ + textColourHighlight + ‘; -webkit-text-stroke: ‘ + strokeWidth + “px ” + glowColorHighlight + ‘; } ‘;
styling += ‘@-webkit-keyframes flicker { ‘ ;
for (var i =0, oddEven=0; i <= 100; i+=parseInt(100 / flickerCount), oddEven++ ) {
if (oddEven % 2) {
styling += i + ‘% {color:’+flickerColor+’;} ‘;
} else {
styling += i + ‘% {color:’ + textColourHighlight + ‘;} ‘;
}
}
styling += ‘}’;
lyricStyle.insertCSSNode(styling);
}
};
//End of style definitions
var scenes = lyricsJSON.styles[0].scenes;
var textStyles = lyricsJSON.styles[0].texts.text;
for (scene in scenes.scene) {
if( styleProcessing[scene]) {
//console.log(‘found: ‘, scene);
styleProcessingscene;
} else {
//console.log(‘not found: ‘, scene);
}
}
for (style in textStyles) {
if (override && override[style]) {
overridestyle;
} else {
if( styleProcessing[style] ) {
//console.log(‘found: ‘+style);
styleProcessingstyle;
} else {
//console.log(‘not found: ‘+style);
}
}
}
lyricStyle.loadCSS(config.style);
},
/*
* Visualisation: hitchcock
*
*/
hitchcock : {
config : {
type : “carousel”,
lineWidth : 380,
wordsPerLine : 4,
resizeFonts : true,
enableCopy : true, // enable duplicate elements for shadow
style : “hitchcock”
},
init : function(lyricsJSON, offset, skew, view, container) {
lyricPlay.processLyricStyles(lyricsJSON, offset, skew, view, this.config);
return this.config;
}
},
/*
* Visualisation: stack
*
/
stack : {
config : {
type : “list”,
lineWidth : 360,
wordsPerLine : 5,
resizeFonts : true,
linePosition: 910,
style : “stack”
},
init : function(lyricsJSON, offset, skew, view, container) {
lyricPlay.processLyricStyles(lyricsJSON, offset, skew, view, this.config);
return this.config;
}
},
/
* Visualisation: perspective
*
*/
perspective : {
config : {
type : “list”,
lineWidth : 340,
wordsPerLine : 3,
resizeFonts : true,
linePosition: 1333,
style : “perspective”,
reverseDirection : true
},
init : function(lyricsJSON, offset, skew, view, container) {
var override = {
textColor: function() {
view.style.color = lyricStyle.rgbaHexToCssDecimal(lyricsJSON.styles[0].texts.text.textColorTop);
}
}
lyricPlay.processLyricStyles(lyricsJSON, offset, skew, view, this.config, override);
return this.config;
}
},
/*
* Visualisation: illuminate
*
*/
illuminate : {
config : {
type : “paged”,
lineWidth : 420,
wordsPerLine : 4,
resizeFonts : true,
style : “illuminate”
},
init : function(lyricsJSON, offset, skew, view, container) {
/* 3D Box Effect */
var cube = byId(‘lyricsContainer’);
var cubeRotateY = -0;
var frontFace = byId(‘page1’);
var frontFaceRotateY = 0;
var rightFace = byId(‘page2’);
var rightFaceRotateY = 90;
var _i = 0;
cube.style.webkitTransitionDuration = “2s”;
document.addEventListener(‘pageTurn1’, rotateEvent);
document.addEventListener(‘pageTurn2’, rotateEvent);
function rotateEvent() {
cubeRotateY -= 90;
_i++;
if(_i % 2) {
lyricPlayer.fitVertically(frontFace,320);
lyricPlayer.fitVertically(rightFace,320);
frontFaceRotateY -= 180;
frontFace.style.webkitTransform = ‘rotateY(‘+frontFaceRotateY+’deg) translateZ(240px)’;
} else {
lyricPlayer.fitVertically(frontFace,320);
lyricPlayer.fitVertically(rightFace,320);
rightFaceRotateY -= 180;
rightFace.style.webkitTransform = ‘rotateY(‘+rightFaceRotateY+’deg) translateZ(240px)’;
}
cube.style.webkitTransform = ‘rotateX(0deg) translateZ(-260px) rotateY(‘+ cubeRotateY +’deg)’;
}
lyricPlay.processLyricStyles(lyricsJSON, offset, skew, view, this.config);
return this.config;
}
},
showInfo : function(offset, skew, lyricConfig) {
var infoElement = document.createElement(‘div’);
infoElement.setAttribute(‘id’,”info”);
//document.body.appendChild(resizerElement);
byId(“lyricsView”).appendChild(infoElement);
infoElement.setAttribute(‘style’, ‘font-size:12px; text-align:left; font-family:arial; position:absolute; opacity: 0.7; color: black; top:0px; width:200px; z-index:1000; border:1px solid black; background-color:white;’);
infoElement.innerHTML = “Info:“;
infoElement.innerHTML += ”
Offset: ” + offset;
infoElement.innerHTML += ”
Skew: ” + skew;
infoElement.innerHTML += ”
Font: ” + lyricConfig.fontName;
infoElement.innerHTML += ”
RSkew”;
},
play : function (lyricsJSON, offset, skew, debug) {
var view = byId(“lyricsView”);
var container = byId(“lyricsContainer”);
skew = parseFloat(skew);
console.log(“lyrics style found: ” + lyricsJSON.styles[0].texts.effect);
var lyricConfig = this[lyricsJSON.styles[0].texts.effect].init(lyricsJSON, offset, skew, view, container);
if (debug == true) this.showInfo(offset, skew, lyricConfig);
setTimeout(function() {
lyricPlayer.show(lyricsJSON, offset + 1, skew, lyricConfig);
}, 1000);
}
}
