+* 3.0.6
+- Update samples with meta viewport
+== ziv.chang <ziv.chang@intel.com> 2014-01-13
+
* 3.0.5
- Add Web UI Componment - cowhide template
== ziv.chang <ziv.chang@intel.com> 2013-12-05
-Version:3.0.5
+Version:3.0.6
Maintainer: Ziv Chang<ziv.chang@intel.com>
Package:ivi-3.0-web-sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
+ <head>
+ <meta name="viewport" content="user-scalable=no, width=768">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="api.js" ></script>
display:none;
}
+#trackTime
+{
+ display:none;
+}
+
#audioPlayer
{
position:absolute;
<html>
<head>
<title>Media Player</title>
+ <meta name="viewport" content="user-scable=no, height=1000, width=520">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/listFunctions.js"></script>
</div>
<canvas id="mediaName" style="position:absolute; z-index : 0"></canvas>
-
+ <canvas id="trackTime" style="position:absolute; z-index : 0"></canvas>
</body>
</html>
*
*/
+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");
var timeoutFunction = function()
{
localStorage.prevAudioTime = this.playerControls.currentTime;
+ this.updateTrackTime();
}
this.clearAudioTimeInterval = setInterval(timeoutFunction.bind(this),500);
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)
}
}
-AudioPlayer.prototype.playing = function()
-{
- return !(this.playerControls.paused);
-}
+/*
+ * Next function for when next button is clicked
+ */
AudioPlayer.prototype.next = function()
{
}
}
+/*
+ * Previous function for when previous button is clicked
+ */
+
AudioPlayer.prototype.previous = function()
{
if (this.content)
}
}
+/*
+ * 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;
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;
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");
this.currentFileLoaded = true;
}
+/*
+ * Sort the file list alphabetically
+ */
AudioPlayer.prototype.sortByAlpha = function()
{
this.fillMediaList();
}
+/*
+ * Sort the file list by artist name
+ */
+
AudioPlayer.prototype.sortByArtist = function()
{
console.log("MediaPlayer in sortByArtist");
this.fillMediaList();
}
+/*
+ * Sort the file list by album name
+ */
+
AudioPlayer.prototype.sortByAlbum =function()
{
console.log("MediaPlayer in sortByAlbum");
this.fillMediaList();
}
+/*
+ * Callback for when the local content has been successfully read using tizen.content.
+ */
+
AudioPlayer.prototype.onContentLoaded = function()
{
try
}
}
-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)
{
for (var i = j; (i < (j+k) && i < this.content.length); i++)
{
+ if (typeof this.content[i].title !== "string")
+ this.content[i].title = "Unknown";
+
//Check if album art is done loading, if not draw default until it is
if (this.content[i].artists === undefined)
{
this.content[i].artists[0] = "Unknown";
}
- var trackText = {"text" : this.content[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0};
- var artistText = {"text" : this.content[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0};
+ else if (typeof this.content[i].artists[0] !== "string")
+ this.content[i].artists[0] = "Unknown";
+
+ var trackText = {"text" : this.content[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0};
+ var artistText = {"text" : this.content[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0};
- if (this.content[i].coverArt && this.content[i].coverArt.complete)
+ if (this.content[i].coverArt && this.content[i].coverArt.complete && (this.content[i].coverArt.naturalWidth !== 0 || this.content[i].coverArt.naturalHeight !== 0) )
this.makeListBar(this.content[i].coverArt, i, artistText, trackText);
else
this.makeListBar(musicIcon, i, artistText, trackText);
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)"};
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)"};
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"};
{
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()
{
case "audio":
$("#mediaName").show();
+ $("#trackTime").show();
$(".sortButton").show();
currentPlayer.show();
$(".navButton").hide();
$(".sortButton").hide();
$("#mediaName").hide();
+ $("#trackTime").hide();
$(".player").hide();
$(".mainButton").css({"opacity": "100"});
$(".mainButton").show();
$("#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;
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;
//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");
MediaPlayer.prototype.makeListBar = function(icon, i, artistTextObj, trackTextObj)
{
- var lightColor = "";
- var canvasW = mediaListItemW;
- var canvasH = mediaListItemH * 0.95 ;
+ var lightColor = (i+1)%2 !== 0 ? "lightColor " : "";
+ var nightColor = nightMode ? "night" : "";
+ var canvasW = Math.floor(mediaListItemW);
+ var canvasH = Math.floor(mediaListItemH * 0.95) ;
- if ((i+1)%2 !== 0)
- {
- lightColor = "lightColor ";
- }
-
- if (nightMode)
- {
- this.mediaListItems.append("<li id=" + this.type + "ListItem" + i + " style='width:" + mediaListItemW + "px;" + " height:" + mediaListItemH + "px;" +
- " margin-bottom: 10px' ><a href='#' class='" + lightColor + "night' >" +
- "<canvas id=" + this.type + "CanvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
- "</a></li>"
- );
- }
- else
- {
- this.mediaListItems.append("<li id=" + this.type + "ListItem" + i + " style='width:" + mediaListItemW + "px;" + " height:" + mediaListItemH + "px;" +
- " margin-bottom: 10px' ><a href='#' class='" + lightColor + "night' >" +
- "<canvas id=" + this.type + "CanvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
- "</a></li>"
- );
- }
+ this.mediaListItems.append("<li id=" + this.type + "ListItem" + i + " style='width:" + mediaListItemW + "px;" + " height:" + mediaListItemH + "px;" +
+ " margin-bottom: 10px' ><a href='#' class='" + lightColor + nightColor + "' >" +
+ "<canvas id=" + this.type + "CanvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+ "</a></li>"
+ );
try
{
var currentCanvas = document.getElementById(this.type + "CanvasNum" + i);
var currentCTX = currentCanvas.getContext("2d");
- this.content[i].ctx = currentCTX;
-
- currentCTX.drawImage(icon, 0, 0, canvasH, canvasH );
- var artistText = new TextObject(currentCTX,artistTextObj);
- var trackText = new TextObject(currentCTX,trackTextObj);
- var mediaTextTemp1 = screenOrientation === "portrait" ? mediaTextTemplate2 : mediaTextTemplate2Landscape;
- var mediaTextTemp2 = screenOrientation === "portrait" ? mediaTextTemplate3 : mediaTextTemplate3Landscape;
- var trackTextTemp = screenOrientation === "portrait" ? trackTextTemplate : trackTextTemplateLandscape;
-
- trackText.applyTemplate(mediaTextTemp1);
- trackText.drawObj();
- trackText.applyTemplate(mediaTextTemp2);
- trackText.drawObj();
- artistText.applyTemplate(trackTextTemp);
- artistText.drawObj();
+ if (currentCanvas && currentCTX)
+ {
+ this.content[i].ctx = currentCTX;
+
+ currentCTX.drawImage(icon, 0, 0, canvasH, canvasH );
+ var artistText = new TextObject(currentCTX,artistTextObj);
+ var trackText = new TextObject(currentCTX,trackTextObj);
+ var trackTextTemp1 = screenOrientation === "portrait" ? mediaTextTemplate2 : mediaTextTemplate2Landscape;
+ var trackTextTemp2 = screenOrientation === "portrait" ? mediaTextTemplate3 : mediaTextTemplate3Landscape;
+ var artistTextTemp = screenOrientation === "portrait" ? trackTextTemplate : trackTextTemplateLandscape;
+
+ trackText.applyTemplate(trackTextTemp1);
+ trackText.drawObj();
+ trackText.applyTemplate(trackTextTemp2);
+ trackText.drawObj();
+ artistText.applyTemplate(artistTextTemp);
+ artistText.drawObj();
+ }
+ else
+ console.log("MediaPlayer: Failed to draw media item for index " + i );
}
catch(err)
{
console.log("MediaPlayer: drawImage failed for " + this.type + " - reason -> " + err);
+ console.log("Source below");
+ console.log("Src = " + icon.src);
}
}
for (var i = j; (i < (j+k) && i < this.content.length); i++)
{
+
+ if (this.content[i].artists === undefined)
+ {
+ this.content[i].artists = new Array();
+ this.content[i].artists[0] = "Unknown";
+ }
+
+ else if (typeof this.content[i].artists[0] !== "string")
+ this.content[i].artists[0] = "Unknown";
+
var artistText = {"text" : this.content[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0};
var trackText = {"text" : this.content[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0};
+* Wed Dec 18 2013 brianjjones <brian.j.jones@intel.com> submit/tizen/20131218.195059@b3964db
+- Adding requirement to the spec for speech-recognition and wrt-plugins-ivi
+
+* Mon Nov 18 2013 brianjjones <brian.j.jones@intel.com> submit/tizen/20131115.213224@f4bb5fa
+- Fix for showing elapsed time bar on video screen
+
+* 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
Source0: %{name}-%{version}.tar.bz2
BuildRequires: zip
BuildRequires: desktop-file-utils
+Requires: speech-recognition
Requires: wrt-installer
+Requires: wrt-plugins-ivi
%description
A HTML media player for music, video, and images
<html>
<head>
<meta charset="utf-8" />
- <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> -->
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>Settings</title>
<?xml-stylesheet type="text/xsl" href="../../description.xsl"?>\r
\r
<Overview version="0.17.1">\r
- <SampleName>Tizen Web UI Componment Application</SampleName>\r
+ <SampleName>Tizen Web UI Component Application</SampleName>\r
<SampleVersion>1.0</SampleVersion>\r
<Preview>snapshot_white.png</Preview>\r
<Description>\r
- Single-Page Application based on Tizen Web UI Componment(cowhide).\r
+ Single-Page Application based on Tizen Web UI Component(cowhide).\r
</Description>\r
</Overview>\r
<link id="cowhide-theme" href="${cowhide}/cowhide-default.min.css" rel="stylesheet">
<link href="${cowhide}/cowhide-responsive.css" rel="stylesheet">
</#if>
- <title>Cowhide - Tizen Web UI Componment</title>
+ <title>Cowhide - Tizen Web UI Component</title>
</head>
<body>
<div class="jumbotron masthead">
<div class="container">
<h1>Hello World!</h1>
- <h2>Cowhide - Tizen Web UI Componment</h1>
+ <h2>Cowhide - Tizen Web UI Component</h1>
</div>
</div>
</div> <!-- page -->