Update samples with meta viewport; version up

[profile/ivi/sdk/web-sample-build.git] / samples / web / Sample / Tizen / Web App / MediaPlayer / project / js / main.js

diff --git a/samples/web/Sample/Tizen/Web App/MediaPlayer/project/js/main.js b/samples/web/Sample/Tizen/Web App/MediaPlayer/project/js/main.js
index d278d89..3f27f62 100644 (file)
--- a/samples/web/Sample/Tizen/Web App/MediaPlayer/project/js/main.js
+++ b/samples/web/Sample/Tizen/Web App/MediaPlayer/project/js/main.js
@@ -33,10 +33,15 @@ var mediaListItemH;
 var playOnConnect = false;
 var mediaNameCanvas;
 var mediaNameCTX;
+var trackTimeCanvas;
+var trackTimeCTX;
 var speechObj;
 var nightMode = false;
 var waitingToResumeVideo = false;              //Media has been paused by exterior forces.  If set to true, resume previous media when given the signal.
 var stopServerSearch;
+var playBarHeight;
+var boxWidth;
+var textStartX;
 
 var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 30pt 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)"};
@@ -50,6 +55,9 @@ var mainTrackTemplateLandscape = {"font" : "bold 20pt Arial", "lineWidth" : 7.5,
 var mainTrackTemplate = {"font" : "bold 30pt 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 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 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)"};
 
@@ -57,10 +65,10 @@ var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillSt
 
 var trackTextTemplate  = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
 
-var mediaTextTemplate2Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
+var mediaTextTemplate2Landscape = {"font" : "bold 13pt 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)"};
 
-var mediaTextTemplate3Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
+var mediaTextTemplate3Landscape = {"font" : "bold 13pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
 
 var trackTextTemplateLandscape  = {"font" : "bold 11pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
 
@@ -193,8 +201,13 @@ function getMedia(callback, filterType)
 {
        console.log("MediaPlayer in getMedia");
        var manager = tizen.content;
-       var filter = new tizen.AttributeFilter("type", "EXACTLY", filterType);
-       manager.find(callback, onError, null, filter);
+       if (manager)
+       {
+               var filter = new tizen.AttributeFilter("type", "EXACTLY", filterType);
+               manager.find(callback, onError, null, filter);
+       }
+       else
+               console.log("MediaPlayer failed to receive media, tizen.content is unavailable");
 }
 
 function showMediaMenu()
@@ -206,6 +219,7 @@ function showMediaMenu()
        {
                case "audio":
                        $("#mediaName").show();
+                       $("#trackTime").show();
                        $(".sortButton").show();
                        currentPlayer.show();
 
@@ -361,6 +375,7 @@ function showMainMenu()
        $(".navButton").hide();
        $(".sortButton").hide();
        $("#mediaName").hide();
+       $("#trackTime").hide();
        $(".player").hide();
        $(".mainButton").css({"opacity": "100"});
        $(".mainButton").show();
@@ -468,10 +483,10 @@ function resizePlayerPage()
        $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
        $("#playButton").css({"width": buttonWidth * 1.15 + "px", "height": buttonWidth * 1.15 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
 
-       mediaNameCanvas.width = (screenWidth);
-       mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
-       mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
-       mediaNameCanvas.style.left = "0px";
+       trackTimeCanvas.width = mediaNameCanvas.width = (screenWidth);
+       trackTimeCanvas.height = mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
+       trackTimeCanvas.style.top = mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
+       trackTimeCanvas.style.left = mediaNameCanvas.style.left = "0px";
 
        var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
        var sortButtonWidth = buttonWidth * 2.5;
@@ -528,6 +543,11 @@ function init()
        imgIcon.src = "images/imageIcon.png";
        mediaNameCanvas = document.getElementById("mediaName");
        mediaNameCTX = mediaNameCanvas.getContext("2d");
+       trackTimeCanvas = document.getElementById("trackTime");
+       trackTimeCTX = trackTimeCanvas.getContext("2d");
+       playBarHeight = mediaNameCanvas.height;
+       boxWidth = playBarHeight * 0.75;
+       textStartX = boxWidth + 50;
 
        var vehicle = tizen.vehicle;
 
@@ -582,8 +602,12 @@ function init()
        //Setup voice control
        if (tizen.speech)
                setupSpeech();
-       else
+       else {
                console.log("MediaPlayer: Speech Recognition not running, voice control will be unavailable");
+                speechObj = {
+                    vocalizeString: function(item) { console.log(item); }
+                };
+        }
 
        audioPlayer = new MediaPlayer("audio");
        videoPlayer = new MediaPlayer("video");