cursor.html

<html>
<head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<!-- ZigJS -->
<script type="text/javascript" src="zig.js"></script>


<script type="text/javascript" src="iscroll.js"></script>
<script src="id3v2.js"></script>


 <script>
      //beware! this code is pretty hacky and  ugly.
      /*
        This doesn't use jQuery or any js libraries, not because they aren't great
        in retrospect, I really think I should have used jQuery here.
        
        But yesterday when I started this, I was really offended by a chrome extension
        which was literally a one liner content script that had jquery as a dependency.
        
        That's just terrible.
        
        Anyway, this is more of a proof of concept and in a weird backwards way, I prefer
        to do my prototypes without jQuery.
      */
      function parseFile(file, callback){
	console.log("start parseFile");
        if(localStorage[file.fileName]) return callback(JSON.parse(localStorage[file.fileName]));
	console.log("use id3v2 to parseFile");
        ID3v2.parseFile(file,function(tags){
          //to not overflow localstorage
	  console.log("oncomplete cb");
          localStorage[file.fileName] = JSON.stringify({
            Title: tags.Title,
            Artist: tags.Artist,
            Album: tags.Album,
            Genre: tags.Genre
          });
	  console.log('invoke cb');
          callback(tags);
        })
      }
      
      function runSearch(query){
        console.log(query);
        var regex = new RegExp(query.trim().replace(/\s+/g, '.*'), 'ig');
        for(var i = $('thelist').getElementsByTagName('li'), l = i.length; l--;){
          if(regex.test(i[l].innerHTML)){
            i[l].className = 'visible'
          }else{
            i[l].className = 'hidden';
          }
        }
      }
      
      function canPlay(type){
        var a = document.createElement('audio');
        return !!(a.canPlayType && a.canPlayType(type).replace(/no/, ''));
      }
         
      function $E(id){return document.getElementById(id)}
      function getSongs(files){
      console.log('getSongs');
     //   $E("mask").style.display = 'none';
     //   $E("startup").style.display = 'none';
        var queue = [];
        var mp3 = canPlay('audio/mpeg;'), ogg = canPlay('audio/ogg; codecs="vorbis"');
        for(var i = 0; i < files.length; i++){
          var file = files[i];
	  
	  var path = file.webkitRelativePath || file.mozFullPath || file.fileName;
          if (path.indexOf('.AppleDouble') != -1) {
		// Meta-data folder on Apple file systems, skip
		continue;
          }         
	  var size = file.size || file.fileSize || 4096;
	  if(size < 4095) { 
		// Most probably not a real MP3
		console.log(path);
		continue;
	  }
 
          if(file.fileName.indexOf('mp3') != -1){ //only does mp3 for now
            if(mp3){
              queue.push(file);
            }
          }
          if(file.fileName.indexOf('ogg') != -1  || file.fileName.indexOf('oga') != -1){
            if(ogg){
              queue.push(file);
            }
          }
        }
                                
        var process = function(){
		console.log('processingfiles');
		console.log('queue len: ' + queue.length);
          if(queue.length){
            
            var f = queue.shift();
            parseFile(f,function(tags){
	      console.log("parseFile cb");
              console.log(tags);
              var li = document.createElement('li');
              var t2 = guessSong(f.webkitRelativePath || f.mozFullPath || f.fileName); 
              //it should be innerText/contentText but its annoying.
              var sp = document.createElement('span');
              sp.innerHTML = tags.Title || t2.Title;
              li.appendChild(sp);
              
              var sp = document.createElement('span');
              sp.innerHTML = tags.Artist || t2.Artist;
              li.appendChild(sp);
              
              var sp = document.createElement('span');
              sp.innerHTML = tags.Album || t2.Album;
              li.appendChild(sp);
              
              var sp = document.createElement('span');
              sp.innerHTML = tags.Genre || "";
              li.appendChild(sp);
              li.onclick = function(){
                var pl = document.createElement('li');
                var st = document.createElement('span');
                st.innerHTML = tags.Title || t2.Title;
                pl.appendChild(st);
                $E("playtable").appendChild(pl);
                pl.file = f;
                pl.className = 'visible';
                pl.onclick = function(e){
                  if(e && e.button == 1){
                    pl.parentNode.removeChild(pl);
                  }else{
                    var url;
                    if(window.createObjectURL){
                      url = window.createObjectURL(f)
                    }else if(window.createBlobURL){
                      url = window.createBlobURL(f)
                    }else if(window.URL && window.URL.createObjectURL){
                      url = window.URL.createObjectURL(f)
                    }else if(window.webkitURL && window.webkitURL.createObjectURL){
                      url = window.webkitURL.createObjectURL(f)
                    }
                    
                    $E("player").src = url;
                    $E("player").play();
                    for(var i = document.querySelectorAll('.playing'), l = i.length; l--;){
                      i[l].className = '';
                    }
                    pl.className += ' playing';
                    currentSong = pl;
                  }
                }
                if($E("playtable").childNodes.length == 1) pl.onclick();
              }
              $E('thelist').appendChild(li);
              process();
            })
            var lq = queue.length;
            setTimeout(function(){
              if(queue.length == lq){
                process();
              }
            },300);
          }
        }
        process();
        
        console.log(files);
      }
 
</script>


<script type='text/javascript'>

var myScroll;
var cursorFader;
var pushDetector;
var cursorElement;
var cursorElement2;

var baseCursorSize = 15;
var outerCursorDelta = 25;

function loaded() {
	myScroll = new iScroll('cursorArea');
	
	cursorFader = new Zig.Fader2D(300, 250);
	cursorFader.onValueChange = function(value) {
	
		cursorElement.style.width = baseCursorSize + ((1 - pushDetector.pushProgress) * outerCursorDelta) + "px";
		cursorElement.style.height = baseCursorSize + ((1 - pushDetector.pushProgress) * outerCursorDelta) + "px";
	
		positionInParent(cursorElement, value[0], 1-value[1]);
		positionInParent(cursorElement2, value[0], 1-value[1]);
		if (!pushDetector.isPushed) return;
		myScroll.handleEvent({
			type:"mousemove", 
			pageX : value[0] * cursorElement.parentNode.offsetWidth, 
			pageY : -value[1] * cursorElement.parentNode.offsetHeight,
			});
	}
	
	pushDetector = new Zig.PushDetector();
	pushDetector.onPush = function() {
		myScroll.handleEvent({
			type:"mousedown", 
			pageX : cursorFader.value[0] * cursorElement.parentNode.offsetWidth, 
			pageY : -cursorFader.value[1] * cursorElement.parentNode.offsetHeight,
			button : 0,
			preventDefault : function() {} });
	
		$(".pushable").addClass("pushed");
	}
	
	pushDetector.onRelease = function() {
		myScroll.handleEvent({
			type:"mouseup", 
			pageX : cursorFader.value[0] * cursorElement.parentNode.offsetWidth, 
			pageY : -cursorFader.value[1] * cursorElement.parentNode.offsetHeight,
			button : 0});

		$(".pushable").removeClass("pushed");
	}
	
	cursorElement = document.getElementById("cursor");
	cursorElement2 = document.getElementById("cursorCenter");
	
	  // Setup the dnd listeners.
	var dropZone = document.getElementById('cursorArea');
	dropZone.addEventListener('dragover', handleDragOver, false);
	dropZone.addEventListener('drop', handleFileSelect, false);


	for (var i=1; i <= 150; i++) {
		$("#thelist").append($("<li>").text("Sample song " + i));
	}
	myScroll.refresh();
} 

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); 

function ZigPluginLoaded()
{
	Zig.init(document.getElementById("ZigPlugin"));
	Zig.SingleUser.controls.AddControl(cursorFader);
	Zig.SingleUser.controls.AddControl(pushDetector);

	Zig.SingleUser.onUserEngaged = function(user) { $(".showinsession").fadeIn(); };
	Zig.SingleUser.onUserDisengaged = function(user) { $(".showinsession").fadeOut(); };

}

function positionInParent(element, posX, posY) {
	element.style.left = (posX * element.parentNode.offsetWidth - (element.offsetWidth / 2)) + "px";
	element.style.top = (posY * element.parentNode.offsetHeight - (element.offsetHeight / 2)) + "px";
}


  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    files = evt.dataTransfer.files;

    for (var i = 0, f; f = files[i]; i++) {
      //output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
       //           f.size, ' bytes, last modified: ',
        //          f.lastModifiedDate.toLocaleDateString(), '</li>');
		$("#thelist").append($("<li>").text(f.name));
    }

    myScroll.refresh();
    
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }
</script>

<style>
#cursorArea {
	width: 	600;
	height: 500;
	margin: auto;
	border:	3px solid darkblue;
	overflow:hidden;
	position:relative;
}

#cursorArea.pushed {
	border:	5px solid red;
}

#cursor {
	width : 30;
	height : 30;
	border:	3px solid darkblue;
	background-color: white;
	opacity: .3;
	position:absolute;
}

#cursor.pushed {
	opacity: 1;
}

#cursorCenter {
	width:	15;
	height: 15;
	border:	3px solid darkblue;
	background-color: lightblue;
	position:absolute;
}

#cursorCenter.pushed {
	border:	3px solid green;
	background-color: yellow;
	opacity: .4;
}

.showinsession {
	display: none
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:14px;
}

</style>

</head>

<body>

<div id="cursorArea" class="pushable">
	<div id="scroller">
		<ul id="thelist">
			
			<!--<li>Pretty row 1</li>
			<li>Pretty row 2</li>
			<li>Pretty row 3</li>
			<li>Pretty row 4</li>
			<li>Pretty row 5</li>
			<li>Pretty row 6</li>
			<li>Pretty row 7</li>
			<li>Pretty row 8</li>
			<li>Pretty row 9</li>
			<li>Pretty row 10</li>
			<li>Pretty row 11</li>
			<li>Pretty row 12</li>
			<li>Pretty row 13</li>
			<li>Pretty row 14</li>
			<li>Pretty row 15</li>
			<li>Pretty row 16</li>
			<li>Pretty row 17</li>
			<li>Pretty row 18</li>
			<li>Pretty row 19</li>
			<li>Pretty row 20</li>
			<li>Pretty row 21</li>
			<li>Pretty row 22</li>
			<li>Pretty row 23</li>
			<li>Pretty row 24</li>
			<li>Pretty row 25</li>
			<li>Pretty row 26</li>
			<li>Pretty row 27</li>
			<li>Pretty row 28</li>
			<li>Pretty row 29</li>
			<li>Pretty row 30</li>
			<li>Pretty row 31</li>
			<li>Pretty row 32</li>
			<li>Pretty row 33</li>
			<li>Pretty row 34</li>
			<li>Pretty row 35</li>
			<li>Pretty row 36</li>
			<li>Pretty row 37</li>
			<li>Pretty row 38</li>
			<li>Pretty row 39</li>
			<li>Pretty row 40</li>-->
		</ul> 
	</div>
	<div id="cursor" class="showinsession pushable"></div>
	<div id="cursorCenter" class="showinsession pushable"></div>
</div>
<ul id="playtable">
</ul>
<!-- ZigJS plugin -->
<div id="pluginContainer">
	<object id="ZigPlugin" type="application/x-zig" width="0" height="0">
		<param name="onload" value="ZigPluginLoaded" />
	</object>
</div>  
 <input type="file" webkitdirectory directory multiple mozdirectory onchange="getSongs(this.files)">
<div id="search">
      <input type="text" placeholder="filter library" spellcheck=off autocomplete=off oninput="runSearch(this.value)">
    </div>
<audio onended="" controls id="player">
</body>
</html>