Asunder/src/webserver/index.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   3         "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml"
   5         xmlns:svg="http://www.w3.org/2000/svg">
   6 <head>
   7 <title>Stereo</title>
   8 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   9 <script type="text/javascript" charset="utf-8">
  10 //<![CDATA[
  11         function getPlaybackStatusUpdate() {
  12                 var request = "/ctrl-int/1/playstatusupdate";
  13
  14                 if (lastUpdate && lastUpdate.revision) {
  15                         request += "?revision-number="+lastUpdate.revision;
  16                 }
  17
  18                 ajax.request(request, function (response) {
  19                         var tree = new Node(response);
  20
  21                         var up = new PlayStatusUpdate(tree, 0);
  22
  23                         updateStatus(up);
  24
  25                         if (!lastUpdate || up.revision != lastUpdate.revision) {
  26                                 getPlaylistUpdate();
  27                                 getAlbumArt(up.revision);
  28                                 if ((!lastUpdate && up.status == 4)
  29                                         || (lastUpdate.status == 2 && up.status == 4)) {
  30                                                 document.body.className = "playing";
  31                                 }
  32                         }
  33
  34                         lastUpdate = up;
  35                         if (up.status) {
  36                                 getPlaybackStatusUpdate();
  37                                 getVolume();
  38                         }
  39                 });
  40         }
  41
  42         function getPlaylistUpdate() {
  43                 var request = "/ctrl-int/1/playlist";
  44                 ajax.request(request, function (text) {
  45                         var tree = new Node(text);
  46                         var playlist = new Playlist(tree, 0);
  47                         updatePlaylist(playlist);
  48                 });
  49         }
  50
  51         function getAlbumArt(revision) {
  52                 document.getElementById("albumart").src = "/ctrl-int/1/nowplayingartwork?revision="+revision;
  53         }
  54
  55         function getPlaylists() {
  56                 var request = "/databases/1/containers";
  57                 var callback = function (text) {
  58
  59                                 var tree = new Node(text);
  60
  61                                 var list = findNode(tree, 0, "mlcl");
  62
  63                                 var playlists = getItems(tree, list, function (t, i) {
  64                                         return new Container(t, i);
  65                                 });
  66
  67                                 var parent = document.getElementById("browse-playlists-container");
  68                                 while (parent.childNodes.length > 0) {
  69                                         parent.removeChild(parent.firstChild);
  70                                 }
  71
  72                                 for (p in playlists) {
  73                                         var item = document.createElement("DIV");
  74                                         item.className="item";
  75
  76                                         item.appendChild(createNode("title", playlists[p].name));
  77                                         item.appendChild(createNode("count", playlists[p].items));
  78                                         item.collection = playlists[p].id;
  79                                         item.persistent = playlists[p].persistent;
  80
  81                                         if (playlists[p].id == lastUpdate.container) {
  82                                                 item.className += " current";
  83                                         }
  84
  85                                         parent.appendChild(item);
  86                                 }
  87                 }
  88                 ajax.request(request, callback);
  89         }
  90
  91         function getArtists() {
  92                 var request = "/databases/1/browse/artists";
  93                 var callback = function (text) {
  94
  95                         var tree = new Node(text);
  96
  97                         var list = findNode(tree, 0, "abar");
  98
  99                         var artists = getItems(tree, list, function (t, i) {
 100                                 return t.stringVal(i);
 101                         });
 102
 103                         var parent = document.getElementById("browse-artists-container");
 104                         while (parent.childNodes.length > 0) {
 105                                 parent.removeChild(parent.firstChild);
 106                         }
 107
 108                         for (a in artists) {
 109                                 var item = document.createElement("DIV");
 110                                 item.className="item";
 111                                 item.query="'daap.songartist:"+artists[a]+"'";
 112
 113                                 item.appendChild(createNode("title", artists[a]));
 114
 115                                 parent.appendChild(item);
 116                         }
 117                 }
 118                 ajax.request(request, callback);
 119         }
 120
 121         function getAlbums(query, callback) {
 122                 var request = "/databases/1/groups?group-type=albums&sort=albums&query="+query;
 123                 var fn = function (text) {
 124
 125                         var tree = new Node(text);
 126
 127                         var list = findNode(tree, 0, "mlcl");
 128
 129                         var albums = getItems(tree, list, function (t, i) {
 130                                 return new Album(t, i);
 131                         });
 132
 133                         callback(albums);
 134                 }
 135                 ajax.request(request, fn);
 136
 137         }
 138
 139         function getTracks(query, callback) {
 140
 141                 var request = "/databases/1/containers/1/items?query="+query;
 142                 var fn = function (text) {
 143
 144                         var tree = new Node(text);
 145
 146                         var list = findNode(tree, 0, "mlcl");
 147
 148                         var tracks = getItems(tree, list, function (t, i) {
 149                                 return new Track(t, i);
 150                         });
 151
 152                         callback(tracks);
 153                 }
 154                 ajax.request(request, fn);
 155         }
 156
 157         function getCollectionTracks(collection, callback) {
 158
 159                 var request = "/databases/1/containers/" + collection + "/items";
 160                 var fn = function (text) {
 161
 162                         var tree = new Node(text);
 163
 164                         var list = findNode(tree, 0, "mlcl");
 165
 166                         var tracks = getItems(tree, list, function (t, i) {
 167                                 return new Track(t, i);
 168                         });
 169
 170                         callback(tracks);
 171                 }
 172                 ajax.request(request, fn);
 173         }
 174
 175         function getVolume() {
 176
 177                 var request = "/ctrl-int/1/getproperty?properties=dmcp.volume"
 178                 var fn = function (text) {
 179
 180                         var tree = new Node(text);
 181
 182                         var volume = tree.intVal(findNode(tree, 0, "cmvo"));
 183
 184                         var vol = 15 + (volume * 270 / 100);
 185
 186                         document.getElementById("volume-control").setAttribute("cx", vol);
 187                 }
 188                 ajax.request(request, fn);
 189         }
 190
 191         function setVolume(volume) {
 192                 var request = new XMLHttpRequest();
 193                 request.open("GET", "/ctrl-int/1/setproperty?dmcp.volume="+volume);
 194                 request.send(null);
 195         }
 196
 197         function next() {
 198                 var request = new XMLHttpRequest();
 199                 request.open("GET", "/ctrl-int/1/nextitem", true);
 200                 request.send(null);
 201         }
 202
 203         function prev() {
 204                 var request = new XMLHttpRequest();
 205                 request.open("GET", "/ctrl-int/1/previtem", true);
 206                 request.send(null);
 207         }
 208
 209         function play() {
 210                 var request = new XMLHttpRequest();
 211                 request.open("GET", "/ctrl-int/1/playpause", true);
 212                 request.send(null);
 213         }
 214
 215         function pause() {
 216                 var request = new XMLHttpRequest();
 217                 request.open("GET", "/ctrl-int/1/pause", true);
 218                 request.send(null);
 219         }
 220
 221         function jump(index) {
 222                 var request = new XMLHttpRequest();
 223                 request.open("GET", "/ctrl-int/1/cue?command=play&index="+index);
 224                 request.send(null);
 225         }
 226
 227         function clear() {
 228                 var request = new XMLHttpRequest();
 229                 request.open("GET", "/ctrl-int/1/cue?command=clear");
 230                 request.send(null);
 231         }
 232
 233         function enqueue(query) {
 234                 var request = new XMLHttpRequest();
 235                 request.open("GET", "/ctrl-int/1/cue?command=play&query="+query);
 236                 request.send(null);
 237         }
 238
 239         function setCollection(persistent) {
 240                 var request = new XMLHttpRequest();
 241                 request.open("GET", "/ctrl-int/1/playspec?playlist-spec="+persistent);
 242                 request.send(null);
 243         }
 244
 245         var lastUpdate = 0;
 246         var previousPane = new Array();
 247
 248         function updateStatus(update) {
 249
 250                 if (update.status == 2) {
 251                         document.getElementById("state").className = "stopped";
 252
 253                         document.getElementById("play").className = "";
 254                         document.getElementById("pause").className = "hidden";
 255                 } else if (update.status == 3) {
 256                         document.getElementById("state").className = "paused";
 257                         setText(document.getElementById("title"), update.title);
 258                         setText(document.getElementById("artist"), update.artist);
 259                         setText(document.getElementById("album"), update.album);
 260                         setText(document.getElementById("genre"), update.genre);
 261
 262                         document.getElementById("play").className = "";
 263                         document.getElementById("pause").className = "hidden";
 264                 } else if (update.status == 4) {
 265                         document.getElementById("state").className = "playing";
 266                         setText(document.getElementById("title"), update.title);
 267                         setText(document.getElementById("artist"), update.artist);
 268                         setText(document.getElementById("album"), update.album);
 269                         setText(document.getElementById("genre"), update.genre);
 270                         document.title = update.title + " - " + update.artist;
 271
 272                         document.getElementById("play").className = "hidden";
 273                         document.getElementById("pause").className = "";
 274                 }
 275         }
 276
 277         function setText(node, text) {
 278                 while (node.childNodes.length > 0) {
 279                         node.removeChild(node.firstChild);
 280                 }
 281                 node.appendChild(document.createTextNode(text));
 282         }
 283
 284         function updatePlaylist(playlist) {
 285
 286                 var list = document.getElementById("playlist");
 287                 list.innerHTML = "";
 288
 289                 var current = lastUpdate.id;
 290
 291                 for (i in playlist.tracks) {
 292                         var track = playlist.tracks[i];
 293
 294                         var node = document.createElement("DIV");
 295                         node.className = "item";
 296
 297                         node.appendChild(createNode("album", track.album));
 298                         node.appendChild(createNode("title", track.title));
 299                         node.appendChild(createNode("artist", track.artist));
 300                         node.appendChild(createNode("genre", track.genre));
 301                         node.appendChild(createNode("id", track.id));
 302
 303                         if (current && track.id == current) {
 304                                 node.className += " current";
 305                                 current = 0;
 306
 307                                 while (list.childNodes.length > 2) {
 308                                         list.removeChild(list.childNodes[0]);
 309                                 }
 310                         }
 311
 312                         list.appendChild(node);
 313                 }
 314         }
 315
 316         function createNode(type, value) {
 317                 var node = document.createElement("DIV");
 318                 node.className = type;
 319                 node.appendChild(document.createTextNode(value));
 320                 return node;
 321         }
 322
 323         function registerControls() {
 324
 325                 document.getElementById("back").onclick = function() {
 326                         if (previousPane.length == 0) {
 327                                 previousPane.push("playlists");
 328                         }
 329                         document.body.className = previousPane.pop();
 330                 }
 331                 document.getElementById("playing").onclick = function() {
 332                         if (document.body.className) {
 333                                 previousPane.push(document.body.className);
 334                         }
 335                         document.body.className = "playing";
 336                 }
 337
 338                 document.body.className = "playlists";
 339
 340                 document.getElementById("previous").onclick = function() {
 341                         prev();
 342                 }
 343                 document.getElementById("play").onclick = function() {
 344                         play();
 345                 }
 346                 document.getElementById("pause").onclick = function() {
 347                         pause();
 348                 }
 349                 document.getElementById("next").onclick = function() {
 350                         next();
 351                 }
 352
 353                 var dragging = false;
 354                 document.getElementById("volume-control").onmousedown = function() {
 355                         dragging = true;
 356                 }
 357                 document.getElementById("volume").onmouseup = function(e) {
 358                         if (dragging) {
 359                                 dragging = false;
 360                                 var x = e.clientX-document.getElementById("volume-wrapper").offsetLeft;
 361                                 if (x < 15) x = 15;
 362                                 if (x > 285) x = 285;
 363                                 var volume = Math.round((x - 15) * 100 / 270);
 364                                 setVolume(volume);
 365                         }
 366                 }
 367                 document.getElementById("volume").onmouseout = function(e) {
 368                         if (dragging && e.target == document.getElementById("volume")) {
 369                                 dragging = false;
 370                                 var x = e.clientX-document.getElementById("volume-wrapper").offsetLeft;
 371                                 if (x < 15) x = 15;
 372                                 if (x > 285) x = 285;
 373                                 var volume = Math.round((x - 15) * 100 / 270);
 374                                 setVolume(volume);
 375                         }
 376                 }
 377                 document.getElementById("volume").onmousemove = function(e) {
 378                         if (dragging) {
 379                                 var x = e.clientX-document.getElementById("volume-wrapper").offsetLeft;
 380                                 if (x < 15) x = 15;
 381                                 if (x > 285) x = 285;
 382                                 var control = document.getElementById("volume-control");
 383                                 control.setAttribute("cx", x);
 384                         }
 385                 }
 386
 387                 document.getElementById("playlist").onclick = function(e) {
 388                         var node = e.target;
 389                         while (!node.className.match("item")) {
 390                                 node = node.parentNode;
 391                                 if (node == document.body)
 392                                         return;
 393                         }
 394                         var playlist = document.getElementById("playlist");
 395                         var offset = -1;
 396                         for (child in playlist.childNodes) {
 397                                 if (playlist.childNodes[child].className
 398                                                 && playlist.childNodes[child].className
 399                                                                 .match("current")) {
 400                                         offset = child;
 401                                 }
 402                         }
 403                         if (offset == -1)
 404                                 return;
 405                         for (child in playlist.childNodes) {
 406                                 if (playlist.childNodes[child] == node) {
 407                                         jump(child - offset);
 408                                         break;
 409                                 }
 410                         }
 411                 }
 412
 413                 document.getElementById("browse-playlists-container").onclick = function(e) {
 414                         var node = e.target;
 415                         while (!node.className.match("item")) {
 416                                 node = node.parentNode;
 417                                 if (node == document.body)
 418                                         return;
 419                         }
 420
 421                         var collection = node.collection;
 422                         var persistent = node.persistent;
 423
 424                         getCollectionTracks(collection, function (tracks) {
 425                                 var parent = document.getElementById("browse-playlists-tracks");
 426                                 while (parent.childNodes.length > 0) {
 427                                         parent.removeChild(parent.firstChild);
 428                                 }
 429
 430                                 var shuffle = document.createElement("DIV");
 431                                 shuffle.className="item";
 432                                 shuffle.persistent=persistent;
 433                                 shuffle.query="";
 434                                 shuffle.appendChild(createNode("title", "Shuffle"));
 435                                 shuffle.appendChild(createNode("artist", ""));
 436                                 parent.appendChild(shuffle);
 437
 438                                 for (t in tracks) {
 439                                         var item = document.createElement("DIV");
 440                                         item.className="item";
 441                                         item.persistent=persistent;
 442                                         item.query="'dmap.persistentid:"+tracks[t].persistent+"'";
 443
 444                                         item.appendChild(createNode("title", tracks[t].title));
 445                                         item.appendChild(createNode("artist", tracks[t].artist));
 446
 447                                         parent.appendChild(item);
 448                                 }
 449                                 previousPane.push("playlists");
 450                                 document.body.className = "playlist-tracks";
 451                         });
 452                 }
 453
 454                 document.getElementById("browse-playlists-tracks").onclick = function(e) {
 455                         var node = e.target;
 456                         while (!node.className.match("item")) {
 457                                 node = node.parentNode;
 458                                 if (node == document.body)
 459                                         return;
 460                         }
 461
 462                         var query = node.query;
 463                         var persistent = node.persistent;
 464
 465                         setCollection(persistent);
 466
 467                         if (query != "") {
 468                                 clear();
 469                                 enqueue(query);
 470                         }
 471
 472                         previousPane.push("playlist-tracks");
 473                         document.body.className = "playing";
 474                 }
 475
 476                 document.getElementById("browse-artists-container").onclick = function(e) {
 477                         var node = e.target;
 478                         while (!node.className.match("item")) {
 479                                 node = node.parentNode;
 480                                 if (node == document.body)
 481                                         return;
 482                         }
 483
 484                         var query = node.query;
 485
 486                         getAlbums(query, function (albums) {
 487                                 var parent = document.getElementById("browse-artists-albums");
 488                                 while (parent.childNodes.length > 0) {
 489                                         parent.removeChild(parent.firstChild);
 490                                 }
 491                                 for (a in albums) {
 492                                         var item = document.createElement("DIV");
 493                                         item.className="item";
 494                                         item.query="'daap.songalbum="+albums[a].name+"'";
 495
 496                                         item.appendChild(createNode("title", albums[a].name));
 497
 498                                         parent.appendChild(item);
 499                                 }
 500                                 previousPane.push("artists");
 501                                 document.body.className = "artist-albums";
 502                         });
 503                 }
 504
 505                 document.getElementById("browse-artists-albums").onclick = function(e) {
 506                         var node = e.target;
 507                         while (!node.className.match("item")) {
 508                                 node = node.parentNode;
 509                                 if (node == document.body)
 510                                         return;
 511                         }
 512                         var query = "'daap.songalbum:"+node.textContent+"'";
 513                         getTracks(query, function (tracks) {
 514                                 var parent = document.getElementById("browse-artists-tracks");
 515                                 while (parent.childNodes.length > 0) {
 516                                         parent.removeChild(parent.firstChild);
 517                                 }
 518
 519                                 var item = document.createElement("DIV");
 520                                 item.className="item";
 521                                 item.query = query;
 522                                 item.appendChild(createNode("title", "All Songs"));
 523                                 parent.appendChild(item);
 524
 525                                 for (t in tracks) {
 526                                         item = document.createElement("DIV");
 527                                         item.className="item";
 528                                         item.query = query+"+'dmap.itemname:"+tracks[t].title+"'";
 529                                         item.appendChild(createNode("title", tracks[t].title));
 530
 531                                         parent.appendChild(item);
 532                                 }
 533                                 previousPane.push("artist-albums");
 534                                 document.body.className = "artist-tracks";
 535                         });
 536                 }
 537
 538                 document.getElementById("browse-artists-tracks").onclick = function (e) {
 539                         var node = e.target;
 540                         while (!node.className.match("item")) {
 541                                 node = node.parentNode;
 542                                 if (node == document.body)
 543                                         return;
 544                         }
 545
 546                         var query = node.query;
 547
 548                         clear();
 549                         enqueue(query);
 550
 551                         previousPane.push("artist-tracks");
 552                         document.body.className = "playing";
 553                 }
 554
 555                 document.getElementById("browse-albums-container").onclick = function(e) {
 556                         var node = e.target;
 557                         while (!node.className.match("item")) {
 558                                 node = node.parentNode;
 559                                 if (node == document.body)
 560                                         return;
 561                         }
 562
 563                         var query = node.query;
 564
 565                         getTracks(query, function (tracks) {
 566                                 var parent = document.getElementById("browse-albums-tracks");
 567                                 while (parent.childNodes.length > 0) {
 568                                         parent.removeChild(parent.firstChild);
 569                                 }
 570
 571                                 var item = document.createElement("DIV");
 572                                 item.className="item";
 573                                 item.query = query;
 574                                 item.appendChild(createNode("title", "All Songs"));
 575                                 parent.appendChild(item);
 576
 577                                 for (t in tracks) {
 578                                         item = document.createElement("DIV");
 579                                         item.className="item";
 580                                         item.query = query+"+'dmap.itemname:"+tracks[t].title+"'";
 581                                         item.appendChild(createNode("title", tracks[t].title));
 582                                         item.appendChild(createNode("artist", tracks[t].artist));
 583                                         parent.appendChild(item);
 584                                 }
 585
 586                                 previousPane.push("albums");
 587                                 document.body.className = "album-tracks";
 588                         });
 589                 }
 590
 591                 document.getElementById("browse-albums-tracks").onclick = function (e) {
 592                         var node = e.target;
 593                         while (!node.className.match("item")) {
 594                                 node = node.parentNode;
 595                                 if (node == document.body)
 596                                         return;
 597                         }
 598
 599                         var query = node.query;
 600
 601                         clear();
 602                         enqueue(query);
 603
 604                         previousPane.push("album-tracks");
 605                         document.body.className = "playing";
 606                 }
 607
 608                 document.getElementById("browse-menu-playlists").onclick = function() {
 609                         getPlaylists();
 610                         document.body.className = "playlists";
 611                 }
 612                 document.getElementById("browse-menu-artists").onclick = function() {
 613                         getArtists();
 614                         document.body.className = "artists";
 615                 }
 616                 document.getElementById("browse-menu-albums").onclick = function() {
 617                         getAlbums("'daap.songalbum!:'", function (albums) {
 618                                         var parent = document.getElementById("browse-albums-container");
 619                                         while (parent.childNodes.length > 0) {
 620                                                 parent.removeChild(parent.firstChild);
 621                                         }
 622                                         for (a in albums) {
 623                                                 var item = document.createElement("DIV");
 624                                                 item.className="item";
 625                                                 item.query="'daap.songalbum:"+albums[a].name+"'";
 626
 627                                                 item.appendChild(createNode("title", albums[a].name));
 628
 629                                                 parent.appendChild(item);
 630                                         }
 631                                         document.body.className = "albums";
 632                         });
 633                 }
 634                 document.getElementById("browse-menu-search").onclick = function() {
 635                         getSearch();
 636                         document.body.className = "search";
 637                 }
 638                 getPlaylists();
 639                 document.body.className = "playlists";
 640         }
 641         //]]>
 642 </script>
 643
 644 <link rel="stylesheet" type="text/css" href="style.css" />
 645
 646 </head>
 647 <body onload="registerControls(); getPlaybackStatusUpdate(); getVolume();">
 648 <div id="navigation">
 649 <div id="back">Back</div>
 650 <div id="playing">Now Playing</div>
 651 </div>
 652 <div id="current">
 653 <div id="state"><img id="albumart" src="" alt="" />
 654 <div id="title" class="title"></div>
 655 <div id="album" class="album"></div>
 656 <div id="artist" class="artist"></div>
 657 <div id="genre" class="genre"></div>
 658 </div>
 659 <div id="control">
 660 <div id="previous">previous</div>
 661 <div id="play">play</div>
 662 <div id="pause">pause</div>
 663 <div id="next">next</div>
 664 <div id="volume">volume</div>
 665 </div>
 666 <div id="playlist" class="content"></div>
 667 </div>
 668 <div id="browse">
 669         <div id="browse-menu">
 670                 <div id="browse-menu-playlists">Playlists</div>
 671                 <div id="browse-menu-artists">Artists</div>
 672                 <div id="browse-menu-albums">Albums</div>
 673                 <div id="browse-menu-search">Search</div>
 674         </div>
 675         <div id="browse-playlists" class="content">
 676                 <div id="browse-playlists-container" class="container"></div>
 677                 <div id="browse-playlists-tracks" class="container"></div>
 678         </div>
 679         <div id="browse-artists" class="content">
 680                 <div id="browse-artists-container" class="container"></div>
 681                 <div id="browse-artists-albums" class="container"></div>
 682                 <div id="browse-artists-tracks" class="container"></div>
 683         </div>
 684         <div id="browse-albums" class="content">
 685                 <div id="browse-albums-container" class="container"></div>
 686                 <div id="browse-albums-tracks" class="container"></div>
 687         </div>
 688         <div id="browse-search" class="content">
 689                 <div id="browse-search-interface">
 690                         <input type="text" name="songs" id="browse-search-input" />
 691                         <button type="submit" />
 692                 </div>
 693                 <div id="browse-search-container" class="container"></div>
 694         </div>
 695 </div>
 696
 697 <script type="text/javascript" src="svgloader.js"></script>
 698 <script type="text/javascript" src="ajax.js"></script>
 699 <script type="text/javascript" src="dacp.js"></script>
 700 <script type="text/javascript" src="bignum.js"></script>
 701 <script type="text/javascript">
 702         createSVGcontrols();
 703 </script>
 704 </body>
 705 </html>