ayosec/Makefile

## application.coffee
$ ->

  requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem
  URL = window.URL || window.webkitURL

  $("ul.items").on("click", "li", (event) -> playFile($(event.target).closest("li")))

  playFile = (item) ->
    item.closest("ul").find(".playing").removeClass("playing")
    item.addClass("playing")
    type = item.data("type")
    url = item.data("url")

    player = document.querySelector(".player")
    player.innerHTML = ""

    console.log("Playing", type, url)
    if type == "application/x-shockwave-flash"
      item = document.createElement("object")
      item.type = "application/x-shockwave-flash"
      item.width = 800
      item.height = 600
      item.data = url
      player.appendChild(item)
    else if type.indexOf("image/") == 0
      item = document.createElement("img")
      item.src = url
      player.appendChild(item)
    else
      item = document.createElement("video")
      item.src = url
      item.play()
      player.appendChild(item)

    return

  nextContent = ->
    items = $("ul.items")
    current = items.find(".playing")

    if(current.length != 0)
      current = current.next("li")

    if(current.length == 0)
      current = items.find("li").first()

    if(current.length != 0)
      playFile(current)

  setInterval(nextContent, 3000)

  initFS = (fs) ->
    resetItems = ->
      items = $("ul.items")
      items.empty()

      add = (type, url) ->
        console.log("Add", type, url)
        item = $("<li>", text: "#{url} (#{type})")
        item.data("url", url)
        item.data("type", type)
        items.append(item)

      add(
        "application/x-shockwave-flash",
        "http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf"
      )

      fs.root.createReader().readEntries (entries) ->
        for entry in entries
          entry.file(
            (file) -> add(file.type, URL.createObjectURL(file)),
            ()     -> console.log("Can't get file", entry, arguments)
          )

      return

    loadSelectedFile = (event) ->
      for file in this.files
        console.log("Add", file)
        type = file.type

        fs.root.getFile file.name, {create: true},
          (fileEntry) ->
            # create a writer that can put data in the file
            fileEntry.createWriter (writer) ->
              writer.onwriteend = -> console.log("finished!")

              # this will read the contents of the current file
              fr = new FileReader
              fr.onloadend = ->
                blob = new Blob([fr.result])
                writer.write blob

              console.log fr.readAsArrayBuffer(file)
          , (e) ->
            console.log("Error after getFile", e)

        resetItems()

    document.
      querySelector("input").
      addEventListener("change", loadSelectedFile, false)


    resetItems()

  requestFileSystem TEMPORARY, 1024*1024,
    initFS,
    (e) -> console.log(e)

## Makefile
application.js: application.coffee
	coffee -c application.coffee

server: application.js
	python -m SimpleHTTPServer 5050

.PHONY: server

## test.html
<html>
  <head>
    <title>POC browser video</title>
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script src="application.js?5"></script>
    <style>
      ul.items { font-size: 8pt; }

      ul.items li:hover {
        color: blue;
        cursor: pointer;
      }

      ul.items li.playing {
        background: #afa;
      }
    </style>
  </head>
  <body>
    <h1>HTML5 local video file player example</h1>
    <div>
      <input type="file" accept="video/*"/>
      <h2>Items</h2>
      <ul class="items"></ul>
    </div>
    <div class="player"></div>
  </body>
</html>
	$ ->

	requestFileSystem = window.requestFileSystem \|\| window.webkitRequestFileSystem
	URL = window.URL \|\| window.webkitURL

	$("ul.items").on("click", "li", (event) -> playFile($(event.target).closest("li")))

	playFile = (item) ->
	item.closest("ul").find(".playing").removeClass("playing")
	item.addClass("playing")
	type = item.data("type")
	url = item.data("url")

	player = document.querySelector(".player")
	player.innerHTML = ""

	console.log("Playing", type, url)
	if type == "application/x-shockwave-flash"
	item = document.createElement("object")
	item.type = "application/x-shockwave-flash"
	item.width = 800
	item.height = 600
	item.data = url
	player.appendChild(item)
	else if type.indexOf("image/") == 0
	item = document.createElement("img")
	item.src = url
	player.appendChild(item)
	else
	item = document.createElement("video")
	item.src = url
	item.play()
	player.appendChild(item)

	return

	nextContent = ->
	items = $("ul.items")
	current = items.find(".playing")

	if(current.length != 0)
	current = current.next("li")

	if(current.length == 0)
	current = items.find("li").first()

	if(current.length != 0)
	playFile(current)

	setInterval(nextContent, 3000)

	initFS = (fs) ->
	resetItems = ->
	items = $("ul.items")
	items.empty()

	add = (type, url) ->
	console.log("Add", type, url)
	item = $("<li>", text: "#{url} (#{type})")
	item.data("url", url)
	item.data("type", type)
	items.append(item)

	add(
	"application/x-shockwave-flash",
	"http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf"
	)

	fs.root.createReader().readEntries (entries) ->
	for entry in entries
	entry.file(
	(file) -> add(file.type, URL.createObjectURL(file)),
	() -> console.log("Can't get file", entry, arguments)
	)

	return

	loadSelectedFile = (event) ->
	for file in this.files
	console.log("Add", file)
	type = file.type

	fs.root.getFile file.name, {create: true},
	(fileEntry) ->
	# create a writer that can put data in the file
	fileEntry.createWriter (writer) ->
	writer.onwriteend = -> console.log("finished!")

	# this will read the contents of the current file
	fr = new FileReader
	fr.onloadend = ->
	blob = new Blob([fr.result])
	writer.write blob

	console.log fr.readAsArrayBuffer(file)
	, (e) ->
	console.log("Error after getFile", e)

	resetItems()

	document.
	querySelector("input").
	addEventListener("change", loadSelectedFile, false)


	resetItems()

	requestFileSystem TEMPORARY, 1024*1024,
	initFS,
	(e) -> console.log(e)
	application.js: application.coffee
	coffee -c application.coffee

	server: application.js
	python -m SimpleHTTPServer 5050

	.PHONY: server
	<html>
	<head>
	<title>POC browser video</title>
	<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
	<script src="application.js?5"></script>
	<style>
	ul.items { font-size: 8pt; }

	ul.items li:hover {
	color: blue;
	cursor: pointer;
	}

	ul.items li.playing {
	background: #afa;
	}
	</style>
	</head>
	<body>
	<h1>HTML5 local video file player example</h1>
	<div>
	<input type="file" accept="video/*"/>
	<h2>Items</h2>
	<ul class="items"></ul>
	</div>
	<div class="player"></div>
	</body>
	</html>