Commit 00b1af43 authored by Michael Murtaugh's avatar Michael Murtaugh
Browse files

playset.js code extracted

parent 4d80be46
......@@ -25,102 +25,15 @@
<script src="../source/jquery.playable.voidplayer.js"></script>
<script src="../source/jquery.playable.youtube.js"></script>
<link rel="stylesheet" href="../css/styles.css" type="text/css" />
<script src="playset.js"></script>
<link rel="stylesheet" href="../css/styles.css" type="text/css" />
<style type="text/css" media="screen">
</style>
<script>
$(document).ready(function () {
SyntaxHighlighter.all();
$(".playset").each(function () {
var context = this;
var scrubber = $(".scrubber", context);
var thumb = $(".thumb", context);
var inpoint = $(".inpoint", context);
var outpoint = $(".outpoint", context);
var playable = $(".playable", context);
var scrubbing, playing_on_scrub_start;
function position_to_time (controlelt) {
var l = parseInt(controlelt.css("left"));
var p = (l / (scrubber.width() - controlelt.width()));
var d = playable.playable("duration") || 3600;
// console.log("p", p, "d", d);
return p*d;
}
function time_to_position (ct, controlelt) {
var d = playable.playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - controlelt.width());
return Math.floor(l);
}
// Respond to events to update interface (optional)
playable.bind('play', function () {
scrubber.addClass("playing");
$(".play", context).text("pause");
}).bind('pause', function () {
scrubber.removeClass("playing");
$(".play", context).text("play");
}).bind("durationchange", function () {
var d = playable.playable("duration");
$(".duration", context).text(d.secondsTo("mm:ss"))
}).bind("timeupdate", function () {
var ct = $(this).playable("currentTime");
$(".currenttime", context).text(ct.secondsTo("mm:ss"))
if (!scrubbing) {
var d = $(this).playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - thumb.width());
thumb.css("left", time_to_position(ct, thumb)+"px");
}
}).bind("waiting", function () {
scrubber.addClass("waiting");
$(".status", context).text("waiting");
}).bind("ready", function () {
scrubber.removeClass("waiting");
$(".status", context).text("");
});
$(".thumb", context).click(function () {
if (!scrubbing) {
// console.log("click");
playable.playable("toggle");
}
}).draggable({
containment: "parent",
start: function () {
// console.log("start");
scrubbing = true;
playing_on_scrub_start = playable.playable("playing");
playable.playable("pause");
},
drag: function () {
playable.playable("currentTime", position_to_time(thumb));
},
stop: function () {
setTimeout(function () { scrubbing = false; }, 10);
if (playing_on_scrub_start) { playable.playable("play"); }
}
});
$(".inpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(inpoint);
// console.log("setting startTime", t.secondsTo("mm:ss"));
playable.playable("startTime", t);
}
});
$(".outpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(outpoint);
// console.log("setting endTime", t.secondsTo("mm:ss"));
playable.playable("endTime", t);
}
});
});
});
</script>
......@@ -133,95 +46,7 @@ $(".playset").each(function () {
<h2>Javascript</h2>
<script type="syntaxhighlighter" class="brush: js">
$(".playset").each(function () {
var context = this;
var scrubber = $(".scrubber", context);
var thumb = $(".thumb", context);
var inpoint = $(".inpoint", context);
var outpoint = $(".outpoint", context);
var playable = $(".playable", context);
var scrubbing, playing_on_scrub_start;
function position_to_time (controlelt) {
var l = parseInt(controlelt.css("left"));
var p = (l / (scrubber.width() - controlelt.width()));
var d = playable.playable("duration") || 3600;
// console.log("p", p, "d", d);
return p*d;
}
function time_to_position (ct, controlelt) {
var d = playable.playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - controlelt.width());
return Math.floor(l);
}
// Respond to events to update interface (optional)
playable.bind('play', function () {
scrubber.addClass("playing");
$(".play", context).text("pause");
}).bind('pause', function () {
scrubber.removeClass("playing");
$(".play", context).text("play");
}).bind("durationchange", function () {
var d = playable.playable("duration");
$(".duration", context).text(d.secondsTo("mm:ss"))
}).bind("timeupdate", function () {
var ct = $(this).playable("currentTime");
$(".currenttime", context).text(ct.secondsTo("mm:ss"))
if (!scrubbing) {
var d = $(this).playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - thumb.width());
thumb.css("left", time_to_position(ct, thumb)+"px");
}
}).bind("waiting", function () {
scrubber.addClass("waiting");
$(".status", context).text("waiting");
}).bind("ready", function () {
scrubber.removeClass("waiting");
$(".status", context).text("");
});
$(".thumb", context).click(function () {
if (!scrubbing) {
// console.log("click");
playable.playable("toggle");
}
}).draggable({
containment: "parent",
start: function () {
// console.log("start");
scrubbing = true;
playing_on_scrub_start = playable.playable("playing");
playable.playable("pause");
},
drag: function () {
playable.playable("currentTime", position_to_time(thumb));
},
stop: function () {
setTimeout(function () { scrubbing = false; }, 10);
if (playing_on_scrub_start) { playable.playable("play"); }
}
});
$(".inpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(inpoint);
// console.log("setting startTime", t.secondsTo("mm:ss"));
playable.playable("startTime", t);
}
});
$(".outpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(outpoint);
// console.log("setting endTime", t.secondsTo("mm:ss"));
playable.playable("endTime", t);
}
});
});
see playset.js
</script>
<h2>Audio/Video</h2>
......
......@@ -25,7 +25,9 @@
<script src="../source/jquery.playable.voidplayer.js"></script>
<script src="../source/jquery.playable.youtube.js"></script>
<link rel="stylesheet" href="../css/styles.css" type="text/css" />
<script src="playset.js"></script>
<link rel="stylesheet" href="../css/styles.css" type="text/css" />
<style type="text/css" media="screen">
</style>
......@@ -40,94 +42,6 @@ $(document).ready(function () {
// $("#michaelmoss").playable("syncwith", "#sadieplant");
// $("#sadieplant").playable("syncwith", "#michaelmoss");
$(".playset").each(function () {
var context = this;
var scrubber = $(".scrubber", context);
var thumb = $(".thumb", context);
var inpoint = $(".inpoint", context);
var outpoint = $(".outpoint", context);
var playable = $(".playable", context);
var scrubbing, playing_on_scrub_start;
function position_to_time (controlelt) {
var l = parseInt(controlelt.css("left"));
var p = (l / (scrubber.width() - controlelt.width()));
var d = playable.playable("duration") || 3600;
// console.log("p", p, "d", d);
return p*d;
}
function time_to_position (ct, controlelt) {
var d = playable.playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - controlelt.width());
return Math.floor(l);
}
// Respond to events to update interface (optional)
playable.bind('play', function () {
scrubber.addClass("playing");
$(".play", context).text("pause");
}).bind('pause', function () {
scrubber.removeClass("playing");
$(".play", context).text("play");
}).bind("durationchange", function () {
var d = playable.playable("duration");
$(".duration", context).text(d.secondsTo("mm:ss"))
}).bind("timeupdate", function () {
var ct = $(this).playable("currentTime");
$(".currenttime", context).text(ct.secondsTo("mm:ss"))
if (!scrubbing) {
var d = $(this).playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - thumb.width());
thumb.css("left", time_to_position(ct, thumb)+"px");
}
}).bind("waiting", function () {
scrubber.addClass("waiting");
$(".status", context).text("waiting");
}).bind("ready", function () {
scrubber.removeClass("waiting");
$(".status", context).text("");
});
$(".thumb", context).click(function () {
if (!scrubbing) {
// console.log("click");
playable.playable("toggle");
}
}).draggable({
containment: "parent",
start: function () {
// console.log("start");
scrubbing = true;
playing_on_scrub_start = playable.playable("playing");
playable.playable("pause");
},
drag: function () {
playable.playable("currentTime", position_to_time(thumb));
},
stop: function () {
setTimeout(function () { scrubbing = false; }, 10);
if (playing_on_scrub_start) { playable.playable("play"); }
}
});
$(".inpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(inpoint);
console.log("setting startTime", t.secondsTo("mm:ss"));
playable.playable("startTime", t);
}
});
$(".outpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(outpoint);
console.log("setting endTime", t.secondsTo("mm:ss"));
playable.playable("endTime", t);
}
});
});
});
</script>
......@@ -141,7 +55,7 @@ $(document).ready(function () {
<h2>Javascript</h2>
<script type="syntaxhighlighter" class="brush: js">
$("#michaelmoss").playable("syncwith", "#sadieplant");
$("#youtube").playable("syncwith", "#ogg");
</script>
<h2>Audio/Video</h2>
......@@ -150,8 +64,7 @@ $("#michaelmoss").playable("syncwith", "#sadieplant");
<tr>
<td>
<div class="playset">
<div>Video: Michael Moss</div>
<div class="playable" data-src="http://www.youtube.com/watch?v=dhOh-5j7kxg"></div>
<div id="youtube" class="playable" data-src="http://www.youtube.com/watch?v=dhOh-5j7kxg"></div>
<div class="scrubber" style="width: 384px">
<div class="timing"><span class="currenttime"></span> <span class="duration"></span></div>
<div class="inpoint"></div>
......@@ -162,8 +75,7 @@ $("#michaelmoss").playable("syncwith", "#sadieplant");
</td>
<td>
<div class="playset">
<div>Video: Sadie Plant</div>
<div class="playable" data-type="video/ogg" data-src="http://video.constantvzw.org/vj10/sadie-plant.ogg"></div>
<div id="ogg" class="playable" data-src="http://video.constantvzw.org/vj12/Michael_Moss.ogv"></div>
<div class="scrubber" style="width: 384px">
<div class="timing"><span class="currenttime"></span> <span class="duration"></span></div>
<div class="inpoint"></div>
......
(function ($) {
$(document).ready(function () {
$(".playset").each(function () {
var context = this;
var scrubber = $(".scrubber", context);
var thumb = $(".thumb", context);
var inpoint = $(".inpoint", context);
var outpoint = $(".outpoint", context);
var playable = $(".playable", context);
var scrubbing, playing_on_scrub_start;
function position_to_time (controlelt) {
var l = parseInt(controlelt.css("left"));
var p = (l / (scrubber.width() - controlelt.width()));
var d = playable.playable("duration") || 3600;
// console.log("p", p, "d", d);
return p*d;
}
function time_to_position (ct, controlelt) {
var d = playable.playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - controlelt.width());
return Math.floor(l);
}
// Respond to events to update interface (optional)
playable.bind('play', function () {
scrubber.addClass("playing");
$(".play", context).text("pause");
}).bind('pause', function () {
scrubber.removeClass("playing");
$(".play", context).text("play");
}).bind("durationchange", function () {
var d = playable.playable("duration");
$(".duration", context).text(d.secondsTo("mm:ss"))
}).bind("timeupdate", function () {
var ct = $(this).playable("currentTime");
$(".currenttime", context).text(ct.secondsTo("mm:ss"))
if (!scrubbing) {
var d = $(this).playable("duration") || 3600;
var l = (ct/d) * (scrubber.width() - thumb.width());
thumb.css("left", time_to_position(ct, thumb)+"px");
}
}).bind("waiting", function () {
scrubber.addClass("waiting");
$(".status", context).text("waiting");
}).bind("ready", function () {
scrubber.removeClass("waiting");
$(".status", context).text("");
});
$(".thumb", context).click(function () {
if (!scrubbing) {
// console.log("click");
playable.playable("toggle");
}
}).draggable({
containment: "parent",
start: function () {
// console.log("start");
scrubbing = true;
playing_on_scrub_start = playable.playable("playing");
playable.playable("pause");
},
drag: function () {
playable.playable("currentTime", position_to_time(thumb));
},
stop: function () {
setTimeout(function () { scrubbing = false; }, 10);
if (playing_on_scrub_start) { playable.playable("play"); }
}
});
$(".inpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(inpoint);
// console.log("setting startTime", t.secondsTo("mm:ss"));
playable.playable("startTime", t);
}
});
$(".outpoint", context).draggable({
containment: "parent",
drag: function () {
var t = position_to_time(outpoint);
// console.log("setting endTime", t.secondsTo("mm:ss"));
playable.playable("endTime", t);
}
});
});
});
})(jQuery);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment