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