tluyben/prefetch_localstorage.html

## prefetch_localstorage.html
<!doctype html>
<html>
<head>
<title>Prefetch video</title>
</head>
<body>
<h1>Prefetch video</h1>

<p>Prefetch a video and know exactly how much is loaded using XHR.</p>
<video controls style="border:1px solid grey;"></video>
<p>Taken from:</p>
<ul id="videos">
</ul>

<script src="q.js"></script>
<script src="largestorage.js"></script>
<script>

var desiredCapacity = 125 * 1024 * 1024;
var storage = new LargeLocalStorage({size: desiredCapacity, name: 'myDb'});
storage.initialized.then(function(grantedCapacity) {
 //?

 storage.getContents('Files').then(function(content) {
  if (content == undefined) {
   storage.setContents('Files', "the video files").then(function() {
    get_attachments();
   });
  } else {
    get_attachments();
  }
 });
});

function get_attachments() {

   // check attachments
   var done = 0;
   var i=0;
   var file;
   for(i=0;i<files.length;i++) {
    file = files[i];
    !function load(file) {storage.getAttachment('Files', file).then(function(videoFile) {
     done = true;
     console.log(file+", "+videoFile);
     if (videoFile != undefined) {
      create_link(file, URL.createObjectURL(videoFile));
     } else {
      prefetch_and_link(file);
     }
    })}(file);

   }
}

var files = ["movies/1.mp4", "movies/2.mp4"];
var urls = {};

var video = document.querySelector('video');
var videoList = document.getElementById("videos");

function play_video(file) {
 video.src = urls[file];
 video.play();
}

function create_link(file, url) {

      urls[file] = url;
      var li = document.createElement("LI");
      var a = document.createElement("A");
      var label = document.createTextNode(file);
      a.appendChild(label);
      a.href = "javascript:play_video('"+file+"');";
      li.appendChild(a);
      videoList.appendChild(li);
}
function prefetch_and_link(file) {
  prefetch_file(file,
    function(url, file) {
     create_link(file, url);
    },
    function(pc) {
      console.log(pc)
    });
}

function prefetch_file(url, fetched_callback, progress_callback) {
  var prev_pc = 0;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.addEventListener('load', function(event) {
    var status = event.target.status;
    if (status === 200) {
      var URL = window.URL || window.webkitURL;
      var blob_url = URL.createObjectURL(event.target.response);
      storage.setAttachment('Files', url, event.target.response).then(function() {
       console.log("Added "+url+" to storage");
      });
      fetched_callback(blob_url, url);
    } else {
      console.error(event);
    }
  }, false);

  xhr.addEventListener('progress', function(event) {
    if (event.lengthComputable) {
      var pc = Math.round(event.loaded / event.total * 100);
      if (pc !== prev_pc) {
        prev_pc = pc;
        progress_callback(pc);
      }
    }
  }, false);

  xhr.send();
}
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Prefetch video</title>
	</head>
	<body>
	<h1>Prefetch video</h1>

	<p>Prefetch a video and know exactly how much is loaded using XHR.</p>
	<video controls style="border:1px solid grey;"></video>
	<p>Taken from:</p>
	<ul id="videos">
	</ul>

	<script src="q.js"></script>
	<script src="largestorage.js"></script>
	<script>

	var desiredCapacity = 125 * 1024 * 1024;
	var storage = new LargeLocalStorage({size: desiredCapacity, name: 'myDb'});
	storage.initialized.then(function(grantedCapacity) {
	//?

	storage.getContents('Files').then(function(content) {
	if (content == undefined) {
	storage.setContents('Files', "the video files").then(function() {
	get_attachments();
	});
	} else {
	get_attachments();
	}
	});
	});

	function get_attachments() {

	// check attachments
	var done = 0;
	var i=0;
	var file;
	for(i=0;i<files.length;i++) {
	file = files[i];
	!function load(file) {storage.getAttachment('Files', file).then(function(videoFile) {
	done = true;
	console.log(file+", "+videoFile);
	if (videoFile != undefined) {
	create_link(file, URL.createObjectURL(videoFile));
	} else {
	prefetch_and_link(file);
	}
	})}(file);

	}
	}

	var files = ["movies/1.mp4", "movies/2.mp4"];
	var urls = {};

	var video = document.querySelector('video');
	var videoList = document.getElementById("videos");

	function play_video(file) {
	video.src = urls[file];
	video.play();
	}

	function create_link(file, url) {

	urls[file] = url;
	var li = document.createElement("LI");
	var a = document.createElement("A");
	var label = document.createTextNode(file);
	a.appendChild(label);
	a.href = "javascript:play_video('"+file+"');";
	li.appendChild(a);
	videoList.appendChild(li);
	}
	function prefetch_and_link(file) {
	prefetch_file(file,
	function(url, file) {
	create_link(file, url);
	},
	function(pc) {
	console.log(pc)
	});
	}

	function prefetch_file(url, fetched_callback, progress_callback) {
	var prev_pc = 0;
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url, true);
	xhr.responseType = 'blob';

	xhr.addEventListener('load', function(event) {
	var status = event.target.status;
	if (status === 200) {
	var URL = window.URL \|\| window.webkitURL;
	var blob_url = URL.createObjectURL(event.target.response);
	storage.setAttachment('Files', url, event.target.response).then(function() {
	console.log("Added "+url+" to storage");
	});
	fetched_callback(blob_url, url);
	} else {
	console.error(event);
	}
	}, false);

	xhr.addEventListener('progress', function(event) {
	if (event.lengthComputable) {
	var pc = Math.round(event.loaded / event.total * 100);
	if (pc !== prev_pc) {
	prev_pc = pc;
	progress_callback(pc);
	}
	}
	}, false);

	xhr.send();
	}
	</script>
	</body>
	</html>