Fix track time text so that it doesn't overlap others

Change-Id: I4cf4fda4a7708239a7ce7e50e38f62133901a2a1
Signed-off-by: brianjjones <brian.j.jones@intel.com>

diff --git a/js/audioPlayer.js b/js/audioPlayer.js
index 2397a49..cebc9cb 100644 (file)
--- a/js/audioPlayer.js
+++ b/js/audioPlayer.js
@@ -198,11 +198,15 @@ AudioPlayer.prototype.updateTrackTime = function()
        else
                timeText += "00:00";
 
-
        var trackTimeText = new TextObject(trackTimeCTX,{"text" : timeText, "xLoc" : textStartX, "yLoc" : 50, "zLoc" : 0,
                                                                "width" : mediaNameCanvas.width - textStartX, "height" : 20, "lineHeight" : 20, "wordWrap" : false});
 
-       trackTimeText.applyTemplate(timeTemplate);
+       if (screenOrientation === "portrait")
+       {
+               trackTimeText.applyTemplate(timeTemplate);
+       }
+       else
+               trackTimeText.applyTemplate(timeTemplateLandscape);
        trackTimeCTX.clearRect(0, 0, trackTimeCanvas.width, trackTimeCanvas.height);
 
        trackTimeText.yLoc = ((playBarHeight - boxWidth) / 2) + boxWidth;

diff --git a/js/main.js b/js/main.js
index 1a85b28..313fcb3 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -43,13 +43,13 @@ var playBarHeight;
 var boxWidth;
 var textStartX;
 
-var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 30pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
+var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 18pt arial", "lineWidth" : 6.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
                "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
 
 var mainMenuTitleTemplate = {"font" : "oblique bolder 40pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
                "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
 
-var mainTrackTemplateLandscape = {"font" : "bold 20pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
+var mainTrackTemplateLandscape = {"font" : "bold 16pt Arial", "lineWidth" : 4.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
                "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
 
 var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
@@ -58,6 +58,9 @@ var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillSty
 var timeTemplate = {"font" : "bold 25pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
                "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
 
+var timeTemplateLandscape = {"font" : "bold 6pt Arial", "lineWidth" : 3.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
+               "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};             
+
 var mediaTextTemplate2 = {"font" : "bold 20pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
                "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};