Adding current track time to the metadata output

Change-Id: I3bb87626b4d68e6fdf8cff775f4b1d3bc2f6ea7d

diff --git a/index.html b/index.html
index 709da72..23ee2ab 100644 (file)
--- a/index.html
+++ b/index.html
@@ -73,6 +73,6 @@
                        </div>
 
                <canvas id="mediaName" style="position:absolute; z-index : 0"></canvas>
-
+               <canvas id="trackTime" style="position:absolute; z-index : 0"></canvas>
        </body>
 </html>

diff --git a/js/audioPlayer.js b/js/audioPlayer.js
index 3081f78..2397a49 100644 (file)
--- a/js/audioPlayer.js
+++ b/js/audioPlayer.js
@@ -7,12 +7,19 @@
  *
  */
 
+var mainArtistText;
+var songDurationSec;
+
 AudioPlayer = function()
 {
        this.clearAudioTimeInterval = undefined;
        this.currentAudioContent = undefined;
 }
 
+/*
+ * Play function for when play button is clicked
+ */
+
 AudioPlayer.prototype.play = function()
 {
        console.log("MediaPlayer in AudioPlayer::play");
@@ -30,6 +37,7 @@ AudioPlayer.prototype.play = function()
                                var timeoutFunction = function()
                                {
                                        localStorage.prevAudioTime = this.playerControls.currentTime;
+                                       this.updateTrackTime();
                                }
 
                                this.clearAudioTimeInterval = setInterval(timeoutFunction.bind(this),500);
@@ -40,6 +48,10 @@ AudioPlayer.prototype.play = function()
                console.log(this.content[this.listIndex].artists[0] + " : " + this.content[this.listIndex].title + " can't play yet, it hasn't loaded");
 }
 
+/*
+ * Pause function for when pause button is clicked
+ */
+
 AudioPlayer.prototype.pause = function()
 {
        if (!this.playerControls.paused)
@@ -49,10 +61,9 @@ AudioPlayer.prototype.pause = function()
        }
 }
 
-AudioPlayer.prototype.playing = function()
-{
-       return !(this.playerControls.paused);
-}
+/*
+ * Next function for when next button is clicked
+ */
 
 AudioPlayer.prototype.next = function()
 {
@@ -67,6 +78,10 @@ AudioPlayer.prototype.next = function()
        }
 }
 
+/*
+ * Previous function for when previous button is clicked
+ */
+
 AudioPlayer.prototype.previous = function()
 {
        if (this.content)
@@ -80,6 +95,19 @@ AudioPlayer.prototype.previous = function()
        }
 }
 
+/*
+ * Returns play state
+ */
+
+AudioPlayer.prototype.playing = function()
+{
+       return !(this.playerControls.paused);
+}
+
+/*
+ * Load the file located at the index.  If play is true, play immediately once file is loaded
+ */
+
 AudioPlayer.prototype.load = function(index, play)
 {
        this.listIndex = index;
@@ -90,17 +118,18 @@ AudioPlayer.prototype.load = function(index, play)
        this.playerControls.load();
 }
 
+/*
+ * Redraws the media bar with the new artist, title, and cover album
+ */
+
 AudioPlayer.prototype.updateMediaName = function(newArtist, newTitle, newCover)
 {
-       var playBarHeight = mediaNameCanvas.height;
-       var boxWidth = playBarHeight * 0.75;
+       playBarHeight = mediaNameCanvas.height;
+       boxWidth = playBarHeight * 0.75;
+       textStartX = boxWidth + 50;
+       songDurationSec = this.playerControls.duration;
        mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
 
-       var shadeJump = 10;
-       var alphaJump = 0.01;
-       var currColor = 255;
-       var currAlpha = 1.0;
-
        mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
        mediaNameCTX.strokeStyle="rgba(130,130,130,1)";
        mediaNameCTX.lineWidth = 5;
@@ -116,35 +145,74 @@ AudioPlayer.prototype.updateMediaName = function(newArtist, newTitle, newCover)
 
        if (screenOrientation === "portrait")
        {
-               var textStartX = boxWidth + 50;
-
                var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0,
                                                        "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 65, "wordWrap" : true});
 
                trackText.applyTemplate(mainMenuTitleTemplate);
 
-               var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 70, "zLoc" : 0,
+               mainArtistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 70, "zLoc" : 0,
                                                                "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
 
-               artistText.applyTemplate(mainTrackTemplate);
+               mainArtistText.applyTemplate(mainTrackTemplate);
        }
        else
        {
-               var textStartX = boxWidth + 50;
                var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 50 , "zLoc" : 0,
                                                                "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
                trackText.applyTemplate(mainMenuTitleTemplateLandscape);
-               var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 50, "zLoc" : 0,
+               mainArtistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 50, "zLoc" : 0,
                                                                "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
-               artistText.applyTemplate(mainTrackTemplateLandscape);
+               mainArtistText.applyTemplate(mainTrackTemplateLandscape);
        }
 
        trackText.drawObj();
        trackText.drawLargeShadow();
-       artistText.yLoc += trackText.height;
-       artistText.drawObj();
+       mainArtistText.yLoc += trackText.height;
+       mainArtistText.drawObj();
+
+       this.updateTrackTime();
 }
 
+/*
+ * Redraws the current track time
+ */
+
+AudioPlayer.prototype.updateTrackTime = function()
+{
+       playBarHeight = mediaNameCanvas.height;
+       boxWidth = playBarHeight * 0.75;
+       textStartX = boxWidth + 50;
+       var timeText = '';
+       var songDurationSec = Math.floor(this.playerControls.duration % 60) > 9 ? Math.floor(this.playerControls.duration % 60) : '0' + Math.floor(this.playerControls.duration % 60);
+       var songDurationMin = Math.floor(this.playerControls.duration / 60) > 9 ?  Math.floor(this.playerControls.duration / 60) : '0' +  Math.floor(this.playerControls.duration / 60);
+       var songCurrentMin = Math.floor(this.playerControls.currentTime / 60) > 9 ? Math.floor(this.playerControls.currentTime / 60) :  '0' + Math.floor(this.playerControls.currentTime / 60);
+       var songCurrentSec = Math.floor(this.playerControls.currentTime % 60) > 9 ? Math.floor(this.playerControls.currentTime % 60) : '0' + Math.floor(this.playerControls.currentTime % 60);
+
+       if ((songCurrentMin !== undefined && songCurrentSec !== undefined) && (!isNaN(songCurrentMin) && !isNaN(songCurrentSec)))
+               timeText += songCurrentMin + ':' + songCurrentSec + ' / ';
+       else
+               timeText += "00:00 / ";
+
+       if ((songDurationSec !== undefined && songDurationMin !== undefined) && (!isNaN(songDurationMin) && !isNaN(songDurationSec)))
+               timeText += songDurationMin + ':' + songDurationSec;
+       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);
+       trackTimeCTX.clearRect(0, 0, trackTimeCanvas.width, trackTimeCanvas.height);
+
+       trackTimeText.yLoc = ((playBarHeight - boxWidth) / 2) + boxWidth;
+       trackTimeText.drawObj();
+}
+
+/*
+ * Plays the currently loaded media file
+ */
+
 AudioPlayer.prototype.playLoadedMedia = function()
 {
        console.log("MediaPlayer in playLoadedMedia");
@@ -180,6 +248,9 @@ AudioPlayer.prototype.playLoadedMedia = function()
        this.currentFileLoaded = true;
 }
 
+/*
+ * Sort the file list alphabetically
+ */
 
 AudioPlayer.prototype.sortByAlpha = function()
 {
@@ -203,6 +274,10 @@ AudioPlayer.prototype.sortByAlpha = function()
        this.fillMediaList();
 }
 
+/*
+ * Sort the file list by artist name
+ */
+
 AudioPlayer.prototype.sortByArtist = function()
 {
        console.log("MediaPlayer in sortByArtist");
@@ -225,6 +300,10 @@ AudioPlayer.prototype.sortByArtist = function()
        this.fillMediaList();
 }
 
+/*
+ * Sort the file list by album name
+ */
+
 AudioPlayer.prototype.sortByAlbum =function()
 {
        console.log("MediaPlayer in sortByAlbum");
@@ -247,6 +326,10 @@ AudioPlayer.prototype.sortByAlbum =function()
        this.fillMediaList();
 }
 
+/*
+ * Callback for when the local content has been successfully read using tizen.content.
+ */
+
 AudioPlayer.prototype.onContentLoaded = function()
 {
        try
@@ -292,10 +375,9 @@ AudioPlayer.prototype.onContentLoaded = function()
        }
 }
 
-AudioPlayer.prototype.redrawMediaName = function()
-{
-       this.updateMediaName(this.content[this.listIndex].artists[0], this.content[this.listIndex].title, this.content[this.listIndex].coverArt);
-}
+/*
+ * Create and draw an item in the media list
+ */
 
 AudioPlayer.prototype.makeListItem = function(j, k)
 {

diff --git a/js/main.js b/js/main.js
index d278d89..5331259 100644 (file)
--- a/js/main.js
+++ b/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)"};
 
@@ -206,6 +214,7 @@ function showMediaMenu()
        {
                case "audio":
                        $("#mediaName").show();
+                       $("#trackTime").show();
                        $(".sortButton").show();
                        currentPlayer.show();
 
@@ -361,6 +370,7 @@ function showMainMenu()
        $(".navButton").hide();
        $(".sortButton").hide();
        $("#mediaName").hide();
+       $("#trackTime").hide();
        $(".player").hide();
        $(".mainButton").css({"opacity": "100"});
        $(".mainButton").show();
@@ -468,10 +478,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 +538,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;
 

diff --git a/packaging/MediaPlayer.changes b/packaging/MediaPlayer.changes
index 02ad2b0..6891084 100644 (file)
--- a/packaging/MediaPlayer.changes
+++ b/packaging/MediaPlayer.changes
@@ -1,3 +1,6 @@
+* Thu Nov 14 2013 brianjjones <brian.j.jones@intel.com> accepted/tizen/20131015.185352@dcea024
+- Adding current track time to the metadata output
+
 * Tue Oct 15 2013 brianjjones <brian.j.jones@intel.com> submit/tizen/20131015.010041@0cdd066
 - Saving of the localStorage now occurs after the file has successfully loaded