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