js/listFunctions.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 //Audio list can be re-ordered while filling.
  11 //This requires cancelling all previous timeouts to properly fill
  12 var clearAudioTimeouts = new Array();
  13 var lightColor = false;
  14
  15 function mediaError()
  16 {
  17     console.log("MediaPlayer: file failed to load");
  18 }
  19
  20 var drawCanvasImage = function(imageSrc) {
  21     return function() {
  22         drawAlbumArt(imageSrc);
  23     }
  24 }
  25
  26 function drawAlbumArt(imageSrc)
  27 {
  28     if (currentPlayerType === "AUDIO")
  29     {
  30         var canvasH = mediaListItemH * 0.95 ;
  31         for (var i in audioContent)
  32         {
  33             if (audioContent[i].coverArt.src !== musicIcon.src && audioContent[i].coverArt.src === imageSrc && audioContent[i].ctx)
  34             {
  35                 try
  36                 {
  37                     if (i == audioIndex)
  38                     {
  39                         updateMediaName(audioContent[audioIndex].artists[0], audioContent[audioIndex].title, audioContent[audioIndex].coverArt);
  40                     }
  41                     audioContent[i].ctx.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH);
  42                 }
  43                 catch(err)
  44                 {
  45                     console.log("MediaPlayer: drawImage failed - " + err);
  46                 }
  47             }
  48         }
  49     }
  50 }
  51
  52 function loadImages()
  53 {
  54     console.log("MediaPlayer in loadImages");
  55
  56     for (var src in audioContent)
  57     {
  58         try
  59         {
  60             var imgSrc = (audioContent[src].coverArtURI !== undefined && audioContent[src].coverArtURI !== "") ? audioContent[src].coverArtURI : "images/musicIcon.png";
  61             audioContent[src].coverArt = new Image();
  62             audioContent[src].coverArt.onload = drawCanvasImage(imgSrc);
  63
  64             audioContent[src].coverArt.onerror = function(e){
  65                 audioContent[src].coverArt.src = "images/musicIcon.png";
  66             };
  67
  68             audioContent[src].coverArt.src = imgSrc;
  69         }
  70         catch(err)
  71         {
  72             console.log("Failed to load audio cover image: " + err);
  73         }
  74     }
  75 }
  76
  77 function makeListItem(j, k, contentList, playerType, listItems)
  78 {
  79     var iconURI;
  80     var currentCanvas;
  81     var canvasW = mediaListItemW;
  82     var canvasH = mediaListItemH * 0.95 ;
  83     var lowerType = playerType.toLowerCase();
  84
  85     for (var i = j; (i < (j+k) && i < contentList.length); i++)
  86     {
  87
  88         if ((i+1)%2 === 0)
  89         {
  90             if (nightMode)
  91             {
  92
  93                 listItems.append("<li id=" + lowerType + "ListItem" + i + " style='width:" + mediaListItemW + "px;" + " height:" +  mediaListItemH + "px;" +
  94                         " margin-bottom: 10px' ><a href='#' class='night' >" +
  95                         "<canvas id=" + lowerType + "CanvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
  96                         "</a></li>"
  97                         );
  98             }
  99             else
 100             {
 101                 listItems.append("<li id=" + lowerType + "ListItem" + i + " style='width:" + mediaListItemW + "px;" + " height:" +  mediaListItemH + "px;" +
 102                         " margin-bottom: 10px' ><a href='#'>" +
 103                         "<canvas id=" + lowerType + "CanvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 104                         "</a></li>"
 105                         );
 106             }
 107         }
 108         else
 109         {
 110             if (nightMode)
 111             {
 112                 listItems.append("<li id=" + lowerType + "ListItem" + i + " style='width:" + mediaListItemW + "px;" + " height:" +  mediaListItemH + "px;" +
 113                         " margin-bottom: 10px' ><a href='#' class='lightColor night' >" +
 114                         "<canvas id=" + lowerType + "CanvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 115                         "</a></li>"
 116                         );
 117             }
 118             else
 119             {
 120                 listItems.append("<li id=" + lowerType + "ListItem" + i + " style='width:" + mediaListItemW + "px;" + " height:" +  mediaListItemH + "px;" +
 121                         " margin-bottom: 10px' ><a href='#' class='lightColor' >" +
 122                         "<canvas id=" + lowerType + "CanvasNum" + i + " width=" + canvasW + " height=" + canvasH + "> </canvas>" +
 123                         "</a></li>"
 124                         );
 125             }
 126
 127         }
 128
 129         lightColor = !lightColor;
 130
 131         var currentCanvas = document.getElementById(lowerType + "CanvasNum" + i);
 132         var currentCTX = currentCanvas.getContext("2d");
 133
 134         // Set callback function for the new list item
 135         $("#" + lowerType + "CanvasNum" + i).click(function () {
 136
 137                 $("#playButton").toggleClass('playing', false);
 138
 139                 switch (playerType)
 140                 {
 141                 case "AUDIO":
 142                 try
 143                 {
 144                     audioIndex = $(this).parent().parent().index();
 145                     loadAndPlay = true;
 146                     updateMediaName(audioContent[audioIndex].artists[0], audioContent[audioIndex].title, audioContent[audioIndex].coverArt);
 147                     $("#audioSrc").attr("src", audioContent[audioIndex].contentURI);
 148                     localStorage.prevAudioTrack = audioContent[audioIndex].contentURI;
 149                     audioPlayer.load();
 150                 }
 151                 catch(err)
 152                 {
 153                         console.log("MediaPlayer: load audio error " + err.message);
 154                 }
 155                 break;
 156
 157                 case "VIDEO":
 158                 try
 159                 {
 160                     videoIndex = $(this).parent().parent().index();
 161                     $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
 162                     localStorage.prevVideo = videoContent[videoIndex].contentURI;
 163                     videoPlayer.load();
 164                     currentMediaList.fadeOut(300);
 165                 }
 166                 catch(err)
 167                 {
 168                     console.log("MediaPlayer: load video error " + err.message);
 169                 }
 170                 break;
 171
 172                 case "IMAGE":
 173                 try
 174                 {
 175                     imageIndex = $(this).parent().parent().index();
 176                     $("#imagePlayer").css("background", "url(" + imageContent[imageIndex].contentURI + ") no-repeat center");
 177                     $("#imagePlayer").css("background-size", "contain");
 178                     currentMediaList.fadeOut(300);
 179                 }
 180                 catch(err)
 181                 {
 182                     console.log("MediaPlayer: load image error: " + err.message);
 183                 }
 184                 break;
 185
 186                 default:
 187                 break;
 188                 }
 189         });
 190
 191         switch (playerType)
 192         {
 193             case "AUDIO":
 194
 195                 audioContent[i].ctx = currentCTX;
 196
 197                 try
 198                 {
 199                     //Check if album art is done loading, if not draw default until it is
 200                     if (audioContent[i].coverArt.complete)
 201                         currentCTX.drawImage(audioContent[i].coverArt, 0, 0, canvasH, canvasH );
 202                     else
 203                         currentCTX.drawImage(musicIcon, 0, 0, canvasH, canvasH );
 204                 }
 205                 catch(err)
 206                 {
 207                     console.log("MediaPlayer: drawImage failed - " + err);
 208                 }
 209
 210                 var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 211                 var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 212                 clearAudioTimeouts.splice(0, 1);
 213                 break;
 214
 215             case "VIDEO":
 216                 currentCTX.drawImage(vidIcon, 0, 0, canvasH, canvasH );
 217                 var artistText = new TextObject(currentCTX,{"text" : contentList[i].artists[0], "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 218                 var trackText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 219                 break;
 220
 221             case "IMAGE":
 222                 currentCTX.drawImage(imgIcon, 0, 0, canvasH, canvasH );
 223                 var artistText = new TextObject(currentCTX,{"text" : contentList[i].title, "xLoc" : canvasH + 20, "yLoc" : canvasH / 2.5 , "zLoc" : 0});
 224                 var trackText = new TextObject(currentCTX,{"text" : " ", "xLoc" : canvasH + 20, "yLoc" : canvasH / 1.1 , "zLoc" : 0});
 225                 break;
 226
 227             default:
 228                 break;
 229         }
 230
 231         var mediaTextTemp1 = screenOrientation === "portrait" ? mediaTextTemplate2 : mediaTextTemplate2Landscape;
 232         var mediaTextTemp2 = screenOrientation === "portrait" ? mediaTextTemplate3 : mediaTextTemplate3Landscape;
 233         var trackTextTemp = screenOrientation === "portrait" ? trackTextTemplate : trackTextTemplateLandscape;
 234
 235         trackText.applyTemplate(mediaTextTemp1);
 236         trackText.drawObj();
 237         trackText.applyTemplate(mediaTextTemp2);
 238         trackText.drawObj();
 239
 240         artistText.applyTemplate(trackTextTemp);
 241         artistText.drawObj();
 242     }
 243 }
 244
 245 function emptyTimeouts()
 246 {
 247     var clearItem;
 248
 249     while (clearItem = clearAudioTimeouts.pop())
 250     {
 251         clearTimeout(clearItem);
 252     }
 253 }
 254
 255 function fillMediaList(contentList)
 256 {
 257     console.log("MediaPlayer in fillMediaList");
 258
 259     //Don't try and fill an empty content list
 260     if (contentList === undefined || contentList === null || contentList.length <=0)
 261         return false;
 262
 263     if (currentPlayerType === "AUDIO")
 264         emptyTimeouts();
 265
 266     currentMediaListItems.empty();
 267     var timeOut = 1;
 268
 269     switch (currentPlayerType)
 270     {
 271         case "AUDIO":
 272             audioMediaListLoaded = true;
 273             break;
 274         case "VIDEO":
 275             videoMediaListLoaded = true;
 276             break;
 277         case "IMAGE":
 278             imageMediaListLoaded = true;
 279             break;
 280         default:
 281             break;
 282     }
 283
 284     var jumpSize = 1;
 285     var tmpClearTimeout;
 286
 287     for (var i=0; i < contentList.length; i++)
 288     {
 289         tmpClearTimeout = setTimeout(makeListItem.bind(this, i, jumpSize, contentList, currentPlayerType, currentMediaListItems), timeOut);
 290         clearAudioTimeouts.push(tmpClearTimeout);
 291
 292         timeOut += 50;
 293         i+=jumpSize - 1;
 294     }
 295 }