background-size:cover;
}
+#mainMusicButton
+{
+ content:url(../images/musicButton.png);
+}
+
+#mainVideoButton
+{
+ content:url(../images/videoButton.png);
+}
+
+#mainImageButton
+{
+ content:url(../images/imageButton.png);
+}
+
+#backButton
+{
+ content:url(../images/backButton.png);
+}
+
+#nextButton
+{
+ content:url(../images/nextButton.png);
+}
+
+#returnButton
+{
+ content:url(../images/returnButton.png);
+}
+
+#listButton
+{
+ content:url(../images/listIcon.png);
+}
+
+#playButton
+{
+ content:url(../images/playButton.png);
+}
+
+#playButton.playing
+{
+ content:url(../images/pauseButton.png);
+}
+
+#sortAllButton
+{
+ display:none;
+ content:url(../images/allButton.png);
+}
+
+#sortArtistButton
+{
+ display:none;
+ content:url(../images/artistButton.png);
+}
+
+#sortAlbumButton
+{
+ display:none;
+ content:url(../images/albumButton.png);
+}
+
#mainMenuButtons
{
position: absolute;
display: block;
- z-index : 1;
vertical-align: middle;
}
#mediaList ul li a.lightColor { position:absolute; display:block; overflow: auto; background-color:rgba(180, 180, 180, 0.5);
padding-left:15px; padding-top:5px; padding-bottom:5px; border-radius: 20px; -webkit-border-radius: 20px;}
+
+/********************** Night versions ***********************/
+
+html.night
+{
+ background:url(../images/bg1Night.png) no-repeat center center;
+ min-height: 100%;
+ background-size:cover;
+}
+
+#mediaList ul li a.night { position:absolute; display:block; overflow: auto; background-color:rgba(150, 150, 250, 0.5);
+ padding-left:15px; padding-top:5px; padding-bottom:5px; border-radius: 20px; -webkit-border-radius: 20px;}
+
+#mediaList ul li a.lightColor.night { position:absolute; display:block; overflow: auto; background-color:rgba(18, 18, 18, 0.5);
+ padding-left:15px; padding-top:5px; padding-bottom:5px; border-radius: 20px; -webkit-border-radius: 20px;}
+
+#mainMusicButton.night
+{
+ content:url(../images/musicButtonNight.png);
+}
+
+#mainVideoButton.night
+{
+ content:url(../images/videoButtonNight.png);
+}
+
+#mainImageButton.night
+{
+ content:url(../images/imageButtonNight.png);
+}
+
+#backButton.night
+{
+ content:url(../images/backButtonNight.png);
+}
+
+#nextButton.night
+{
+ content:url(../images/nextButtonNight.png);
+}
+
+#returnButton.night
+{
+ content:url(../images/returnButtonNight.png);
+}
+
+#listButton.night
+{
+ content:url(../images/listIconNight.png);
+}
+
+#playButton.night
+{
+ content:url(../images/playButtonNight.png);
+}
+
+#playButton.night.playing
+{
+ content:url(../images/pauseButtonNight.png);
+}
+
+#sortAllButton.night
+{
+ content:url(../images/allButtonNight.png);
+}
+
+#sortArtistButton.night
+{
+ content:url(../images/artistButtonNight.png);
+}
+
+#sortAlbumButton.night
+{
+ content:url(../images/albumButtonNight.png);
+}
<script src="js/main.js"></script>
<script src="js/textObject.js"></script>
<script src="js/imageControls.js"></script>
+ <script src="js/dlna.js"></script>
</head>
<body>
<div id="background"></div>
</div>
<div id="mainMenuButtons">
- <img id="mainMusicButton" class="mainButton" src="images/musicButton.png" onClick="changeMenu(this.id)">
- <img id="mainVideoButton" class="mainButton" src="images/videoButton.png" onClick="changeMenu(this.id)">
- <img id="mainImageButton" class="mainButton" src="images/imageButton.png" onClick="changeMenu(this.id)">
+ <img id="mainMusicButton" class="mainButton" onClick="changeMenu(this.id)">
+ <img id="mainVideoButton" class="mainButton" onClick="changeMenu(this.id)">
+ <img id="mainImageButton" class="mainButton" onClick="changeMenu(this.id)">
</div>
<div id="navigationButtons" style="position:absolute; visible:hidden">
<!-- <div id="mediaName" ><font size="8" color="#F00"></font></div> -->
- <img id="backButton" class="navButton" src="images/backButton.png" onClick="backButtonClick()" style="position:absolute; display: none">
- <img id="nextButton" class="navButton" src="images/nextButton.png" onClick="nextButtonClick()" style="position:absolute; display: none">
- <img id="returnButton" class="navButton" src="images/returnButton.png" onClick="showMainMenu()" style="position:absolute; display: none">
- <img id="listButton" class="navButton" src="images/listIcon.png" onClick="showMediaList()" style="position:absolute; display: none">
- <img id="playButton" class="navButton" src="images/playButton.png" onClick="playButtonClick()" style="position:absolute; display: none">
+ <img id="backButton" class="navButton" onClick="backButtonClick()" style="position:absolute; display: none">
+ <img id="nextButton" class="navButton" onClick="nextButtonClick()" style="position:absolute; display: none">
+ <img id="returnButton" class="navButton" onClick="showMainMenu()" style="position:absolute; display: none">
+ <img id="listButton" class="navButton" onClick="showMediaList()" style="position:absolute; display: none">
+ <img id="playButton" class="navButton" onClick="playButtonClick()" style="position:absolute; display: none">
</div>
<div id="sortButtons">
- <img id="sortAllButton" class="sortButton" src="images/allButton.png" onClick="sortByAlpha()" style="display: none">
- <img id="sortArtistButton" class="sortButton" src="images/artistButton.png" onClick="sortByArtist()" style="display: none">
- <img id="sortAlbumButton" class="sortButton" src="images/albumButton.png" onClick="sortByAlbum()" style="display: none">
+ <img id="sortAllButton" class="sortButton" onClick="sortByAlpha()">
+ <img id="sortArtistButton" class="sortButton" onClick="sortByArtist()">
+ <img id="sortAlbumButton" class="sortButton" onClick="sortByAlbum()">
</div>
<canvas id="mediaName" style="position:absolute; z-index : 0"></canvas>
--- /dev/null
+/*
+ * Copyright (c) 2013, Intel Corporation.
+ *
+ * This program is licensed under the terms and conditions of the
+ * Apache License, version 2.0. The full text of the Apache License is at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+
+function convertMediaServerContent(item)
+{
+ console.log(">>> MediaObject2 >>> " + JSON.stringify(item));
+ var content = { id: item.Path, title: item.DisplayName };
+
+ if (item.Type.indexOf("container") == 0)
+ {
+ content.directoryURI = "";
+ content.storageType = "EXTERNAL";
+ }
+
+ else {
+ content.editableAttributes = [];
+ content.name = content.title;
+ content.contentURI = item.URLs[0];
+ content.mimeType = item.MIMEType;
+ content.size = item.Size;
+ content.rating = 0;
+ if (item.Type.indexOf("video") == 0)
+ {
+ content.type = "VIDEO";
+ content.duration = item.Duration;
+ content.width = item.Width;
+ content.height = item.Height;
+ }
+
+ else if (item.Type.indexOf("audio") == 0 ||
+ item.Type.indexOf("music") == 0)
+ {
+ content.type = "AUDIO";
+ content.bitrate = item.SampleRate;
+ content.duration = item.Duration;
+ }
+
+ if (item.Type.indexOf("image") == 0)
+ {
+ content.type = "IMAGE";
+ content.width = item.Width;
+ content.height = item.Height;
+ content.orientation = "NORMAL";
+ }
+
+ }
+
+ console.log(">>> Tizen Content >>> " + JSON.stringify(content));
+ return content;
+}
+
+/* example below displays the first picture found on the first media player available */
+/************************************** DLNA sample code ****************************************/
+
+function browseCallback(medias)
+{
+ console.log("MediaServer browseCallback");
+ console.log("found " + medias.length + " medias.");
+
+ for (var i=0; i<medias.length; i++)
+ convertMediaServerContent(medias[i]);
+}
+
+function findAllCallback(medias)
+{
+ console.log("MediaServer findAllCallback");
+ console.log("found " + medias.length + " medias.");
+ var content = [];
+
+ for (var i=0; i < medias.length; i++)
+ {
+ var current = convertMediaServerContent(medias[i]);
+
+ if (current.type == "IMAGE")
+ content.push(current);
+ else
+ console.log("BJONES failed to push content, not == IMAGE");
+ }
+
+ imageContent = content;
+ console.log("MediaPlayer image content changed, added " + content.length + " new items");
+}
+
+function foundMediaServer(srv)
+{
+ console.log("New MediaServer Found");
+ console.log("MediaServer id: " + srv.id);
+ console.log("MediaServer friendlyName: " + srv.friendlyName);
+
+ if (srv.root)
+ {
+ console.log("MediaServer root folder: " + srv.root.id);
+ srv.browse(srv.root.id, "+DisplayName", 0, 0, browseCallback);
+ srv.find(srv.root.id, "*", "+DisplayName", 0, 0, findAllCallback);
+ }
+ else
+ console.log("MediaServer not browsable");
+}
var mediaNameCanvas;
var mediaNameCTX;
var speechObj;
+var nightMode = false;
+
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)"};
function setupSpeech()
{
+ console.log("MediaPlayer in setupSpeech");
+
speechObj = tizen.speech;
try
function loadImages(callback)
{
+ console.log("MediaPlayer in loadImages");
+
var loadedImages = 0;
var numImages = 0;
function updateMediaName(newArtist, newTitle, newCover)
{
+ console.log("MediaPlayer in updateMediaName");
+
var playBarHeight = mediaNameCanvas.height;
var boxWidth = playBarHeight * 0.75;
mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
function fillMediaList(contentList)
{
+ console.log("MediaPlayer in fillMediaList");
//Don't try and fill an empty content list or an audio list that hasn't finished loading the thumbnails
if (contentList === undefined || contentList === null || contentList.length <=0 || (contentList === audioContent && !imagesLoaded))
return false;
{
if (!lightColor)
{
- $("#mediaListItems").append("<li><a href='#'>" +
- "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
- "</a></li>"
- );
+ if (nightMode)
+ {
+ $("#mediaListItems").append("<li><a href='#' class='night'>" +
+ "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+ "</a></li>"
+ );
+ }
+ else
+ {
+ $("#mediaListItems").append("<li><a href='#'>" +
+ "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+ "</a></li>"
+ );
+ }
}
else
{
- $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
+ if (nightMode)
+ {
+ $("#mediaListItems").append("<li><a href='#' class='lightColor night'>" +
+ "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
+ "</a></li>"
+ );
+ }
+ else
+ {
+ $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
"<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
"</a></li>"
- );
+ );
+ }
+
}
lightColor = !lightColor;
case "AUDIO":
try
{
- $("#playButton").attr("src","images/playButton.png");
+ $("#playButton").toggleClass('playing', false);
loadAndPlay = true;
updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
$("#audioSrc").attr("src", audioContent[listIndex].contentURI);
case "VIDEO":
try
{
- $("#playButton").attr("src","images/playButton.png");
+ $("#playButton").toggleClass('playing', false);
updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);
$("#videoSrc").attr("src", videoContent[listIndex].contentURI);
videoPlayer.load();
case "IMAGE":
try
{
- $("#playButton").attr("src","images/playButton.png");
+ $("#playButton").toggleClass('playing', false);
$("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
$("#imagePlayer").css("background-size", "contain");
$("#mediaList").fadeOut(300);
function onContentItemArraySuccess(content)
{
+ console.log("MediaPlayer in onContentItemArraySuccess");
var emptyContent = true;
if (!content || content === undefined || content.length <= 0)
function getMedia(mediaType)
{
+ console.log("MediaPlayer in getMedia");
var manager = tizen.content;
var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
function showMediaMenu()
{
+ console.log("MediaPlayer in showMediaMenu");
$(".navButton").fadeIn(800);
switch(currentPlayerType)
function showMediaList()
{
+ console.log("MediaPlayer in showMediaList");
if ($("#mediaList").is(":visible"))
$("#mediaList").fadeOut(300);
else
function changeMenu(menuButtonId)
{
+ console.log("MediaPlayer in changeMenu");
var clickedButton = $("#" + menuButtonId);
var buttonWidth = clickedButton.width();
var buttonHeight = clickedButton.height();
function showMainMenu()
{
+ console.log("MediaPlayer in showMainMenu");
currentMenu = "main";
currentPlayerControls.pause();
- $("#playButton").attr("src","images/playButton.png");
+ $("#playButton").toggleClass('playing', false);
//If the media list is showing, hide it. Remove the mediaListAudioList class if it exists so that it will resize properly
if ($("#mediaList").is(":visible"))
function sortByAlpha(contentToSort)
{
+ console.log("MediaPlayer in sortByAlpha");
//If contentToSort is undefined it's because the request came from the sortBy buttons
if (contentToSort === undefined)
contentToSort = audioContent;
function sortByArtist(contentToSort)
{
+ console.log("MediaPlayer in sortByArtist");
if (contentToSort === undefined)
contentToSort = audioContent;
function sortByAlbum(contentToSort)
{
+ console.log("MediaPlayer in sortByAlbum");
if (contentToSort === undefined)
contentToSort = audioContent;
fillMediaList(contentToSort);
}
+
/**************************************** NAVIGATION FUNCTIONS *******************************************/
+
+// A timer that will produce an error if a file can't be loaded.
function startLoadTimer()
{
+ console.log("MediaPlayer in startLoadTimer");
if (loadTimer !== undefined)
clearTimeout(loadTimer);
loadTimer = setTimeout(
function(){
if (currentMenu != "main")
- $("#playButton").attr("src","images/playButton.png");
+
+ $("#playButton").toggleClass('playing', false);
alert("File failed to load! - " + audioContent[listIndex].artists[0] + " : " + audioContent[listIndex].title);
currentFileLoaded = false;
}, 5000);
}
+// This function is called once a file being loaded is ready to play
function playLoadedMedia()
{
+ console.log("MediaPlayer in playLoadedMedia");
currentFileLoaded = true;
if (loadTimer !== undefined)
if (loadAndPlay)
{
currentPlayerControls.play();
- $("#playButton").attr("src","images/pauseButton.png");
+
+ $("#playButton").toggleClass('playing', true);
loadAndPlay = false;
}
}
function playButtonClick()
{
+ console.log("MediaPlayer in playButtonClick");
if (currentFileLoaded)
{
if (currentPlayerControls.paused)
{
+ $("#playButton").toggleClass('playing', true);
currentPlayerControls.play();
- $("#playButton").attr("src","images/pauseButton.png");
}
else
{
+ $("#playButton").toggleClass('playing', false);
currentPlayerControls.pause();
- $("#playButton").attr("src","images/playButton.png");
}
}
else
function pauseButtonClick()
{
+ console.log("MediaPlayer in pauseButtonClick");
if (!currentPlayerControls.paused)
{
currentPlayerControls.pause();
- $("#playButton").attr("src","images/playButton.png");
+ $("#playButton").toggleClass('playing', false);
}
}
function backButtonClick()
{
+ console.log("MediaPlayer in backButtonClick");
switch (currentPlayerType)
{
case "AUDIO":
if ($("#mediaList").is(":visible"))
videoPlayer.pause();
- $("#playButton").attr("src","images/playButton.png");
+ $("#playButton").toggleClass('playing', true);
$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
videoPlayer.load();
}
function nextButtonClick()
{
+ console.log("MediaPlayer in nextButtonClick");
switch (currentPlayerType)
{
case "AUDIO":
videoIndex = 0;
videoPlayer.pause();
- $("#playButton").attr("src","images/playButton.png");
+ $("#playButton").toggleClass('playing', true);
$("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
videoPlayer.load();
}
function resizeMainMenu()
{
+ console.log("MediaPlayer in resizeMainMenu");
+
$("#mediaList").fadeOut(0);
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
function resizePlayerPage()
{
+ console.log("MediaPlayer in resizePlayerPage");
+
audioPlayer = document.getElementById("audioPlayer");
videoPlayer = document.getElementById("videoPlayer");
screenWidth = window.innerWidth;
function resizeAll()
{
+ console.log("MediaPlayer in resizeAll");
resizeMainMenu();
resizePlayerPage();
}
function swipe(direction, object)
{
-
+console.log("MediaPlayer in swipe");
switch (object)
{
case "mediaName":
function init()
{
+ console.log("MediaPlayer in init");
+ var vehicle = tizen.vehicle;
+
+ vehicle.subscribe("NightMode",function(value) {
+ console.log("MediaPlayer: Day / Night mode changed to " + value.nightmode);
+
+ if (nightMode !== value.nightmode)
+ {
+ Array.prototype.forEach.call (document.querySelectorAll ('*'), function (el) {el.classList.toggle('night');});
+ nightMode = value.nightmode
+ }
+ });
+
musicIcon.src = "images/musicIcon.png";
vidIcon.src = "images/videoIcon.png";
imgIcon.src = "images/imageIcon.png";
//Resize all items and search for local media
resizeAll();
+ //Check if DLNA plugin is installed. If so, scan for media.
+ if (tizen.mediaserver)
+ {
+ tizen.mediaserver.scanNetwork(foundMediaServer);
+ }
+ else
+ console.log("MediaPlayer: No DLNA server running, using local media only...");
+
+ //Setup voice control
setupSpeech();
+ //Get local media
getMedia(contentType);
//Prevent highlighting
projects / profile / ivi / MediaPlayer.git / commitdiff
