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