wip

author: Astrid Smith 2015-10-17 11:49:22 -0700
committer: Astrid Smith 2015-10-17 11:49:22 -0700
commit: 6d294b7b066031077177f87c10ccb7a1353edbcb (patch)
tree: c371e96e6a3ce5f970205d25c5a79baeff2509e1
1 files changed, 167 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..58495af
--- /dev/null
+++ b/index.html
@@ -0,0 +1,167 @@
+<html>
+  <head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
+	<title>Youtube Editor</title>
+	<style type="text/css">
+	  td, th { padding: 0.5em; }
+	</style>
+	<script type="text/javascript">
+function onlyUnique(value, index, self) {
+    return self.indexOf(value) === index;
+}
+
+// read a cutlist and turn it into a URL fragment string
+// format: #ytid,ytid,ytid:i-e-s,i-e-s,i-e-s
+// - ytid is a youtube video id
+// - i is an index into the list of ytids
+// - s is a start time in decimal seconds
+// - e is an end time in decimal seconds
+function frag_make(cutlist) {
+	var vid_list = cutlist.map(function(x) {return x.id}).filter(onlyUnique);
+	var cuts = cutlist.map(function(x) {
+		return {id: vid_list.indexOf(x.id),
+				start: x.start,
+				end: x.end}});
+
+	var frag = vid_list.join(",") + ":" +
+		cuts.map(function(x) { return [x.id, x.start, x.end].join("-") }).join(",");
+
+	return frag;
+}
+
+// read a URL fragment string and turn it into a cutlist
+function frag_parse(frag) {
+	var vc
+	vc = frag.split(":");
+	var vids = vc[0].split(",");
+	var cuts = vc[1].split(",");
+
+	var cutlist = cuts.map(function(x) { ise = x.split("-");
+										 return {id:vids[+ise[0]], start:+ise[1], end:+ise[2]}; })
+	return cutlist;
+}
+
+	</script>
+  </head>
+  <body>
+	<h1>Youtube Recutter</h1>
+	<h2>Create and share an edit of any Youtube video</h2>
+
+	<div id="player"></div>
+	<div>
+	  <input type="button" id="play-button" value="play this cut >" onclick="play_from_cutlist();"/><br/>
+	  <input type="button" id="go-button" value="Cut here!" onclick="b_grab();"/>
+	  <input type="button" id="add-button" value="add a blank cut" onclick="cutlist_append_empty();"/>
+	  <input type="button" id="share-button" value="save to url" onclick="b_share();"/><br/>
+
+	</div>
+
+	<hr/>
+	<table id="cutlist">
+	  <tr><th>start</th><th>end</th></tr>
+	</table>
+	<hr/>
+	<p>copyright by chronomex, 2015. all rights reserved.</p>
+
+	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
+	<script type="text/javascript">
+// 2. This code loads the IFrame Player API code asynchronously.
+var tag = document.createElement('script');
+
+tag.src = "https://www.youtube.com/iframe_api";
+var firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+// 3. This function creates an iframe (and player)
+//    after the API code downloads.
+var player;
+function onYouTubeIframeAPIReady() {
+    player = new YT.Player('player', {
+        height: '390',
+        width: '640',
+        events: {
+            'onReady': onPlayerReady,
+            'onStateChange': onPlayerStateChange
+        }
+    });
+}
+
+// 4. The API will call this function when the video player is ready.
+function onPlayerReady(event) {
+}
+
+// 5. The API calls this function when the player's state changes.
+//    The function indicates that when playing a video (state=1),
+//    the player should play for six seconds and then stop.
+var done = false;
+function onPlayerStateChange(event) {
+}
+
+function cutlist_clear() {
+}
+
+function cutlist_append_empty() {
+	var row = '<tr><td><input type="number" min="0" class="b-start" name="start"/></td><td><input type="number" min="0" class="b-end" name="end"/></td></tr>';
+
+	$("#cutlist tbody").append(row);
+	return $("#cutlist tbody tr").last()[0];
+}
+
+function add_start(time) {
+	var row = cutlist_append_empty()
+	row.className = "cut-active";
+	$(row).find(".b-start")[0].value = time;
+}
+
+function add_end(time) {
+	$(".cut-active .b-end")[0].value = time;
+	row[0].className = "";
+}
+
+function b_grab() {
+	row = $(".cut-active").last();
+	time = Math.round(player.getCurrentTime()*100.)/100.
+
+	if (row.size() == 0) { // no cuts are active
+		add_start(time);
+		player.playVideo();
+	} else {
+		player.pauseVideo();
+		add_end(time);
+	}
+
+	return;
+}
+
+function b_share() {
+	var cutlist = $("#cutlist tr").get()
+		.filter(function(x) { return $(x).find("input").size() != 0 })
+		.map(function(x) {
+			return {
+				start: +($(x).find("td input.b-start")[0].value),
+				end: +($(x).find("td input.b-end")[0].value),
+				id: player.getVideoData().video_id
+			}
+		});
+
+	var frag = frag_make(cutlist);
+	history.pushState(null, "Video recut", "#" + frag);
+}
+
+function play_from_cutlist() {
+	
+}
+
+function load_cutlist_from_url() {
+	var cutlist = frag_parse(window.location.hash .replace("#", ""));
+
+	
+}
+	</script>
+  </body>
+</html>
author	Astrid Smith	2015-10-17 11:49:22 -0700
committer	Astrid Smith	2015-10-17 11:49:22 -0700
commit	6d294b7b066031077177f87c10ccb7a1353edbcb (patch)
tree	c371e96e6a3ce5f970205d25c5a79baeff2509e1