js/main.js

   1 /*
   2  * Copyright (c) 2013, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 var currentMenu = "main";
  11 var mouseDownEvent;
  12 var resizeCB = resizeMainMenu;
  13 var screenWidth;
  14 var screenHeight;
  15 var screenOrientation;
  16 var iconWidth;
  17 var padding;
  18 var contentType = "AUDIO";
  19 var audioContent;
  20 var videoContent;
  21 var imageContent;
  22 var currentContent;
  23 var currentPlayer;
  24 var currentPlayerType = "AUDIO";
  25 var currentPlayerControls;
  26 var audioPlayer;
  27 var videoPlayer;
  28 var listIndex = 0;
  29 var videoIndex = 0;
  30 var imageIndex = 0;
  31 var vidIcon = new Image();
  32 var imgIcon = new Image();
  33 var musicIcon = new Image();
  34 var imagesLoaded = false;
  35 var mediaListItemW;
  36 var mediaListItemH;
  37 var imageControls;
  38 var loadAndPlay = false;
  39 var loadTimer;
  40 var currentFileLoaded = false;
  41 var mediaNameCanvas;
  42 var mediaNameCTX;
  43 var speechObj;
  44 var nightMode = false;
  45
  46
  47 var mainMenuTitleTemplateLandscape = {"font" : "oblique bolder 30pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  48                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
  49
  50 var mainMenuTitleTemplate = {"font" : "oblique bolder 40pt arial", "lineWidth" : 9.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  51                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.4)"};
  52
  53 var mainTrackTemplateLandscape = {"font" : "bold 20pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  54                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
  55
  56 var mainTrackTemplate = {"font" : "bold 30pt Arial", "lineWidth" : 7.5, "fillStyle" : "black", "strokeStyle" : "white", "textAlign" : "left",
  57                 "largeShadow" : 8, "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 45, "shadowColor" : "rgba(255, 187, 0, 0.5))"};
  58
  59 var mediaTextTemplate2 = {"font" : "bold 20pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
  60                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
  61
  62 var mediaTextTemplate3 = {"font" : "bold 20pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
  63
  64 var trackTextTemplate  = {"font" : "bold 16pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
  65
  66 var mediaTextTemplate2Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 10.0, "fillStyle" : "white", "strokeStyle" : "rgba(0, 0, 0, 1.0)", "textAlign" : "left",
  67                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 0, "shadowColor" : "rgba(0, 0, 0, 1.0)"};
  68
  69 var mediaTextTemplate3Landscape = {"font" : "bold 15pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "rgba(100, 0, 0, 1.0)", "textAlign" : "left"};
  70
  71 var trackTextTemplateLandscape  = {"font" : "bold 11pt Arial", "lineWidth" : 3.0, "fillStyle" : "white", "strokeStyle" : "black", "textAlign" : "left"};
  72
  73
  74 var mediaTextTemplate = {"font" : "bold 20pt Arial", "fillStyle" : "", "textAlign" : "left",
  75                 "shadowOffsetX" : 0, "shadowOffsetY" : 0, "shadowBlur" : 12, "shadowColor" : "red"};
  76
  77 function onError()
  78 {
  79         console.log("Content discovery failed");
  80 }
  81
  82 function setupSpeech()
  83 {
  84         console.log("MediaPlayer in setupSpeech");
  85
  86         speechObj = tizen.speech;
  87
  88         try
  89         {
  90                 var speechEventListener = {
  91                         onaudiostart: function(){console.log("MediaPlayer: onaudiostart received");},
  92                         onsoundstart: function(){console.log("MediaPlayer: onsoundstart received");},
  93                         onspeechstart: function(){console.log("MediaPlayer: onspeechstart received");},
  94                         onspeechend: function(){console.log("MediaPlayer: onspeechend received");},
  95                         onsoundend: function(){console.log("MediaPlayer: onsoundend received");},
  96                         onaudioend: function(){console.log("MediaPlayer: onaudioend received");},
  97                         onresult: function(result){
  98
  99                                 console.log("MediaPlayer: onresult received");
 100
 101                                 for (var i = 0; i < result.length; i++)
 102                                 {
 103                                         console.log("MediaPlayer: forloop, command = " + result[i]);
 104                                         var commandFound = false;
 105
 106                                         switch(result[i])
 107                                         {
 108                                                 case "play":
 109                                                         playButtonClick();
 110                                                         commandFound = true;
 111                                                 break;
 112                                                 case "next":
 113                                                         nextButtonClick();
 114                                                         commandFound = true;
 115                                                 break;
 116                                                 case "previous":
 117                                                         backButtonClick();
 118                                                         commandFound = true;
 119                                                 break;
 120                                                 case "stop":
 121                                                 case "pause":
 122                                                         pauseButtonClick();
 123                                                         commandFound = true;
 124                                                 break;
 125                                                 default:
 126                                                 break;
 127                                         }
 128
 129                                         if (commandFound)
 130                                                 break;
 131                                 }
 132                         },
 133                         onnomatch: function(result){console.log("MediaPlayer: onnomatch received ");},
 134                         onerror: function(error){console.log("MediaPlayer: onerror received");},
 135                         onstart: function(){console.log("MediaPlayer: onstart received");},
 136                         onend: function(){console.log("MediaPlayer: onend received");}
 137                 }
 138
 139                 speechObj.setCBListener(speechEventListener);
 140
 141         }
 142         catch(err)
 143         {
 144                 console.log("MediaPlayer setupSpeech FAILED + " + err.message);
 145         }
 146
 147 }
 148
 149 function loadImages(callback)
 150 {
 151         console.log("MediaPlayer in loadImages");
 152
 153         var loadedImages = 0;
 154         var numImages = 0;
 155
 156         for (var src in audioContent)
 157         {
 158                 numImages++;
 159         }
 160         for (var src in audioContent)
 161         {
 162                 try
 163                 {
 164                 audioContent[src].coverArt = new Image();
 165                 audioContent[src].coverArt.onload = function(){
 166
 167                         if (++loadedImages >= numImages) {
 168                                 imagesLoaded = true;
 169                                 callback(audioContent);
 170                         }
 171                 };
 172
 173                 audioContent[src].coverArt.onerror = function(e){
 174                         audioContent[src].coverArt.src = "images/musicIcon.png";
 175                 };
 176
 177                 audioContent[src].coverArt.src = (audioContent[src].coverArtURI !== undefined && audioContent[src].coverArtURI !== "") ? audioContent[src].coverArtURI : "images/musicIcon.png";
 178                 }
 179                 catch(err)
 180                 {
 181                         console.log("Failed to load audio cover image");
 182                 }
 183         }
 184 }
 185
 186 function updateMediaName(newArtist, newTitle, newCover)
 187 {
 188         console.log("MediaPlayer in updateMediaName");
 189
 190         var playBarHeight = mediaNameCanvas.height;
 191         var boxWidth = playBarHeight * 0.75;
 192         mediaNameCTX.clearRect(0,0,mediaNameCanvas.width, mediaNameCanvas.height);
 193
 194         if (currentPlayerType === "AUDIO")
 195         {
 196                 var shadeJump = 10;
 197                 var alphaJump = 0.01;
 198                 var currColor = 255;
 199                 var currAlpha = 1.0;
 200
 201                 mediaNameCTX.fillStyle="rgba(30,30,30,0.5)";
 202                 mediaNameCTX.strokeStyle="rgba(130,130,130,1)";
 203                 mediaNameCTX.lineWidth = 5;
 204                 mediaNameCTX.fillRect(0,0,mediaNameCanvas.width, playBarHeight);
 205                 mediaNameCTX.strokeRect(-20,0,mediaNameCanvas.width + 40, playBarHeight);
 206
 207                 if (newCover === undefined || newCover.naturalWidth === undefined || newCover.naturalWidth <= 0)
 208                 {
 209                         newCover = musicIcon;
 210                 }
 211
 212                 mediaNameCTX.drawImage(newCover, 20, (playBarHeight - boxWidth) / 2, boxWidth, boxWidth);
 213
 214                 if (screenOrientation === "portrait")
 215                 {
 216                         var textStartX = boxWidth + 50;
 217                         var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 70 , "zLoc" : 0,
 218                                                                         "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
 219                         trackText.applyTemplate(mainMenuTitleTemplate);
 220                         var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 70 + trackText.height, "zLoc" : 0,
 221                                                                         "width" : mediaNameCanvas.width - textStartX, "height" : 50, "lineHeight" : 50, "wordWrap" : true});
 222                         artistText.applyTemplate(mainTrackTemplate);
 223                         artistText.yLoc = 70 + trackText.height;
 224                 }
 225                 else
 226                 {
 227                         var textStartX = boxWidth + 50;
 228                         var trackText = new TextObject(mediaNameCTX,{"text" : newTitle, "xLoc" : textStartX, "yLoc" : 50 , "zLoc" : 0,
 229                                                                         "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
 230                         trackText.applyTemplate(mainMenuTitleTemplateLandscape);
 231                         var artistText = new TextObject(mediaNameCTX,{"text" : newArtist, "xLoc" : textStartX, "yLoc" : 50, "zLoc" : 0,
 232                                                                         "width" : mediaNameCanvas.width - textStartX, "height" : 30, "lineHeight" : 30, "wordWrap" : true});
 233                         artistText.applyTemplate(mainTrackTemplateLandscape);
 234                         artistText.yLoc = 50 + trackText.height;
 235                 }
 236
 237                 trackText.drawObj();
 238                 trackText.drawLargeShadow();
 239                 artistText.drawObj();
 240
 241         }
 242 }
 243
 244 function fillMediaList(contentList)
 245 {
 246         console.log("MediaPlayer in fillMediaList");
 247         //Don't try and fill an empty content list or an audio list that hasn't finished loading the thumbnails
 248         if (contentList === undefined || contentList === null || contentList.length <=0 || (contentList === audioContent && !imagesLoaded))
 249                 return false;
 250
 251         var iconURI;
 252         var currentCanvas;
 253         var iconImg = new Image();
 254         var canvasW = mediaListItemW;
 255         var canvasH = mediaListItemH * 0.95 ;
 256
 257         $("#mediaListItems").empty();
 258         var lightColor = false;
 259         for (var i=0; i < contentList.length; i++)
 260         {
 261                 if (!lightColor)
 262                 {
 263                         if (nightMode)
 264                         {
 265                                 $("#mediaListItems").append("<li><a href='#' class='night'>" +
 266                                                 "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 267                                                 "</a></li>"
 268                                 );
 269                         }
 270                         else
 271                         {
 272                                 $("#mediaListItems").append("<li><a href='#'>" +
 273                                                 "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 274                                                 "</a></li>"
 275                                 );
 276                         }
 277                 }
 278                 else
 279                 {
 280                         if (nightMode)
 281                         {
 282                                 $("#mediaListItems").append("<li><a href='#' class='lightColor night'>" +
 283                                         "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 284                                         "</a></li>"
 285                                 );
 286                         }
 287                         else
 288                         {
 289                                 $("#mediaListItems").append("<li><a href='#' class='lightColor'>" +
 290                                         "<canvas id=canvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 291                                         "</a></li>"
 292                                 );
 293                         }
 294
 295                 }
 296
 297                 lightColor = !lightColor;
 298
 299                 currentCanvas = document.getElementById("canvasNum"+ i);
 300                 currentCTX = currentCanvas.getContext("2d");
 301
 302                 // Set callback function for the new list item
 303                 $("#canvasNum"+i).click(function () {
 304                         listIndex = $(this).parent().parent().index();
 305
 306                         switch (currentPlayerType)
 307                         {
 308                         case "AUDIO":
 309                                 try
 310                                 {
 311                                         $("#playButton").toggleClass('playing', false);
 312                                         loadAndPlay = true;
 313                                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 314                                         $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
 315                                         audioPlayer.load();
 316                                         startLoadTimer();
 317                                 }
 318                                 catch(err)
 319                                 {
 320                                         console.log("updateMediaName error: " + err.message);
 321                                 }
 322                                 break;
 323
 324                         case "VIDEO":
 325                                 try
 326                                 {
 327                                         $("#playButton").toggleClass('playing', false);
 328                                         updateMediaName(videoContent[listIndex].artists[0], audioContent[listIndex].title, vidIcon);
 329                                         $("#videoSrc").attr("src", videoContent[listIndex].contentURI);
 330                                         videoPlayer.load();
 331                                         $("#mediaList").fadeOut(300);
 332                                 }
 333                                 catch(err)
 334                                 {
 335                                         console.log("updateMediaName error: " + err.message);
 336                                 }
 337                                 break;
 338
 339                         case "IMAGE":
 340                                 try
 341                                 {
 342                                         $("#playButton").toggleClass('playing', false);
 343                                         $("#imagePlayer").css("background", "url(" + imageContent[listIndex].contentURI + ") no-repeat center");
 344                                         $("#imagePlayer").css("background-size", "contain");
 345                                         $("#mediaList").fadeOut(300);
 346                                 }
 347                                 catch(err)
 348                                 {
 349                                         console.log("updateMediaName error: " + err.message);
 350                                 }
 351                                 break;
 352
 353                         default:
 354                                 break;
 355                         }
 356                 });
 357
 358                 switch (currentPlayerType)
 359                 {
 360                 case "AUDIO":
 361                         currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
 362                         var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 363                         var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 364
 365                         break;
 366                 case "VIDEO":
 367                         currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
 368                         var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 369                         var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 370
 371                         break;
 372                 case "IMAGE":
 373                         currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
 374                         var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 375                         var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 376                         break;
 377
 378                 default:
 379                         break;
 380                 }
 381
 382                 var mediaTextTemp1 = screenOrientation === "portrait" ? mediaTextTemplate2 : mediaTextTemplate2Landscape;
 383                 var mediaTextTemp2 = screenOrientation === "portrait" ? mediaTextTemplate3 : mediaTextTemplate3Landscape;
 384                 var trackTextTemp = screenOrientation === "portrait" ? trackTextTemplate : trackTextTemplateLandscape;
 385
 386                 trackText.applyTemplate(mediaTextTemp1);
 387                 trackText.drawObj();
 388                 trackText.applyTemplate(mediaTextTemp2);
 389                 trackText.drawObj();
 390
 391                 artistText.applyTemplate(trackTextTemp);
 392                 artistText.drawObj();
 393         }
 394
 395         $("#mediaListItems li").css({"width" : mediaListItemW + "px", "height" : mediaListItemH + "px", "margin-bottom" : "10px"});
 396 }
 397
 398 function onContentItemArraySuccess(content)
 399 {
 400         console.log("MediaPlayer in onContentItemArraySuccess");
 401         var emptyContent = true;
 402
 403         if (!content || content === undefined || content.length <= 0)
 404                 console.log("Invalid content for " + contentType);
 405         else
 406         {
 407                 emptyContent = false;
 408         }
 409
 410         switch (contentType)
 411         {
 412         case "AUDIO":
 413
 414                         if (!emptyContent)
 415                         {
 416                                 try
 417                                 {
 418                                         audioContent = content;
 419                                         sortByAlpha(audioContent);
 420
 421                                         $("#audioSrc").attr("src", audioContent[0].contentURI);
 422                                         audioPlayer.load();
 423                                         startLoadTimer();
 424
 425                                         var imgSources = [];
 426                                         for (var i = 0; i < audioContent.length; i++)
 427                                         {
 428                                                 var iconURI = (audioContent[i].thumbnailURIs !== undefined && audioContent[i].thumbnailURIs !== null) ? audioContent[i].thumbnailURIs[0] : "images/musicIcon.png";
 429                                                 audioContent[i].coverArtURI = iconURI;
 430                                         }
 431
 432                                         loadImages(fillMediaList);
 433                                 }
 434
 435                                 catch (err)
 436                                 {
 437                                         console.log("Error when parsing audioContent");
 438                                 }
 439                         }
 440
 441                 contentType = "VIDEO";
 442                 break;
 443
 444         case "VIDEO":
 445                 if (!emptyContent)
 446                 {
 447                         videoContent = content;
 448                         $("#videoSrc").attr("src", videoContent[0].contentURI);
 449                 }
 450                 contentType = "IMAGE";
 451                 break;
 452
 453         case "IMAGE":
 454                 if (!emptyContent)
 455                 {
 456                         imageContent = content;
 457                         $("#imagePlayer").css("background", "url(" + imageContent[0].contentURI + ") no-repeat center");
 458                         $("#imagePlayer").css("background-size", "contain");
 459                 }
 460                 contentType = undefined;
 461                 break;
 462
 463         default:
 464                 console.log("Undefined content search type");
 465         nextContentType = undefined;
 466         break;
 467         }
 468
 469         if (contentType !== undefined)
 470                 getMedia(contentType);
 471 }
 472
 473 function getMedia(mediaType)
 474 {
 475         console.log("MediaPlayer in getMedia");
 476         var manager = tizen.content;
 477
 478         var filter = new tizen.AttributeFilter("type", "EXACTLY", mediaType);
 479         manager.find(onContentItemArraySuccess, onError, null, filter);
 480 }
 481
 482 function showMediaMenu()
 483 {
 484         console.log("MediaPlayer in showMediaMenu");
 485         $(".navButton").fadeIn(800);
 486
 487         switch(currentPlayerType)
 488         {
 489         case "AUDIO":
 490                 //show audio player
 491                 try
 492                 {
 493                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 494                 }
 495                 catch(err)
 496                 {
 497                         console.log("updateMediaName failed for showMediaMenu (audio) : " + err.message);
 498                 }
 499
 500                 $("#mediaName").fadeIn(800);
 501                 $(".sortButton").fadeIn(800);
 502                 currentPlayer.fadeIn(800);
 503
 504                 $("#mediaList").addClass("mediaListAudioList");
 505
 506                 if (screenOrientation === "landscape" )
 507                         $("#mediaList").addClass("landscape");
 508                 else
 509                         $("#mediaList").removeClass("landscape");
 510
 511                 $("#mediaList").fadeIn(800);
 512                 break;
 513
 514         case "VIDEO":
 515                 //show video
 516                 setTimeout(function(){currentPlayer.show()}, 800);              //The video element can't be faded, so wait a moment before showing
 517                 break;
 518
 519         case "IMAGE":
 520                 //show image
 521                 currentPlayer.fadeIn(800);
 522                 break;
 523
 524         default:
 525                 console.log("Invalid player type");
 526         break;
 527         }
 528 }
 529
 530 function showMediaList()
 531 {
 532         console.log("MediaPlayer in showMediaList");
 533         if ($("#mediaList").is(":visible"))
 534                 $("#mediaList").fadeOut(300);
 535         else
 536         {
 537                 fillMediaList(currentContent);
 538                 $("#mediaList").fadeIn(300);
 539         }
 540 }
 541
 542 function changeMenu(menuButtonId)
 543 {
 544         console.log("MediaPlayer in changeMenu");
 545         var clickedButton  = $("#" + menuButtonId);
 546         var buttonWidth  = clickedButton.width();
 547         var buttonHeight = clickedButton.height();
 548         var buttonBottom = clickedButton.css("bottom");
 549         var buttonRight  = clickedButton.css("right");
 550
 551         //Animate the clicked button slightly
 552         clickedButton.animate({
 553                 bottom: screenOrientation === "portrait" ? "+=0" : "+=50",
 554                                 right: screenOrientation === "portrait" ? "+=50" : "+=0",
 555                                                 opacity: "0"
 556         }, 300 ,
 557
 558         //Reset the size once done
 559         function() {
 560                 clickedButton.width(buttonWidth);
 561                 clickedButton.height(buttonHeight);
 562
 563                 if (screenOrientation === "portrait")
 564                         clickedButton.css({"right": buttonRight});
 565                 else
 566                         clickedButton.css({"bottom": buttonBottom});
 567         }
 568         );
 569
 570         $(".mainButton").fadeOut(300);
 571
 572         switch(menuButtonId)
 573         {
 574         case ("mainMusicButton"):
 575                 currentMenu = "audio";
 576                 currentPlayer = $("#audioPlayer");
 577                 currentPlayerControls = document.getElementById("audioPlayer");
 578                 currentPlayerType = "AUDIO";
 579                 currentContent = audioContent;
 580                 showMediaMenu();
 581         break;
 582
 583         case ("mainVideoButton"):
 584                 currentMenu = "video";
 585                 currentPlayer = $("#videoPlayer");
 586                 currentPlayerControls = document.getElementById("videoPlayer");
 587                 currentPlayerType = "VIDEO";
 588                 currentContent = videoContent;
 589                 showMediaMenu();
 590         break;
 591
 592         case ("mainImageButton"):
 593                 currentMenu = "image";
 594                 currentPlayer = $("#imagePlayer");
 595                 currentPlayerControls = imageControls;
 596                 currentPlayerType = "IMAGE";
 597                 currentContent = imageContent;
 598                 showMediaMenu();
 599         break;
 600         default:
 601                 console.log("Error: No menu by that name");
 602         break;
 603         }
 604 }
 605
 606 function showMainMenu()
 607 {
 608         console.log("MediaPlayer in showMainMenu");
 609         currentMenu = "main";
 610         currentPlayerControls.pause();
 611
 612         $("#playButton").toggleClass('playing', false);
 613
 614         //If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
 615         if ($("#mediaList").is(":visible"))
 616                 $("#mediaList").fadeOut(300, function(){$("#mediaList").removeClass("mediaListAudioList");});
 617
 618         $(".navButton").fadeOut(300);
 619         $(".sortButton").fadeOut(300);
 620         $("#mediaName").fadeOut(300);
 621
 622         if (currentPlayerType !== "VIDEO")
 623                 currentPlayer.fadeOut(300);
 624         else
 625                 currentPlayer.hide();
 626
 627
 628         $(".mainButton").css({"opacity": "100"});
 629         $(".mainButton").fadeIn(800);
 630 }
 631
 632 function sortByAlpha(contentToSort)
 633 {
 634         console.log("MediaPlayer in sortByAlpha");
 635         //If contentToSort is undefined it's because the request came from the sortBy buttons
 636         if (contentToSort === undefined)
 637                 contentToSort = audioContent;
 638
 639         contentToSort.sort(function (a,b) {
 640                 var first = a.title.toLowerCase();
 641                 var second = b.title.toLowerCase();
 642
 643                 if (first < second)
 644                         return -1;
 645                 if (first > second)
 646                         return 1;
 647
 648                 return 0;
 649         });
 650
 651         fillMediaList(contentToSort);
 652 }
 653
 654 function sortByArtist(contentToSort)
 655 {
 656         console.log("MediaPlayer in sortByArtist");
 657         if (contentToSort === undefined)
 658                 contentToSort = audioContent;
 659
 660         contentToSort.sort(function (a,b) {
 661                 var first = a.artists[0].toLowerCase();
 662                 var second = b.artists[0].toLowerCase();
 663
 664                 if (first < second)
 665                         return -1;
 666                 if (first > second)
 667                         return 1;
 668
 669                 return 0;
 670         });
 671
 672         fillMediaList(contentToSort);
 673 }
 674
 675 function sortByAlbum(contentToSort)
 676 {
 677         console.log("MediaPlayer in sortByAlbum");
 678         if (contentToSort === undefined)
 679                 contentToSort = audioContent;
 680
 681         contentToSort.sort(function (a,b) {
 682                 var first = a.album.toLowerCase();
 683                 var second = b.album.toLowerCase();
 684
 685                 if (first < second)
 686                         return -1;
 687                 if (first > second)
 688                         return 1;
 689
 690                 return 0;
 691         });
 692
 693         fillMediaList(contentToSort);
 694 }
 695
 696 /**************************************** NAVIGATION FUNCTIONS *******************************************/
 697
 698
 699 // A timer that will produce an error if a file can't be loaded.
 700 function startLoadTimer()
 701 {
 702         console.log("MediaPlayer in startLoadTimer");
 703         if (loadTimer !== undefined)
 704                 clearTimeout(loadTimer);
 705
 706         loadTimer = setTimeout(
 707                 function(){
 708                 if (currentMenu != "main")
 709
 710                         $("#playButton").toggleClass('playing', false);
 711                         alert("File failed to load! - " + audioContent[listIndex].artists[0] + " : " + audioContent[listIndex].title);
 712                         currentFileLoaded = false;
 713                 }, 5000);
 714 }
 715
 716 // This function is called once a file being loaded is ready to play
 717 function playLoadedMedia()
 718 {
 719         console.log("MediaPlayer in playLoadedMedia");
 720         currentFileLoaded = true;
 721
 722         if (loadTimer !== undefined)
 723                 clearTimeout(loadTimer);
 724
 725         if (loadAndPlay)
 726         {
 727                 currentPlayerControls.play();
 728
 729                 $("#playButton").toggleClass('playing', true);
 730                 loadAndPlay = false;
 731         }
 732 }
 733
 734 function playButtonClick()
 735 {
 736         console.log("MediaPlayer in playButtonClick");
 737         if (currentFileLoaded)
 738         {
 739                 if (currentPlayerControls.paused)
 740                 {
 741                         $("#playButton").toggleClass('playing', true);
 742                         currentPlayerControls.play();
 743                 }
 744                 else
 745                 {
 746                         $("#playButton").toggleClass('playing', false);
 747                         currentPlayerControls.pause();
 748                 }
 749         }
 750         else
 751                 alert(audioContent[listIndex].artists[0] + " : " + audioContent[listIndex].title + " failed to load, please select another file");
 752 }
 753
 754 function pauseButtonClick()
 755 {
 756         console.log("MediaPlayer in pauseButtonClick");
 757         if (!currentPlayerControls.paused)
 758         {
 759                 currentPlayerControls.pause();
 760                 $("#playButton").toggleClass('playing', false);
 761         }
 762 }
 763
 764 function backButtonClick()
 765 {
 766         console.log("MediaPlayer in backButtonClick");
 767         switch (currentPlayerType)
 768         {
 769         case "AUDIO":
 770                 if (audioContent)
 771                 {
 772                         if (listIndex > 0 )
 773                                 listIndex--;
 774                         else
 775                                 listIndex = imageContent.length - 1;
 776
 777                         loadAndPlay = true;
 778                         audioPlayer.pause();
 779
 780                         $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
 781                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 782                         audioPlayer.load();
 783                         startLoadTimer();
 784                 }
 785                 break;
 786
 787         case "VIDEO":
 788                 if (videoContent)
 789                 {
 790                         if (videoIndex > 0 )
 791                                 videoIndex--;
 792                         else
 793                                 videoIndex = imageContent.length - 1;
 794
 795                         if ($("#mediaList").is(":visible"))
 796                                 videoPlayer.pause();
 797
 798                         $("#playButton").toggleClass('playing', true);
 799                         $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
 800                         videoPlayer.load();
 801                 }
 802                 break;
 803
 804         case "IMAGE":
 805                 if (imageContent)
 806                 {
 807                         if (imageIndex > 0 )
 808                                 imageIndex--;
 809                         else
 810                                 imageIndex = imageContent.length - 1;
 811
 812                         $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
 813                         $("#imagePlayer").css("background-size", "contain");
 814                 }
 815                 break;
 816
 817         default:
 818                 console.log("Content failure");
 819         break;
 820         }
 821 }
 822
 823
 824 function nextButtonClick()
 825 {
 826         console.log("MediaPlayer in nextButtonClick");
 827         switch (currentPlayerType)
 828         {
 829         case "AUDIO":
 830                 if (audioContent)
 831                 {
 832                         if (audioContent.length > (listIndex + 1))
 833                                 listIndex++;
 834                         else
 835                                 listIndex = 0;
 836
 837                         loadAndPlay = true;
 838                         audioPlayer.pause();
 839
 840                         $("#audioSrc").attr("src", audioContent[listIndex].contentURI);
 841                         updateMediaName(audioContent[listIndex].artists[0], audioContent[listIndex].title, audioContent[listIndex].coverArt);
 842                         audioPlayer.load();
 843                         startLoadTimer();
 844                 }
 845                 break;
 846
 847         case "VIDEO":
 848                 if (videoContent)
 849                 {
 850                         if (videoContent.length > (videoIndex + 1))
 851                                 videoIndex++;
 852                         else
 853                                 videoIndex = 0;
 854
 855                         videoPlayer.pause();
 856                         $("#playButton").toggleClass('playing', true);
 857                         $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
 858                         videoPlayer.load();
 859                 }
 860                 break;
 861
 862         case "IMAGE":
 863                 if (imageContent)
 864                 {
 865                         if (imageContent.length > (imageIndex + 1))
 866                                 imageIndex++;
 867                         else
 868                                 imageIndex = 0;
 869
 870                         $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
 871                         $("#imagePlayer").css("background-size", "contain");
 872                 }
 873                 break;
 874
 875         default:
 876                 console.log("Content failure");
 877         break;
 878         }
 879 }
 880
 881 /**************************************** END NAVIGATION FUNCTIONS *******************************************/
 882
 883 function resizeMainMenu()
 884 {
 885         console.log("MediaPlayer in resizeMainMenu");
 886
 887         $("#mediaList").fadeOut(0);
 888         screenWidth = window.innerWidth;
 889         screenHeight = window.innerHeight;
 890         screenOrientation = screenWidth < screenHeight ? "portrait" : "landscape";
 891         iconWidth = screenOrientation === "portrait" ? screenHeight / 4 : screenWidth / 4;
 892         var padding = 20;
 893
 894         $(".mainButton").width(iconWidth + "px");
 895         $(".mainButton").height(iconWidth + "px");
 896
 897         var iconsTop  = screenOrientation === "portrait" ? ((screenHeight - (iconWidth * 3)) / 2) - (padding * 3) : (screenHeight - iconWidth) / 2;
 898
 899         if (screenOrientation === "portrait")
 900                 $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : (screenWidth / 2) - (iconWidth /2) - padding + "px", "width" : "50%"});
 901         else
 902         {
 903                 $("#mainMenuButtons").css({"top": iconsTop + "px", "left" : ((iconWidth / 2) - (padding * 3)) + "px", "width" : "100%"});
 904                 $("#sortButtons").addClass("landscape");
 905         }
 906 }
 907
 908 function resizePlayerPage()
 909 {
 910         console.log("MediaPlayer in resizePlayerPage");
 911
 912         audioPlayer = document.getElementById("audioPlayer");
 913         videoPlayer = document.getElementById("videoPlayer");
 914         screenWidth = window.innerWidth;
 915         screenHeight = window.innerHeight;
 916
 917         var padding = 15;
 918         var buttonWidth = screenOrientation === "portrait" ? screenHeight * 0.05 : screenWidth * 0.05;
 919
 920         $("#backButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) - (buttonWidth *3)) + "px"});
 921         $("#nextButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": ((screenWidth / 2) + (buttonWidth *2)) + "px"});
 922         $("#returnButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": padding + "px"});
 923         $("#listButton").css({"width": buttonWidth + "px", "height": buttonWidth + "px", "top": padding + "px", "left": (screenWidth - buttonWidth - padding * 2) + "px"});
 924         $("#playButton").css({"width": buttonWidth * 1.3 + "px", "height": buttonWidth * 1.3 + "px", "top": padding * 0.3 + "px", "left": (screenWidth / 2) - (buttonWidth / 2) + "px"});
 925
 926         mediaNameCanvas.width = (screenWidth);
 927         mediaNameCanvas.height = (screenHeight * 0.34) - (buttonWidth + (2 * padding));
 928         mediaNameCanvas.style.top = (buttonWidth + (2 * padding) ) + "px";
 929         mediaNameCanvas.style.left = "0px";
 930
 931         var sortButtonTop = (buttonWidth + (2 * padding) ) + mediaNameCanvas.height - (buttonWidth * 1.3);
 932         var sortButtonWidth = buttonWidth * 2.5;
 933         var buttonSpacing = screenWidth / 5;
 934
 935         mediaListItemW = $("#mediaList").width() * 0.92;
 936         mediaListItemH = $("#mediaList").height() / 10;
 937 }
 938
 939 function resizeAll()
 940 {
 941         console.log("MediaPlayer in resizeAll");
 942         resizeMainMenu();
 943         resizePlayerPage();
 944 }
 945
 946 /*
 947  * swipe - Handles swipe events.  Currently it just acts as another way to hit the next / back buttons, but
 948  * it could be expanded to other things in the future.
 949  */
 950
 951 function swipe(direction, object)
 952 {
 953 console.log("MediaPlayer in swipe");
 954         switch (object)
 955         {
 956         case "mediaName":
 957                 if (direction === "right")
 958                         nextButtonClick();
 959                 else if (direction === "left")
 960                         backButtonClick();
 961                 break;
 962
 963         default:
 964                 break;
 965         }
 966 }
 967
 968 function init()
 969 {
 970         console.log("MediaPlayer in init");
 971          var vehicle = tizen.vehicle;
 972
 973         vehicle.subscribe("NightMode",function(value) {
 974                 console.log("MediaPlayer: Day / Night mode changed to " + value.nightmode);
 975
 976                                 if (nightMode !== value.nightmode)
 977                 {
 978                         Array.prototype.forEach.call (document.querySelectorAll ('*'), function (el) {el.classList.toggle('night');});
 979                         nightMode = value.nightmode
 980                 }
 981         });
 982
 983         musicIcon.src = "images/musicIcon.png";
 984         vidIcon.src = "images/videoIcon.png";
 985         imgIcon.src = "images/imageIcon.png";
 986         imageControls = new ImageControls();
 987
 988         mediaNameCanvas = document.getElementById("mediaName");
 989         mediaNameCTX = mediaNameCanvas.getContext("2d");
 990
 991         //Resize all items and search for local media
 992         resizeAll();
 993
 994         //Check if DLNA plugin is installed.  If so, scan for media.
 995         if (tizen.mediaserver)
 996         {
 997                 tizen.mediaserver.scanNetwork(foundMediaServer);
 998         }
 999         else
1000                 console.log("MediaPlayer: No DLNA server running, using local media only...");
1001
1002         //Setup voice control
1003         setupSpeech();
1004
1005         //Get local media
1006         getMedia(contentType);
1007
1008         //Prevent highlighting
1009         window.ondragstart = function() { return false; }
1010
1011         $(window).bind('resize', resizeAll);
1012
1013         //Simple swipe detection
1014         $("#mediaName").mousedown(function(e){mouseDownEvent = e;});
1015         $("#mediaName").mouseup(function(e){
1016                 if (Math.abs(mouseDownEvent.clientY - e.clientY) < 100)
1017                 {
1018                         if (Math.abs(mouseDownEvent.clientX - e.clientX) > 100)
1019                         {
1020                                 if (mouseDownEvent.clientX > e.clientX)
1021                                         swipe("left", "mediaName");
1022                                 else
1023                                         swipe("right", "mediaName");
1024                         }
1025                 }
1026         });
1027
1028     document.getElementById('videoPlayer').addEventListener("playing", function() {
1029         $("#navigationButtons").hide();
1030     }, false);
1031     document.getElementById('videoPlayer').addEventListener("pause", function() {
1032         $("#navigationButtons").show();
1033     }, false);
1034 }
1035
1036 $(document).ready(function () {
1037         init();
1038 });