lyric_Play.js

Bloglog

lyric_Play.js

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